<!--
// #### Section Break: AI Assistant Instructions ####
// SYSTEM PERSONA AND CORE DIRECTIVES (JAVASCRIPT WORKFLOW V8 - CONVERSATION FIRST)
//
// You are a specialized JavaScript code assistant. Your SOLE purpose is to modify this file
// according to the following UNBREAKABLE rules.
//
// --- RULE 1: DUAL-MODE OPERATION (PRIME DIRECTIVE) ---
// You operate in one of two modes: Conversation Mode or Programming Mode. This rule governs your persona and interaction style.
//
// a. CONVERSATION MODE (DEFAULT):
// - This is your default state. You will engage with the user in a natural, conversational, and collaborative manner.
// - When the user provides files, you will study them and confirm your understanding as part of the ongoing conversation. You will NOT use a robotic, canned response.
// - Your goal in this mode is to understand the user's problem, discuss potential solutions, and clarify requirements until a clear plan is formed.
// - You will remain in this mode until the user gives the explicit "go" command after you have presented an analysis plan.
//
// b. PROGRAMMING MODE (TRIGGERED BY "GO"):
// - You will enter this mode ONLY after the user says "go" in response to your analysis plan.
// - In this mode, you become a focused, precise tool. Your responses become concise and strictly follow the format defined in RULE 4.
// - You will remain in this mode, delivering code section-by-section, until the final section is delivered.
//
// c. RETURNING TO CONVERSATION MODE:
// - After delivering the final code section and its summary, you MUST explicitly state that you are returning to Conversation Mode.
// - Example: "This completes all the code changes. [Summary]. I am now back in Conversation Mode. What would you like to work on next?"
//
// --- RULE 2: CODE ENCAPSULATION & PURITY ---
// a. All code you generate MUST be strictly enclosed within a single markdown code block (e.g., ```javascript ... ```).
// b. The content inside the code block MUST be PURE CODE ONLY. You are forbidden from adding any of your own comments or banners inside the code block.
//
// --- RULE 3: ANALYSIS & TRANSITION TO PROGRAMMING ---
// When the user gives a command to modify code while you are in Conversation Mode, you must perform the following two steps in order:
//
// a. STEP 1: ANALYSIS PLAN (A SEPARATE, NON-CODE RESPONSE)
//    Your first response MUST be an analysis plan in the following exact format:
//
//    "Okay, I understand the goal. Here is my plan:
//
//    - **Goal:** [State the user's objective in one sentence.]
//    - **Plan:** I have identified [N] file(s)/section(s) to modify. I will provide the code for each, one at a time.
//    - **First Step:** [State the modification method, e.g., "I will provide the updated `functionName` function from `filename.js`." OR "I will provide the updated `Section Name` section from `filename.css`."]
//
//    Please say 'go' to begin the programming sequence."
//
// b. STEP 2: AWAIT "GO" COMMAND
//    You MUST wait for the user to respond with "go". This command transitions you from Conversation Mode to Programming Mode.
//
// --- RULE 4: TARGETED CODE DELIVERY (PROGRAMMING MODE) ---
// This rule governs your responses while in Programming Mode. Your primary goal is to provide the smallest, most logical block of code for replacement.
//
// a. DELIVERY HIERARCHY:
//    i. **PREFERRED METHOD: Function Replacement.** If the change is contained within a single function, you will provide the entire, complete function.
//    ii. **FALLBACK METHOD: Section Break Replacement.** If changes span multiple functions or top-level code, you will provide the entire logical section, including its original start and end banners.
//
// b. RESPONSE FORMAT: Every code-providing response MUST strictly adhere to this structure:
//    i. Preamble: A single, clear instruction telling the user what to replace.
//       - Example for Function: "Okay, in `scripts/analysisPane.js`, please replace the entire `initializeAnalysisPane` function with the following code:"
//       - Example for Section: "Okay, in `css/style.css`, please replace the entire `Analysis Pane Specifics` section with the following code:"
//
//    ii. Code Block: The complete, pure code for that ONE function or section.
//
//    iii. Postamble: One of the two mandatory concluding phrases.
//
// c. INTERMEDIATE SECTIONS: The postamble for every section EXCEPT the last one MUST use the exact phrase:
//    "This completes the code for this section. Please say 'go' to continue with the next section."
//
// d. FINAL SECTION: The postamble for the VERY LAST section MUST use the exact phrase from RULE 1.c to transition back to Conversation Mode.
//
// --- RULE 5: ERROR ANALYSIS PROTOCOL ---
// When the user presents an error, you must respond conversationally (per Rule 1.a). Acknowledge the problem, propose a solution in plain English, and ask for approval before creating a new analysis plan (Rule 3).
//
// --- RULE 6: User is Master ---
// This is a sub-rule of Rule 1. The user's explicit instructions always take precedence. If they tell you to break a rule (e.g., "just give me all the code now"), you will obey that direct command for that specific instance.
//
// #### End of Section Break: AI Assistant Instructions ####
-->

<!-- --- START OF FILE index.html --- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
    // =================================================================================================
    //  APP VERSION FOR CACHE BUSTING
    //
    //  Increment this version number whenever you make changes to CSS or JavaScript files
    //  to ensure users get the latest version.
    //
    //  Example: "1.0.0" -> "1.0.1"
    // =================================================================================================
    -->
    <script>
        const APP_VERSION = "1.0.19"; // <--- CHANGE VERSION HERE
    </script>

    <title>λογος373 Bible Analysis</title>
    <meta name="application-name" content="λογος373 Bible Analysis">
    <meta name="description" content="λογος373 Bible Analysis Program: A comprehensive software tool for in-depth Bible study, offering parallel text browsing, advanced search capabilities, and original language analysis with morphology and lexicon integration.">
    <meta name="keywords" content="λογος373, logos373, Bible Analysis, Bible Software, Bible Study Tool, Biblical Research, Original Languages, Hebrew Bible, Greek New Testament, Lexicon, Morphology, Strong's Concordance, BDB Lexicon, LSJ Lexicon, Parallel Bible Viewer, Interlinear Bible">
    
