script.js

// ==================== DOM Elements ====================
const markdownInput = document.getElementById('markdown-input');
const previewContent = document.getElementById('preview-content');
const btnDownload = document.getElementById('btn-download');
const btnClear = document.getElementById('btn-clear');
const btnUpload = document.getElementById('btn-upload');
const btnExamples = document.getElementById('btn-examples');
const btnAbout = document.getElementById('btn-about');
const btnFullscreen = document.getElementById('btn-fullscreen');
const btnZoomIn = document.getElementById('btn-zoom-in');
const btnZoomOut = document.getElementById('btn-zoom-out');
const btnEditorZoomIn = document.getElementById('btn-editor-zoom-in');
const btnEditorZoomOut = document.getElementById('btn-editor-zoom-out');
const btnNewDoc = document.getElementById('btn-new-doc');
const btnSaveMd = document.getElementById('btn-save-md');
const btnSaveMdFs = document.getElementById('btn-save-md-fs');
const btnDownloadFs = document.getElementById('btn-download-fs');
const fileInput = document.getElementById('file-input');
const pageNumbers = document.getElementById('page-numbers');
const pagelessMode = document.getElementById('pageless-mode');
const startingPage = document.getElementById('starting-page');
const startingNumber = document.getElementById('starting-number');
const startingPageContainer = document.getElementById('starting-page-container');
const startingNumberContainer = document.getElementById('starting-number-container');
const pageNumberStyle = document.getElementById('page-number-style');
const pageNumberStyleContainer = document.getElementById('page-number-style-container');
const pageNumberSize = document.getElementById('page-number-size');
const pageNumberSizeValue = document.getElementById('page-number-size-value');
const pageNumberSizeContainer = document.getElementById('page-number-size-container');
const pageNumberVertical = document.getElementById('page-number-vertical');
const pageNumberHorizontal = document.getElementById('page-number-horizontal');
const pageNumberPositionContainer = document.getElementById('page-number-position-container');
const pageNumberOptions = document.getElementById('page-number-options');
const btnCopyFormatting = document.getElementById('btn-copy-formatting');
const formattingCodeBlock = document.getElementById('formatting-code-block');
const loadingOverlay = document.getElementById('loading-overlay');
const loadingText = document.querySelector('.loading-text');
const loadingSubtext = document.querySelector('.loading-subtext');
const loadingProgressFill = document.getElementById('loading-progress-fill');
const toast = document.getElementById('toast');
const editorProjectStatus = document.getElementById('editor-project-status');

const cssInput = document.getElementById('css-input');
const tabMarkdown = document.getElementById('tab-markdown');
const tabCss = document.getElementById('tab-css');
const editorContainer = document.querySelector('.editor-container');
const editorDivider = document.getElementById('editor-divider');
const editorWrapper = document.querySelector('.editor-wrapper');

const STORAGE_KEYS = {
    markdown: 'md2pdf_content',
    pageNumbers: 'md2pdf_page_numbers',
    startingPage: 'md2pdf_starting_page',
    startingNumber: 'md2pdf_starting_number',
    pageNumberStyle: 'md2pdf_page_number_style',
    pageNumberSize: 'md2pdf_page_number_size',
    pageNumberVertical: 'md2pdf_page_number_vertical',
    pageNumberHorizontal: 'md2pdf_page_number_horizontal',
    pagelessMode: 'md2pdf_pageless_mode',
    customCss: 'md2pdf_custom_css',
    savedDefaultCssHash: 'md2pdf_saved_default_css_hash',
    previewZoom: 'md2pdf_preview_zoom',
    editorZoom: 'md2pdf_editor_zoom',
    editorSplit: 'md2pdf_editor_split',

    // MarkDownForge project persistence (refresh continuity)
    mdfprojDisplayName: 'md2pdf_mdfproj_display_name',
    mdfprojLastSavedHash: 'md2pdf_mdfproj_last_saved_hash',
    mdfprojCss: 'md2pdf_mdfproj_css'
};

let defaultMarkdownCssText = '';
let currentDocBaseName = 'document';
let markdownEditor = null;
let cssEditor = null;
let previewSourceBlocks = [];
let activePreviewSourceBlockId = null;
let editorHoverFrame = null;
let lastEditorHoverLine = null;
let previewRenderVersion = 0;
let previewHoverFrame = null;
let activeEditorSourceBlockId = null;
let activeEditorSourceLineHandles = [];
let selectedPreviewImage = null;
let imageResizeOverlay = null;
let imageResizeHandle = null;
let imageAlignToolbar = null;
let imageResizeState = null;
let imageCropBox = null;
let imageCropState = null;
let imageCropActive = false;
let imageCropRect = null;
let tableResizeState = null;
let previewTableWidthMarkers = new Map();
let previewTableHandleId = 0;

// ==================== MarkDownForge Project (.mdfproj) ====================
// A .mdfproj is a ZIP with:
// - document.md (Markdown + optional embedded CSS comment block)
// - images/ (images referenced by markdown)
// - meta.json

let mdfprojFileHandle = null;
let mdfprojDisplayName = '';
let mdfprojIsModified = false;
let mdfprojIsBusy = false;
let suppressMdfprojModifiedTracking = false;

// When working with a non-project import (.md/.zip), keep the original filename
// visible in the editor header so the user always knows what they're editing.
let nonProjectFileLabel = '';

function isMdfprojActive() {
    return !!(mdfprojFileHandle || (mdfprojDisplayName && String(mdfprojDisplayName).trim()));
}

function isPagelessMode() {
    return !!(pagelessMode && pagelessMode.checked);
}

function getDocumentLayoutState() {
    return {
        pageless: isPagelessMode(),
        pageNumbers: {
            enabled: pageNumbers ? pageNumbers.checked : false,
            startingPage: startingPage ? parseInt(startingPage.value, 10) || 1 : 1,
            startingNumber: startingNumber ? parseInt(startingNumber.value, 10) || 1 : 1,
            style: pageNumberStyle ? pageNumberStyle.value : 'page',
            size: pageNumberSize ? parseInt(pageNumberSize.value, 10) || 10 : 10,
            vertical: pageNumberVertical ? pageNumberVertical.value : 'bottom',
            horizontal: pageNumberHorizontal ? pageNumberHorizontal.value : 'right'
        }
    };
}

function computeMdfprojContentHash() {
    const content = embedCustomCssIntoMarkdown(getMarkdownValue(), getCustomCss());
    return hashText(`${content}\n${JSON.stringify(getDocumentLayoutState())}`);
}

function persistMdfprojStateSnapshot() {
    // Persist name + CSS so refresh doesn't lose project identity/styling.
    if (!isMdfprojActive()) return;
    try {
        const name = String(mdfprojDisplayName || '').trim();
        if (name) localStorage.setItem(STORAGE_KEYS.mdfprojDisplayName, name);
        localStorage.setItem(STORAGE_KEYS.mdfprojCss, String(getCustomCss() || ''));
    } catch { /* ignore */ }
}

function makeFreshDocumentBaseName(prefix = 'document') {
    const d = new Date();
    const pad2 = (n) => String(n).padStart(2, '0');
    const y = d.getFullYear();
    const m = pad2(d.getMonth() + 1);
    const day = pad2(d.getDate());
    const hh = pad2(d.getHours());
    const mm = pad2(d.getMinutes());
    const ss = pad2(d.getSeconds());
    return `${prefix}-${y}${m}${day}-${hh}${mm}${ss}`;
}

async function createNewDocument(options = {}) {
    const silent = !!options.silent;
    const skipPrompt = !!options.skipPrompt;
    // In-app new document flow.
    // If there are unsaved changes, prompt the user to save (OK) or discard (Cancel).
    if (!skipPrompt && shouldWarnBeforeClosingTab()) {
        const saveFirst = confirm('You have unsaved changes. Save before creating a new document?');
        if (saveFirst) {
            try {
                await overwriteMdfproj();
            } catch (e) {
                // User canceled Save As or save failed => keep current document.
                console.warn('New document aborted due to save error/cancel:', e);
                showToast('⚠️ New document canceled');
                return;
            }
        }
        // If user chose not to save: continue and discard.
    }

    try {
        await resetSessionWorkspace();
    } catch { /* ignore */ }

    runWithoutMdfprojModifiedTracking(() => {
        setMarkdownValue('');
        userEditedCss = false;
        setCustomCssProgrammatic(defaultMarkdownCssText);
        if (pagelessMode) pagelessMode.checked = false;
        applyPageNumberVisibility();
    });

    // New doc should not look/behave like the previous imported file.
    nonProjectFileLabel = '';

    setMdfprojHandle(null);
    mdfprojDisplayName = '';
    setMdfprojModified(false);
    clearMdfprojPersistedState();

    // Use a unique default filename so Save As won't suggest overwriting the previous doc.
    currentDocBaseName = makeFreshDocumentBaseName('document');

    resetTextareaView(markdownEditor || markdownInput);
    resetTextareaView(cssEditor || cssInput);
    updatePreview();
    autoSave();
    if (!silent) {
        showToast('📄 New document');
    }
}

function persistMdfprojAsLastSaved() {
    try {
        persistMdfprojStateSnapshot();
        localStorage.setItem(STORAGE_KEYS.mdfprojLastSavedHash, computeMdfprojContentHash());
    } catch { /* ignore */ }
}

function clearMdfprojPersistedState() {
    try {
        localStorage.removeItem(STORAGE_KEYS.mdfprojDisplayName);
        localStorage.removeItem(STORAGE_KEYS.mdfprojLastSavedHash);
        localStorage.removeItem(STORAGE_KEYS.mdfprojCss);
    } catch { /* ignore */ }
}

function supportsFileSystemAccessApi() {
    // Requires secure context (https or localhost) in Chromium-based browsers.
    return !!(window && window.isSecureContext && window.showSaveFilePicker && window.showOpenFilePicker);
}

function stripMdfprojExtension(filename) {
    const raw = String(filename || '').trim();
    if (!raw) return '';
    const justName = raw.split(/[\\/]/).pop() || raw;
    return justName.toLowerCase().endsWith('.mdfproj') ? justName.slice(0, -'.mdfproj'.length) : guessBaseNameFromFilename(justName);
}

function setMdfprojHandle(handle) {
    mdfprojFileHandle = handle || null;
    if (mdfprojFileHandle && mdfprojFileHandle.name) {
        mdfprojDisplayName = stripMdfprojExtension(mdfprojFileHandle.name) || mdfprojDisplayName;
    }
    persistMdfprojStateSnapshot();
    updateMdfprojStatusUi();
}

function setMdfprojDisplayNameFromFilename(filename) {
    const base = stripMdfprojExtension(filename);
    if (base) mdfprojDisplayName = base;
    persistMdfprojStateSnapshot();
    updateMdfprojStatusUi();
}

function setMdfprojModified(isModified) {
    mdfprojIsModified = !!isModified;
    updateMdfprojStatusUi();
}

function markMdfprojModified() {
    if (suppressMdfprojModifiedTracking) return;
    if (mdfprojIsBusy) return;

    // Smart check: compare current content hash with last saved hash
    // If they match, don't mark as modified (handles undo back to saved state)
    try {
        const savedHash = localStorage.getItem(STORAGE_KEYS.mdfprojLastSavedHash);
        if (savedHash) {
            const currentHash = computeMdfprojContentHash();
            const isActuallyModified = currentHash !== savedHash;

            if (mdfprojIsModified !== isActuallyModified) {
                mdfprojIsModified = isActuallyModified;
                updateMdfprojStatusUi();
            }
            return;
        }
    } catch (e) {
        // Fallback to simple marking if hash check fails
        console.warn('Hash check failed:', e);
    }

    // Fallback: mark as modified (for new unsaved files)
    if (!mdfprojIsModified) {
        mdfprojIsModified = true;
        updateMdfprojStatusUi();
    }
}

function updateMdfprojStatusUi() {
    if (!editorProjectStatus) return;

    const isProject = !!(mdfprojFileHandle || (mdfprojDisplayName && String(mdfprojDisplayName).trim()));

    if (isProject) {
        const nameWithExt = mdfprojFileHandle
            ? String(mdfprojFileHandle.name || '').trim()
            : `${String(mdfprojDisplayName || 'Document').trim() || 'Document'}.mdfproj`;
        const displayName = mdfprojIsModified ? `${nameWithExt}*` : nameWithExt;
        editorProjectStatus.textContent = displayName;
        editorProjectStatus.title = displayName;
        return;
    }

    if (nonProjectFileLabel) {
        const label = String(nonProjectFileLabel).trim();
        const displayName = mdfprojIsModified ? `${label}*` : label;
        editorProjectStatus.textContent = displayName;
        editorProjectStatus.title = displayName;
        return;
    }

    editorProjectStatus.textContent = 'Unsaved File';
    editorProjectStatus.title = 'Unsaved File';
}

function shouldWarnBeforeClosingTab() {
    // If a save/import is in progress, avoid trapping the user.
    if (mdfprojIsBusy) return false;

    // Primary signal: modified tracking.
    if (mdfprojIsModified) return true;

    // If the user has already saved/imported a project (name known) and there are no
    // unsaved modifications, do not warn.
    if (!mdfprojFileHandle && mdfprojDisplayName && !mdfprojIsModified) return false;

    // Secondary signal: an unsaved doc that has content (new or imported without a file handle).
    // This covers cases where the file handle is unavailable (non-secure context, non-Chromium, etc.).
    if (!mdfprojFileHandle) {
        const markdownText = String(getMarkdownValue() || '').trim();
        if (markdownText) return true;

        // If user customized CSS (vs. default), consider that meaningful work too.
        const cssText = normalizeCss(getCustomCss());
        const defaultCss = normalizeCss(defaultMarkdownCssText);
        if (cssText && cssText !== defaultCss) return true;
    }

    return false;
}

function bindBeforeUnloadPrompt() {
    // Browser limitation: you cannot show a custom "Save / Don't Save" dialog.
    // This triggers the built-in "Leave site?" confirmation when there are unsaved changes.
    window.addEventListener('beforeunload', (event) => {
        if (!shouldWarnBeforeClosingTab()) return;
        event.preventDefault();
        // Chrome/Edge require returnValue to be set to trigger the prompt.
        event.returnValue = '';
    });
}

function runWithoutMdfprojModifiedTracking(fn) {
    suppressMdfprojModifiedTracking = true;
    try {
        return fn();
    } finally {
        suppressMdfprojModifiedTracking = false;
    }
}

function extractFirstHeadingTitle(markdownText) {
    const src = String(markdownText || '').replace(/\r\n/g, '\n');
    const lines = src.split('\n');
    for (const line of lines) {
        const m = line.match(/^\s*#\s+(.+?)\s*$/);
        if (m && m[1]) return m[1].trim();
    }
    return '';
}

function extractImageRelPathsFromMarkdown(markdownText) {
    const src = String(markdownText || '');
    const found = new Set();

    // Markdown image syntax: ![alt](path "title")
    for (const m of src.matchAll(/!\[[^\]]*\]\(([^\)\s]+)(?:\s+"[^"]*")?\)/g)) {
        const path = String(m[1] || '').trim();
        if (path.toLowerCase().startsWith('images/')) found.add(path);
    }

    // HTML: <img src="...">
    for (const m of src.matchAll(/<img\b[^>]*?\ssrc=("|')([^"']+)(\1)[^>]*>/gi)) {
        const path = String(m[2] || '').trim();
        if (path.toLowerCase().startsWith('images/')) found.add(path);
    }

    return Array.from(found);
}

async function fetchSessionImageBlob(relativePath) {
    const rel = String(relativePath || '').replace(/\\/g, '/');
    if (!rel) throw new Error('Missing image path');

    const sid = currentSessionId || await ensureSession();
    const url = `${getServerOrigin()}/s/${sid}/${rel}`;
    const res = await fetch(url);
    if (!res.ok) throw new Error(`Could not fetch image: ${rel}`);
    return await res.blob();
}

async function buildMdfprojZipBlob() {
    if (typeof JSZip === 'undefined') {
        throw new Error('JSZip is not available');
    }

    const zip = new JSZip();

    const markdownWithCss = embedCustomCssIntoMarkdown(getMarkdownValue(), getCustomCss());
    zip.file('document.md', markdownWithCss);

    const title = extractFirstHeadingTitle(markdownWithCss) || mdfprojDisplayName || currentDocBaseName || 'My Markdown Document';
    const layoutState = getDocumentLayoutState();
    const meta = {
        title,
        lastSaved: new Date().toISOString(),
        version: '1.0',
        author: 'MarkDownForge User',
        layout: {
            pageless: layoutState.pageless
        },
        pageNumbers: layoutState.pageNumbers
    };
    zip.file('meta.json', JSON.stringify(meta, null, 2));

    const imageRelPaths = extractImageRelPathsFromMarkdown(markdownWithCss);
    if (imageRelPaths.length) {
        // Ensure session exists; images are stored server-side in the current app.
        await ensureSession();
        for (const rel of imageRelPaths) {
            const blob = await fetchSessionImageBlob(rel);
            zip.file(rel, blob);
        }
    }

    return await zip.generateAsync({ type: 'blob' });
}

async function writeBlobToFileHandle(fileHandle, blob) {
    const writable = await fileHandle.createWritable();
    try {
        await writable.write(blob);
    } finally {
        await writable.close();
    }
}

async function saveMdfprojAs() {
    // First-time save: show Save As.
    if (!supportsFileSystemAccessApi()) {
        // Fallback: download, but we can't keep a writable handle for overwrite.
        const blob = await buildMdfprojZipBlob();
        const base = (mdfprojDisplayName || currentDocBaseName || 'project').trim() || 'project';
        downloadBlobAsFile(blob, `${base}.mdfproj`);
        setMdfprojDisplayNameFromFilename(`${base}.mdfproj`);
        setMdfprojModified(false);
        persistMdfprojAsLastSaved();
        showToast('💾 Project downloaded (.mdfproj). Use Chrome/Edge for overwrite saves.');
        return;
    }

    const base = (mdfprojDisplayName || currentDocBaseName || 'project').trim() || 'project';
    const handle = await window.showSaveFilePicker({
        suggestedName: `${base}.mdfproj`,
        types: [
            {
                description: 'MarkDownForge Project',
                accept: { 'application/zip': ['.mdfproj'] }
            }
        ]
    });
    setMdfprojHandle(handle);
    setMdfprojDisplayNameFromFilename(handle.name);
    await overwriteMdfproj();
}

async function overwriteMdfproj() {
    if (!mdfprojFileHandle) {
        return saveMdfprojAs();
    }

    if (mdfprojIsBusy) return;
    mdfprojIsBusy = true;
    try {
        const blob = await buildMdfprojZipBlob();
        await writeBlobToFileHandle(mdfprojFileHandle, blob);
        setMdfprojModified(false);
        persistMdfprojAsLastSaved();
        showToast('💾 Project saved');
    } finally {
        mdfprojIsBusy = false;
    }
}

function downloadBlobAsFile(blob, filename) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
}

async function importMdfprojFromFile(file, fileHandle) {
    if (typeof JSZip === 'undefined') {
        showToast('❌ Could not import .mdfproj (JSZip missing)');
        return;
    }

    const buf = await file.arrayBuffer();
    const zip = await JSZip.loadAsync(buf);

    const docFile = zip.file('document.md');
    if (!docFile) throw new Error('Missing document.md in .mdfproj');

    const markdownWithCss = await docFile.async('string');
    const extracted = extractCustomCssFromMarkdown(markdownWithCss);

    // Read metadata if available
    let projectMeta = null;
    const metaFile = zip.file('meta.json');
    if (metaFile) {
        try {
            const metaJson = await metaFile.async('string');
            projectMeta = JSON.parse(metaJson);
        } catch (e) {
            console.warn('Could not parse meta.json:', e);
        }
    }

    // Reset server workspace so imported images don't collide with previous sessions.
    await resetSessionWorkspace();

    // Upload images to the current session and rewrite markdown to the new relative paths.
    // (Server assigns filenames; we remap references.)
    let rewrittenMarkdown = extracted.markdown;
    const imageFiles = Object.values(zip.files).filter((f) => f && !f.dir && String(f.name || '').toLowerCase().startsWith('images/'));

    const guessMimeFromImagePath = (path) => {
        const p = String(path || '').toLowerCase();
        if (p.endsWith('.png')) return 'image/png';
        if (p.endsWith('.jpg') || p.endsWith('.jpeg')) return 'image/jpeg';
        if (p.endsWith('.gif')) return 'image/gif';
        if (p.endsWith('.webp')) return 'image/webp';
        if (p.endsWith('.svg')) return 'image/svg+xml';
        return 'image/png';
    };

    if (imageFiles.length) {
        showToast('📦 Importing project images...');
        for (const entry of imageFiles) {
            const oldRel = String(entry.name || '').replace(/\\/g, '/');
            const buf = await entry.async('arraybuffer');
            const blob = new Blob([buf], { type: guessMimeFromImagePath(oldRel) });
            const newRel = await uploadPastedImageBlob(blob);
            // Replace all occurrences of the old relative path.
            rewrittenMarkdown = rewrittenMarkdown.split(oldRel).join(newRel);
        }
    }

    runWithoutMdfprojModifiedTracking(() => {
        setMarkdownValue(rewrittenMarkdown);
        userEditedCss = !!(extracted.css && normalizeCss(extracted.css) && normalizeCss(extracted.css) !== normalizeCss(defaultMarkdownCssText));
        setCustomCssProgrammatic(extracted.css || defaultMarkdownCssText);
    });

    resetTextareaView(markdownEditor || markdownInput);
    resetTextareaView(cssEditor || cssInput);

    // Restore page layout + page number settings from metadata
    if (pagelessMode) {
        pagelessMode.checked = !!(projectMeta && projectMeta.layout && projectMeta.layout.pageless);
    }

    if (projectMeta && projectMeta.pageNumbers) {
        if (pageNumbers) {
            pageNumbers.checked = projectMeta.pageNumbers.enabled || false;
        }
        if (startingPage && projectMeta.pageNumbers.startingPage) {
            startingPage.value = projectMeta.pageNumbers.startingPage;
        }
        if (startingNumber && projectMeta.pageNumbers.startingNumber) {
            startingNumber.value = projectMeta.pageNumbers.startingNumber;
        }
        if (pageNumberStyle && projectMeta.pageNumbers.style) {
            pageNumberStyle.value = projectMeta.pageNumbers.style;
        }
        if (pageNumberSize && projectMeta.pageNumbers.size) pageNumberSize.value = projectMeta.pageNumbers.size;
        if (pageNumberVertical && projectMeta.pageNumbers.vertical) pageNumberVertical.value = projectMeta.pageNumbers.vertical;
        if (pageNumberHorizontal && projectMeta.pageNumbers.horizontal) pageNumberHorizontal.value = projectMeta.pageNumbers.horizontal;
        syncPageNumberSizeOutput();
    }

    // Update UI visibility for page number controls after pageless restoration.
    applyPageNumberVisibility();

    updatePreview();
    autoSave();

    setMdfprojHandle(fileHandle || null);
    setMdfprojDisplayNameFromFilename(file.name);
    setMdfprojModified(false);
    persistMdfprojAsLastSaved();
    currentDocBaseName = stripMdfprojExtension(file.name) || currentDocBaseName;
    showToast('✅ Project imported (.mdfproj)');
}

// CSS tab persistence:
// Only persist CSS when the user actually edits the CSS tab.
// This prevents an old bundled default from getting stuck in localStorage and
// overriding edits made to markdown-styles.css on disk.
let userEditedCss = false;
let suppressCssTracking = false;

function looksLikeBundledDefaultCss(cssText) {
    const t = String(cssText || '').toLowerCase();
    return t.includes('markdown content styles') && t.includes('these styles are applied to the preview and pdf output');
}

function setCustomCssProgrammatic(value) {
    suppressCssTracking = true;
    try {
        setCustomCss(value || '');
    } finally {
        suppressCssTracking = false;
    }
}

function hashText(text) {
    // Non-crypto hash (fast) used only for cache invalidation.
    const s = String(text || '');
    let h = 2166136261;
    for (let i = 0; i < s.length; i++) {
        h ^= s.charCodeAt(i);
        h = Math.imul(h, 16777619);
    }
    return String(h >>> 0);
}

// ==================== Session Workspace (server-side) ====================
// We keep a per-tab session workspace on the FastAPI server.
// Markdown stores images as relative paths (images/<name>), but preview/PDF need
// absolute URLs to fetch from the server securely.
const SESSION_STORAGE_KEY = 'md2pdf_session_id';
let currentSessionId = null;

function bestEffortDeleteSession(sessionId) {
    const sid = sessionId || currentSessionId;
    if (!sid) return;
    const url = getApiUrl(`/api/session/${sid}/delete`);

    try {
        if (navigator && typeof navigator.sendBeacon === 'function') {
            // sendBeacon is designed for page unload and doesn't block.
            const blob = new Blob([], { type: 'text/plain' });
            navigator.sendBeacon(url, blob);
            return;
        }
    } catch { /* ignore */ }

    try {
        // keepalive allows the request to outlive the page during unload.
        fetch(url, { method: 'POST', keepalive: true }).catch(() => { /* ignore */ });
    } catch { /* ignore */ }
}

function bestEffortPruneOtherSessions(keepSessionId) {
    const sid = keepSessionId || currentSessionId;
    if (!sid) return;
    const url = getApiUrl('/api/sessions/prune');
    try {
        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ keep_session_id: sid })
        }).catch(() => { /* ignore */ });
    } catch { /* ignore */ }
}

function getServerOrigin() {
    const protocol = window.location && window.location.protocol;
    if (protocol === 'http:' || protocol === 'https:') return window.location.origin;
    // When opened from disk (file://), use the default dev server.
    return 'http://127.0.0.1:8010';
}

function getApiUrl(path) {
    const base = getServerOrigin();
    if (path.startsWith('http://') || path.startsWith('https://')) return path;
    if (!path.startsWith('/')) path = '/' + path;
    return base + path;
}

async function ensureSession() {
    const candidates = [];
    const fromSession = sessionStorage.getItem(SESSION_STORAGE_KEY);
    if (fromSession) candidates.push(fromSession);

    // Always treat a new tab/window as a new document session.
    // If older builds persisted a session id in localStorage, clear it best-effort.
    try { localStorage.removeItem('md2pdf_persist_session_id'); } catch { /* ignore */ }

    for (const existing of candidates) {
        try {
            const res = await fetch(getApiUrl(`/api/session/${existing}/touch`), { method: 'POST' });
            if (res.ok) {
                currentSessionId = existing;
                sessionStorage.setItem(SESSION_STORAGE_KEY, existing);
                bestEffortPruneOtherSessions(existing);
                return existing;
            }
        } catch { /* ignore */ }

        // If the session exists in storage but cannot be touched, it's likely stale.
        // Best-effort delete so we don't accumulate abandoned workspaces.
        bestEffortDeleteSession(existing);
    }

    const res = await fetch(getApiUrl('/api/session/new'), { method: 'POST' });
    if (!res.ok) throw new Error('Could not create session');
    const json = await res.json();
    currentSessionId = json.session_id;
    sessionStorage.setItem(SESSION_STORAGE_KEY, currentSessionId);
    bestEffortPruneOtherSessions(currentSessionId);
    return currentSessionId;
}

async function resetSessionWorkspace() {
    const sid = currentSessionId || sessionStorage.getItem(SESSION_STORAGE_KEY);
    if (!sid) return ensureSession();
    try {
        const res = await fetch(getApiUrl(`/api/session/${sid}/reset`), { method: 'POST' });
        if (!res.ok) throw new Error('Reset failed');
        const json = await res.json();
        currentSessionId = json.session_id;
        sessionStorage.setItem(SESSION_STORAGE_KEY, currentSessionId);
        return currentSessionId;
    } catch {
        // Fall back to a new session.
        sessionStorage.removeItem(SESSION_STORAGE_KEY);
        currentSessionId = null;
        return ensureSession();
    }
}

