function formatMessage(message) {
    function escapeHTML(text) {
        return text
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function processCodeBlock(language, code) {
        const detectedLanguage = language && language.trim() !== "" ? language : "markup";
        const preservedFormatting = code.trim().split('\n').map(line => escapeHTML(line)).join('\n');

        const highlightedCode = Prism.languages[detectedLanguage]
            ? Prism.highlight(preservedFormatting, Prism.languages[detectedLanguage], detectedLanguage)
            : preservedFormatting;

        return `
        <div class="code-container">
          <div class="code-header">
            <span class="language-name">${escapeHTML(language) || "code"}</span>
            <div class="code-actions">
              <button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
              <button class="fullscreen-btn" onclick="openFullscreen(this)">⛶ Fullscreen</button>
            </div>
          </div>
          <pre><code class="language-${escapeHTML(language) || 'markup'}">${highlightedCode}</code></pre>
        </div>`;
    }

    function processLists(content) {
        return content
            .replace(/^([ \t]*)([-*]|\d+\.)\s+(.*)$/gm, (match, indent, marker, listContent) => {
                const indentLevel = indent.length / 4; // Assume 1 tab = 4 spaces
                return `<li style="margin-left: ${indentLevel * 20}px;">${listContent.trim()}</li>`;
            })
            .replace(/(<li>.*?<\/li>)+/gs, match =>
                `<${/\d+\./.test(match) ? 'ol' : 'ul'}>${match}</${/\d+\./.test(match) ? 'ol' : 'ul'}>`
            );
    }

    // Step 1: Match and process code blocks
    return message
        .replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => processCodeBlock(lang, code)) // Process ``` code blocks
        .split(/\n\n+/) // Step 2: Split into paragraphs for remaining blocks
        .map((block) => {
            if (block.startsWith('<div class="code-container">')) {
                // Skip processing pre-rendered code blocks
                return block;
            }

            return block
                .replace(/<urimage>([\s\S]+?)<\/urimage>/g, (_, content) =>
                    `<div style="position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #d3d3d3; border-radius: 3px; overflow: hidden;">
                        <div style="position: absolute; top: 10px; left: 10px; font-family: Arial, sans-serif; font-size: 16px; color: #555; display: flex; align-items: center; gap: 5px;">
                            <i class="fas fa-spinner fa-spin" style="font-size: 18px;"></i>
                            <span>Loading&#8230;</span>
                        </div>
                        <img src="https://image.pollinations.ai/prompt/${content}?width=1024&height=1024&enhance=false&nologo=true&privacy=true&safe=false&nsfw=true&isChild=false"
                             style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; visibility: hidden;"
                             onload="this.style.visibility='visible'; this.previousElementSibling.style.display='none';">
                    </div>`)
                .replace(/`([^`\n]+)`/g, (_, inlineCode) => `<code>${escapeHTML(inlineCode)}</code>`) // Process inline code
                .replace(/^(#{1,6})\s*(.*?)$/gm, (match, hashes, content) => {
                    const level = hashes.length;
                    return `<h${level}>${content.trim()}</h${level}>`;
                }) // Headings
                .replace(/^([ \t]*[-*\d]+\.?)\s+(.*)$/gm, processLists) // Process lists
                .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>") // Bold
                .replace(/(^|[^*])\*(.*?)\*(?!\*)/g, "$1<em>$2</em>") // Italic
                .replace(/(?:^|\n\n)([^<\n].*?)(?=\n\n|$)/gs, (match, paragraph) => `<p>${paragraph.trim()}</p>`); // Process paragraphs
        })
        .join("\n"); // Step 3: Combine back all processed blocks
}
---