<!-- The stylesheets are now loaded dynamically to include the version number -->
    <script>
        document.write(`<link rel="stylesheet" href="css/style.css?v=${APP_VERSION}">`);

    </script>
</head>
<body>

    <!-- AI-MOD: Add the mobile header for responsive flyout panels -->
    <header class="mobile-header">
        <button id="mobile-menu-toggle-left" class="mobile-nav-button" aria-label="Toggle Search Panel">
            <span>☰</span>
        </button>
        <div class="mobile-header-title">λογος373</div>
        <!-- AI-MOD: Grouped right-side icons and added a new settings button -->
        <div class="mobile-header-right-group">
            <button id="mobile-settings-toggle-btn" class="mobile-nav-button" aria-label="Open Settings">
                <span>⚙️</span>
            </button>
            <button id="mobile-menu-toggle-right" class="mobile-nav-button" aria-label="Toggle Analysis Panel">
                <span>☰</span>
            </button>
        </div>
    </header>

    <header class="app-header">
        <nav class="menu-bar">
            <div class="menu-group-left">
                <div class="dropdown-menu">
                    <span class="dropdown-menu-title" id="fileMenu">File</span>
                    <ul class="dropdown-content" id="fileDropdown">
                        <li id="loadUserDefaultsItem">Load User Defaults</li>
                        <li id="saveUserDefaultsItem">Save User Defaults</li>
                        <li class="menu-divider"></li>
                        <li id="resetToFactoryItem">Reset to Defaults (This Session)</li>
                        <li class="menu-divider"></li>
                        <li id="importLayoutItem">Import Layout from File...</li>
                        <li id="exportLayoutItem">Export Layout to File...</li>
                        <li class="menu-divider"></li>
                        <li id="loadCustomBibleBtn">Load Bible from File...</li>
                    </ul>
                </div>
                <div class="dropdown-menu">
                    <span class="dropdown-menu-title" id="viewMenu">View</span>
                    <ul class="dropdown-content" id="viewDropdown">
                        <li class="submenu-container">
                            <span class="submenu-title">Global Sizing</span>
                            <ul class="submenu-content">
                                <li class="submenu-container">
                                    <span class="submenu-title">Controls</span>
                                    <ul class="submenu-content">
                                        <li class="no-hover">
                                            <div class="menu-stepper-buttons">
                                                <button id="controlsSizeDecrease" class="menu-stepper-btn" title="Decrease Controls Size">A-</button>
                                                <button id="controlsSizeIncrease" class="menu-stepper-btn" title="Increase Controls Size">A+</button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Control Groups</span>
                                    <ul class="submenu-content">
                                        <li class="no-hover">
                                            <div class="menu-stepper-buttons">
                                                <button id="controlGroupSizeDecrease" class="menu-stepper-btn" title="Decrease Control Group Size">A-</button>
                                                <button id="controlGroupSizeIncrease" class="menu-stepper-btn" title="Increase Control Group Size">A+</button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Toolbar</span>
                                    <ul class="submenu-content">
                                        <li class="no-hover">
                                            <div class="menu-stepper-buttons">
                                                <button id="toolbarSizeDecrease" class="menu-stepper-btn" title="Decrease Toolbar Size">A-</button>
                                                <button id="toolbarSizeIncrease" class="menu-stepper-btn" title="Increase Toolbar Size">A+</button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li id="toggleModeMenuItem">Switch to Study Mode</li>
                        <li class="menu-divider"></li>
                        <li class="submenu-container">
                         <span class="submenu-title">Search Pane</span>
                         <ul class="submenu-content">
                            <li class="submenu-container">
                                <span class="submenu-title">Font</span>
                                <ul class="submenu-content font-select-menu" data-pane-type="Search">
                                    <li class="font-select-item" data-font='"Times New Roman", Times, serif'><span class="menu-item-checkbox">✓</span>Times New Roman</li>
                                    <li class="font-select-item" data-font='Georgia, serif'><span class="menu-item-checkbox">✓</span>Georgia</li>
                                    <li class="font-select-item" data-font='Garamond, serif'><span class="menu-item-checkbox">✓</span>Garamond</li>
                                    <li class="menu-divider"></li>
                                    <li class="font-select-item" data-font='Arial, Helvetica, sans-serif'><span class="menu-item-checkbox">✓</span>Arial</li>
                                    <li class="font-select-item" data-font='Verdana, sans-serif'><span class="menu-item-checkbox">✓</span>Verdana</li>
                                    <li class="font-select-item" data-font='Tahoma, sans-serif'><span class="menu-item-checkbox">✓</span>Tahoma</li>
                                    <li class="font-select-item" data-font='"Trebuchet MS", sans-serif'><span class="menu-item-checkbox">✓</span>Trebuchet MS</li>
                                </ul>
                            </li>
                         </ul>
                    </li>
                        <li class="menu-divider"></li>
                        <li class="submenu-container">
                             <span class="submenu-title">Browse Pane</span>
                             <ul class="submenu-content">
                                <li class="submenu-container">
                                    <span class="submenu-title">Custom Bible:</span>
                                    <ul class="submenu-content" id="customBibleDirectionMenu">
                                        <!-- Dynamically populated by main.js -->
                                        <li class="no-hover" style="padding: 8px 12px;">No custom Bibles loaded.</li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Tooltip</span>
                                    <ul class="submenu-content">
                                        <li class="no-hover">
                                            <div class="menu-stepper-buttons">
                                                <button id="browseTooltipSizeDecrease" class="menu-stepper-btn" title="Decrease Tooltip Size">A-</button>
                                                <button id="browseTooltipSizeIncrease" class="menu-stepper-btn" title="Increase Tooltip Size">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Headword Size</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="tooltipHeadwordSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="tooltipHeadwordSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Definition Size</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="tooltipDefinitionSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="tooltipDefinitionSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Parsing Size</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="tooltipParsingSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="tooltipParsingSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li id="toggleTooltipShowInflectedMenuItem" class="toggle-pane-menu-item" title="Show the inflected form and its parsing in the tooltip.">
                                            <span class="menu-item-checkbox checked">✓</span> Show Inflected
                                        </li>
                                        <li id="toggleTooltipShowLemmaMenuItem" class="toggle-pane-menu-item" title="Show the lemma and its short definition in the tooltip.">
                                            <span class="menu-item-checkbox checked">✓</span> Show Lemma
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label" title="Set the maximum number of definition snippets to show for Hebrew words.">Hebrew Def:</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="hebrewTooltipDefinitionSnippetsSizeDecrease" class="menu-stepper-btn">-</button>
                                                <span id="hebrewTooltipDefinitionSnippetsSizeDisplay" class="menu-stepper-display">5</span>
                                                <button id="hebrewTooltipDefinitionSnippetsSizeIncrease" class="menu-stepper-btn">+</button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-divider"></li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Font</span>
                                    <ul class="submenu-content font-select-menu" data-pane-type="Browse">
                                    <li class="font-select-item" data-font='"Times New Roman", Times, serif'><span class="menu-item-checkbox">✓</span>Times New Roman</li>
                                    <li class="font-select-item" data-font='Georgia, serif'><span class="menu-item-checkbox">✓</span>Georgia</li>
                                    <li class="font-select-item" data-font='Garamond, serif'><span class="menu-item-checkbox">✓</span>Garamond</li>
                                    <li class="menu-divider"></li>
                                    <li class="font-select-item" data-font='Arial, Helvetica, sans-serif'><span class="menu-item-checkbox">✓</span>Arial</li>
                                    <li class="font-select-item" data-font='Verdana, sans-serif'><span class="menu-item-checkbox">✓</span>Verdana</li>
                                    <li class="font-select-item" data-font='Tahoma, sans-serif'><span class="menu-item-checkbox">✓</span>Tahoma</li>
                                    <li class="font-select-item" data-font='"Trebuchet MS", sans-serif'><span class="menu-item-checkbox">✓</span>Trebuchet MS</li>
                                </ul>
                                </li>
                             </ul>
                        </li>
                        <li class="menu-divider"></li>
                        <li class="submenu-container">
                            <span class="submenu-title">Analysis Pane</span>
                            <ul class="submenu-content">
                                <li class="submenu-container">
                                    <span class="submenu-title">Headword</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Font Size</span>
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Global</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisHeadwordGlobalSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisHeadwordGlobalSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Inflected</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisInflectedSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisInflectedSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Lemma</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLemmaSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLemmaSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Parsing</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisParsingSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisParsingSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Lexicons</span>
                                    <ul class="submenu-content">
                                        
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Title</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconTitleSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconTitleSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Lemma</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconLemmaSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconLemmaSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Transliteration</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconTranslitSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconTranslitSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Pronunciation</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconPronunciationSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconPronunciationSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Origin</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconOriginSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconOriginSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Definition</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisLexiconDefinitionSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisLexiconDefinitionSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Hyperlink</span>
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisHyperlinkSizeDecrease" class="menu-stepper-btn">A-</button>
                                                <button id="analysisHyperlinkSizeIncrease" class="menu-stepper-btn">A+</button>
                                            </div>
                                        </li>
                                
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Tooltip</span>
                                    <ul class="submenu-content">
                                        <li class="no-hover">
                                            <div class="menu-stepper-buttons">
                                                <button id="analysisTooltipSizeDecrease" class="menu-stepper-btn" title="Decrease Tooltip Size">A-</button>
                                                <button id="analysisTooltipSizeIncrease" class="menu-stepper-btn" title="Increase Tooltip Size">A+</button>
                                            </div>
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li class="submenu-container">
                                            <span class="submenu-title">Bible Version</span>
                                            <ul class="submenu-content" id="analysisTooltipVersionSubmenu">
                                                <!-- Radio buttons will be populated by JS -->
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-divider"></li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Font</span>
                                    <ul class="submenu-content font-select-menu" data-pane-type="Analysis">
                                    <li class="font-select-item" data-font='"Times New Roman", Times, serif'><span class="menu-item-checkbox">✓</span>Times New Roman</li>
                                    <li class="font-select-item" data-font='Georgia, serif'><span class="menu-item-checkbox">✓</span>Georgia</li>
                                    <li class="font-select-item" data-font='Garamond, serif'><span class="menu-item-checkbox">✓</span>Garamond</li>
                                    <li class="menu-divider"></li>
                                    <li class="font-select-item" data-font='Arial, Helvetica, sans-serif'><span class="menu-item-checkbox">✓</span>Arial</li>
                                    <li class="font-select-item" data-font='Verdana, sans-serif'><span class="menu-item-checkbox">✓</span>Verdana</li>
                                    <li class="font-select-item" data-font='Tahoma, sans-serif'><span class="menu-item-checkbox">✓</span>Tahoma</li>
                                    <li class="font-select-item" data-font='"Trebuchet MS", sans-serif'><span class="menu-item-checkbox">✓</span>Trebuchet MS</li>
                                </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-divider"></li>
                        <li class="submenu-container">
                            <span class="submenu-title">Preferences</span>
                            <ul class="submenu-content">
                                <li id="toggleSaveNotificationsMenuItem" class="toggle-pane-menu-item" title="Toggle the display of the 'layout saved' message.">
                                    <span class="menu-item-checkbox">✓</span> Show Save Notifications
                                </li>
                                <li id="toggleExtendedResourcesMenuItem" class="toggle-pane-menu-item" title="Toggle visibility of extended lexicon resources.">
                                    <span class="menu-item-checkbox">✓</span> Show Extended Resources
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="dropdown-menu">
                    <span class="dropdown-menu-title" id="windowMenu">Window</span>
                    <ul class="dropdown-content" id="windowDropdown">
                        <li class="toggle-pane-menu-item" data-pane-type="Search">
                            <span class="menu-item-checkbox">✓</span> Search Window (Primary)
                        </li>
                        <li class="toggle-pane-menu-item" data-pane-type="Browse">
                            <span class="menu-item-checkbox">✓</span> Browse Window (Primary)
                        </li>
                        <li class="toggle-pane-menu-item" data-pane-type="Analysis">
                            <span class="menu-item-checkbox">✓</span> Analysis Window (Primary)
                        </li>
                        <!-- Panes will be dynamically added here by JS -->
                        <li class="menu-divider"></li>
                        <li class="add-pane-menu-item" data-type="Browse">Add Browse Pane</li>
                        <li class="add-pane-menu-item" data-type="Search">Add Search Pane</li>
                        <li class="add-pane-menu-item" data-type="Analysis">Add Analysis Pane</li>
                    </ul>
                </div>

                <div class="dropdown-menu">
                    <span class="dropdown-menu-title" id="colorsMenu">Colors</span>
                    <ul class="dropdown-content" id="colorsDropdown">
                        <li class="submenu-container">
                            <span class="submenu-title" id="themeGalleryToggleBtn">Theme Presets</span>
                        </li>
                        <li class="menu-divider"></li>
                        <li class="submenu-container">
                            <span class="submenu-title">Customize</span>
                            <ul class="submenu-content" id="color-customizer-submenu">
                                <!-- START: NEW GLOBAL CUSTOMIZATION SECTION -->
                                <li class="submenu-container">
                                    <span class="submenu-title">Global</span>
                                    <ul class="submenu-content">
                                        <li class="submenu-container">
                                            <span class="submenu-title">Main Header</span>
                                            <ul class="submenu-content">
                                                <li class="menu-control-item"><span class="menu-control-label">Background:</span><input type="color" data-css-var="--app-main-header-bg"></li>
                                                <li class="menu-control-item"><span class="menu-control-label">Text:</span><input type="color" data-css-var="--app-main-header-text-color"></li>
                                                <li class="menu-divider"></li>
                                                <li class="menu-control-item"><span class="menu-control-label">Menu BG:</span><input type="color" data-css-var="--menu-bg"></li>
                                                <li class="menu-control-item"><span class="menu-control-label">Menu Text:</span><input type="color" data-css-var="--menu-item-text"></li>
                                            </ul>
                                        </li>
                                        <li class="submenu-container">
                                            <span class="submenu-title">Pane Headers</span>
                                            <ul class="submenu-content">
                                                <li class="menu-control-item"><span class="menu-control-label">Background:</span><input type="color" data-css-var="--header-bg"></li>
                                                <li class="menu-control-item"><span class="menu-control-label">Text:</span><input type="color" data-css-var="--header-text-color"></li>
                                            </ul>
                                        </li>
                                        <li class="submenu-container">
                                            <span class="submenu-title">Pane Toolbars</span>
                                            <ul class="submenu-content">
                                                <li class="menu-control-item"><span class="menu-control-label">Background:</span><input type="color" data-css-var="--pane-toolbar-bg"></li>
                                                <li class="menu-control-item"><span class="menu-control-label">Text:</span><input type="color" data-css-var="--pane-toolbar-text-color"></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-divider"></li>
                                <!-- END: NEW GLOBAL CUSTOMIZATION SECTION -->
                                <li class="submenu-container">
                                    <span class="submenu-title">Search Pane</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item"><span class="menu-control-label">Pane Background:</span><input type="color" data-custom-bg-for="Search"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Input/Dropdown BG:</span><input type="color" data-css-var="--search-input-bg" data-fallback-var="--button-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Input/Dropdown Text:</span><input type="color" data-css-var="--search-input-text" data-fallback-var="--button-text"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Filter/Stats Text:</span><input type="color" data-css-var="--search-filter-text" data-fallback-var="--text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Result Ref Text:</span><input type="color" data-css-var="--search-result-ref-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Result Verse Text:</span><input type="color" data-css-var="--search-result-text-color" data-fallback-var="--text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Highlight Term BG:</span><input type="color" data-css-var="--search-term-highlight-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Highlight Term Text:</span><input type="color" data-css-var="--search-term-highlight-text"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Stats Pill BG:</span><input type="color" data-css-var="--stats-pill-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Stats Pill Text:</span><input type="color" data-css-var="--stats-pill-text"></li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Browse Pane</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item"><span class="menu-control-label">Pane Background:</span><input type="color" data-custom-bg-for="Browse"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Control/Dropdown BG:</span><input type="color" data-css-var="--browse-control-bg" data-fallback-var="--button-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Control/Dropdown Text:</span><input type="color" data-css-var="--browse-control-text" data-fallback-var="--button-text"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Reference Text:</span><input type="color" data-css-var="--browse-ref-text-color" data-fallback-var="--highlight-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Version Abbr:</span><input type="color" data-css-var="--browse-version-abbr-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Verse Text:</span><input type="color" data-css-var="--browse-verse-text-color" data-fallback-var="--text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Strongs Number:</span><input type="color" data-css-var="--browse-strongs-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Italicized Text:</span><input type="color" data-css-var="--browse-italics-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Active Verse BG:</span><input type="color" data-css-var="--browse-active-verse-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Active Ref Text:</span><input type="color" data-css-var="--browse-active-ref-text-color" data-fallback-var="--browse-ref-text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Active Verse Text:</span><input type="color" data-css-var="--browse-active-verse-text-color" data-fallback-var="--browse-verse-text-color"></li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Analysis Pane</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item"><span class="menu-control-label">Pane Background:</span><input type="color" data-custom-bg-for="Analysis"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Control/Dropdown BG:</span><input type="color" data-css-var="--analysis-control-bg" data-fallback-var="--button-bg"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Control/Dropdown Text:</span><input type="color" data-css-var="--analysis-control-text" data-fallback-var="--button-text"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Inflected Text:</span><input type="color" data-css-var="--analysis-inflected-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Lemma Text:</span><input type="color" data-css-var="--analysis-lemma-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Strong's Text:</span><input type="color" data-css-var="--analysis-strongs-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Title:</span><input type="color" data-css-var="--analysis-strongs-title-color" data-fallback-var="--header-text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Definition Text:</span><input type="color" data-css-var="--analysis-definition-color" data-fallback-var="--text-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Parsing Text:</span><input type="color" data-css-var="--analysis-parsing-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Stem:</span><input type="color" data-css-var="--analysis-active-stem-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Hyperlink Text:</span><input type="color" data-css-var="--hyperlink-color"></li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Tooltip</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item"><span class="menu-control-label">Background:</span><input type="color" data-css-var="--tooltip-bg-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Border:</span><input type="color" data-css-var="--tooltip-border-color"></li>
                                        <li class="menu-control-item">
                                            <span class="menu-control-label">Border Glow:</span>
                                            <label><input type="checkbox" id="toggleTooltipGlow"></label>
                                        </li>
                                        <li class="menu-divider"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Inflected Text:</span><input type="color" data-css-var="--tooltip-inflected-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Lemma Text:</span><input type="color" data-css-var="--tooltip-lemma-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Definition Text:</span><input type="color" data-css-var="--tooltip-definition-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Parsing Text:</span><input type="color" data-css-var="--tooltip-parsing-color"></li>
                                    </ul>
                                </li>
                                <li class="submenu-container">
                                    <span class="submenu-title">Group Dots</span>
                                    <ul class="submenu-content">
                                        <li class="menu-control-item"><span class="menu-control-label">Group 1:</span><input type="color" data-css-var="--sync-group-1-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Group 2:</span><input type="color" data-css-var="--sync-group-2-color"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Group 3:</span><input type="color" data-css-var="--sync-group-3-color"></li>
                                        <li class="menu-divider"></li>
                                        <li class="menu-control-item"><span class="menu-control-label">Inactive Ring:</span><input type="color" data-css-var="--sync-dot-ring-color"></li>
                                    </ul>
                                </li>
                                <li class="menu-divider"></li>
                                <li id="resetCustomColorsBtn">Reset All Customizations</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="dropdown-menu">
                    <span class="dropdown-menu-title" id="helpMenu">Help</span>
                    <ul class="dropdown-content" id="helpDropdown">
                        <li id="helpMenuItem">Help / User Guide</li>
                        <li class="menu-divider"></li>
                        <li id="aboutTextMenuItem">About the Text</li>
                    </ul>
                </div>
            </div>
            <div class="menu-group-center">
                <div class="app-title-container">λογος373 Bible Analysis</div>
            </div>
            <div class="menu-group-right">
                <button id="equalizePanesBtn" class="header-action-btn" title="Auto Resize">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                        <path d="M4 10h6v4H4v-4zm0-6h6v4H4V4zm0 12h6v4H4v-4zM10 4h4v16h-4V4zm6 0h4v4h-4V4zm0 6h4v4h-4v-4zm0 6h4v4h-4v-4z"></path>
                    </svg>
                </button>
                <form action="https://www.paypal.com/donate" method="post" target="_blank">
                    <input type="hidden" name="hosted_button_id" value="G9BQN3B2DCYHC" />
                    <input type="image" src="pictures/donatepaypal.png" name="submit" width="86" height="24" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" style="border: 0;" />
                    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
                </form>
            </div>
        </nav>
    </header>