function rewriteSessionImageUrlsInHtml(html, sessionId) {
    const sid = sessionId || currentSessionId;
    if (!sid) return html;
    const origin = getServerOrigin();
    // Convert src="images/foo.png" or src='images/foo.png' into an absolute URL.
    return String(html || '').replace(
        /(<img\b[^>]*?\ssrc=)(["'])(images\/[^"']+)(\2)/gi,
        `$1$2${origin}/s/${sid}/$3$4`
    );
}

function isCodeMirrorInstance(target) {
    return !!(target && typeof target.getDoc === 'function');
}

function getMarkdownValue() {
    return markdownEditor ? markdownEditor.getValue() : markdownInput.value;
}

function setMarkdownValue(value) {
    const nextValue = value || '';
    if (markdownEditor) {
        markdownEditor.setValue(nextValue);
    } else {
        markdownInput.value = nextValue;
    }
}

function getCssValue() {
    if (cssEditor) return cssEditor.getValue();
    return (cssInput && typeof cssInput.value === 'string') ? cssInput.value : '';
}

function setCssValue(value) {
    const nextValue = value || '';
    if (cssEditor) {
        cssEditor.setValue(nextValue);
        // Refresh CodeMirror to ensure display is updated
        setTimeout(() => {
            if (cssEditor) cssEditor.refresh();
        }, 0);
    } else if (cssInput) {
        cssInput.value = nextValue;
    }
}

function normalizeCss(css) {
    return String(css || '').replace(/\r\n/g, '\n').trim();
}

async function initDefaultMarkdownCss() {
    // Prefer fetching the raw file when served over http(s) so formatting/comments are preserved.
    // When opened via file://, fetch(file://...) is blocked; we fall back to cssRules (which is normalized).
    let css = '';

    if (window.location && (window.location.protocol === 'http:' || window.location.protocol === 'https:')) {
        // Cache-bust so edits to markdown-styles.css are reflected immediately.
        css = await loadCSS('markdown-styles.css', true);
    }
    if (!css) {
        css = getLoadedStylesheetText('markdown-styles.css');
    }

    defaultMarkdownCssText = css || '';
}

function guessBaseNameFromFilename(filename) {
    const raw = String(filename || '').trim();
    if (!raw) return 'document';
    const justName = raw.split(/[\\/]/).pop() || raw;
    const dotIndex = justName.lastIndexOf('.');
    const base = dotIndex > 0 ? justName.slice(0, dotIndex) : justName;
    return base.trim() || 'document';
}

const EMBED_MARKER_START = '<!-- MD2PDF_CUSTOM_CSS\n';
const EMBED_MARKER_END = '\nMD2PDF_CUSTOM_CSS -->';

function getCustomCss() {
    return getCssValue();
}

function setCustomCss(value) {
    setCssValue(value || '');
    applyCustomCssToPreview();
}

function ensureCustomCssStyleEl() {
    let el = document.getElementById('custom-css-style');
    if (!el) {
        el = document.createElement('style');
        el.id = 'custom-css-style';
        document.head.appendChild(el);
    }
    return el;
}

function applyCustomCssToPreview() {
    const el = ensureCustomCssStyleEl();
    const css = getCustomCss();
    el.textContent = scopeDocumentCss(css || '');
}

function splitCssSelectorList(selectorText) {
    const selectors = [];
    let start = 0;
    let depth = 0;
    let quote = '';
    const text = String(selectorText || '');

    for (let i = 0; i < text.length; i++) {
        const char = text[i];
        if (quote) {
            if (char === quote && text[i - 1] !== '\\') quote = '';
            continue;
        }
        if (char === '"' || char === "'") {
            quote = char;
            continue;
        }
        if (char === '(' || char === '[') depth++;
        if (char === ')' || char === ']') depth = Math.max(0, depth - 1);
        if (char === ',' && depth === 0) {
            selectors.push(text.slice(start, i).trim());
            start = i + 1;
        }
    }
    selectors.push(text.slice(start).trim());
    return selectors.filter(Boolean);
}

function scopeDocumentSelector(selector) {
    const scope = ':is(#preview-content, #preview-measure-root)';
    let value = String(selector || '').trim();
    if (!value) return '';

    if (/^(?:html|body|:root)(?=$|[\s>+~.#[:])/i.test(value)) {
        value = value.replace(/^(?:html|body|:root)/i, scope);
        return value;
    }
    if (/^(?:#preview-content|\.preview-content)(?=$|[\s>+~.#[:])/i.test(value)) {
        value = value.replace(/^(?:#preview-content|\.preview-content)/i, scope);
        return value;
    }
    return `${scope} ${value}`;
}

function scopeDocumentCss(cssText) {
    const source = String(cssText || '');
    if (!source.trim()) return '';

    const parser = document.createElement('style');
    parser.media = 'not all';
    parser.textContent = source;
    document.head.appendChild(parser);

    const serializeRule = (rule, insideKeyframes = false) => {
        if (!rule) return '';
        if (!insideKeyframes && rule.type === CSSRule.STYLE_RULE && rule.selectorText) {
            const selectors = splitCssSelectorList(rule.selectorText)
                .map(scopeDocumentSelector)
                .filter(Boolean)
                .join(', ');
            return selectors ? `${selectors} { ${rule.style.cssText} }` : '';
        }

        const isKeyframes = typeof CSSRule.KEYFRAMES_RULE === 'number' && rule.type === CSSRule.KEYFRAMES_RULE;
        if (rule.cssRules && !isKeyframes) {
            const cssText = String(rule.cssText || '');
            const header = cssText.slice(0, cssText.indexOf('{')).trim();
            const children = Array.from(rule.cssRules).map((child) => serializeRule(child, false)).join('\n');
            return `${header} {\n${children}\n}`;
        }

        return rule.cssText || '';
    };

    let scoped = '';
    try {
        scoped = Array.from(parser.sheet?.cssRules || []).map((rule) => serializeRule(rule)).join('\n');
    } catch (error) {
        console.warn('Could not scope document CSS:', error);
    }
    parser.remove();
    return scoped;
}

function resetTextareaView(textarea) {
    if (!textarea) return;
    if (isCodeMirrorInstance(textarea)) {
        const doc = textarea.getDoc();
        doc.setCursor({ line: 0, ch: 0 });
        textarea.scrollTo(0, 0);
        return;
    }
    try {
        textarea.selectionStart = 0;
        textarea.selectionEnd = 0;
        textarea.scrollTop = 0;
        textarea.scrollLeft = 0;
    } catch { /* ignore */ }
}

function applyPageNumberVisibility() {
    if (!previewContent) return;
    const pageless = isPagelessMode();
    const isChecked = !!(pageNumbers && pageNumbers.checked && !pageless);
    previewContent.classList.toggle('show-page-numbers', isChecked);
    previewContent.classList.toggle('is-pageless-mode', pageless);
    previewContent.dataset.layoutMode = pageless ? 'pageless' : 'paged';

    if (pageNumberOptions) pageNumberOptions.hidden = !isChecked;

    const pageNumberPanel = pageNumbers ? pageNumbers.closest('.page-number-panel') : null;
    if (pageNumberPanel) {
        pageNumberPanel.classList.toggle('is-disabled', pageless);
        pageNumberPanel.setAttribute('aria-disabled', pageless ? 'true' : 'false');
    }

    if (pageNumbers) pageNumbers.disabled = pageless;
    [
        startingPage,
        startingNumber,
        pageNumberStyle,
        pageNumberSize,
        pageNumberVertical,
        pageNumberHorizontal
    ].forEach((control) => {
        if (control) control.disabled = pageless;
    });
}

function syncPageNumberSizeOutput() {
    if (pageNumberSizeValue && pageNumberSize) pageNumberSizeValue.textContent = `${pageNumberSize.value}px`;
}

function getStartingPage() {
    if (!startingPage) return 1;
    const val = parseInt(startingPage.value, 10);
    return (Number.isFinite(val) && val >= 1) ? val : 1;
}

function getStartingNumber() {
    if (!startingNumber) return 1;
    const val = parseInt(startingNumber.value, 10);
    return (Number.isFinite(val) && val >= 1) ? val : 1;
}

// ==================== Editor Context Menu ====================
const editorContextMenu = document.getElementById('editor-context-menu');
let editorContextMenuBound = false;
let lastContextMenuTarget = null;
let lastMarkdownSelectionState = null;
let lastContextMenuShownAt = 0;
let contextMenuHideTimer = null;
let editorContextSubmenu1 = null;
let editorContextSubmenu2 = null;
let contextSubmenuHideTimer = null;

function isMacPlatform() {
    try {
        const p = String(navigator.platform || '').toLowerCase();
        const ua = String(navigator.userAgent || '').toLowerCase();
        return p.includes('mac') || ua.includes('mac os');
    } catch {
        return false;
    }
}

function formatKeyShortcut(key) {
    // Display-only helper.
    return isMacPlatform() ? `⌘${key}` : `Ctrl+${key}`;
}

function editorHasSelection(editorTarget) {
    if (!editorTarget) return false;
    if (isCodeMirrorInstance(editorTarget)) {
        const selected = editorTarget.getDoc().getSelection();
        return !!selected;
    }
    try {
        return editorTarget.selectionStart !== editorTarget.selectionEnd;
    } catch {
        return false;
    }
}

function getSelectionState(editorTarget) {
    if (!editorTarget) return null;
    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const text = doc.getSelection();
        const ranges = doc.listSelections();
        return {
            kind: 'codemirror',
            text: text || '',
            ranges: Array.isArray(ranges) ? ranges : []
        };
    }
    try {
        const start = Number(editorTarget.selectionStart);
        const end = Number(editorTarget.selectionEnd);
        const value = String(editorTarget.value || '');
        const text = (Number.isFinite(start) && Number.isFinite(end) && end > start) ? value.substring(start, end) : '';
        return { kind: 'textarea', text, start, end };
    } catch {
        return null;
    }
}

function saveLastSelectionFromEditor(editorTarget) {
    const state = getSelectionState(editorTarget);
    if (!state) return;
    // Cache non-empty selection so touchpad right-click doesn't lose it.
    // If selection is empty (user clicked elsewhere), clear the cache so we don't
    // accidentally resurrect an old selection on right-click.
    if (state.text) {
        lastMarkdownSelectionState = state;
    } else {
        lastMarkdownSelectionState = null;
    }
}

function restoreSelection(editorTarget, state) {
    if (!editorTarget || !state) return;
    if (isCodeMirrorInstance(editorTarget) && state.kind === 'codemirror') {
        try {
            const doc = editorTarget.getDoc();
            if (Array.isArray(state.ranges) && state.ranges.length) {
                doc.setSelections(state.ranges);
            }
            editorTarget.focus();
        } catch { /* ignore */ }
        return;
    }
    if (!isCodeMirrorInstance(editorTarget) && state.kind === 'textarea') {
        try {
            if (Number.isFinite(state.start) && Number.isFinite(state.end)) {
                editorTarget.focus();
                editorTarget.selectionStart = state.start;
                editorTarget.selectionEnd = state.end;
            }
        } catch { /* ignore */ }
    }
}

function applyHeadingToSelection(editorTarget, level) {
    const lvl = Math.max(1, Math.min(6, Number(level) || 1));
    const prefix = '#'.repeat(lvl) + ' ';

    const rewriteLines = (text) => {
        const raw = String(text || '');
        const lines = raw.split('\n');
        const allAlready = lines.length > 0 && lines.every(l => l.startsWith(prefix));
        return lines
            .map((line) => {
                if (allAlready) {
                    return line.startsWith(prefix) ? line.slice(prefix.length) : line;
                }
                // Normalize: strip any existing heading prefix then apply.
                const without = line.replace(/^\s{0,3}#{1,6}\s+/, '');
                return prefix + without;
            })
            .join('\n');
    };

    const applyToCurrentLine = () => {
        if (isCodeMirrorInstance(editorTarget)) {
            const doc = editorTarget.getDoc();
            const cur = doc.getCursor();
            const lineText = doc.getLine(cur.line) || '';
            const already = lineText.startsWith(prefix);
            const nextLine = already
                ? (lineText.startsWith(prefix) ? lineText.slice(prefix.length) : lineText)
                : (prefix + lineText.replace(/^\s{0,3}#{1,6}\s+/, ''));
            doc.replaceRange(nextLine, { line: cur.line, ch: 0 }, { line: cur.line, ch: lineText.length }, 'insert');
            // Keep cursor roughly in place, but after prefix if we just added it.
            const nextCh = already ? Math.max(0, cur.ch - prefix.length) : (cur.ch + prefix.length);
            doc.setCursor({ line: cur.line, ch: Math.min(nextLine.length, Math.max(0, nextCh)) });
            editorTarget.focus();
            return;
        }

        const value = String(editorTarget.value || '');
        const cur = Number(editorTarget.selectionStart) || 0;
        const lineStart = value.lastIndexOf('\n', cur - 1) + 1;
        const lineEndIdx = value.indexOf('\n', cur);
        const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
        const lineText = value.slice(lineStart, lineEnd);
        const already = lineText.startsWith(prefix);
        const nextLine = already
            ? (lineText.startsWith(prefix) ? lineText.slice(prefix.length) : lineText)
            : (prefix + lineText.replace(/^\s{0,3}#{1,6}\s+/, ''));
        const nextValue = value.slice(0, lineStart) + nextLine + value.slice(lineEnd);
        editorTarget.value = nextValue;
        const nextCh = already ? Math.max(0, (cur - lineStart) - prefix.length) : ((cur - lineStart) + prefix.length);
        const nextAbs = lineStart + Math.min(nextLine.length, Math.max(0, nextCh));
        try {
            editorTarget.selectionStart = nextAbs;
            editorTarget.selectionEnd = nextAbs;
        } catch { /* ignore */ }
        editorTarget.focus();
    };

    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const selected = doc.getSelection();
        if (!selected) {
            applyToCurrentLine();
            return;
        }
        doc.replaceSelection(rewriteLines(selected));
        editorTarget.focus();
        return;
    }

    const start = editorTarget.selectionStart;
    const end = editorTarget.selectionEnd;
    const value = editorTarget.value || '';
    const selected = value.substring(start, end);
    if (!selected) {
        applyToCurrentLine();
        return;
    }
    const replacement = rewriteLines(selected);
    if (!document.execCommand('insertText', false, replacement)) {
        editorTarget.value = value.substring(0, start) + replacement + value.substring(end);
    }
    editorTarget.selectionStart = start;
    editorTarget.selectionEnd = start + replacement.length;
}

function toggleLinePrefixOnSelection(editorTarget, prefix) {
    const p = String(prefix || '');
    if (!p) return;

    const rewriteLines = (text) => {
        const raw = String(text || '');
        const lines = raw.split('\n');
        const nonEmpty = lines.filter(l => l.trim().length > 0);
        const allPrefixed = nonEmpty.length > 0 && nonEmpty.every(l => l.startsWith(p));

        return lines
            .map((line) => {
                if (!line.trim()) return line;
                if (allPrefixed) {
                    return line.startsWith(p) ? line.slice(p.length) : line;
                }
                return p + line;
            })
            .join('\n');
    };

    const toggleCurrentLine = () => {
        if (isCodeMirrorInstance(editorTarget)) {
            const doc = editorTarget.getDoc();
            const cur = doc.getCursor();
            const lineText = doc.getLine(cur.line) || '';
            const already = lineText.startsWith(p);
            const nextLine = already ? lineText.slice(p.length) : (p + lineText);
            doc.replaceRange(nextLine, { line: cur.line, ch: 0 }, { line: cur.line, ch: lineText.length }, 'insert');
            const nextCh = already ? Math.max(0, cur.ch - p.length) : (cur.ch + p.length);
            doc.setCursor({ line: cur.line, ch: Math.min(nextLine.length, Math.max(0, nextCh)) });
            editorTarget.focus();
            return;
        }

        const value = String(editorTarget.value || '');
        const cur = Number(editorTarget.selectionStart) || 0;
        const lineStart = value.lastIndexOf('\n', cur - 1) + 1;
        const lineEndIdx = value.indexOf('\n', cur);
        const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
        const lineText = value.slice(lineStart, lineEnd);
        const already = lineText.startsWith(p);
        const nextLine = already ? lineText.slice(p.length) : (p + lineText);
        editorTarget.value = value.slice(0, lineStart) + nextLine + value.slice(lineEnd);
        const nextCh = already ? Math.max(0, (cur - lineStart) - p.length) : ((cur - lineStart) + p.length);
        const nextAbs = lineStart + Math.min(nextLine.length, Math.max(0, nextCh));
        try {
            editorTarget.selectionStart = nextAbs;
            editorTarget.selectionEnd = nextAbs;
        } catch { /* ignore */ }
        editorTarget.focus();
    };

    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const selected = doc.getSelection();
        if (!selected) {
            toggleCurrentLine();
            return;
        }
        doc.replaceSelection(rewriteLines(selected));
        editorTarget.focus();
        return;
    }

    const start = editorTarget.selectionStart;
    const end = editorTarget.selectionEnd;
    const value = editorTarget.value || '';
    const selected = value.substring(start, end);
    if (!selected) {
        toggleCurrentLine();
        return;
    }
    const replacement = rewriteLines(selected);
    if (!document.execCommand('insertText', false, replacement)) {
        editorTarget.value = value.substring(0, start) + replacement + value.substring(end);
    }
    editorTarget.selectionStart = start;
    editorTarget.selectionEnd = start + replacement.length;
}

function wrapSelectionAsLink(editorTarget) {
    const wrap = (sel) => `[${sel || 'text'}](https://example.com)`;

    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const selected = doc.getSelection();
        const cursorFrom = doc.getCursor('from');
        const cursorTo = doc.getCursor('to');
        const replacement = wrap(selected);
        doc.replaceRange(replacement, cursorFrom, cursorTo, 'insert');

        // Select the link text so the user can type immediately.
        const linkText = selected || 'text';
        if (!String(linkText).includes('\n')) {
            const textStartCh = cursorFrom.ch + 1;
            const textEndCh = textStartCh + linkText.length;
            doc.setSelection({ line: cursorFrom.line, ch: textStartCh }, { line: cursorFrom.line, ch: textEndCh });
        } else {
            doc.setCursor({ line: cursorFrom.line, ch: cursorFrom.ch + replacement.length });
        }
        editorTarget.focus();
        return;
    }

    const start = editorTarget.selectionStart;
    const end = editorTarget.selectionEnd;
    const value = editorTarget.value || '';
    const selected = value.substring(start, end);
    const replacement = wrap(selected);
    if (!document.execCommand('insertText', false, replacement)) {
        editorTarget.value = value.substring(0, start) + replacement + value.substring(end);
    }
    // Keep just the link text selected.
    const linkText = selected || 'text';
    editorTarget.selectionStart = start + 1;
    editorTarget.selectionEnd = start + 1 + linkText.length;
}

function getLineIndentationFromValue(value, cursorIndex) {
    const text = String(value || '');
    const idx = Math.max(0, Math.min(text.length, Number(cursorIndex) || 0));
    const lineStart = text.lastIndexOf('\n', idx - 1) + 1;
    const line = text.slice(lineStart, idx);
    const m = line.match(/^\s*/);
    return m ? m[0] : '';
}

function buildLayoutRowSnippet(colCount, baseIndent) {
    const cols = Math.max(2, Math.min(12, Number(colCount) || 2));
    const indent0 = String(baseIndent || '');
    const indent1 = indent0 + '    ';
    const indent2 = indent1 + '    ';

    const lines = [];
    lines.push(`${indent0}<row>`);
    for (let i = 0; i < cols; i++) {
        lines.push(`${indent1}<col>`);
        lines.push(`${indent2}`);
        lines.push(`${indent1}</col>`);
    }
    lines.push(`${indent0}</row>`);

    // Cursor: inside the first <col> on the blank indented line.
    const cursorLineOffset = 2; // <row> (0), <col> (1), blank (2)
    const cursorCh = indent2.length;
    return {
        text: lines.join('\n'),
        cursorLineOffset,
        cursorCh
    };
}

function insertSnippetIntoEditor(editorTarget, snippet, cursorLineOffset, cursorCh) {
    const text = String(snippet || '');

    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const from = doc.getCursor('from');
        const to = doc.getCursor('to');
        doc.replaceRange(text, from, to, 'insert');
        const line = from.line + (Number(cursorLineOffset) || 0);
        const ch = Number(cursorCh) || 0;
        doc.setCursor({ line, ch });
        editorTarget.focus();
        return;
    }

    // textarea
    if (editorTarget && typeof editorTarget.value === 'string') {
        const value = String(editorTarget.value || '');
        const start = Number(editorTarget.selectionStart) || 0;
        const end = Number(editorTarget.selectionEnd) || 0;
        const next = value.slice(0, start) + text + value.slice(end);
        editorTarget.value = next;

        // Compute cursor offset inside inserted snippet.
        const lines = text.split('\n');
        const lineOffset = Math.max(0, Number(cursorLineOffset) || 0);
        let offset = 0;
        for (let i = 0; i < Math.min(lineOffset, lines.length); i++) {
            offset += lines[i].length + 1; // +1 for '\n'
        }
        offset += Math.max(0, Number(cursorCh) || 0);
        const cursorAbs = start + offset;
        editorTarget.focus();
        try {
            editorTarget.selectionStart = cursorAbs;
            editorTarget.selectionEnd = cursorAbs;
        } catch { /* ignore */ }
        return;
    }

    // contenteditable (best-effort)
    try {
        const sel = window.getSelection();
        if (!sel || sel.rangeCount === 0) return;
        const range = sel.getRangeAt(0);
        range.deleteContents();
        const node = document.createTextNode(text);
        range.insertNode(node);
        // Place caret at end of inserted node (cursor placement inside snippet is non-trivial for plain text).
        range.setStart(node, node.length);
        range.setEnd(node, node.length);
        sel.removeAllRanges();
        sel.addRange(range);
    } catch { /* ignore */ }
}

function insertLayoutRow(editorTarget, colCount) {
    const cols = Math.max(2, Math.min(4, Number(colCount) || 2));

    if (isCodeMirrorInstance(editorTarget)) {
        const doc = editorTarget.getDoc();
        const cur = doc.getCursor();
        const lineText = doc.getLine(cur.line) || '';
        const baseIndent = (lineText.match(/^\s*/) || [''])[0];
        const snip = buildLayoutRowSnippet(cols, baseIndent);

        // If cursor is in the middle of non-whitespace, insert a newline first.
        const left = lineText.slice(0, cur.ch);
        const needsLeadNewline = left.trim().length > 0;
        const prefix = needsLeadNewline ? `\n${baseIndent}` : '';

        insertSnippetIntoEditor(
            editorTarget,
            prefix + snip.text,
            snip.cursorLineOffset + (needsLeadNewline ? 1 : 0),
            snip.cursorCh
        );
        return;
    }

    if (editorTarget && typeof editorTarget.value === 'string') {
        const start = Number(editorTarget.selectionStart) || 0;
        const value = String(editorTarget.value || '');
        const baseIndent = getLineIndentationFromValue(value, start);
        const snip = buildLayoutRowSnippet(cols, baseIndent);

        const lineStart = value.lastIndexOf('\n', start - 1) + 1;
        const left = value.slice(lineStart, start);
        const needsLeadNewline = left.trim().length > 0;
        const prefix = needsLeadNewline ? `\n${baseIndent}` : '';

        insertSnippetIntoEditor(
            editorTarget,
            prefix + snip.text,
            snip.cursorLineOffset + (needsLeadNewline ? 1 : 0),
            snip.cursorCh
        );
        return;
    }

    // contenteditable fallback
    const snip = buildLayoutRowSnippet(cols, '');
    insertSnippetIntoEditor(editorTarget, snip.text, snip.cursorLineOffset, snip.cursorCh);
}

function hideEditorContextMenu() {
    if (!editorContextMenu) return;

    // If already hidden, nothing to do.
    if (editorContextMenu.hidden) {
        lastContextMenuTarget = null;
        return;
    }

    editorContextMenu.setAttribute('aria-hidden', 'true');
    editorContextMenu.classList.remove('is-open');

    const hideSubmenuEl = (el) => {
        if (!el) return;
        el.setAttribute('aria-hidden', 'true');
        el.classList.remove('is-open');
        el.hidden = true;
        el.innerHTML = '';
    };

    if (contextSubmenuHideTimer) {
        clearTimeout(contextSubmenuHideTimer);
        contextSubmenuHideTimer = null;
    }

    hideSubmenuEl(editorContextSubmenu2);
    hideSubmenuEl(editorContextSubmenu1);

    if (contextMenuHideTimer) {
        clearTimeout(contextMenuHideTimer);
        contextMenuHideTimer = null;
    }

    // Let CSS transition run, then truly hide and clear content.
    contextMenuHideTimer = setTimeout(() => {
        editorContextMenu.hidden = true;
        editorContextMenu.innerHTML = '';
        lastContextMenuTarget = null;
        contextMenuHideTimer = null;
    }, 180);
}

function clampMenuPosition(x, y, menuEl) {
    const rect = menuEl.getBoundingClientRect();
    const padding = 8;
    const maxX = window.innerWidth - rect.width - padding;
    const maxY = window.innerHeight - rect.height - padding;
    return {
        x: Math.max(padding, Math.min(x, maxX)),
        y: Math.max(padding, Math.min(y, maxY))
    };
}

function showEditorContextMenuAt(x, y, editorTarget) {
    if (!editorContextMenu) return;

    if (contextMenuHideTimer) {
        clearTimeout(contextMenuHideTimer);
        contextMenuHideTimer = null;
    }

    lastContextMenuTarget = editorTarget;
    editorContextMenu.innerHTML = '';

    const ensureSubmenuEl = (level) => {
        const existing = level === 1 ? editorContextSubmenu1 : editorContextSubmenu2;
        if (existing) return existing;

        const el = document.createElement('div');
        el.className = 'editor-context-menu editor-context-submenu';
        el.setAttribute('role', 'menu');
        el.setAttribute('aria-hidden', 'true');
        el.hidden = true;
        document.body.appendChild(el);

        if (level === 1) editorContextSubmenu1 = el;
        else editorContextSubmenu2 = el;
        return el;
    };

    const isAnyMenuElement = (node) => {
        if (!node) return false;
        if (editorContextMenu && editorContextMenu.contains(node)) return true;
        if (editorContextSubmenu1 && editorContextSubmenu1.contains(node)) return true;
        if (editorContextSubmenu2 && editorContextSubmenu2.contains(node)) return true;
        return false;
    };

    const hideSubmenusFrom = (level) => {
        const hideEl = (el) => {
            if (!el) return;
            el.setAttribute('aria-hidden', 'true');
            el.classList.remove('is-open');
            el.hidden = true;
            el.innerHTML = '';
        };
        if (level <= 2) hideEl(editorContextSubmenu2);
        if (level <= 1) hideEl(editorContextSubmenu1);
    };

    const scheduleHideSubmenus = () => {
        if (contextSubmenuHideTimer) {
            clearTimeout(contextSubmenuHideTimer);
            contextSubmenuHideTimer = null;
        }
        contextSubmenuHideTimer = setTimeout(() => {
            contextSubmenuHideTimer = null;
            hideSubmenusFrom(1);
        }, 220);
    };

    const cancelHideSubmenus = () => {
        if (contextSubmenuHideTimer) {
            clearTimeout(contextSubmenuHideTimer);
            contextSubmenuHideTimer = null;
        }
    };

    const renderMenuInto = (menuEl, actions, opts) => {
        const options = opts || {};
        const submenuLevel = Number(options.submenuLevel) || 0;
        const onLeaf = typeof options.onLeaf === 'function' ? options.onLeaf : null;

        menuEl.innerHTML = '';

        for (const action of actions) {
            if (action.separator) {
                const sep = document.createElement('div');
                sep.className = 'menu-separator';
                menuEl.appendChild(sep);
                continue;
            }

            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'menu-item';
            btn.setAttribute('role', 'menuitem');

            const labelSpan = document.createElement('span');
            labelSpan.className = 'menu-label';
            labelSpan.textContent = String(action.label || '');

            const shortcutSpan = document.createElement('span');
            shortcutSpan.className = 'menu-shortcut';
            const hasSubmenu = Array.isArray(action.submenu) && action.submenu.length > 0;
            shortcutSpan.textContent = hasSubmenu ? '›' : (action.shortcut ? String(action.shortcut) : '');

            btn.appendChild(labelSpan);
            btn.appendChild(shortcutSpan);

            btn.addEventListener('mousedown', (e) => e.preventDefault());

            const openSubmenu = () => {
                if (!hasSubmenu) return;
                const level = submenuLevel + 1;
                showSubmenu(level, action.submenu, btn);
            };

            if (hasSubmenu) {
                btn.addEventListener('mouseenter', () => {
                    cancelHideSubmenus();
                    openSubmenu();
                });
                btn.addEventListener('pointerenter', () => {
                    cancelHideSubmenus();
                    openSubmenu();
                });
                btn.addEventListener('focus', () => {
                    cancelHideSubmenus();
                    openSubmenu();
                });
            } else {
                btn.addEventListener('mouseenter', () => {
                    // Moving within a menu should keep it open but close deeper levels.
                    cancelHideSubmenus();
                    if (submenuLevel === 0) hideSubmenusFrom(1);
                    if (submenuLevel === 1) hideSubmenusFrom(2);
                });
            }

            btn.addEventListener('click', (e) => {
                e.preventDefault();
                cancelHideSubmenus();
                if (hasSubmenu) {
                    openSubmenu();
                    return;
                }
                const target = lastContextMenuTarget || editorTarget;
                try {
                    if (typeof action.run === 'function') action.run(target);
                } finally {
                    if (onLeaf) onLeaf();
                }
            });

            menuEl.appendChild(btn);
        }
    };

    const positionMenuNextToButton = (menuEl, anchorBtn) => {
        const padding = 8;
        const gap = 6;
        const r = anchorBtn.getBoundingClientRect();

        // Temporarily place so we can measure size.
        menuEl.style.left = '0px';
        menuEl.style.top = '0px';
        const rect = menuEl.getBoundingClientRect();

        let px = r.right + gap;
        let py = r.top;

        // If not enough room on the right, open to the left.
        if (px + rect.width > window.innerWidth - padding) {
            px = r.left - rect.width - gap;
        }

        // Clamp to viewport.
        const clamped = clampMenuPosition(px, py, menuEl);
        menuEl.style.left = `${clamped.x}px`;
        menuEl.style.top = `${clamped.y}px`;
    };

    const showSubmenu = (level, actions, anchorBtn) => {
        if (!anchorBtn) return;

        // Hide deeper levels.
        if (level <= 1) hideSubmenusFrom(2);
        if (level <= 2) {
            // ok
        }

        const menuEl = ensureSubmenuEl(level);
        if (!menuEl) return;

        menuEl.hidden = false;
        menuEl.setAttribute('aria-hidden', 'false');
        menuEl.classList.remove('is-open');

        renderMenuInto(menuEl, actions, {
            submenuLevel: level,
            onLeaf: () => {
                hideEditorContextMenu();
                updatePreview();
                autoSave();
            }
        });

        positionMenuNextToButton(menuEl, anchorBtn);

        // Keep menus open while hovering.
        menuEl.addEventListener('mouseenter', cancelHideSubmenus);
        menuEl.addEventListener('mouseleave', scheduleHideSubmenus);

        requestAnimationFrame(() => menuEl.classList.add('is-open'));
    };

    // Root menu actions
    const actions = [];

    // Always show formatting options
    actions.push(
        {
            label: 'Bold',
            shortcut: formatKeyShortcut('B'),
            run: (t) => wrapOrInsert(t, '**', '**')
        },
        {
            label: 'Italic',
            shortcut: formatKeyShortcut('I'),
            run: (t) => wrapOrInsert(t, '*', '*')
        },
        {
            label: 'Inline code',
            shortcut: formatKeyShortcut('E'),
            run: (t) => wrapOrInsert(t, '`', '`')
        },
        {
            label: 'Strikethrough',
            shortcut: '~~ ~~',
            run: (t) => wrapOrInsert(t, '~~', '~~')
        },
        {
            label: 'Link',
            shortcut: '[ ]( )',
            run: (t) => wrapSelectionAsLink(t)
        },
        {
            label: 'Heading',
            submenu: [
                { label: 'Heading 1', shortcut: '#', run: (t) => applyHeadingToSelection(t, 1) },
                { label: 'Heading 2', shortcut: '##', run: (t) => applyHeadingToSelection(t, 2) },
                { label: 'Heading 3', shortcut: '###', run: (t) => applyHeadingToSelection(t, 3) },
                { label: 'Heading 4', shortcut: '####', run: (t) => applyHeadingToSelection(t, 4) }
            ]
        },
        {
            label: 'Quote',
            shortcut: '> ',
            run: (t) => toggleLinePrefixOnSelection(t, '> ')
        },
        {
            label: 'Literature Quote',
            shortcut: '<quotation>',
            run: (t) => insertLiteratureQuote(t)
        },
        {
            label: 'Bullet list',
            shortcut: '- ',
            run: (t) => toggleLinePrefixOnSelection(t, '- ')
        },
        {
            label: 'Numbered list',
            shortcut: '1. ',
            run: (t) => toggleLinePrefixOnSelection(t, '1. ')
        },
        {
            label: 'Task list',
            shortcut: '- [ ] ',
            run: (t) => toggleLinePrefixOnSelection(t, '- [ ] ')
        }
    );

    actions.push({ separator: true });
    actions.push({
        label: 'Insert',
        submenu: [
            {
                label: 'Table of Contents',
                shortcut: '[TOC]',
                run: (t) => insertTableOfContents(t)
            },
            { separator: true },
            {
                label: 'Layout Row',
                submenu: [
                    { label: '2 Columns', shortcut: '', run: (t) => insertLayoutRow(t, 2) },
                    { label: '3 Columns', shortcut: '', run: (t) => insertLayoutRow(t, 3) },
                    { label: '4 Columns', shortcut: '', run: (t) => insertLayoutRow(t, 4) }
                ]
            }
        ]
    });

    editorContextMenu.hidden = false;
    editorContextMenu.setAttribute('aria-hidden', 'false');
    editorContextMenu.classList.remove('is-open');
    editorContextMenu.style.left = `${x}px`;
    editorContextMenu.style.top = `${y}px`;

    renderMenuInto(editorContextMenu, actions, {
        submenuLevel: 0,
        onLeaf: () => {
            hideEditorContextMenu();
            updatePreview();
            autoSave();
        }
    });

    // Clamp after render so it doesn't overflow viewport.
    const clamped = clampMenuPosition(x, y, editorContextMenu);
    editorContextMenu.style.left = `${clamped.x}px`;
    editorContextMenu.style.top = `${clamped.y}px`;

    editorContextMenu.addEventListener('mouseenter', cancelHideSubmenus);
    editorContextMenu.addEventListener('mouseleave', scheduleHideSubmenus);

    // Animate in on next frame so initial styles apply.
    requestAnimationFrame(() => {
        editorContextMenu.classList.add('is-open');
    });
}

function bindEditorContextMenu() {
    if (editorContextMenuBound) return;
    if (!editorContextMenu) return;

    const getMarkdownContextEl = () => {
        if (markdownEditor) return markdownEditor.getWrapperElement();
        return markdownInput;
    };

    const onContextMenu = (event, editorTarget) => {
        const target = editorTarget || markdownEditor || markdownInput;
        if (!target) return;

        // Touchpad right-click can collapse selection before contextmenu.
        // If selection is empty but we have a cached selection, restore it.
        if (!editorHasSelection(target) && lastMarkdownSelectionState && lastMarkdownSelectionState.text) {
            restoreSelection(target, lastMarkdownSelectionState);
        }
        // Allow context menu even without selection (for TOC, etc.)

        // Prevent browser context menu.
        event.preventDefault();
        event.stopPropagation();

        // Avoid double-open if multiple contextmenu events fire.
        const now = Date.now();
        if (now - lastContextMenuShownAt < 150) return;
        lastContextMenuShownAt = now;

        showEditorContextMenuAt(event.clientX, event.clientY, target);
    };

    const attach = () => {
        const el = getMarkdownContextEl();
        if (!el) return;
        const target = markdownEditor || markdownInput;
        // Cache selection early (helps with touchpad right-click).
        el.addEventListener('pointerdown', () => saveLastSelectionFromEditor(target), true);
        el.addEventListener('mousedown', () => saveLastSelectionFromEditor(target), true);
    };

    attach();

    // Robust: intercept contextmenu at document level so the browser menu never leaks through
    // when our custom menu should be shown.
    document.addEventListener('contextmenu', (e) => {
        const ctxEl = getMarkdownContextEl();
        if (!ctxEl) return;
        if (!e.target || !ctxEl.contains(e.target)) return;
        const target = markdownEditor || markdownInput;
        onContextMenu(e, target);
    }, true);

    // If the user clicks outside the editor, clear cached selection so it can't
    // be restored on a later right-click.
    document.addEventListener('mousedown', (e) => {
        if (!e || e.button !== 0) return;
        const ctxEl = getMarkdownContextEl();
        if (!ctxEl) return;
        if (e.target && ctxEl.contains(e.target)) return;
        lastMarkdownSelectionState = null;
    }, true);

    // Global dismiss handlers
    document.addEventListener('click', (e) => {
        if (!editorContextMenu || editorContextMenu.hidden) return;
        if (e.target && (editorContextMenu.contains(e.target) || (editorContextSubmenu1 && editorContextSubmenu1.contains(e.target)) || (editorContextSubmenu2 && editorContextSubmenu2.contains(e.target)))) return;
        hideEditorContextMenu();
    });

    document.addEventListener('keydown', (e) => {
        if (!editorContextMenu || editorContextMenu.hidden) return;
        if (e.key === 'Escape') {
            e.preventDefault();
            hideEditorContextMenu();
        }
    });

    window.addEventListener('resize', () => {
        if (!editorContextMenu || editorContextMenu.hidden) return;
        hideEditorContextMenu();
    });

    // Hide on scroll (both window scroll and editor-internal scroll).
    window.addEventListener('scroll', () => {
        if (!editorContextMenu || editorContextMenu.hidden) return;
        hideEditorContextMenu();
    }, { passive: true });

    try {
        const target = markdownEditor || markdownInput;
        if (markdownEditor && typeof markdownEditor.getScrollerElement === 'function') {
            const scroller = markdownEditor.getScrollerElement();
            if (scroller) {
                scroller.addEventListener('scroll', () => {
                    if (!editorContextMenu || editorContextMenu.hidden) return;
                    hideEditorContextMenu();
                }, { passive: true });
            }
        } else if (target && typeof target.addEventListener === 'function') {
            target.addEventListener('scroll', () => {
                if (!editorContextMenu || editorContextMenu.hidden) return;
                hideEditorContextMenu();
            }, { passive: true });
        }
    } catch { /* ignore */ }

    editorContextMenuBound = true;
}

function wrapOrInsert(textarea, left, right) {
    if (isCodeMirrorInstance(textarea)) {
        const doc = textarea.getDoc();
        const selected = doc.getSelection();
        if (selected) {
            doc.replaceSelection(`${left}${selected}${right}`);
        } else {
            const cursor = doc.getCursor();
            doc.replaceRange(`${left}${right}`, cursor);
            doc.setCursor({ line: cursor.line, ch: cursor.ch + left.length });
        }
        textarea.focus();
        return;
    }

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    const selected = value.substring(start, end);

    const replacement = `${left}${selected || ''}${right}`;

    // Try execCommand to preserve undo stack.
    if (!document.execCommand('insertText', false, replacement)) {
        textarea.value = value.substring(0, start) + replacement + value.substring(end);
    }

    // Restore selection/caret.
    if (selected) {
        textarea.selectionStart = start + left.length;
        textarea.selectionEnd = start + left.length + selected.length;
    } else {
        const caret = start + left.length;
        textarea.selectionStart = textarea.selectionEnd = caret;
    }
}

function insertSnippet(textarea, snippet) {
    if (isCodeMirrorInstance(textarea)) {
        const doc = textarea.getDoc();
        const cursor = doc.getCursor();
        doc.replaceRange(snippet, cursor);
        return;
    }

    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const value = textarea.value;
    textarea.value = value.substring(0, start) + snippet + value.substring(end);
    textarea.selectionStart = textarea.selectionEnd = start + snippet.length;
    textarea.focus();
}

function slugifyHeading(text) {
    // Approximate the slug generation used by the preview renderer
    // 1. Remove common markdown syntax (links, bold, italic)
    let clean = String(text || '').replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1');
    clean = clean.replace(/[*_~`]/g, '');

    // 2. Standard slugify
    let t = clean.trim();
    t = t.replace(/[\s\-_.]+/g, '-');
    t = t.replace(/[^a-z0-9\-]/gi, '').toLowerCase();
    return t.replace(/^-+|-+$/g, '');
}

function insertTableOfContents(editorTarget) {
    insertSnippet(editorTarget, '[TOC]\n\n');
    updatePreview();
    autoSave();
    showToast('📑 Table of Contents marker inserted');
}

function insertLiteratureQuote(editorTarget) {
    const readSelectedText = () => {
        if (!editorTarget) return '';

        if (isCodeMirrorInstance(editorTarget)) {
            try {
                return String(editorTarget.getDoc().getSelection() || '');
            } catch {
                return '';
            }
        }

        try {
            const start = Number(editorTarget.selectionStart) || 0;
            const end = Number(editorTarget.selectionEnd) || 0;
            const value = String(editorTarget.value || '');
            return end > start ? value.substring(start, end) : '';
        } catch {
            return '';
        }
    };

    const selected = readSelectedText();
    const quoteText = selected
        ? String(selected).replace(/\s+/g, ' ').trim()
        : 'Quotation text goes here.';

    const lines = [
        '',
        '<quotation>',
        `    <text>${quoteText}</text>`,
        '    <author>Author / Source</author>',
        '</quotation>',
        ''
    ];

    const snippet = lines.join('\n');
    const cursorLineOffset = 3;
    const cursorCh = '    <author>'.length;
    insertSnippetIntoEditor(editorTarget, snippet, cursorLineOffset, cursorCh);
}


function setEditorTab(tab, shouldFocus = true) {
    if (!markdownInput || !cssInput || !tabMarkdown || !tabCss) return;

    const isMarkdown = tab === 'markdown';
    markdownInput.hidden = !isMarkdown;
    cssInput.hidden = isMarkdown;

    if (markdownEditor) {
        const mdWrapper = markdownEditor.getWrapperElement();
        mdWrapper.style.display = isMarkdown ? 'block' : 'none';
        if (isMarkdown) markdownEditor.refresh();
    }

    if (cssEditor) {
        const cssWrapper = cssEditor.getWrapperElement();
        cssWrapper.style.display = isMarkdown ? 'none' : 'block';
        if (!isMarkdown) cssEditor.refresh();
    }

    tabMarkdown.classList.toggle('active', isMarkdown);
    tabCss.classList.toggle('active', !isMarkdown);
    tabMarkdown.setAttribute('aria-selected', isMarkdown ? 'true' : 'false');
    tabCss.setAttribute('aria-selected', !isMarkdown ? 'true' : 'false');

    // Focus active editor for better UX (but skip on initial load to avoid scroll-to-caret jumps).
    if (shouldFocus) {
        try {
            if (isMarkdown) {
                (markdownEditor || markdownInput).focus();
            } else {
                (cssEditor || cssInput).focus();
            }
        } catch { /* ignore */ }
    }
}

function initCodeEditors() {
    if (!window.CodeMirror || !markdownInput || !cssInput) return;

    markdownEditor = CodeMirror.fromTextArea(markdownInput, {
        mode: { name: 'markdown', html: true },
        highlightFormatting: true,
        lineNumbers: true,
        lineWrapping: true,
        theme: 'material-darker',
        placeholder: markdownInput.getAttribute('placeholder') || ''
    });

    cssEditor = CodeMirror.fromTextArea(cssInput, {
        mode: 'css',
        lineNumbers: true,
        lineWrapping: true,
        theme: 'material-darker',
        placeholder: cssInput.getAttribute('placeholder') || ''
    });

    markdownEditor.setOption('indentUnit', 4);
    cssEditor.setOption('indentUnit', 4);

    markdownEditor.addOverlay({
        token: function (stream) {
            if (stream.peek() === '<' && stream.match(/<[^>]+>/)) return 'tag';
            if (stream.match(/\*\*[^*]+?\*\*/)) return 'strong';
            if (stream.match(/__[^_]+?__/)) return 'strong';
            if (stream.match(/\*[^*]+?\*\*/)) return 'em';
            if (stream.match(/_[^_]+?_/)) return 'em';
            stream.next();
            return null;
        }
    });
}

function embedCustomCssIntoMarkdown(markdown, css) {
    const cleanedMarkdown = (markdown || '').replace(/\s+$/, '');
    const cleanedCss = (css || '').trim();
    if (!cleanedCss) return cleanedMarkdown + '\n';

    // If user CSS matches the default stylesheet, don't embed it.
    if (normalizeCss(cleanedCss) && normalizeCss(cleanedCss) === normalizeCss(defaultMarkdownCssText)) {
        return cleanedMarkdown + '\n';
    }

    return `${cleanedMarkdown}\n\n${EMBED_MARKER_START}${cleanedCss}${EMBED_MARKER_END}\n`;
}

function extractCustomCssFromMarkdown(rawMarkdown) {
    const text = rawMarkdown || '';
    const startIndex = text.indexOf(EMBED_MARKER_START);
    if (startIndex === -1) {
        return { markdown: text, css: '' };
    }

    const endIndex = text.indexOf(EMBED_MARKER_END, startIndex + EMBED_MARKER_START.length);
    if (endIndex === -1) {
        // Marker start exists but end doesn't; treat as normal markdown.
        return { markdown: text, css: '' };
    }

    const cssStart = startIndex + EMBED_MARKER_START.length;
    const css = text.slice(cssStart, endIndex);
    const before = text.slice(0, startIndex);
    const after = text.slice(endIndex + EMBED_MARKER_END.length);
    const markdown = (before + after).replace(/\n{3,}/g, '\n\n').trimEnd() + '\n';
    return { markdown, css: (css || '').trim() };
}

function downloadTextFile(filename, content) {
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(url);
}

function saveMarkdownFile() {
    // Export document.
    // Server returns a ZIP only when there are images to bundle; otherwise it returns plain .md.
    const content = embedCustomCssIntoMarkdown(getMarkdownValue(), getCustomCss());
    const suggested = (currentDocBaseName || 'document').trim() || 'document';
    const entered = prompt('Save document as (without extension):', suggested);
    if (entered === null) return; // cancelled
    const base = guessBaseNameFromFilename(entered);
    currentDocBaseName = base;

    (async () => {
        try {
            const sid = await ensureSession();
            const res = await fetch(getApiUrl(`/api/session/${sid}/export-zip`), {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ markdown: content })
            });
            if (!res.ok) throw new Error('Export failed');

            const contentType = String(res.headers.get('content-type') || '').toLowerCase();
            const isZip = contentType.includes('application/zip');
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = isZip ? `${base}.zip` : `${base}.md`;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
            showToast(isZip ? '💾 Document saved (ZIP)' : '💾 Document saved (.md)');
        } catch (e) {
            console.error('ZIP export error:', e);
            showToast('❌ Could not save document. Is server.py running?');
        }
    })();
}

function getPdfFilenameFromUser() {
    const suggested = (currentDocBaseName || 'document').trim() || 'document';
    const entered = prompt('Save PDF as (without extension):', suggested);
    if (entered === null) return null;
    const base = guessBaseNameFromFilename(entered);
    currentDocBaseName = base;
    return `${base}.pdf`;
}

// ==================== Markdown Configuration ====================
marked.setOptions({
    breaks: true,
    gfm: true,
    headerIds: true,
    mangle: false,
    sanitize: false,
    smartLists: true,
    smartypants: true,
    xhtml: false
});

// ==================== Custom Layout Row Parsing (<row>/<col>) ====================
// Marked treats HTML blocks as raw HTML and does NOT parse Markdown inside them.
// That breaks fenced code blocks inside <col>.
//
// Fix: add a Marked block extension that recognizes <row>...</row> and renders it as
// <div class="layout-row"><div class="layout-col">(parsed markdown)</div>...</div>

function _isWsChar(ch) {
    return ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r';
}

function _readTagName(src, i) {
    let j = i;
    while (j < src.length && _isWsChar(src[j])) j++;
    let isClosing = false;
    if (src[j] === '/') {
        isClosing = true;
        j++;
        while (j < src.length && _isWsChar(src[j])) j++;
    }
    const start = j;
    while (j < src.length) {
        const c = src[j];
        const ok = (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') || c === '-' || c === '_';
        if (!ok) break;
        j++;
    }
    return { name: src.slice(start, j), isClosing, nameStart: start, nameEnd: j };
}

function _findTagEnd(src, ltIndex) {
    // Find the next '>' (does not try to handle quotes perfectly; good enough for our simple tags).
    return src.indexOf('>', ltIndex + 1);
}

function _findMatchingCloseTag(src, tagName, openTagEndIndex) {
    const wanted = String(tagName || '').toLowerCase();
    let depth = 1;
    let i = openTagEndIndex + 1;

    while (i < src.length) {
        const lt = src.indexOf('<', i);
        if (lt === -1) return -1;
        const gt = _findTagEnd(src, lt);
        if (gt === -1) return -1;

        const inside = src.slice(lt + 1, gt);
        const info = _readTagName(inside, 0);
        const name = String(info.name || '').toLowerCase();

        if (name === wanted) {
            if (info.isClosing) depth -= 1;
            else depth += 1;
            if (depth === 0) return gt;
        }

        i = gt + 1;
    }

    return -1;
}

function _parseRowColumns(rawRowHtml) {
    // rawRowHtml includes <row...>...</row>
    const src = String(rawRowHtml || '');
    const ltOpen = src.toLowerCase().indexOf('<row');
    if (ltOpen === -1) return [];
    const gtOpen = _findTagEnd(src, ltOpen);
    if (gtOpen === -1) return [];
    const ltClose = src.toLowerCase().lastIndexOf('</row');
    if (ltClose === -1) return [];

    const inner = src.slice(gtOpen + 1, ltClose);
    const cols = [];

    const readWidthAttr = (openTagText) => {
        const t = String(openTagText || '');
        const m = t.match(/\bwidth\s*=\s*("([^"]+)"|'([^']+)'|([^\s>]+))/i);
        const rawVal = (m && (m[2] || m[3] || m[4])) ? String(m[2] || m[3] || m[4]) : '';
        return rawVal.trim();
    };

    let i = 0;
    while (i < inner.length) {
        const lt = inner.toLowerCase().indexOf('<col', i);
        if (lt === -1) break;
        const gt = _findTagEnd(inner, lt);
        if (gt === -1) break;

        const openTag = inner.slice(lt, gt + 1);
        const width = readWidthAttr(openTag);

        const endGt = _findMatchingCloseTag(inner, 'col', gt);
        if (endGt === -1) break;
        const ltEnd = inner.toLowerCase().lastIndexOf('</col', endGt);
        if (ltEnd === -1) break;

        const colInner = inner.slice(gt + 1, ltEnd);
        cols.push({ content: colInner, width });
        i = endGt + 1;
    }

    return cols;
}

function normalizeColWidth(value) {
    const v = String(value || '').trim();
    if (!v) return '';

    // Allow only safe, common units (avoid arbitrary CSS injection).
    // Examples: 30%, 240px, 12rem, 1.5em
    if (/^\d+(?:\.\d+)?(?:%|px|rem|em|vw|vh)$/.test(v)) return v;
    return '';
}

const layoutRowMarkedExtension = {
    name: 'layoutRow',
    level: 'block',
    start(src) {
        const lower = String(src || '').toLowerCase();
        const idx = lower.indexOf('<row');
        return idx >= 0 ? idx : undefined;
    },
    tokenizer(src) {
        const s = String(src || '');
        // Must start with optional whitespace then <row
        const m = s.match(/^\s*<row\b/i);
        if (!m) return;

        const lt = s.toLowerCase().indexOf('<row');
        const gt = _findTagEnd(s, lt);
        if (gt === -1) return;
        const endGt = _findMatchingCloseTag(s, 'row', gt);
        if (endGt === -1) return;

        const raw = s.slice(0, endGt + 1);
        const cols = _parseRowColumns(raw);
        if (!cols.length) return;

        return {
            type: 'layoutRow',
            raw,
            cols
        };
    },
    renderer(token) {
        const cols = Array.isArray(token.cols) ? token.cols : [];
        const htmlCols = cols.map((col) => {
            const md = (col && typeof col === 'object' && 'content' in col) ? col.content : col;
            const widthRaw = (col && typeof col === 'object' && 'width' in col) ? col.width : '';
            const width = normalizeColWidth(widthRaw);

            // Parse Markdown inside each column normally (supports fenced code blocks).
            // IMPORTANT: content inside <col> is usually indented in authoring.
            // In Markdown, 4+ leading spaces turns it into an indented code block,
            // which would make HTML like <img ...> render as code. Dedent first.
            const normalized = dedentMarkdownBlock(String(md || ''));
            const inner = marked.parse(normalized);
            const style = width ? ` style="flex: 0 0 ${width}; max-width: ${width};" data-col-width="${width}"` : '';
            return `<div class="layout-col"${style}>${inner}</div>`;
        }).join('');
        return `<div class="layout-row">${htmlCols}</div>`;
    }
};

function dedentMarkdownBlock(text) {
    const raw = String(text || '').replace(/\r\n?/g, '\n');
    const lines = raw.split('\n');

    // Drop leading/trailing blank lines so indentation detection is stable.
    while (lines.length && !lines[0].trim()) lines.shift();
    while (lines.length && !lines[lines.length - 1].trim()) lines.pop();
    if (!lines.length) return '';

    // Compute minimal indentation across non-empty lines.
    let minIndent = Infinity;
    for (const line of lines) {
        if (!line.trim()) continue;
        const m = line.match(/^[\t ]+/);
        const indent = m ? m[0].length : 0;
        if (indent < minIndent) minIndent = indent;
        if (minIndent === 0) break;
    }
    if (!Number.isFinite(minIndent) || minIndent <= 0) {
        return lines.join('\n');
    }

    return lines.map((line) => {
        if (!line.trim()) return '';
        return line.slice(minIndent);
    }).join('\n');
}

// ==================== Math (KaTeX) Extensions for Marked.js ====================

function _katexRender(tex, displayMode) {
    if (typeof katex === 'undefined') {
        const esc = String(tex).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return `<code>${esc}</code>`;
    }
    try {
        return katex.renderToString(tex, { displayMode, throwOnError: false, output: 'html' });
    } catch (e) {
        const esc = String(tex).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return `<code>${esc}</code>`;
    }
}

const mathBlockExtension = {
    name: 'mathBlock',
    level: 'block',
    start(src) {
        const candidates = [];
        const a = src.indexOf('$$');
        const b = src.indexOf('\\[');
        // Only match [ when immediately followed by a newline (standalone opening bracket)
        const c = src.indexOf('[\n');
        if (a !== -1) candidates.push(a);
        if (b !== -1) candidates.push(b);
        if (c !== -1) candidates.push(c);
        return candidates.length ? Math.min(...candidates) : undefined;
    },
    tokenizer(src) {
        // $$...$$ display math
        let m = src.match(/^\$\$([\s\S]*?)\$\$/);
        if (m) return { type: 'mathBlock', raw: m[0], tex: m[1].trim() };
        // \[...\] display math
        m = src.match(/^\\\[([\s\S]*?)\\\]/);
        if (m) return { type: 'mathBlock', raw: m[0], tex: m[1].trim() };
        // [newline...newline] display math (shorthand syntax)
        m = src.match(/^\[[ \t]*\n([\s\S]*?)\n[ \t]*\]/);
        if (m) return { type: 'mathBlock', raw: m[0], tex: m[1].trim() };
    },
    renderer(token) {
        return `<div class="math-block">${_katexRender(token.tex, true)}</div>\n`;
    }
};

const mathInlineExtension = {
    name: 'mathInline',
    level: 'inline',
    start(src) {
        const a = src.indexOf('$');
        const b = src.indexOf('\\(');
        if (a === -1 && b === -1) return undefined;
        if (a === -1) return b;
        if (b === -1) return a;
        return Math.min(a, b);
    },
    tokenizer(src) {
        // $...$ inline math (single $, no leading/trailing whitespace in content)
        let m = src.match(/^\$(?!\$)((?:[^$\n\\]|\\[\s\S])+?)\$/);
        if (m && !/^\s/.test(m[1]) && !/\s$/.test(m[1])) {
            return { type: 'mathInline', raw: m[0], tex: m[1].trim() };
        }
        // \(...\) inline math
        m = src.match(/^\\\(([\s\S]*?)\\\)/);
        if (m) return { type: 'mathInline', raw: m[0], tex: m[1].trim() };
    },
    renderer(token) {
        return `<span class="math-inline">${_katexRender(token.tex, false)}</span>`;
    }
};

try {
    marked.use({ extensions: [mathBlockExtension, mathInlineExtension, layoutRowMarkedExtension] });
} catch { /* ignore */ }

// ==================== Initial Content ====================
const defaultMarkdown = `# Welcome to MD2PDF

## Features
- **Real-time preview** - See your changes instantly
- *Beautiful formatting* - Professional PDF output
- Easy to use - No installation required

### Code Support
\`\`\`javascript
console.log('Hello, World!');
\`\`\`

> Create amazing PDFs from Markdown!

---

### Getting Started
1. Write or paste your Markdown content
2. Preview it in real-time
3. Click "Download PDF" to save

**Try it now!** ✨
`;

setMarkdownValue(defaultMarkdown);

// ==================== Core Functions ====================

function buildPreviewSourceBlocks(markdownText) {
    const blocks = [];
    const lines = String(markdownText || '').replace(/\r\n?/g, '\n').split('\n');

    const isBlank = (index) => !String(lines[index] || '').trim();
    const isFenceStart = (line) => /^ {0,3}(```+|~~~+)/.test(line);
    const isAtxHeading = (line) => /^ {0,3}#{1,6}\s+\S/.test(line);
    const isHr = (line) => /^ {0,3}([-*_])(?:\s*\1){2,}\s*$/.test(line);
    const isBlockquote = (line) => /^ {0,3}>\s?/.test(line);
    const isListItem = (line) => /^ {0,3}(?:[-+*]|\d+[.)])\s+/.test(line);
    const isHtmlBlockStart = (line) => /^ {0,3}<\/?[A-Za-z][^>]*>\s*$/.test(line) || /^ {0,3}<[A-Za-z][\s\S]*?>/.test(line);
    const isTableSeparator = (line) => /^ {0,3}\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);

    const nextBlockEnd = (startIndex) => {
        const first = String(lines[startIndex] || '');

        if (isFenceStart(first)) {
            const marker = first.trimStart().startsWith('~') ? '~' : '`';
            for (let i = startIndex + 1; i < lines.length; i++) {
                const t = String(lines[i] || '').trimStart();
                if (t.startsWith(marker.repeat(3))) return i;
            }
            return lines.length - 1;
        }

        if (startIndex + 1 < lines.length && isTableSeparator(String(lines[startIndex + 1] || ''))) {
            let i = startIndex + 2;
            while (i < lines.length && String(lines[i] || '').trim() && String(lines[i] || '').includes('|')) i++;
            return i - 1;
        }

        if (isAtxHeading(first) || isHr(first)) return startIndex;

        if (isBlockquote(first)) {
            let i = startIndex + 1;
            while (i < lines.length && (isBlockquote(String(lines[i] || '')) || isBlank(i))) i++;
            while (i > startIndex && isBlank(i - 1)) i--;
            return i - 1;
        }

        if (isListItem(first)) {
            let i = startIndex + 1;
            while (i < lines.length) {
                const line = String(lines[i] || '');
                if (isBlank(i)) {
                    const next = i + 1;
                    if (next < lines.length && (/^ {2,}\S/.test(String(lines[next] || '')) || isListItem(String(lines[next] || '')))) {
                        i++;
                        continue;
                    }
                    break;
                }
                if (isListItem(line) || /^ {2,}\S/.test(line)) {
                    i++;
                    continue;
                }
                break;
            }
            return i - 1;
        }

        if (isHtmlBlockStart(first)) {
            const tagMatch = first.match(/^ {0,3}<([A-Za-z][\w:-]*)\b/i);
            const tag = tagMatch ? String(tagMatch[1] || '').toLowerCase() : '';
            if (tag && !/\/>\s*$/.test(first) && !new RegExp(`<\\/${tag}\\s*>`, 'i').test(first)) {
                for (let i = startIndex + 1; i < lines.length; i++) {
                    if (new RegExp(`<\\/${tag}\\s*>`, 'i').test(String(lines[i] || ''))) return i;
                    if (isBlank(i)) return i - 1;
                }
            }
            return startIndex;
        }

        let i = startIndex + 1;
        while (i < lines.length) {
            const line = String(lines[i] || '');
            if (isBlank(i) || isAtxHeading(line) || isFenceStart(line) || isHr(line) || isBlockquote(line) || isListItem(line)) break;
            if (i + 1 < lines.length && isTableSeparator(String(lines[i + 1] || ''))) break;
            i++;
        }
        return i - 1;
    };

    for (let i = 0; i < lines.length; i++) {
        if (isBlank(i)) continue;
        const endIndex = nextBlockEnd(i);
        const id = String(blocks.length + 1);
        blocks.push({
            id,
            startLine: i + 1,
            endLine: Math.max(i, endIndex) + 1
        });
        i = Math.max(i, endIndex);
    }

    return blocks;
}

function markdownWithPreviewSourceMarkers(markdownText, blocks) {
    const lines = String(markdownText || '').replace(/\r\n?/g, '\n').split('\n');
    const markersByLine = new Map();

    blocks.forEach((block) => {
        markersByLine.set(block.startLine, `<!-- md2pdf-source-block:${block.id} -->`);
    });

    const out = [];
    for (let i = 0; i < lines.length; i++) {
        const lineNumber = i + 1;
        if (markersByLine.has(lineNumber)) out.push(markersByLine.get(lineNumber));
        out.push(lines[i]);
    }

    return out.join('\n');
}

function normalizePreviewSourceMarkerComments(wrapper) {
    if (!wrapper) return;
    const comments = [];

    const visit = (node) => {
        Array.from(node.childNodes || []).forEach((child) => {
            if (child.nodeType === Node.COMMENT_NODE &&
                /^\s*md2pdf-source-block:\d+\s*$/.test(String(child.nodeValue || ''))) {
                comments.push(child);
                return;
            }
            visit(child);
        });
    };

    visit(wrapper);

    comments.forEach((comment) => {
        if (!comment.parentNode || comment.parentNode === wrapper) return;

        let topLevel = comment.parentNode;
        while (topLevel.parentNode && topLevel.parentNode !== wrapper) {
            topLevel = topLevel.parentNode;
        }
        if (!topLevel || topLevel.parentNode !== wrapper) return;

        const marker = document.createComment(comment.nodeValue || '');
        wrapper.insertBefore(marker, topLevel);
        comment.remove();

        const hasVisibleText = String(topLevel.textContent || '').trim();
        const hasRealElement = Array.from(topLevel.querySelectorAll('*')).some((el) => {
            return !/^\s*md2pdf-source-block:\d+\s*$/.test(String(el.textContent || ''));
        });
        if (!hasVisibleText && !hasRealElement) topLevel.remove();
    });
}

function normalizeTableWidths(widths, columnCount = 0) {
    const values = Array.isArray(widths) ? widths.map(Number).filter((value) => Number.isFinite(value) && value > 0) : [];
    if (!values.length || (columnCount && values.length !== columnCount)) return null;
    const total = values.reduce((sum, value) => sum + value, 0);
    if (!total) return null;
    return values.map((value) => Math.round((value / total) * 1000) / 10);
}

function extractTableWidthMarkers(markdownText) {
    const lines = String(markdownText || '').replace(/\r\n?/g, '\n').split('\n');
    const markers = new Map();
    const markerRe = /^\s*<!--\s*MD2PDF_TABLE_WIDTHS\s*:\s*([\d.,\s]+)\s*-->\s*$/i;

    for (let i = 0; i < lines.length; i++) {
        const match = lines[i].match(markerRe);
        if (!match) continue;
        const widths = normalizeTableWidths(match[1].split(',').map((value) => Number(value.trim())));
        lines[i] = '';
        if (!widths) continue;

        let tableLine = i + 1;
        while (tableLine < lines.length && !String(lines[tableLine] || '').trim()) tableLine++;
        if (tableLine < lines.length) markers.set(tableLine + 1, widths);
    }

    return { markdown: lines.join('\n'), markers };
}

function applyTableWidthsToElement(table, widths) {
    if (!table) return false;
    const columnCount = table.rows?.[0]?.cells?.length || 0;
    const normalized = normalizeTableWidths(widths, columnCount);
    if (!normalized) return false;

    let colgroup = table.querySelector(':scope > colgroup');
    if (!colgroup) {
        colgroup = document.createElement('colgroup');
        table.insertBefore(colgroup, table.firstChild);
    }
    colgroup.innerHTML = '';
    normalized.forEach((width) => {
        const col = document.createElement('col');
        col.style.width = `${width}%`;
        colgroup.appendChild(col);
    });
    table.dataset.columnWidths = normalized.join(',');
    return true;
}

function renderMarkdownWithSourceAnnotations(markdownText) {
    const tableMarkerData = extractTableWidthMarkers(markdownText);
    previewTableWidthMarkers = tableMarkerData.markers;
    previewSourceBlocks = buildPreviewSourceBlocks(tableMarkerData.markdown);
    activePreviewSourceBlockId = null;
    lastEditorHoverLine = null;
    clearEditorSourceHighlight();
    clearPreviewImageSelection();

    const markedText = markdownWithPreviewSourceMarkers(tableMarkerData.markdown, previewSourceBlocks);
    const htmlContent = marked.parse(markedText);
    const wrapper = document.createElement('div');
    wrapper.innerHTML = htmlContent;
    normalizePreviewSourceMarkerComments(wrapper);

    const blockById = new Map(previewSourceBlocks.map((block) => [block.id, block]));
    let activeBlock = null;
    const nodes = Array.from(wrapper.childNodes);

    nodes.forEach((node) => {
        if (node.nodeType === Node.COMMENT_NODE) {
            const match = String(node.nodeValue || '').match(/^\s*md2pdf-source-block:(\d+)\s*$/);
            if (match) {
                activeBlock = blockById.get(match[1]) || null;
                node.remove();
            }
            return;
        }

        if (node.nodeType !== Node.ELEMENT_NODE || !activeBlock) return;

        node.setAttribute('data-source-block', activeBlock.id);
        node.setAttribute('data-source-start-line', String(activeBlock.startLine));
        node.setAttribute('data-source-end-line', String(activeBlock.endLine));

        const nextMarker = node.nextSibling;
        if (nextMarker && nextMarker.nodeType === Node.COMMENT_NODE &&
            /^\s*md2pdf-source-block:\d+\s*$/.test(String(nextMarker.nodeValue || ''))) {
            activeBlock = null;
        }
    });

    wrapper.querySelectorAll('table[data-source-start-line]').forEach((table) => {
        const startLine = Number(table.getAttribute('data-source-start-line'));
        const widths = previewTableWidthMarkers.get(startLine);
        if (widths) applyTableWidthsToElement(table, widths);
    });

    return wrapper.innerHTML;
}

function parseImageCropValue(value) {
    const parts = String(value || '').split(',').map((part) => Number(part.trim()));
    if (parts.length !== 4 || parts.some((part) => !Number.isFinite(part))) return null;

    const x = Math.max(0, Math.min(99, parts[0]));
    const y = Math.max(0, Math.min(99, parts[1]));
    const w = Math.max(1, Math.min(100 - x, parts[2]));
    const h = Math.max(1, Math.min(100 - y, parts[3]));
    return { x, y, w, h };
}

function formatImageCropValue(crop) {
    const clean = parseImageCropValue(`${crop?.x},${crop?.y},${crop?.w},${crop?.h}`) || { x: 0, y: 0, w: 100, h: 100 };
    return [clean.x, clean.y, clean.w, clean.h].map((value) => {
        const rounded = Math.round(value * 10) / 10;
        return Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1).replace(/\.0$/, '');
    }).join(',');
}

function copySourceAttributes(fromEl, toEl) {
    if (!fromEl || !toEl) return;
    ['data-source-block', 'data-source-start-line', 'data-source-end-line'].forEach((name) => {
        const value = fromEl.getAttribute(name);
        if (value) toEl.setAttribute(name, value);
    });
}

function applyImageCropRendering(htmlContent) {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = String(htmlContent || '');

    wrapper.querySelectorAll('img[data-crop]').forEach((img) => {
        if (img.closest('.image-crop-frame')) return;
        const crop = parseImageCropValue(img.getAttribute('data-crop'));
        if (!crop) return;

        const frame = document.createElement('span');
        frame.className = 'image-crop-frame';
        frame.setAttribute('data-crop', formatImageCropValue(crop));
        frame.setAttribute('role', 'img');
        if (img.getAttribute('alt')) frame.setAttribute('aria-label', img.getAttribute('alt'));
        copySourceAttributes(img, frame);

        const classes = String(img.getAttribute('class') || '').split(/\s+/).filter(Boolean);
        classes.forEach((cls) => {
            if (['img-left', 'img-center', 'img-right', 'framed'].includes(cls)) {
                frame.classList.add(cls);
            }
        });

        const widthAttr = img.getAttribute('width');
        const inlineWidth = img.style && img.style.width ? img.style.width : '';
        if (inlineWidth) {
            frame.style.width = inlineWidth;
        } else if (widthAttr) {
            frame.style.width = /^\d+(\.\d+)?$/.test(widthAttr.trim()) ? `${widthAttr.trim()}px` : widthAttr.trim();
        }

        img.parentNode.insertBefore(frame, img);
        frame.appendChild(img);
    });

    initializeImageCropFrames(wrapper);
    return wrapper.innerHTML;
}

function applyImageCoverRendering(htmlContent) {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = String(htmlContent || '');

    wrapper.querySelectorAll('img[data-cover="page"]').forEach((img) => {
        if (img.closest('.image-cover-page')) return;
        const cover = document.createElement('div');
        cover.className = 'image-cover-page';
        copySourceAttributes(img.closest('[data-source-block]') || img, cover);

        const parent = img.parentElement;
        const parentContainsOnlyImage = parent && parent !== wrapper &&
            Array.from(parent.childNodes).every((node) => node === img || (node.nodeType === Node.TEXT_NODE && !String(node.textContent || '').trim()));

        if (parentContainsOnlyImage) {
            parent.parentNode.insertBefore(cover, parent);
            cover.appendChild(img);
            parent.remove();
        } else {
            img.parentNode.insertBefore(cover, img);
            cover.appendChild(img);
        }
    });

    return wrapper.innerHTML;
}

function initializeImageCropFrames(container = document) {
    if (!container || !container.querySelectorAll) return;

    container.querySelectorAll('.image-crop-frame').forEach((frame) => {
        const img = frame.querySelector('img[data-crop]');
        const crop = parseImageCropValue(frame.getAttribute('data-crop') || img?.getAttribute('data-crop'));
        if (!img || !crop) return;

        const applySizing = () => {
            const naturalWidth = img.naturalWidth || 1;
            const naturalHeight = img.naturalHeight || 1;
            frame.style.aspectRatio = `${Math.max(1, crop.w * naturalWidth)} / ${Math.max(1, crop.h * naturalHeight)}`;
        };

        img.style.width = `${10000 / crop.w}%`;
        img.style.maxWidth = 'none';
        img.style.height = 'auto';
        img.style.margin = '0';
        img.style.transform = `translate(${-crop.x}%, ${-crop.y}%)`;
        img.style.transformOrigin = 'top left';

        if (img.complete && img.naturalWidth) {
            applySizing();
        } else {
            frame.style.aspectRatio = `${crop.w} / ${crop.h}`;
            img.addEventListener('load', applySizing, { once: true });
        }
    });
}

function normalizeMarginInputValue(rawValue) {
    const value = String(rawValue || '').trim();
    if (!value) return null;
    if (!/^\d+(?:\.\d+)?$/.test(value)) return null;
    const number = Math.max(0, Math.min(80, Number(value)));
    if (!Number.isFinite(number)) return null;
    const rounded = Math.round(number * 10) / 10;
    return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)}mm`;
}

function formatCssLengthFromPixels(px) {
    const num = Number(px);
    if (!Number.isFinite(num) || num <= 0) return '20';
    const mm = Math.round((num * 25.4 / 96) * 10) / 10;
    return Number.isInteger(mm) ? String(mm) : mm.toFixed(1);
}

function getPageMarginDefaultValue(side) {
    const page = previewContent?.querySelector('.a4-page');
    if (!page) return '20';
    const styles = window.getComputedStyle(page);
    const prop = side === 'top' ? 'paddingTop' : side === 'right' ? 'paddingRight' : side === 'bottom' ? 'paddingBottom' : 'paddingLeft';
    return formatCssLengthFromPixels(parseFloat(styles[prop]));
}

function upsertPageMarginCss(cssText, marginValue) {
    const current = String(cssText || '').replace(/\r\n/g, '\n').trimEnd();
    const existingBlockMatch = current.match(/\/\*\s*MD2PDF_PAGE_MARGINS\s*\*\/[\s\S]*?\/\*\s*\/MD2PDF_PAGE_MARGINS\s*\*\//i);
    const value = String(marginValue || `${getPageMarginDefaultValue('left')}mm`).trim();
    const block = `/* MD2PDF_PAGE_MARGINS */\n:root {\n    --page-padding: ${value};\n}\n/* /MD2PDF_PAGE_MARGINS */`;

    if (existingBlockMatch) {
        return current.replace(existingBlockMatch[0], block);
    }

    return `${current ? `${current}\n\n` : ''}${block}`;
}

function applyPageMarginUpdate(axis, value) {
    const normalized = normalizeMarginInputValue(value);
    if (!normalized) {
        showToast('Enter a number only. Unit is fixed as mm.');
        return;
    }

    setCustomCss(upsertPageMarginCss(getCustomCss(), normalized));
    if (cssEditor) {
        setTimeout(() => cssEditor.refresh(), 0);
    }
    userEditedCss = true;
    markMdfprojModified();
    autoSave();
    updatePreview();
    showToast('All page margins updated');
}

function showPageMarginDialog(axis, initialValue) {
    return new Promise((resolve) => {
        const existing = document.querySelector('.page-margin-dialog-backdrop');
        if (existing) existing.remove();

        const backdrop = document.createElement('div');
        backdrop.className = 'page-margin-dialog-backdrop';
        backdrop.innerHTML = `
            <div class="page-margin-dialog" role="dialog" aria-modal="true" aria-label="Edit page margins">
                <div class="page-margin-dialog-title">Set all page margins</div>
                <label class="page-margin-dialog-field">
                    <input class="page-margin-dialog-input" type="number" min="0" max="80" step="0.5" inputmode="decimal" value="${String(initialValue || '20').replace(/"/g, '&quot;')}">
                    <span class="page-margin-dialog-unit">mm</span>
                </label>
                <div class="page-margin-dialog-actions">
                    <button type="button" class="page-margin-dialog-btn page-margin-dialog-cancel"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15"/></svg>Cancel</button>
                    <button type="button" class="page-margin-dialog-btn page-margin-dialog-apply"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m4 10 4 4 8-8"/></svg>Apply</button>
                </div>
            </div>
        `;

        const close = (value) => {
            backdrop.remove();
            resolve(value);
        };

        const input = backdrop.querySelector('.page-margin-dialog-input');
        const cancelBtn = backdrop.querySelector('.page-margin-dialog-cancel');
        const applyBtn = backdrop.querySelector('.page-margin-dialog-apply');

        cancelBtn.addEventListener('click', () => close(null));
        applyBtn.addEventListener('click', () => close(input.value));
        backdrop.addEventListener('click', (event) => {
            if (event.target === backdrop) close(null);
        });
        input.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') close(input.value);
            if (event.key === 'Escape') close(null);
        });

        document.body.appendChild(backdrop);
        input.focus();
        input.select();
    });
}

async function handlePageMarginDblClick(event) {
    const side = event.currentTarget?.dataset?.marginSide;
    if (!side) return;
    event.preventDefault();
    event.stopPropagation();

    const axis = (side === 'left' || side === 'right') ? 'horizontal' : 'vertical';
    const currentValue = getPageMarginDefaultValue(side);
    const nextValue = await showPageMarginDialog(axis, currentValue);
    if (nextValue === null) return;
    applyPageMarginUpdate(axis, nextValue);
}

function decoratePageMarginHotzones(pageDiv) {
    if (!pageDiv) return;
    pageDiv.querySelectorAll('.page-margin-zone, .page-margin-highlight').forEach((zone) => zone.remove());
    const highlight = document.createElement('div');
    highlight.className = 'page-margin-highlight';
    highlight.setAttribute('aria-hidden', 'true');
    pageDiv.appendChild(highlight);
    ['top', 'right', 'bottom', 'left'].forEach((side) => {
        const zone = document.createElement('div');
        zone.className = `page-margin-zone page-margin-zone-${side}`;
        zone.dataset.marginSide = side;
        zone.title = `Double-click to edit ${side} margin`;
        zone.addEventListener('pointerenter', () => pageDiv.classList.add('is-margin-hovered'));
        zone.addEventListener('pointerleave', () => pageDiv.classList.remove('is-margin-hovered'));
        zone.addEventListener('dblclick', handlePageMarginDblClick);
        pageDiv.appendChild(zone);
    });
}

function getTableColumnWidths(table) {
    if (!table) return null;
    const stored = String(table.dataset.columnWidths || '').split(',').map(Number);
    const normalizedStored = normalizeTableWidths(stored, table.rows?.[0]?.cells?.length || 0);
    if (normalizedStored) return normalizedStored;

    const cells = Array.from(table.rows?.[0]?.cells || []);
    const widths = cells.map((cell) => cell.getBoundingClientRect().width);
    return normalizeTableWidths(widths, cells.length);
}

function getPreviewLayoutSurface(element) {
    return element?.closest?.('.a4-page, .pageless-document') || null;
}

function decorateResizableTables(container) {
    if (!container?.querySelectorAll) return;
    const surface = container.classList?.contains('a4-page') || container.classList?.contains('pageless-document')
        ? container
        : getPreviewLayoutSurface(container);
    if (!surface) return;
    surface.querySelectorAll(':scope > .preview-table-resize-handle').forEach((handle) => handle.remove());

    container.querySelectorAll('table').forEach((table) => {
        const cells = Array.from(table.rows?.[0]?.cells || []);
        if (cells.length < 2) return;
        const tableId = `preview-table-${++previewTableHandleId}`;
        table.dataset.previewTableId = tableId;

        cells.slice(0, -1).forEach((_, index) => {
            const handle = document.createElement('span');
            handle.className = 'preview-table-resize-handle';
            handle.dataset.columnIndex = String(index);
            handle.dataset.tableId = tableId;
            handle.title = 'Drag to resize columns';
            handle.addEventListener('pointerdown', startTableColumnResize);
            surface.appendChild(handle);
        });
    });
    positionTableResizeHandles(surface);
}

function positionTableResizeHandles(page = null) {
    const pages = page ? [page] : Array.from(previewContent?.querySelectorAll('.a4-page, .pageless-document') || []);
    const zoom = getCurrentPreviewZoom() || 1;

    pages.forEach((pageEl) => {
        const pageRect = pageEl.getBoundingClientRect();
        pageEl.querySelectorAll(':scope > .preview-table-resize-handle').forEach((handle) => {
            const tableId = handle.dataset.tableId;
            const table = tableId ? pageEl.querySelector(`table[data-preview-table-id="${CSS.escape(tableId)}"]`) : null;
            const columnIndex = Number(handle.dataset.columnIndex);
            const cells = Array.from(table?.rows?.[0]?.cells || []);
            if (!table || !Number.isInteger(columnIndex) || !cells[columnIndex]) {
                handle.hidden = true;
                return;
            }

            const tableRect = table.getBoundingClientRect();
            const boundaryRect = cells[columnIndex].getBoundingClientRect();
            handle.hidden = false;
            handle.style.left = `${(boundaryRect.right - pageRect.left) / zoom}px`;
            handle.style.top = `${(tableRect.top - pageRect.top) / zoom}px`;
            handle.style.height = `${tableRect.height / zoom}px`;
        });
    });
}

function applyWidthsToMatchingPreviewTables(sourceBlock, widths) {
    if (!previewContent) return;
    const selector = sourceBlock
        ? `table[data-source-block="${CSS.escape(sourceBlock)}"]`
        : 'table';
    previewContent.querySelectorAll(selector).forEach((table) => applyTableWidthsToElement(table, widths));
    requestAnimationFrame(() => positionTableResizeHandles());
}

function startTableColumnResize(event) {
    const handle = event.currentTarget;
    const page = getPreviewLayoutSurface(handle);
    const tableId = handle?.dataset?.tableId;
    const table = page && tableId ? page.querySelector(`table[data-preview-table-id="${CSS.escape(tableId)}"]`) : null;
    const columnIndex = Number(handle?.dataset?.columnIndex);
    const widths = getTableColumnWidths(table);
    if (!table || !widths || !Number.isInteger(columnIndex) || columnIndex < 0 || columnIndex >= widths.length - 1) return;

    event.preventDefault();
    event.stopPropagation();
    tableResizeState = {
        pointerId: event.pointerId,
        startX: event.clientX,
        tableWidth: Math.max(1, table.getBoundingClientRect().width),
        columnIndex,
        widths,
        currentWidths: widths.slice(),
        handle,
        sourceBlock: table.getAttribute('data-source-block') || '',
        sourceStartLine: Number(table.getAttribute('data-source-start-line')) || 0
    };

    try { handle.setPointerCapture(event.pointerId); } catch { /* ignore */ }
    handle.classList.add('is-active');
    document.body.classList.add('is-resizing-preview-table');
    document.addEventListener('pointermove', handleTableColumnResizeMove);
    document.addEventListener('pointerup', finishTableColumnResize, { once: true });
}

function handleTableColumnResizeMove(event) {
    if (!tableResizeState) return;
    const state = tableResizeState;
    const index = state.columnIndex;
    const pairTotal = state.widths[index] + state.widths[index + 1];
    const delta = ((event.clientX - state.startX) / state.tableWidth) * 100;
    const minWidth = Math.min(8, pairTotal / 3);
    const left = Math.max(minWidth, Math.min(pairTotal - minWidth, state.widths[index] + delta));
    const next = state.widths.slice();
    next[index] = left;
    next[index + 1] = pairTotal - left;
    state.currentWidths = normalizeTableWidths(next) || next;
    applyWidthsToMatchingPreviewTables(state.sourceBlock, state.currentWidths);
}

function persistTableColumnWidths(startLine, widths) {
    if (!startLine || !widths?.length) return false;
    const marker = `<!-- MD2PDF_TABLE_WIDTHS:${widths.map((value) => Math.round(value * 10) / 10).join(',')} -->`;
    const lines = getMarkdownValue().replace(/\r\n?/g, '\n').split('\n');
    const tableLineIndex = Math.max(0, startLine - 1);
    const previousLineIndex = tableLineIndex - 1;
    const markerRe = /^\s*<!--\s*MD2PDF_TABLE_WIDTHS\s*:/i;

    if (markdownEditor) {
        const doc = markdownEditor.getDoc();
        if (previousLineIndex >= 0 && markerRe.test(lines[previousLineIndex] || '')) {
            doc.replaceRange(marker, { line: previousLineIndex, ch: 0 }, { line: previousLineIndex, ch: (lines[previousLineIndex] || '').length }, 'table-resize');
        } else {
            const insertAt = { line: tableLineIndex, ch: 0 };
            doc.replaceRange(`${marker}\n`, insertAt, insertAt, 'table-resize');
        }
        return true;
    }

    if (previousLineIndex >= 0 && markerRe.test(lines[previousLineIndex] || '')) {
        lines[previousLineIndex] = marker;
    } else {
        lines.splice(tableLineIndex, 0, marker);
    }
    setMarkdownValue(lines.join('\n'));
    handleMarkdownInputChange();
    return true;
}

function finishTableColumnResize() {
    document.removeEventListener('pointermove', handleTableColumnResizeMove);
    document.body.classList.remove('is-resizing-preview-table');
    if (!tableResizeState) return;

    const { sourceStartLine, currentWidths, handle } = tableResizeState;
    handle?.classList.remove('is-active');
    tableResizeState = null;
    if (persistTableColumnWidths(sourceStartLine, currentWidths)) {
        showToast('Table column widths updated');
    }
}

function findPreviewSourceBlockForLine(lineNumber) {
    const line = Number(lineNumber);
    if (!Number.isFinite(line) || line < 1) return null;

    return previewSourceBlocks.find((block) => {
        return line >= block.startLine && line <= block.endLine;
    }) || null;
}

function clearPreviewSourceHighlight() {
    if (!previewContent || !activePreviewSourceBlockId) return;
    previewContent.querySelectorAll('.preview-source-highlight').forEach((el) => {
        el.classList.remove('preview-source-highlight');
    });
    activePreviewSourceBlockId = null;
    lastEditorHoverLine = null;
}

function clearEditorSourceHighlight() {
    if (!activeEditorSourceBlockId && !activeEditorSourceLineHandles.length) return;

    if (markdownEditor) {
        activeEditorSourceLineHandles.forEach((handle) => {
            try {
                markdownEditor.removeLineClass(handle, 'background', 'editor-source-highlight');
                markdownEditor.removeLineClass(handle, 'wrap', 'editor-source-highlight-wrap');
            } catch { /* ignore */ }
        });
    }

    activeEditorSourceLineHandles = [];
    activeEditorSourceBlockId = null;
}

function highlightEditorSourceBlockFromElement(sourceElement) {
    if (!sourceElement) {
        clearEditorSourceHighlight();
        return;
    }

    const blockId = sourceElement.getAttribute('data-source-block');
    const startLine = parseInt(sourceElement.getAttribute('data-source-start-line') || '', 10);
    const endLine = parseInt(sourceElement.getAttribute('data-source-end-line') || '', 10);

    if (!blockId || !Number.isFinite(startLine) || !Number.isFinite(endLine)) {
        clearEditorSourceHighlight();
        return;
    }

    if (activeEditorSourceBlockId === blockId) return;
    clearEditorSourceHighlight();
    activeEditorSourceBlockId = blockId;

    if (markdownEditor) {
        const doc = markdownEditor.getDoc();
        const lineCount = doc.lineCount();
        const startIndex = Math.max(0, Math.min(lineCount - 1, startLine - 1));
        const endIndex = Math.max(startIndex, Math.min(lineCount - 1, endLine - 1));

        for (let lineIndex = startIndex; lineIndex <= endIndex; lineIndex++) {
            const handle = markdownEditor.addLineClass(lineIndex, 'background', 'editor-source-highlight');
            markdownEditor.addLineClass(lineIndex, 'wrap', 'editor-source-highlight-wrap');
            activeEditorSourceLineHandles.push(handle);
        }

        markdownEditor.scrollIntoView({
            from: { line: startIndex, ch: 0 },
            to: { line: endIndex, ch: Math.max(0, String(doc.getLine(endIndex) || '').length) }
        }, 80);
        return;
    }

    if (markdownInput) {
        const style = window.getComputedStyle(markdownInput);
        const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.6 || 20;
        markdownInput.scrollTop = Math.max(0, (startLine - 1) * lineHeight - markdownInput.clientHeight / 3);
    }
}

function ensureImageResizeOverlay() {
    if (imageResizeOverlay && imageResizeHandle) return imageResizeOverlay;

    const previewWrapper = previewContent ? previewContent.closest('.preview-wrapper') : null;
    if (!previewWrapper) return null;

    imageResizeOverlay = document.createElement('div');
    imageResizeOverlay.className = 'preview-image-resize-overlay';
    imageResizeOverlay.hidden = true;

    imageAlignToolbar = document.createElement('div');
    imageAlignToolbar.className = 'preview-image-align-toolbar';

    const alignmentGroup = document.createElement('div');
    alignmentGroup.className = 'preview-image-toolbar-group preview-image-alignment-group';
    const toolGroup = document.createElement('div');
    toolGroup.className = 'preview-image-toolbar-group preview-image-actions-group';

    const alignmentIcons = {
        left: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 4h11M3 8h8M3 12h11M3 16h7"/></svg>',
        center: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4.5 4h11M6 8h8M4.5 12h11M6.5 16h7"/></svg>',
        right: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M6 4h11M9 8h8M6 12h11M10 16h7"/></svg>'
    };

    [
        { align: 'left', label: 'Left' },
        { align: 'center', label: 'Center' },
        { align: 'right', label: 'Right' }
    ].forEach((item) => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'preview-image-align-btn';
        btn.dataset.align = item.align;
        btn.innerHTML = alignmentIcons[item.align];
        btn.title = `Align ${item.label.toLowerCase()}`;
        btn.setAttribute('aria-label', `Align image ${item.label.toLowerCase()}`);
        btn.addEventListener('click', (event) => {
            event.preventDefault();
            event.stopPropagation();
            applyPreviewImageAlignment(item.align);
        });
        alignmentGroup.appendChild(btn);
    });

    const toolIcons = {
        cover: '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="1.5"/><path d="M5.5 13l3-3 2.2 2.2 1.6-1.6 2.2 2.4M13.5 6.5h.01"/></svg>',
        crop: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2.5v10A2.5 2.5 0 0 0 7.5 15h10M2.5 5H12.5A2.5 2.5 0 0 1 15 7.5v10"/></svg>',
        apply: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="m4 10 4 4 8-8"/></svg>',
        cancel: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15"/></svg>',
        reset: '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 7V3m0 0h4M4 3l3 3a6 6 0 1 1-1.2 7"/></svg>'
    };

    [
        { action: 'cover', label: 'Use as cover' },
        { action: 'crop', label: 'Crop' },
        { action: 'apply-crop', label: 'Apply' },
        { action: 'cancel-crop', label: 'Cancel' },
        { action: 'reset-crop', label: 'Reset' }
    ].forEach((item) => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = `preview-image-tool-btn preview-image-${item.action}-btn`;
        btn.dataset.action = item.action;
        const iconKey = item.action === 'apply-crop' ? 'apply' : item.action === 'cancel-crop' ? 'cancel' : item.action === 'reset-crop' ? 'reset' : item.action;
        btn.innerHTML = `${toolIcons[iconKey]}<span>${item.label}</span>`;
        btn.title = item.label;
        btn.setAttribute('aria-label', item.label);
        btn.addEventListener('click', (event) => {
            event.preventDefault();
            event.stopPropagation();
            if (btn.disabled) return;
            if (item.action === 'cover') togglePreviewImageCover();
            if (item.action === 'crop') startPreviewImageCrop();
            if (item.action === 'apply-crop') applyPreviewImageCrop();
            if (item.action === 'cancel-crop') cancelPreviewImageCrop();
            if (item.action === 'reset-crop') resetPreviewImageCrop();
        });
        toolGroup.appendChild(btn);
    });

    imageAlignToolbar.appendChild(alignmentGroup);
    imageAlignToolbar.appendChild(toolGroup);

    imageResizeHandle = document.createElement('button');
    imageResizeHandle.type = 'button';
    imageResizeHandle.className = 'preview-image-resize-handle';
    imageResizeHandle.setAttribute('aria-label', 'Resize image');

    imageCropBox = document.createElement('div');
    imageCropBox.className = 'preview-image-crop-box';
    imageCropBox.hidden = true;
    imageCropBox.dataset.cropHandle = 'move';
    ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'].forEach((handle) => {
        const handleEl = document.createElement('span');
        handleEl.className = `preview-image-crop-handle preview-image-crop-handle-${handle}`;
        handleEl.dataset.cropHandle = handle;
        imageCropBox.appendChild(handleEl);
    });
    imageCropBox.addEventListener('pointerdown', startPreviewImageCropDrag);

    imageResizeOverlay.appendChild(imageAlignToolbar);
    imageResizeOverlay.appendChild(imageCropBox);
    imageResizeOverlay.appendChild(imageResizeHandle);
    previewWrapper.appendChild(imageResizeOverlay);

    imageResizeHandle.addEventListener('pointerdown', startPreviewImageResize);
    return imageResizeOverlay;
}

function updateImageResizeOverlayPosition() {
    if (!selectedPreviewImage || !imageResizeOverlay) return;
    const previewWrapper = previewContent ? previewContent.closest('.preview-wrapper') : null;
    if (!previewWrapper) return;

    const rect = selectedPreviewImage.getBoundingClientRect();
    const wrapperRect = previewWrapper.getBoundingClientRect();

    imageResizeOverlay.hidden = false;
    imageResizeOverlay.style.left = `${rect.left - wrapperRect.left + previewWrapper.scrollLeft}px`;
    imageResizeOverlay.style.top = `${rect.top - wrapperRect.top + previewWrapper.scrollTop}px`;
    imageResizeOverlay.style.width = `${rect.width}px`;
    imageResizeOverlay.style.height = `${rect.height}px`;
    updateImageAlignmentToolbarState();
    updateImageCropToolbarState();
    updateImageCropBoxPosition();
}

function clearPreviewImageSelection() {
    if (selectedPreviewImage) selectedPreviewImage.classList.remove('preview-image-selected');
    selectedPreviewImage = null;
    imageResizeState = null;
    cancelPreviewImageCrop({ silent: true });
    if (imageResizeOverlay) imageResizeOverlay.hidden = true;
}

function extractRelativeImageSrc(src) {
    const value = String(src || '').trim();
    if (!value) return '';
    const match = value.match(/(?:^|\/)(images\/[^?#"']+)/i);
    if (match) return match[1];
    return value;
}

function getSourceLines(startLine, endLine) {
    const text = getMarkdownValue().replace(/\r\n?/g, '\n');
    const lines = text.split('\n');
    const startIndex = Math.max(0, Number(startLine) - 1);
    const endIndex = Math.max(startIndex, Math.min(lines.length - 1, Number(endLine) - 1));
    return { text, lines, startIndex, endIndex };
}

function findImageTagInSourceRange(startLine, endLine, src) {
    const relSrc = extractRelativeImageSrc(src);
    const source = getSourceLines(startLine, endLine);
    const rangeText = source.lines.slice(source.startIndex, source.endIndex + 1).join('\n');
    const imgRe = /<img\b[^>]*>/gi;
    let match;

    while ((match = imgRe.exec(rangeText)) !== null) {
        const tag = match[0];
        const tagSrcMatch = tag.match(/\bsrc\s*=\s*(["'])(.*?)\1/i);
        const tagSrc = tagSrcMatch ? extractRelativeImageSrc(tagSrcMatch[2]) : '';
        if (relSrc && tagSrc && tagSrc !== relSrc) continue;

        const before = rangeText.slice(0, match.index);
        const lineOffset = (before.match(/\n/g) || []).length;
        const lineIndex = source.startIndex + lineOffset;
        const lineStartInRange = before.lastIndexOf('\n') + 1;
        const chStart = before.length - lineStartInRange;
        const chEnd = chStart + tag.length;
        return { tag, lineIndex, chStart, chEnd };
    }

    return null;
}

function getPreviewImageElement(target) {
    if (!target) return null;
    if (target.tagName && target.tagName.toLowerCase() === 'img') return target;
    if (target.classList && target.classList.contains('image-crop-frame')) return target.querySelector('img');
    return target.querySelector ? target.querySelector('img') : null;
}

function getPreviewImageSelectionTarget(target) {
    if (!target || !target.closest) return null;
    const cropFrame = target.closest('.image-crop-frame');
    if (cropFrame && previewContent && previewContent.contains(cropFrame)) return cropFrame;
    const img = target.closest('img');
    if (img && previewContent && previewContent.contains(img)) return img;
    return null;
}

function getSelectedPreviewImageElement() {
    return getPreviewImageElement(selectedPreviewImage);
}

function getImageCropFromTag(tag) {
    const match = String(tag || '').match(/\sdata-crop\s*=\s*(["'])(.*?)\1/i);
    return match ? parseImageCropValue(match[2]) : null;
}

function setImageCropOnTag(tag, crop) {
    const nextCrop = formatImageCropValue(crop);
    const current = String(tag || '');
    if (/\sdata-crop\s*=\s*(["']).*?\1/i.test(current)) {
        return current.replace(/\sdata-crop\s*=\s*(["']).*?\1/i, ` data-crop="${nextCrop}"`);
    }
    return current.replace(/<img\b/i, `<img data-crop="${nextCrop}"`);
}

function removeImageCropFromTag(tag) {
    return String(tag || '').replace(/\sdata-crop\s*=\s*(["']).*?\1/i, '');
}

function imageTagIsCover(tag) {
    return /\sdata-cover\s*=\s*(?:(["'])page\1|page)(?=\s|>)/i.test(String(tag || ''));
}

function setImageCoverOnTag(tag, enabled) {
    let next = String(tag || '').replace(/\sdata-cover\s*=\s*(?:(['"]).*?\1|[^\s>]+)/gi, '');
    if (!enabled) return next;
    next = removeImageCropFromTag(next)
        .replace(/\swidth\s*=\s*(?:(['"]).*?\1|[^\s>]+)/gi, '')
        .replace(/\sheight\s*=\s*(?:(['"]).*?\1|[^\s>]+)/gi, '');
    return next.replace(/<img\b/i, '<img data-cover="page"');
}

function replaceImageTagInEditor(found, nextTag, origin = 'image-edit') {
    if (!found || !nextTag) return false;

    if (markdownEditor) {
        const doc = markdownEditor.getDoc();
        doc.replaceRange(
            nextTag,
            { line: found.lineIndex, ch: found.chStart },
            { line: found.lineIndex, ch: found.chEnd },
            origin
        );
        return true;
    }

    if (markdownInput) {
        const value = markdownInput.value.replace(/\r\n?/g, '\n');
        const lines = value.split('\n');
        const line = lines[found.lineIndex] || '';
        lines[found.lineIndex] = line.slice(0, found.chStart) + nextTag + line.slice(found.chEnd);
        markdownInput.value = lines.join('\n');
        handleMarkdownInputChange();
        return true;
    }

    return false;
}

function getImageSourceTagForPreviewImage(target) {
    const img = getPreviewImageElement(target);
    if (!img) return false;
    const sourceHost = target || img;
    const startLine = parseInt(sourceHost.getAttribute('data-source-start-line') || img.getAttribute('data-source-start-line') || img.closest('[data-source-start-line]')?.getAttribute('data-source-start-line') || '', 10);
    const endLine = parseInt(sourceHost.getAttribute('data-source-end-line') || img.getAttribute('data-source-end-line') || img.closest('[data-source-end-line]')?.getAttribute('data-source-end-line') || '', 10);
    if (!Number.isFinite(startLine) || !Number.isFinite(endLine)) return false;
    return findImageTagInSourceRange(startLine, endLine, img.getAttribute('src') || '');
}

function setPreviewImageWidthInEditor(img, widthPx) {
    const found = getImageSourceTagForPreviewImage(img);
    if (!found) return false;

    const width = Math.max(24, Math.round(Number(widthPx) || 0));
    let nextTag = found.tag;
    if (/\bwidth\s*=\s*(?:(["']).*?\1|[^\s>]+)/i.test(nextTag)) {
        nextTag = nextTag.replace(/\bwidth\s*=\s*(?:(["']).*?\1|[^\s>]+)/i, `width="${width}"`);
    } else {
        nextTag = nextTag.replace(/<img\b/i, `<img width="${width}"`);
    }
    nextTag = nextTag.replace(/\s+\bheight\s*=\s*(?:(["']).*?\1|[^\s>]+)/gi, '');

    return replaceImageTagInEditor(found, nextTag, 'image-resize');
}

function getImageAlignmentFromTag(tag) {
    const classMatch = String(tag || '').match(/\bclass\s*=\s*(["'])(.*?)\1/i);
    const classes = classMatch ? String(classMatch[2] || '').split(/\s+/) : [];
    if (classes.includes('img-right')) return 'right';
    if (classes.includes('img-center')) return 'center';
    if (classes.includes('img-left')) return 'left';
    return 'center';
}

function setImageAlignmentClassOnTag(tag, align) {
    const wanted = align === 'right' ? 'img-right' : align === 'center' ? 'img-center' : 'img-left';
    const current = String(tag || '');
    const classMatch = current.match(/\bclass\s*=\s*(["'])(.*?)\1/i);

    if (classMatch) {
        const quote = classMatch[1];
        const classes = String(classMatch[2] || '')
            .split(/\s+/)
            .filter(Boolean)
            .filter((cls) => !['img-left', 'img-center', 'img-right'].includes(cls));
        classes.push(wanted);
        return current.replace(/\bclass\s*=\s*(["']).*?\1/i, `class=${quote}${classes.join(' ')}${quote}`);
    }

    return current.replace(/<img\b/i, `<img class="${wanted}"`);
}

function updateImageAlignmentToolbarState() {
    if (!imageAlignToolbar || !selectedPreviewImage) return;
    const found = getImageSourceTagForPreviewImage(selectedPreviewImage);
    const align = found ? getImageAlignmentFromTag(found.tag) : 'center';
    imageAlignToolbar.querySelectorAll('.preview-image-align-btn').forEach((btn) => {
        btn.classList.toggle('is-active', btn.dataset.align === align);
    });
}

function updateImageCropToolbarState() {
    if (!imageAlignToolbar) return;
    imageAlignToolbar.classList.toggle('is-cropping', imageCropActive);
    const found = selectedPreviewImage ? getImageSourceTagForPreviewImage(selectedPreviewImage) : null;
    const hasCrop = !!(found && getImageCropFromTag(found.tag));
    const resetBtn = imageAlignToolbar.querySelector('[data-action="reset-crop"]');
    if (resetBtn) resetBtn.disabled = !hasCrop && !imageCropActive;
    const isCover = !!(found && imageTagIsCover(found.tag));
    imageAlignToolbar.classList.toggle('is-cover', isCover);
    imageResizeOverlay?.classList.toggle('is-cover', isCover);
    const coverBtn = imageAlignToolbar.querySelector('[data-action="cover"]');
    if (coverBtn) {
        const coverLabel = isCover ? 'Remove cover' : 'Use as cover';
        coverBtn.innerHTML = `${'<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="1.5"/><path d="M5.5 13l3-3 2.2 2.2 1.6-1.6 2.2 2.4M13.5 6.5h.01"/></svg>'}<span>${coverLabel}</span>`;
        coverBtn.title = coverLabel;
        coverBtn.setAttribute('aria-label', coverLabel);
        coverBtn.classList.toggle('is-active', isCover);
    }
}

function togglePreviewImageCover() {
    if (!selectedPreviewImage) return;
    const found = getImageSourceTagForPreviewImage(selectedPreviewImage);
    if (!found) {
        showToast('Could not find this image tag in the editor');
        return;
    }

    const enableCover = !imageTagIsCover(found.tag);
    const nextTag = setImageCoverOnTag(found.tag, enableCover);
    if (!replaceImageTagInEditor(found, nextTag, 'image-cover')) {
        showToast('Could not update image cover mode');
        return;
    }
    clearPreviewImageSelection();
    showToast(enableCover ? 'Image set as a full-page cover' : 'Image returned to the document flow');
}

function updateImageCropBoxPosition() {
    if (!imageCropBox || !imageCropActive || !imageCropRect) return;
    imageCropBox.hidden = false;
    imageCropBox.style.left = `${imageCropRect.x}%`;
    imageCropBox.style.top = `${imageCropRect.y}%`;
    imageCropBox.style.width = `${imageCropRect.w}%`;
    imageCropBox.style.height = `${imageCropRect.h}%`;
}

function startPreviewImageCrop() {
    if (!selectedPreviewImage) return;
    imageCropActive = true;
    imageCropRect = { x: 0, y: 0, w: 100, h: 100 };
    imageResizeOverlay?.classList.add('is-cropping');
    updateImageCropToolbarState();
    updateImageCropBoxPosition();
}

function cancelPreviewImageCrop(options = {}) {
    imageCropActive = false;
    imageCropState = null;
    imageCropRect = null;
    imageResizeOverlay?.classList.remove('is-cropping');
    if (imageCropBox) imageCropBox.hidden = true;
    updateImageCropToolbarState();
    if (!options.silent) updateImageResizeOverlayPosition();
}

function combineImageCrop(existingCrop, visibleCrop) {
    const base = existingCrop || { x: 0, y: 0, w: 100, h: 100 };
    const crop = visibleCrop || { x: 0, y: 0, w: 100, h: 100 };
    return {
        x: base.x + (base.w * crop.x / 100),
        y: base.y + (base.h * crop.y / 100),
        w: base.w * crop.w / 100,
        h: base.h * crop.h / 100
    };
}

function applyPreviewImageCrop() {
    if (!selectedPreviewImage || !imageCropRect) return;
    const found = getImageSourceTagForPreviewImage(selectedPreviewImage);
    if (!found) {
        showToast('Could not find this image tag in the editor');
        return;
    }

    const existingCrop = getImageCropFromTag(found.tag);
    const nextCrop = combineImageCrop(existingCrop, imageCropRect);
    const nextTag = setImageCropOnTag(found.tag, nextCrop);
    if (!replaceImageTagInEditor(found, nextTag, 'image-crop')) {
        showToast('Could not update image crop');
        return;
    }

    cancelPreviewImageCrop({ silent: true });
}

function resetPreviewImageCrop() {
    if (!selectedPreviewImage) return;
    const found = getImageSourceTagForPreviewImage(selectedPreviewImage);
    if (!found) {
        showToast('Could not find this image tag in the editor');
        return;
    }

    const nextTag = removeImageCropFromTag(found.tag);
    if (nextTag === found.tag) {
        cancelPreviewImageCrop();
        return;
    }

    if (!replaceImageTagInEditor(found, nextTag, 'image-crop-reset')) {
        showToast('Could not reset image crop');
        return;
    }

    cancelPreviewImageCrop({ silent: true });
}

function startPreviewImageCropDrag(event) {
    if (!imageCropActive || !imageCropRect || !selectedPreviewImage) return;
    event.preventDefault();
    event.stopPropagation();

    const handle = event.target?.dataset?.cropHandle || imageCropBox.dataset.cropHandle || 'move';
    imageCropState = {
        pointerId: event.pointerId,
        handle,
        startX: event.clientX,
        startY: event.clientY,
        startRect: { ...imageCropRect }
    };

    try { imageCropBox.setPointerCapture(event.pointerId); } catch { /* ignore */ }
    document.body.classList.add('is-cropping-preview-image');
    document.addEventListener('pointermove', handlePreviewImageCropMove);
    document.addEventListener('pointerup', finishPreviewImageCropDrag, { once: true });
}

function handlePreviewImageCropMove(event) {
    if (!imageCropState || !imageCropRect || !imageResizeOverlay) return;
    const overlayRect = imageResizeOverlay.getBoundingClientRect();
    const start = imageCropState.startRect;
    const dx = overlayRect.width ? ((event.clientX - imageCropState.startX) / overlayRect.width) * 100 : 0;
    const dy = overlayRect.height ? ((event.clientY - imageCropState.startY) / overlayRect.height) * 100 : 0;
    const handle = imageCropState.handle;
    const minSize = 5;

    let left = start.x;
    let top = start.y;
    let right = start.x + start.w;
    let bottom = start.y + start.h;

    if (handle === 'move') {
        const nextX = Math.max(0, Math.min(100 - start.w, start.x + dx));
        const nextY = Math.max(0, Math.min(100 - start.h, start.y + dy));
        imageCropRect = { x: nextX, y: nextY, w: start.w, h: start.h };
        updateImageCropBoxPosition();
        return;
    }

    if (handle.includes('w')) left = Math.max(0, Math.min(right - minSize, start.x + dx));
    if (handle.includes('e')) right = Math.min(100, Math.max(left + minSize, start.x + start.w + dx));
    if (handle.includes('n')) top = Math.max(0, Math.min(bottom - minSize, start.y + dy));
    if (handle.includes('s')) bottom = Math.min(100, Math.max(top + minSize, start.y + start.h + dy));

    imageCropRect = {
        x: left,
        y: top,
        w: right - left,
        h: bottom - top
    };
    updateImageCropBoxPosition();
}

function finishPreviewImageCropDrag() {
    document.removeEventListener('pointermove', handlePreviewImageCropMove);
    document.body.classList.remove('is-cropping-preview-image');
    if (imageCropState && imageCropBox) {
        try { imageCropBox.releasePointerCapture(imageCropState.pointerId); } catch { /* ignore */ }
    }
    imageCropState = null;
}

function applyPreviewImageAlignment(align) {
    if (!selectedPreviewImage) return;
    const found = getImageSourceTagForPreviewImage(selectedPreviewImage);
    if (!found) {
        showToast('Could not find this image tag in the editor');
        return;
    }

    const nextTag = setImageAlignmentClassOnTag(found.tag, align);
    if (!replaceImageTagInEditor(found, nextTag, 'image-align')) {
        showToast('Could not update image alignment');
        return;
    }

    const img = getSelectedPreviewImageElement();
    selectedPreviewImage.classList.remove('img-left', 'img-center', 'img-right');
    selectedPreviewImage.classList.add(align === 'right' ? 'img-right' : align === 'center' ? 'img-center' : 'img-left');
    img?.classList.remove('img-left', 'img-center', 'img-right');
    img?.classList.add(align === 'right' ? 'img-right' : align === 'center' ? 'img-center' : 'img-left');
    updateImageAlignmentToolbarState();
}

function selectPreviewImage(target) {
    if (!target || !previewContent || !previewContent.contains(target)) {
        clearPreviewImageSelection();
        return;
    }

    clearPreviewImageSelection();
    selectedPreviewImage = target;
    selectedPreviewImage.classList.add('preview-image-selected');
    ensureImageResizeOverlay();
    updateImageResizeOverlayPosition();
}

function startPreviewImageResize(event) {
    if (!selectedPreviewImage) return;
    event.preventDefault();
    event.stopPropagation();

    const zoom = getCurrentPreviewZoom() || 1;
    const rect = selectedPreviewImage.getBoundingClientRect();
    cancelPreviewImageCrop({ silent: true });
    const page = getPreviewLayoutSurface(selectedPreviewImage);
    const pageRect = page ? page.getBoundingClientRect() : null;
    const maxCssWidth = pageRect ? Math.max(80, (pageRect.width - 40) / zoom) : 900;

    imageResizeState = {
        pointerId: event.pointerId,
        startX: event.clientX,
        startWidthCss: rect.width / zoom,
        maxCssWidth
    };

    try { imageResizeHandle.setPointerCapture(event.pointerId); } catch { /* ignore */ }
    document.body.classList.add('is-resizing-preview-image');
    document.addEventListener('pointermove', handlePreviewImageResizeMove);
    document.addEventListener('pointerup', finishPreviewImageResize, { once: true });
}

function handlePreviewImageResizeMove(event) {
    if (!imageResizeState || !selectedPreviewImage) return;
    const zoom = getCurrentPreviewZoom() || 1;
    const deltaCss = (event.clientX - imageResizeState.startX) / zoom;
    const nextWidth = Math.max(48, Math.min(imageResizeState.maxCssWidth, imageResizeState.startWidthCss + deltaCss));
    selectedPreviewImage.style.width = `${Math.round(nextWidth)}px`;
    if (selectedPreviewImage.tagName && selectedPreviewImage.tagName.toLowerCase() === 'img') {
        selectedPreviewImage.style.height = 'auto';
    }
    updateImageResizeOverlayPosition();
}

function finishPreviewImageResize(event) {
    document.removeEventListener('pointermove', handlePreviewImageResizeMove);
    document.body.classList.remove('is-resizing-preview-image');

    if (!imageResizeState || !selectedPreviewImage) {
        imageResizeState = null;
        return;
    }

    try { imageResizeHandle.releasePointerCapture(imageResizeState.pointerId); } catch { /* ignore */ }

    const zoom = getCurrentPreviewZoom() || 1;
    const finalWidth = selectedPreviewImage.getBoundingClientRect().width / zoom;
    const updated = setPreviewImageWidthInEditor(selectedPreviewImage, finalWidth);
    imageResizeState = null;

    if (!updated) {
        selectedPreviewImage.style.width = '';
        if (selectedPreviewImage.tagName && selectedPreviewImage.tagName.toLowerCase() === 'img') {
            selectedPreviewImage.style.height = '';
        }
        updateImageResizeOverlayPosition();
        showToast('Could not find this image tag in the editor');
    }
}

function isElementMostlyVisibleInContainer(element, container) {
    if (!element || !container) return true;
    const elementRect = element.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();
    const margin = 24;
    return elementRect.top >= containerRect.top + margin &&
        elementRect.bottom <= containerRect.bottom - margin;
}

function highlightPreviewSourceBlock(block) {
    if (!previewContent || !block) {
        clearPreviewSourceHighlight();
        return;
    }

    if (activePreviewSourceBlockId === block.id) return;

    previewContent.querySelectorAll('.preview-source-highlight').forEach((el) => {
        el.classList.remove('preview-source-highlight');
    });

    const selector = `[data-source-block="${CSS.escape(block.id)}"]`;
    const targets = Array.from(previewContent.querySelectorAll(selector));
    const target = targets[0];
    if (!targets.length || !target) {
        activePreviewSourceBlockId = null;
        return;
    }

    targets.forEach((el) => el.classList.add('preview-source-highlight'));
    activePreviewSourceBlockId = block.id;

    const previewScroller = previewContent.closest('.preview-wrapper') || previewContent.parentElement;
    if (previewScroller && !isElementMostlyVisibleInContainer(target, previewScroller)) {
        target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
    }
}

function highlightPreviewSourceLine(lineNumber) {
    const block = findPreviewSourceBlockForLine(lineNumber);
    if (!block) {
        clearPreviewSourceHighlight();
        return;
    }
    highlightPreviewSourceBlock(block);
}

function waitForPreviewImagesInHtml(htmlContent, timeoutMs = 1200) {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = htmlContent;
    const srcs = Array.from(wrapper.querySelectorAll('img'))
        .map((img) => img.getAttribute('src'))
        .filter(Boolean);

    if (!srcs.length) return Promise.resolve();

    const uniqueSrcs = Array.from(new Set(srcs));
    const waits = uniqueSrcs.map((src) => new Promise((resolve) => {
        const img = new Image();
        let settled = false;
        const done = () => {
            if (settled) return;
            settled = true;
            resolve();
        };

        img.onload = done;
        img.onerror = done;
        img.src = src;

        if (img.complete) done();
    }));

    return Promise.race([
        Promise.all(waits),
        new Promise((resolve) => setTimeout(resolve, timeoutMs))
    ]);
}

function renderPagelessContent(htmlContent) {
    const oldMeasureRoot = document.getElementById('preview-measure-root');
    if (oldMeasureRoot) oldMeasureRoot.remove();

    previewContent.innerHTML = '';

    const doc = document.createElement('div');
    doc.className = 'pageless-document';
    doc.insertAdjacentHTML('afterbegin', htmlContent || '');
    initializeImageCropFrames(doc);

    doc.querySelectorAll('.page-margin-zone, .page-margin-highlight, .page-number-label').forEach((node) => node.remove());
    doc.querySelectorAll('.toc-page').forEach((node) => { node.textContent = ''; });

    previewContent.appendChild(doc);
    decorateResizableTables(doc);
    requestAnimationFrame(() => positionTableResizeHandles(doc));
}

async function updatePreview() {
    const renderVersion = ++previewRenderVersion;
    const markdownText = getMarkdownValue();
    const annotatedHtml = renderMarkdownWithSourceAnnotations(markdownText);
    const strictAnchorsHtml = applyStrictHeadingIds(annotatedHtml);
    const withTOC = replaceTOCMarkers(strictAnchorsHtml);
    const withCoverImages = applyImageCoverRendering(withTOC);
    const withCroppedImages = applyImageCropRendering(withCoverImages);
    const withSessionImages = rewriteSessionImageUrlsInHtml(withCroppedImages, currentSessionId);
    await waitForPreviewImagesInHtml(withSessionImages);
    if (renderVersion !== previewRenderVersion) return;
    applyPageNumberVisibility();
    if (isPagelessMode()) {
        renderPagelessContent(withSessionImages);
        return;
    }
    paginateContent(withSessionImages);
}

function preprocessMarkdownLayoutTags(markdownText) {
    // IMPORTANT:
    // <col> is a real HTML table element and is treated as a VOID tag by browsers.
    // That means <col>...</col> will *not* contain content when parsed as HTML,
    // collapsing our intended layout.
    //
    // Fix: rewrite <row>/<col> to safe custom elements (<md-row>/<md-col>) before
    // Marked parses the markdown, while leaving fenced code blocks unchanged.

    const src = String(markdownText || '');
    const lines = src.split('\n');
    let inFence = false;
    let fenceMarker = null;

    const out = [];
    for (const line of lines) {
        const trimmed = line.trimStart();
        const fenceMatch = trimmed.match(/^(```+|~~~+)/);
        if (fenceMatch) {
            const marker = fenceMatch[1];
            if (!inFence) {
                inFence = true;
                fenceMarker = marker[0];
            } else {
                // Close fence only if it matches the starting fence type.
                if (fenceMarker && marker[0] === fenceMarker) {
                    inFence = false;
                    fenceMarker = null;
                }
            }
            out.push(line);
            continue;
        }

        if (inFence) {
            out.push(line);
            continue;
        }

        out.push(rewriteLayoutTagsInLine(line));
    }

    return out.join('\n');
}

function rewriteLayoutTagsInLine(line) {
    const s = String(line || '');
    let i = 0;
    let out = '';

    while (i < s.length) {
        const ch = s[i];
        if (ch !== '<') {
            out += ch;
            i++;
            continue;
        }

        // Find end of tag.
        const gt = s.indexOf('>', i + 1);
        if (gt === -1) {
            out += s.slice(i);
            break;
        }

        const tagText = s.slice(i, gt + 1);
        const rewritten = rewriteLayoutTag(tagText);
        out += rewritten;
        i = gt + 1;
    }

    return out;
}

function rewriteLayoutTag(tagText) {
    const t = String(tagText || '');
    // Only touch tags that look like <row ...>, </row>, <col ...>, </col>
    // Best-effort parsing without regex-heavy nested logic.
    if (!t.startsWith('<')) return t;

    let j = 1;
    while (j < t.length && (t[j] === ' ' || t[j] === '\t' || t[j] === '\n' || t[j] === '\r')) j++;

    let isClosing = false;
    if (t[j] === '/') {
        isClosing = true;
        j++;
        while (j < t.length && (t[j] === ' ' || t[j] === '\t')) j++;
    }

    // Extract tag name.
    let nameStart = j;
    while (j < t.length) {
        const c = t[j];
        const isNameChar = (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9') || c === '-' || c === '_';
        if (!isNameChar) break;
        j++;
    }
    const name = t.slice(nameStart, j);
    if (!name) return t;

    const lower = name.toLowerCase();
    let nextName = null;
    if (lower === 'row') nextName = 'md-row';
    if (lower === 'col') nextName = 'md-col';
    if (!nextName) return t;

    // Rebuild tag with same prefix/attrs.
    const beforeName = t.slice(0, nameStart);
    const afterName = t.slice(j);
    return beforeName + nextName + afterName;
}

function replaceTOCMarkers(htmlText) {
    // Find all [TOC] markers (they'll be wrapped in <p> tags by marked.js)
    const tocMarkerRegex = /<p\b[^>]*>\[TOC\]<\/p>/gi;

    if (!tocMarkerRegex.test(htmlText)) {
        return htmlText; // No TOC markers found
    }

    // Find the position of the first [TOC] marker
    tocMarkerRegex.lastIndex = 0; // Reset regex
    const tocMatch = tocMarkerRegex.exec(htmlText);
    const tocPosition = tocMatch ? tocMatch.index : 0;

    // Extract all headings from the HTML
    const headingRe = /<h([1-6])([^>]*)id="([^"]+)"[^>]*>([\s\S]*?)<\/h\1>/gi;
    const headings = [];
    let match;

    while ((match = headingRe.exec(htmlText)) !== null) {
        const level = parseInt(match[1]);
        const id = match[3];
        const innerHtml = match[4];
        const position = match.index; // Position in HTML

        // Only include headings that appear AFTER the TOC marker
        if (position <= tocPosition) {
            continue;
        }

        // Extract text content from HTML
        const tmp = document.createElement('div');
        tmp.innerHTML = innerHtml;
        const text = tmp.textContent || tmp.innerText || '';

        headings.push({ level, id, text: text.trim(), position });
    }

    if (headings.length === 0) {
        // No headings found after TOC, remove TOC markers
        return htmlText.replace(tocMarkerRegex, '');
    }


    // Calculate page numbers by estimating content height
    const estimatePageNumber = (position) => {
        // Count approximate content before this heading
        const contentBefore = htmlText.substring(0, position);

        // Rough estimate: count major elements
        const paragraphs = (contentBefore.match(/<p>/gi) || []).length;
        const headingsCount = (contentBefore.match(/<h[1-6]/gi) || []).length;
        const images = (contentBefore.match(/<img/gi) || []).length;
        const codeBlocks = (contentBefore.match(/<pre>/gi) || []).length;
        const lists = (contentBefore.match(/<ul>|<ol>/gi) || []).length;
        const tables = (contentBefore.match(/<table>/gi) || []).length;

        // Rough height estimates (in "units" that roughly equal 1 page = 35 units)
        const estimatedHeight =
            paragraphs * 1.5 +      // Each paragraph ~1.5 units
            headingsCount * 2 +     // Each heading ~2 units
            images * 10 +           // Each image ~10 units (200px default height)
            codeBlocks * 6 +        // Each code block ~6 units
            lists * 3 +             // Each list ~3 units
            tables * 5;             // Each table ~5 units

        return Math.max(1, Math.floor(estimatedHeight / 35) + 1);
    };

    // Generate TOC HTML
    let tocHtml = '<div class="toc-wrapper">\n';
    headings.forEach(h => {
        const pageNum = estimatePageNumber(h.position);
        tocHtml += `  <div class="toc-entry toc-level-${h.level}">
    <a href="#${h.id}">
      <span class="toc-text">${h.text}</span>
      <span class="toc-spacer"></span>
      <span class="toc-page">${pageNum}</span>
    </a>
  </div>\n`;
    });
    tocHtml += '</div>';

    // Replace all [TOC] markers with the generated TOC
    return htmlText.replace(tocMarkerRegex, tocHtml);
}

