        </main>
        <footer class="site-footer">
          <span>Powered by Lumi Bot<br>© OokamiKunTV & Jejeee</span>
        </footer>
        <% if (softError) { %>
        <div class="toast toast-error" role="status" aria-live="polite">
          <strong>Notice</strong>
          <span><%= softError %></span>
        </div>
        <% } %>
      </div>
    </div>
    <button class="sidebar-scrim" type="button" data-sidebar-dismiss aria-label="Close navigation" aria-controls="lumi-sidebar" tabindex="-1"></button>
    <% if (user) { %>
    <% const feedbackNotice = typeof feedbackNotifications !== "undefined" ? feedbackNotifications : { total: 0, solved: 0, needs_context: 0, not_worked: 0 }; %>
    <% const feedbackOptionData = typeof feedbackOptions !== "undefined" ? feedbackOptions : {}; %>
    <button class="feedback-floating-button" type="button" data-feedback-open data-feedback-scope="page" aria-label="Send feedback">
      Feedback
      <% if (feedbackNotice && feedbackNotice.total) { %>
      <span class="feedback-floating-badge" aria-label="<%= feedbackNotice.total %> feedback update(s)"><%= feedbackNotice.total %></span>
      <% } %>
    </button>
    <div
      class="modal-backdrop feedback-modal-backdrop"
      data-feedback-modal
      data-dialog-static="true"
      aria-hidden="true"
      data-feedback-options="<%= JSON.stringify(feedbackOptionData || {}) %>"
    >
      <div class="modal feedback-modal" role="dialog" aria-modal="true" aria-labelledby="feedback-modal-title">
        <div class="modal-header">
          <h3 id="feedback-modal-title">Send feedback</h3>
          <button type="button" class="icon-button" data-feedback-close aria-label="Close feedback">&times;</button>
        </div>
        <form class="form-grid" data-feedback-form>
          <input type="hidden" name="target_metadata" data-feedback-target-metadata />
          <input type="hidden" name="current_url" data-feedback-current-url />
          <input type="hidden" name="page_title" data-feedback-page-title />
          <input type="hidden" name="diagnostics" data-feedback-diagnostics />
          <div class="field full">
            <label>Short summary</label>
            <input name="summary" maxlength="140" required placeholder="Example: Save button does nothing" />
          </div>
          <div class="field full feedback-similar" data-feedback-similar hidden>
            <strong>Possibly related feedback</strong>
            <p class="hint">If one matches your issue, mark that it affects you too. You may still submit when your report is distinct or adds useful context.</p>
            <div class="feedback-similar-list" data-feedback-similar-list></div>
            <label class="checkbox-inline" data-feedback-similar-confirm>
              <input type="checkbox" data-feedback-similar-confirm-input />
              <span>I reviewed these reports. Mine is distinct or adds useful context.</span>
            </label>
          </div>
          <div class="field">
            <label>Category</label>
            <select name="category" data-feedback-category required></select>
          </div>
          <div class="field">
            <label>Severity</label>
            <select name="severity" data-feedback-severity required></select>
          </div>
          <div class="field">
            <label>Feedback is about</label>
            <select name="scope_type" data-feedback-scope-type required></select>
          </div>
          <div class="field">
            <label>Detected target</label>
            <input name="scope_label" data-feedback-scope-label readonly />
            <span class="hint">Generated from the selected feedback scope and current page or clicked element.</span>
          </div>
          <div class="field full feedback-screenshot-field" data-feedback-screenshot-field>
            <label>Screenshot <span class="hint">optional</span></label>
            <div class="feedback-screenshot-guide">
              <strong>Want to include a screenshot?</strong>
              <p><span data-feedback-screenshot-keybind>Use your operating system screenshot shortcut</span>, then return here and choose <strong>Paste screenshot</strong>. This form stays open while you take the screenshot.</p>
              <span class="hint">Only attach a screenshot if you want admins to see it. Remove secrets, tokens, private messages, and sensitive fields first.</span>
            </div>
            <div class="feedback-screenshot-actions">
              <label class="button subtle" for="feedback-screenshot-file">Choose image</label>
              <input id="feedback-screenshot-file" type="file" accept="image/png,image/jpeg,image/webp" data-feedback-screenshot-file hidden />
              <button type="button" class="button subtle" data-feedback-paste-screenshot>Paste screenshot</button>
              <button type="button" class="button subtle" data-feedback-remove-screenshot hidden>Remove screenshot</button>
            </div>
            <div class="feedback-screenshot-preview" data-feedback-screenshot-preview hidden>
              <img alt="Attached feedback screenshot preview" data-feedback-screenshot-image />
              <span data-feedback-screenshot-meta></span>
            </div>
            <span class="hint" data-feedback-screenshot-status></span>
          </div>
          <div class="field full">
            <label>Description</label>
            <textarea name="description" rows="5" required placeholder="Describe one specific issue or suggestion."></textarea>
            <span class="hint">Please submit one feedback item per issue. Do not include passwords, tokens, or private messages.</span>
          </div>
          <div class="field full">
            <label>Attachments <span class="hint">optional</span></label>
            <input type="file" name="attachments" multiple accept="image/png,image/jpeg,image/webp,application/pdf,text/plain" data-feedback-attachments />
            <span class="hint">Up to three files, 8 MB each. Supported types: PNG, JPEG, WebP, PDF, and plain text. Attachments are visible only to you and admins.</span>
          </div>
          <div class="field full">
            <label>Steps to reproduce <span class="hint">optional</span></label>
            <textarea name="steps_to_reproduce" rows="3"></textarea>
          </div>
          <div class="field">
            <label>Expected behavior <span class="hint">optional</span></label>
            <textarea name="expected_behavior" rows="3"></textarea>
          </div>
          <div class="field">
            <label>Actual behavior <span class="hint">optional</span></label>
            <textarea name="actual_behavior" rows="3"></textarea>
          </div>
          <div class="field full">
            <label class="checkbox-inline">
              <input type="checkbox" data-feedback-include-browser />
              <span>Include browser and viewport details</span>
            </label>
            <span class="hint">This attaches your browser name, page size, language, URL, and page title. Field values are not collected.</span>
          </div>
          <div class="field full">
            <label class="checkbox-inline">
              <input type="checkbox" data-feedback-include-dom />
              <span>Include sanitized page structure</span>
            </label>
            <span class="hint">This attaches a limited text outline of nearby page elements. Input values, passwords, tokens, and hidden fields are not collected.</span>
          </div>
          <div class="field full feedback-submit-status" data-feedback-status aria-live="polite"></div>
          <div class="modal-actions">
            <button type="button" class="button subtle" data-feedback-close>Cancel</button>
            <button type="submit" class="button">Submit feedback</button>
            <button type="button" class="button subtle" data-feedback-reset>Reset</button>
          </div>
        </form>
      </div>
    </div>
    <% } %>
    <div class="lumi-context-menu" data-lumi-context-menu hidden role="menu" aria-label="Page actions">
      <button type="button" role="menuitem" data-context-action="back" data-context-tooltip="Go back to the page you were viewing before this one.">Back</button>
      <button type="button" role="menuitem" data-context-action="forward" data-context-tooltip="Return to the next page after going back.">Forward</button>
      <button type="button" role="menuitem" data-context-action="copy" data-context-tooltip="Copy the selected text, or copy the image you clicked when the browser allows it.">Copy</button>
      <button type="button" role="menuitem" data-context-action="cut" data-context-tooltip="Remove the selected text from this field and place it on the clipboard.">Cut</button>
      <button type="button" role="menuitem" data-context-action="paste" data-context-tooltip="Insert the current clipboard text into the active field.">Paste</button>
      <button type="button" role="menuitem" data-context-action="link" data-context-tooltip="Copy a link to this page, section, or nearby anchored element.">Link to here</button>
      <button type="button" role="menuitem" data-context-action="reload" data-context-tooltip="Reload this page while asking the browser to refresh cached files.">Hard reload</button>
      <button type="button" role="menuitem" data-context-action="feedback" data-context-tooltip="<%= user ? 'Create feedback for admins. Right-click a specific element to attach it as context.' : 'Log in to submit feedback to admins.' %>" <%= user ? "" : "data-context-auth-required=\"true\"" %>>Feedback</button>
    </div>
    <div class="modal-backdrop destructive-confirm-modal" data-destructive-modal aria-hidden="true">
      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="destructive-confirm-title">
        <div class="modal-header">
          <h3 id="destructive-confirm-title" data-destructive-title>Confirm destructive action</h3>
          <button type="button" class="icon-button" data-destructive-cancel aria-label="Cancel confirmation">&times;</button>
        </div>
        <p data-destructive-description>This action cannot be undone.</p>
        <div class="modal-actions">
          <button type="button" class="button subtle" data-destructive-cancel>Cancel</button>
          <button type="button" class="button danger" data-destructive-confirm disabled>Confirm in 3</button>
        </div>
      </div>
    </div>
    <script src="/lumi-request.js?v=<%= assetVersion %>"></script>
    <script src="/lumi-page.js?v=<%= assetVersion %>"></script>
    <script src="/navigation-builder.js?v=<%= assetVersion %>"></script>
    <script src="/command-management.js?v=<%= assetVersion %>"></script>
    <script src="/command-policies.js?v=<%= assetVersion %>"></script>
    <script src="/update-management.js?v=<%= assetVersion %>"></script>
    <script src="/lumi-dialog.js?v=<%= assetVersion %>"></script>
    <script src="/assistant-panels.js?v=<%= assetVersion %>"></script>
    <script src="/lumi-state-button.js?v=<%= assetVersion %>"></script>
    <script src="/lumi-interactions.js?v=<%= assetVersion %>"></script>
    <script src="/app.js?v=<%= assetVersion %>"></script>
    <% (typeof extraScripts !== "undefined" && Array.isArray(extraScripts) ? extraScripts : []).forEach((script) => { %>
    <script src="<%= script %>" defer></script>
    <% }) %>
  </body>
</html>