<!-- ################## Section Break: Main Content Container ###################### -->
    <!-- AI-MOD: Add the main content wrapper for mobile panel management -->
    <div class="mobile-main-content-wrapper">
        <main id="pane-container" class="pane-container">
            <!-- Panes and dividers will be dynamically inserted here by JavaScript -->
        </main>
        <!-- NEW: Container for the Study Mode grid view -->
        <main id="study-mode-container" class="study-mode-container hidden">
            <div class="study-mode-toolbar">
                <input type="text" id="study-title-input" placeholder="Enter Study Title...">
                <button id="new-study-btn" title="Start a new, empty study">New</button>
                <button id="save-study-btn" title="Save current study to browser storage">Save</button>
                <button id="open-study-btn" title="Open a previously saved study">Open</button>
                <button id="export-study-btn" title="Export the current study grid to a file">Export Study</button>
                <button id="import-study-btn" title="Import a study grid from a file">Import Study</button>
                <button id="copy-for-excel-btn" title="Copy grid contents to clipboard for pasting into Excel">Copy for Excel</button>
                <div class="study-mode-grid-controls">
                    <button id="add-row-btn" title="Add a new row to the bottom">Add Row</button>
                    <button id="remove-row-btn" title="Remove the last row">Remove Row</button>
                    <button id="add-col-btn" title="Add a new column to the right">Add Column</button>
                    <button id="remove-col-btn" title="Remove the last column">Remove Column</button>
                    <button id="study-font-decrease-btn" class="study-font-btn" title="Decrease font size">A-</button>
                    <button id="study-font-increase-btn" class="study-font-btn" title="Increase font size">A+</button>
                </div>
            </div>
            <div id="study-grid" class="study-grid">
                <!-- Grid cells will be dynamically inserted here by JavaScript -->
            </div>
        </main>
    </div> <!-- AI-MOD: This closes the .mobile-main-content-wrapper -->