function applyStrictHeadingIds(htmlText) {
    const headingRe = /<h([1-6])([^>]*)>([\s\S]*?)<\/h\1>/gi;

    const slugifyBase = (innerHtml) => {
        try {
            const tmp = document.createElement('div');
            tmp.innerHTML = String(innerHtml || '');
            const text = String(tmp.textContent || '').trim();
            let t = text.replace(/^#+\s*/, '').trim();
            t = t.replace(/[\s\-_.]+/g, '-');
            t = t.replace(/[^a-z0-9\-]/gi, '').toLowerCase();
            return t.replace(/^-+|-+$/g, '');
        } catch {
            return '';
        }
    };

    return String(htmlText || '').replace(headingRe, (full, level, attrs, inner) => {
        const base = slugifyBase(inner);
        if (!base) return full;

        const lvl = String(level);
        const anchor = (lvl === '1') ? base : `h${lvl}-${base}`;

        const attrsNoId = String(attrs || '').replace(/\s+id\s*=\s*(['"]).*?\1/gi, '');
        return `<h${lvl}${attrsNoId} id="${anchor}">${inner}</h${lvl}>`;
    });
}

function appendPageNumberLabel(page, current, total) {
    if (!page || !current || !pageNumbers?.checked) return;
    const style = pageNumberStyle?.value || 'page';
    const vertical = pageNumberVertical?.value === 'top' ? 'top' : 'bottom';
    const horizontal = ['left', 'center', 'right'].includes(pageNumberHorizontal?.value) ? pageNumberHorizontal.value : 'right';
    const size = Math.max(8, Math.min(18, parseInt(pageNumberSize?.value, 10) || 10));
    const label = document.createElement('div');
    label.className = `page-number-label page-number-label-${style} page-number-${vertical} page-number-${horizontal}`;
    label.style.setProperty('--page-number-size', `${size}px`);
    label.setAttribute('aria-label', `Page ${current} of ${total}`);

    const number = (value, className) => {
        const span = document.createElement('span');
        span.className = className;
        span.textContent = String(value);
        return span;
    };
    const text = (value) => label.appendChild(document.createTextNode(value));

    if (style === 'page') {
        text('Page ');
        label.appendChild(number(current, 'page-number-current'));
    } else if (style === 'number') {
        label.appendChild(number(current, 'page-number-current'));
    } else if (style === 'fraction') {
        label.appendChild(number(current, 'page-number-current'));
        text(' / ');
        label.appendChild(number(total, 'page-number-total'));
    } else {
        text('Page ');
        label.appendChild(number(current, 'page-number-current'));
        text(' out of ');
        label.appendChild(number(total, 'page-number-total'));
    }
    page.appendChild(label);
}

function paginateContent(htmlContent) {
    const oldMeasureRoot = document.getElementById('preview-measure-root');
    if (oldMeasureRoot) oldMeasureRoot.remove();

    const measureRoot = document.createElement('div');
    measureRoot.id = 'preview-measure-root';
    measureRoot.style.position = 'absolute';
    measureRoot.style.visibility = 'hidden';
    measureRoot.style.pointerEvents = 'none';
    measureRoot.style.left = '-100000px';
    measureRoot.style.top = '0';
    measureRoot.style.width = '210mm';

    // Use a real A4-sized measuring page so the browser decides mm->px.
    const measurePage = document.createElement('div');
    measurePage.className = 'a4-page';
    measurePage.style.margin = '0';
    measurePage.style.boxShadow = 'none';
    measurePage.style.height = '297mm';

    measureRoot.appendChild(measurePage);
    document.body.appendChild(measureRoot);

    const pageStyle = window.getComputedStyle(measurePage);
    const paddingBottomPx = parseFloat(pageStyle.paddingBottom) || 0;
    // Added a small safety margin to prevent rounding/layout differences (screen vs print)
    // from triggering unexpected overflows (which can yield extra blank pages in the PDF).
    const maxBottom = measurePage.clientHeight - paddingBottomPx - 10;

    // Put content into a temporary wrapper to get top-level blocks.
    const tempWrapper = document.createElement('div');
    tempWrapper.innerHTML = htmlContent;
    initializeImageCropFrames(tempWrapper);
    const queue = Array.from(tempWrapper.children);

    const pages = [];
    let currentPageElements = [];

    const isEffectivelyEmptyBlock = (node) => {
        if (!node) return true;
        const tagName = String(node.tagName || '').toUpperCase();
        if (['IMG', 'TABLE', 'PRE', 'BLOCKQUOTE', 'UL', 'OL', 'HR'].includes(tagName)) return false;
        if (node.classList && node.classList.contains('image-crop-frame')) return false;
        // If it contains real content elements, it's not empty.
        if (node.querySelector) {
            if (node.querySelector('img, table, pre, blockquote, ul, ol, hr, .image-crop-frame')) return false;
        }
        const text = String(node.textContent || '').replace(/\s+/g, '');
        if (text) return false;

        // Treat <br>-only blocks as empty to avoid blank pages.
        if (node.querySelector) {
            const hasAnyElement = !!node.querySelector('*');
            if (!hasAnyElement) return true;
            const hasOnlyBr = Array.from(node.querySelectorAll('*')).every((el) => (el.tagName || '').toUpperCase() === 'BR');
            if (hasOnlyBr) return true;
        }

        return true;
    };

    const trimLeadingBrOnPageStart = (node) => {
        // When content is pushed to a new page, it can start with many <br> (e.g., user added
        // <br> before an image). Those leading breaks make a page look blank.
        // We remove leading <br> runs only when the element is the first thing on a page.
        if (!node || !node.childNodes || node.childNodes.length === 0) return;

        // Only trim on common wrappers (mostly <p>). Avoid touching headings.
        const tag = (node.tagName || '').toUpperCase();
        if (tag && /^H[1-6]$/.test(tag)) return;

        while (node.firstChild) {
            const first = node.firstChild;
            if (first.nodeType === Node.ELEMENT_NODE && first.tagName && first.tagName.toUpperCase() === 'BR') {
                node.removeChild(first);
                continue;
            }
            // Remove whitespace-only text nodes.
            if (first.nodeType === Node.TEXT_NODE && !String(first.textContent || '').trim()) {
                node.removeChild(first);
                continue;
            }
            break;
        }
    };

    const isHeading = (el) => {
        return el && /^H[1-6]$/i.test(el.tagName);
    };

    // Helper: compute used height up to the last child, including its margin-bottom.
    const getUsedHeightPx = () => {
        const children = measurePage.children;
        if (!children.length) return 0;
        const last = children[children.length - 1];
        const pageRect = measurePage.getBoundingClientRect();
        const lastRect = last.getBoundingClientRect();
        const lastStyle = window.getComputedStyle(last);
        const lastMarginBottom = parseFloat(lastStyle.marginBottom) || 0;
        return (lastRect.bottom - pageRect.top) + lastMarginBottom;
    };

    const finishCurrentPage = () => {
        if (!currentPageElements.length) return;
        pages.push({ html: currentPageElements.map((element) => element.outerHTML).join(''), isCover: false });
        currentPageElements = [];
        measurePage.innerHTML = '';
    };

    const createTableSplitter = (table) => {
        const body = table.tBodies?.[0];
        const rows = body ? Array.from(body.rows) : [];
        if (rows.length < 2) return null;

        const create = (start, end) => {
            const fragment = table.cloneNode(false);
            const colgroup = table.querySelector(':scope > colgroup');
            const thead = table.tHead;
            if (colgroup) fragment.appendChild(colgroup.cloneNode(true));
            if (thead) fragment.appendChild(thead.cloneNode(true));
            const nextBody = body.cloneNode(false);
            rows.slice(start, end).forEach((row) => nextBody.appendChild(row.cloneNode(true)));
            fragment.appendChild(nextBody);
            if (end === rows.length && table.tFoot) fragment.appendChild(table.tFoot.cloneNode(true));
            fragment.classList.toggle('split-continued-before', start > 0);
            fragment.classList.toggle('split-continued-after', end < rows.length);
            return fragment;
        };
        return { count: rows.length, create };
    };

    const createTocSplitter = (toc) => {
        const entries = Array.from(toc.children).filter((child) => child.classList?.contains('toc-entry'));
        if (entries.length < 2) return null;
        const create = (start, end) => {
            const fragment = toc.cloneNode(false);
            entries.slice(start, end).forEach((entry) => fragment.appendChild(entry.cloneNode(true)));
            fragment.classList.toggle('split-continued-before', start > 0);
            fragment.classList.toggle('split-continued-after', end < entries.length);
            return fragment;
        };
        return { count: entries.length, create };
    };

    const createCodeSplitter = (pre) => {
        const originalCode = pre.querySelector(':scope > code') || pre.querySelector('code');
        const lines = String(originalCode ? originalCode.textContent : pre.textContent || '').split('\n');
        if (lines.length > 1 && lines[lines.length - 1] === '') lines.pop();
        if (lines.length < 2) return null;
        const create = (start, end) => {
            const fragment = pre.cloneNode(false);
            const code = originalCode ? originalCode.cloneNode(false) : document.createElement('code');
            code.textContent = lines.slice(start, end).join('\n');
            fragment.appendChild(code);
            fragment.classList.toggle('split-continued-before', start > 0);
            fragment.classList.toggle('split-continued-after', end < lines.length);
            return fragment;
        };
        return { count: lines.length, create };
    };

    const getElementSplitter = (element) => {
        if (!element) return null;
        if (element.tagName === 'TABLE') return createTableSplitter(element);
        if (element.tagName === 'PRE') return createCodeSplitter(element);
        if (element.classList?.contains('toc-wrapper')) return createTocSplitter(element);
        return null;
    };

    const splitElementToFit = (element) => {
        const splitter = getElementSplitter(element);
        if (!splitter) return null;

        let low = 1;
        let high = splitter.count - 1;
        let best = 0;
        while (low <= high) {
            const mid = Math.floor((low + high) / 2);
            const candidate = splitter.create(0, mid);
            measurePage.appendChild(candidate);
            const fits = getUsedHeightPx() <= maxBottom;
            candidate.remove();
            if (fits) {
                best = mid;
                low = mid + 1;
            } else {
                high = mid - 1;
            }
        }

        if (!best) return { first: null, rest: element };
        return {
            first: splitter.create(0, best),
            rest: splitter.create(best, splitter.count)
        };
    };

    while (queue.length) {
        let element = queue.shift();
        if (!element) continue;

        if (element.classList?.contains('page-break')) {
            finishCurrentPage();
            continue;
        }

        if (element.classList?.contains('image-cover-page')) {
            finishCurrentPage();
            pages.push({ html: element.outerHTML, isCover: true });
            continue;
        }

        const isStartingNewPage = currentPageElements.length === 0;
        if (isStartingNewPage) {
            const trimmed = element.cloneNode(true);
            trimLeadingBrOnPageStart(trimmed);
            if (isEffectivelyEmptyBlock(trimmed)) continue;
            element = trimmed;
        }

        const clone = element.cloneNode(true);
        measurePage.appendChild(clone);
        if (getUsedHeightPx() <= maxBottom) {
            currentPageElements.push(element);
            continue;
        }
        clone.remove();

        const split = splitElementToFit(element);
        if (split?.first) {
            measurePage.appendChild(split.first.cloneNode(true));
            currentPageElements.push(split.first);
            finishCurrentPage();
            if (split.rest && !isEffectivelyEmptyBlock(split.rest)) queue.unshift(split.rest);
            continue;
        }

        if (currentPageElements.length) {
            const last = currentPageElements[currentPageElements.length - 1];
            if (isHeading(last) && currentPageElements.length > 1) {
                currentPageElements.pop();
                measurePage.lastElementChild?.remove();
                finishCurrentPage();
                queue.unshift(element);
                queue.unshift(last);
            } else {
                finishCurrentPage();
                queue.unshift(element);
            }
            continue;
        }

        // A single row, code line, image, or other atomic block can still be taller than a page.
        // Keep it visible rather than dropping it; normal long tables/code are split above.
        measurePage.appendChild(element.cloneNode(true));
        currentPageElements.push(element);
        finishCurrentPage();
    }

    finishCurrentPage();

    const isPageHtmlEffectivelyEmpty = (pageHtml) => {
        const html = String(pageHtml || '');
        if (!html.trim()) return true;
        if (/<(?:img|table|pre|blockquote|ul|ol|hr)\b|class=["'][^"']*(?:image-cover-page|image-crop-frame)/i.test(html)) return false;
        // Remove common whitespace-only constructs.
        const stripped = html
            .replace(/&nbsp;/gi, ' ')
            .replace(/<br\s*\/?\s*>/gi, '')
            .replace(/<\/?(p|div|span)[^>]*>/gi, '')
            .replace(/<[^>]+>/g, '')
            .replace(/\s+/g, '')
            .trim();
        return stripped.length === 0;
    };

    // Guard: never start with an empty page.
    while (pages.length > 1 && isPageHtmlEffectivelyEmpty(pages[0].html)) {
        pages.shift();
    }

    measureRoot.remove();

    previewContent.innerHTML = '';
    if (pages.length === 0) {
        const firstPageIndex = 1;
        const startPageIndex = getStartingPage();
        const startNum = getStartingNumber();
        const shouldShow = firstPageIndex >= startPageIndex;
        const displayNum = shouldShow ? startNum : '';
        previewContent.innerHTML = `<div class="a4-page" data-page="${displayNum || ''}" data-page-visible="${shouldShow}"></div>`;
        const blankPage = previewContent.querySelector('.a4-page');
        if (blankPage) {
            appendPageNumberLabel(blankPage, displayNum, displayNum);
            decoratePageMarginHotzones(blankPage);
        }
        return;
    }

    const startPageIndex = getStartingPage();
    const startNum = getStartingNumber();

    const totalNumber = startNum + Math.max(0, pages.length - startPageIndex);

    pages.forEach((pageInfo, index) => {
        const pageDiv = document.createElement('div');
        pageDiv.className = 'a4-page';
        pageDiv.classList.toggle('has-cover-image', !!pageInfo.isCover);
        const currentPageIndex = index + 1; // 1-based page index

        // Only show page numbers starting from startPageIndex
        if (currentPageIndex >= startPageIndex) {
            const offset = currentPageIndex - startPageIndex;
            const pageNum = startNum + offset;
            pageDiv.setAttribute('data-page', String(pageNum));
            pageDiv.setAttribute('data-page-visible', 'true');
            appendPageNumberLabel(pageDiv, pageNum, totalNumber);
        } else {
            pageDiv.setAttribute('data-page', '');
            pageDiv.setAttribute('data-page-visible', 'false');
        }

        pageDiv.insertAdjacentHTML('afterbegin', pageInfo.html);
        initializeImageCropFrames(pageDiv);
        decoratePageMarginHotzones(pageDiv);
        previewContent.appendChild(pageDiv);
        decorateResizableTables(pageDiv);
    });

    // Update TOC with real page numbers after pagination
    updateTOCPageNumbers();
}

function updateTOCPageNumbers() {
    // Find all TOC entries
    const tocEntries = previewContent.querySelectorAll('.toc-entry a');
    if (tocEntries.length === 0) return;

    // Get all pages
    const pages = previewContent.querySelectorAll('.a4-page');
    if (pages.length === 0) return;

    const startPageIndex = getStartingPage();
    const startNum = getStartingNumber();

    // For each TOC entry, find which page its target heading is on
    tocEntries.forEach(tocLink => {
        const href = tocLink.getAttribute('href');
        if (!href || !href.startsWith('#')) return;

        const targetId = href.substring(1); // Remove the #

        // Find the heading with this ID across all pages
        for (let pageIndex = 0; pageIndex < pages.length; pageIndex++) {
            const page = pages[pageIndex];
            const heading = page.querySelector(`#${CSS.escape(targetId)}`);

            if (heading) {
                // Found the heading on this page
                const currentPageIndex = pageIndex + 1; // 1-based
                const pageSpan = tocLink.querySelector('.toc-page');
                if (pageSpan) {
                    // Only show page number if this page has numbering
                    if (currentPageIndex >= startPageIndex) {
                        const offset = currentPageIndex - startPageIndex;
                        const pageNum = startNum + offset;
                        pageSpan.textContent = pageNum;
                    } else {
                        pageSpan.textContent = '-';
                    }
                }
                break;
            }
        }
    });
}

function showToast(message, duration = 3000) {
    toast.textContent = message;
    toast.classList.add('show');
    setTimeout(() => toast.classList.remove('show'), duration);
}

async function copyTextToClipboard(text) {
    const value = String(text ?? '');
    if (!value) return false;

    try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(value);
            return true;
        }
    } catch { /* ignore */ }

    try {
        const ta = document.createElement('textarea');
        ta.value = value;
        ta.setAttribute('readonly', '');
        ta.style.position = 'fixed';
        ta.style.left = '-9999px';
        ta.style.top = '0';
        document.body.appendChild(ta);
        ta.select();
        const ok = document.execCommand('copy');
        document.body.removeChild(ta);
        return !!ok;
    } catch {
        return false;
    }
}

function showLoading() {
    loadingOverlay.classList.add('active');
    updateLoadingProgress({
        percent: 0,
        message: 'Hammering pages into shape',
        status: 'running'
    });
}

function hideLoading() {
    loadingOverlay.classList.remove('active');
    updateLoadingProgress({
        percent: 0,
        message: 'Hammering pages into shape',
        status: 'idle'
    });
}

function updateLoadingProgress(progress) {
    if (!progress) return;
    const percent = Math.max(0, Math.min(100, Number(progress.percent) || 0));
    const message = String(progress.message || '').trim() || 'Hammering pages into shape';
    if (loadingText) loadingText.textContent = progress.status === 'done' ? 'PDF forged.' : 'Forging your PDF...';
    if (loadingSubtext) loadingSubtext.textContent = message;
    if (loadingProgressFill) {
        loadingProgressFill.style.setProperty('--loading-progress', `${percent}%`);
        loadingProgressFill.classList.toggle('is-complete', percent >= 100 || progress.status === 'done');
    }
}

async function loadCSS(filename, cacheBust = false) {
    // Browsers block `fetch(file://...)` from a page opened via file:// (origin = "null").
    // When running from disk, rely on already-loaded stylesheets instead of fetching.
    if (typeof window !== 'undefined' && window.location && window.location.protocol === 'file:') {
        return '';
    }
    try {
        const url = cacheBust ? `${filename}?v=${Date.now()}` : filename;
        const response = await fetch(url, { cache: 'no-store' });
        return await response.text();
    } catch (error) {
        console.warn(`Could not load ${filename}:`, error);
        return '';
    }
}

function getPdfApiUrl(path = '/api/pdf') {
    const protocol = (window.location && window.location.protocol) ? window.location.protocol : '';
    if (protocol === 'http:' || protocol === 'https:') return path;

    // If index.html is opened directly from disk, the only workable way to hit the API
    // is to call a local server explicitly (and have it allow CORS).
    return `http://127.0.0.1:8010${path}`;
}

function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

async function fetchJsonOrThrow(response, fallbackMessage) {
    let payload = null;
    try {
        payload = await response.json();
    } catch { /* ignore */ }
    if (!response.ok) {
        throw new Error(payload?.detail || fallbackMessage || 'Request failed');
    }
    return payload;
}

async function runServerPdfJob(requestPayload) {
    const startResponse = await fetch(getPdfApiUrl('/api/pdf/start'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(requestPayload)
    });
    const startData = await fetchJsonOrThrow(startResponse, 'PDF job failed to start');
    const jobId = startData.job_id;
    if (!jobId) throw new Error('PDF job did not return an id');

    while (true) {
        const progressResponse = await fetch(getPdfApiUrl(`/api/pdf/progress/${encodeURIComponent(jobId)}`), {
            cache: 'no-store'
        });
        const progress = await fetchJsonOrThrow(progressResponse, 'PDF progress update failed');
        updateLoadingProgress(progress);

        if (progress.status === 'error') {
            throw new Error(progress.message || 'PDF generation failed');
        }

        if (progress.status === 'done') {
            const resultResponse = await fetch(getPdfApiUrl(`/api/pdf/result/${encodeURIComponent(jobId)}`), {
                cache: 'no-store'
            });
            if (!resultResponse.ok) {
                await fetchJsonOrThrow(resultResponse, 'PDF download failed');
            }
            return await resultResponse.blob();
        }

        await sleep(180);
    }
}

function getLoadedStylesheetText(hrefIncludes) {
    const target = (hrefIncludes || '').toLowerCase();
    if (!target) return '';

    const styleSheets = Array.from(document.styleSheets);
    for (const sheet of styleSheets) {
        const href = (sheet && sheet.href ? String(sheet.href) : '').toLowerCase();
        if (!href || !href.includes(target)) continue;
        try {
            const rules = Array.from(sheet.cssRules || []);
            return rules.map((r) => r.cssText).join('\n');
        } catch (error) {
            // Accessing cssRules can throw for cross-origin sheets; ignore and continue.
            continue;
        }
    }
    return '';
}

function setPreviewZoom(zoomLevel) {
    const minZoom = 0.5;
    const maxZoom = 2;
    const nextZoom = Math.min(maxZoom, Math.max(minZoom, zoomLevel));

    // Prefer the browser's layout zoom (keeps scrollbars correct).
    const supportsZoom = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('zoom', '1');
    if (supportsZoom) {
        previewContent.style.zoom = String(nextZoom);
        previewContent.style.transform = '';
        previewContent.style.transformOrigin = '';
    } else {
        // Fallback (some browsers may ignore `zoom`).
        previewContent.style.zoom = '';
        previewContent.style.transform = `scale(${nextZoom})`;
        // Make anchor math predictable for transform scaling.
        previewContent.style.transformOrigin = '0 0';
    }

    previewContent.dataset.zoom = String(nextZoom);
    updateImageResizeOverlayPosition();
    requestAnimationFrame(() => positionTableResizeHandles());

    // Persist across refresh.
    try {
        localStorage.setItem(STORAGE_KEYS.previewZoom, String(nextZoom));
    } catch { /* ignore */ }
}

let lastPreviewPointer = null;

function setPreviewZoomAnchored(zoomLevel, anchorClient) {
    const wrapper = previewWrapper || document.querySelector('.preview-wrapper');
    if (!wrapper || !previewContent) {
        setPreviewZoom(zoomLevel);
        return;
    }

    const minZoom = 0.5;
    const maxZoom = 2;
    const nextZoom = Math.min(maxZoom, Math.max(minZoom, zoomLevel));
    const currentZoom = getCurrentPreviewZoom();
    if (!Number.isFinite(currentZoom) || currentZoom <= 0) {
        setPreviewZoom(nextZoom);
        return;
    }

    // If no anchor is provided, use last known pointer in the preview,
    // otherwise fall back to center of the wrapper.
    const rect = wrapper.getBoundingClientRect();
    const clientX = (anchorClient && Number.isFinite(anchorClient.clientX)) ? anchorClient.clientX
        : (lastPreviewPointer && Number.isFinite(lastPreviewPointer.clientX)) ? lastPreviewPointer.clientX
            : (rect.left + rect.width / 2);
    const clientY = (anchorClient && Number.isFinite(anchorClient.clientY)) ? anchorClient.clientY
        : (lastPreviewPointer && Number.isFinite(lastPreviewPointer.clientY)) ? lastPreviewPointer.clientY
            : (rect.top + rect.height / 2);

    const xInWrapper = clientX - rect.left;
    const yInWrapper = clientY - rect.top;

    const scrollLeft = wrapper.scrollLeft;
    const scrollTop = wrapper.scrollTop;

    const supportsZoom = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('zoom', '1');

    // Compute the document-space coordinate currently under the pointer.
    let docX;
    let docY;
    if (supportsZoom) {
        // Layout zoom scales scroll space.
        docX = (scrollLeft + xInWrapper) / currentZoom;
        docY = (scrollTop + yInWrapper) / currentZoom;
    } else {
        // Transform scale does not scale scroll space.
        docX = scrollLeft + (xInWrapper / currentZoom);
        docY = scrollTop + (yInWrapper / currentZoom);
    }

    setPreviewZoom(nextZoom);

    // Apply scroll adjustment on next frame so layout/metrics settle.
    requestAnimationFrame(() => {
        let nextScrollLeft;
        let nextScrollTop;

        if (supportsZoom) {
            nextScrollLeft = docX * nextZoom - xInWrapper;
            nextScrollTop = docY * nextZoom - yInWrapper;
        } else {
            nextScrollLeft = docX - (xInWrapper / nextZoom);
            nextScrollTop = docY - (yInWrapper / nextZoom);
        }

        const maxLeft = Math.max(0, wrapper.scrollWidth - wrapper.clientWidth);
        const maxTop = Math.max(0, wrapper.scrollHeight - wrapper.clientHeight);
        wrapper.scrollLeft = Math.min(maxLeft, Math.max(0, nextScrollLeft));
        wrapper.scrollTop = Math.min(maxTop, Math.max(0, nextScrollTop));
    });
}

function getCurrentPreviewZoom() {
    const raw = previewContent.dataset.zoom;
    const parsed = raw ? Number(raw) : 1;
    return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
}

function setEditorZoom(fontSizePx) {
    if (!editorWrapper) return;
    const minSize = 12;
    const maxSize = 22;
    const nextSize = Math.min(maxSize, Math.max(minSize, fontSizePx));
    editorWrapper.style.setProperty('--editor-font-size', `${nextSize}px`);

    if (markdownEditor) markdownEditor.refresh();
    if (cssEditor) cssEditor.refresh();

    try {
        localStorage.setItem(STORAGE_KEYS.editorZoom, String(nextSize));
    } catch { /* ignore */ }
}

function getCurrentEditorZoom() {
    const raw = editorWrapper ? getComputedStyle(editorWrapper).getPropertyValue('--editor-font-size') : '';
    const parsed = parseFloat(raw);
    if (Number.isFinite(parsed) && parsed > 0) return parsed;

    const stored = localStorage.getItem(STORAGE_KEYS.editorZoom);
    const storedNum = stored ? Number(stored) : NaN;
    return Number.isFinite(storedNum) && storedNum > 0 ? storedNum : 15;
}

function applySavedEditorZoom() {
    const stored = localStorage.getItem(STORAGE_KEYS.editorZoom);
    const storedNum = stored ? Number(stored) : NaN;
    const nextSize = Number.isFinite(storedNum) && storedNum > 0 ? storedNum : getCurrentEditorZoom();
    setEditorZoom(nextSize);
}

function applySavedPreviewZoom() {
    // Preview zoom should persist across refresh even though we intentionally
    // start each load with a fresh (unsaved) document.
    try {
        const stored = localStorage.getItem(STORAGE_KEYS.previewZoom);
        const zoomNum = stored ? Number(stored) : NaN;
        if (Number.isFinite(zoomNum) && zoomNum > 0) {
            setPreviewZoom(zoomNum);
            return;
        }
    } catch { /* ignore */ }
    // Default.
    setPreviewZoom(1);
}

function applySavedEditorSplit() {
    if (!editorContainer) return;
    const stored = localStorage.getItem(STORAGE_KEYS.editorSplit);
    if (stored) {
        editorContainer.style.setProperty('--editor-split', stored);
    }
}

function setupEditorResize() {
    if (!editorDivider || !editorContainer) return;

    const onPointerMove = (event) => {
        const rect = editorContainer.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const percent = Math.max(25, Math.min(75, (x / rect.width) * 100));
        const value = `${percent.toFixed(2)}%`;
        editorContainer.style.setProperty('--editor-split', value);
        try {
            localStorage.setItem(STORAGE_KEYS.editorSplit, value);
        } catch { /* ignore */ }
    };

    const stopDrag = () => {
        document.removeEventListener('pointermove', onPointerMove);
        document.removeEventListener('pointerup', stopDrag);
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
    };

    editorDivider.addEventListener('pointerdown', (event) => {
        event.preventDefault();
        document.body.style.cursor = 'col-resize';
        document.body.style.userSelect = 'none';
        document.addEventListener('pointermove', onPointerMove);
        document.addEventListener('pointerup', stopDrag, { once: true });
    });
}

// ==================== PDF Generation (html2pdf) ====================
// NOTE: html2pdf/html2canvas produces image-based PDFs (text not selectable).

function getPreviewPagesHTML() {
    if (isPagelessMode()) {
        const doc = previewContent.querySelector('.pageless-document');
        if (!doc) return '';
        const clone = doc.cloneNode(true);
        clone.querySelectorAll('.page-margin-zone, .page-margin-highlight').forEach((zone) => zone.remove());
        clone.querySelectorAll('.preview-table-resize-handle').forEach((handle) => handle.remove());
        return clone.outerHTML;
    }

    const pages = previewContent.querySelectorAll('.a4-page');
    let allContent = '';
    pages.forEach((page) => {
        const clone = page.cloneNode(true);
        clone.querySelectorAll('.page-margin-zone, .page-margin-highlight').forEach((zone) => zone.remove());
        clone.querySelectorAll('.preview-table-resize-handle').forEach((handle) => handle.remove());
        allContent += clone.outerHTML;
    });
    return allContent;
}

async function downloadPDF() {
    if (!getMarkdownValue().trim()) {
        showToast('⚠️ Please enter some Markdown content first!');
        return;
    }

    const pdfFilename = getPdfFilenameFromUser();
    if (!pdfFilename) return;

    showLoading();
    clearPreviewSourceHighlight();

    let pdfContainer = null;

    try {
        // Make sure web fonts have loaded before rendering.
        try {
            if (document.fonts && document.fonts.ready) {
                await document.fonts.ready;
            }
        } catch { /* ignore */ }

        // Combine default markdown styles with any custom CSS.
        const customStyles = getCustomCss();
        const baseStyles = defaultMarkdownCssText || '';
        const combinedStyles = (baseStyles && customStyles) ? `${baseStyles}\n\n${customStyles}` : (customStyles || baseStyles);

        const allContent = getPreviewPagesHTML();
        const pageless = isPagelessMode();

        // Build a self-contained HTML document for server-side printing (selectable text PDF).
        const googleFontsHref = 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Barlow:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap';
        const pageNumberCss = (!pageless && pageNumbers && pageNumbers.checked) ? `
                    .a4-page { position: relative; }
                    .page-number-label {
                        position: absolute;
                        font-size: var(--page-number-size, 10px);
                        color: #999;
                        align-items: baseline;
                        gap: 0.3em;
                        display: none;
                        transform: translate(var(--page-number-translate-x, 0), var(--page-number-translate-y, 0));
                    }
                    .page-number-top { top: max(4mm, calc(var(--page-padding-top, var(--page-padding, 20mm)) - 4mm)); --page-number-translate-y: -50%; }
                    .page-number-bottom { bottom: max(4mm, calc(var(--page-padding-bottom, var(--page-padding, 20mm)) - 4mm)); --page-number-translate-y: 50%; }
                    .page-number-left { left: var(--page-padding-left, var(--page-padding, 20mm)); --page-number-translate-x: 0; }
                    .page-number-center { left: 50%; --page-number-translate-x: -50%; }
                    .page-number-right { right: var(--page-padding-right, var(--page-padding, 20mm)); --page-number-translate-x: 0; }
                    .a4-page[data-page-visible="true"] .page-number-label { display: inline-flex; }
                    .page-number-current, .page-number-total { color: #334155; font-weight: 800; font-size: 1.15em; }
                ` : '';

        const printCss = pageless ? `
                    @page { margin: 0; }
                    html, body { margin: 0; padding: 0; background: #ffffff; color: #1a1a1a; }
                    body {
                        font-family: Barlow, sans-serif;
                        -webkit-print-color-adjust: exact;
                        print-color-adjust: exact;
                    }
                    .pageless-document {
                        width: 210mm;
                        min-height: 297mm;
                        padding: var(--page-padding-top, var(--page-padding, 20mm))
                                 var(--page-padding-right, var(--page-padding, 20mm))
                                 var(--page-padding-bottom, var(--page-padding, 20mm))
                                 var(--page-padding-left, var(--page-padding, 20mm));
                        box-sizing: border-box;
                        background: #ffffff;
                        color: #1a1a1a;
                        box-shadow: none !important;
                        margin: 0 !important;
                        overflow: visible;
                    }
                    .pageless-document .page-break {
                        width: 100%;
                        height: 0;
                        margin: 2.5rem 0;
                        border-top: 1px dashed #cbd5e1;
                        page-break-before: auto;
                        break-before: auto;
                    }
                    .pageless-document .toc-spacer,
                    .pageless-document .toc-page {
                        display: none;
                    }
                    .pageless-document .image-cover-page {
                        width: 100%;
                        height: auto;
                        min-height: 0;
                    }
                    .float-right { float: right; display: inline-block; }
                    .line-split { display: flex; align-items: baseline; gap: 1rem; }
                    .line-split .right { margin-left: auto; text-align: right; }
                ` : `
                    @page { size: A4; margin: 0; }
                    html, body { margin: 0; padding: 0; background: #ffffff; color: #1a1a1a; }
                    body {
                        font-family: Barlow, sans-serif;
                        -webkit-print-color-adjust: exact;
                        print-color-adjust: exact;
                    }
                    .a4-page {
                        width: 210mm;
                        height: 297mm;
                        padding: var(--page-padding-top, var(--page-padding, 20mm))
                                 var(--page-padding-right, var(--page-padding, 20mm))
                                 var(--page-padding-bottom, var(--page-padding, 20mm))
                                 var(--page-padding-left, var(--page-padding, 20mm));
                        box-sizing: border-box;
                        background: #ffffff;
                        color: #1a1a1a;
                        box-shadow: none !important;
                        margin: 0 !important;
                        overflow: hidden;
                        page-break-after: always;
                        break-after: page;
                    }
                    .a4-page:last-child { page-break-after: auto; break-after: auto; }
                    pre, blockquote, table, img { page-break-inside: avoid; break-inside: avoid; }
                    ${pageNumberCss}
                    .float-right { float: right; display: inline-block; }
                    .line-split { display: flex; align-items: baseline; gap: 1rem; }
                    .line-split .right { margin-left: auto; text-align: right; }
                `;

        const htmlForServer = `<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="${googleFontsHref}">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" crossorigin="anonymous">
        <style>${printCss}</style>
        <style>${combinedStyles}</style>
    </head>
    <body>
        ${allContent}
    </body>
</html>`;

        // Try server-side PDF generation first (selectable text).
        try {
            const sid = await ensureSession();
            const requestPayload = { html: htmlForServer, filename: pdfFilename, session_id: sid, pageless };
            let blob = null;

            try {
                blob = await runServerPdfJob(requestPayload);
            } catch (progressError) {
                console.warn('PDF progress job unavailable, trying direct PDF endpoint:', progressError);
                updateLoadingProgress({ percent: 0, message: 'Rendering PDF', status: 'running' });
                const response = await fetch(getPdfApiUrl(), {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(requestPayload)
                });
                if (response.ok) {
                    updateLoadingProgress({ percent: 100, message: 'Done', status: 'done' });
                    blob = await response.blob();
                }
            }

            if (blob) {
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = pdfFilename;
                document.body.appendChild(a);
                a.click();
                a.remove();
                URL.revokeObjectURL(url);

                hideLoading();
                showToast('✅ PDF downloaded (selectable text)');
                return;
            }
        } catch (error) {
            // Server not running or unreachable -> fall back below.
            console.warn('PDF server unavailable, falling back to html2pdf:', error);
        }

        // Final cleanup for HTML2PDF container
        updateLoadingProgress({ percent: 25, message: 'Preparing browser fallback', status: 'running' });
        const cleanContent = allContent.trim();

        // html2pdf needs a real DOM element; create one off-screen.
        pdfContainer = document.createElement('div');
        pdfContainer.id = 'pdf-container';
        pdfContainer.style.position = 'fixed';
        pdfContainer.style.left = '-100000px';
        pdfContainer.style.top = '0';
        pdfContainer.style.width = '210mm';
        pdfContainer.style.background = '#ffffff';
        document.body.appendChild(pdfContainer);

        const fallbackPagelessCss = pageless ? `
                        .pdf-root {
                            line-height: 1.6;
                        }
                        .pdf-root .pageless-document {
                            width: 210mm !important;
                            min-height: 297mm !important;
                            padding: var(--page-padding-top, var(--page-padding, 20mm))
                                     var(--page-padding-right, var(--page-padding, 20mm))
                                     var(--page-padding-bottom, var(--page-padding, 20mm))
                                     var(--page-padding-left, var(--page-padding, 20mm)) !important;
                            margin: 0 !important;
                            box-shadow: none !important;
                            box-sizing: border-box !important;
                            background: white !important;
                            position: relative !important;
                            overflow: visible !important;
                            display: block;
                        }
                        .pdf-root .pageless-document .page-break {
                            width: 100%;
                            height: 0;
                            margin: 2.5rem 0;
                            border-top: 1px dashed #cbd5e1;
                            page-break-before: auto !important;
                            break-before: auto !important;
                        }
                        .pdf-root .pageless-document .toc-spacer,
                        .pdf-root .pageless-document .toc-page {
                            display: none !important;
                        }
                    ` : '';

        pdfContainer.innerHTML = `
                    <style>
                        html, body { margin: 0; padding: 0; background: #ffffff; -webkit-print-color-adjust: exact; }
                        .pdf-root {
                            background: #fff;
                            color: #1a1a1a;
                            font-family: Barlow, sans-serif;
                            display: block;
                            margin: 0;
                            padding: 0;
                            line-height: 0; /* Remove potential whitespace height */
                        }

                        .pdf-root .a4-page {
                            width: 210mm !important;
                            height: 297mm !important;
                            padding: var(--page-padding-top, var(--page-padding, 20mm))
                                     var(--page-padding-right, var(--page-padding, 20mm))
                                     var(--page-padding-bottom, var(--page-padding, 20mm))
                                     var(--page-padding-left, var(--page-padding, 20mm)) !important;
                            margin: 0 !important;
                            box-shadow: none !important;
                            box-sizing: border-box !important;
                            background: white !important;
                            position: relative !important;
                            overflow: hidden !important;
                            display: block;
                            line-height: 1.6; /* Restore text line height */
                            page-break-after: always !important;
                            break-after: page !important;
                        }
                        
                        .pdf-root .a4-page:last-child {
                            page-break-after: avoid !important;
                            break-after: avoid !important;
                        }

                        ${pageNumberCss}
                        ${fallbackPagelessCss}

                        ${combinedStyles}
                    </style>
                    <div class="pdf-root">${cleanContent}</div>`;

        let fallbackFormat = 'a4';
        if (pageless) {
            await waitForPreviewImagesInHtml(cleanContent, 1500);
            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
            const pagelessDoc = pdfContainer.querySelector('.pageless-document') || pdfContainer;
            const heightPx = Math.ceil(Math.max(
                pagelessDoc.getBoundingClientRect().height,
                pagelessDoc.scrollHeight || 0,
                1123
            ));
            fallbackFormat = [210, Math.max(297, Math.ceil((heightPx * 25.4) / 96))];
        }

        const opt = {
            margin: 0,
            filename: pdfFilename,
            image: { type: 'jpeg', quality: 1.0 },
            html2canvas: {
                scale: 2,
                useCORS: true,
                letterRendering: true,
                backgroundColor: '#ffffff',
                logging: false
            },
            jsPDF: {
                unit: 'mm',
                format: fallbackFormat,
                orientation: 'portrait',
                compress: true
            },
            pagebreak: {
                mode: pageless ? [] : 'css',
                before: pageless ? [] : '.page-break'
            }
        };

        updateLoadingProgress({ percent: 70, message: 'Rendering image-based PDF', status: 'running' });
        await html2pdf().set(opt).from(pdfContainer).save();
        updateLoadingProgress({ percent: 100, message: 'Done', status: 'done' });

        hideLoading();
        showToast('✅ PDF downloaded (image-based). Run server.py for selectable text.');
    } catch (error) {
        console.error('PDF generation error:', error);
        hideLoading();
        showToast('❌ Error generating PDF. Please try again.');
    } finally {
        try {
            if (pdfContainer && pdfContainer.parentNode) {
                pdfContainer.parentNode.removeChild(pdfContainer);
            }
        } catch { /* ignore */ }
    }
}

// ==================== Other Functions ====================

function clearEditor() {
    if (getMarkdownValue().trim() && !confirm('Are you sure you want to clear all content?')) {
        return;
    }
    (async () => {
        try {
            await resetSessionWorkspace();
        } catch { /* ignore */ }
        setMarkdownValue('');
        updatePreview();
        showToast('🗑️ Content cleared');
        autoSave();
    })();
}

function uploadFile() {
    (async () => {
        if (supportsFileSystemAccessApi()) {
            try {
                const [handle] = await window.showOpenFilePicker({
                    multiple: false,
                    types: [
                        {
                            description: 'MarkDownForge Project',
                            accept: { 'application/zip': ['.mdfproj'] }
                        },
                        {
                            description: 'Markdown',
                            accept: { 'text/markdown': ['.md', '.markdown', '.txt'] }
                        },
                        {
                            description: 'ZIP (MD2PDF)',
                            accept: { 'application/zip': ['.zip'] }
                        }
                    ]
                });
                const file = await handle.getFile();
                await handleSelectedFile(file, handle);
                return;
            } catch (e) {
                // User canceled or picker failed; fall back to the hidden input.
            }
        }
        fileInput.click();
    })();
}

async function handleSelectedFile(file, fileHandle) {
    if (!file) return;

    const fileExtension = '.' + String(file.name || '').split('.').pop().toLowerCase();
    const validTypes = ['.md', '.markdown', '.txt', '.zip', '.mdfproj'];

    if (!validTypes.includes(fileExtension)) {
        showToast('⚠️ Please upload a Markdown, ZIP, or project (.md, .markdown, .txt, .zip, .mdfproj)');
        return;
    }

    // Importing anything other than .mdfproj resets project state.
    if (fileExtension !== '.mdfproj') {
        setMdfprojHandle(null);
        mdfprojDisplayName = '';
        nonProjectFileLabel = String(file.name || '').trim();
        setMdfprojModified(false);
        clearMdfprojPersistedState();
        updateMdfprojStatusUi();
    }

    currentDocBaseName = guessBaseNameFromFilename(file.name);

    if (fileExtension === '.mdfproj') {
        nonProjectFileLabel = '';
        try {
            showToast('📦 Importing project...');
            await importMdfprojFromFile(file, fileHandle);
        } catch (e) {
            console.error('.mdfproj import error:', e);
            showToast('❌ Project import failed');
        }
        return;
    }

    if (fileExtension === '.zip') {
        try {
            // New document creation: delete the previous workspace.
            if (currentSessionId) {
                try {
                    await fetch(getApiUrl(`/api/session/${currentSessionId}/delete`), { method: 'POST' });
                } catch { /* ignore */ }
            }

            showToast('📦 Importing ZIP...');
            const form = new FormData();
            form.append('file', file, file.name);
            const res = await fetch(getApiUrl('/api/import-zip'), { method: 'POST', body: form });
            if (!res.ok) {
                const err = await res.json().catch(() => ({}));
                throw new Error(err.detail || 'Import failed');
            }
            const json = await res.json();
            currentSessionId = json.session_id;
            sessionStorage.setItem(SESSION_STORAGE_KEY, currentSessionId);

            const extracted = extractCustomCssFromMarkdown(json.markdown);
            runWithoutMdfprojModifiedTracking(() => {
                setMarkdownValue(extracted.markdown);
                userEditedCss = !!(extracted.css && normalizeCss(extracted.css) && normalizeCss(extracted.css) !== normalizeCss(defaultMarkdownCssText));
                setCustomCssProgrammatic(extracted.css || defaultMarkdownCssText);
            });
            resetTextareaView(markdownEditor || markdownInput);
            resetTextareaView(cssEditor || cssInput);
            updatePreview();
            autoSave();
            showToast('✅ ZIP imported');
        } catch (e) {
            console.error('ZIP import error:', e);
            showToast('❌ ZIP import failed');
        }
        return;
    }

    // New document creation (opening a new markdown file): reset server workspace.
    try { await resetSessionWorkspace(); } catch { /* ignore */ }

    try {
        const raw = await file.text();
        const extracted = extractCustomCssFromMarkdown(raw);
        runWithoutMdfprojModifiedTracking(() => {
            setMarkdownValue(extracted.markdown);
            userEditedCss = !!(extracted.css && normalizeCss(extracted.css) && normalizeCss(extracted.css) !== normalizeCss(defaultMarkdownCssText));
            setCustomCssProgrammatic(extracted.css || defaultMarkdownCssText);
        });
        resetTextareaView(markdownEditor || markdownInput);
        resetTextareaView(cssEditor || cssInput);
        updatePreview();
        showToast('✅ File loaded successfully!');
        autoSave();
    } catch {
        showToast('❌ Error reading file. Please try again.');
    }
}

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (!file) return;
    (async () => {
        try {
            await handleSelectedFile(file, null);
        } finally {
            fileInput.value = '';
        }
    })();
}

// ==================== Image Paste Handling ====================

async function uploadPastedImageBlob(blob) {
    const sid = await ensureSession();
    const form = new FormData();
    // Name doesn't matter server-side; extension inferred from content-type.
    form.append('file', blob, 'pasted-image');
    const res = await fetch(getApiUrl(`/api/session/${sid}/paste-image`), { method: 'POST', body: form });
    if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error(err.detail || 'Image upload failed');
    }
    const json = await res.json();
    return json.relative_path;
}

function getActiveMarkdownEditorTarget() {
    if (markdownEditor) return markdownEditor;
    return markdownInput;
}

function bindImagePasteHandler() {
    const targetEl = markdownEditor ? markdownEditor.getWrapperElement() : markdownInput;
    if (!targetEl) return;

    targetEl.addEventListener('paste', (event) => {
        const clipboard = event.clipboardData;
        if (!clipboard || !clipboard.items) return;

        const items = Array.from(clipboard.items);
        const imageItem = items.find((it) => it && typeof it.type === 'string' && it.type.startsWith('image/'));
        if (!imageItem) return;

        const blob = imageItem.getAsFile();
        if (!blob) return;

        event.preventDefault();

        (async () => {
            try {
                const rel = await uploadPastedImageBlob(blob);
                const snippet = `<img src="${rel}" height="200">`;

                const editorTarget = getActiveMarkdownEditorTarget();
                insertSnippet(editorTarget, snippet);
                updatePreview();
                autoSave();
                markMdfprojModified();
                showToast('🖼️ Image pasted');
            } catch (e) {
                console.error('Paste image error:', e);
                showToast('❌ Could not paste image. Is server.py running?');
            }
        })();
    });
}

function loadExample() {
    const exampleMarkdown = `# Project Documentation

## Overview
This is a comprehensive guide to our project.

### Table of Contents
1. [Introduction](#introduction)
2. [Installation](#installation)
3. [Usage](#usage)
4. [API Reference](#api-reference)

---

## Introduction

Welcome to our **amazing project**! This tool helps you:

- Convert Markdown to PDF
- Create beautiful documents
- Save time and effort

> "Simplicity is the ultimate sophistication." - Leonardo da Vinci

## Installation

Install the package using npm:

\`\`\`bash
npm install awesome-package
\`\`\`

Or using yarn:

\`\`\`bash
yarn add awesome-package
\`\`\`

## Usage

Here's a simple example:

\`\`\`javascript
const converter = require('awesome-package');

converter.convert('input.md', 'output.pdf', {
    theme: 'modern',
    pageSize: 'A4'
});
\`\`\`

### Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| theme | string | 'default' | Visual theme |
| pageSize | string | 'A4' | Paper size |
| margins | object | {top: 20} | Page margins |

## API Reference

### \`convert(input, output, options)\`

Converts a Markdown file to PDF.

**Parameters:**
- \`input\` (string): Path to input file
- \`output\` (string): Path to output file
- \`options\` (object): Configuration options

**Returns:** Promise<void>

**Example:**
\`\`\`javascript
await convert('README.md', 'README.pdf', {
    theme: 'dark'
});
\`\`\`

---

## License

MIT © 2026 Your Name

For more information, visit [our website](https://example.com).
`;
    setMarkdownValue(exampleMarkdown);
    updatePreview();
    showToast('📄 Example loaded!');
}

function showAbout() {
    const aboutMessage = `MD2PDF - Markdown to PDF Converter

Version: 1.0.0
Built with: HTML, CSS, JavaScript
Libraries: Marked.js, html2pdf.js

This tool runs locally. For selectable-text PDFs, pasted images, and ZIP import/export, it uses the local FastAPI server (server.py).

Features:
✨ Real-time preview
🎨 Beautiful formatting
🔒 100% private & secure
💾 No installation needed

Created with ❤️ for the community.`;
    alert(aboutMessage);
}

function toggleFullscreen() {
    const previewPanel = previewContent.closest('.editor-panel');
    if (!document.fullscreenElement) {
        previewPanel.requestFullscreen().catch(() => showToast('⚠️ Fullscreen not supported'));
    } else {
        document.exitFullscreen();
    }
}

function handleKeyboardShortcuts(event) {
    const isCmd = !!(event.ctrlKey || event.metaKey);
    const key = String(event.key || '').toLowerCase();

    // Ctrl/Cmd + Alt + P => Export PDF
    // (Ctrl/Cmd + Shift + S is commonly reserved by browsers for "Save page as")
    if (isCmd && event.altKey && !event.shiftKey && key === 'p') {
        event.preventDefault();
        downloadPDF();
        return;
    }

    // Ctrl/Cmd + S => Save project (.mdfproj)
    if (isCmd && !event.shiftKey && key === 's') {
        event.preventDefault();
        (async () => {
            try {
                await overwriteMdfproj();
            } catch (e) {
                console.error('Project save error:', e);
                showToast('❌ Could not save project');
            }
        })();
        return;
    }

    if (isCmd && key === 'k') {
        event.preventDefault();
        clearEditor();
        return;
    }
    if (isCmd && key === 'o') {
        event.preventDefault();
        uploadFile();
        return;
    }
}

// ==================== Touchpad Zoom Support ====================
let lastTouchDistance = 0;

function handleWheelZoom(event) {
    if (event.ctrlKey) {
        event.preventDefault();
        const delta = -event.deltaY;
        const zoomFactor = 0.0025;
        const currentZoom = getCurrentPreviewZoom();
        setPreviewZoomAnchored(currentZoom + delta * zoomFactor, { clientX: event.clientX, clientY: event.clientY });
    }
}

function handleTouchZoom(event) {
    if (event.touches.length === 2) {
        event.preventDefault();
        const touch1 = event.touches[0];
        const touch2 = event.touches[1];
        const distance = Math.hypot(touch1.pageX - touch2.pageX, touch1.pageY - touch2.pageY);

        const mid = {
            clientX: (touch1.clientX + touch2.clientX) / 2,
            clientY: (touch1.clientY + touch2.clientY) / 2
        };

        if (lastTouchDistance > 0) {
            const delta = distance - lastTouchDistance;
            const zoomFactor = 0.02;
            const currentZoom = getCurrentPreviewZoom();
            setPreviewZoomAnchored(currentZoom + delta * zoomFactor, mid);
        }
        lastTouchDistance = distance;
    }
}

function resetTouchDistance() {
    lastTouchDistance = 0;
}

function autoSave() {
    try {
        localStorage.setItem(STORAGE_KEYS.markdown, getMarkdownValue());
        localStorage.setItem(STORAGE_KEYS.pageNumbers, pageNumbers.checked);
        if (startingPage) {
            localStorage.setItem(STORAGE_KEYS.startingPage, startingPage.value);
        }
        if (startingNumber) {
            localStorage.setItem(STORAGE_KEYS.startingNumber, startingNumber.value);
        }
        if (pageNumberStyle) {
            localStorage.setItem(STORAGE_KEYS.pageNumberStyle, pageNumberStyle.value);
        }
        if (pageNumberSize) localStorage.setItem(STORAGE_KEYS.pageNumberSize, pageNumberSize.value);
        if (pageNumberVertical) localStorage.setItem(STORAGE_KEYS.pageNumberVertical, pageNumberVertical.value);
        if (pageNumberHorizontal) localStorage.setItem(STORAGE_KEYS.pageNumberHorizontal, pageNumberHorizontal.value);
        if (pagelessMode) localStorage.setItem(STORAGE_KEYS.pagelessMode, pagelessMode.checked ? 'true' : 'false');

        // CSS tab persistence:
        // - For non-project docs: always reflect markdown-styles.css on refresh
        // - For .mdfproj: persist current CSS so refresh doesn't lose project styling
        if (cssInput) {
            localStorage.removeItem(STORAGE_KEYS.customCss);
            localStorage.removeItem(STORAGE_KEYS.savedDefaultCssHash);
            if (isMdfprojActive()) {
                persistMdfprojStateSnapshot();
            } else {
                try { localStorage.removeItem(STORAGE_KEYS.mdfprojCss); } catch { /* ignore */ }
            }
        }
    } catch (error) {
        console.warn('Could not save to localStorage:', error);
    }
}

function loadFromStorage() {
    try {
        const savedContent = localStorage.getItem(STORAGE_KEYS.markdown);
        const savedPageNumbers = localStorage.getItem(STORAGE_KEYS.pageNumbers);
        const savedStartingPage = localStorage.getItem(STORAGE_KEYS.startingPage);
        const savedStartingNumber = localStorage.getItem(STORAGE_KEYS.startingNumber);
        const savedPageNumberStyle = localStorage.getItem(STORAGE_KEYS.pageNumberStyle);
        const savedPageNumberSize = localStorage.getItem(STORAGE_KEYS.pageNumberSize);
        const savedPageNumberVertical = localStorage.getItem(STORAGE_KEYS.pageNumberVertical);
        const savedPageNumberHorizontal = localStorage.getItem(STORAGE_KEYS.pageNumberHorizontal);
        const savedPagelessMode = localStorage.getItem(STORAGE_KEYS.pagelessMode);
        const savedZoom = localStorage.getItem(STORAGE_KEYS.previewZoom);

        const storedProjectName = localStorage.getItem(STORAGE_KEYS.mdfprojDisplayName);
        const storedProjectCss = localStorage.getItem(STORAGE_KEYS.mdfprojCss);
        const storedLastSavedHash = localStorage.getItem(STORAGE_KEYS.mdfprojLastSavedHash);

        if (savedContent) setMarkdownValue(savedContent);
        if (savedPageNumbers !== null) pageNumbers.checked = savedPageNumbers === 'true';
        if (savedStartingPage && startingPage) {
            const num = parseInt(savedStartingPage, 10);
            if (Number.isFinite(num) && num >= 1) {
                startingPage.value = num;
            }
        }
        if (savedStartingNumber && startingNumber) {
            const num = parseInt(savedStartingNumber, 10);
            if (Number.isFinite(num) && num >= 1) {
                startingNumber.value = num;
            }
        }
        if (savedPageNumberStyle && pageNumberStyle) {
            const allowedStyles = ['page', 'number', 'page-of-total', 'fraction'];
            if (allowedStyles.includes(savedPageNumberStyle)) pageNumberStyle.value = savedPageNumberStyle;
        }
        if (savedPageNumberSize && pageNumberSize) {
            const size = Math.max(8, Math.min(18, parseInt(savedPageNumberSize, 10) || 10));
            pageNumberSize.value = String(size);
        }
        if (savedPageNumberVertical && pageNumberVertical && ['top', 'bottom'].includes(savedPageNumberVertical)) {
            pageNumberVertical.value = savedPageNumberVertical;
        }
        if (savedPageNumberHorizontal && pageNumberHorizontal && ['left', 'center', 'right'].includes(savedPageNumberHorizontal)) {
            pageNumberHorizontal.value = savedPageNumberHorizontal;
        }
        if (savedPagelessMode !== null && pagelessMode) {
            pagelessMode.checked = savedPagelessMode === 'true';
        }
        syncPageNumberSizeOutput();

        // Restore project identity (so refresh doesn't turn a saved project into "Unsaved File").
        if (storedProjectName && String(storedProjectName).trim()) {
            mdfprojDisplayName = String(storedProjectName).trim();
            currentDocBaseName = mdfprojDisplayName || currentDocBaseName;
        }

        // CSS tab init:
        // - Project active: restore last CSS (so project styling survives refresh)
        // - Otherwise: always reflect the current markdown-styles.css from disk
        userEditedCss = false;
        localStorage.removeItem(STORAGE_KEYS.customCss);
        localStorage.removeItem(STORAGE_KEYS.savedDefaultCssHash);
        if (mdfprojDisplayName && storedProjectCss !== null) {
            const cssText = String(storedProjectCss || '');
            userEditedCss = !!(normalizeCss(cssText) && normalizeCss(cssText) !== normalizeCss(defaultMarkdownCssText));
            setCustomCssProgrammatic(cssText || defaultMarkdownCssText);
        } else {
            setCustomCssProgrammatic(defaultMarkdownCssText);
        }

        // Restore modified state based on last-saved hash (if we have one).
        if (mdfprojDisplayName && storedLastSavedHash) {
            const currentHash = computeMdfprojContentHash();
            setMdfprojModified(String(currentHash) !== String(storedLastSavedHash));
        } else if (mdfprojDisplayName) {
            setMdfprojModified(false);
        } else {
            updateMdfprojStatusUi();
        }

        if (savedZoom) {
            const zoomNum = Number(savedZoom);
            if (Number.isFinite(zoomNum) && zoomNum > 0) {
                setPreviewZoom(zoomNum);
            }
        }

        applyPageNumberVisibility();

        // Keep editor viewport at the top on refresh.
        resetTextareaView(markdownEditor || markdownInput);
        resetTextareaView(cssEditor || cssInput);
    } catch (error) {
        console.warn('Could not load from localStorage:', error);
    }
}

// ==================== Event Listeners ====================

let debounceTimer;
function handleMarkdownInputChange() {
    markMdfprojModified();
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        updatePreview();
        autoSave();
    }, 300);
}