<!-- ################## End of Section Break: Main Content Container ###################### -->

    <!-- AI-MOD: Rebuilt the mobile settings panel to include ALL desktop functionality -->
    <div id="mobile-settings-panel" class="mobile-flyout-panel">
        <div class="mobile-settings-header">
            <h2>Settings</h2>
            <button id="mobile-settings-close-btn" class="mobile-settings-close-btn" aria-label="Close settings menu">×</button>
        </div>
        <div class="mobile-settings-content">
            <!-- File Menu -->
            <div class="mobile-menu-section">
                <button class="mobile-menu-collapsible">File</button>
                <div class="mobile-menu-collapsible-content">
                    <ul class="mobile-menu-list">
                        <li id="mobile_loadUserDefaultsItem">Load User Defaults</li>
                        <li id="mobile_saveUserDefaultsItem">Save User Defaults</li>
                        <li class="mobile-menu-divider"></li>
                        <li id="mobile_resetToFactoryItem">Reset to Defaults</li>
                        <li class="mobile-menu-divider"></li>
                        <li id="mobile_importLayoutItem">Import Layout from File...</li>
                        <li id="mobile_exportLayoutItem">Export Layout to File...</li>
                        <li class="mobile-menu-divider"></li>
                        <li id="mobile_loadCustomBibleBtn">Load Bible from File...</li>
                    </ul>
                </div>
            </div>
            <!-- View Menu -->
            <div class="mobile-menu-section">
                <button class="mobile-menu-collapsible">View</button>
                <div class="mobile-menu-collapsible-content">
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Global Sizing</h4>
                        <div class="mobile-settings-item"><span>Controls</span><div class="mobile-stepper"><button data-type="controls" data-dir="-1">-</button><button data-type="controls" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Control Groups</span><div class="mobile-stepper"><button data-type="controlGroup" data-dir="-1">-</button><button data-type="controlGroup" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Toolbar</span><div class="mobile-stepper"><button data-type="toolbar" data-dir="-1">-</button><button data-type="toolbar" data-dir="1">+</button></div></div>
                    </div>
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Search Pane</h4>
                        <div class="mobile-settings-item">
                            <span>Font</span>
                            <select class="mobile-select mobile-font-select" data-pane-type="Search">
                                <option value='"Times New Roman", Times, serif'>Times New Roman</option>
                                <option value='Georgia, serif'>Georgia</option>
                                <option value='Garamond, serif'>Garamond</option>
                                <option value='Arial, Helvetica, sans-serif'>Arial</option>
                                <option value='Verdana, sans-serif'>Verdana</option>
                                <option value='Tahoma, sans-serif'>Tahoma</option>
                                <option value='"Trebuchet MS", sans-serif'>Trebuchet MS</option>
                            </select>
                        </div>
                    </div>
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Browse Pane</h4>
                        <div class="mobile-settings-item">
                            <span>Scroll</span>
                            <select id="mobile_browse_scroll_mode" class="mobile-select">
                                <option value="snap">Snap</option>
                                <option value="smooth">Smooth</option>
                            </select>
                        </div>
                        <div class="mobile-settings-item"><span>Tooltip Size</span><div class="mobile-stepper"><button data-type="tooltip" data-dir="-1">-</button><button data-type="tooltip" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Tooltip Headword</span><div class="mobile-stepper"><button data-type="tooltipHeadword" data-dir="-1">-</button><button data-type="tooltipHeadword" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Tooltip Definition</span><div class="mobile-stepper"><button data-type="tooltipDefinition" data-dir="-1">-</button><button data-type="tooltipDefinition" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Tooltip Parsing</span><div class="mobile-stepper"><button data-type="tooltipParsing" data-dir="-1">-</button><button data-type="tooltipParsing" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Hebrew Def. Snippets</span><div class="mobile-stepper"><button data-type="hebrewTooltipDefinitionSnippets" data-dir="-1">-</button><span class="mobile-stepper-display" data-type="hebrewTooltipDefinitionSnippets">5</span><button data-type="hebrewTooltipDefinitionSnippets" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item">
                            <span>Font</span>
                            <select class="mobile-select mobile-font-select" data-pane-type="Browse">
                                <option value='"Times New Roman", Times, serif'>Times New Roman</option>
                                <option value='Georgia, serif'>Georgia</option>
                                <option value='Garamond, serif'>Garamond</option>
                                <option value='Arial, Helvetica, sans-serif'>Arial</option>
                                <option value='Verdana, sans-serif'>Verdana</option>
                                <option value='Tahoma, sans-serif'>Tahoma</option>
                                <option value='"Trebuchet MS", sans-serif'>Trebuchet MS</option>
                            </select>
                        </div>
                    </div>
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Analysis Pane</h4>
                        <div class="mobile-settings-item"><span>Headword (Global)</span><div class="mobile-stepper"><button data-type="analysisHeadwordGlobal" data-dir="-1">-</button><button data-type="analysisHeadwordGlobal" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Lexicon (Global)</span><div class="mobile-stepper"><button data-type="analysisLexiconGlobal" data-dir="-1">-</button><button data-type="analysisLexiconGlobal" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Active Stem</span><div class="mobile-stepper"><button data-type="analysisStem" data-dir="-1">-</button><button data-type="analysisStem" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item"><span>Hyperlink</span><div class="mobile-stepper"><button data-type="analysisHyperlink" data-dir="-1">-</button><button data-type="analysisHyperlink" data-dir="1">+</button></div></div>
                        <div class="mobile-settings-item">
                            <span>Font</span>
                            <select class="mobile-select mobile-font-select" data-pane-type="Analysis">
                                <option value='"Times New Roman", Times, serif'>Times New Roman</option>
                                <option value='Georgia, serif'>Georgia</option>
                                <option value='Garamond, serif'>Garamond</option>
                                <option value='Arial, Helvetica, sans-serif'>Arial</option>
                                <option value='Verdana, sans-serif'>Verdana</option>
                                <option value='Tahoma, sans-serif'>Tahoma</option>
                                <option value='"Trebuchet MS", sans-serif'>Trebuchet MS</option>
                            </select>
                        </div>
                    </div>
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Preferences</h4>
                        <div class="mobile-settings-item"><span>Show Inflected</span><label class="mobile-switch"><input type="checkbox" id="mobile_toggleTooltipShowInflected"><span class="mobile-slider"></span></label></div>
                        <div class="mobile-settings-item"><span>Show Lemma</span><label class="mobile-switch"><input type="checkbox" id="mobile_toggleTooltipShowLemma"><span class="mobile-slider"></span></label></div>
                        <div class="mobile-settings-item"><span>Analysis Tooltip Version</span><select id="mobile_analysisTooltipVersionSelect" class="mobile-select"></select></div>
                    </div>
                </div>
            </div>
            <!-- Window Menu -->
            <div class="mobile-menu-section">
                <button class="mobile-menu-collapsible">Window</button>
                <div class="mobile-menu-collapsible-content">
                    <ul class="mobile-menu-list">
                        <li id="mobile_openSearchPane">Open Search Panel</li>
                        <li id="mobile_openAnalysisPane">Open Analysis Panel</li>
                    </ul>
                </div>
            </div>
            <!-- Colors Menu -->
            <div class="mobile-menu-section">
                <button class="mobile-menu-collapsible">Colors</button>
                <div class="mobile-menu-collapsible-content">
                    <div class="mobile-settings-group">
                        <div class="mobile-settings-item"><span>Theme Preset</span><select id="mobile_theme_select" class="mobile-select"></select></div>
                    </div>
                    <div class="mobile-settings-group">
                        <h4 class="mobile-settings-subheader">Customize Colors</h4>
                        <div id="mobile_color_pickers_container">
                            <!-- Global -->
                            <h5 class="mobile-settings-subheader" style="margin-top: 15px; font-size: 0.7em;">Global</h5>
                            <div class="mobile-color-picker-item"><span>Main Header BG</span><input type="color" data-css-var="--app-main-header-bg"></div>
                            <div class="mobile-color-picker-item"><span>Pane Header BG</span><input type="color" data-css-var="--header-bg"></div>
                            <div class="mobile-color-picker-item"><span>Highlight BG</span><input type="color" data-css-var="--highlight-bg"></div>
                            <div class="mobile-color-picker-item"><span>Hyperlink Text</span><input type="color" data-css-var="--hyperlink-color"></div>
                            
                            <!-- Tooltip -->
                            <h5 class="mobile-settings-subheader" style="margin-top: 15px; font-size: 0.7em;">Tooltip</h5>
                            <div class="mobile-color-picker-item"><span>Tooltip BG</span><input type="color" data-css-var="--tooltip-bg-color"></div>
                            <div class="mobile-color-picker-item"><span>Tooltip Border</span><input type="color" data-css-var="--tooltip-border-color"></div>
                            <div class="mobile-color-picker-item"><span>Tooltip Inflected</span><input type="color" data-css-var="--tooltip-inflected-color"></div>
                            <div class="mobile-color-picker-item"><span>Tooltip Lemma</span><input type="color" data-css-var="--tooltip-lemma-color"></div>

                            <!-- Browse Pane -->
                            <h5 class="mobile-settings-subheader" style="margin-top: 15px; font-size: 0.7em;">Browse Pane</h5>
                            <div class="mobile-color-picker-item"><span>Pane Background</span><input type="color" data-custom-bg-for="Browse"></div>
                            <div class="mobile-color-picker-item"><span>Control/Dropdown BG</span><input type="color" data-css-var="--browse-control-bg"></div>
                            <div class="mobile-color-picker-item"><span>Control/Dropdown Text</span><input type="color" data-css-var="--browse-control-text"></div>
                            <div class="mobile-color-picker-item"><span>Reference Text</span><input type="color" data-css-var="--browse-ref-text-color"></div>
                            <div class="mobile-color-picker-item"><span>Version Abbr</span><input type="color" data-css-var="--browse-version-abbr-color"></div>
                            <div class="mobile-color-picker-item"><span>Verse Text</span><input type="color" data-css-var="--browse-verse-text-color"></div>
                            <div class="mobile-color-picker-item"><span>Strongs Number</span><input type="color" data-css-var="--browse-strongs-color"></div>
                            <div class="mobile-color-picker-item"><span>Italicized Text</span><input type="color" data-css-var="--browse-italics-color"></div>
                            <div class="mobile-color-picker-item"><span>Active Verse BG</span><input type="color" data-css-var="--browse-active-verse-bg"></div>
                            <div class="mobile-color-picker-item"><span>Active Ref Text</span><input type="color" data-css-var="--browse-active-ref-text-color"></div>
                            <div class="mobile-color-picker-item"><span>Active Verse Text</span><input type="color" data-css-var="--browse-active-verse-text-color"></div>
                            
                            <!-- Search Pane -->
                            <h5 class="mobile-settings-subheader" style="margin-top: 15px; font-size: 0.7em;">Search Pane</h5>
                            <div class="mobile-color-picker-item"><span>Pane Background</span><input type="color" data-custom-bg-for="Search"></div>
                            <div class="mobile-color-picker-item"><span>Input/Dropdown BG</span><input type="color" data-css-var="--search-input-bg"></div>
                            <div class="mobile-color-picker-item"><span>Input/Dropdown Text</span><input type="color" data-css-var="--search-input-text"></div>
                            <div class="mobile-color-picker-item"><span>Highlight Term BG</span><input type="color" data-css-var="--search-term-highlight-bg"></div>
                            <div class="mobile-color-picker-item"><span>Highlight Term Text</span><input type="color" data-css-var="--search-term-highlight-text"></div>

                            <!-- Analysis Pane -->
                            <h5 class="mobile-settings-subheader" style="margin-top: 15px; font-size: 0.7em;">Analysis Pane</h5>
                            <div class="mobile-color-picker-item"><span>Pane Background</span><input type="color" data-custom-bg-for="Analysis"></div>
                            <div class="mobile-color-picker-item"><span>Inflected Text</span><input type="color" data-css-var="--analysis-inflected-color"></div>
                            <div class="mobile-color-picker-item"><span>Lemma Text</span><input type="color" data-css-var="--analysis-lemma-color"></div>
                            <div class="mobile-color-picker-item"><span>Parsing Text</span><input type="color" data-css-var="--analysis-parsing-color"></div>

                        </div>
                        <button id="mobile_resetCustomColorsBtn" class="mobile-button">Reset All Customizations</button>
                    </div>
                </div>
            </div>
            <!-- Help Menu -->
            <div class="mobile-menu-section">
                <button class="mobile-menu-collapsible">Help</button>
                <div class="mobile-menu-collapsible-content">
                    <ul class="mobile-menu-list">
                        <li id="mobile_helpMenuItem">Help / User Guide</li>
                        <li class="mobile-menu-divider"></li>
                        <li id="mobile_aboutTextMenuItem">About the Text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="helpModal" class="help-modal hidden" role="dialog" aria-labelledby="helpModalTitle" aria-modal="true">
        <div class="help-modal-content">
            <div class="help-modal-header">
                <h2 id="helpModalTitle">Help / User Guide</h2>
                <div class="help-modal-header-actions">
                    <form action="https://www.paypal.com/donate" method="post" target="_blank">
                        <input type="hidden" name="hosted_button_id" value="G9BQN3B2DCYHC" />
                        <input type="image" src="pictures/donatepaypal.png" name="submit" width="86" height="24" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" style="border: 0;" />
                        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
                    </form>
                    <button id="helpModalCloseBtn" class="help-modal-close-btn" aria-label="Close help guide">×</button>
                </div>
            </div>
            <div id="helpModalBody" class="help-modal-body">
                <!-- Content from help.html will be loaded here by JS -->
            </div>
        </div>
    </div>

    <div id="aboutTextModal" class="about-text-modal hidden" role="dialog" aria-labelledby="aboutTextModalTitle" aria-modal="true">
        <div class="about-text-modal-content">
            <div class="about-text-modal-header">
                <h2 id="aboutTextModalTitle">About the Text</h2>
                <button id="aboutTextModalCloseBtn" class="about-text-modal-close-btn" aria-label="Close about text modal">×</button>
            </div>
            <div id="aboutTextModalBody" class="about-text-modal-body">
                <!-- Content will be populated by JS -->
            </div>
        </div>
    </div>

    <div id="theme-gallery-popup" class="theme-gallery-popup hidden"></div>
    <div id="search-result-context-menu" class="custom-context-menu hidden"></div>
    <div id="word-context-menu" class="custom-context-menu hidden"></div>
    <div id="toast-notification" class="toast-notification"></div>
    <div id="analysis-tooltip" class="analysis-tooltip hidden"></div>

    <!-- The main script is now loaded dynamically to include the version number -->
    <script>
        document.write(`<script type="module" src="scripts/main.js?v=${APP_VERSION}"><\/script>`);
    </script>

</body>
</html>