function handleCssInputChange() {
    applyCustomCssToPreview();
    if (suppressCssTracking) return;
    userEditedCss = true;
    markMdfprojModified();
    autoSave();
}

function handleMarkdownEditorKeydown(event, target) {
    const editorTarget = target || markdownEditor || markdownInput;

    // ALT + R wraps the selection in a right-float span
    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && (event.key === 'R' || event.key === 'r')) {
        event.preventDefault();
        let hasSelection = false;

        if (isCodeMirrorInstance(editorTarget)) {
            const selected = editorTarget.getDoc().getSelection();
            hasSelection = !!selected;
        } else {
            hasSelection = editorTarget.selectionStart !== editorTarget.selectionEnd;
        }

        if (!hasSelection) {
            showToast('Select text to float right');
            return;
        }

        wrapOrInsert(editorTarget, '<span class="float-right">', '</span>');
        updatePreview();
        autoSave();
        return;
    }

    // CTRL + ENTER for Page Break
    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
        event.preventDefault();
        const snippet = '\n\n<div class="page-break"></div>\n\n';
        insertSnippet(editorTarget, snippet);
        updatePreview();
        autoSave();
        showToast('📑 Page break inserted');
        return;
    }

    // ALT + N for blank line (avoid conflicts with browser/system shortcuts and page-break)
    if (event.altKey && !event.ctrlKey && !event.metaKey && (event.key === 'n' || event.key === 'N')) {
        event.preventDefault();
        const snippet = '<br>\n';
        insertSnippet(editorTarget, snippet);
        updatePreview();
        autoSave();
        showToast('↵ <br> inserted');
        return;
    }

    // Basic formatting shortcuts
    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && (event.key === 'b' || event.key === 'B')) {
        event.preventDefault();
        wrapOrInsert(editorTarget, '**', '**');
        updatePreview();
        autoSave();
        return;
    }
    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && (event.key === 'i' || event.key === 'I')) {
        event.preventDefault();
        wrapOrInsert(editorTarget, '*', '*');
        updatePreview();
        autoSave();
        return;
    }
    // Inline code (common in some editors)
    if ((event.ctrlKey || event.metaKey) && !event.shiftKey && (event.key === 'e' || event.key === 'E')) {
        event.preventDefault();
        wrapOrInsert(editorTarget, '`', '`');
        updatePreview();
        autoSave();
        return;
    }

    if (event.key === 'Tab') {
        event.preventDefault();
        insertSnippet(editorTarget, '    ');
    }
}

function getTextareaLineFromMouse(textarea, event) {
    if (!textarea || !event) return null;
    const rect = textarea.getBoundingClientRect();
    const style = window.getComputedStyle(textarea);
    const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.6 || 20;
    const paddingTop = parseFloat(style.paddingTop) || 0;
    const y = event.clientY - rect.top + textarea.scrollTop - paddingTop;
    if (y < 0) return null;
    const line = Math.max(1, Math.floor(y / lineHeight) + 1);
    const textLine = String((textarea.value || '').replace(/\r\n?/g, '\n').split('\n')[line - 1] || '');
    return textLine.trim() ? line : null;
}

function getCodeMirrorLineFromMouse(cm, event) {
    if (!cm || !event) return null;
    const wrapper = cm.getWrapperElement();
    if (!wrapper || !wrapper.contains(event.target)) return null;
    if (event.target && event.target.closest && event.target.closest('.CodeMirror-gutters')) return null;
    if (event.target && event.target.closest && !event.target.closest('.CodeMirror-line')) return null;

    const pos = cm.coordsChar({
        left: event.clientX,
        top: event.clientY
    }, 'window');

    if (!pos || !Number.isFinite(pos.line)) return null;

    const doc = cm.getDoc();
    const lineText = String(doc.getLine(pos.line) || '');
    if (!lineText.trim()) return null;

    const startCoords = cm.charCoords({ line: pos.line, ch: 0 }, 'window');
    const endCoords = cm.charCoords({ line: pos.line, ch: Math.max(0, lineText.length) }, 'window');
    const top = Math.min(startCoords.top, endCoords.top) - 3;
    const bottom = Math.max(startCoords.bottom, endCoords.bottom) + 3;
    const left = Math.min(startCoords.left, endCoords.left) - 8;
    const right = Math.max(startCoords.right, endCoords.right) + 24;

    if (event.clientY < top || event.clientY > bottom) return null;
    if (event.clientX < left || event.clientX > right) return null;

    return pos.line + 1;
}

function handleMarkdownEditorSourceClick(lineNumber) {
    const line = Number(lineNumber);
    if (!Number.isFinite(line) || line < 1) {
        clearPreviewSourceHighlight();
        clearEditorSourceHighlight();
        return;
    }
    clearEditorSourceHighlight();
    if (line === lastEditorHoverLine) return;
    lastEditorHoverLine = line;
    highlightPreviewSourceLine(line);
}

function bindEditorSourceHover() {
    if (!previewContent) return;

    previewContent.addEventListener('click', (event) => {
        if (previewHoverFrame) cancelAnimationFrame(previewHoverFrame);
        previewHoverFrame = requestAnimationFrame(() => {
            previewHoverFrame = null;

            const target = event.target && event.target.closest
                ? event.target.closest('[data-source-block]')
                : null;

            if (!target || !previewContent.contains(target)) {
                clearEditorSourceHighlight();
                clearPreviewSourceHighlight();
                clearPreviewImageSelection();
                return;
            }

            const imageTarget = getPreviewImageSelectionTarget(event.target);
            if (imageTarget) {
                selectPreviewImage(imageTarget);
            } else {
                clearPreviewImageSelection();
            }

            clearPreviewSourceHighlight();
            highlightEditorSourceBlockFromElement(target);
        });
    });
}

function bindPreviewImageResizeUi() {
    window.addEventListener('resize', updateImageResizeOverlayPosition);
    window.addEventListener('resize', () => positionTableResizeHandles());
    window.addEventListener('scroll', updateImageResizeOverlayPosition, { passive: true });

    const previewWrapper = previewContent ? previewContent.closest('.preview-wrapper') : null;
    if (previewWrapper) {
        previewWrapper.addEventListener('scroll', updateImageResizeOverlayPosition, { passive: true });
    }

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') clearPreviewImageSelection();
    });
}

function bindPreviewSourceHover() {
    if (markdownEditor) {
        const wrapper = markdownEditor.getWrapperElement();
        if (!wrapper) return;

        wrapper.addEventListener('click', (event) => {
            if (editorHoverFrame) cancelAnimationFrame(editorHoverFrame);
            editorHoverFrame = requestAnimationFrame(() => {
                editorHoverFrame = null;
                try {
                    handleMarkdownEditorSourceClick(getCodeMirrorLineFromMouse(markdownEditor, event));
                } catch {
                    clearPreviewSourceHighlight();
                }
            });
        });
        return;
    }

    if (markdownInput) {
        markdownInput.addEventListener('click', (event) => {
            if (editorHoverFrame) cancelAnimationFrame(editorHoverFrame);
            editorHoverFrame = requestAnimationFrame(() => {
                editorHoverFrame = null;
                handleMarkdownEditorSourceClick(getTextareaLineFromMouse(markdownInput, event));
            });
        });
    }
}

function bindEditorEvents() {
    if (markdownEditor) {
        markdownEditor.on('change', handleMarkdownInputChange);
        markdownEditor.on('keydown', (cm, event) => handleMarkdownEditorKeydown(event, cm));
        // Cache the last non-empty selection so touchpad right-click can still format it.
        markdownEditor.on('cursorActivity', () => saveLastSelectionFromEditor(markdownEditor));

        try {
            const wrapper = markdownEditor.getWrapperElement();
            if (wrapper) {
                wrapper.addEventListener('mouseup', () => saveLastSelectionFromEditor(markdownEditor));
                wrapper.addEventListener('keyup', () => saveLastSelectionFromEditor(markdownEditor));
            }
        } catch { /* ignore */ }
    } else if (markdownInput) {
        markdownInput.addEventListener('input', handleMarkdownInputChange);
        markdownInput.addEventListener('keydown', (event) => handleMarkdownEditorKeydown(event, markdownInput));
        markdownInput.addEventListener('mouseup', () => saveLastSelectionFromEditor(markdownInput));
        markdownInput.addEventListener('keyup', () => saveLastSelectionFromEditor(markdownInput));
        markdownInput.addEventListener('select', () => saveLastSelectionFromEditor(markdownInput));
    }

    if (cssEditor) {
        cssEditor.on('change', handleCssInputChange);
    } else if (cssInput) {
        cssInput.addEventListener('input', handleCssInputChange);
    }

    // Right-click context menu for markdown editor formatting.
    bindEditorContextMenu();
    bindPreviewSourceHover();
    bindEditorSourceHover();
    bindPreviewImageResizeUi();
}

btnDownload.addEventListener('click', downloadPDF);
const handleSaveProjectClick = () => {
    (async () => {
        try {
            await overwriteMdfproj();
        } catch (e) {
            console.error('Project save error:', e);
            showToast('❌ Could not save project');
        }
    })();
};

if (btnSaveMd) btnSaveMd.addEventListener('click', handleSaveProjectClick);
if (btnSaveMdFs) btnSaveMdFs.addEventListener('click', handleSaveProjectClick);
if (btnDownloadFs) btnDownloadFs.addEventListener('click', downloadPDF);
if (btnNewDoc) btnNewDoc.addEventListener('click', () => { createNewDocument(); });
btnClear.addEventListener('click', clearEditor);
btnUpload.addEventListener('click', uploadFile);
btnExamples.addEventListener('click', loadExample);
btnAbout.addEventListener('click', showAbout);
btnFullscreen.addEventListener('click', toggleFullscreen);
if (btnZoomIn) {
    btnZoomIn.addEventListener('click', () => {
        const current = getCurrentPreviewZoom();
        setPreviewZoomAnchored(Number((current + 0.1).toFixed(2)));
    });
}
if (btnZoomOut) {
    btnZoomOut.addEventListener('click', () => {
        const current = getCurrentPreviewZoom();
        setPreviewZoomAnchored(Number((current - 0.1).toFixed(2)));
    });
}

if (btnEditorZoomIn) {
    btnEditorZoomIn.addEventListener('click', () => {
        const current = getCurrentEditorZoom();
        setEditorZoom(current + 1);
    });
}

if (btnEditorZoomOut) {
    btnEditorZoomOut.addEventListener('click', () => {
        const current = getCurrentEditorZoom();
        setEditorZoom(current - 1);
    });
}

fileInput.addEventListener('change', handleFileSelect);

pageNumbers.addEventListener('change', () => {
    applyPageNumberVisibility();
    updatePreview();
    autoSave();
    markMdfprojModified();
});

if (pagelessMode) {
    pagelessMode.addEventListener('change', () => {
        applyPageNumberVisibility();
        updatePreview();
        autoSave();
        markMdfprojModified();
        showToast(pagelessMode.checked ? 'Pageless mode enabled' : 'Paged mode enabled', 1800);
    });
}

if (startingPage) {
    startingPage.addEventListener('input', () => {
        updatePreview();
        autoSave();
        markMdfprojModified();
    });
}

if (startingNumber) {
    startingNumber.addEventListener('input', () => {
        updatePreview();
        autoSave();
        markMdfprojModified();
    });
}

if (pageNumberStyle) {
    pageNumberStyle.addEventListener('change', () => {
        updatePreview();
        autoSave();
        markMdfprojModified();
    });
}

if (pageNumberSize) {
    pageNumberSize.addEventListener('input', () => {
        syncPageNumberSizeOutput();
        updatePreview();
        autoSave();
        markMdfprojModified();
    });
}

[pageNumberVertical, pageNumberHorizontal].forEach((control) => {
    if (!control) return;
    control.addEventListener('change', () => {
        updatePreview();
        autoSave();
        markMdfprojModified();
    });
});

if (btnCopyFormatting && formattingCodeBlock) {
    btnCopyFormatting.addEventListener('click', async () => {
        const codeEl = formattingCodeBlock.querySelector('code');
        const text = codeEl ? codeEl.textContent : formattingCodeBlock.textContent;
        const ok = await copyTextToClipboard(text);
        showToast(ok ? '✅ Formatting code copied' : '⚠️ Could not copy');
    });
}

if (cssInput) {
    // Events are bound in bindEditorEvents to support CodeMirror.
}

if (tabMarkdown && tabCss) {
    tabMarkdown.addEventListener('click', () => setEditorTab('markdown', true));
    tabCss.addEventListener('click', () => setEditorTab('css', true));
}

document.addEventListener('keydown', handleKeyboardShortcuts);

// Note: we intentionally do NOT delete the active session on tab close.
// The latest session is persisted so pasted images keep working after reopening the app.
// Old sessions are cleaned up via explicit reset/new-doc flows and server TTL cleanup.

// Markdown editor key bindings are handled in bindEditorEvents.

// Preview Panel Zoom Listeners
const previewWrapper = document.querySelector('.preview-wrapper');
if (previewWrapper) {
    previewWrapper.addEventListener('pointermove', (e) => {
        lastPreviewPointer = { clientX: e.clientX, clientY: e.clientY };
    }, { passive: true });
    previewWrapper.addEventListener('wheel', handleWheelZoom, { passive: false });
    previewWrapper.addEventListener('touchmove', handleTouchZoom, { passive: false });
    previewWrapper.addEventListener('touchend', resetTouchDistance);
    previewWrapper.addEventListener('touchcancel', resetTouchDistance);
}

function setupHeaderFadeOnScroll() {
    const header = document.querySelector('.header');
    if (!header) return;

    let ticking = false;
    const update = () => {
        const shouldFade = window.scrollY > 20;
        header.classList.toggle('is-faded', shouldFade);
        ticking = false;
    };

    const onScroll = () => {
        if (ticking) return;
        ticking = true;
        requestAnimationFrame(update);
    };

    window.addEventListener('scroll', onScroll, { passive: true });
    update();
}

// ==================== Initialization ====================

(async () => {
    await initDefaultMarkdownCss();
    initCodeEditors();
    try {
        await ensureSession();
    } catch { /* ignore: app still works without server */ }

    // Always start with a fresh, unsaved document on every page load.
    // Refresh/tab close will not restore prior content.
    await createNewDocument({ silent: true, skipPrompt: true });

    bindEditorEvents();
    bindImagePasteHandler();
    applySavedEditorZoom();
    applySavedPreviewZoom();
    applySavedEditorSplit();
    setupEditorResize();

    setupHeaderFadeOnScroll();

    bindBeforeUnloadPrompt();

    // Default to Markdown tab.
    setEditorTab('markdown', false);

    // Some browsers scroll to the focused caret after layout; force top once more.
    requestAnimationFrame(() => {
        resetTextareaView(markdownEditor || markdownInput);
        resetTextareaView(cssEditor || cssInput);
    });
})();

setTimeout(() => {
    showToast('👋 Welcome to MD2PDF! Start typing to see the magic ✨', 4000);
}, 500);

console.log('%c MD2PDF Initialized! ', 'background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 4px; font-weight: bold;');
console.log('Keyboard shortcuts:');
console.log('  Ctrl/Cmd + S: Save project (.mdfproj)');
console.log('  Ctrl/Cmd + Alt + P: Export PDF');
console.log('  Ctrl/Cmd + K: Clear editor');
console.log('  Ctrl/Cmd + O: Upload file');
console.log('  Ctrl/Cmd + Enter: Insert Page Break');
console.log('  Alt + N: Blank line');
console.log('  Ctrl/Cmd + B: Bold');
console.log('  Ctrl/Cmd + I: Italic');
console.log('  Ctrl/Cmd + E: Inline code');


// ==================== AI Chat Assistant ====================
const aiChatPanel = document.getElementById('ai-chat-panel');
const aiChatToggle = document.getElementById('ai-chat-toggle');
const aiChatClose = document.getElementById('ai-chat-close');
const aiChatMessages = document.getElementById('ai-chat-messages');
const aiChatInput = document.getElementById('ai-chat-input');
const aiChatSend = document.getElementById('ai-chat-send');
const aiChatGenerating = document.getElementById('ai-chat-generating');
const btnStopGenerate = document.getElementById('btn-stop-generate');
const quotaValue = document.getElementById('quota-value');
const aiChatResizeHandle = document.getElementById('ai-chat-resize-handle');

let aiAbortController = null;
let aiCurrentEditorContent = '';
let aiCurrentCssContent = '';
let aiConversationHistory = []; // Track conversation in current session
const MAX_CONVERSATION_HISTORY = 10; // Keep last 10 messages

// UNDO/REDO History
let aiChangeHistory = [];
let aiHistoryIndex = -1;
const MAX_HISTORY = 50;

// Draggable panel
let isDragging = false;
let dragStartX = 0;
let panelWidth = 550;

function getAiPanelWidth() {
    return Math.max(0, aiChatPanel?.offsetWidth || panelWidth || 550);
}

function setAiPanelOpen(isOpen) {
    if (!aiChatPanel) return;
    aiChatPanel.classList.toggle('open', isOpen);
    aiChatPanel.style.left = isOpen ? '0px' : `-${getAiPanelWidth()}px`;
    aiChatToggle?.setAttribute('aria-expanded', String(isOpen));
}

function openAiChatPanel() {
    setAiPanelOpen(true);
    aiChatInput?.focus();
    updateAiQuota();
}

function closeAiChatPanel() {
    setAiPanelOpen(false);
    // Clear conversation history when closing chat
    aiConversationHistory = [];
}

// Toggle AI chat panel
aiChatToggle?.setAttribute('aria-expanded', 'false');
aiChatToggle?.addEventListener('click', openAiChatPanel);

aiChatClose?.addEventListener('click', closeAiChatPanel);

// Auto-resize textarea
aiChatInput?.addEventListener('input', () => {
    aiChatInput.style.height = 'auto';
    aiChatInput.style.height = Math.min(aiChatInput.scrollHeight, 120) + 'px';
});

// Send message on Enter (Shift+Enter for newline)
aiChatInput?.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        handleAiSendMessage();
    }
});

aiChatSend?.addEventListener('click', handleAiSendMessage);

btnStopGenerate?.addEventListener('click', () => {
    if (aiAbortController) {
        aiAbortController.abort();
        aiAbortController = null;
        aiChatGenerating.style.display = 'none';
        addAiMessage('assistant', 'Generation stopped.');
    }
});

// Resize AI panel from its right edge.
aiChatResizeHandle?.addEventListener('mousedown', (e) => {
    isDragging = true;
    dragStartX = e.clientX;
    panelWidth = getAiPanelWidth();
    aiChatPanel.classList.add('dragging');
    aiChatResizeHandle.classList.add('dragging');
    e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const deltaX = e.clientX - dragStartX;
    const maxWidth = Math.min(820, Math.max(360, window.innerWidth - 24));
    const newWidth = Math.max(360, Math.min(maxWidth, panelWidth + deltaX));
    aiChatPanel.style.width = newWidth + 'px';
    aiChatPanel.style.left = aiChatPanel.classList.contains('open') ? '0px' : `-${newWidth}px`;
});

document.addEventListener('mouseup', () => {
    if (isDragging) {
        isDragging = false;
        aiChatPanel.classList.remove('dragging');
        aiChatResizeHandle?.classList.remove('dragging');
        panelWidth = getAiPanelWidth();
        setAiPanelOpen(aiChatPanel.classList.contains('open'));
    }
});

// Prevent page scroll when scrolling in AI chat
aiChatMessages?.addEventListener('wheel', (e) => {
    const isAtTop = aiChatMessages.scrollTop === 0;
    const isAtBottom = aiChatMessages.scrollTop + aiChatMessages.clientHeight >= aiChatMessages.scrollHeight;

    if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
        e.preventDefault();
    }
    e.stopPropagation();
}, { passive: false });

async function handleAiSendMessage() {
    const message = aiChatInput.value.trim();
    if (!message || aiAbortController) return;

    // Add user message
    addAiMessage('user', message);
    aiChatInput.value = '';
    aiChatInput.style.height = 'auto';

    // Add to conversation history
    aiConversationHistory.push({
        role: 'user',
        content: message
    });

    // Show generating indicator
    aiChatGenerating.style.display = 'flex';
    aiChatSend.disabled = true;

    // Save current state before AI changes
    const currentMarkdown = getMarkdownValue();
    const currentCss = getCustomCss();
    const formattingExamples = formattingCodeBlock?.textContent || '';

    try {
        aiAbortController = new AbortController();

        const response = await fetch(getApiUrl('/api/ai/chat'), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                message: message,
                markdown: currentMarkdown,
                css: currentCss,
                formattingExamples: formattingExamples,
                conversationHistory: aiConversationHistory.slice(-MAX_CONVERSATION_HISTORY) // Send last N messages
            }),
            signal: aiAbortController.signal
        });

        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.detail || 'AI request failed');
        }

        const data = await response.json();

        // Frontend fallback: sometimes the backend may pass through the model's raw JSON blob
        // in `data.message` if parsing failed. If so, try to parse/repair and apply edits here.
        // This ensures the editor still updates even when the message looks like:
        // { "message": "...", "edits": [ ... ] }
        if ((data?.newMarkdown === undefined || data?.newMarkdown === null) &&
            (data?.newCss === undefined || data?.newCss === null) &&
            typeof data?.message === 'string') {

            const payload = tryParseAiEditPayloadFromText(data.message);
            if (payload && Array.isArray(payload.edits) && payload.edits.length) {
                const patched = applyAiEditsToContents(currentMarkdown, currentCss, payload.edits);
                if (typeof payload.message === 'string' && payload.message.trim()) {
                    data.message = payload.message;
                }
                if (patched.markdown !== currentMarkdown) data.newMarkdown = patched.markdown;
                if (patched.css !== currentCss) data.newCss = patched.css;
            }
        }

        // Hide generating indicator
        aiChatGenerating.style.display = 'none';
        aiChatSend.disabled = false;
        aiAbortController = null;

        // Add AI response
        const changes = {
            insertions: data.changes?.insertions || 0,
            deletions: data.changes?.deletions || 0
        };

        // Save to history if there were actual changes
        let changeId = null;
        if ((data.newMarkdown !== undefined && data.newMarkdown !== null && data.newMarkdown !== currentMarkdown) ||
            (data.newCss !== undefined && data.newCss !== null && data.newCss !== currentCss)) {

            changeId = saveToHistory({
                markdown: currentMarkdown,
                css: currentCss,
                newMarkdown: data.newMarkdown || currentMarkdown,
                newCss: data.newCss || currentCss,
                message: data.message
            });
        }

        addAiMessage('assistant', data.message, changes, changeId);

        // Add assistant response to conversation history
        aiConversationHistory.push({
            role: 'assistant',
            content: data.message
        });

        // Keep history size manageable
        if (aiConversationHistory.length > MAX_CONVERSATION_HISTORY * 2) {
            aiConversationHistory = aiConversationHistory.slice(-MAX_CONVERSATION_HISTORY);
        }

        // Apply changes to editor with safety checks
        let cssWasChanged = false;

        // Safety check for markdown: don't apply if new content is empty but current has content
        if (data.newMarkdown !== undefined && data.newMarkdown !== null && data.newMarkdown !== currentMarkdown) {
            // Prevent accidental content deletion
            if (data.newMarkdown.trim().length > 0 || currentMarkdown.trim().length === 0) {
                setMarkdownValue(data.newMarkdown);
                updatePreview();
            } else {
                console.warn('AI returned empty markdown - ignoring to prevent data loss');
                showToast('⚠️ AI response error - content preserved', 3000);
            }
        }

        // Safety check for CSS: don't apply if new content is empty but current has content
        if (data.newCss !== undefined && data.newCss !== null && data.newCss !== currentCss) {
            // Prevent accidental content deletion
            if (data.newCss.trim().length > 0 || currentCss.trim().length === 0) {
                setCustomCss(data.newCss);
                updatePreview();
                cssWasChanged = true;
            } else {
                console.warn('AI returned empty CSS - ignoring to prevent data loss');
                showToast('⚠️ AI response error - CSS preserved', 3000);
            }
        }

        // Switch to CSS tab if CSS was changed
        if (cssWasChanged && data.newMarkdown === undefined) {
            // Only CSS changed, switch to CSS tab
            setEditorTab('css', false);
        }

        if (data.model) {
            quotaValue.textContent = data.model;
        }

        // Update quota
        updateAiQuota();

    } catch (error) {
        aiChatGenerating.style.display = 'none';
        aiChatSend.disabled = false;
        aiAbortController = null;

        if (error.name === 'AbortError') {
            addAiMessage('assistant', 'Generation stopped.');
        } else {
            console.error('AI chat error:', error);
            addAiMessage('assistant', `⚠️ Error: ${error.message}`);
        }
    }
}

function tryParseAiEditPayloadFromText(text) {
    if (typeof text !== 'string') return null;
    let src = text.trim();
    if (!src) return null;

    // Strip ```json fences if present
    if (src.startsWith('```')) {
        const lines = src.split('\n');
        if (lines.length >= 2) src = lines.slice(1, -1).join('\n').trim();
    }

    const objStr = extractFirstJsonObjectString(src) || src;
    try {
        return JSON.parse(objStr);
    } catch {
        try {
            return JSON.parse(escapeControlCharsInJsonStrings(objStr));
        } catch {
            return null;
        }
    }
}

function extractFirstJsonObjectString(text) {
    if (typeof text !== 'string' || !text) return null;
    const start = text.indexOf('{');
    if (start < 0) return null;
    let depth = 0;
    let inString = false;
    let escaping = false;
    for (let i = start; i < text.length; i++) {
        const ch = text[i];
        if (inString) {
            if (escaping) {
                escaping = false;
            } else if (ch === '\\') {
                escaping = true;
            } else if (ch === '"') {
                inString = false;
            }
            continue;
        }

        if (ch === '"') {
            inString = true;
            escaping = false;
            continue;
        }
        if (ch === '{') depth++;
        else if (ch === '}') {
            depth--;
            if (depth === 0) return text.slice(start, i + 1);
        }
    }
    return null;
}

function applyAiEditsToContents(markdownText, cssText, edits) {
    let newMarkdown = String(markdownText ?? '');
    let newCss = String(cssText ?? '');

    for (const edit of edits) {
        if (!edit) continue;
        const target = String(edit.target || 'markdown').toLowerCase();
        const search = edit.search;
        const replace = String(edit.replace ?? '');
        if (search === undefined || search === null) continue;
        const searchStr = String(search);

        if (target === 'markdown') {
            if (searchStr === '__ALL__' || (searchStr === '' && newMarkdown.trim().length === 0)) {
                newMarkdown = replace;
            } else if (searchStr === '__END__') {
                newMarkdown = newMarkdown ? (newMarkdown + '\n\n' + replace) : replace;
            } else if (newMarkdown.includes(searchStr)) {
                newMarkdown = newMarkdown.replace(searchStr, replace);
            }
        } else if (target === 'css') {
            if (searchStr === '__ALL__' || (searchStr === '' && newCss.trim().length === 0)) {
                newCss = replace;
            } else if (searchStr === '__END__') {
                newCss = newCss ? (newCss + '\n' + replace) : replace;
            } else if (newCss.includes(searchStr)) {
                newCss = newCss.replace(searchStr, replace);
            }
        }
    }

    return { markdown: newMarkdown, css: newCss };
}

function parsePotentialJsonMessage(text) {
    if (typeof text !== 'string') return text;
    const trimmed = text.trim();
    // Check if it looks like the JSON structure we expect
    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('```json'))) {
        try {
            // Remove markdown code blocks if present
            let clean = trimmed.replace(/^```(?:json)?/, '').replace(/```$/, '').trim();
            const parsed = JSON.parse(clean);
            if (parsed.message) {
                return parsed.message;
            }
        } catch (e) {
            // Fallthrough to repair attempt
            try {
                let clean = trimmed.replace(/^```(?:json)?/, '').replace(/```$/, '').trim();
                clean = escapeControlCharsInJsonStrings(clean);
                const parsed = JSON.parse(clean);
                if (parsed && typeof parsed.message === 'string') return parsed.message;
            } catch {
                // If parse fails, return original text
            }
        }
    }
    return text;
}

function escapeControlCharsInJsonStrings(src) {
    // Mirrors backend repair: escape literal newlines/tabs only inside strings.
    if (typeof src !== 'string' || !src) return src;
    let out = '';
    let inString = false;
    let escaping = false;
    for (let i = 0; i < src.length; i++) {
        const ch = src[i];
        if (!inString) {
            if (ch === '"') inString = true;
            out += ch;
            continue;
        }

        if (escaping) {
            out += ch;
            escaping = false;
            continue;
        }

        if (ch === '\\') {
            out += ch;
            escaping = true;
            continue;
        }

        if (ch === '"') {
            out += ch;
            inString = false;
            continue;
        }

        if (ch === '\n') {
            out += '\\n';
            continue;
        }
        if (ch === '\r') {
            out += '\\r';
            continue;
        }
        if (ch === '\t') {
            out += '\\t';
            continue;
        }
        out += ch;
    }
    return out;
}


function addAiMessage(role, text, changes = null, changeId = null) {
    // Remove welcome message if it exists
    const welcome = aiChatMessages.querySelector('.ai-chat-welcome');
    if (welcome) {
        welcome.remove();
    }

    const messageDiv = document.createElement('div');
    messageDiv.className = `ai-message ${role}`;

    // Clean up text if it's the raw JSON
    if (role === 'assistant') {
        text = parsePotentialJsonMessage(text);
    }

    // Convert markdown (basic)
    let content = text
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/`([^`]+)`/g, '<code>$1</code>')
        .replace(/\n\n/g, '<br><br>')
        .replace(/\n/g, '<br>');

    // Create bubble
    let html = `<div class="message-bubble">${content}</div>`;

    // Add metadata/actions (changes, undo, etc)
    if (role === 'assistant') {
        html += `<div class="message-info">`;

        // Add changes/stats
        if (changes && (changes.insertions > 0 || changes.deletions > 0)) {
            html += `
                <div class="message-changes">
                    <span class="changes-insertions">+${changes.insertions}</span>
                    <span class="changes-deletions">-${changes.deletions}</span>
                </div>
            `;
        }

        // Add actions (Undo/Redo)
        if (changeId) {
            html += `
                <div class="message-actions">
                    <button class="message-action-btn" onclick="undoChange('${changeId}', this)" title="Undo changes">
                        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 7H3V3M3 7l3-3a7 7 0 1 1-1.5 7"/></svg>Undo
                    </button>
                    <button class="message-action-btn redo-btn" onclick="redoChange('${changeId}', this)" title="Redo changes" style="display:none">
                        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M13 7h4V3m0 4-3-3a7 7 0 1 0 1.5 7"/></svg>Redo
                    </button>
                </div>
            `;
        }

        html += `</div>`; // Close message-info
    }

    messageDiv.innerHTML = html;
    aiChatMessages.appendChild(messageDiv);
    aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
}

async function updateAiQuota() {
    try {
        const response = await fetch(getApiUrl('/api/ai/quota'));
        if (response.ok) {
            const data = await response.json();
            const { remaining, limit, resetTime, resetType } = data;

            if (data.configured === false) {
                quotaValue.textContent = 'API key needed';
            } else if (data.provider === 'Gemini' && data.model) {
                quotaValue.textContent = data.model;
            } else if (remaining !== undefined && limit !== undefined) {
                quotaValue.textContent = `${remaining}/${limit} remaining`;

                if (resetTime) {
                    const resetDate = new Date(resetTime);
                    const now = new Date();
                    const diff = resetDate - now;

                    if (diff > 0) {
                        const minutes = Math.floor(diff / 60000);
                        const hours = Math.floor(minutes / 60);

                        if (hours > 0) {
                            quotaValue.textContent += ` (resets in ${hours}h ${minutes % 60}m)`;
                        } else {
                            quotaValue.textContent += ` (resets in ${minutes}m)`;
                        }
                    }
                }
            } else {
                quotaValue.textContent = 'Unlimited';
            }
        }
    } catch (error) {
        quotaValue.textContent = 'Unknown';
        console.error('Failed to fetch quota:', error);
    }
}

// UNDO/REDO History Management
function saveToHistory(change) {
    // Generate unique ID
    const changeId = Date.now() + '_' + Math.random().toString(36).substr(2, 9);

    // Truncate history if we're not at the end
    if (aiHistoryIndex < aiChangeHistory.length - 1) {
        aiChangeHistory = aiChangeHistory.slice(0, aiHistoryIndex + 1);
    }

    // Add new change
    aiChangeHistory.push({
        id: changeId,
        ...change,
        applied: true
    });

    // Keep history within limit
    if (aiChangeHistory.length > MAX_HISTORY) {
        aiChangeHistory.shift();
    }

    aiHistoryIndex = aiChangeHistory.length - 1;
    return changeId;
}

// --- Undo/Redo Functions ---

function undoChange(changeId, btnElement) {
    // Find change by ID (checking both top-level and in history array)
    const change = aiChangeHistory.find(c => c.id === changeId);

    // If not found in array, it might be that saveToHistory structure is different than expected
    if (!change) {
        console.error("Change not found:", changeId);
        return;
    }

    // Apply old state (markdown/css from before the change)
    // Note: saveToHistory stores { markdown, css, newMarkdown, newCss }
    // 'markdown' is the OLD state.
    if (change.markdown !== undefined) setMarkdownValue(change.markdown);
    if (change.css !== undefined) setCustomCss(change.css);

    updatePreview();

    // Toggle buttons visibility if button element provided
    // If called from onclick="undoChange('id', this)"
    if (btnElement && btnElement instanceof Element) {
        const parent = btnElement.parentElement;
        const redoBtn = parent.querySelector('.redo-btn');
        if (redoBtn) redoBtn.style.display = 'inline-flex';
        btnElement.style.display = 'none';

        // style the message bubble to look "undone"
        const messageDiv = parent.closest('.ai-message');
        if (messageDiv) messageDiv.classList.add('undone');
    } else {
        // Fallback for data-attribute based buttons (if any exist)
        const undoBtn = document.querySelector(`button[onclick*="${changeId}"]`);
        if (undoBtn) undoBtn.style.display = 'none';

        const redoBtn = document.querySelector(`.redo-btn[onclick*="${changeId}"]`);
        if (redoBtn) redoBtn.style.display = 'inline-flex';
    }

    showToast('↺ Changes undone', 2000);
}

function redoChange(changeId, btnElement) {
    const change = aiChangeHistory.find(c => c.id === changeId);
    if (!change) return;

    // Apply new state
    if (change.newMarkdown !== undefined) setMarkdownValue(change.newMarkdown);
    if (change.newCss !== undefined) setCustomCss(change.newCss);

    updatePreview();

    // Toggle buttons
    if (btnElement && btnElement instanceof Element) {
        const parent = btnElement.parentElement;
        const undoBtn = parent.querySelector('.message-action-btn:not(.redo-btn)');
        if (undoBtn) undoBtn.style.display = 'inline-flex';
        btnElement.style.display = 'none';

        const messageDiv = parent.closest('.ai-message');
        if (messageDiv) messageDiv.classList.remove('undone');
    }

    showToast('↻ Changes reapplied', 2000);
}


// Update quota every 30 seconds
setInterval(updateAiQuota, 30000);