☰

Google Search Custom Sidebar

Customizable Google Search sidebar: quick filters (lang, time, filetype, country, date), site search, Verbatim & Personalization tools.

安装此脚本？
作者推荐脚本

您可能也喜欢Google Images Tools Enhanced。

安装此脚本 
  1. // ==UserScript==
  2. // @name         Google Search Custom Sidebar
  3. // @name:zh-TW   Google 搜尋自訂側邊欄
  4. // @name:ja      Google検索カスタムサイドバー
  5. // @namespace    https://gf.qytechs.cn/en/users/1467948-stonedkhajiit
  6. // @version      0.4.1
  7. // @description  Customizable Google Search sidebar: quick filters (lang, time, filetype, country, date), site search, Verbatim & Personalization tools.
  8. // @description:zh-TW Google 搜尋自訂側邊欄：快速篩選(語言、時間、檔案類型、國家、日期)、站內搜尋、一字不差與個人化工具。
  9. // @description:ja Google検索カスタムサイドバー：高速フィルター(言語,期間,ファイル形式,国,日付)、サイト検索、完全一致検索とパーソナライズツール。
  10. // @match        https://www.google.com/search*
  11. // @include      /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?q=[^&]+(?:&.+)?$/
  12. // @exclude      /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?(?:tbm=(?:isch|shop|bks|flm|fin|lcl)|udm=(?:2|28))(?:&.+)?$/
  13. // @icon         https://www.google.com/favicon.ico
  14. // @grant        GM_addStyle
  15. // @grant        GM_getValue
  16. // @grant        GM_setValue
  17. // @grant        GM_registerMenuCommand
  18. // @grant        GM_deleteValue
  19. // @grant        GM_openInTab
  20. // @run-at       document-idle
  21. // @author       StonedKhajiit
  22. // @license      MIT
  23. // @require      https://update.gf.qytechs.cn/scripts/535624/1629293/Google%20Search%20Custom%20Sidebar%20-%20i18n.js
  24. // @require      https://update.gf.qytechs.cn/scripts/535625/1629294/Google%20Search%20Custom%20Sidebar%20-%20Styles.js
  25. // ==/UserScript==
  26.  
  27. /**
  28.  * @file Google Search Custom Sidebar
  29.  * This script injects a customizable sidebar into Google search results pages,
  30.  * offering advanced filtering options, site search capabilities, and quick-access tools.
  31.  * It is designed to be highly modular, configurable, and maintainable.
  32.  */
  33. (function() {
  34.     'use strict';
  35.  
  36.     // --- Script Constants & Configuration ---
  37.  
  38.     const SCRIPT_INTERNAL_NAME = 'GoogleSearchCustomSidebar';
  39.     const SCRIPT_VERSION = '0.4.1'; // version bumped for changes
  40.     const LOG_PREFIX = `[${SCRIPT_INTERNAL_NAME} v${SCRIPT_VERSION}]`;
  41.  
  42.     /**
  43.      * @constant {string[]} DEFAULT_SECTION_ORDER
  44.      * Defines the default display order for sections in the sidebar.
  45.      */
  46.     const DEFAULT_SECTION_ORDER = [
  47.         'sidebar-section-language', 'sidebar-section-time', 'sidebar-section-filetype',
  48.         'sidebar-section-occurrence',
  49.         'sidebar-section-country', 'sidebar-section-date-range', 'sidebar-section-site-search', 'sidebar-section-tools'
  50.     ];
  51.  
  52.     /**
  53.      * @constant {Object} defaultSettings
  54.      * Contains the default configuration for the script. This object serves as a fallback
  55.      * for any missing settings and is used when resetting the configuration.
  56.      */
  57.     const defaultSettings = {
  58.         sidebarPosition: { left: 0, top: 80 },
  59.         sectionStates: {},
  60.         theme: 'system',
  61.         hoverMode: false,
  62.         idleOpacity: 0.8,
  63.         sidebarWidth: 135,
  64.         sidebarHeight: 85,
  65.         fontSize: 12.5,
  66.         headerIconSize: 16,
  67.         verticalSpacingMultiplier: 0.5,
  68.         interfaceLanguage: 'auto',
  69.         customColors: {
  70.             bgColor: '',
  71.             textColor: '',
  72.             linkColor: '',
  73.             selectedColor: '',
  74.             inputTextColor: '',
  75.             borderColor: '',
  76.             dividerColor: '',
  77.             btnBgColor: '',
  78.             btnHoverBgColor: '',
  79.             activeBgColor: '',
  80.             activeTextColor: '',
  81.             activeBorderColor: '',
  82.             headerIconColor: ''
  83.         },
  84.         visibleSections: {
  85.             'sidebar-section-language': true, 'sidebar-section-time': true, 'sidebar-section-filetype': true,
  86.             'sidebar-section-occurrence': true,
  87.             'sidebar-section-country': true, 'sidebar-section-date-range': true,
  88.             'sidebar-section-site-search': true, 'sidebar-section-tools': true
  89.         },
  90.         sectionDisplayMode: 'remember',
  91.         accordionMode: false,
  92.         resetButtonLocation: 'topBlock',
  93.         verbatimButtonLocation: 'header',
  94.         advancedSearchLinkLocation: 'header',
  95.         personalizationButtonLocation: 'tools',
  96.         googleScholarShortcutLocation: 'tools',
  97.         googleTrendsShortcutLocation: 'tools',
  98.         googleDatasetSearchShortcutLocation: 'tools',
  99.         countryDisplayMode: 'iconAndText',
  100.         scrollbarPosition: 'right',
  101.         showResultStats: true,
  102.         customLanguages: [],
  103.         customTimeRanges: [],
  104.         customFiletypes: [
  105.             { text: "📄Documents", value: "pdf OR docx OR doc OR odt OR rtf OR txt" },
  106.             { text: "💹Spreadsheets", value: "xlsx OR xls OR ods OR csv" },
  107.             { text: "📊Presentations", value: "pptx OR ppt OR odp OR key" },
  108.         ],
  109.         customCountries: [],
  110.         displayLanguages: [],
  111.         displayCountries: [],
  112.         favoriteSites: [
  113.             // == SINGLE SITES: GENERAL KNOWLEDGE & REFERENCE ==
  114.             { text: 'Wikipedia (EN)', url: 'en.wikipedia.org' },
  115.             { text: 'Wiktionary', url: 'wiktionary.org' },
  116.             { text: 'Internet Archive', url: 'archive.org' },
  117.  
  118.             // == SINGLE SITES: DEVELOPER & TECH ==
  119.             { text: 'GitHub', url: 'github.com' },
  120.             { text: 'GitLab', url: 'gitlab.com' },
  121.             { text: 'Stack Overflow', url: 'stackoverflow.com' },
  122.             { text: 'Hacker News', url: 'news.ycombinator.com' },
  123.             { text: 'Greasy Fork镜像', url: 'gf.qytechs.cn' },
  124.  
  125.             // == SINGLE SITES: SOCIAL, FORUMS & COMMUNITIES ==
  126.             { text: 'Reddit', url: 'reddit.com' },
  127.             { text: 'X', url: 'x.com' },
  128.             { text: 'Mastodon', url: 'mastodon.social' },
  129.             { text: 'Bluesky', url: 'bsky.app' },
  130.             { text: 'Lemmy', url: 'lemmy.world' },
  131.  
  132.             // == SINGLE SITES: ENTERTAINMENT, ARTS & HOBBIES ==
  133.             { text: 'IMDb', url: 'imdb.com' },
  134.             { text: 'TMDb', url: 'themoviedb.org' },
  135.             { text: 'Letterboxd', url: 'letterboxd.com' },
  136.             { text: 'Metacritic', url: 'metacritic.com' },
  137.             { text: 'OpenCritic', url: 'opencritic.com' },
  138.             { text: 'Steam', url: 'store.steampowered.com' },
  139.             { text: 'Bandcamp', url: 'bandcamp.com' },
  140.             { text: 'Last.fm', url: 'last.fm' },
  141.  
  142.             // == COMBINED SITE GROUPS ==
  143.             {
  144.                 text: '💬Social',
  145.                 url: 'x.com OR facebook.com OR instagram.com OR threads.net OR bluesky.social OR mastodon.social OR reddit.com OR tumblr.com OR linkedin.com OR lemmy.world'
  146.             },
  147.             {
  148.                 text: '📦Repositories',
  149.                 url: 'github.com OR gitlab.com OR bitbucket.org OR codeberg.org OR sourceforge.net'
  150.             },
  151.             {
  152.                 text: '🎓Academics',
  153.                 url: 'scholar.google.com OR arxiv.org OR researchgate.net OR jstor.org OR academia.edu OR pubmed.ncbi.nlm.nih.gov OR semanticscholar.org OR core.ac.uk'
  154.             },
  155.             {
  156.                 text: '📰News',
  157.                 url: 'bbc.com/news OR reuters.com OR apnews.com OR nytimes.com OR theguardian.com OR cnn.com OR wsj.com'
  158.             },
  159.             {
  160.                 text: '🎨Creative',
  161.                 url: 'behance.net OR dribbble.com OR artstation.com OR deviantart.com'
  162.             }
  163.         ],
  164.         enableSiteSearchCheckboxMode: true,
  165.         showFaviconsForSiteSearch: true,
  166.         enableFiletypeCheckboxMode: true,
  167.         sidebarCollapsed: false,
  168.         draggableHandleEnabled: true,
  169.         enabledPredefinedOptions: {
  170.             language: ['lang_en'],
  171.             country: ['countryUS'],
  172.             time: ['d', 'w', 'm', 'y', 'h'],
  173.             filetype: ['pdf', 'docx', 'doc', 'pptx', 'ppt', 'xlsx', 'xls', 'txt']
  174.         },
  175.         sidebarSectionOrder: [...DEFAULT_SECTION_ORDER],
  176.         hideGoogleLogoWhenExpanded: false,
  177.     };
  178.  
  179.     /**
  180.      * @constant {Object<string, string>} IDS
  181.      * A centralized collection of all DOM element IDs used throughout the script.
  182.      * Uses a 'gscs-' prefix and a BEM-like naming convention to prevent conflicts with the host page.
  183.      */
  184.     const IDS = {
  185.         SIDEBAR: 'gscs-sidebar',
  186.         SETTINGS_OVERLAY: 'gscs-settings-overlay',
  187.         SETTINGS_WINDOW: 'gscs-settings-window',
  188.         COLLAPSE_BUTTON: 'gscs-sidebar-collapse-button',
  189.         SETTINGS_BUTTON: 'gscs-sidebar-settings-button',
  190.         TOOL_RESET_BUTTON: 'gscs-tool-reset-button',
  191.         TOOL_VERBATIM: 'gscs-tool-verbatim',
  192.         TOOL_PERSONALIZE: 'gscs-tool-personalize-search',
  193.         TOOL_GOOGLE_SCHOLAR: 'gscs-tool-google-scholar',
  194.         TOOL_GOOGLE_TRENDS: 'gscs-tool-google-trends',
  195.         TOOL_GOOGLE_DATASET_SEARCH: 'gscs-tool-google-dataset-search',
  196.         APPLY_SELECTED_SITES_BUTTON: 'gscs-apply-selected-sites-button',
  197.         APPLY_SELECTED_FILETYPES_BUTTON: 'gscs-apply-selected-filetypes-button',
  198.         FIXED_TOP_BUTTONS: 'gscs-sidebar-fixed-top-buttons',
  199.         SETTINGS_MESSAGE_BAR: 'gscs-settings-message-bar',
  200.         SETTING_WIDTH: 'gscs-setting-sidebar-width',
  201.         SETTING_HEIGHT: 'gscs-setting-sidebar-height',
  202.         SETTING_FONT_SIZE: 'gscs-setting-font-size',
  203.         SETTING_HEADER_ICON_SIZE: 'gscs-setting-header-icon-size',
  204.         SETTING_VERTICAL_SPACING: 'gscs-setting-vertical-spacing',
  205.         SETTING_INTERFACE_LANGUAGE: 'gscs-setting-interface-language',
  206.         SETTING_SECTION_MODE: 'gscs-setting-section-display-mode',
  207.         SETTING_ACCORDION: 'gscs-setting-accordion-mode',
  208.         SETTING_DRAGGABLE: 'gscs-setting-draggable-handle',
  209.         SETTING_RESET_LOCATION: 'gscs-setting-reset-button-location',
  210.         SETTING_VERBATIM_LOCATION: 'gscs-setting-verbatim-button-location',
  211.         SETTING_ADV_SEARCH_LOCATION: 'gscs-setting-adv-search-link-location',
  212.         SETTING_PERSONALIZE_LOCATION: 'gscs-setting-personalize-button-location',
  213.         SETTING_SCHOLAR_LOCATION: 'gscs-setting-scholar-shortcut-location',
  214.         SETTING_TRENDS_LOCATION: 'gscs-setting-trends-shortcut-location',
  215.         SETTING_DATASET_SEARCH_LOCATION: 'gscs-setting-dataset-search-shortcut-location',
  216.         SETTING_SITE_SEARCH_CHECKBOX_MODE: 'gscs-setting-site-search-checkbox-mode',
  217.         SETTING_SHOW_FAVICONS: 'gscs-setting-show-favicons',
  218.         SETTING_FILETYPE_SEARCH_CHECKBOX_MODE: 'gscs-setting-filetype-search-checkbox-mode',
  219.         SETTING_COUNTRY_DISPLAY_MODE: 'gscs-setting-country-display-mode',
  220.         SETTING_THEME: 'gscs-setting-theme',
  221.         SETTING_HOVER: 'gscs-setting-hover-mode',
  222.         SETTING_OPACITY: 'gscs-setting-idle-opacity',
  223.         SETTING_HIDE_GOOGLE_LOGO: 'gscs-setting-hide-google-logo',
  224.         SETTING_SCROLLBAR_POSITION: 'gscs-setting-scrollbar-position',
  225.         SETTING_SHOW_RESULT_STATS: 'gscs-setting-show-result-stats',
  226.         CUSTOM_COLORS_CONTAINER: 'gscs-custom-colors-container',
  227.         SETTING_COLOR_BG_COLOR: 'gscs-setting-color-bg-color',
  228.         SETTING_COLOR_TEXT_COLOR: 'gscs-setting-color-text-color',
  229.         SETTING_COLOR_LINK_COLOR: 'gscs-setting-color-link-color',
  230.         SETTING_COLOR_SELECTED_COLOR: 'gscs-setting-color-selected-color',
  231.         SETTING_COLOR_INPUT_TEXT_COLOR: 'gscs-setting-color-input-text-color',
  232.         SETTING_COLOR_BORDER_COLOR: 'gscs-setting-color-border-color',
  233.         SETTING_COLOR_DIVIDER_COLOR: 'gscs-setting-color-divider-color',
  234.         SETTING_COLOR_BTN_BG_COLOR: 'gscs-setting-color-btn-bg-color',
  235.         SETTING_COLOR_BTN_HOVER_BG_COLOR: 'gscs-setting-color-btn-hover-bg-color',
  236.         SETTING_COLOR_ACTIVE_BG_COLOR: 'gscs-setting-color-active-bg-color',
  237.         SETTING_COLOR_ACTIVE_TEXT_COLOR: 'gscs-setting-color-active-text-color',
  238.         SETTING_COLOR_ACTIVE_BORDER_COLOR: 'gscs-setting-color-active-border-color',
  239.         SETTING_COLOR_HEADER_ICON_COLOR: 'gscs-setting-color-header-icon-color',
  240.         RESET_CUSTOM_COLORS_BTN: 'gscs-reset-custom-colors-btn',
  241.         TAB_PANE_GENERAL: 'gscs-tab-pane-general',
  242.         TAB_PANE_APPEARANCE: 'gscs-tab-pane-appearance',
  243.         TAB_PANE_FEATURES: 'gscs-tab-pane-features',
  244.         TAB_PANE_CUSTOM: 'gscs-tab-pane-custom',
  245.         SITES_LIST: 'gscs-custom-sites-list',
  246.         LANG_LIST: 'gscs-custom-languages-list',
  247.         TIME_LIST: 'gscs-custom-time-ranges-list',
  248.         FT_LIST: 'gscs-custom-filetypes-list',
  249.         COUNTRIES_LIST: 'gscs-custom-countries-list',
  250.         NEW_SITE_NAME: 'gscs-new-site-name',
  251.         NEW_SITE_URL: 'gscs-new-site-url',
  252.         ADD_SITE_BTN: 'gscs-add-site-button',
  253.         NEW_LANG_TEXT: 'gscs-new-lang-text',
  254.         NEW_LANG_VALUE: 'gscs-new-lang-value',
  255.         ADD_LANG_BTN: 'gscs-add-lang-button',
  256.         NEW_TIME_TEXT: 'gscs-new-timerange-text',
  257.         NEW_TIME_VALUE: 'gscs-new-timerange-value',
  258.         ADD_TIME_BTN: 'gscs-add-timerange-button',
  259.         NEW_FT_TEXT: 'gscs-new-ft-text',
  260.         NEW_FT_VALUE: 'gscs-new-ft-value',
  261.         ADD_FT_BTN: 'gscs-add-ft-button',
  262.         NEW_COUNTRY_TEXT: 'gscs-new-country-text',
  263.         NEW_COUNTRY_VALUE: 'gscs-new-country-value',
  264.         ADD_COUNTRY_BTN: 'gscs-add-country-button',
  265.         DATE_MIN: 'gscs-date-min',
  266.         DATE_MAX: 'gscs-date-max',
  267.         DATE_RANGE_ERROR_MSG: 'gscs-date-range-error-msg',
  268.         SIDEBAR_SECTION_ORDER_LIST: 'gscs-sidebar-section-order-list',
  269.         NOTIFICATION_CONTAINER: 'gscs-notification-container',
  270.         MODAL_ADD_NEW_OPTION_BTN: 'gscs-modal-add-new-option-btn',
  271.         MODAL_PREDEFINED_CHOOSER_CONTAINER: 'gscs-modal-predefined-chooser-container',
  272.         MODAL_PREDEFINED_CHOOSER_LIST: 'gscs-modal-predefined-chooser-list',
  273.         MODAL_PREDEFINED_CHOOSER_ADD_BTN: 'gscs-modal-predefined-chooser-add-btn',
  274.         MODAL_PREDEFINED_CHOOSER_CANCEL_BTN: 'gscs-modal-predefined-chooser-cancel-btn',
  275.         CLEAR_SITE_SEARCH_OPTION: 'gscs-clear-site-search-option',
  276.         CLEAR_FILETYPE_SEARCH_OPTION: 'gscs-clear-filetype-search-option',
  277.         RESULT_STATS_CONTAINER: 'gscs-result-stats-container'
  278.     };
  279.  
  280.     /**
  281.      * @constant {Object[]} COLOR_MAPPINGS
  282.      * Maps settings UI color pickers to their corresponding CSS custom properties.
  283.      * Each object defines the DOM element ID of the color picker, the key in the settings object,
  284.      * and an array of CSS variables it controls.
  285.      */
  286.     const COLOR_MAPPINGS = [
  287.         { id: IDS.SETTING_COLOR_BG_COLOR,           key: 'bgColor',         cssVars: ['--sidebar-bg-color'] },
  288.         { id: IDS.SETTING_COLOR_TEXT_COLOR,         key: 'textColor',       cssVars: ['--sidebar-text-color', '--sidebar-tool-btn-hover-text'] },
  289.         { id: IDS.SETTING_COLOR_LINK_COLOR,         key: 'linkColor',       cssVars: ['--sidebar-link-color', '--sidebar-link-hover-color', '--sidebar-header-btn-hover-color'] },
  290.         { id: IDS.SETTING_COLOR_SELECTED_COLOR,     key: 'selectedColor',   cssVars: ['--sidebar-selected-color'] },
  291.         { id: IDS.SETTING_COLOR_INPUT_TEXT_COLOR,   key: 'inputTextColor',  cssVars: ['--sidebar-input-text'] },
  292.         { id: IDS.SETTING_COLOR_BORDER_COLOR,       key: 'borderColor',     cssVars: ['--sidebar-border-color', '--sidebar-tool-btn-border', '--sidebar-input-border', '--sidebar-tool-btn-hover-border'] },
  293.         { id: IDS.SETTING_COLOR_DIVIDER_COLOR,      key: 'dividerColor',    cssVars: ['--sidebar-section-border-color'] },
  294.         { id: IDS.SETTING_COLOR_BTN_BG_COLOR,       key: 'btnBgColor',      cssVars: ['--sidebar-tool-btn-bg', '--sidebar-input-bg'] },
  295.         { id: IDS.SETTING_COLOR_BTN_HOVER_BG_COLOR, key: 'btnHoverBgColor', cssVars: ['--sidebar-tool-btn-hover-bg'] },
  296.         { id: IDS.SETTING_COLOR_ACTIVE_BG_COLOR,    key: 'activeBgColor',   cssVars: ['--sidebar-tool-btn-active-bg', '--sidebar-header-btn-active-bg'] },
  297.         { id: IDS.SETTING_COLOR_ACTIVE_TEXT_COLOR,  key: 'activeTextColor', cssVars: ['--sidebar-tool-btn-active-text', '--sidebar-header-btn-active-color', '--sidebar-tool-btn-text'] },
  298.         { id: IDS.SETTING_COLOR_ACTIVE_BORDER_COLOR,key: 'activeBorderColor', cssVars: ['--sidebar-tool-btn-active-border'] },
  299.         { id: IDS.SETTING_COLOR_HEADER_ICON_COLOR,  key: 'headerIconColor', cssVars: ['--sidebar-header-btn-color'] },
  300.     ];
  301.  
  302.     /**
  303.      * @constant {Object<string, string>} CSS
  304.      * A centralized collection of all CSS class names used for styling and state management.
  305.      * Follows a BEM-like convention (Block__Element--Modifier) for clarity and to prevent style conflicts.
  306.      */
  307.     const CSS = {
  308.         // State Modifiers (BEM-like)
  309.         IS_SIDEBAR_COLLAPSED: 'is-sidebar-collapsed',
  310.         IS_SECTION_COLLAPSED: 'is-section-collapsed',
  311.         IS_SELECTED: 'is-selected',
  312.         IS_ACTIVE: 'is-active',
  313.         IS_DRAGGING: 'is-dragging',
  314.         IS_DRAG_OVER: 'is-drag-over',
  315.         IS_ERROR_VISIBLE: 'is-error-visible',
  316.         HAS_ERROR: 'has-error',
  317.  
  318.         // Theme Classes
  319.         THEME_LIGHT: 'gscs-theme-light',
  320.         THEME_DARK: 'gscs-theme-dark',
  321.         THEME_MINIMAL: 'gscs-theme-minimal',
  322.         THEME_MINIMAL_LIGHT: 'gscs-theme-minimal--light',
  323.         THEME_MINIMAL_DARK: 'gscs-theme-minimal--dark',
  324.  
  325.         // Components & Blocks
  326.         SIDEBAR_HEADER: 'gscs-sidebar__header',
  327.         SIDEBAR_CONTENT_WRAPPER: 'gscs-sidebar__content-wrapper',
  328.         DRAG_HANDLE: 'gscs-sidebar__drag-handle',
  329.         SETTINGS_BUTTON: 'gscs-settings-button',
  330.         HEADER_BUTTON: 'gscs-header-button',
  331.         SECTION: 'gscs-section',
  332.         FIXED_TOP_BUTTONS_ITEM: 'gscs-fixed-top-buttons__item',
  333.         SECTION_TITLE: 'gscs-section__title',
  334.         SECTION_CONTENT: 'gscs-section__content',
  335.         FILTER_OPTION: 'gscs-filter-option',
  336.         CHECKBOX_SITE: 'gscs-checkbox--site',
  337.         CHECKBOX_FILETYPE: 'gscs-checkbox--filetype',
  338.         BUTTON_APPLY_SITES: 'gscs-button--apply-sites',
  339.         BUTTON_APPLY_FILETYPES: 'gscs-button--apply-filetypes',
  340.         DATE_INPUT_LABEL: 'gscs-date-input__label',
  341.         DATE_INPUT_FIELD: 'gscs-date-input__field',
  342.         BUTTON: 'gscs-button',
  343.         CUSTOM_LIST: 'gscs-custom-list',
  344.         CUSTOM_LIST_ITEM_CONTROLS: 'gscs-custom-list__item-controls',
  345.         BUTTON_EDIT_ITEM: 'gscs-button--edit-item',
  346.         BUTTON_DELETE_ITEM: 'gscs-button--delete-item',
  347.         CUSTOM_LIST_INPUT_GROUP: 'gscs-custom-list__input-group',
  348.         BUTTON_ADD_CUSTOM: 'gscs-button--add-custom',
  349.         SETTINGS_HEADER: 'gscs-settings__header',
  350.         SETTINGS_CLOSE_BTN: 'gscs-settings__close-button',
  351.         SETTINGS_TABS: 'gscs-settings__tabs',
  352.         TAB_BUTTON: 'gscs-tab-button',
  353.         SETTINGS_TAB_CONTENT: 'gscs-settings__tab-content',
  354.         TAB_PANE: 'gscs-tab-pane',
  355.         SETTING_ITEM: 'gscs-setting-item',
  356.         SETTING_ITEM_LABEL_INLINE: 'gscs-setting-item__label--inline',
  357.         SETTINGS_FOOTER: 'gscs-settings__footer',
  358.         BUTTON_SAVE: 'gscs-button--save',
  359.         BUTTON_CANCEL: 'gscs-button--cancel',
  360.         BUTTON_RESET: 'gscs-button--reset',
  361.         SETTING_ITEM_SIMPLE: 'gscs-setting-item--simple',
  362.         SETTING_RANGE_VALUE: 'gscs-setting-item__range-value',
  363.         SETTING_RANGE_HINT: 'gscs-setting-item__range-hint',
  364.         SECTION_ORDER_LIST: 'gscs-section-order-list',
  365.         INPUT_ERROR_MSG: 'gscs-input-error-message',
  366.         DATE_RANGE_ERROR_MSG: 'gscs-date-range-error-message',
  367.         MESSAGE_BAR: 'gscs-message-bar',
  368.         MSG_INFO: 'gscs-message-bar--info',
  369.         MSG_SUCCESS: 'gscs-message-bar--success',
  370.         MSG_WARNING: 'gscs-message-bar--warning',
  371.         MSG_ERROR: 'gscs-message-bar--error',
  372.         BUTTON_MANAGE_CUSTOM: 'gscs-button--manage-custom',
  373.         NOTIFICATION: 'gscs-notification',
  374.         NTF_INFO: 'gscs-notification--info',
  375.         NTF_SUCCESS: 'gscs-notification--success',
  376.         NTF_WARNING: 'gscs-notification--warning',
  377.         NTF_ERROR: 'gscs-notification--error',
  378.         DRAG_ICON: 'gscs-drag-icon',
  379.         FAVICON: 'gscs-favicon',
  380.         BUTTON_REMOVE_FROM_LIST: 'gscs-button--remove-from-list',
  381.         MODAL_BUTTON_ADD_NEW: 'gscs-modal__add-new-button',
  382.         MODAL_PREDEFINED_CHOOSER: 'gscs-modal-predefined-chooser',
  383.         MODAL_PREDEFINED_CHOOSER_ITEM: 'gscs-modal-predefined-chooser__item',
  384.         SETTING_VALUE_HINT: 'gscs-setting-value-hint'
  385.     };
  386.  
  387.     /**
  388.      * @constant {Object<string, string>} DATA_ATTR
  389.      * A collection of `data-*` attribute names used to store state or metadata directly on DOM elements.
  390.      */
  391.     const DATA_ATTR = {
  392.         FILTER_TYPE: 'filterType', FILTER_VALUE: 'filterValue', SITE_URL: 'siteUrl', SECTION_ID: 'sectionId',
  393.         FILETYPE_VALUE: 'filetypeValue',
  394.         LIST_ID: 'listId', INDEX: 'index', LISTENER_ATTACHED: 'listenerAttached', TAB: 'tab', MANAGE_TYPE: 'managetype',
  395.         ITEM_TYPE: 'itemType', ITEM_ID: 'itemId'
  396.     };
  397.  
  398.     /**
  399.      * @constant {string} STORAGE_KEY
  400.      * The key used for storing the script's settings in the browser's local storage via GM_setValue/GM_getValue.
  401.      */
  402.     const STORAGE_KEY = 'googleSearchCustomSidebarSettings_v1';
  403.  
  404.     /**
  405.      * @constant {Object<string, string>} SVG_ICONS
  406.      * A collection of SVG icon strings. Storing them as strings allows them to be easily injected into the DOM
  407.      * without needing to fetch external files.
  408.      */
  409.     const SVG_ICONS = {
  410.         chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
  411.         chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
  412.         settings: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06-.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`,
  413.         reset: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
  414.         verbatim: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(-4.3875 -3.2375) scale(1.15)"><path d="M6 17.5c0 1.5 1.5 2.5 3 2.5h1.5c1.5 0 3-1 3-2.5V9c0-1.5-1.5-2.5-3-2.5H9C7.5 6.5 6 7.5 6 9v8.5z"/><path d="M15 17.5c0 1.5 1.5 2.5 3 2.5h1.5c1.5 0 3-1 3-2.5V9c0-1.5-1.5-2.5-3-2.5H18c-1.5 0-3 1-3 2.5v8.5z"/></g></svg>`,
  415.         magnifyingGlass: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>`,
  416.         close: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
  417.         edit: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>`,
  418.         delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>`,
  419.         add: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>`,
  420.         update: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
  421.         personalization: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`,
  422.         dragGrip: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>`,
  423.         removeFromList: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
  424.         googleScholar: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm0 11.24L3.62 9 12 5.11 20.38 9 12 14.24zM5 13.18V17.5a1.5 1.5 0 001.5 1.5h11A1.5 1.5 0 0019 17.5v-4.32l-7 3.82-7-3.82z"/></svg>`,
  425.         googleTrends: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"/></svg>`,
  426.         googleDatasetSearch: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em"><path d="M3 18v-2h18v2H3Zm0-5v-2h18v2H3Zm0-5V6h18v2H3Z"/></svg>`
  427.     };
  428.  
  429.     /**
  430.      * @constant {Object} SERVICE_SHORTCUT_CONFIG
  431.      * A centralized configuration for all external service shortcut buttons.
  432.      * This object drives the generic shortcut button creation function.
  433.      */
  434.     const SERVICE_SHORTCUT_CONFIG = {
  435.         googleScholar: {
  436.             id: IDS.TOOL_GOOGLE_SCHOLAR,
  437.             svgIcon: SVG_ICONS.googleScholar,
  438.             titleKey: 'tooltip_google_scholar_search',
  439.             textKey: 'tool_google_scholar',
  440.             serviceNameKey: 'service_name_google_scholar',
  441.             baseUrl: 'https://scholar.google.com/scholar',
  442.             queryParam: 'q',
  443.             homepage: 'https://scholar.google.com/'
  444.         },
  445.         googleTrends: {
  446.             id: IDS.TOOL_GOOGLE_TRENDS,
  447.             svgIcon: SVG_ICONS.googleTrends,
  448.             titleKey: 'tooltip_google_trends_search',
  449.             textKey: 'tool_google_trends',
  450.             serviceNameKey: 'service_name_google_trends',
  451.             baseUrl: 'https://trends.google.com/trends/explore',
  452.             queryParam: 'q',
  453.             homepage: 'https://trends.google.com/trends/'
  454.         },
  455.         googleDatasetSearch: {
  456.             id: IDS.TOOL_GOOGLE_DATASET_SEARCH,
  457.             svgIcon: SVG_ICONS.googleDatasetSearch,
  458.             titleKey: 'tooltip_google_dataset_search',
  459.             textKey: 'tool_google_dataset_search',
  460.             serviceNameKey: 'service_name_google_dataset_search',
  461.             baseUrl: 'https://datasetsearch.research.google.com/search',
  462.             queryParam: 'query',
  463.             homepage: 'https://datasetsearch.research.google.com/'
  464.         }
  465.     };
  466.  
  467.     /**
  468.      * @constant {Object} PREDEFINED_OPTIONS
  469.      * A data structure containing all built-in, non-customizable filter options
  470.      * for various categories like language, country, etc. The text is stored as a key
  471.      * for internationalization.
  472.      */
  473.     const PREDEFINED_OPTIONS = {
  474.         language: [ { textKey: 'predefined_lang_en', value: 'lang_en' }, { textKey: 'predefined_lang_ja', value: 'lang_ja' }, { textKey: 'predefined_lang_ko', value: 'lang_ko' }, { textKey: 'predefined_lang_fr', value: 'lang_fr' }, { textKey: 'predefined_lang_de', value: 'lang_de' }, { textKey: 'predefined_lang_es', value: 'lang_es' }, { textKey: 'predefined_lang_it', value: 'lang_it' }, { textKey: 'predefined_lang_pt', value: 'lang_pt' }, { textKey: 'predefined_lang_ru', value: 'lang_ru' }, { textKey: 'predefined_lang_ar', value: 'lang_ar' }, { textKey: 'predefined_lang_hi', value: 'lang_hi' }, { textKey: 'predefined_lang_nl', value: 'lang_nl' }, { textKey: 'predefined_lang_tr', value: 'lang_tr' }, { textKey: 'predefined_lang_vi', value: 'lang_vi' }, { textKey: 'predefined_lang_th', value: 'lang_th' }, { textKey: 'predefined_lang_id', value: 'lang_id' }, { textKey: 'predefined_lang_zh_tw', value: 'lang_zh-TW' }, { textKey: 'predefined_lang_zh_cn', value: 'lang_zh-CN' }, { textKey: 'predefined_lang_zh_all', value: 'lang_zh-TW|lang_zh-CN' }, ],
  475.         country: [ { textKey: 'predefined_country_us', value: 'countryUS' }, { textKey: 'predefined_country_gb', value: 'countryGB' }, { textKey: 'predefined_country_ca', value: 'countryCA' }, { textKey: 'predefined_country_au', value: 'countryAU' }, { textKey: 'predefined_country_de', value: 'countryDE' }, { textKey: 'predefined_country_fr', value: 'countryFR' }, { textKey: 'predefined_country_jp', value: 'countryJP' }, { textKey: 'predefined_country_kr', value: 'countryKR' }, { textKey: 'predefined_country_cn', value: 'countryCN' }, { textKey: 'predefined_country_in', value: 'countryIN' }, { textKey: 'predefined_country_br', value: 'countryBR' }, { textKey: 'predefined_country_mx', value: 'countryMX' }, { textKey: 'predefined_country_es', value: 'countryES' }, { textKey: 'predefined_country_it', value: 'countryIT' }, { textKey: 'predefined_country_ru', value: 'countryRU' }, { textKey: 'predefined_country_nl', value: 'countryNL' }, { textKey: 'predefined_country_sg', value: 'countrySG' }, { textKey: 'predefined_country_hk', value: 'countryHK' }, { textKey: 'predefined_country_tw', value: 'countryTW' }, { textKey: 'predefined_country_my', value: 'countryMY' }, { textKey: 'predefined_country_vn', value: 'countryVN' }, { textKey: 'predefined_country_ph', value: 'countryPH' }, { textKey: 'predefined_country_th', value: 'countryTH' }, { textKey: 'predefined_country_za', value: 'countryZA' }, { textKey: 'predefined_country_tr', value: 'countryTR' }, ],
  476.         time: [ { textKey: 'predefined_time_h', value: 'h' }, { textKey: 'predefined_time_h2', value: 'h2' }, { textKey: 'predefined_time_h6', value: 'h6' }, { textKey: 'predefined_time_h12', value: 'h12' }, { textKey: 'predefined_time_d', value: 'd' }, { textKey: 'predefined_time_d2', value: 'd2' }, { textKey: 'predefined_time_d3', value: 'd3' }, { textKey: 'predefined_time_w', value: 'w' }, { textKey: 'predefined_time_m', value: 'm' }, { textKey: 'predefined_time_y', value: 'y' }, ],
  477.         filetype: [ { textKey: 'predefined_filetype_pdf', value: 'pdf' }, { textKey: 'predefined_filetype_docx', value: 'docx' }, { textKey: 'predefined_filetype_doc', value: 'doc' }, { textKey: 'predefined_filetype_xlsx', value: 'xlsx' }, { textKey: 'predefined_filetype_xls', value: 'xls' }, { textKey: 'predefined_filetype_pptx', value: 'pptx' }, { textKey: 'predefined_filetype_ppt', value: 'ppt' }, { textKey: 'predefined_filetype_txt', value: 'txt' }, { textKey: 'predefined_filetype_rtf', value: 'rtf' }, { textKey: 'predefined_filetype_html', value: 'html' }, { textKey: 'predefined_filetype_htm', value: 'htm' }, { textKey: 'predefined_filetype_xml', value: 'xml' }, { textKey: 'predefined_filetype_jpg', value: 'jpg' }, { textKey: 'predefined_filetype_png', value: 'png' }, { textKey: 'predefined_filetype_gif', value: 'gif' }, { textKey: 'predefined_filetype_svg', value: 'svg' }, { textKey: 'predefined_filetype_bmp', value: 'bmp' }, { textKey: 'predefined_filetype_js', value: 'js' }, { textKey: 'predefined_filetype_css', value: 'css' }, { textKey: 'predefined_filetype_py', value: 'py' }, { textKey: 'predefined_filetype_java', value: 'java' }, { textKey: 'predefined_filetype_cpp', value: 'cpp' }, { textKey: 'predefined_filetype_cs', value: 'cs' }, { textKey: 'predefined_filetype_kml', value: 'kml'}, { textKey: 'predefined_filetype_kmz', value: 'kmz'}, ]
  478.     };
  479.  
  480.     /**
  481.      * @constant {Object[]} ALL_SECTION_DEFINITIONS
  482.      * The single source of truth for all sidebar sections. This array of objects defines
  483.      * the properties and behavior of each section, such as its ID, type, title,
  484.      * associated URL parameters, and keys for accessing settings.
  485.      */
  486.     const ALL_SECTION_DEFINITIONS = [
  487.         { id: 'sidebar-section-language', type: 'filter', titleKey: 'section_language', scriptDefined: [{textKey:'filter_any_language',v:''}], param: 'lr', predefinedOptionsKey: 'language', customItemsKey: 'customLanguages', displayItemsKey: 'displayLanguages' },
  488.         { id: 'sidebar-section-time', type: 'filter', titleKey: 'section_time', scriptDefined: [{textKey:'filter_any_time',v:''}], param: 'qdr', predefinedOptionsKey: 'time', customItemsKey: 'customTimeRanges' },
  489.         { id: 'sidebar-section-filetype', type: 'filetype', titleKey: 'section_filetype', scriptDefined: [{ textKey: 'filter_any_format', v: '' }], param: 'as_filetype', predefinedOptionsKey: 'filetype', customItemsKey: 'customFiletypes' },
  490.         {
  491.             id: 'sidebar-section-occurrence',
  492.             type: 'filter',
  493.             titleKey: 'section_occurrence',
  494.             scriptDefined: [
  495.                 { textKey: 'filter_occurrence_any', v: 'any' },
  496.                 { textKey: 'filter_occurrence_title', v: 'title' },
  497.                 { textKey: 'filter_occurrence_text', v: 'body' },
  498.                 { textKey: 'filter_occurrence_url', v: 'url' },
  499.                 { textKey: 'filter_occurrence_links', v: 'links' }
  500.             ],
  501.             param: 'as_occt'
  502.         },
  503.         { id: 'sidebar-section-country', type: 'filter', titleKey: 'section_country', scriptDefined: [{textKey:'filter_any_country',v:''}], param: 'cr', predefinedOptionsKey: 'country', customItemsKey: 'customCountries', displayItemsKey: 'displayCountries' },
  504.         { id: 'sidebar-section-date-range', type: 'date', titleKey: 'section_date_range' },
  505.         { id: 'sidebar-section-site-search', type: 'site', titleKey: 'section_site_search', scriptDefined: [{ textKey: 'filter_any_site', v:''}] },
  506.         { id: 'sidebar-section-tools', type: 'tools', titleKey: 'section_tools' }
  507.     ];
  508.  
  509.     // --- Global State Variables ---
  510.     let sidebar = null, systemThemeMediaQuery = null;
  511.     const MIN_SIDEBAR_TOP_POSITION = 1;
  512.     let debouncedSaveSettings;
  513.     let globalMessageTimeout = null;
  514. 	
  515.     /**
  516.      * @module LocalizationService
  517.      * Manages all internationalization (i18n) aspects of the script.
  518.      * It merges built-in and external translation packs, detects the user's locale,
  519.      * and provides a unified interface for retrieving translated strings.
  520.      * This module ensures that all user-facing text can be easily localized.
  521.      */
  522.     const LocalizationService = (function() {
  523.         const builtInTranslations = {
  524.             'en': {
  525.                 scriptName: 'Google Search Custom Sidebar', settingsTitle: 'Google Search Custom Sidebar Settings', manageOptionsTitle: 'Manage Options', manageSitesTitle: 'Manage Favorite Sites', manageLanguagesTitle: 'Manage Language Options', manageCountriesTitle: 'Manage Country/Region Options', manageTimeRangesTitle: 'Manage Time Ranges', manageFileTypesTitle: 'Manage File Types', section_language: 'Language', section_time: 'Time', section_filetype: 'File Type', section_country: 'Country/Region', section_date_range: 'Date Range', section_site_search: 'Site Search', section_tools: 'Tools',
  526.                 section_occurrence: 'Keyword Location',
  527.                 filter_any_language: 'Any Language', filter_any_time: 'Any Time', filter_any_format: 'Any Format', filter_any_country: 'Any Country/Region', filter_any_site: 'Any Site',
  528.                 filter_occurrence_any: 'Anywhere in the page', filter_occurrence_title: 'In the title of the page', filter_occurrence_text: 'In the text of the page', filter_occurrence_url: 'In the URL of the page',
  529.                 filter_occurrence_links: 'In links to the page',
  530.                 filter_clear_site_search: 'Clear Site Search', filter_clear_tooltip_suffix: '(Clear)', predefined_lang_zh_tw: 'Traditional Chinese', predefined_lang_zh_cn: 'Simplified Chinese', predefined_lang_zh_all: 'All Chinese', predefined_lang_en: 'English', predefined_lang_ja: 'Japanese', predefined_lang_ko: 'Korean', predefined_lang_fr: 'French', predefined_lang_de: 'German', predefined_lang_es: 'Spanish', predefined_lang_it: 'Italian', predefined_lang_pt: 'Portuguese', predefined_lang_ru: 'Russian', predefined_lang_ar: 'Arabic', predefined_lang_hi: 'Hindi', predefined_lang_nl: 'Dutch', predefined_lang_tr: 'Turkish', predefined_lang_vi: 'Vietnamese', predefined_lang_th: 'Thai', predefined_lang_id: 'Indonesian', predefined_country_tw: '🇹🇼 Taiwan', predefined_country_jp: '🇯🇵 Japan', predefined_country_kr: '🇰🇷 South Korea', predefined_country_cn: '🇨🇳 China', predefined_country_hk: '🇭🇰 Hong Kong', predefined_country_sg: '🇸🇬 Singapore', predefined_country_my: '🇲🇾 Malaysia', predefined_country_vn: '🇻🇳 Vietnam', predefined_country_ph: '🇵🇭 Philippines', predefined_country_th: '🇹🇭 Thailand', predefined_country_us: '🇺🇸 United States', predefined_country_ca: '🇨🇦 Canada', predefined_country_br: '🇧🇷 Brazil', predefined_country_mx: '🇲🇽 Mexico', predefined_country_gb: '🇬🇧 United Kingdom', predefined_country_de: '🇩🇪 Germany', predefined_country_fr: '🇫🇷 France', predefined_country_it: '🇮🇹 Italy', predefined_country_es: '🇪🇸 Spain', predefined_country_ru: '🇷🇺 Russia', predefined_country_nl: '🇳🇱 Netherlands', predefined_country_au: '🇦🇺 Australia', predefined_country_in: '🇮🇳 India', predefined_country_za: '🇿🇦 South Africa', predefined_country_tr: '🇹🇷 Turkey', predefined_time_h: 'Past hour', predefined_time_h2: 'Past 2 hours', predefined_time_h6: 'Past 6 hours', predefined_time_h12: 'Past 12 hours', predefined_time_d: 'Past 24 hours', predefined_time_d2: 'Past 2 days', predefined_time_d3: 'Past 3 days', predefined_time_w: 'Past week', predefined_time_m: 'Past month', predefined_time_y: 'Past year', predefined_filetype_pdf: 'PDF', predefined_filetype_docx: 'Word (docx)', predefined_filetype_doc: 'Word (doc)', predefined_filetype_xlsx: 'Excel (xlsx)', predefined_filetype_xls: 'Excel (xls)', predefined_filetype_pptx: 'PowerPoint (pptx)', predefined_filetype_ppt: 'PowerPoint (ppt)', predefined_filetype_txt: 'Plain Text', predefined_filetype_rtf: 'Rich Text Format', predefined_filetype_html: 'Web Page (html)', predefined_filetype_htm: 'Web Page (htm)', predefined_filetype_xml: 'XML', predefined_filetype_jpg: 'JPEG Image', predefined_filetype_png: 'PNG Image', predefined_filetype_gif: 'GIF Image', predefined_filetype_svg: 'SVG Image', predefined_filetype_bmp: 'BMP Image', predefined_filetype_js: 'JavaScript', predefined_filetype_css: 'CSS', predefined_filetype_py: 'Python', predefined_filetype_java: 'Java', predefined_filetype_cpp: 'C++', predefined_filetype_cs: 'C#', predefined_filetype_kml: 'Google Earth (kml)', predefined_filetype_kmz: 'Google Earth (kmz)',
  531.                 tool_reset_filters: 'Reset Filters', tool_verbatim_search: 'Verbatim Search', tool_advanced_search: 'Advanced Search', tool_apply_date: 'Apply Dates',
  532.                 tool_personalization_toggle: 'Personalization', tool_apply_selected_sites: 'Apply Selected',
  533.                 tool_apply_selected_filetypes: 'Apply Selected',
  534.                 tool_google_scholar: 'Scholar',
  535.                 tooltip_google_scholar_search: 'Search current keywords on Google Scholar',
  536.                 service_name_google_scholar: 'Google Scholar',
  537.                 tool_google_trends: 'Trends',
  538.                 tooltip_google_trends_search: 'Explore current keywords on Google Trends',
  539.                 service_name_google_trends: 'Google Trends',
  540.                 tool_google_dataset_search: 'Dataset Search',
  541.                 tooltip_google_dataset_search: 'Search keywords on Google Dataset Search',
  542.                 service_name_google_dataset_search: 'Google Dataset Search',
  543.                 link_advanced_search_title: 'Open Google Advanced Search page', tooltip_site_search: 'Search within {siteUrl}', tooltip_clear_site_search: 'Remove site: restriction', tooltip_toggle_personalization_on: 'Click to turn Personalization ON (Results tailored to you)', tooltip_toggle_personalization_off: 'Click to turn Personalization OFF (More generic results)', settings_tab_general: 'General', settings_tab_appearance: 'Appearance', settings_tab_features: 'Features', settings_tab_custom: 'Custom', settings_close_button_title: 'Close', settings_interface_language: 'Interface Language:', settings_language_auto: 'Auto (Browser Default)', settings_section_mode: 'Section Collapse Mode:', settings_section_mode_remember: 'Remember State', settings_section_mode_expand: 'Expand All', settings_section_mode_collapse: 'Collapse All',
  544.                 settings_accordion_mode: 'Accordion Mode (only when "Remember State" is active)',
  545.                 settings_accordion_mode_hint_desc: 'When enabled, expanding one section will automatically collapse other open sections.',
  546.                 settings_enable_drag: 'Enable Dragging', settings_reset_button_location: 'Reset Button Location:', settings_verbatim_button_location: 'Verbatim Button Location:', settings_adv_search_location: '"Advanced Search" Link Location:', settings_personalize_button_location: 'Personalization Button Location:',
  547.                 settings_scholar_location: 'Google Scholar Shortcut Location:',
  548.                 settings_trends_location: 'Google Trends Shortcut Location:',
  549.                 settings_dataset_search_location: 'Dataset Search Shortcut Location:',
  550.                 settings_enable_site_search_checkbox_mode: 'Enable Checkbox Mode for Site Search',
  551.                 settings_enable_site_search_checkbox_mode_hint: 'Allows selecting multiple favorite sites for a combined (OR) search.',
  552.                 settings_show_favicons: 'Show Favicons for Site Search',
  553.                 settings_show_favicons_hint: 'Displays a website icon next to single-site entries for better identification.',
  554.                 settings_enable_filetype_search_checkbox_mode: 'Enable Checkbox Mode for Filetype Search',
  555.                 settings_enable_filetype_search_checkbox_mode_hint: 'Allows selecting multiple filetypes for a combined (OR) search.',
  556.                 settings_location_tools: 'Tools Section', settings_location_top: 'Top Block', settings_location_header: 'Sidebar Header', settings_location_hide: 'Hide', settings_sidebar_width: 'Sidebar Width (px)', settings_width_range_hint: '(Range: 90-270, Step: 5)', settings_sidebar_height: 'Sidebar Height (vh)', settings_height_range_hint: '(Range: 25-100, Step: 5)', settings_font_size: 'Base Font Size (px)', settings_font_size_range_hint: '(Range: 8-24, Step: 0.5)', settings_header_icon_size: 'Header Icon Size (px)', settings_header_icon_size_range_hint: '(Range: 8-32, Step: 0.5)', settings_vertical_spacing: 'Vertical Spacing', settings_vertical_spacing_range_hint: '(Multiplier Range: 0.05-1.5, Step: 0.05)', settings_theme: 'Theme:', settings_theme_system: 'Follow System', settings_theme_light: 'Light', settings_theme_dark: 'Dark', settings_theme_minimal_light: 'Minimal (Light)', settings_theme_minimal_dark: 'Minimal (Dark)', settings_hover_mode: 'Hover Mode', settings_idle_opacity: 'Idle Opacity:', settings_opacity_range_hint: '(Range: 0.1-1.0, Step: 0.05)', settings_country_display: 'Country/Region Display:', settings_country_display_icontext: 'Icon & Text', settings_country_display_text: 'Text Only', settings_country_display_icon: 'Icon Only', settings_scrollbar_position: 'Scrollbar Position:', settings_scrollbar_right: 'Right (Default)', settings_scrollbar_left: 'Left', settings_scrollbar_hidden: 'Hidden', settings_show_result_stats: 'Show Search Result Stats',
  557.                 settings_advanced_color_options: 'Advanced Color Options',
  558.                 settings_reset_colors_button: 'Reset Colors',
  559.                 settings_color_bg_color: 'Background Color',
  560.                 settings_color_text_color: 'Main Text Color',
  561.                 settings_color_link_color: 'Link & Title Color',				
  562.                 settings_color_selected_color: 'Selected Item Text Color',
  563.                 settings_color_input_text_color: 'Input Field Text Color',
  564.                 settings_color_border_color: 'Main Border Color',
  565.                 settings_color_divider_color: 'Section Divider Color',
  566.                 settings_color_btn_bg_color: 'Button Background Color',
  567.                 settings_color_btn_hover_bg_color: 'Button Hover BG Color',
  568.                 settings_color_active_bg_color: 'Active Item BG Color',
  569.                 settings_color_active_text_color: 'Active Item Text/Icon Color',
  570.                 settings_color_active_border_color: 'Active Item Border Color',
  571.                 settings_color_header_icon_color: 'Header Icon Color',
  572.                 settings_visible_sections: 'Visible Sections:', settings_section_order: 'Adjust Sidebar Section Order (Drag & Drop):',
  573.                 settings_section_order_hint: '(Drag items to reorder. Only affects checked sections)',
  574.                 settings_no_orderable_sections: 'No visible sections to order.',
  575.                 settings_move_up_title: 'Move Up',
  576.                 settings_move_down_title: 'Move Down',
  577.                 settings_hide_google_logo: 'Hide Google Logo when sidebar is expanded',
  578.                 settings_hide_google_logo_hint: 'Useful if the sidebar is placed in the top-left corner with a minimal theme.',
  579.                 settings_custom_intro: 'Manage filter options for each section:',
  580.                 settings_manage_sites_button: 'Manage Favorite Sites...', settings_manage_languages_button: 'Manage Language Options...', settings_manage_countries_button: 'Manage Country/Region Options...', settings_manage_time_ranges_button: 'Manage Time Ranges...', settings_manage_file_types_button: 'Manage File Types...', settings_save_button: 'Save Settings', settings_cancel_button: 'Cancel', settings_reset_all_button: 'Reset All',
  581.                 modal_label_enable_predefined: 'Enable Predefined {type}:',
  582.                 modal_label_my_custom: 'My Custom {type}:',
  583.                 modal_label_display_options_for: 'Display Options for {type} (Drag to Sort):',
  584.                 modal_button_add_new_option: 'Add New Option...',
  585.                 modal_button_add_predefined_option: 'Add Predefined...',
  586.                 modal_button_add_custom_option: 'Add Custom...',
  587.                 modal_placeholder_name: 'Name', modal_placeholder_domain: 'Domain (e.g., site.com OR example.net/path)',
  588.                 modal_placeholder_text: 'Text', modal_placeholder_value: 'Value (e.g., pdf OR docx)',
  589.                 modal_hint_domain: 'Format: domain/path (e.g., `wikipedia.org/wiki/Page` or `site.com`). Use `OR` (case-insensitive, space separated) for multiple.',
  590.                 modal_hint_language: 'Format: starts with `lang_`, e.g., `lang_ja`, `lang_zh-TW`. Use `|` for multiple.', modal_hint_country: 'Format: `country` + 2-letter uppercase code, e.g., `countryDE`', modal_hint_time: 'Format: `h`, `d`, `w`, `m`, `y`, optionally followed by numbers, e.g., `h1`, `d7`, `w`',
  591.                 modal_hint_filetype: 'Format: extension (e.g., `pdf`). Use `OR` (case-insensitive, space separated) for multiple (e.g., `docx OR xls`).',
  592.                 modal_tooltip_domain: 'Enter domain(s) with optional path(s). Use OR for multiple, e.g., site.com/path OR example.org',
  593.                 modal_tooltip_language: 'Format: lang_xx or lang_xx-XX, separate multiple with |', modal_tooltip_country: 'Format: countryXX (XX = uppercase country code)', modal_tooltip_time: 'Format: h, d, w, m, y, optionally followed by numbers',
  594.                 modal_tooltip_filetype: 'File extension(s). Use OR for multiple, e.g., pdf OR docx',
  595.                 modal_button_add_title: 'Add', modal_button_update_title: 'Update Item', modal_button_cancel_edit_title: 'Cancel Edit', modal_button_edit_title: 'Edit', modal_button_delete_title: 'Delete', modal_button_remove_from_list_title: 'Remove from list', modal_button_complete: 'Done', value_empty: '(empty)', date_range_from: 'From:', date_range_to: 'To:', sidebar_collapse_title: 'Collapse', sidebar_expand_title: 'Expand', sidebar_drag_title: 'Drag', sidebar_settings_title: 'Settings',
  596.                 alert_invalid_start_date: 'Invalid start date', alert_invalid_end_date: 'Invalid end date', alert_end_before_start: 'End date cannot be earlier than start date', alert_start_in_future: 'Start date cannot be in the future', alert_end_in_future: 'End date cannot be in the future', alert_select_date: 'Please select a date', alert_error_applying_date: 'Error applying date range', alert_error_applying_filter: 'Error applying filter {type}={value}', alert_error_applying_site_search: 'Error applying site search for {site}', alert_error_clearing_site_search: 'Error clearing site search', alert_error_resetting_filters: 'Error resetting filters', alert_error_toggling_verbatim: 'Error toggling Verbatim search', alert_error_toggling_personalization: 'Error toggling Personalization search', alert_enter_display_name: 'Please enter the display name for {type}.', alert_enter_value: 'Please enter the corresponding value for {type}.', alert_invalid_value_format: 'The value format for {type} is incorrect. {hint}', alert_duplicate_name: 'Custom item display name "{name}" already exists. Please use a different name.', alert_update_failed_invalid_index: 'Update failed: Invalid item index.', alert_edit_failed_missing_fields: 'Cannot edit: Input or button fields not found.',
  597.                 alert_no_more_predefined_to_add: 'No more predefined {type} options available to add.',
  598.                 alert_no_keywords_for_shortcut: 'No keywords found in current search to use for {service_name}.',
  599.                 alert_error_opening_link: 'Error opening link for {service_name}.',
  600.                 alert_generic_error: 'An unexpected error occurred. Please check the console or try again. Context: {context}',
  601.                 confirm_delete_item: 'Are you sure you want to delete the custom item "{name}"?', confirm_remove_item_from_list: 'Are you sure you want to remove "{name}" from this display list?', confirm_reset_settings: 'Are you sure you want to reset all settings to their default values?', alert_settings_reset_success: 'Settings have been reset to default. You can continue editing or click "Save Settings" to confirm.', confirm_reset_all_menu: 'Are you sure you want to reset all settings to their default values?\nThis cannot be undone and requires a page refresh to take effect.', alert_reset_all_menu_success: 'All settings have been reset to defaults.\nPlease refresh the page to apply the changes.', alert_reset_all_menu_fail: 'Failed to reset settings via menu command! Please check the console.', alert_init_fail: '{scriptName} initialization failed. Some features may not work. Please check the console for technical details.\nTechnical Error: {error}', menu_open_settings: '⚙️ Open Settings', menu_reset_all_settings: '🚨 Reset All Settings',
  602.             },
  603.         };
  604.         let effectiveTranslations = JSON.parse(JSON.stringify(builtInTranslations));
  605.         let _currentLocale = 'en';
  606.  
  607.         /**
  608.          * Merges external translation data (from the i18n companion script)
  609.          * with the built-in English translations. It also ensures that all languages
  610.          * have a complete set of keys, falling back to English if a key is missing.
  611.          * @private
  612.          */
  613.         function _mergeExternalTranslations() {
  614.             if (typeof window.GSCS_Namespace !== 'undefined' && typeof window.GSCS_Namespace.i18nPack === 'object' && typeof window.GSCS_Namespace.i18nPack.translations === 'object') {
  615.                 const externalTranslations = window.GSCS_Namespace.i18nPack.translations;
  616.                 for (const langCode in externalTranslations) {
  617.                     if (Object.prototype.hasOwnProperty.call(externalTranslations, langCode)) {
  618.                         if (!effectiveTranslations[langCode]) {
  619.                             effectiveTranslations[langCode] = {};
  620.                         }
  621.                         for (const key in externalTranslations[langCode]) {
  622.                             if (Object.prototype.hasOwnProperty.call(externalTranslations[langCode], key)) {
  623.                                 effectiveTranslations[langCode][key] = externalTranslations[langCode][key];
  624.                             }
  625.                         }
  626.                     }
  627.                 }
  628.                  // After merging, ensure 'en' from builtInTranslations acts as a fallback for all known languages
  629.                 const englishDefaults = builtInTranslations.en;
  630.                 for (const langCode in effectiveTranslations) {
  631.                     if (langCode !== 'en' && Object.prototype.hasOwnProperty.call(effectiveTranslations, langCode)) {
  632.                         for (const key in englishDefaults) {
  633.                             if (Object.prototype.hasOwnProperty.call(englishDefaults, key) && typeof effectiveTranslations[langCode][key] === 'undefined') {
  634.                                 effectiveTranslations[langCode][key] = englishDefaults[key];
  635.                             }
  636.                         }
  637.                     }
  638.                 }
  639.  
  640.             } else {
  641.                 console.warn(`${LOG_PREFIX} [i18n] External i18n pack (window.GSCS_Namespace.i18nPack) not found or invalid. Using built-in translations only.`);
  642.             }
  643.             // Ensure all keys from builtInTranslations.en exist in 'en' to prevent errors
  644.             // if i18n.js is older or missing keys.
  645.             const ensureKeys = (lang, defaults) => {
  646.                 if (!effectiveTranslations[lang]) effectiveTranslations[lang] = {};
  647.                 for (const key in defaults) {
  648.                     if (!effectiveTranslations[lang][key]) {
  649.                         effectiveTranslations[lang][key] = defaults[key]; // Fallback to built-in English if key is missing in target lang
  650.                     }
  651.                 }
  652.             };
  653.             ensureKeys('en', builtInTranslations.en); // Ensure English is complete based on built-in
  654.         }
  655.  
  656.         /**
  657.          * Detects the user's preferred language from the browser settings.
  658.          * It attempts to match specific locales (e.g., "en-US") first, then generic
  659.          * languages (e.g., "en"), and finally falls back to English.
  660.          * @private
  661.          * @returns {string} The detected locale code.
  662.          */
  663.         function _detectBrowserLocale() {
  664.             let locale = 'en'; // Default
  665.             try {
  666.                 if (navigator.languages && navigator.languages.length) {
  667.                     locale = navigator.languages[0];
  668.                 } else if (navigator.language) {
  669.                     locale = navigator.language;
  670.                 }
  671.             } catch (e) {
  672.                 console.warn(`${LOG_PREFIX} [i18n] Error accessing navigator.language(s):`, e);
  673.             }
  674.  
  675.             // Try to match full locale (e.g., "zh-TW")
  676.             if (effectiveTranslations[locale]) return locale;
  677.  
  678.             // Try to match generic part (e.g., "zh" from "zh-TW")
  679.             if (locale.includes('-')) {
  680.                 const parts = locale.split('-');
  681.                 if (parts.length > 0 && effectiveTranslations[parts[0]]) return parts[0];
  682.                 // Try "language-Script" (e.g., "zh-Hant") if applicable, though less common for userscripts
  683.                 if (parts.length > 2 && effectiveTranslations[`${parts[0]}-${parts[1]}`]) return `${parts[0]}-${parts[1]}`;
  684.             }
  685.             return 'en'; // Fallback to English
  686.         }
  687.  
  688.         /**
  689.          * Updates the active locale based on user settings or browser detection.
  690.          * If the user has selected a specific language, it's used; otherwise, it auto-detects.
  691.          * @private
  692.          * @param {Object} settingsToUse - The current settings object to read the interfaceLanguage from.
  693.          */
  694.         function _updateActiveLocale(settingsToUse) {
  695.             let newLocale = 'en'; // Default
  696.             const langSettingSource = (settingsToUse && Object.keys(settingsToUse).length > 0 && typeof settingsToUse.interfaceLanguage === 'string')
  697.                 ? settingsToUse
  698.                 : defaultSettings; // Fallback to defaultSettings if settingsToUse is empty/invalid
  699.  
  700.             const userSelectedLang = langSettingSource.interfaceLanguage;
  701.  
  702.             if (userSelectedLang && userSelectedLang !== 'auto') {
  703.                 if (effectiveTranslations[userSelectedLang]) {
  704.                     newLocale = userSelectedLang;
  705.                 } else if (userSelectedLang.includes('-')) {
  706.                     const genericLang = userSelectedLang.split('-')[0];
  707.                     if (effectiveTranslations[genericLang]) {
  708.                         newLocale = genericLang;
  709.                     } else {
  710.                         newLocale = _detectBrowserLocale(); // Fallback to browser if specific parts aren't found
  711.                     }
  712.                 } else {
  713.                     newLocale = _detectBrowserLocale(); // Fallback if selected lang doesn't exist
  714.                 }
  715.             } else { // 'auto' or undefined
  716.                 newLocale = _detectBrowserLocale();
  717.             }
  718.  
  719.             if (_currentLocale !== newLocale) {
  720.                 _currentLocale = newLocale;
  721.             }
  722.              // Warn if the chosen language isn't exactly what was set (e.g. "fr-CA" setting becomes "fr" due to availability)
  723.             if (userSelectedLang && userSelectedLang !== 'auto' && _currentLocale !== userSelectedLang && !userSelectedLang.startsWith(_currentLocale.split('-')[0])) {
  724.                 console.warn(`${LOG_PREFIX} [i18n] User selected language "${userSelectedLang}" was not fully available or matched. Using best match: "${_currentLocale}".`);
  725.             }
  726.         }
  727.  
  728.         _mergeExternalTranslations(); // Merge external translations once at service creation
  729.  
  730.         /**
  731.          * Retrieves a translated string for a given key.
  732.          * It searches in the current locale, then the generic part of the locale, and finally
  733.          * falls back to English if the key is not found.
  734.          * @param {string} key - The translation key (e.g., 'settingsTitle').
  735.          * @param {Object} [replacements={}] - An object of placeholders to replace in the string (e.g., {siteUrl: 'example.com'}).
  736.          * @returns {string} The translated (and formatted) string.
  737.          */
  738.         function getString(key, replacements = {}) {
  739.             let str = `[ERR: ${key} @ ${_currentLocale}]`; // Default error string
  740.             let found = false;
  741.  
  742.             // 1. Try current locale
  743.             if (effectiveTranslations[_currentLocale] && typeof effectiveTranslations[_currentLocale][key] !== 'undefined') {
  744.                 str = effectiveTranslations[_currentLocale][key];
  745.                 found = true;
  746.             }
  747.             // 2. If current locale has a generic part (e.g., "zh" from "zh-TW"), try that
  748.             else if (_currentLocale.includes('-')) {
  749.                 const genericLang = _currentLocale.split('-')[0];
  750.                 if (effectiveTranslations[genericLang] && typeof effectiveTranslations[genericLang][key] !== 'undefined') {
  751.                     str = effectiveTranslations[genericLang][key];
  752.                     found = true;
  753.                 }
  754.             }
  755.  
  756.             // 3. If not found and current locale is not English, fallback to English
  757.             if (!found && _currentLocale !== 'en') {
  758.                 if (effectiveTranslations['en'] && typeof effectiveTranslations['en'][key] !== 'undefined') {
  759.                     str = effectiveTranslations['en'][key];
  760.                     found = true;
  761.                 }
  762.             }
  763.  
  764.             // 4. If still not found (even in English), it's a critical miss
  765.             if (!found) {
  766.                 if (!(effectiveTranslations['en'] && typeof effectiveTranslations['en'][key] !== 'undefined')) {
  767.                     console.error(`${LOG_PREFIX} [i18n] CRITICAL: Missing translation for key: "${key}" in BOTH locale: "${_currentLocale}" AND default locale "en".`);
  768.                 } else {
  769.                     // This case should ideally not be hit if English is complete in builtInTranslations
  770.                     str = effectiveTranslations['en'][key]; // Should have been caught by step 3 if _currentLocale wasn't 'en'
  771.                     found = true;
  772.                 }
  773.                 if(!found) str = `[ERR_NF: ${key}]`; // Final error if truly not found anywhere
  774.             }
  775.  
  776.             // Replace placeholders
  777.             if (typeof str === 'string') {
  778.                 for (const placeholder in replacements) {
  779.                     if (Object.prototype.hasOwnProperty.call(replacements, placeholder)) {
  780.                         str = str.replace(new RegExp(`\\{${placeholder}\\}`, 'g'), replacements[placeholder]);
  781.                     }
  782.                 }
  783.             } else {
  784.                  console.error(`${LOG_PREFIX} [i18n] CRITICAL: Translation for key "${key}" is not a string:`, str);
  785.                  return `[INVALID_TYPE_FOR_KEY: ${key}]`;
  786.             }
  787.             return str;
  788.         }
  789.  
  790.         return {
  791.             getString: getString,
  792.             getCurrentLocale: function() { return _currentLocale; },
  793.             getTranslationsForLocale: function(locale = 'en') { return effectiveTranslations[locale] || effectiveTranslations['en']; },
  794.             initializeBaseLocale: function() { _updateActiveLocale(defaultSettings); },
  795.             updateActiveLocale: function(activeSettings) { _updateActiveLocale(activeSettings); },
  796.             getAvailableLocales: function() {
  797.                 const locales = new Set(['auto', 'en']); // 'auto' and 'en' are always options
  798.                 Object.keys(effectiveTranslations).forEach(lang => {
  799.                     // Only add if it's a valid language pack (not just an empty object)
  800.                     if (Object.keys(effectiveTranslations[lang]).length > 0) {
  801.                         locales.add(lang);
  802.                     }
  803.                 });
  804.                 return Array.from(locales).sort((a, b) => {
  805.                     if (a === 'auto') return -1;
  806.                     if (b === 'auto') return 1;
  807.                     if (a === 'en' && b !== 'auto') return -1;
  808.                     if (b === 'en' && a !== 'auto') return 1;
  809.  
  810.                     let nameA = a, nameB = b;
  811.                     try { nameA = new Intl.DisplayNames([a],{type:'language'}).of(a); } catch(e){}
  812.                     try { nameB = new Intl.DisplayNames([b],{type:'language'}).of(b); } catch(e){}
  813.                     return nameA.localeCompare(nameB);
  814.                 });
  815.             }
  816.         };
  817.     })();
  818.  
  819.     // A convenient shorthand for accessing the localization service's getString method.
  820.     const _ = LocalizationService.getString;
  821.  
  822.     /**
  823.      * @module Utils
  824.      * A collection of general-purpose utility functions used throughout the script.
  825.      * These functions are stateless and perform common tasks like debouncing,
  826.      * deep object merging, and number clamping.
  827.      */
  828.     const Utils = {
  829.         /**
  830.          * Creates a debounced function that delays invoking `func` until after `wait`
  831.          * milliseconds have elapsed since the last time the debounced function was invoked.
  832.          * @param {Function} func - The function to debounce.
  833.          * @param {number} wait - The number of milliseconds to delay.
  834.          * @returns {Function} Returns the new debounced function.
  835.          */
  836.         debounce: function(func, wait) {
  837.             let timeout;
  838.             return function executedFunction(...args) {
  839.                 const context = this;
  840.                 const later = () => {
  841.                     timeout = null;
  842.                     func.apply(context, args);
  843.                 };
  844.                 clearTimeout(timeout);
  845.                 timeout = setTimeout(later, wait);
  846.             };
  847.         },
  848. 		
  849.         /**
  850.          * Recursively merges properties of one or more source objects into a target object.
  851.          * If a key exists in both the target and source, and both values are objects,
  852.          * it will recursively merge them. Otherwise, the value from the source will overwrite the target.
  853.          * @param {Object} target - The object to merge properties into.
  854.          * @param {Object} source - The object to merge properties from.
  855.          * @returns {Object} The modified target object.
  856.          */
  857.         mergeDeep: function(target, source) {
  858.             if (!source) return target; // If source is undefined or null, return target as is.
  859.             target = target || {}; // Ensure target is an object if it's initially null/undefined.
  860.  
  861.             for (const key in source) {
  862.                 if (Object.prototype.hasOwnProperty.call(source, key)) {
  863.                     const targetValue = target[key];
  864.                     const sourceValue = source[key];
  865.  
  866.                     if (sourceValue && typeof sourceValue === 'object' && !Array.isArray(sourceValue)) {
  867.                         // Recurse for nested objects
  868.                         target[key] = Utils.mergeDeep(targetValue, sourceValue);
  869.                     } else if (typeof sourceValue !== 'undefined') {
  870.                         // Assign if sourceValue is a primitive, array, or explicitly undefined
  871.                         target[key] = sourceValue;
  872.                     }
  873.                     // If sourceValue is undefined, target[key] remains unchanged (implicit else)
  874.                 }
  875.             }
  876.             return target;
  877.         },
  878.  
  879.         /**
  880.          * Clamps a number within the inclusive lower and upper bounds.
  881.          * @param {number} num - The number to clamp.
  882.          * @param {number} min - The lower bound.
  883.          * @param {number} max - The upper bound.
  884.          * @returns {number} The clamped number.
  885.          */
  886.         clamp: function(num, min, max) {
  887.             return Math.min(Math.max(num, min), max);
  888.         },
  889.  
  890.         /**
  891.          * Parses a string that may contain an emoji or symbol at the beginning.
  892.          * This is primarily used for country/region names that include a flag.
  893.          * @param {string} fullText - The text to parse.
  894.          * @returns {{icon: string, text: string}} An object with the extracted icon and the remaining text.
  895.          */
  896.         parseIconAndText: function(fullText) {
  897.             // Regex to match one or more non-letter, non-number characters at the beginning, followed by optional whitespace
  898.             const match = fullText.match(/^(\P{L}\P{N}\s*)+/u);
  899.             let icon = '';
  900.             let text = fullText;
  901.  
  902.             if (match && match[0].trim() !== '') {
  903.                 icon = match[0].trim(); // Trim to remove trailing spaces from the icon part
  904.                 text = fullText.substring(icon.length).trim(); // Trim to remove leading spaces from the text part
  905.             }
  906.             return { icon, text };
  907.         },
  908.  
  909.         /**
  910.          * Safely gets the current window's URL as a URL object.
  911.          * @returns {URL|null} A URL object, or null if an error occurs.
  912.          */
  913.         getCurrentURL: function() {
  914.             try {
  915.                 return new URL(window.location.href);
  916.             } catch (e) {
  917.                 console.error(`${LOG_PREFIX} Error creating URL object:`, e);
  918.                 return null;
  919.             }
  920.         },
  921.  
  922.         /**
  923.          * Parses a string containing values separated by " OR " into an array.
  924.          * The separator is case-insensitive and handles multiple spaces.
  925.          * @param {string} valueString - The string to parse (e.g., "pdf OR docx").
  926.          * @returns {string[]} An array of the parsed values.
  927.          */
  928.         parseCombinedValue: function(valueString) {
  929.             if (typeof valueString !== 'string' || !valueString.trim()) {
  930.                 return [];
  931.             }
  932.             // Split by " OR " (case-insensitive, with spaces around OR)
  933.             return valueString.split(/\s+OR\s+/i).map(s => s.trim()).filter(s => s.length > 0);
  934.         },
  935.  
  936.         /**
  937.          * Cleans a specific operator (like 'site' or 'filetype') from the query string.
  938.          * @param {string} query - The original query string.
  939.          * @param {string} operator - The operator name to clean (e.g., 'site').
  940.          * @returns {string} The cleaned query string.
  941.          */
  942.         _cleanQueryByOperator: function(query, operator) {
  943.             if (!query || !operator) return '';
  944.             // Create a dynamic regex to match only the specified operator
  945.             const singleOperatorRegexComplex = new RegExp(`\\s*(?:\\(\\s*)?(?:(?:${operator}):[\\w.:\\/~%?#=&+-]+(?:\\s+OR\\s+|$))+[^)]*\\)?\\s*`, 'gi');
  946.             const singleOperatorRegexSimple = new RegExp(`\\s*${operator}:[\\w.:\\/~%?#=&+-]+\\s*`, 'gi');
  947.             
  948.             let cleanedQuery = query.replace(singleOperatorRegexComplex, ' ');
  949.             cleanedQuery = cleanedQuery.replace(singleOperatorRegexSimple, ' ');
  950.             
  951.             return cleanedQuery.replace(/\s\s+/g, ' ').trim();
  952.         }
  953.     };
  954. 	
  955.     /**
  956.      * @module NotificationManager
  957.      * Handles the display of temporary, non-blocking notifications to the user.
  958.      * It creates a dedicated container in the DOM and manages the lifecycle of
  959.      * notification elements, including timed fade-outs.
  960.      */
  961.     const NotificationManager = (function() {
  962.         let container = null;
  963.  
  964.         /**
  965.          * Initializes the notification container, creating and appending it to the DOM if it doesn't exist.
  966.          */
  967.         function init() {
  968.             if (document.getElementById(IDS.NOTIFICATION_CONTAINER)) {
  969.                 container = document.getElementById(IDS.NOTIFICATION_CONTAINER);
  970.                 return;
  971.             }
  972.             container = document.createElement('div');
  973.             container.id = IDS.NOTIFICATION_CONTAINER;
  974.             if (document.body) {
  975.                 document.body.appendChild(container);
  976.             } else {
  977.                 // This case should be rare as script runs at document-idle
  978.                 console.error(LOG_PREFIX + " NotificationManager.init(): document.body is not available!");
  979.                 container = null; // Ensure container is null if append fails
  980.             }
  981.         }
  982.  
  983.         /**
  984.          * Displays a notification message.
  985.          * @param {string} messageKey - The localization key for the message.
  986.          * @param {Object} [messageArgs={}] - Placeholders to replace in the message string.
  987.          * @param {('info'|'success'|'warning'|'error')} [type='info'] - The type of notification, affecting its appearance.
  988.          * @param {number} [duration=3000] - The duration in milliseconds before the notification fades out. A duration <= 0 creates a persistent notification.
  989.          * @returns {HTMLElement|null} The created notification element, or null if the container is not available.
  990.          */
  991.         function show(messageKey, messageArgs = {}, type = 'info', duration = 3000) {
  992.             if (!container) {
  993.                 // Fallback to alert if container isn't initialized
  994.                 const alertMsg = (typeof _ === 'function' && _(messageKey, messageArgs) && !(_(messageKey, messageArgs).startsWith('[ERR:')))
  995.                     ? _(messageKey, messageArgs)
  996.                     : `${messageKey} (args: ${JSON.stringify(messageArgs)})`; // Basic fallback if _ is not ready
  997.                 alert(alertMsg);
  998.                 return null;
  999.             }
  1000.  
  1001.             const notificationElement = document.createElement('div');
  1002.             notificationElement.classList.add(CSS.NOTIFICATION);
  1003.  
  1004.             const typeClass = CSS[`NTF_${type.toUpperCase()}`] || CSS.NTF_INFO; // Fallback to info type
  1005.             notificationElement.classList.add(typeClass);
  1006.  
  1007.             notificationElement.textContent = _(messageKey, messageArgs);
  1008.  
  1009.             if (duration <= 0) { // Persistent notification, add a close button
  1010.                 const closeButton = document.createElement('span');
  1011.                 closeButton.innerHTML = '×'; // Simple 'x'
  1012.                 closeButton.style.cursor = 'pointer';
  1013.                 closeButton.style.marginLeft = '10px';
  1014.                 closeButton.style.float = 'right'; // Position to the right
  1015.                 closeButton.onclick = () => notificationElement.remove();
  1016.                 notificationElement.appendChild(closeButton);
  1017.             }
  1018.  
  1019.             container.appendChild(notificationElement);
  1020.  
  1021.             if (duration > 0) {
  1022.                 setTimeout(() => {
  1023.                     notificationElement.style.opacity = '0'; // Start fade out
  1024.                     setTimeout(() => notificationElement.remove(), 500); // Remove after fade out
  1025.                 }, duration);
  1026.             }
  1027.             return notificationElement; // Return the element for potential further manipulation
  1028.         }
  1029.  
  1030.         return { init: init, show: show };
  1031.     })();
  1032.  
  1033.     /**
  1034.      * Creates a generic list item element for use in management modals.
  1035.      * This function handles the creation of the item's text, drag handle, and control buttons (edit/delete).
  1036.      * @param {number} index - The index of the item in its source array.
  1037.      * @param {Object} item - The data object for the list item.
  1038.      * @param {string} listId - The ID of the parent list element.
  1039.      * @param {Object} mapping - The configuration mapping object for this list type from `getListMapping`.
  1040.      * @returns {HTMLLIElement} The fully constructed list item element.
  1041.      */
  1042.     function createGenericListItem(index, item, listId, mapping) {
  1043.         const listItem = document.createElement('li');
  1044.         listItem.dataset[DATA_ATTR.INDEX] = index;
  1045.         listItem.dataset[DATA_ATTR.LIST_ID] = listId;
  1046.         listItem.dataset[DATA_ATTR.ITEM_ID] = item.id || item.value || item.url; // Unique ID for the item itself
  1047.         listItem.draggable = true; // All modal list items are draggable
  1048.  
  1049.         const dragIconSpan = document.createElement('span');
  1050.         dragIconSpan.classList.add(CSS.DRAG_ICON);
  1051.         dragIconSpan.innerHTML = SVG_ICONS.dragGrip;
  1052.         listItem.appendChild(dragIconSpan);
  1053.  
  1054.         const textSpan = document.createElement('span');
  1055.  
  1056.         // Favicon logic for Site Search list in the modal
  1057.         const currentSettings = SettingsManager.getCurrentSettings();
  1058.         if (listId === IDS.SITES_LIST && currentSettings.showFaviconsForSiteSearch && item.url && !item.url.includes(' OR ')) {
  1059.             const favicon = document.createElement('img');
  1060.             favicon.src = `https://www.google.com/s2/favicons?sz=32&domain_url=${item.url}`;
  1061.             favicon.classList.add(CSS.FAVICON);
  1062.             favicon.loading = 'lazy';
  1063.             textSpan.prepend(favicon);
  1064.         }
  1065.  
  1066.         let displayText = item.text;
  1067.         let paramName = ''; // To show "param=value"
  1068.  
  1069.         if (item.type === 'predefined' && item.originalKey) {
  1070.             displayText = _(item.originalKey);
  1071.             if (listId === IDS.COUNTRIES_LIST) { // Special handling for country icon+text
  1072.                 const parsed = Utils.parseIconAndText(displayText);
  1073.                 displayText = `${parsed.icon} ${parsed.text}`.trim();
  1074.             }
  1075.         }
  1076.  
  1077.         // Determine param name for display
  1078.         if (mapping) { // Mapping comes from getListMapping
  1079.             if (listId === IDS.LANG_LIST) paramName = ALL_SECTION_DEFINITIONS.find(s => s.id === 'sidebar-section-language').param;
  1080.             else if (listId === IDS.COUNTRIES_LIST) paramName = ALL_SECTION_DEFINITIONS.find(s => s.id === 'sidebar-section-country').param;
  1081.             else if (listId === IDS.SITES_LIST) paramName = 'site'; // Site search uses `site:` in query
  1082.             else if (listId === IDS.TIME_LIST) paramName = ALL_SECTION_DEFINITIONS.find(s => s.id === 'sidebar-section-time').param;
  1083.             else if (listId === IDS.FT_LIST) {
  1084.                 const ftSection = ALL_SECTION_DEFINITIONS.find(s => s.id === 'sidebar-section-filetype');
  1085.                 if (ftSection) paramName = ftSection.param;
  1086.             }
  1087.         }
  1088.  
  1089.         const valueForDisplay = item.value || item.url || _('value_empty');
  1090.         const fullTextContent = `${displayText} (${paramName}=${valueForDisplay})`;
  1091.         textSpan.appendChild(document.createTextNode(fullTextContent));
  1092.         textSpan.title = fullTextContent;
  1093.         listItem.appendChild(textSpan);
  1094.  
  1095.         const controlsSpan = document.createElement('span');
  1096.         controlsSpan.classList.add(CSS.CUSTOM_LIST_ITEM_CONTROLS);
  1097.  
  1098.         // Determine if item is "custom" or "predefined" for button display
  1099.         if (item.type === 'custom' || listId === IDS.SITES_LIST || listId === IDS.TIME_LIST || listId === IDS.FT_LIST) {
  1100.             // Sites, Time, Filetype lists are always treated as "custom" in terms of editability
  1101.             controlsSpan.innerHTML =
  1102.                 `<button class="${CSS.BUTTON_EDIT_ITEM}" title="${_('modal_button_edit_title')}">${SVG_ICONS.edit}</button> ` +
  1103.                 `<button class="${CSS.BUTTON_DELETE_ITEM}" title="${_('modal_button_delete_title')}">${SVG_ICONS.delete}</button>`;
  1104.             listItem.dataset[DATA_ATTR.ITEM_TYPE] = 'custom';
  1105.         } else if (item.type === 'predefined') {
  1106.             // Languages, Countries in mixed mode can have predefined items that can be removed (not deleted from source)
  1107.             controlsSpan.innerHTML =
  1108.                 `<button class="${CSS.BUTTON_REMOVE_FROM_LIST}" title="${_('modal_button_remove_from_list_title')}">${SVG_ICONS.removeFromList}</button>`;
  1109.             listItem.dataset[DATA_ATTR.ITEM_TYPE] = 'predefined';
  1110.         }
  1111.         listItem.appendChild(controlsSpan);
  1112.         return listItem;
  1113.     }
  1114.  
  1115.     /**
  1116.      * Populates a list element within a modal with items.
  1117.      * @param {string} listId - The ID of the <ul> element to populate.
  1118.      * @param {Array<Object>} items - An array of item data objects to render.
  1119.      * @param {Document|HTMLElement} [contextElement=document] - The context in which to find the list element.
  1120.      */
  1121.     function populateListInModal(listId, items, contextElement = document) {
  1122.         const listElement = contextElement.querySelector(`#${listId}`);
  1123.         if (!listElement) {
  1124.             console.warn(`${LOG_PREFIX} List element not found: #${listId} in context`, contextElement);
  1125.             return;
  1126.         }
  1127.         listElement.innerHTML = ''; // Clear existing items
  1128.         const fragment = document.createDocumentFragment();
  1129.         const mapping = getListMapping(listId); // Get mapping for param name display
  1130.  
  1131.         if (!Array.isArray(items)) items = []; // Ensure items is an array
  1132.  
  1133.         items.forEach((item, index) => {
  1134.             fragment.appendChild(createGenericListItem(index, item, listId, mapping));
  1135.         });
  1136.         listElement.appendChild(fragment);
  1137.     }
  1138.  
  1139.     /**
  1140.      * Retrieves the configuration object for a specific custom list type.
  1141.      * This centralized mapping provides all necessary information for managing a list,
  1142.      * such as the keys for accessing settings, DOM element selectors, and localization keys.
  1143.      * @param {string} listId - The ID of the list to get the mapping for.
  1144.      * @returns {Object|null} The configuration object, or null if not found.
  1145.      */
  1146.     function getListMapping(listId) {
  1147.         const listMappings = {
  1148.             [IDS.SITES_LIST]:     { itemsArrayKey: 'favoriteSites',           customItemsMasterKey: null,                 valueKey: 'url',   populateFn: populateListInModal, textInput: `#${IDS.NEW_SITE_NAME}`,    valueInput: `#${IDS.NEW_SITE_URL}`,    addButton: `#${IDS.ADD_SITE_BTN}`,    nameKey: 'section_site_search', isSortableMixed: false, predefinedSourceKey: null },
  1149.             [IDS.LANG_LIST]:      { itemsArrayKey: 'displayLanguages',        customItemsMasterKey: 'customLanguages',    valueKey: 'value', populateFn: populateListInModal, textInput: `#${IDS.NEW_LANG_TEXT}`,    valueInput: `#${IDS.NEW_LANG_VALUE}`,    addButton: `#${IDS.ADD_LANG_BTN}`,    nameKey: 'section_language',    isSortableMixed: true,  predefinedSourceKey: 'language' },
  1150.             [IDS.COUNTRIES_LIST]: { itemsArrayKey: 'displayCountries',      customItemsMasterKey: 'customCountries',  valueKey: 'value', populateFn: populateListInModal, textInput: `#${IDS.NEW_COUNTRY_TEXT}`, valueInput: `#${IDS.NEW_COUNTRY_VALUE}`, addButton: `#${IDS.ADD_COUNTRY_BTN}`, nameKey: 'section_country',   isSortableMixed: true,  predefinedSourceKey: 'country' },
  1151.             [IDS.TIME_LIST]:      { itemsArrayKey: 'customTimeRanges',        customItemsMasterKey: null,                 valueKey: 'value', populateFn: populateListInModal, textInput: `#${IDS.NEW_TIME_TEXT}`,    valueInput: `#${IDS.NEW_TIME_VALUE}`,    addButton: `#${IDS.ADD_TIME_BTN}`,    nameKey: 'section_time',        isSortableMixed: false, predefinedSourceKey: 'time' }, // predefinedSourceKey for enabling checkbox list
  1152.             [IDS.FT_LIST]:        { itemsArrayKey: 'customFiletypes',         customItemsMasterKey: null,                 valueKey: 'value', populateFn: populateListInModal, textInput: `#${IDS.NEW_FT_TEXT}`,      valueInput: `#${IDS.NEW_FT_VALUE}`,      addButton: `#${IDS.ADD_FT_BTN}`,      nameKey: 'section_filetype',    isSortableMixed: false, predefinedSourceKey: 'filetype' },// predefinedSourceKey for enabling checkbox list
  1153.         };
  1154.         return listMappings[listId] || null;
  1155.     }
  1156.  
  1157.     /**
  1158.      * Validates the format of a user-provided value in a custom item input field.
  1159.      * It uses regular expressions to check against expected formats for different types
  1160.      * (e.g., language codes, domains, filetypes). It also provides visual feedback on the input element.
  1161.      * @param {HTMLInputElement} inputElement - The input element to validate.
  1162.      * @returns {boolean} True if the input is valid or empty, false otherwise.
  1163.      */
  1164.     function validateCustomInput(inputElement) {
  1165.         if (!inputElement) return false; // Should not happen if called correctly
  1166.         const value = inputElement.value.trim();
  1167.         const id = inputElement.id;
  1168.         let isValid = false;
  1169.         let isEmpty = value === '';
  1170.  
  1171.         // Basic validation: name/text fields cannot be empty
  1172.         if (id === IDS.NEW_SITE_NAME || id === IDS.NEW_LANG_TEXT || id === IDS.NEW_TIME_TEXT || id === IDS.NEW_FT_TEXT || id === IDS.NEW_COUNTRY_TEXT) {
  1173.             isValid = !isEmpty;
  1174.         } else if (id === IDS.NEW_SITE_URL) {
  1175.             // Allow domains with paths, or TLD/SLD
  1176.             const singleSiteRegex = /^(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,})(?:\/[a-zA-Z0-9_.\-~%!$&()*+,;=:@/]+)*\/?)$|(?:^\.(?:[a-zA-Z0-9-]{1,63}\.)*[a-zA-Z]{2,63}$)/;
  1177.             const parts = Utils.parseCombinedValue(value); // Handles " OR " separation
  1178.             if (isEmpty) isValid = true;
  1179.             else if (parts.length > 0) isValid = parts.every(part => singleSiteRegex.test(part));
  1180.             else isValid = false;
  1181.         } else if (id === IDS.NEW_LANG_VALUE) {
  1182.             // Language code format: lang_xx or lang_xx-XX, multiple with |
  1183.             isValid = isEmpty || /^lang_[a-zA-Z]{2,3}(?:-[a-zA-Z0-9]{2,4})?(?:\|lang_[a-zA-Z]{2,3}(?:-[a-zA-Z0-9]{2,4})?)*$/.test(value);
  1184.         } else if (id === IDS.NEW_TIME_VALUE) {
  1185.             // Time value format: h, d, w, m, y, optionally followed by numbers
  1186.             isValid = isEmpty || /^[hdwmy]\d*$/.test(value);
  1187.         } else if (id === IDS.NEW_FT_VALUE) {
  1188.             // Filetype format: extension, multiple with " OR "
  1189.             const singleFiletypeRegex = /^[a-zA-Z0-9]+$/;
  1190.             const parts = Utils.parseCombinedValue(value);
  1191.             if (isEmpty) isValid = true;
  1192.             else if (parts.length > 0) isValid = parts.every(part => singleFiletypeRegex.test(part));
  1193.             else isValid = false;
  1194.         } else if (id === IDS.NEW_COUNTRY_VALUE) {
  1195.             // Country code format: countryXX (XX = uppercase country code)
  1196.             isValid = isEmpty || /^country[A-Z]{2}$/.test(value);
  1197.         }
  1198.  
  1199.         // Visual feedback
  1200.         inputElement.classList.remove('input-valid', 'input-invalid', CSS.HAS_ERROR); // Clear previous states
  1201.         _clearInputError(inputElement); // Clear any existing error message for this input
  1202.  
  1203.         if (!isEmpty) { // Only add validation classes if not empty
  1204.             inputElement.classList.add(isValid ? 'input-valid' : 'input-invalid');
  1205.             if (!isValid) inputElement.classList.add(CSS.HAS_ERROR); // Red border for error
  1206.         }
  1207.  
  1208.         return isValid || isEmpty; // Return true if format is valid OR if it's empty (emptiness check is separate)
  1209.     }
  1210.  
  1211.     /**
  1212.      * Finds the dedicated error message element associated with a specific input field.
  1213.      * @private
  1214.      * @param {HTMLInputElement} inputElement - The input field.
  1215.      * @returns {HTMLElement|null} The error message element, or null if not found.
  1216.      */
  1217.     function _getInputErrorElement(inputElement) {
  1218.         if (!inputElement || !inputElement.id) return null;
  1219.         // Try to find the specific error message span for this input
  1220.         let errorEl = inputElement.nextElementSibling;
  1221.         if (errorEl && errorEl.classList.contains(CSS.INPUT_ERROR_MSG) && errorEl.id === `${inputElement.id}-error-msg`) {
  1222.             return errorEl;
  1223.         }
  1224.         // Fallback: search within parent div if structured that way
  1225.         const parentDiv = inputElement.parentElement;
  1226.         if (parentDiv) {
  1227.             return parentDiv.querySelector(`#${inputElement.id}-error-msg`);
  1228.         }
  1229.         return null;
  1230.     }
  1231.  
  1232.     /**
  1233.      * Displays a validation error message for a specific input field.
  1234.      * @private
  1235.      * @param {HTMLInputElement} inputElement - The input field to show the error for.
  1236.      * @param {string} messageKey - The localization key for the error message.
  1237.      * @param {Object} [messageArgs={}] - Placeholders for the error message.
  1238.      */
  1239.     function _showInputError(inputElement, messageKey, messageArgs = {}) {
  1240.         if (!inputElement) return;
  1241.         const errorElement = _getInputErrorElement(inputElement);
  1242.         if (errorElement) {
  1243.             errorElement.textContent = _(messageKey, messageArgs);
  1244.             errorElement.classList.add(CSS.IS_ERROR_VISIBLE);
  1245.         }
  1246.         inputElement.classList.add(CSS.HAS_ERROR);
  1247.         inputElement.classList.remove('input-valid'); // Remove valid class if error
  1248.     }
  1249.  
  1250.     /**
  1251.      * Clears any validation error message and styling from an input field.
  1252.      * @private
  1253.      * @param {HTMLInputElement} inputElement - The input field to clear the error from.
  1254.      */
  1255.     function _clearInputError(inputElement) {
  1256.         if (!inputElement) return;
  1257.         const errorElement = _getInputErrorElement(inputElement);
  1258.         if (errorElement) {
  1259.             errorElement.textContent = '';
  1260.             errorElement.classList.remove(CSS.IS_ERROR_VISIBLE);
  1261.         }
  1262.         inputElement.classList.remove(CSS.HAS_ERROR, 'input-invalid');
  1263.     }
  1264.  
  1265.     /**
  1266.      * Clears all validation errors within a specific input group container.
  1267.      * @private
  1268.      * @param {HTMLElement} inputGroupElement - The container element for the input group.
  1269.      */
  1270.     function _clearAllInputErrorsInGroup(inputGroupElement) {
  1271.         if (!inputGroupElement) return;
  1272.         inputGroupElement.querySelectorAll(`input[type="text"]`).forEach(input => {
  1273.             _clearInputError(input);
  1274.             input.classList.remove('input-valid', 'input-invalid'); // Also clear validation classes
  1275.         });
  1276.     }
  1277.  
  1278.     /**
  1279.      * Shows a global message, typically in a message bar within the settings window.
  1280.      * Can also fall back to the NotificationManager or a standard alert if the target element isn't found.
  1281.      * @private
  1282.      * @param {string} messageKey - The localization key for the message.
  1283.      * @param {Object} [messageArgs={}] - Placeholders for the message string.
  1284.      * @param {('info'|'success'|'warning'|'error')} [type='info'] - The type of message.
  1285.      * @param {number} [duration=3000] - Duration in ms. A value <= 0 makes it persistent until cleared.
  1286.      * @param {string} [targetElementId=IDS.SETTINGS_MESSAGE_BAR] - The ID of the message bar element.
  1287.      */
  1288.     function _showGlobalMessage(messageKey, messageArgs = {}, type = 'info', duration = 3000, targetElementId = IDS.SETTINGS_MESSAGE_BAR) {
  1289.         const messageBar = document.getElementById(targetElementId);
  1290.         if (!messageBar) {
  1291.             // If specific target (like modal message bar) not found, try general notification or alert
  1292.             if (targetElementId !== IDS.SETTINGS_MESSAGE_BAR && NotificationManager && typeof NotificationManager.show === 'function') {
  1293.                 NotificationManager.show(messageKey, messageArgs, type, duration > 0 ? duration : 5000); // Longer for notifications if persistent
  1294.             } else {
  1295.                  const alertMsg = (typeof _ === 'function' && _(messageKey, messageArgs) && !(_(messageKey, messageArgs).startsWith('[ERR:')))
  1296.                     ? _(messageKey, messageArgs)
  1297.                     : `${messageKey} (args: ${JSON.stringify(messageArgs)})`;
  1298.                 alert(alertMsg);
  1299.             }
  1300.             return;
  1301.         }
  1302.  
  1303.         if (globalMessageTimeout && targetElementId === IDS.SETTINGS_MESSAGE_BAR) { // Clear previous timeout for main settings bar
  1304.             clearTimeout(globalMessageTimeout);
  1305.             globalMessageTimeout = null;
  1306.         }
  1307.  
  1308.         messageBar.textContent = _(messageKey, messageArgs);
  1309.         messageBar.className = `${CSS.MESSAGE_BAR}`; // Reset classes
  1310.         messageBar.classList.add(CSS[`MSG_${type.toUpperCase()}`] || CSS.MSG_INFO); // Add type-specific class
  1311.         messageBar.style.display = 'block';
  1312.  
  1313.         if (duration > 0 && targetElementId === IDS.SETTINGS_MESSAGE_BAR) {
  1314.             globalMessageTimeout = setTimeout(() => {
  1315.                 messageBar.style.display = 'none';
  1316.                 messageBar.textContent = '';
  1317.                 messageBar.className = CSS.MESSAGE_BAR; // Reset classes
  1318.             }, duration);
  1319.         }
  1320.     }
  1321. 	
  1322.     /**
  1323.      * Validates input fields for a new or edited custom item and prepares the data object.
  1324.      * @private
  1325.      * @param {HTMLInputElement} textInput - The input for the item's display text.
  1326.      * @param {HTMLInputElement} valueInput - The input for the item's value.
  1327.      * @param {string} itemTypeName - The localized name of the item type (e.g., "Language") for error messages.
  1328.      * @param {string} listId - The ID of the list the item belongs to.
  1329.      * @returns {{isValid: boolean, text?: string, value?: string, errorField?: HTMLInputElement}} An object indicating validity and containing data or the field with an error.
  1330.      */
  1331.     function _validateAndPrepareCustomItemData(textInput, valueInput, itemTypeName, listId) {
  1332.         if (!textInput || !valueInput) {
  1333.             _showGlobalMessage('alert_edit_failed_missing_fields', {}, 'error', 0); // Persistent error
  1334.             return { isValid: false };
  1335.         }
  1336.         _clearInputError(textInput);
  1337.         _clearInputError(valueInput);
  1338.  
  1339.         const text = textInput.value.trim();
  1340.         const value = valueInput.value.trim();
  1341.         let hint = '';
  1342.  
  1343.         if (text === '') {
  1344.             _showInputError(textInput, 'alert_enter_display_name', { type: itemTypeName });
  1345.             textInput.focus();
  1346.             return { isValid: false, errorField: textInput };
  1347.         } else {
  1348.              // If text is not empty, ensure no lingering error style
  1349.             textInput.classList.remove(CSS.HAS_ERROR);
  1350.         }
  1351.  
  1352.  
  1353.         if (value === '') {
  1354.             _showInputError(valueInput, 'alert_enter_value', { type: itemTypeName });
  1355.             valueInput.focus();
  1356.             return { isValid: false, errorField: valueInput };
  1357.         } else {
  1358.             const isValueFormatValid = validateCustomInput(valueInput); // This also handles visual feedback
  1359.             if (!isValueFormatValid) {
  1360.                  if (valueInput.classList.contains('input-invalid')) {
  1361.                      valueInput.focus();
  1362.                      return { isValid: false, errorField: valueInput };
  1363.                  }
  1364.                 if (listId === IDS.COUNTRIES_LIST) hint = _('modal_tooltip_country');
  1365.                 else if (listId === IDS.LANG_LIST) hint = _('modal_tooltip_language');
  1366.                 else if (listId === IDS.TIME_LIST) hint = _('modal_tooltip_time');
  1367.                 else if (listId === IDS.FT_LIST) hint = _('modal_tooltip_filetype');
  1368.                 else if (listId === IDS.SITES_LIST) hint = _('modal_tooltip_domain');
  1369.  
  1370.                 _showInputError(valueInput, 'alert_invalid_value_format', { type: itemTypeName, hint: hint });
  1371.                 valueInput.focus();
  1372.                 return { isValid: false, errorField: valueInput };
  1373.             }
  1374.         }
  1375.         return { isValid: true, text: text, value: value };
  1376.     }
  1377.  
  1378.     /**
  1379.      * Checks if a custom item with the same display name already exists in a list.
  1380.      * The check is case-insensitive.
  1381.      * @private
  1382.      * @param {string} text - The display text to check for duplicates.
  1383.      * @param {Array<Object>} itemsToCheck - The array of items to check against.
  1384.      * @param {string} listId - The ID of the list being checked.
  1385.      * @param {number} editingIndex - The index of the item being edited, to exclude it from the check.
  1386.      * @param {Object|null} editingItemInfoRef - Reference to the object holding information about the item currently being edited.
  1387.      * @returns {boolean} True if a duplicate is found, false otherwise.
  1388.      */
  1389.     function _isDuplicateCustomItem(text, itemsToCheck, listId, editingIndex, editingItemInfoRef) {
  1390.         const lowerText = text.toLowerCase();
  1391.         return itemsToCheck.some((item, idx) => {
  1392.             const itemIsCustom = item.type === 'custom' ||
  1393.                                  listId === IDS.SITES_LIST ||
  1394.                                  listId === IDS.TIME_LIST ||
  1395.                                  listId === IDS.FT_LIST;
  1396.             if (!itemIsCustom) return false;
  1397.  
  1398.             if (editingItemInfoRef && editingItemInfoRef.listId === listId && editingIndex === idx) {
  1399.                 if (editingItemInfoRef.originalText?.toLowerCase() === lowerText) {
  1400.                     return false;
  1401.                 }
  1402.             }
  1403.             return item.text.toLowerCase() === lowerText;
  1404.         });
  1405.     }
  1406. 	
  1407.     /**
  1408.      * Applies the appropriate theme classes to a given DOM element based on the current theme setting.
  1409.      * It handles standard themes (light, dark, system) and minimal themes.
  1410.      * @param {HTMLElement} element - The DOM element to apply the theme to.
  1411.      * @param {string} themeSetting - The current theme setting (e.g., 'system', 'dark', 'minimal-light').
  1412.      */
  1413.     function applyThemeToElement(element, themeSetting) {
  1414.         if (!element) return;
  1415.         // Remove all potential theme classes first
  1416.         element.classList.remove(
  1417.             CSS.THEME_LIGHT, CSS.THEME_DARK,
  1418.             CSS.THEME_MINIMAL, CSS.THEME_MINIMAL_LIGHT, CSS.THEME_MINIMAL_DARK
  1419.         );
  1420.  
  1421.         let effectiveTheme = themeSetting;
  1422.         const isSettingsOrModal = element.id === IDS.SETTINGS_WINDOW ||
  1423.                                   element.id === IDS.SETTINGS_OVERLAY ||
  1424.                                   element.classList.contains('settings-modal-content') ||
  1425.                                   element.classList.contains('settings-modal-overlay');
  1426.  
  1427.         if (isSettingsOrModal) {
  1428.             if (themeSetting === 'minimal-light') effectiveTheme = 'light';
  1429.             else if (themeSetting === 'minimal-dark') effectiveTheme = 'dark';
  1430.         }
  1431.  
  1432.         switch (effectiveTheme) {
  1433.             case 'dark':
  1434.                 element.classList.add(CSS.THEME_DARK);
  1435.                 break;
  1436.             case 'minimal-light':
  1437.                 element.classList.add(CSS.THEME_MINIMAL, CSS.THEME_MINIMAL_LIGHT);
  1438.                 break;
  1439.             case 'minimal-dark':
  1440.                 element.classList.add(CSS.THEME_MINIMAL, CSS.THEME_MINIMAL_DARK);
  1441.                 break;
  1442.             case 'system':
  1443.                 const systemIsDark = systemThemeMediaQuery && systemThemeMediaQuery.matches;
  1444.                 element.classList.add(systemIsDark ? CSS.THEME_DARK : CSS.THEME_LIGHT);
  1445.                 break;
  1446.             case 'light':
  1447.             default:
  1448.                 element.classList.add(CSS.THEME_LIGHT);
  1449.                 break;
  1450.         }
  1451.     }
  1452.  
  1453.     /**
  1454.      * @module PredefinedOptionChooser
  1455.      * A UI component that appears within a modal, allowing users to select and add
  1456.      * predefined options (like languages or countries) to a sortable display list.
  1457.      */
  1458.     const PredefinedOptionChooser = (function() {
  1459.         let _chooserContainer = null;
  1460.         let _currentListId = null;
  1461.         let _currentPredefinedSourceKey = null;
  1462.         let _currentDisplayItemsArrayRef = null; // Reference to the array like settings.displayLanguages
  1463.         let _currentModalContentContext = null; // The modal body where this chooser is shown
  1464.         let _onAddCallback = null;
  1465.  
  1466.         /**
  1467.          * Builds the HTML for the predefined option chooser modal.
  1468.          * @param {string} listId - The ID of the list being managed.
  1469.          * @param {string} predefinedSourceKey - The key for the predefined options in PREDEFINED_OPTIONS.
  1470.          * @param {Array<Object>} displayItemsArrayRef - A reference to the current array of items being displayed.
  1471.          * @returns {string|null} The generated HTML string for the chooser, or null if no options are available.
  1472.          */
  1473.         function _buildChooserHTML(listId, predefinedSourceKey, displayItemsArrayRef) {
  1474.             const allPredefinedSystemOptions = PREDEFINED_OPTIONS[predefinedSourceKey] || [];
  1475.  
  1476.             const currentDisplayedValues = new Set(
  1477.                 displayItemsArrayRef.filter(item => item.type === 'predefined').map(item => item.value)
  1478.             );
  1479.  
  1480.             const availablePredefinedToAdd = allPredefinedSystemOptions.filter(
  1481.                 opt => !currentDisplayedValues.has(opt.value)
  1482.             );
  1483.  
  1484.             if (availablePredefinedToAdd.length === 0) {
  1485.                 const itemTypeName = getListMapping(listId)?.nameKey ? _(getListMapping(listId).nameKey) : predefinedSourceKey;
  1486.                 _showGlobalMessage('alert_no_more_predefined_to_add', { type: itemTypeName }, 'info', 3000, IDS.SETTINGS_MESSAGE_BAR);
  1487.                 return null;
  1488.             }
  1489.  
  1490.             const listItemsHTML = availablePredefinedToAdd.map(opt => {
  1491.                 let displayText = _(opt.textKey);
  1492.                  if (listId === IDS.COUNTRIES_LIST) {
  1493.                     const parsed = Utils.parseIconAndText(displayText);
  1494.                     displayText = `${parsed.icon} ${parsed.text}`.trim();
  1495.                 }
  1496.                 const sanitizedValueForId = opt.value.replace(/[^a-zA-Z0-9-_]/g, '');
  1497.                 return `
  1498.                     <li class="${CSS.MODAL_PREDEFINED_CHOOSER_ITEM}">
  1499.                         <input type="checkbox" value="${opt.value}" id="chooser-${sanitizedValueForId}">
  1500.                         <label for="chooser-${sanitizedValueForId}">${displayText}</label>
  1501.                     </li>`;
  1502.             }).join('');
  1503.  
  1504.             return `
  1505.                 <ul id="${IDS.MODAL_PREDEFINED_CHOOSER_LIST}">${listItemsHTML}</ul>
  1506.                 <div class="chooser-buttons" style="text-align: right; margin-top: 10px;">
  1507.                     <button id="${IDS.MODAL_PREDEFINED_CHOOSER_ADD_BTN}" class="${CSS.BUTTON}" style="margin-right: 5px;">${_('modal_button_add_title')}</button>
  1508.                     <button id="${IDS.MODAL_PREDEFINED_CHOOSER_CANCEL_BTN}" class="${CSS.BUTTON}">${_('settings_cancel_button')}</button>
  1509.                 </div>`;
  1510.         }
  1511.  
  1512.         /**
  1513.          * Handles the click event of the "Add" button in the chooser. It gathers selected
  1514.          * values and triggers the callback function.
  1515.          * @private
  1516.          */
  1517.         function _handleAdd() {
  1518.             if (!_chooserContainer) return;
  1519.             const selectedValues = [];
  1520.             _chooserContainer.querySelectorAll(`#${IDS.MODAL_PREDEFINED_CHOOSER_LIST} input[type="checkbox"]:checked`).forEach(cb => {
  1521.                 selectedValues.push(cb.value);
  1522.             });
  1523.  
  1524.             if (selectedValues.length > 0 && typeof _onAddCallback === 'function') {
  1525.                 _onAddCallback(selectedValues, _currentPredefinedSourceKey, _currentDisplayItemsArrayRef, _currentListId, _currentModalContentContext);
  1526.             }
  1527.             hide();
  1528.         }
  1529.  
  1530.         /**
  1531.          * Shows the predefined option chooser UI.
  1532.          * @param {string} manageType - The type of item being managed (e.g., 'language').
  1533.          * @param {string} listId - The ID of the list to add items to.
  1534.          * @param {string} predefinedSourceKey - The key to look up predefined options.
  1535.          * @param {Array<Object>} displayItemsArrayRef - A reference to the settings array that will be modified.
  1536.          * @param {HTMLElement} contextElement - The parent element where the chooser will be inserted.
  1537.          * @param {Function} onAddCb - The callback function to execute when items are added.
  1538.          */
  1539.         function show(manageType, listId, predefinedSourceKey, displayItemsArrayRef, contextElement, onAddCb) {
  1540.             hide();
  1541.  
  1542.             _currentListId = listId;
  1543.             _currentPredefinedSourceKey = predefinedSourceKey;
  1544.             _currentDisplayItemsArrayRef = displayItemsArrayRef;
  1545.             _currentModalContentContext = contextElement;
  1546.             _onAddCallback = onAddCb;
  1547.  
  1548.             const chooserHTML = _buildChooserHTML(listId, predefinedSourceKey, displayItemsArrayRef);
  1549.             if (!chooserHTML) return;
  1550.  
  1551.             _chooserContainer = document.createElement('div');
  1552.             _chooserContainer.id = IDS.MODAL_PREDEFINED_CHOOSER_CONTAINER;
  1553.             _chooserContainer.classList.add(CSS.MODAL_PREDEFINED_CHOOSER);
  1554.             _chooserContainer.innerHTML = chooserHTML;
  1555.  
  1556.             const addNewBtn = contextElement.querySelector(`#${IDS.MODAL_ADD_NEW_OPTION_BTN}`);
  1557.             if (addNewBtn && addNewBtn.parentNode) {
  1558.                 addNewBtn.insertAdjacentElement('afterend', _chooserContainer);
  1559.             } else {
  1560.                 const mainListElement = contextElement.querySelector(`#${listId}`);
  1561.                 mainListElement?.insertAdjacentElement('beforebegin', _chooserContainer);
  1562.             }
  1563.             _chooserContainer.style.display = 'block';
  1564.  
  1565.             _chooserContainer.querySelector(`#${IDS.MODAL_PREDEFINED_CHOOSER_ADD_BTN}`).addEventListener('click', _handleAdd);
  1566.             _chooserContainer.querySelector(`#${IDS.MODAL_PREDEFINED_CHOOSER_CANCEL_BTN}`).addEventListener('click', hide);
  1567.         }
  1568.  
  1569.         /**
  1570.          * Hides and cleans up the chooser UI.
  1571.          */
  1572.         function hide() {
  1573.             if (_chooserContainer) {
  1574.                 _chooserContainer.remove();
  1575.                 _chooserContainer = null;
  1576.             }
  1577.             _currentListId = null;
  1578.             _currentPredefinedSourceKey = null;
  1579.             _currentDisplayItemsArrayRef = null;
  1580.             _currentModalContentContext = null;
  1581.             _onAddCallback = null;
  1582.         }
  1583.  
  1584.         return {
  1585.             show: show,
  1586.             hide: hide,
  1587.             isOpen: function() { return !!_chooserContainer; }
  1588.         };
  1589.     })();
  1590.  
  1591.     /**
  1592.      * @module ModalManager
  1593.      * Manages the creation, display, and interaction logic for all modal dialogs.
  1594.      * This module is responsible for the complex UI where users manage their custom
  1595.      * lists of sites, languages, etc., including adding, editing, deleting, and reordering items.
  1596.      */
  1597.     const ModalManager = (function() {
  1598.         let _currentModal = null;
  1599.         let _currentModalContent = null;
  1600.         let _editingItemInfo = null;
  1601.         let _draggedListItem = null;
  1602.  
  1603.         const modalConfigsData = {
  1604.             'site':     { modalTitleKey: 'manageSitesTitle',     listId: IDS.SITES_LIST,     itemsArrayKey: 'favoriteSites',           customItemsMasterKey: null,                 textPKey: 'modal_placeholder_name',   valPKey: 'modal_placeholder_domain', hintKey: 'modal_hint_domain',   fmtKey: 'modal_tooltip_domain',   isSortableMixed: false, predefinedSourceKey: null,       hasPredefinedToggles: false, manageType: 'site' },
  1605.             'language': { modalTitleKey: 'manageLanguagesTitle', listId: IDS.LANG_LIST,      itemsArrayKey: 'displayLanguages',        customItemsMasterKey: 'customLanguages',    textPKey: 'modal_placeholder_text',   valPKey: 'modal_placeholder_value',  hintKey: 'modal_hint_language', fmtKey: 'modal_tooltip_language', predefinedSourceKey: 'language', isSortableMixed: true,         hasPredefinedToggles: false, manageType: 'language' },
  1606.             'country':  { modalTitleKey: 'manageCountriesTitle', listId: IDS.COUNTRIES_LIST, itemsArrayKey: 'displayCountries',      customItemsMasterKey: 'customCountries',  textPKey: 'modal_placeholder_text',   valPKey: 'modal_placeholder_value',  hintKey: 'modal_hint_country',  fmtKey: 'modal_tooltip_country',  predefinedSourceKey: 'country',  isSortableMixed: true,         hasPredefinedToggles: false, manageType: 'country'  },
  1607.             'time':     { modalTitleKey: 'manageTimeRangesTitle',listId: IDS.TIME_LIST,      itemsArrayKey: 'customTimeRanges',        customItemsMasterKey: null,                 textPKey: 'modal_placeholder_text',   valPKey: 'modal_placeholder_value',  hintKey: 'modal_hint_time',     fmtKey: 'modal_tooltip_time',     predefinedSourceKey: 'time',     isSortableMixed: false,        hasPredefinedToggles: true, manageType: 'time' },
  1608.             'filetype': { modalTitleKey: 'manageFileTypesTitle', listId: IDS.FT_LIST,        itemsArrayKey: 'customFiletypes',         customItemsMasterKey: null,                 textPKey: 'modal_placeholder_text',   valPKey: 'modal_placeholder_value',  hintKey: 'modal_hint_filetype', fmtKey: 'modal_tooltip_filetype', predefinedSourceKey: 'filetype', isSortableMixed: false,        hasPredefinedToggles: true, manageType: 'filetype' },
  1609.         };
  1610.  
  1611.         /**
  1612.          * Creates the HTML for the section that allows users to enable/disable
  1613.          * predefined options (e.g., for time ranges or filetypes).
  1614.          * @private
  1615.          * @param {string} currentOptionType - The key for the option type in `PREDEFINED_OPTIONS`.
  1616.          * @param {string} typeNameKey - The localization key for the name of this option type.
  1617.          * @param {Object} predefinedOptionsSource - A reference to the `PREDEFINED_OPTIONS` object.
  1618.          * @param {Set<string>} enabledPredefinedValues - A set of the currently enabled predefined values.
  1619.          * @returns {string} The generated HTML string.
  1620.          */
  1621.         function _createPredefinedOptionsSectionHTML(currentOptionType, typeNameKey, predefinedOptionsSource, enabledPredefinedValues) {
  1622.             const label = _(typeNameKey);
  1623.             const optionsHTML = (predefinedOptionsSource[currentOptionType] || []).map(option => {
  1624.                 const checkboxId = `predefined-${currentOptionType}-${option.value.replace(/[^a-zA-Z0-9-_]/g, '')}`;
  1625.                 const translatedOptionText = _(option.textKey);
  1626.                 const isChecked = enabledPredefinedValues.has(option.value);
  1627.                 return `
  1628.                     <li>
  1629.                         <input type="checkbox" id="${checkboxId}" value="${option.value}" data-option-type="${currentOptionType}" ${isChecked ? 'checked' : ''}>
  1630.                         <label for="${checkboxId}">${translatedOptionText}</label>
  1631.                     </li>`;
  1632.             }).join('');
  1633.  
  1634.             return `
  1635.                 <label style="font-weight: bold;">${_('modal_label_enable_predefined', { type: label })}</label>
  1636.                 <ul class="predefined-options-list" data-option-type="${currentOptionType}">${optionsHTML}</ul>`;
  1637.         }
  1638. 		
  1639.         /**
  1640.          * Creates the HTML for the list of custom/display items and the input fields
  1641.          * for adding/editing them within a modal.
  1642.          * @private
  1643.          * @param {string} currentListId - The ID for the `<ul>` element.
  1644.          * @param {string} textPlaceholderKey - The localization key for the text input's placeholder.
  1645.          * @param {string} valuePlaceholderKey - The localization key for the value input's placeholder.
  1646.          * @param {string} hintKey - The localization key for the hint text below the inputs.
  1647.          * @param {string} formatTooltipKey - The localization key for the value input's tooltip.
  1648.          * @param {string} itemTypeName - The localized name of the item type.
  1649.          * @param {boolean} [isSortableMixed=false] - True if the list mixes user-custom and predefined items.
  1650.          * @returns {string} The generated HTML string.
  1651.          */
  1652.         function _createModalListAndInputHTML(currentListId, textPlaceholderKey, valuePlaceholderKey, hintKey, formatTooltipKey, itemTypeName, isSortableMixed = false) {
  1653.             const mapping = getListMapping(currentListId);
  1654.             const typeNameToDisplay = itemTypeName || (mapping ? _(mapping.nameKey) : 'Items');
  1655.  
  1656.             let headerHTML = '';
  1657.             let addNewOptionButtonHTML = '';
  1658.  
  1659.             if (isSortableMixed) {
  1660.                 headerHTML = `<label style="font-weight: bold; margin-top: 0.5em; display: block;">${_('modal_label_display_options_for', {type: typeNameToDisplay})}</label>`;
  1661.                 addNewOptionButtonHTML = `
  1662.                     <div style="margin-bottom: 0.5em;">
  1663.                         <button id="${IDS.MODAL_ADD_NEW_OPTION_BTN}" class="${CSS.MODAL_BUTTON_ADD_NEW} ${CSS.BUTTON}">${_('modal_button_add_new_option')}</button>
  1664.                     </div>`;
  1665.             } else {
  1666.                  headerHTML = `<label style="font-weight: bold; margin-top: 0.5em; display: block;">${_('modal_label_my_custom', { type: typeNameToDisplay })}</label>`;
  1667.             }
  1668.  
  1669.             const textInputId = mapping ? mapping.textInput.substring(1) : `new-custom-${currentListId}-text`;
  1670.             const valueInputId = mapping ? mapping.valueInput.substring(1) : `new-custom-${currentListId}-value`;
  1671.             const addButtonId = mapping ? mapping.addButton.substring(1) : `add-custom-${currentListId}-button`;
  1672.  
  1673.             const inputGroupHTML = `
  1674.                 <div class="${CSS.CUSTOM_LIST_INPUT_GROUP}">
  1675.                     <div>
  1676.                         <input type="text" id="${textInputId}" placeholder="${_(textPlaceholderKey)}">
  1677.                         <span id="${textInputId}-error-msg" class="${CSS.INPUT_ERROR_MSG}"></span>
  1678.                     </div>
  1679.                     <div>
  1680.                         <input type="text" id="${valueInputId}" placeholder="${_(valuePlaceholderKey)}" title="${_(formatTooltipKey)}">
  1681.                         <span id="${valueInputId}-error-msg" class="${CSS.INPUT_ERROR_MSG}"></span>
  1682.                     </div>
  1683.                     <button id="${addButtonId}" class="${CSS.BUTTON_ADD_CUSTOM} custom-list-action-button" data-list-id="${currentListId}" title="${_('modal_button_add_title')}">${SVG_ICONS.add}</button>
  1684.                     <button class="cancel-edit-button" style="display: none;" title="${_('modal_button_cancel_edit_title')}">${SVG_ICONS.close}</button>
  1685.                 </div>`;
  1686.             const hintHTML = `<span class="${CSS.SETTING_VALUE_HINT}">${_(hintKey)}</span>`;
  1687.  
  1688.             return `${addNewOptionButtonHTML}${headerHTML}<ul id="${currentListId}" class="${CSS.CUSTOM_LIST}"></ul>${inputGroupHTML}${hintHTML}`;
  1689.         }
  1690.  
  1691.         /**
  1692.          * Resets the modal's input fields and buttons from an "editing" state back to a "new item" state.
  1693.          * @private
  1694.          * @param {HTMLElement} [contextElement=_currentModalContent] - The context in which to find the elements.
  1695.          */
  1696.         function _resetEditStateInternal(contextElement = _currentModalContent) {
  1697.             if (_editingItemInfo) {
  1698.                 const mapping = getListMapping(_editingItemInfo.listId);
  1699.                 if (_editingItemInfo.addButton) {
  1700.                     _editingItemInfo.addButton.innerHTML = SVG_ICONS.add;
  1701.                     _editingItemInfo.addButton.title = _('modal_button_add_title');
  1702.                     _editingItemInfo.addButton.classList.remove('update-mode');
  1703.                 }
  1704.                 if (_editingItemInfo.cancelButton) {
  1705.                     _editingItemInfo.cancelButton.style.display = 'none';
  1706.                 }
  1707.  
  1708.                 if (mapping && contextElement) {
  1709.                     const textInput = contextElement.querySelector(mapping.textInput);
  1710.                     const valueInput = contextElement.querySelector(mapping.valueInput);
  1711.                     const inputGroup = textInput?.closest(`.${CSS.CUSTOM_LIST_INPUT_GROUP}`);
  1712.                     if(inputGroup) _clearAllInputErrorsInGroup(inputGroup);
  1713.  
  1714.                     if (textInput) { textInput.value = ''; textInput.classList.remove('input-valid', 'input-invalid', CSS.HAS_ERROR); _clearInputError(textInput); }
  1715.                     if (valueInput) { valueInput.value = ''; valueInput.classList.remove('input-valid', 'input-invalid', CSS.HAS_ERROR); _clearInputError(valueInput); }
  1716.                 }
  1717.             }
  1718.             _editingItemInfo = null;
  1719.         }
  1720.  
  1721.         /**
  1722.          * Prepares the modal's input fields for editing an existing item by populating them
  1723.          * with the item's data and changing the "Add" button to an "Update" button.
  1724.          * @private
  1725.          * @param {Object} item - The item data object.
  1726.          * @param {number} index - The index of the item.
  1727.          * @param {string} listId - The ID of the parent list.
  1728.          * @param {Object} mapping - The configuration mapping for this list type.
  1729.          * @param {HTMLElement} contextElement - The modal's content element.
  1730.          */
  1731.         function _prepareEditItemActionInternal(item, index, listId, mapping, contextElement) {
  1732.             const textInput = contextElement.querySelector(mapping.textInput);
  1733.             const valueInput = contextElement.querySelector(mapping.valueInput);
  1734.             const addButton = contextElement.querySelector(mapping.addButton);
  1735.             const cancelButton = addButton?.parentElement?.querySelector('.cancel-edit-button');
  1736.  
  1737.             if (textInput && valueInput && addButton && cancelButton) {
  1738.                 if (_editingItemInfo && (_editingItemInfo.listId !== listId || _editingItemInfo.index !== index)) {
  1739.                     _resetEditStateInternal(contextElement);
  1740.                 }
  1741.  
  1742.                 textInput.value = item.text;
  1743.                 valueInput.value = item[mapping.valueKey] || item.value;
  1744.  
  1745.                 _editingItemInfo = {
  1746.                     listId,
  1747.                     index,
  1748.                     originalValue: item[mapping.valueKey] || item.value,
  1749.                     originalText: item.text,
  1750.                     addButton,
  1751.                     cancelButton,
  1752.                     arrayKey: mapping.itemsArrayKey || mapping.displayArrayKey
  1753.                 };
  1754.  
  1755.                 addButton.innerHTML = SVG_ICONS.update;
  1756.                 addButton.title = _('modal_button_update_title');
  1757.                 addButton.classList.add('update-mode');
  1758.                 cancelButton.style.display = 'inline-block';
  1759.  
  1760.                 validateCustomInput(valueInput);
  1761.                 validateCustomInput(textInput);
  1762.                 textInput.focus();
  1763.             } else {
  1764.                 const errorSourceInput = textInput || valueInput || addButton?.closest(`.${CSS.CUSTOM_LIST_INPUT_GROUP}`)?.querySelector('input[type="text"]');
  1765.                 if (errorSourceInput) _showInputError(errorSourceInput, 'alert_edit_failed_missing_fields');
  1766.                 else _showGlobalMessage('alert_edit_failed_missing_fields', {}, 'error', 0, _currentModalContent?.querySelector(`#${IDS.SETTINGS_MESSAGE_BAR}`) ? IDS.SETTINGS_MESSAGE_BAR : null);
  1767.             }
  1768.         }
  1769.  
  1770.         /**
  1771.          * Handles clicks on edit, delete, or remove buttons within a custom list in a modal.
  1772.          * @private
  1773.          * @param {Event} event - The click event.
  1774.          * @param {HTMLElement} contextElement - The modal's content element.
  1775.          * @param {Array<Object>} itemsArrayRef - A reference to the array of items being modified.
  1776.          */
  1777.         function _handleCustomListActionsInternal(event, contextElement, itemsArrayRef) {
  1778.             const button = event.target.closest(`button.${CSS.BUTTON_EDIT_ITEM}, button.${CSS.BUTTON_DELETE_ITEM}, button.${CSS.BUTTON_REMOVE_FROM_LIST}`);
  1779.             if (!button) return;
  1780.  
  1781.             const listItem = button.closest(`li[data-${DATA_ATTR.INDEX}][data-list-id]`);
  1782.             if (!listItem) return;
  1783.  
  1784.             const index = parseInt(listItem.dataset[DATA_ATTR.INDEX], 10);
  1785.             const listId = listItem.getAttribute('data-list-id');
  1786.  
  1787.             if (isNaN(index) || !listId || index < 0 || index >= itemsArrayRef.length) return;
  1788.  
  1789.             const mapping = getListMapping(listId);
  1790.             if (!mapping) return;
  1791.  
  1792.             const item = itemsArrayRef[index];
  1793.             if (!item) return;
  1794.  
  1795.             const itemIsTrulyCustom = item.type === 'custom' ||
  1796.                                      (!item.type && (listId === IDS.SITES_LIST || listId === IDS.TIME_LIST || listId === IDS.FT_LIST));
  1797.  
  1798.             if (button.classList.contains(CSS.BUTTON_DELETE_ITEM) && itemIsTrulyCustom) {
  1799.                 if (confirm(_('confirm_delete_item', { name: item.text }))) {
  1800.                     if (_editingItemInfo && _editingItemInfo.listId === listId && _editingItemInfo.index === index) {
  1801.                         _resetEditStateInternal(contextElement);
  1802.                     }
  1803.                     itemsArrayRef.splice(index, 1);
  1804.                     mapping.populateFn(listId, itemsArrayRef, contextElement);
  1805.                 }
  1806.             } else if (button.classList.contains(CSS.BUTTON_REMOVE_FROM_LIST) && item.type === 'predefined') {
  1807.                 if (confirm(_('confirm_remove_item_from_list', { name: (item.originalKey ? _(item.originalKey) : item.text) }))) {
  1808.                     itemsArrayRef.splice(index, 1);
  1809.                     mapping.populateFn(listId, itemsArrayRef, contextElement);
  1810.                 }
  1811.             } else if (button.classList.contains(CSS.BUTTON_EDIT_ITEM) && itemIsTrulyCustom) {
  1812.                 _prepareEditItemActionInternal(item, index, listId, mapping, contextElement);
  1813.             }
  1814.         }
  1815.  
  1816.         /**
  1817.          * Handles the submission of the form for adding or updating a custom item.
  1818.          * It performs validation, checks for duplicates, and then updates the item array.
  1819.          * @private
  1820.          * @param {string} listId - The ID of the list being modified.
  1821.          * @param {HTMLElement} contextElement - The modal's content element.
  1822.          * @param {Array<Object>} itemsArrayRef - A reference to the array of items.
  1823.          */
  1824.         function _handleCustomItemSubmitInternal(listId, contextElement, itemsArrayRef) {
  1825.             const mapping = getListMapping(listId);
  1826.             if (!mapping) return;
  1827.  
  1828.             const itemTypeName = _(mapping.nameKey);
  1829.             const textInput = contextElement.querySelector(mapping.textInput);
  1830.             const valueInput = contextElement.querySelector(mapping.valueInput);
  1831.  
  1832.             const inputGroup = textInput?.closest(`.${CSS.CUSTOM_LIST_INPUT_GROUP}`);
  1833.             if (inputGroup) _clearAllInputErrorsInGroup(inputGroup);
  1834.  
  1835.             const validationResult = _validateAndPrepareCustomItemData(textInput, valueInput, itemTypeName, listId);
  1836.             if (!validationResult.isValid) {
  1837.                 if (validationResult.errorField) validationResult.errorField.focus();
  1838.                 return;
  1839.             }
  1840.  
  1841.             const { text, value } = validationResult;
  1842.             const editingIdx = (_editingItemInfo && _editingItemInfo.listId === listId) ? _editingItemInfo.index : -1;
  1843.  
  1844.             let isDuplicate;
  1845.             if (mapping.isSortableMixed) {
  1846.                 isDuplicate = _isDuplicateCustomItem(text, itemsArrayRef, listId, editingIdx, _editingItemInfo);
  1847.             } else {
  1848.                 isDuplicate = itemsArrayRef.some((item, idx) => {
  1849.                     if (editingIdx === idx && (_editingItemInfo?.originalText?.toLowerCase() === text.toLowerCase())) return false;
  1850.                     return item.text.toLowerCase() === text.toLowerCase();
  1851.                 });
  1852.             }
  1853.  
  1854.             if (isDuplicate) {
  1855.                 if (textInput) _showInputError(textInput, 'alert_duplicate_name', { name: text });
  1856.                 textInput?.focus();
  1857.                 return;
  1858.             }
  1859.  
  1860.             let newItemData;
  1861.             if (listId === IDS.SITES_LIST) {
  1862.                 newItemData = { text: text, url: value };
  1863.             } else if (mapping.isSortableMixed) {
  1864.                 newItemData = { id: value, text: text, value: value, type: 'custom' };
  1865.             } else {
  1866.                 newItemData = { text: text, value: value };
  1867.             }
  1868.  
  1869.             const itemBeingEdited = (editingIdx > -1) ? itemsArrayRef[editingIdx] : null;
  1870.             const itemBeingEditedIsCustom = itemBeingEdited &&
  1871.                                            (itemBeingEdited.type === 'custom' ||
  1872.                                             listId === IDS.SITES_LIST ||
  1873.                                             listId === IDS.TIME_LIST ||
  1874.                                             listId === IDS.FT_LIST);
  1875.  
  1876.             if (editingIdx > -1 && itemBeingEditedIsCustom) {
  1877.                 itemsArrayRef[editingIdx] = {...itemsArrayRef[editingIdx], ...newItemData };
  1878.                 _resetEditStateInternal(contextElement);
  1879.             } else {
  1880.                 itemsArrayRef.push(newItemData);
  1881.             }
  1882.  
  1883.             mapping.populateFn(listId, itemsArrayRef, contextElement);
  1884.  
  1885.             if (!_editingItemInfo || _editingItemInfo.listId !== listId) {
  1886.                 if (textInput) { textInput.value = ''; _clearInputError(textInput); textInput.focus(); }
  1887.                 if (valueInput) { valueInput.value = ''; _clearInputError(valueInput); }
  1888.             }
  1889.         }
  1890.  
  1891.         /**
  1892.          * Determines which list item is the drop target during a drag-and-drop operation.
  1893.          * @private
  1894.          * @param {HTMLElement} container - The list container (`<ul>`).
  1895.          * @param {number} y - The current y-coordinate of the cursor.
  1896.          * @returns {HTMLElement|undefined} The list item element that is the drop target.
  1897.          */
  1898.         function _getDragAfterModalListItem(container, y) {
  1899.             const draggableElements = [...container.querySelectorAll(`li[draggable="true"]:not(.${CSS.IS_DRAGGING})`)];
  1900.             return draggableElements.reduce((closest, child) => {
  1901.                 const box = child.getBoundingClientRect();
  1902.                 const offset = y - box.top - box.height / 2;
  1903.                 if (offset < 0 && offset > closest.offset) {
  1904.                     return { offset: offset, element: child };
  1905.                 } else {
  1906.                     return closest;
  1907.                 }
  1908.             }, { offset: Number.NEGATIVE_INFINITY }).element;
  1909.         }
  1910.  
  1911.         /**
  1912.          * Handles the `dragstart` event for a list item in a modal.
  1913.          * @private
  1914.          * @param {DragEvent} event - The `dragstart` event.
  1915.          */
  1916.         function _handleModalListDragStart(event) {
  1917.             if (!event.target.matches('li[draggable="true"]')) return;
  1918.             _draggedListItem = event.target;
  1919.             event.dataTransfer.effectAllowed = 'move';
  1920.             event.dataTransfer.setData('text/plain', _draggedListItem.dataset.index);
  1921.             _draggedListItem.classList.add(CSS.IS_DRAGGING);
  1922.  
  1923.             const list = _draggedListItem.closest('ul');
  1924.             if (list) { list.querySelectorAll(`li:not(.${CSS.IS_DRAGGING})`).forEach(li => li.style.pointerEvents = 'none'); }
  1925.         }
  1926.  
  1927.         /**
  1928.          * Handles the `dragover` event to provide visual feedback for the drop target.
  1929.          * @private
  1930.          * @param {DragEvent} event - The `dragover` event.
  1931.          */
  1932.         function _handleModalListDragOver(event) {
  1933.             event.preventDefault();
  1934.             const listElement = event.currentTarget;
  1935.             listElement.querySelectorAll(`li.${CSS.IS_DRAG_OVER}`).forEach(li => li.classList.remove(CSS.IS_DRAG_OVER));
  1936.  
  1937.             const targetItem = event.target.closest('li[draggable="true"]');
  1938.             if (targetItem && targetItem !== _draggedListItem) {
  1939.                 targetItem.classList.add(CSS.IS_DRAG_OVER);
  1940.             } else {
  1941.                 const afterElement = _getDragAfterModalListItem(listElement, event.clientY);
  1942.                 if (afterElement) {
  1943.                     afterElement.classList.add(CSS.IS_DRAG_OVER);
  1944.                 }
  1945.             }
  1946.         }
  1947. 		
  1948.         /**
  1949.          * Handles the `dragleave` event to clear visual feedback.
  1950.          * @private
  1951.          * @param {DragEvent} event - The `dragleave` event.
  1952.          */
  1953.         function _handleModalListDragLeave(event) {
  1954.             const listElement = event.currentTarget;
  1955.             if (event.relatedTarget && listElement.contains(event.relatedTarget)) return;
  1956.             listElement.querySelectorAll(`li.${CSS.IS_DRAG_OVER}`).forEach(li => li.classList.remove(CSS.IS_DRAG_OVER));
  1957.         }
  1958.  
  1959.         /**
  1960.          * Handles the `drop` event to reorder the items in the backing array.
  1961.          * @private
  1962.          * @param {DragEvent} event - The `drop` event.
  1963.          * @param {string} listId - The ID of the list being modified.
  1964.          * @param {Array<Object>} itemsArrayRef - A reference to the array of items.
  1965.          */
  1966.         function _handleModalListDrop(event, listId, itemsArrayRef) {
  1967.             event.preventDefault();
  1968.             if (!_draggedListItem) return;
  1969.  
  1970.             const draggedIndexOriginal = parseInt(event.dataTransfer.getData('text/plain'), 10);
  1971.             if (isNaN(draggedIndexOriginal) || draggedIndexOriginal < 0 || draggedIndexOriginal >= itemsArrayRef.length) {
  1972.                 _handleModalListDragEnd(event.currentTarget);
  1973.                 return;
  1974.             }
  1975.  
  1976.             const listElement = event.currentTarget;
  1977.             const mapping = getListMapping(listId);
  1978.             if (!mapping) { _handleModalListDragEnd(listElement); return; }
  1979.  
  1980.             const draggedItemData = itemsArrayRef[draggedIndexOriginal];
  1981.             if (!draggedItemData) { _handleModalListDragEnd(listElement); return; }
  1982.  
  1983.             const itemsWithoutDragged = itemsArrayRef.filter((item, index) => index !== draggedIndexOriginal);
  1984.             const afterElement = _getDragAfterModalListItem(listElement, event.clientY);
  1985.             let newIndexInSplicedArray;
  1986.  
  1987.             if (afterElement) {
  1988.                 const originalIndexOfAfterElement = parseInt(afterElement.dataset.index, 10);
  1989.                 let countSkipped = 0; newIndexInSplicedArray = -1;
  1990.                 for(let i=0; i < itemsArrayRef.length; i++) {
  1991.                     if (i === draggedIndexOriginal) continue;
  1992.                     if (i === originalIndexOfAfterElement) {
  1993.                         newIndexInSplicedArray = countSkipped;
  1994.                         break;
  1995.                     }
  1996.                     countSkipped++;
  1997.                 }
  1998.                  if (newIndexInSplicedArray === -1 && originalIndexOfAfterElement === itemsArrayRef.length -1 && draggedIndexOriginal < originalIndexOfAfterElement) {
  1999.                     newIndexInSplicedArray = itemsWithoutDragged.length;
  2000.                 } else if (newIndexInSplicedArray === -1) {
  2001.                     newIndexInSplicedArray = itemsWithoutDragged.length;
  2002.                 }
  2003.             } else {
  2004.                 newIndexInSplicedArray = itemsWithoutDragged.length;
  2005.             }
  2006.  
  2007.             itemsWithoutDragged.splice(newIndexInSplicedArray, 0, draggedItemData);
  2008.             itemsArrayRef.length = 0;
  2009.             itemsWithoutDragged.forEach(item => itemsArrayRef.push(item));
  2010.  
  2011.             _handleModalListDragEnd(listElement);
  2012.             mapping.populateFn(listId, itemsArrayRef, _currentModalContent);
  2013.  
  2014.             const newLiElements = listElement.querySelectorAll('li');
  2015.             newLiElements.forEach((li, idx) => {
  2016.                 li.dataset.index = idx;
  2017.             });
  2018.         }
  2019.  
  2020.         /**
  2021.          * Cleans up the state and styling after a drag-and-drop operation ends.
  2022.          * @private
  2023.          * @param {HTMLElement} listElement - The list container element.
  2024.          */
  2025.         function _handleModalListDragEnd(listElement) {
  2026.             if (_draggedListItem) {
  2027.                 _draggedListItem.classList.remove(CSS.IS_DRAGGING);
  2028.             }
  2029.             _draggedListItem = null;
  2030.             (listElement || _currentModalContent)?.querySelectorAll(`li.${CSS.IS_DRAG_OVER}`).forEach(li => li.classList.remove(CSS.IS_DRAG_OVER));
  2031.             _currentModalContent?.querySelectorAll(`ul.${CSS.CUSTOM_LIST} li[draggable="true"]`).forEach(li => li.style.pointerEvents = '');
  2032.         }
  2033.  
  2034.         /**
  2035.          * Adds a new predefined item to a display list in a modal.
  2036.          * @private
  2037.          * @param {string[]} selectedValues - The values of the predefined items to add.
  2038.          * @param {string} predefinedSourceKey - The key for looking up the predefined item data.
  2039.          * @param {Array<Object>} displayItemsArrayRef - A reference to the array of items to modify.
  2040.          * @param {string} listIdToUpdate - The ID of the list to repopulate.
  2041.          * @param {HTMLElement} modalContentContext - The modal's content element.
  2042.          */
  2043.         function _addPredefinedItemsToModalList(selectedValues, predefinedSourceKey, displayItemsArrayRef, listIdToUpdate, modalContentContext) {
  2044.             const mapping = getListMapping(listIdToUpdate);
  2045.             if (!mapping) return;
  2046.  
  2047.             selectedValues.forEach(value => {
  2048.                 const predefinedOpt = PREDEFINED_OPTIONS[predefinedSourceKey]?.find(p => p.value === value);
  2049.                 if (predefinedOpt && !displayItemsArrayRef.some(item => item.value === value && item.type === 'predefined')) {
  2050.                     displayItemsArrayRef.push({
  2051.                         id: predefinedOpt.value,
  2052.                         text: _(predefinedOpt.textKey),
  2053.                         value: predefinedOpt.value,
  2054.                         type: 'predefined',
  2055.                         originalKey: predefinedOpt.textKey
  2056.                     });
  2057.                 }
  2058.             });
  2059.             mapping.populateFn(listIdToUpdate, displayItemsArrayRef, modalContentContext);
  2060.         }
  2061.  
  2062.         /**
  2063.          * Binds all necessary event listeners for a modal's content.
  2064.          * Uses event delegation to efficiently handle events for list items and controls.
  2065.          * @private
  2066.          * @param {HTMLElement} modalContent - The modal's content element.
  2067.          * @param {Array<Object>} itemsArrayRef - A reference to the array of items being managed.
  2068.          * @param {string|null} [listIdForDragDrop=null] - The ID of the list that should have drag-and-drop enabled.
  2069.          */
  2070.         function _bindModalContentEventsInternal(modalContent, itemsArrayRef, listIdForDragDrop = null) {
  2071.             if (!modalContent || modalContent.dataset.modalEventsBound === 'true') return;
  2072.  
  2073.             modalContent.addEventListener('click', (event) => {
  2074.                 const target = event.target;
  2075.                 const listIdForAction = listIdForDragDrop || target.closest('[data-list-id]')?.dataset.listId || target.closest(`.${CSS.BUTTON_ADD_CUSTOM}`)?.dataset.listId;
  2076.  
  2077.                 const addNewOptionButton = target.closest(`#${IDS.MODAL_ADD_NEW_OPTION_BTN}`);
  2078.                 if (addNewOptionButton && listIdForAction) {
  2079.                     const mapping = getListMapping(listIdForAction);
  2080.                     const configForModal = modalConfigsData[Object.keys(modalConfigsData).find(key => modalConfigsData[key].listId === listIdForAction)];
  2081.  
  2082.                     if (mapping && configForModal && configForModal.predefinedSourceKey && configForModal.isSortableMixed) {
  2083.                          PredefinedOptionChooser.show(
  2084.                             configForModal.manageType, listIdForAction, configForModal.predefinedSourceKey,
  2085.                             itemsArrayRef, modalContent, _addPredefinedItemsToModalList
  2086.                         );
  2087.                     } else if (mapping) {
  2088.                          modalContent.querySelector(mapping.textInput)?.focus();
  2089.                     }
  2090.                     return;
  2091.                 }
  2092.  
  2093.                 const addButton = target.closest(`.${CSS.BUTTON_ADD_CUSTOM}.custom-list-action-button`);
  2094.                 const itemControlButton = target.closest(`button.${CSS.BUTTON_EDIT_ITEM}, button.${CSS.BUTTON_DELETE_ITEM}, button.${CSS.BUTTON_REMOVE_FROM_LIST}`);
  2095.                 const cancelEditButton = target.closest('.cancel-edit-button');
  2096.  
  2097.                 if (itemControlButton && listIdForAction) { _handleCustomListActionsInternal(event, modalContent, itemsArrayRef); }
  2098.                 else if (addButton && listIdForAction) { _handleCustomItemSubmitInternal(listIdForAction, modalContent, itemsArrayRef); }
  2099.                 else if (cancelEditButton) { _resetEditStateInternal(modalContent); }
  2100.             });
  2101.  
  2102.             modalContent.addEventListener('input', (event) => {
  2103.                 const target = event.target;
  2104.                 if (target.matches('input[type="text"]')) {
  2105.                     _clearInputError(target);
  2106.                     validateCustomInput(target);
  2107.                 }
  2108.             });
  2109.  
  2110.             if (listIdForDragDrop) {
  2111.                 const draggableListElement = modalContent.querySelector(`#${listIdForDragDrop}`);
  2112.                 if (draggableListElement && draggableListElement.dataset.dragEventsBound !== 'true') {
  2113.                     draggableListElement.dataset.dragEventsBound = 'true';
  2114.                     draggableListElement.addEventListener('dragstart', _handleModalListDragStart);
  2115.                     draggableListElement.addEventListener('dragover', _handleModalListDragOver);
  2116.                     draggableListElement.addEventListener('dragleave', _handleModalListDragLeave);
  2117.                     draggableListElement.addEventListener('drop', (e) => _handleModalListDrop(e, listIdForDragDrop, itemsArrayRef));
  2118.                     draggableListElement.addEventListener('dragend', () => _handleModalListDragEnd(draggableListElement));
  2119.                 }
  2120.             }
  2121.             modalContent.dataset.modalEventsBound = 'true';
  2122.         }
  2123.  
  2124.         return {
  2125.             /**
  2126.              * Shows a modal dialog.
  2127.              * @param {string} titleKey - The localization key for the modal's title.
  2128.              * @param {string} contentHTML - The HTML string to be injected into the modal's body.
  2129.              * @param {Function} onCompleteCallback - A callback function to execute when the user clicks the "Done" button.
  2130.              * @param {string} currentTheme - The current theme to apply to the modal.
  2131.              * @returns {HTMLElement} The content element of the created modal.
  2132.              */
  2133.             show: function(titleKey, contentHTML, onCompleteCallback, currentTheme) {
  2134.                 this.hide();
  2135.  
  2136.                 _currentModal = document.createElement('div');
  2137.                 _currentModal.className = 'settings-modal-overlay';
  2138.                 applyThemeToElement(_currentModal, currentTheme);
  2139.  
  2140.                 _currentModalContent = document.createElement('div');
  2141.                 _currentModalContent.className = 'settings-modal-content';
  2142.                 applyThemeToElement(_currentModalContent, currentTheme);
  2143.  
  2144.                 const headerHTML = `
  2145.                     <div class="settings-modal-header">
  2146.                         <h4>${_(titleKey)}</h4>
  2147.                         <button class="settings-modal-close-btn" title="${_('settings_close_button_title')}">${SVG_ICONS.close}</button>
  2148.                     </div>`;
  2149.                 const bodyHTML = `<div class="settings-modal-body">${contentHTML}</div>`;
  2150.                 const footerHTML = `
  2151.                     <div class="settings-modal-footer">
  2152.                         <button class="modal-complete-btn">${_('modal_button_complete')}</button>
  2153.                     </div>`;
  2154.  
  2155.                 _currentModalContent.innerHTML = headerHTML + bodyHTML + footerHTML;
  2156.                 _currentModal.appendChild(_currentModalContent);
  2157.  
  2158.                 const self = this;
  2159.                 const closeModalHandler = (event) => {
  2160.                     if (event.target === _currentModal || event.target.closest('.settings-modal-close-btn')) {
  2161.                         self.hide(true);
  2162.                     }
  2163.                 };
  2164.                 const completeModalHandler = () => {
  2165.                     if (typeof onCompleteCallback === 'function') {
  2166.                         onCompleteCallback(_currentModalContent);
  2167.                     }
  2168.                     self.hide(false);
  2169.                 };
  2170.  
  2171.                 _currentModal.addEventListener('click', closeModalHandler);
  2172.                 _currentModalContent.querySelector('.modal-complete-btn').addEventListener('click', completeModalHandler);
  2173. 				_currentModalContent.querySelector('.settings-modal-close-btn').addEventListener('click', () => self.hide(true));
  2174.                 _currentModalContent.addEventListener('click', (event) => event.stopPropagation());
  2175.  
  2176.                 document.body.appendChild(_currentModal);
  2177.                 return _currentModalContent;
  2178.             },
  2179.  
  2180.             /**
  2181.              * Hides and destroys the currently visible modal.
  2182.              * @param {boolean} [isCancel=false] - Indicates if the hide action was a cancellation.
  2183.              */
  2184.             hide: function(isCancel = false) {
  2185.                 PredefinedOptionChooser.hide();
  2186.                 if (_currentModal) {
  2187.                     const inputGroup = _currentModalContent?.querySelector(`.${CSS.CUSTOM_LIST_INPUT_GROUP}`);
  2188.                     if (inputGroup) _clearAllInputErrorsInGroup(inputGroup);
  2189.                     _resetEditStateInternal();
  2190.                     _currentModal.remove();
  2191.                 }
  2192.                 _currentModal = null;
  2193.                 _currentModalContent = null;
  2194.                 _handleModalListDragEnd();
  2195.             },
  2196.  
  2197.             /**
  2198.              * Opens a specific type of management modal based on the provided configuration.
  2199.              * @param {string} manageType - The type of items to manage (e.g., 'site', 'language').
  2200.              * @param {Object} currentSettingsRef - A reference to the main settings object.
  2201.              * @param {Object} PREDEFINED_OPTIONS_REF - A reference to the predefined options data.
  2202.              * @param {Function} onModalCompleteCallback - The callback to execute when the modal is completed.
  2203.              */
  2204.             openManageCustomOptions: function(manageType, currentSettingsRef, PREDEFINED_OPTIONS_REF, onModalCompleteCallback) {
  2205.                 const config = modalConfigsData[manageType];
  2206.                 if (!config) { console.error("Error: Could not get config for manageType:", manageType); return; }
  2207.  
  2208.                 const mapping = getListMapping(config.listId);
  2209.                 if (!mapping) { console.error("Error: Could not get mapping for listId:", config.listId); return; }
  2210.  
  2211.                 const tempItems = JSON.parse(JSON.stringify(currentSettingsRef[config.itemsArrayKey] || []));
  2212.                 let contentHTML = '';
  2213.                 const itemTypeNameForDisplay = _(mapping.nameKey);
  2214.  
  2215.                 if (config.isSortableMixed) {
  2216.                     contentHTML += _createModalListAndInputHTML(config.listId, config.textPKey, config.valPKey, config.hintKey, config.fmtKey, itemTypeNameForDisplay, true);
  2217.                 } else if (config.hasPredefinedToggles && config.predefinedSourceKey && PREDEFINED_OPTIONS_REF[config.predefinedSourceKey]) {
  2218.                     const enabledValues = new Set(currentSettingsRef.enabledPredefinedOptions[config.predefinedSourceKey] || []);
  2219.                     contentHTML += _createPredefinedOptionsSectionHTML(config.predefinedSourceKey, mapping.nameKey, PREDEFINED_OPTIONS_REF, enabledValues);
  2220.                     contentHTML += '<hr style="margin: 1em 0;">';
  2221.                     contentHTML += _createModalListAndInputHTML(config.listId, config.textPKey, config.valPKey, config.hintKey, config.fmtKey, itemTypeNameForDisplay, false);
  2222.                 } else {
  2223.                     contentHTML += _createModalListAndInputHTML(config.listId, config.textPKey, config.valPKey, config.hintKey, config.fmtKey, itemTypeNameForDisplay, false);
  2224.                 }
  2225.  
  2226.                 const modalContentElement = this.show(
  2227.                     config.modalTitleKey,
  2228.                     contentHTML,
  2229.                     (modalContent) => {
  2230.                         let newEnabledPredefs = null;
  2231.                         if (config.hasPredefinedToggles && config.predefinedSourceKey) {
  2232.                             newEnabledPredefs = Array.from(modalContent.querySelectorAll(`.predefined-options-list input[data-option-type="${config.predefinedSourceKey}"]:checked`)).map(cb => cb.value);
  2233.                         }
  2234.                         onModalCompleteCallback(tempItems, newEnabledPredefs, config.itemsArrayKey, config.predefinedSourceKey, config.customItemsMasterKey, config.isSortableMixed, manageType);
  2235.                     },
  2236.                     currentSettingsRef.theme
  2237.                 );
  2238.  
  2239.                 if (modalContentElement) {
  2240.                     if (mapping && mapping.populateFn) {
  2241.                         mapping.populateFn(config.listId, tempItems, modalContentElement);
  2242.                     }
  2243.                     _bindModalContentEventsInternal(modalContentElement, tempItems, config.listId);
  2244.                 }
  2245.             },
  2246.  
  2247.             /**
  2248.              * Globally resets the edit state, useful when closing modals or switching tabs.
  2249.              */
  2250.             resetEditStateGlobally: function() { _resetEditStateInternal(_currentModalContent || document); },
  2251.  
  2252.             /**
  2253.              * Checks if a modal is currently open.
  2254.              * @returns {boolean} True if a modal is open.
  2255.              */
  2256.             isModalOpen: function() { return !!_currentModal; }
  2257.         };
  2258.     })();
  2259.  
  2260.     /**
  2261.      * @module SettingsUIPaneGenerator
  2262.      * A utility module responsible for generating the HTML content for each tab
  2263.      * within the main settings window. It decouples the HTML structure from the
  2264.      * core logic of the `SettingsManager`.
  2265.      */
  2266.     const SettingsUIPaneGenerator = (function() {
  2267.         /**
  2268.          * Creates the HTML content for the "General" settings tab.
  2269.          * @returns {string} The HTML string for the pane.
  2270.          */
  2271.         function createGeneralPaneHTML() {
  2272.             const langOpts = LocalizationService.getAvailableLocales().map(lc => {
  2273.                 let dn;
  2274.                 if (lc === 'auto') {
  2275.                     dn = _('settings_language_auto');
  2276.                 } else {
  2277.                     try {
  2278.                         dn = new Intl.DisplayNames([lc], { type: 'language' }).of(lc);
  2279.                         dn = dn.charAt(0).toUpperCase() + dn.slice(1);
  2280.                     } catch (e) {
  2281.                         dn = lc;
  2282.                     }
  2283.                     dn = `${dn} (${lc})`;
  2284.                 }
  2285.                 return `<option value="${lc}">${dn}</option>`;
  2286.             }).join('');
  2287.  
  2288.             const locationOptionsHTML = `
  2289.                 <option value="tools">${_('settings_location_tools')}</option>
  2290.                 <option value="topBlock">${_('settings_location_top')}</option>
  2291.                 <option value="header">${_('settings_location_header')}</option>
  2292.                 <option value="none">${_('settings_location_hide')}</option>`;
  2293.  
  2294.             return `
  2295.                 <div class="${CSS.SETTING_ITEM}">
  2296.                     <label for="${IDS.SETTING_INTERFACE_LANGUAGE}">${_('settings_interface_language')}</label>
  2297.                     <select id="${IDS.SETTING_INTERFACE_LANGUAGE}">${langOpts}</select>
  2298.                 </div>
  2299.                 <div class="${CSS.SETTING_ITEM}">
  2300.                     <label for="${IDS.SETTING_SECTION_MODE}">${_('settings_section_mode')}</label>
  2301.                     <select id="${IDS.SETTING_SECTION_MODE}">
  2302.                         <option value="remember">${_('settings_section_mode_remember')}</option>
  2303.                         <option value="expandAll">${_('settings_section_mode_expand')}</option>
  2304.                         <option value="collapseAll">${_('settings_section_mode_collapse')}</option>
  2305.                     </select>
  2306.                     <div style="margin-top:0.6em;">
  2307.                         <input type="checkbox" id="${IDS.SETTING_ACCORDION}">
  2308.                         <label for="${IDS.SETTING_ACCORDION}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_accordion_mode')}</label>
  2309.                         <div class="${CSS.SETTING_VALUE_HINT}" style="margin-top:0.3em; margin-left:1.7em; font-weight:normal;">${_('settings_accordion_mode_hint_desc')}</div>
  2310.                     </div>
  2311.                 </div>
  2312.                 <div class="${CSS.SETTING_ITEM}">
  2313.                     <input type="checkbox" id="${IDS.SETTING_DRAGGABLE}">
  2314.                     <label for="${IDS.SETTING_DRAGGABLE}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_enable_drag')}</label>
  2315.                 </div>
  2316.                 <div class="${CSS.SETTING_ITEM}">
  2317.                     <label for="${IDS.SETTING_RESET_LOCATION}">${_('settings_reset_button_location')}</label>
  2318.                     <select id="${IDS.SETTING_RESET_LOCATION}">${locationOptionsHTML}</select>
  2319.                 </div>
  2320.                 <div class="${CSS.SETTING_ITEM}">
  2321.                     <label for="${IDS.SETTING_VERBATIM_LOCATION}">${_('settings_verbatim_button_location')}</label>
  2322.                     <select id="${IDS.SETTING_VERBATIM_LOCATION}">${locationOptionsHTML}</select>
  2323.                 </div>
  2324.                 <div class="${CSS.SETTING_ITEM}">
  2325.                     <label for="${IDS.SETTING_ADV_SEARCH_LOCATION}">${_('settings_adv_search_location')}</label>
  2326.                     <select id="${IDS.SETTING_ADV_SEARCH_LOCATION}">${locationOptionsHTML}</select>
  2327.                 </div>
  2328.                 <div class="${CSS.SETTING_ITEM}">
  2329.                     <label for="${IDS.SETTING_PERSONALIZE_LOCATION}">${_('settings_personalize_button_location')}</label>
  2330.                     <select id="${IDS.SETTING_PERSONALIZE_LOCATION}">${locationOptionsHTML}</select>
  2331.                 </div>
  2332.                 <div class="${CSS.SETTING_ITEM}">
  2333.                     <label for="${IDS.SETTING_SCHOLAR_LOCATION}">${_('settings_scholar_location')}</label>
  2334.                     <select id="${IDS.SETTING_SCHOLAR_LOCATION}">${locationOptionsHTML}</select>
  2335.                 </div>
  2336.                 <div class="${CSS.SETTING_ITEM}">
  2337.                     <label for="${IDS.SETTING_TRENDS_LOCATION}">${_('settings_trends_location')}</label>
  2338.                     <select id="${IDS.SETTING_TRENDS_LOCATION}">${locationOptionsHTML}</select>
  2339.                 </div>
  2340.                 <div class="${CSS.SETTING_ITEM}">
  2341.                     <label for="${IDS.SETTING_DATASET_SEARCH_LOCATION}">${_('settings_dataset_search_location')}</label>
  2342.                     <select id="${IDS.SETTING_DATASET_SEARCH_LOCATION}">${locationOptionsHTML}</select>
  2343.                 </div>`;
  2344.         }
  2345.  
  2346.         /**
  2347.          * Creates the HTML content for the "Appearance" settings tab.
  2348.          * @returns {string} The HTML string for the pane.
  2349.          */
  2350.         function createAppearancePaneHTML() {
  2351.             const colorOptionsGrid = COLOR_MAPPINGS.map(map => {
  2352.                 const labelTextKey = `settings_color_${map.key.replace(/([A-Z])/g, '_$1').toLowerCase()}`;
  2353.                 return `<label for="${map.id}">${_(labelTextKey)}</label><input type="color" id="${map.id}">`;
  2354.             }).join('');
  2355.  
  2356.             return `
  2357.                 <div class="${CSS.SETTING_ITEM}">
  2358.                     <label for="${IDS.SETTING_WIDTH}">${_('settings_sidebar_width')}</label>
  2359.                     <span class="${CSS.SETTING_RANGE_HINT}">${_('settings_width_range_hint')}</span>
  2360.                     <input type="range" id="${IDS.SETTING_WIDTH}" min="90" max="270" step="5"><span class="${CSS.SETTING_RANGE_VALUE}"></span>
  2361.                 </div>
  2362.                 <div class="${CSS.SETTING_ITEM}">
  2363.                     <label for="${IDS.SETTING_HEIGHT}">${_('settings_sidebar_height')}</label>
  2364.                     <span class="${CSS.SETTING_RANGE_HINT}">${_('settings_height_range_hint')}</span>
  2365.                     <input type="range" id="${IDS.SETTING_HEIGHT}" min="25" max="100" step="5"><span class="${CSS.SETTING_RANGE_VALUE}"></span>
  2366.                 </div>
  2367.                 <div class="${CSS.SETTING_ITEM}">
  2368.                     <label for="${IDS.SETTING_FONT_SIZE}">${_('settings_font_size')}</label>
  2369.                     <span class="${CSS.SETTING_RANGE_HINT}">${_('settings_font_size_range_hint')}</span>
  2370.                     <input type="range" id="${IDS.SETTING_FONT_SIZE}" min="8" max="24" step="0.5"><span class="${CSS.SETTING_RANGE_VALUE}"></span>
  2371.                 </div>
  2372.                 <div class="${CSS.SETTING_ITEM}">
  2373.                     <label for="${IDS.SETTING_HEADER_ICON_SIZE}">${_('settings_header_icon_size')}</label>
  2374.                     <span class="${CSS.SETTING_RANGE_HINT}">${_('settings_header_icon_size_range_hint')}</span>
  2375.                     <input type="range" id="${IDS.SETTING_HEADER_ICON_SIZE}" min="8" max="32" step="0.5"><span class="${CSS.SETTING_RANGE_VALUE}"></span>
  2376.                 </div>
  2377.                 <div class="${CSS.SETTING_ITEM}">
  2378.                     <label for="${IDS.SETTING_VERTICAL_SPACING}">${_('settings_vertical_spacing')}</label>
  2379.                     <span class="${CSS.SETTING_RANGE_HINT}">${_('settings_vertical_spacing_range_hint')}</span>
  2380.                     <input type="range" id="${IDS.SETTING_VERTICAL_SPACING}" min="0.05" max="1.5" step="0.05"><span class="${CSS.SETTING_RANGE_VALUE}"></span>
  2381.                 </div>
  2382.                 <div class="${CSS.SETTING_ITEM}">
  2383.                     <label for="${IDS.SETTING_THEME}">${_('settings_theme')}</label>
  2384.                     <select id="${IDS.SETTING_THEME}">
  2385.                         <option value="system">${_('settings_theme_system')}</option>
  2386.                         <option value="light">${_('settings_theme_light')}</option>
  2387.                         <option value="dark">${_('settings_theme_dark')}</option>
  2388.                         <option value="minimal-light">${_('settings_theme_minimal_light')}</option>
  2389.                         <option value="minimal-dark">${_('settings_theme_minimal_dark')}</option>
  2390.                     </select>
  2391.                 </div>
  2392.                 <div class="${CSS.SETTING_ITEM}">
  2393.                     <input type="checkbox" id="${IDS.SETTING_HOVER}"><label for="${IDS.SETTING_HOVER}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_hover_mode')}</label>
  2394.                     <div style="margin-top:0.8em;padding-left:1.5em;">
  2395.                         <label for="${IDS.SETTING_OPACITY}" style="display:block;margin-bottom:0.4em;font-weight:normal;">${_('settings_idle_opacity')}</label>
  2396.                         <span class="${CSS.SETTING_RANGE_HINT}" style="width:auto;display:inline-block;margin-right:1em;">${_('settings_opacity_range_hint')}</span>
  2397.                         <input type="range" id="${IDS.SETTING_OPACITY}" min="0.1" max="1.0" step="0.05" style="width:calc(100% - 18em);vertical-align:middle;display:inline-block;">
  2398.                         <span class="${CSS.SETTING_RANGE_VALUE}" style="display:inline-block;min-width:3em;text-align:right;vertical-align:middle;"></span>
  2399.                     </div>
  2400.                 </div>
  2401.                 <div class="${CSS.SETTING_ITEM}">
  2402.                     <label for="${IDS.SETTING_COUNTRY_DISPLAY_MODE}">${_('settings_country_display')}</label>
  2403.                     <select id="${IDS.SETTING_COUNTRY_DISPLAY_MODE}">
  2404.                         <option value="iconAndText">${_('settings_country_display_icontext')}</option>
  2405.                         <option value="textOnly">${_('settings_country_display_text')}</option>
  2406.                         <option value="iconOnly">${_('settings_country_display_icon')}</option>
  2407.                     </select>
  2408.                 </div>
  2409.                 <div class="${CSS.SETTING_ITEM}">
  2410.                     <label for="${IDS.SETTING_SCROLLBAR_POSITION}">${_('settings_scrollbar_position')}</label>
  2411.                     <select id="${IDS.SETTING_SCROLLBAR_POSITION}">
  2412.                         <option value="right">${_('settings_scrollbar_right')}</option>
  2413.                         <option value="left">${_('settings_scrollbar_left')}</option>
  2414.                         <option value="hidden">${_('settings_scrollbar_hidden')}</option>
  2415.                     </select>
  2416.                 </div>
  2417.                 <div class="${CSS.SETTING_ITEM}">
  2418.                     <input type="checkbox" id="${IDS.SETTING_HIDE_GOOGLE_LOGO}">
  2419.                     <label for="${IDS.SETTING_HIDE_GOOGLE_LOGO}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_hide_google_logo')}</label>
  2420.                     <div class="${CSS.SETTING_VALUE_HINT}" style="margin-top:0.3em; margin-left:1.7em; font-weight:normal;">${_('settings_hide_google_logo_hint')}</div>
  2421.                 </div>
  2422.                 <hr style="margin:1.2em 0;">
  2423.                 <div id="${IDS.CUSTOM_COLORS_CONTAINER}" class="${CSS.SETTING_ITEM}">
  2424.                     <label style="font-weight:bold; width:100%; margin-bottom: 0.8em;">${_('settings_advanced_color_options')}</label>
  2425.                     <div style="display:grid; grid-template-columns: auto 1fr; gap: 0.8em 1em; align-items: center; width: 100%;">${colorOptionsGrid}</div>
  2426.                     <button id="${IDS.RESET_CUSTOM_COLORS_BTN}" style="margin-top: 1em;">${_('settings_reset_colors_button')}</button>
  2427.                 </div>`;
  2428.         }
  2429.  
  2430.         /**
  2431.          * Creates the HTML content for the "Features" settings tab.
  2432.          * @returns {string} The HTML string for the pane.
  2433.          */
  2434.         function createFeaturesPaneHTML() {
  2435.             const visItemsHTML = ALL_SECTION_DEFINITIONS.map(def => {
  2436.                 const dn = _(def.titleKey) || def.id;
  2437.                 return `<div class="${CSS.SETTING_ITEM} ${CSS.SETTING_ITEM_SIMPLE}"><input type="checkbox" id="setting-visible-${def.id}" data-${DATA_ATTR.SECTION_ID}="${def.id}"><label for="setting-visible-${def.id}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${dn}</label></div>`;
  2438.             }).join('');
  2439.  
  2440.             return `
  2441.                 <p>${_('settings_visible_sections')}</p>${visItemsHTML}
  2442.                 <div class="${CSS.SETTING_ITEM}">
  2443.                     <input type="checkbox" id="${IDS.SETTING_SITE_SEARCH_CHECKBOX_MODE}">
  2444.                     <label for="${IDS.SETTING_SITE_SEARCH_CHECKBOX_MODE}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_enable_site_search_checkbox_mode')}</label>
  2445.                     <div class="${CSS.SETTING_VALUE_HINT}" style="margin-top:0.3em; margin-left:1.7em; font-weight:normal;">${_('settings_enable_site_search_checkbox_mode_hint')}</div>
  2446.                 </div>
  2447.                 <div class="${CSS.SETTING_ITEM}">
  2448.                     <input type="checkbox" id="${IDS.SETTING_SHOW_FAVICONS}">
  2449.                     <label for="${IDS.SETTING_SHOW_FAVICONS}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_show_favicons')}</label>
  2450.                     <div class="${CSS.SETTING_VALUE_HINT}" style="margin-top:0.3em; margin-left:1.7em; font-weight:normal;">${_('settings_show_favicons_hint')}</div>
  2451.                 </div>
  2452.                 <div class="${CSS.SETTING_ITEM}">
  2453.                     <input type="checkbox" id="${IDS.SETTING_FILETYPE_SEARCH_CHECKBOX_MODE}">
  2454.                     <label for="${IDS.SETTING_FILETYPE_SEARCH_CHECKBOX_MODE}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_enable_filetype_search_checkbox_mode')}</label>
  2455.                     <div class="${CSS.SETTING_VALUE_HINT}" style="margin-top:0.3em; margin-left:1.7em; font-weight:normal;">${_('settings_enable_filetype_search_checkbox_mode_hint')}</div>
  2456.                 </div>
  2457.                 <div class="${CSS.SETTING_ITEM}">
  2458.                     <input type="checkbox" id="${IDS.SETTING_SHOW_RESULT_STATS}">
  2459.                     <label for="${IDS.SETTING_SHOW_RESULT_STATS}" class="${CSS.SETTING_ITEM_LABEL_INLINE}">${_('settings_show_result_stats')}</label>
  2460.                 </div>
  2461.                 <hr style="margin:1.2em 0;">
  2462.                 <p style="font-weight:bold;margin-bottom:0.5em;">${_('settings_section_order')}</p>
  2463.                 <p class="${CSS.SETTING_VALUE_HINT}" style="font-size:0.9em;margin-top:-0.3em;margin-bottom:0.7em;">${_('settings_section_order_hint')}</p>
  2464.                 <ul id="${IDS.SIDEBAR_SECTION_ORDER_LIST}" class="${CSS.SECTION_ORDER_LIST}"></ul>`;
  2465.         }
  2466.  
  2467.         /**
  2468.          * Creates the HTML content for the "Custom" settings tab.
  2469.          * @returns {string} The HTML string for the pane.
  2470.          */
  2471.         function createCustomPaneHTML() {
  2472.             return `
  2473.                 <div class="${CSS.SETTING_ITEM}">
  2474.                     <p>${_('settings_custom_intro')}</p>
  2475.                     <button class="${CSS.BUTTON_MANAGE_CUSTOM}" data-${DATA_ATTR.MANAGE_TYPE}="site">${_('settings_manage_sites_button')}</button>
  2476.                 </div>
  2477.                 <div class="${CSS.SETTING_ITEM}">
  2478.                     <button class="${CSS.BUTTON_MANAGE_CUSTOM}" data-${DATA_ATTR.MANAGE_TYPE}="language">${_('settings_manage_languages_button')}</button>
  2479.                 </div>
  2480.                 <div class="${CSS.SETTING_ITEM}">
  2481.                     <button class="${CSS.BUTTON_MANAGE_CUSTOM}" data-${DATA_ATTR.MANAGE_TYPE}="country">${_('settings_manage_countries_button')}</button>
  2482.                 </div>
  2483.                 <div class="${CSS.SETTING_ITEM}">
  2484.                     <button class="${CSS.BUTTON_MANAGE_CUSTOM}" data-${DATA_ATTR.MANAGE_TYPE}="time">${_('settings_manage_time_ranges_button')}</button>
  2485.                 </div>
  2486.                 <div class="${CSS.SETTING_ITEM}">
  2487.                     <button class="${CSS.BUTTON_MANAGE_CUSTOM}" data-${DATA_ATTR.MANAGE_TYPE}="filetype">${_('settings_manage_file_types_button')}</button>
  2488.                 </div>`;
  2489.         }
  2490.         return { createGeneralPaneHTML, createAppearancePaneHTML, createFeaturesPaneHTML, createCustomPaneHTML };
  2491.     })();
  2492.  
  2493.     /**
  2494.      * @module SectionOrderDragHandler
  2495.      * Manages the drag-and-drop functionality for reordering sections in the settings window.
  2496.      * It is a self-contained module that handles all necessary drag events.
  2497.      */
  2498.     const SectionOrderDragHandler = (function() {
  2499.         let _draggedItem = null; let _listElement = null; let _settingsRef = null; let _onOrderUpdateCallback = null;
  2500.         function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll(`li[draggable="true"]:not(.${CSS.IS_DRAGGING})`)]; return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect(); const offset = y - box.top - box.height / 2; if (offset < 0 && offset > closest.offset) { return { offset: offset, element: child }; } else { return closest; } }, { offset: Number.NEGATIVE_INFINITY }).element; }
  2501.         function handleDragStart(event) { _draggedItem = event.target; event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', _draggedItem.dataset.sectionId); _draggedItem.classList.add(CSS.IS_DRAGGING); if (_listElement) { _listElement.querySelectorAll(`li:not(.${CSS.IS_DRAGGING})`).forEach(li => li.style.pointerEvents = 'none'); } }
  2502.         function handleDragOver(event) { event.preventDefault(); if (!_listElement) return; _listElement.querySelectorAll(`li.${CSS.IS_DRAG_OVER}`).forEach(li => { li.classList.remove(CSS.IS_DRAG_OVER); }); const targetItem = event.target.closest('li[draggable="true"]'); if (targetItem && targetItem !== _draggedItem) { targetItem.classList.add(CSS.IS_DRAG_OVER); } else if (!targetItem && _listElement.contains(event.target)) { const afterElement = getDragAfterElement(_listElement, event.clientY); if (afterElement) { afterElement.classList.add(CSS.IS_DRAG_OVER); } } }
  2503.         function handleDragLeave(event) { const relatedTarget = event.relatedTarget; if (_listElement && (!relatedTarget || !_listElement.contains(relatedTarget))) { _listElement.querySelectorAll(`li.${CSS.IS_DRAG_OVER}`).forEach(li => { li.classList.remove(CSS.IS_DRAG_OVER); }); } }
  2504.         function handleDrop(event) {
  2505.             event.preventDefault(); if (!_draggedItem || !_listElement || !_settingsRef || !_onOrderUpdateCallback) return;
  2506.             const draggedSectionId = event.dataTransfer.getData('text/plain');
  2507.             let currentVisibleOrder = _settingsRef.sidebarSectionOrder.filter(id => _settingsRef.visibleSections[id]);
  2508.             const oldIndexInVisible = currentVisibleOrder.indexOf(draggedSectionId);
  2509.             if (oldIndexInVisible > -1) { currentVisibleOrder.splice(oldIndexInVisible, 1); } else { handleDragEnd(); return; }
  2510.             const afterElement = getDragAfterElement(_listElement, event.clientY);
  2511.             if (afterElement) { const targetId = afterElement.dataset.sectionId; const newIndexInVisible = currentVisibleOrder.indexOf(targetId); if (newIndexInVisible > -1) { currentVisibleOrder.splice(newIndexInVisible, 0, draggedSectionId); } else { currentVisibleOrder.push(draggedSectionId); }
  2512.             } else { currentVisibleOrder.push(draggedSectionId); }
  2513.             const hiddenSectionOrder = _settingsRef.sidebarSectionOrder.filter(id => !_settingsRef.visibleSections[id]);
  2514.             _settingsRef.sidebarSectionOrder = [...currentVisibleOrder, ...hiddenSectionOrder];
  2515.             handleDragEnd(); _onOrderUpdateCallback();
  2516.         }
  2517.         function handleDragEnd() { if (_draggedItem) { _draggedItem.classList.remove(CSS.IS_DRAGGING); } _draggedItem = null; if (_listElement) { _listElement.querySelectorAll('li').forEach(li => { li.classList.remove(CSS.IS_DRAG_OVER); li.style.pointerEvents = ''; }); } }
  2518.         function initialize(listEl, currentSettings, orderUpdateCallback) { _listElement = listEl; _settingsRef = currentSettings; _onOrderUpdateCallback = orderUpdateCallback; if (_listElement && _listElement.dataset.sectionOrderDragBound !== 'true') { _listElement.addEventListener('dragstart', handleDragStart); _listElement.addEventListener('dragover', handleDragOver); _listElement.addEventListener('dragleave', handleDragLeave); _listElement.addEventListener('drop', handleDrop); _listElement.addEventListener('dragend', handleDragEnd); _listElement.dataset.sectionOrderDragBound = 'true'; } }
  2519.         function destroy() { if (_listElement && _listElement.dataset.sectionOrderDragBound === 'true') { _listElement.removeEventListener('dragstart', handleDragStart); _listElement.removeEventListener('dragover', handleDragOver); _listElement.removeEventListener('dragleave', handleDragLeave); _listElement.removeEventListener('drop', handleDrop); _listElement.removeEventListener('dragend', handleDragEnd); delete _listElement.dataset.sectionOrderDragBound; } _listElement = null; _settingsRef = null; _onOrderUpdateCallback = null; }
  2520.         return { initialize, destroy };
  2521.     })();
  2522. 	
  2523.     /**
  2524.      * @module SettingsManager
  2525.      * The central controller for all script settings. It handles loading settings from storage,
  2526.      * saving them, validating their integrity, and managing the entire settings UI,
  2527.      * including its creation, population with data, and event handling.
  2528.      */
  2529.     const SettingsManager = (function() {
  2530.         let _settingsWindow = null; let _settingsOverlay = null; let _currentSettings = {};
  2531.         let _settingsBackup = {}; let _defaultSettingsRef = null; let _isInitialized = false;
  2532.         let _applySettingsToSidebar_cb = ()=>{}; let _buildSidebarUI_cb = ()=>{};
  2533.         let _applySectionCollapseStates_cb = ()=>{}; let _initMenuCommands_cb = ()=>{};
  2534.         let _renderSectionOrderList_ext_cb = ()=>{};
  2535.  
  2536.         /**
  2537.          * A helper to populate a range slider and its associated value display in the settings UI.
  2538.          * @private
  2539.          * @param {HTMLElement} win - The settings window element.
  2540.          * @param {string} id - The ID of the range input element.
  2541.          * @param {number|string} value - The value to set.
  2542.          * @param {Function} [formatFn=(val) => val] - An optional function to format the displayed value.
  2543.          */
  2544.         function _populateSliderSetting_internal(win, id, value, formatFn = (val) => val) {
  2545.             const i = win.querySelector(`#${id}`);
  2546.             if (i) {
  2547.                 i.value = value;
  2548.                 let vs = i.parentNode.querySelector(`.${CSS.SETTING_RANGE_VALUE}`);
  2549.                 if (vs) {
  2550.                     vs.textContent = formatFn(value);
  2551.                 }
  2552.             }
  2553.         }
  2554. 		
  2555.         /**
  2556.          * Populates the "General" tab in the settings window with current setting values.
  2557.          * @private
  2558.          * @param {HTMLElement} win - The settings window element.
  2559.          * @param {Object} s - The current settings object.
  2560.          */
  2561.         function _populateGeneralSettings_internal(win, s) {
  2562.             const lS = win.querySelector(`#${IDS.SETTING_INTERFACE_LANGUAGE}`);
  2563.             if (lS) lS.value = s.interfaceLanguage;
  2564.             const sMS = win.querySelector(`#${IDS.SETTING_SECTION_MODE}`),
  2565.                 acC = win.querySelector(`#${IDS.SETTING_ACCORDION}`);
  2566.             if (sMS && acC) {
  2567.                 sMS.value = s.sectionDisplayMode;
  2568.                 const iRM = s.sectionDisplayMode === 'remember';
  2569.                 acC.disabled = !iRM;
  2570.                 acC.checked = iRM ? s.accordionMode : false;
  2571.                 const accordionHint = acC.parentElement.querySelector(`.${CSS.SETTING_VALUE_HINT}`);
  2572.                 if (accordionHint) accordionHint.style.color = iRM ? '' : 'grey';
  2573.             }
  2574.             const dC = win.querySelector(`#${IDS.SETTING_DRAGGABLE}`);
  2575.             if (dC) dC.checked = s.draggableHandleEnabled;
  2576.             const rLS = win.querySelector(`#${IDS.SETTING_RESET_LOCATION}`);
  2577.             if (rLS) rLS.value = s.resetButtonLocation;
  2578.             const vLS = win.querySelector(`#${IDS.SETTING_VERBATIM_LOCATION}`);
  2579.             if (vLS) vLS.value = s.verbatimButtonLocation;
  2580.             const aSLS = win.querySelector(`#${IDS.SETTING_ADV_SEARCH_LOCATION}`);
  2581.             if (aSLS) aSLS.value = s.advancedSearchLinkLocation;
  2582.             const pznLS = win.querySelector(`#${IDS.SETTING_PERSONALIZE_LOCATION}`);
  2583.             if (pznLS) pznLS.value = s.personalizationButtonLocation;
  2584.             const schLS = win.querySelector(`#${IDS.SETTING_SCHOLAR_LOCATION}`);
  2585.             if (schLS) schLS.value = s.googleScholarShortcutLocation;
  2586.             const trnLS = win.querySelector(`#${IDS.SETTING_TRENDS_LOCATION}`);
  2587.             if (trnLS) trnLS.value = s.googleTrendsShortcutLocation;
  2588.             const dsLS = win.querySelector(`#${IDS.SETTING_DATASET_SEARCH_LOCATION}`);
  2589.             if (dsLS) dsLS.value = s.googleDatasetSearchShortcutLocation;
  2590.         }
  2591.  
  2592.         /**
  2593.          * Populates the "Appearance" tab in the settings window with current setting values.
  2594.          * @private
  2595.          * @param {HTMLElement} win - The settings window element.
  2596.          * @param {Object} s - The current settings object.
  2597.          */
  2598.         function _populateAppearanceSettings_internal(win, s) {
  2599.             _populateSliderSetting_internal(win, IDS.SETTING_WIDTH, s.sidebarWidth);
  2600.             _populateSliderSetting_internal(win, IDS.SETTING_HEIGHT, s.sidebarHeight);
  2601.             _populateSliderSetting_internal(win, IDS.SETTING_FONT_SIZE, s.fontSize, v => parseFloat(v).toFixed(1));
  2602.             _populateSliderSetting_internal(win, IDS.SETTING_HEADER_ICON_SIZE, s.headerIconSize, v => parseFloat(v).toFixed(1));
  2603.             _populateSliderSetting_internal(win, IDS.SETTING_VERTICAL_SPACING, s.verticalSpacingMultiplier, v => `x ${parseFloat(v).toFixed(2)}`);
  2604.             _populateSliderSetting_internal(win, IDS.SETTING_OPACITY, s.idleOpacity, v => parseFloat(v).toFixed(2));
  2605.             const tS = win.querySelector(`#${IDS.SETTING_THEME}`);
  2606.             if (tS) tS.value = s.theme;
  2607.             const cDS = win.querySelector(`#${IDS.SETTING_COUNTRY_DISPLAY_MODE}`);
  2608.             if (cDS) cDS.value = s.countryDisplayMode;
  2609.             const scrollbarPos = win.querySelector(`#${IDS.SETTING_SCROLLBAR_POSITION}`);
  2610.             if (scrollbarPos) scrollbarPos.value = s.scrollbarPosition;
  2611.             const hC = win.querySelector(`#${IDS.SETTING_HOVER}`),
  2612.                 oI = win.querySelector(`#${IDS.SETTING_OPACITY}`);
  2613.             if (hC && oI) {
  2614.                 hC.checked = s.hoverMode;
  2615.                 const iHE = s.hoverMode;
  2616.                 oI.disabled = !iHE;
  2617.                 const oC = oI.closest('div');
  2618.                 if (oC) {
  2619.                     oC.style.opacity = iHE ? '1' : '0.6';
  2620.                     oC.style.pointerEvents = iHE ? 'auto' : 'none';
  2621.                 }
  2622.             }
  2623.             const hideLogoCb = win.querySelector(`#${IDS.SETTING_HIDE_GOOGLE_LOGO}`);
  2624.             if (hideLogoCb) hideLogoCb.checked = s.hideGoogleLogoWhenExpanded;
  2625.  
  2626.             const isDark = s.theme.includes('dark') || (s.theme === 'system' && systemThemeMediaQuery && systemThemeMediaQuery.matches);
  2627.             const colorDefaults = {
  2628.                 bgColor: isDark ? '#202124' : '#ffffff',
  2629.                 textColor: isDark ? '#bdc1c6' : '#3c4043',
  2630.                 linkColor: isDark ? '#8ab4f8' : '#1a0dab',
  2631.                 selectedColor: isDark ? '#e8eaed' : '#000000',
  2632.                 inputTextColor: isDark ? '#e8eaed' : '#202124',
  2633.                 borderColor: isDark ? '#5f6368' : '#dadce0',
  2634.                 dividerColor: isDark ? '#3c4043' : '#eeeeee',
  2635.                 btnBgColor: isDark ? '#303134' : '#f8f9fa',
  2636.                 btnHoverBgColor: isDark ? '#3c4043' : '#e8eaed',
  2637.                 activeBgColor: isDark ? '#8ab4f8' : '#e8f0fe',
  2638.                 activeTextColor: isDark ? '#202124' : '#1967d2',
  2639.                 activeBorderColor: isDark ? '#8ab4f8' : '#aecbfa',
  2640.                 headerIconColor: isDark ? '#bdc1c6' : '#5f6368',
  2641.             };
  2642.             COLOR_MAPPINGS.forEach(map => {
  2643.                 const picker = win.querySelector(`#${map.id}`);
  2644.                 if (picker) {
  2645.                     picker.value = s.customColors[map.key] || colorDefaults[map.key];
  2646.                 }
  2647.             });
  2648.         }
  2649.  
  2650.         /**
  2651.          * Populates the "Features" tab in the settings window with current setting values.
  2652.          * @private
  2653.          * @param {HTMLElement} win - The settings window element.
  2654.          * @param {Object} s - The current settings object.
  2655.          * @param {Function} renderFn - A callback function to render the section order list.
  2656.          */
  2657.         function _populateFeatureSettings_internal(win, s, renderFn) {
  2658.             win.querySelectorAll(`#${IDS.TAB_PANE_FEATURES} input[type="checkbox"][data-${DATA_ATTR.SECTION_ID}]`)?.forEach(cb => {
  2659.                 const sId = cb.getAttribute(`data-${DATA_ATTR.SECTION_ID}`);
  2660.                 if (sId && s.visibleSections.hasOwnProperty(sId)) {
  2661.                     cb.checked = s.visibleSections[sId];
  2662.                 } else if (sId && _defaultSettingsRef.visibleSections.hasOwnProperty(sId)) {
  2663.                     cb.checked = _defaultSettingsRef.visibleSections[sId] ?? false;
  2664.                 }
  2665.             });
  2666.             const siteSearchCheckboxModeEl = win.querySelector(`#${IDS.SETTING_SITE_SEARCH_CHECKBOX_MODE}`);
  2667.             if (siteSearchCheckboxModeEl) siteSearchCheckboxModeEl.checked = s.enableSiteSearchCheckboxMode;
  2668.             const showFaviconsEl = win.querySelector(`#${IDS.SETTING_SHOW_FAVICONS}`);
  2669.             if (showFaviconsEl) showFaviconsEl.checked = s.showFaviconsForSiteSearch;
  2670.             const filetypeSearchCheckboxModeEl = win.querySelector(`#${IDS.SETTING_FILETYPE_SEARCH_CHECKBOX_MODE}`);
  2671.             if (filetypeSearchCheckboxModeEl) filetypeSearchCheckboxModeEl.checked = s.enableFiletypeCheckboxMode;
  2672.             const showResultStatsEl = win.querySelector(`#${IDS.SETTING_SHOW_RESULT_STATS}`);
  2673.             if (showResultStatsEl) showResultStatsEl.checked = s.showResultStats;
  2674.             renderFn(s);
  2675.         }
  2676.  
  2677.         /**
  2678.          * Ensures the correct settings tab is visible based on the last active tab or a default.
  2679.          * @private
  2680.          */
  2681.         function _initializeActiveSettingsTab_internal() {
  2682.             if (!_settingsWindow) return;
  2683.             const tC = _settingsWindow.querySelector(`.${CSS.SETTINGS_TABS}`),
  2684.                 cC = _settingsWindow.querySelector(`.${CSS.SETTINGS_TAB_CONTENT}`);
  2685.             if (!tC || !cC) return;
  2686.             const aTB = tC.querySelector(`.${CSS.TAB_BUTTON}.${CSS.IS_ACTIVE}`);
  2687.             const tT = (aTB && aTB.dataset[DATA_ATTR.TAB]) ? aTB.dataset[DATA_ATTR.TAB] : 'general';
  2688.             tC.querySelectorAll(`.${CSS.TAB_BUTTON}`).forEach(b => b.classList.toggle(CSS.IS_ACTIVE, b.dataset[DATA_ATTR.TAB] === tT));
  2689.             cC.querySelectorAll(`.${CSS.TAB_PANE}`).forEach(p => p.classList.toggle(CSS.IS_ACTIVE, p.dataset[DATA_ATTR.TAB] === tT));
  2690.         }
  2691.  
  2692.         /**
  2693.          * Loads settings from storage using GM_getValue.
  2694.          * @private
  2695.          * @returns {Object} The parsed settings object from storage, or an empty object on error.
  2696.          */
  2697.         function _loadFromStorage() {
  2698.             try {
  2699.                 const s = GM_getValue(STORAGE_KEY, '{}');
  2700.                 return JSON.parse(s || '{}');
  2701.             } catch (e) {
  2702.                 console.error(`${LOG_PREFIX} Error loading/parsing settings:`, e);
  2703.                 return {};
  2704.             }
  2705.         }
  2706.  
  2707.         /**
  2708.          * Ensures the display arrays for languages and countries are valid and populated.
  2709.          * For new users or corrupted settings where these arrays are missing or empty,
  2710.          * this function populates them based on the script's default predefined options.
  2711.          * This replaces a more complex legacy migration system.
  2712.          * @private
  2713.          * @param {Object} settings - The settings object to validate and potentially modify.
  2714.          */
  2715.         function _migrateToDisplayArraysIfNecessary(settings) {
  2716.             const displayTypes = [{
  2717.                 displayKey: 'displayLanguages',
  2718.                 predefinedKey: 'language',
  2719.                 defaultEnabled: defaultSettings.enabledPredefinedOptions.language
  2720.             }, {
  2721.                 displayKey: 'displayCountries',
  2722.                 predefinedKey: 'country',
  2723.                 defaultEnabled: defaultSettings.enabledPredefinedOptions.country
  2724.             }];
  2725.  
  2726.             displayTypes.forEach(typeInfo => {
  2727.                 // Check if the display array is missing, invalid, or empty.
  2728.                 if (!Array.isArray(settings[typeInfo.displayKey]) || settings[typeInfo.displayKey].length === 0) {
  2729.                     console.log(`${LOG_PREFIX} Initializing '${typeInfo.displayKey}' with default predefined options.`);
  2730.                     const newDisplayArray = [];
  2731.                     const addedValues = new Set();
  2732.                     const defaultOptionsToEnable = typeInfo.defaultEnabled || [];
  2733.  
  2734.                     defaultOptionsToEnable.forEach(val => {
  2735.                         const predefinedOpt = PREDEFINED_OPTIONS[typeInfo.predefinedKey]?.find(p => p.value === val);
  2736.                         if (predefinedOpt && !addedValues.has(predefinedOpt.value)) {
  2737.                             newDisplayArray.push({
  2738.                                 id: predefinedOpt.value,
  2739.                                 text: _(predefinedOpt.textKey), // Text is for reference, will be re-translated on UI build
  2740.                                 value: predefinedOpt.value,
  2741.                                 type: 'predefined',
  2742.                                 originalKey: predefinedOpt.textKey
  2743.                             });
  2744.                             addedValues.add(predefinedOpt.value);
  2745.                         }
  2746.                     });
  2747.                     settings[typeInfo.displayKey] = newDisplayArray;
  2748.                 }
  2749.             });
  2750.         }
  2751.  
  2752.         /**
  2753.          * Validates and merges core settings like sidebar position and state.
  2754.          * @private
  2755.          */
  2756.         function _validateAndMergeCoreSettings_internal(target, source, defaults) {
  2757.             if (typeof target.sidebarPosition !== 'object' || target.sidebarPosition === null || Array.isArray(target.sidebarPosition)) {
  2758.                 target.sidebarPosition = JSON.parse(JSON.stringify(defaults.sidebarPosition));
  2759.             }
  2760.             target.sidebarPosition.left = parseInt(target.sidebarPosition.left, 10) || defaults.sidebarPosition.left;
  2761.             target.sidebarPosition.top = parseInt(target.sidebarPosition.top, 10) || defaults.sidebarPosition.top;
  2762.             if (typeof target.sectionStates !== 'object' || target.sectionStates === null || Array.isArray(target.sectionStates)) {
  2763.                 target.sectionStates = {};
  2764.             }
  2765.             target.sidebarCollapsed = !!target.sidebarCollapsed;
  2766.             target.draggableHandleEnabled = typeof target.draggableHandleEnabled === 'boolean' ? target.draggableHandleEnabled : defaults.draggableHandleEnabled;
  2767.             target.interfaceLanguage = typeof source.interfaceLanguage === 'string' ? source.interfaceLanguage : defaults.interfaceLanguage;
  2768.         }
  2769.  
  2770.         /**
  2771.          * Validates and merges appearance-related settings like dimensions, fonts, and colors.
  2772.          * @private
  2773.          */
  2774.         function _validateAndMergeAppearanceSettings_internal(target, source, defaults) {
  2775.             target.sidebarWidth = Utils.clamp(parseInt(target.sidebarWidth, 10) || defaults.sidebarWidth, 90, 270);
  2776.             target.sidebarHeight = Utils.clamp(parseInt(target.sidebarHeight, 10) || defaults.sidebarHeight, 25, 100);
  2777.             target.fontSize = Utils.clamp(parseFloat(target.fontSize) || defaults.fontSize, 8, 24);
  2778.             target.headerIconSize = Utils.clamp(parseFloat(target.headerIconSize) || defaults.headerIconSize, 8, 32);
  2779.             target.verticalSpacingMultiplier = Utils.clamp(parseFloat(target.verticalSpacingMultiplier) || defaults.verticalSpacingMultiplier, 0.05, 1.5);
  2780.             target.idleOpacity = Utils.clamp(parseFloat(target.idleOpacity) || defaults.idleOpacity, 0.1, 1.0);
  2781.             target.hoverMode = !!target.hoverMode;
  2782.             const validThemes = ['system', 'light', 'dark', 'minimal-light', 'minimal-dark'];
  2783.             if (target.theme === 'minimal') target.theme = 'minimal-light';
  2784.             else if (!validThemes.includes(target.theme)) target.theme = defaults.theme;
  2785.             target.hideGoogleLogoWhenExpanded = typeof source.hideGoogleLogoWhenExpanded === 'boolean' ? source.hideGoogleLogoWhenExpanded : defaults.hideGoogleLogoWhenExpanded;
  2786.  
  2787.             if (typeof source.customColors === 'object' && source.customColors !== null && !Array.isArray(source.customColors)) {
  2788.                 target.customColors = {};
  2789.                 const colorRegex = /^#[0-9a-fA-F]{6}$/;
  2790.                 COLOR_MAPPINGS.forEach(map => {
  2791.                     if (typeof source.customColors[map.key] === 'string' && (source.customColors[map.key] === '' || colorRegex.test(source.customColors[map.key]))) {
  2792.                         target.customColors[map.key] = source.customColors[map.key];
  2793.                     } else {
  2794.                         target.customColors[map.key] = '';
  2795.                     }
  2796.                 });
  2797.             } else {
  2798.                 target.customColors = JSON.parse(JSON.stringify(defaults.customColors));
  2799.             }
  2800.         }
  2801.  
  2802.         /**
  2803.          * Validates and merges feature-related settings like section visibility and button locations.
  2804.          * @private
  2805.          */
  2806.         function _validateAndMergeFeatureSettings_internal(target, source, defaults) {
  2807.             if (typeof target.visibleSections !== 'object' || target.visibleSections === null || Array.isArray(target.visibleSections)) {
  2808.                 target.visibleSections = JSON.parse(JSON.stringify(defaults.visibleSections));
  2809.             }
  2810.             const validSectionIDs = new Set(ALL_SECTION_DEFINITIONS.map(def => def.id));
  2811.             Object.keys(defaults.visibleSections).forEach(id => {
  2812.                 if (!validSectionIDs.has(id)) {
  2813.                     console.warn(`${LOG_PREFIX} Invalid section ID in defaultSettings.visibleSections: ${id}`);
  2814.                 } else if (typeof target.visibleSections[id] !== 'boolean') {
  2815.                     target.visibleSections[id] = defaults.visibleSections[id] ?? true;
  2816.                 }
  2817.             });
  2818.             const validSectionModes = ['remember', 'expandAll', 'collapseAll'];
  2819.             if (!validSectionModes.includes(target.sectionDisplayMode)) target.sectionDisplayMode = defaults.sectionDisplayMode;
  2820.             target.accordionMode = !!target.accordionMode;
  2821.             target.enableSiteSearchCheckboxMode = typeof target.enableSiteSearchCheckboxMode === 'boolean' ? target.enableSiteSearchCheckboxMode : defaults.enableSiteSearchCheckboxMode;
  2822.             target.showFaviconsForSiteSearch = typeof target.showFaviconsForSiteSearch === 'boolean' ? target.showFaviconsForSiteSearch : defaults.showFaviconsForSiteSearch;
  2823.             target.enableFiletypeCheckboxMode = typeof target.enableFiletypeCheckboxMode === 'boolean' ? target.enableFiletypeCheckboxMode : defaults.enableFiletypeCheckboxMode;
  2824.             const validButtonLocations = ['header', 'topBlock', 'tools', 'none'];
  2825.             if (!validButtonLocations.includes(target.resetButtonLocation)) target.resetButtonLocation = defaults.resetButtonLocation;
  2826.             if (!validButtonLocations.includes(target.verbatimButtonLocation)) target.verbatimButtonLocation = defaults.verbatimButtonLocation;
  2827.             if (!validButtonLocations.includes(target.advancedSearchLinkLocation)) target.advancedSearchLinkLocation = defaults.advancedSearchLinkLocation;
  2828.             if (!validButtonLocations.includes(target.personalizationButtonLocation)) {
  2829.                 target.personalizationButtonLocation = defaults.personalizationButtonLocation;
  2830.             }
  2831.             if (!validButtonLocations.includes(target.googleScholarShortcutLocation)) {
  2832.                 target.googleScholarShortcutLocation = defaults.googleScholarShortcutLocation;
  2833.             }
  2834.             if (!validButtonLocations.includes(target.googleTrendsShortcutLocation)) {
  2835.                 target.googleTrendsShortcutLocation = defaults.googleTrendsShortcutLocation;
  2836.             }
  2837.             if (!validButtonLocations.includes(target.googleDatasetSearchShortcutLocation)) {
  2838.                 target.googleDatasetSearchShortcutLocation = defaults.googleDatasetSearchShortcutLocation;
  2839.             }
  2840.             const validCountryDisplayModes = ['iconAndText', 'textOnly', 'iconOnly'];
  2841.             if (!validCountryDisplayModes.includes(target.countryDisplayMode)) target.countryDisplayMode = defaults.countryDisplayMode;
  2842.             const validScrollbarPositions = ['right', 'left', 'hidden'];
  2843.             if (!validScrollbarPositions.includes(target.scrollbarPosition)) target.scrollbarPosition = defaults.scrollbarPosition;
  2844.             target.showResultStats = typeof source.showResultStats === 'boolean' ? source.showResultStats : defaults.showResultStats;
  2845.         }
  2846.  
  2847.         /**
  2848.          * Validates and merges user-defined custom lists (e.g., favorite sites).
  2849.          * @private
  2850.          */
  2851.         function _validateAndMergeCustomLists_internal(target, source, defaults) {
  2852.             const listKeys = ['favoriteSites', 'customLanguages', 'customTimeRanges', 'customFiletypes', 'customCountries'];
  2853.             listKeys.forEach(key => {
  2854.                 target[key] = Array.isArray(target[key]) ? target[key].filter(item => item && typeof item.text === 'string' && typeof item[key === 'favoriteSites' ? 'url' : 'value'] === 'string' && item.text.trim() !== '' && item[key === 'favoriteSites' ? 'url' : 'value'].trim() !== '') : JSON.parse(JSON.stringify(defaults[key]));
  2855.             });
  2856.         }
  2857.  
  2858.         /**
  2859.          * Validates and merges the settings for enabled predefined options.
  2860.          * @private
  2861.          */
  2862.         function _validateAndMergePredefinedOptions_internal(target, source, defaults) {
  2863.             target.enabledPredefinedOptions = target.enabledPredefinedOptions || {};
  2864.             ['time', 'filetype'].forEach(type => {
  2865.                 if (!target.enabledPredefinedOptions[type] || !Array.isArray(target.enabledPredefinedOptions[type])) {
  2866.                     target.enabledPredefinedOptions[type] = JSON.parse(JSON.stringify(defaults.enabledPredefinedOptions[type] || []));
  2867.                 }
  2868.                 const savedTypeOptions = source.enabledPredefinedOptions?.[type];
  2869.                 if (PREDEFINED_OPTIONS[type] && Array.isArray(savedTypeOptions)) {
  2870.                     const validValues = new Set(PREDEFINED_OPTIONS[type].map(opt => opt.value));
  2871.                     target.enabledPredefinedOptions[type] = savedTypeOptions.filter(val => typeof val === 'string' && validValues.has(val));
  2872.                 } else if (!PREDEFINED_OPTIONS[type]) {
  2873.                     target.enabledPredefinedOptions[type] = [];
  2874.                 }
  2875.             });
  2876.             if (target.displayLanguages && target.enabledPredefinedOptions) target.enabledPredefinedOptions.language = [];
  2877.             if (target.displayCountries && target.enabledPredefinedOptions) target.enabledPredefinedOptions.country = [];
  2878.         }
  2879.  
  2880.         /**
  2881.          * Validates and finalizes the order of sidebar sections.
  2882.          * @private
  2883.          */
  2884.         function _finalizeSectionOrder_internal(target, source, defaults) {
  2885.             const finalOrder = [];
  2886.             const currentVisibleOrderSet = new Set();
  2887.             const validSectionIDs = new Set(ALL_SECTION_DEFINITIONS.map(def => def.id));
  2888.             const orderSource = (Array.isArray(source.sidebarSectionOrder) && source.sidebarSectionOrder.length > 0) ? source.sidebarSectionOrder : defaults.sidebarSectionOrder;
  2889.             orderSource.forEach(id => {
  2890.                 if (typeof id === 'string' && validSectionIDs.has(id) && target.visibleSections[id] === true && !currentVisibleOrderSet.has(id)) {
  2891.                     finalOrder.push(id);
  2892.                     currentVisibleOrderSet.add(id);
  2893.                 }
  2894.             });
  2895.             defaults.sidebarSectionOrder.forEach(id => {
  2896.                 if (typeof id === 'string' && validSectionIDs.has(id) && target.visibleSections[id] === true && !currentVisibleOrderSet.has(id)) {
  2897.                     finalOrder.push(id);
  2898.                 }
  2899.             });
  2900.             target.sidebarSectionOrder = finalOrder;
  2901.         }
  2902.  
  2903.         /**
  2904.          * Takes a raw settings object (e.g., from storage) and merges it with default settings,
  2905.          * performing validation and sanitation to ensure a clean, usable settings object.
  2906.          * @private
  2907.          * @param {Object} saved - The raw settings object loaded from storage.
  2908.          * @returns {Object} The validated and merged settings object.
  2909.          */
  2910.         function _validateAndMergeSettings(saved) {
  2911.             let newSettings = JSON.parse(JSON.stringify(_defaultSettingsRef));
  2912.             newSettings = Utils.mergeDeep(newSettings, saved);
  2913.  
  2914.             _validateAndMergeCoreSettings_internal(newSettings, saved, _defaultSettingsRef);
  2915.             _validateAndMergeAppearanceSettings_internal(newSettings, saved, _defaultSettingsRef);
  2916.             _validateAndMergeFeatureSettings_internal(newSettings, saved, _defaultSettingsRef);
  2917.             _validateAndMergeCustomLists_internal(newSettings, saved, _defaultSettingsRef);
  2918.             _migrateToDisplayArraysIfNecessary(newSettings);
  2919.  
  2920.             ['displayLanguages', 'displayCountries'].forEach(displayKey => {
  2921.                 if (!Array.isArray(newSettings[displayKey])) {
  2922.                     newSettings[displayKey] = JSON.parse(JSON.stringify(_defaultSettingsRef[displayKey])) || [];
  2923.                 }
  2924.                 newSettings[displayKey] = newSettings[displayKey].filter(item =>
  2925.                     item && typeof item.id === 'string' &&
  2926.                     (item.type === 'predefined' ? (typeof item.text === 'string' && typeof item.originalKey === 'string') : typeof item.text === 'string') &&
  2927.                     typeof item.value === 'string' &&
  2928.                     (item.type === 'predefined' || item.type === 'custom')
  2929.                 );
  2930.             });
  2931.  
  2932.             _validateAndMergePredefinedOptions_internal(newSettings, saved, _defaultSettingsRef);
  2933.             _finalizeSectionOrder_internal(newSettings, saved, _defaultSettingsRef);
  2934.  
  2935.             return newSettings;
  2936.         }
  2937.  
  2938.         // A map of element IDs to their live update event handler functions.
  2939.         const _sEH_internal = {
  2940.             [IDS.SETTING_WIDTH]: (t, vS) => _hSLI(t, 'sidebarWidth', vS, 90, 270, 5),
  2941.             [IDS.SETTING_HEIGHT]: (t, vS) => _hSLI(t, 'sidebarHeight', vS, 25, 100, 5),
  2942.             [IDS.SETTING_FONT_SIZE]: (t, vS) => _hSLI(t, 'fontSize', vS, 8, 24, 0.5, v => parseFloat(v).toFixed(1)),
  2943.             [IDS.SETTING_HEADER_ICON_SIZE]: (t, vS) => _hSLI(t, 'headerIconSize', vS, 8, 32, 0.5, v => parseFloat(v).toFixed(1)),
  2944.             [IDS.SETTING_VERTICAL_SPACING]: (t, vS) => _hSLI(t, 'verticalSpacingMultiplier', vS, 0.05, 1.5, 0.05, v => `x ${parseFloat(v).toFixed(2)}`),
  2945.             [IDS.SETTING_OPACITY]: (t, vS) => _hSLI(t, 'idleOpacity', vS, 0.1, 1.0, 0.05, v => parseFloat(v).toFixed(2)),
  2946.             [IDS.SETTING_INTERFACE_LANGUAGE]: (t) => {
  2947.                 const nL = t.value;
  2948.                 if (_currentSettings.interfaceLanguage !== nL) {
  2949.                     _currentSettings.interfaceLanguage = nL;
  2950.                     LocalizationService.updateActiveLocale(_currentSettings);
  2951.                     _initMenuCommands_cb();
  2952.                     publicApi.populateWindow();
  2953.                     _buildSidebarUI_cb();
  2954.                 }
  2955.             },
  2956.             [IDS.SETTING_THEME]: (t) => {
  2957.                 _currentSettings.theme = t.value;
  2958.                 _populateAppearanceSettings_internal(_settingsWindow, _currentSettings);
  2959.                 _applySettingsToSidebar_cb(_currentSettings);
  2960.             },
  2961.             [IDS.SETTING_HOVER]: (t) => {
  2962.                 _currentSettings.hoverMode = t.checked;
  2963.                 const oI = _settingsWindow.querySelector(`#${IDS.SETTING_OPACITY}`);
  2964.                 if (oI) {
  2965.                     const iHE = _currentSettings.hoverMode;
  2966.                     oI.disabled = !iHE;
  2967.                     const oC = oI.closest('div');
  2968.                     if (oC) {
  2969.                         oC.style.opacity = iHE ? '1' : '0.6';
  2970.                         oC.style.pointerEvents = iHE ? 'auto' : 'none';
  2971.                     }
  2972.                 }
  2973.                 _applySettingsToSidebar_cb(_currentSettings);
  2974.             },
  2975.             [IDS.SETTING_DRAGGABLE]: (t) => {
  2976.                 _currentSettings.draggableHandleEnabled = t.checked;
  2977.                 _applySettingsToSidebar_cb(_currentSettings);
  2978.                 DragManager.setDraggable(t.checked, sidebar, sidebar?.querySelector(`.${CSS.DRAG_HANDLE}`), _currentSettings, debouncedSaveSettings);
  2979.             },
  2980.             [IDS.SETTING_ACCORDION]: (t) => {
  2981.                 const sMS = _settingsWindow.querySelector(`#${IDS.SETTING_SECTION_MODE}`);
  2982.                 if (sMS?.value === 'remember') _currentSettings.accordionMode = t.checked;
  2983.                 else {
  2984.                     t.checked = false;
  2985.                     _currentSettings.accordionMode = false;
  2986.                 }
  2987.                 _applySettingsToSidebar_cb(_currentSettings);
  2988.                 _applySectionCollapseStates_cb();
  2989.             },
  2990.             [IDS.SETTING_SECTION_MODE]: (t) => {
  2991.                 _currentSettings.sectionDisplayMode = t.value;
  2992.                 const aC = _settingsWindow.querySelector(`#${IDS.SETTING_ACCORDION}`);
  2993.                 if (aC) {
  2994.                     const iRM = t.value === 'remember';
  2995.                     aC.disabled = !iRM;
  2996.                     if (aC.parentElement.querySelector(`.${CSS.SETTING_VALUE_HINT}`)) aC.parentElement.querySelector(`.${CSS.SETTING_VALUE_HINT}`).style.color = iRM ? '' : 'grey';
  2997.                     if (!iRM) {
  2998.                         aC.checked = false;
  2999.                         _currentSettings.accordionMode = false;
  3000.                     } else {
  3001.                         aC.checked = _settingsBackup?.accordionMode ?? _currentSettings.accordionMode ?? _defaultSettingsRef.accordionMode;
  3002.                         _currentSettings.accordionMode = aC.checked;
  3003.                     }
  3004.                 }
  3005.                 _applySettingsToSidebar_cb(_currentSettings);
  3006.                 _applySectionCollapseStates_cb();
  3007.             },
  3008.             [IDS.SETTING_RESET_LOCATION]: (t) => {
  3009.                 _currentSettings.resetButtonLocation = t.value;
  3010.                 _buildSidebarUI_cb();
  3011.             },
  3012.             [IDS.SETTING_VERBATIM_LOCATION]: (t) => {
  3013.                 _currentSettings.verbatimButtonLocation = t.value;
  3014.                 _buildSidebarUI_cb();
  3015.             },
  3016.             [IDS.SETTING_ADV_SEARCH_LOCATION]: (t) => {
  3017.                 _currentSettings.advancedSearchLinkLocation = t.value;
  3018.                 _buildSidebarUI_cb();
  3019.             },
  3020.             [IDS.SETTING_PERSONALIZE_LOCATION]: (target) => {
  3021.                 _currentSettings.personalizationButtonLocation = target.value;
  3022.                 _buildSidebarUI_cb();
  3023.             },
  3024.             [IDS.SETTING_SCHOLAR_LOCATION]: (target) => {
  3025.                 _currentSettings.googleScholarShortcutLocation = target.value;
  3026.                 _buildSidebarUI_cb();
  3027.             },
  3028.             [IDS.SETTING_TRENDS_LOCATION]: (target) => {
  3029.                 _currentSettings.googleTrendsShortcutLocation = target.value;
  3030.                 _buildSidebarUI_cb();
  3031.             },
  3032.             [IDS.SETTING_DATASET_SEARCH_LOCATION]: (target) => {
  3033.                 _currentSettings.googleDatasetSearchShortcutLocation = target.value;
  3034.                 _buildSidebarUI_cb();
  3035.             },
  3036.             [IDS.SETTING_SITE_SEARCH_CHECKBOX_MODE]: (target) => {
  3037.                 _currentSettings.enableSiteSearchCheckboxMode = target.checked;
  3038.                 _buildSidebarUI_cb();
  3039.             },
  3040.             [IDS.SETTING_SHOW_FAVICONS]: (target) => {
  3041.                 _currentSettings.showFaviconsForSiteSearch = target.checked;
  3042.                 _buildSidebarUI_cb();
  3043.             },
  3044.             [IDS.SETTING_FILETYPE_SEARCH_CHECKBOX_MODE]: (target) => {
  3045.                 _currentSettings.enableFiletypeCheckboxMode = target.checked;
  3046.                 _buildSidebarUI_cb();
  3047.             },
  3048.             [IDS.SETTING_COUNTRY_DISPLAY_MODE]: (t) => {
  3049.                 _currentSettings.countryDisplayMode = t.value;
  3050.                 _buildSidebarUI_cb();
  3051.             },
  3052.             [IDS.SETTING_SCROLLBAR_POSITION]: (t) => {
  3053.                 _currentSettings.scrollbarPosition = t.value;
  3054.                 _applySettingsToSidebar_cb(_currentSettings);
  3055.             },
  3056.             [IDS.SETTING_SHOW_RESULT_STATS]: (t) => {
  3057.                 _currentSettings.showResultStats = t.checked;
  3058.                 ResultStatsManager.toggle(_currentSettings.showResultStats);
  3059.             },
  3060.             [IDS.SETTING_HIDE_GOOGLE_LOGO]: (t) => {
  3061.                 _currentSettings.hideGoogleLogoWhenExpanded = t.checked;
  3062.                 _applySettingsToSidebar_cb(_currentSettings);
  3063.             },
  3064.             [IDS.RESET_CUSTOM_COLORS_BTN]: () => {
  3065.                 _currentSettings.customColors = JSON.parse(JSON.stringify(_defaultSettingsRef.customColors));
  3066.                 _populateAppearanceSettings_internal(_settingsWindow, _currentSettings);
  3067.                 _applySettingsToSidebar_cb(_currentSettings);
  3068.             }
  3069.         };
  3070.  
  3071.         /**
  3072.          * Generic handler for range slider input events.
  3073.          * @private
  3074.          */
  3075.         function _hSLI(t, sK, vS, min, max, step, fFn = v => v) {
  3076.             const v = Utils.clamp((step === 1 || step === 5) ? parseInt(t.value, 10) : parseFloat(t.value), min, max);
  3077.             if (isNaN(v)) _currentSettings[sK] = _defaultSettingsRef[sK];
  3078.             else _currentSettings[sK] = v;
  3079.             if (vS) vS.textContent = fFn(_currentSettings[sK]);
  3080.             _applySettingsToSidebar_cb(_currentSettings);
  3081.         }
  3082.  
  3083.         /**
  3084.          * The main event handler for live updates in the settings window.
  3085.          * @private
  3086.          * @param {Event} e - The input or change event.
  3087.          */
  3088.         function _lUH_internal(e) {
  3089.             const t = e.target;
  3090.             if (!t) return;
  3091.             const sI = t.id;
  3092.             const vS = (t.type === 'range') ? t.parentNode.querySelector(`.${CSS.SETTING_RANGE_VALUE}`) : null;
  3093.  
  3094.             if (t.type === 'color') {
  3095.                 const colorMapping = COLOR_MAPPINGS.find(m => m.id === t.id);
  3096.                 if (colorMapping) {
  3097.                     if (!_currentSettings.customColors) _currentSettings.customColors = {};
  3098.                     _currentSettings.customColors[colorMapping.key] = t.value;
  3099.                     _applySettingsToSidebar_cb(_currentSettings);
  3100.                     return;
  3101.                 }
  3102.             }
  3103.  
  3104.             if (_sEH_internal[sI]) {
  3105.                 if (t.type === 'range') _sEH_internal[sI](t, vS);
  3106.                 else _sEH_internal[sI](t);
  3107.             }
  3108.         }
  3109. 		
  3110.         const publicApi = {
  3111.             /**
  3112.              * Initializes the SettingsManager.
  3113.              * @param {Object} defaultSettingsObj - The default settings.
  3114.              * @param {Function} applyCb - Callback to apply settings to the sidebar.
  3115.              * @param {Function} buildCb - Callback to rebuild the sidebar UI.
  3116.              * @param {Function} collapseCb - Callback to apply section collapse states.
  3117.              * @param {Function} menuCb - Callback to initialize menu commands.
  3118.              * @param {Function} renderOrderCb - Callback to render the section order list.
  3119.              */
  3120.             initialize: function(defaultSettingsObj, applyCb, buildCb, collapseCb, menuCb, renderOrderCb) {
  3121.                 if (_isInitialized) return;
  3122.                 _defaultSettingsRef = defaultSettingsObj;
  3123.                 _applySettingsToSidebar_cb = applyCb;
  3124.                 _buildSidebarUI_cb = buildCb;
  3125.                 _applySectionCollapseStates_cb = collapseCb;
  3126.                 _initMenuCommands_cb = menuCb;
  3127.                 _renderSectionOrderList_ext_cb = renderOrderCb;
  3128.                 this.load();
  3129.                 this.buildSkeleton();
  3130.                 _isInitialized = true;
  3131.             },
  3132.  
  3133.             /**
  3134.              * Loads settings from storage and validates them.
  3135.              */
  3136.             load: function() {
  3137.                 const s = _loadFromStorage();
  3138.                 _currentSettings = _validateAndMergeSettings(s);
  3139.                 LocalizationService.updateActiveLocale(_currentSettings);
  3140.             },
  3141.  
  3142.             /**
  3143.              * Saves the current settings to storage.
  3144.              * @param {string} [logContext='SaveBtn'] - Context for logging the save action.
  3145.              */
  3146.             save: function(logContext = 'SaveBtn') {
  3147.                 try {
  3148.                     ['displayLanguages', 'displayCountries'].forEach(displayKey => {
  3149.                         const mapping = getListMapping(displayKey === 'displayLanguages' ? IDS.LANG_LIST : IDS.COUNTRIES_LIST);
  3150.                         if (mapping && mapping.customItemsMasterKey && _currentSettings[displayKey] && Array.isArray(_currentSettings[mapping.customItemsMasterKey])) {
  3151.                             const displayItems = _currentSettings[displayKey];
  3152.                             const currentDisplayCustomItems = displayItems.filter(item => item.type === 'custom');
  3153.                             const currentDisplayCustomItemValues = new Set(currentDisplayCustomItems.map(item => item.value));
  3154.  
  3155.                             const newMasterList = (_currentSettings[mapping.customItemsMasterKey] || [])
  3156.                                 .filter(masterItem => currentDisplayCustomItemValues.has(masterItem.value))
  3157.                                 .map(oldMasterItem => {
  3158.                                     const correspondingDisplayItem = currentDisplayCustomItems.find(d => d.value === oldMasterItem.value);
  3159.                                     return correspondingDisplayItem ? {
  3160.                                         text: correspondingDisplayItem.text,
  3161.                                         value: oldMasterItem.value
  3162.                                     } : oldMasterItem;
  3163.                                 });
  3164.  
  3165.                             currentDisplayCustomItems.forEach(dispItem => {
  3166.                                 if (!newMasterList.find(mi => mi.value === dispItem.value)) {
  3167.                                     newMasterList.push({
  3168.                                         text: dispItem.text,
  3169.                                         value: dispItem.value
  3170.                                     });
  3171.                                 }
  3172.                             });
  3173.                             _currentSettings[mapping.customItemsMasterKey] = newMasterList;
  3174.                         }
  3175.                     });
  3176.  
  3177.                     GM_setValue(STORAGE_KEY, JSON.stringify(_currentSettings));
  3178.                     console.log(`${LOG_PREFIX} Settings saved by SM${logContext ? ` (${logContext})` : ''}.`);
  3179.                     _settingsBackup = JSON.parse(JSON.stringify(_currentSettings));
  3180.                 } catch (e) {
  3181.                     console.error(`${LOG_PREFIX} SM save error:`, e);
  3182.                     NotificationManager.show('alert_generic_error', {
  3183.                         context: 'saving settings'
  3184.                     }, 'error', 5000);
  3185.                 }
  3186.             },
  3187.  
  3188.             /**
  3189.              * Resets the current settings to the script's defaults.
  3190.              */
  3191.             reset: function() {
  3192.                 if (confirm(_('confirm_reset_settings'))) {
  3193.                     _currentSettings = JSON.parse(JSON.stringify(_defaultSettingsRef));
  3194.                     _migrateToDisplayArraysIfNecessary(_currentSettings);
  3195.                     if (!_currentSettings.sidebarSectionOrder || _currentSettings.sidebarSectionOrder.length === 0) {
  3196.                         _currentSettings.sidebarSectionOrder = [..._defaultSettingsRef.sidebarSectionOrder];
  3197.                     }
  3198.                     LocalizationService.updateActiveLocale(_currentSettings);
  3199.                     this.populateWindow();
  3200.                     _applySettingsToSidebar_cb(_currentSettings);
  3201.                     _buildSidebarUI_cb();
  3202.                     _initMenuCommands_cb();
  3203.                     _showGlobalMessage('alert_settings_reset_success', {}, 'success', 4000);
  3204.                 }
  3205.             },
  3206.  
  3207.             /**
  3208.              * Resets all settings from a menu command, requiring a page refresh.
  3209.              */
  3210.             resetAllFromMenu: function() {
  3211.                 if (confirm(_('confirm_reset_all_menu'))) {
  3212.                     try {
  3213.                         GM_setValue(STORAGE_KEY, JSON.stringify(_defaultSettingsRef));
  3214.                         alert(_('alert_reset_all_menu_success'));
  3215.                     } catch (e) {
  3216.                         _showGlobalMessage('alert_reset_all_menu_fail', {}, 'error', 0);
  3217.                     }
  3218.                 }
  3219.             },
  3220.  
  3221.             /**
  3222.              * Returns the current settings object.
  3223.              * @returns {Object} The current settings.
  3224.              */
  3225.             getCurrentSettings: function() {
  3226.                 return _currentSettings;
  3227.             },
  3228.  
  3229.             /**
  3230.              * Builds the skeleton HTML for the settings window and overlay.
  3231.              */
  3232.             buildSkeleton: function() {
  3233.                 if (_settingsWindow) return;
  3234.                 _settingsOverlay = document.createElement('div');
  3235.                 _settingsOverlay.id = IDS.SETTINGS_OVERLAY;
  3236.                 _settingsWindow = document.createElement('div');
  3237.                 _settingsWindow.id = IDS.SETTINGS_WINDOW;
  3238.  
  3239.                 _settingsWindow.innerHTML = `
  3240.                     <div class="${CSS.SETTINGS_HEADER}">
  3241.                         <h3>${_('settingsTitle')}</h3>
  3242.                         <button class="${CSS.SETTINGS_CLOSE_BTN}" title="${_('settings_close_button_title')}">${SVG_ICONS.close}</button>
  3243.                     </div>
  3244.                     <div id="${IDS.SETTINGS_MESSAGE_BAR}" class="${CSS.MESSAGE_BAR}" style="display: none;"></div>
  3245.                     <div class="${CSS.SETTINGS_TABS}">
  3246.                         <button class="${CSS.TAB_BUTTON} ${CSS.IS_ACTIVE}" data-${DATA_ATTR.TAB}="general">${_('settings_tab_general')}</button>
  3247.                         <button class="${CSS.TAB_BUTTON}" data-${DATA_ATTR.TAB}="appearance">${_('settings_tab_appearance')}</button>
  3248.                         <button class="${CSS.TAB_BUTTON}" data-${DATA_ATTR.TAB}="features">${_('settings_tab_features')}</button>
  3249.                         <button class="${CSS.TAB_BUTTON}" data-${DATA_ATTR.TAB}="custom">${_('settings_tab_custom')}</button>
  3250.                     </div>
  3251.                     <div class="${CSS.SETTINGS_TAB_CONTENT}">
  3252.                         <div class="${CSS.TAB_PANE} ${CSS.IS_ACTIVE}" data-${DATA_ATTR.TAB}="general" id="${IDS.TAB_PANE_GENERAL}"></div>
  3253.                         <div class="${CSS.TAB_PANE}" data-${DATA_ATTR.TAB}="appearance" id="${IDS.TAB_PANE_APPEARANCE}"></div>
  3254.                         <div class="${CSS.TAB_PANE}" data-${DATA_ATTR.TAB}="features" id="${IDS.TAB_PANE_FEATURES}"></div>
  3255.                         <div class="${CSS.TAB_PANE}" data-${DATA_ATTR.TAB}="custom" id="${IDS.TAB_PANE_CUSTOM}"></div>
  3256.                     </div>
  3257.                     <div class="${CSS.SETTINGS_FOOTER}">
  3258.                         <button class="${CSS.BUTTON_RESET}">${_('settings_reset_all_button')}</button>
  3259.                         <button class="${CSS.BUTTON_CANCEL}">${_('settings_cancel_button')}</button>
  3260.                         <button class="${CSS.BUTTON_SAVE}">${_('settings_save_button')}</button>
  3261.                     </div>`;
  3262.  
  3263.                 _settingsOverlay.appendChild(_settingsWindow);
  3264.                 document.body.appendChild(_settingsOverlay);
  3265.                 this.bindEvents();
  3266.             },
  3267.  
  3268.             /**
  3269.              * Populates the settings window with content and current values.
  3270.              */
  3271.             populateWindow: function() {
  3272.                 if (!_settingsWindow) return;
  3273.                 try {
  3274.                     // Update translatable texts
  3275.                     _settingsWindow.querySelector(`.${CSS.SETTINGS_HEADER} h3`).textContent = _('settingsTitle');
  3276.                     _settingsWindow.querySelector(`.${CSS.SETTINGS_CLOSE_BTN}`).title = _('settings_close_button_title');
  3277.                     _settingsWindow.querySelector(`button[data-${DATA_ATTR.TAB}="general"]`).textContent = _('settings_tab_general');
  3278.                     _settingsWindow.querySelector(`button[data-${DATA_ATTR.TAB}="appearance"]`).textContent = _('settings_tab_appearance');
  3279.                     _settingsWindow.querySelector(`button[data-${DATA_ATTR.TAB}="features"]`).textContent = _('settings_tab_features');
  3280.                     _settingsWindow.querySelector(`button[data-${DATA_ATTR.TAB}="custom"]`).textContent = _('settings_tab_custom');
  3281.                     _settingsWindow.querySelector(`.${CSS.BUTTON_RESET}`).textContent = _('settings_reset_all_button');
  3282.                     _settingsWindow.querySelector(`.${CSS.BUTTON_CANCEL}`).textContent = _('settings_cancel_button');
  3283.                     _settingsWindow.querySelector(`.${CSS.BUTTON_SAVE}`).textContent = _('settings_save_button');
  3284.  
  3285.                     // Re-generate tab content
  3286.                     const paneGeneral = _settingsWindow.querySelector(`#${IDS.TAB_PANE_GENERAL}`);
  3287.                     if (paneGeneral) paneGeneral.innerHTML = SettingsUIPaneGenerator.createGeneralPaneHTML();
  3288.                     const paneAppearance = _settingsWindow.querySelector(`#${IDS.TAB_PANE_APPEARANCE}`);
  3289.                     if (paneAppearance) paneAppearance.innerHTML = SettingsUIPaneGenerator.createAppearancePaneHTML();
  3290.                     const paneFeatures = _settingsWindow.querySelector(`#${IDS.TAB_PANE_FEATURES}`);
  3291.                     if (paneFeatures) paneFeatures.innerHTML = SettingsUIPaneGenerator.createFeaturesPaneHTML();
  3292.                     const paneCustom = _settingsWindow.querySelector(`#${IDS.TAB_PANE_CUSTOM}`);
  3293.                     if (paneCustom) paneCustom.innerHTML = SettingsUIPaneGenerator.createCustomPaneHTML();
  3294.  
  3295.                     // Populate values
  3296.                     _populateGeneralSettings_internal(_settingsWindow, _currentSettings);
  3297.                     _populateAppearanceSettings_internal(_settingsWindow, _currentSettings);
  3298.                     _populateFeatureSettings_internal(_settingsWindow, _currentSettings, _renderSectionOrderList_ext_cb);
  3299.                     ModalManager.resetEditStateGlobally();
  3300.                     _initializeActiveSettingsTab_internal();
  3301.                     this.bindLiveUpdateEvents();
  3302.                     this.bindFeaturesTabEvents();
  3303.                 } catch (e) {
  3304.                     _showGlobalMessage('alert_init_fail', {
  3305.                         scriptName: SCRIPT_INTERNAL_NAME,
  3306.                         error: "Settings UI pop err"
  3307.                     }, 'error', 0);
  3308.                 }
  3309.             },
  3310.  
  3311.             /**
  3312.              * Shows the settings window.
  3313.              */
  3314.             show: function() {
  3315.                 if (!_settingsOverlay || !_settingsWindow) return;
  3316.                 _settingsBackup = JSON.parse(JSON.stringify(_currentSettings));
  3317.                 LocalizationService.updateActiveLocale(_currentSettings);
  3318.                 this.populateWindow();
  3319.                 applyThemeToElement(_settingsWindow, _currentSettings.theme);
  3320.                 applyThemeToElement(_settingsOverlay, _currentSettings.theme);
  3321.                 _settingsOverlay.style.display = 'flex';
  3322.             },
  3323.  
  3324.             /**
  3325.              * Hides the settings window.
  3326.              * @param {boolean} [isCancel=false] - If true, reverts any live changes to their pre-opening state.
  3327.              */
  3328.             hide: function(isCancel = false) {
  3329.                 if (!_settingsOverlay) return;
  3330.                 ModalManager.resetEditStateGlobally();
  3331.                 if (ModalManager.isModalOpen()) ModalManager.hide(true);
  3332.                 _settingsOverlay.style.display = 'none';
  3333.                 const messageBar = document.getElementById(IDS.SETTINGS_MESSAGE_BAR);
  3334.                 if (messageBar) messageBar.style.display = 'none';
  3335.                 if (isCancel && _settingsBackup && Object.keys(_settingsBackup).length > 0) {
  3336.                     _currentSettings = JSON.parse(JSON.stringify(_settingsBackup));
  3337.                     LocalizationService.updateActiveLocale(_currentSettings);
  3338.                     this.populateWindow();
  3339.                     _applySettingsToSidebar_cb(_currentSettings);
  3340.                     _buildSidebarUI_cb();
  3341.                     _initMenuCommands_cb();
  3342.                 } else if (isCancel) {
  3343.                     console.warn(`${LOG_PREFIX} SM: Cancelled, no backup to restore or backup was identical.`);
  3344.                 }
  3345.             },
  3346.  
  3347.             /**
  3348.              * Binds the main, one-time events for the settings window using event delegation.
  3349.              */
  3350.             bindEvents: function() {
  3351.                 if (!_settingsWindow || _settingsWindow.dataset.eventsBound === 'true') return;
  3352.  
  3353.                 _settingsWindow.addEventListener('click', (e) => {
  3354.                     const target = e.target;
  3355.                     // Close, Cancel, Save, Reset buttons
  3356.                     if (target.closest(`.${CSS.SETTINGS_CLOSE_BTN}`)) this.hide(true);
  3357.                     else if (target.closest(`.${CSS.BUTTON_CANCEL}`)) this.hide(true);
  3358.                     else if (target.closest(`.${CSS.BUTTON_SAVE}`)) {
  3359.                         this.save();
  3360.                         LocalizationService.updateActiveLocale(_currentSettings);
  3361.                         _initMenuCommands_cb();
  3362.                         _buildSidebarUI_cb();
  3363.                         this.hide(false);
  3364.                     } else if (target.closest(`.${CSS.BUTTON_RESET}`)) this.reset();
  3365.                     // Tab navigation
  3366.                     else if (target.closest(`.${CSS.TAB_BUTTON}`) && !target.closest(`.${CSS.IS_ACTIVE}`)) {
  3367.                         ModalManager.resetEditStateGlobally();
  3368.                         const tabToActivate = target.closest(`.${CSS.TAB_BUTTON}`).dataset[DATA_ATTR.TAB];
  3369.                         if (!tabToActivate) return;
  3370.                         _settingsWindow.querySelectorAll(`.${CSS.TAB_BUTTON}`).forEach(b => b.classList.remove(CSS.IS_ACTIVE));
  3371.                         target.closest(`.${CSS.TAB_BUTTON}`).classList.add(CSS.IS_ACTIVE);
  3372.                         _settingsWindow.querySelector(`.${CSS.SETTINGS_TAB_CONTENT}`)?.querySelectorAll(`.${CSS.TAB_PANE}`)?.forEach(p => p.classList.remove(CSS.IS_ACTIVE));
  3373.                         _settingsWindow.querySelector(`.${CSS.SETTINGS_TAB_CONTENT} .${CSS.TAB_PANE}[data-${DATA_ATTR.TAB}="${tabToActivate}"]`)?.classList.add(CSS.IS_ACTIVE);
  3374.                     }
  3375.                     // Manage custom buttons
  3376.                     else if (target.closest(`.${CSS.BUTTON_MANAGE_CUSTOM}`)) {
  3377.                         const manageType = target.closest(`.${CSS.BUTTON_MANAGE_CUSTOM}`).dataset[DATA_ATTR.MANAGE_TYPE];
  3378.                         if (manageType) {
  3379.                             ModalManager.openManageCustomOptions(manageType, _currentSettings, PREDEFINED_OPTIONS,
  3380.                                 (updatedItemsArray, newEnabledPredefs, itemsArrayKey, predefinedOptKey) => {
  3381.                                     if (itemsArrayKey) _currentSettings[itemsArrayKey] = updatedItemsArray;
  3382.                                     if (predefinedOptKey && newEnabledPredefs) {
  3383.                                         if (!_currentSettings.enabledPredefinedOptions) _currentSettings.enabledPredefinedOptions = {};
  3384.                                         _currentSettings.enabledPredefinedOptions[predefinedOptKey] = newEnabledPredefs;
  3385.                                     }
  3386.                                     _buildSidebarUI_cb();
  3387.                                 }
  3388.                             );
  3389.                         }
  3390.                     }
  3391.                 });
  3392.  
  3393.                 _settingsWindow.dataset.eventsBound = 'true';
  3394.             },
  3395.  
  3396.             /**
  3397.              * Binds events for controls that provide a live preview of changes (e.g., sliders, color pickers).
  3398.              */
  3399.             bindLiveUpdateEvents: function() {
  3400.                 if (!_settingsWindow) return;
  3401.                 const liveUpdateHandler = (e) => {
  3402.                     const target = e.target;
  3403.                     if (target && _sEH_internal[target.id]) {
  3404.                         const rangeValueSpan = (target.type === 'range') ? target.parentNode.querySelector(`.${CSS.SETTING_RANGE_VALUE}`) : null;
  3405.                         _sEH_internal[target.id](target, rangeValueSpan);
  3406.                     } else if (target && target.type === 'color') {
  3407.                         _lUH_internal(e);
  3408.                     }
  3409.                 };
  3410.  
  3411.                 _settingsWindow.removeEventListener('input', _lUH_internal);
  3412.                 _settingsWindow.removeEventListener('change', _lUH_internal);
  3413.  
  3414.                 _settingsWindow.addEventListener('input', liveUpdateHandler);
  3415.                 _settingsWindow.addEventListener('change', liveUpdateHandler);
  3416.  
  3417.                 const resetColorsBtn = _settingsWindow.querySelector(`#${IDS.RESET_CUSTOM_COLORS_BTN}`);
  3418.                 if (resetColorsBtn) {
  3419.                     resetColorsBtn.removeEventListener('click', _sEH_internal[IDS.RESET_CUSTOM_COLORS_BTN]);
  3420.                     resetColorsBtn.addEventListener('click', _sEH_internal[IDS.RESET_CUSTOM_COLORS_BTN]);
  3421.                 }
  3422.             },
  3423.  
  3424.             /**
  3425.              * Binds events specific to the "Features" tab, such as section visibility checkboxes.
  3426.              */
  3427.             bindFeaturesTabEvents: function() {
  3428.                 const featuresPane = _settingsWindow?.querySelector(`#${IDS.TAB_PANE_FEATURES}`);
  3429.                 if (!featuresPane) return;
  3430.                 featuresPane.querySelectorAll(`input[type="checkbox"][data-${DATA_ATTR.SECTION_ID}]`).forEach(checkbox => {
  3431.                     checkbox.removeEventListener('change', this._handleVisibleSectionChange);
  3432.                     checkbox.addEventListener('change', this._handleVisibleSectionChange.bind(this));
  3433.                 });
  3434.  
  3435.                 const orderListElement = featuresPane.querySelector(`#${IDS.SIDEBAR_SECTION_ORDER_LIST}`);
  3436.                 if (orderListElement) {
  3437.                     SectionOrderDragHandler.initialize(orderListElement, _currentSettings, () => {
  3438.                         _renderSectionOrderList_ext_cb(_currentSettings);
  3439.                         _buildSidebarUI_cb();
  3440.                     });
  3441.                 }
  3442.             },
  3443.  
  3444.             /**
  3445.              * Handles changes to the visibility of a section.
  3446.              * @private
  3447.              * @param {Event} e - The change event from a visibility checkbox.
  3448.              */
  3449.             _handleVisibleSectionChange: function(e) {
  3450.                 const target = e.target;
  3451.                 const sectionId = target.getAttribute(`data-${DATA_ATTR.SECTION_ID}`);
  3452.                 if (sectionId && _currentSettings.visibleSections.hasOwnProperty(sectionId)) {
  3453.                     _currentSettings.visibleSections[sectionId] = target.checked;
  3454.                     _finalizeSectionOrder_internal(_currentSettings, _currentSettings, _defaultSettingsRef);
  3455.                     _renderSectionOrderList_ext_cb(_currentSettings);
  3456.                     _buildSidebarUI_cb();
  3457.                 }
  3458.             },
  3459.         };
  3460.         return publicApi;
  3461.     })();
  3462.  
  3463.     /**
  3464.      * @module DragManager
  3465.      * Manages the dragging functionality for the main sidebar, allowing the user
  3466.      * to reposition it on the screen.
  3467.      */
  3468.     const DragManager = (function() {
  3469.         let _isDragging = false; let _dragStartX, _dragStartY, _sidebarStartX, _sidebarStartY;
  3470.         let _sidebarElement, _handleElement; let _settingsManagerRef, _saveCallbackRef;
  3471.  
  3472.         /**
  3473.          * Safely extracts client coordinates (x, y) from a mouse or touch event.
  3474.          * This utility function handles both desktop (mousedown, mousemove) and mobile (touchstart, touchmove) events.
  3475.          * @param {MouseEvent|TouchEvent} e - The browser event object.
  3476.          * @returns {{x: number, y: number}} An object containing the x and y coordinates.
  3477.          */
  3478.         function _getEventCoordinates(e) { return (e.touches && e.touches.length > 0) ? { x: e.touches[0].clientX, y: e.touches[0].clientY } : { x: e.clientX, y: e.clientY }; }
  3479.  
  3480.         /**
  3481.          * Initiates a drag operation.
  3482.          * @private
  3483.          * @param {MouseEvent|TouchEvent} e - The start event.
  3484.          */
  3485.         function _startDrag(e) {
  3486.             const currentSettings = _settingsManagerRef.getCurrentSettings();
  3487.             if (!currentSettings.draggableHandleEnabled || currentSettings.sidebarCollapsed || (e.type === 'mousedown' && e.button !== 0)) {
  3488.                 return;
  3489.             }
  3490.             e.preventDefault();
  3491.             _isDragging = true;
  3492.             const coords = _getEventCoordinates(e);
  3493.             _dragStartX = coords.x;
  3494.             _dragStartY = coords.y;
  3495.             _sidebarStartX = _sidebarElement.offsetLeft;
  3496.             _sidebarStartY = _sidebarElement.offsetTop;
  3497.             _sidebarElement.style.cursor = 'grabbing';
  3498.             _sidebarElement.style.userSelect = 'none';
  3499.             document.body.style.cursor = 'grabbing';
  3500.         }
  3501.  
  3502.         /**
  3503.          * Handles the dragging movement.
  3504.          * @private
  3505.          * @param {MouseEvent|TouchEvent} e - The move event.
  3506.          */
  3507.         function _drag(e) {
  3508.             if (!_isDragging) return;
  3509.             e.preventDefault();
  3510.             const coords = _getEventCoordinates(e);
  3511.             const dx = coords.x - _dragStartX;
  3512.             const dy = coords.y - _dragStartY;
  3513.             let newLeft = _sidebarStartX + dx;
  3514.             let newTop = _sidebarStartY + dy;
  3515.  
  3516.             const maxLeft = window.innerWidth - (_sidebarElement?.offsetWidth ?? 0);
  3517.             const maxTop = window.innerHeight - (_sidebarElement?.offsetHeight ?? 0);
  3518.             newLeft = Utils.clamp(newLeft, 0, maxLeft);
  3519.             newTop = Utils.clamp(newTop, MIN_SIDEBAR_TOP_POSITION, maxTop);
  3520.  
  3521.             if (_sidebarElement) {
  3522.                 _sidebarElement.style.left = `${newLeft}px`;
  3523.                 _sidebarElement.style.top = `${newTop}px`;
  3524.             }
  3525.         }
  3526.  
  3527.         /**
  3528.          * Stops the drag operation and saves the new position.
  3529.          * @private
  3530.          */
  3531.         function _stopDrag() {
  3532.             if (_isDragging) {
  3533.                 _isDragging = false;
  3534.                 if (_sidebarElement) {
  3535.                     _sidebarElement.style.cursor = 'default';
  3536.                     _sidebarElement.style.userSelect = '';
  3537.                 }
  3538.                 document.body.style.cursor = '';
  3539.  
  3540.                 const currentSettings = _settingsManagerRef.getCurrentSettings();
  3541.                 if (!currentSettings.sidebarPosition) currentSettings.sidebarPosition = {};
  3542.                 currentSettings.sidebarPosition.left = _sidebarElement.offsetLeft;
  3543.                 currentSettings.sidebarPosition.top = _sidebarElement.offsetTop;
  3544.  
  3545.                 if (typeof _saveCallbackRef === 'function') {
  3546.                     _saveCallbackRef('Drag Stop');
  3547.                 }
  3548.             }
  3549.         }
  3550.         return {
  3551.             /**
  3552.              * Initializes the DragManager with necessary elements and callbacks.
  3553.              * @param {HTMLElement} sidebarEl - The main sidebar element.
  3554.              * @param {HTMLElement} handleEl - The specific drag handle element.
  3555.              * @param {Object} settingsMgr - A reference to the SettingsManager.
  3556.              * @param {Function} saveCb - The debounced save settings callback.
  3557.              */
  3558.             init: function(sidebarEl, handleEl, settingsMgr, saveCb) {
  3559.                 _sidebarElement = sidebarEl;
  3560.                 _handleElement = handleEl;
  3561.                 _settingsManagerRef = settingsMgr;
  3562.                 _saveCallbackRef = saveCb;
  3563.  
  3564.                 if (_handleElement) {
  3565.                     _handleElement.addEventListener('mousedown', _startDrag);
  3566.                     _handleElement.addEventListener('touchstart', _startDrag, { passive: false });
  3567.                 }
  3568.                 document.addEventListener('mousemove', _drag);
  3569.                 document.addEventListener('touchmove', _drag, { passive: false });
  3570.                 document.addEventListener('mouseup', _stopDrag);
  3571.                 document.addEventListener('touchend', _stopDrag);
  3572.                 document.addEventListener('touchcancel', _stopDrag);
  3573.             },
  3574.  
  3575.             /**
  3576.              * Enables or disables the dragging functionality.
  3577.              * @param {boolean} isEnabled - Whether dragging should be enabled.
  3578.              * @param {HTMLElement} sidebarEl - The main sidebar element.
  3579.              * @param {HTMLElement} handleEl - The drag handle element.
  3580.              */
  3581.             setDraggable: function(isEnabled, sidebarEl, handleEl) {
  3582.                 _sidebarElement = sidebarEl;
  3583.                 _handleElement = handleEl;
  3584.                 if (_handleElement) {
  3585.                     _handleElement.style.display = isEnabled ? 'block' : 'none';
  3586.                 }
  3587.             }
  3588.         };
  3589.     })();
  3590.  
  3591.     /**
  3592.      * @module ResultStatsManager
  3593.      * Manages the display of search result statistics (count and time) in the sidebar.
  3594.      * It uses a robust combination of polling and MutationObserver to reliably find
  3595.      * the statistics element on the Google search results page, which can load asynchronously.
  3596.      */
  3597.     const ResultStatsManager = (function() {
  3598.         let _container = null;
  3599.         let _observer = null;
  3600.         let _isUpdating = false;
  3601.         let _pollingInterval = null;
  3602.         let _pollCount = 0;
  3603.         const MAX_POLLS = 16;
  3604.         const POLLING_INTERVAL_MS = 250;
  3605.         let _statsDisplayed = false;
  3606.  
  3607.         /**
  3608.          * Parses the raw statistics string from Google's result-stats element
  3609.          * and formats it into a more compact "count (time)" string.
  3610.          * @private
  3611.          * @param {string} text - The raw text content from the #result-stats element.
  3612.          * @returns {string} The formatted statistics string, or an empty string if parsing fails.
  3613.          */
  3614.         function _parseAndFormatStats(text) {
  3615.             if (!text) return '';
  3616.  
  3617.             const timeRegex = /[（\(]([\d,.]+)\s*\S+[）\)]/i;
  3618.             const timeMatch = text.match(timeRegex);
  3619.  
  3620.             if (!timeMatch) {
  3621.                 const fallbackTimeRegex = /[（\(]([\d,.]+)\s*s[）\)]/i;
  3622.                 const fallbackTimeMatch = text.match(fallbackTimeRegex);
  3623.                 if (!fallbackTimeMatch) {
  3624.                     return '';
  3625.                 }
  3626.                 timeMatch = fallbackTimeMatch;
  3627.             }
  3628.  
  3629.             const timeStr = timeMatch[1].replace(',', '.');
  3630.             let textWithoutTime = text.replace(timeMatch[0], '');
  3631.  
  3632.             const numberRegex = /[\d.,\s ]+/g;
  3633.             let allNumbers = textWithoutTime.match(numberRegex) || [];
  3634.  
  3635.             if (allNumbers.length === 0) {
  3636.                 return '';
  3637.             }
  3638.  
  3639.             let largestNumber = 0;
  3640.             allNumbers.forEach(numStr => {
  3641.                 const cleanNumStr = numStr.trim().replace(/[.,\s ]/g, '');
  3642.                 if (cleanNumStr) {
  3643.                     const num = parseInt(cleanNumStr, 10);
  3644.                     if (!isNaN(num) && num > largestNumber) {
  3645.                         largestNumber = num;
  3646.                     }
  3647.                 }
  3648.             });
  3649.  
  3650.             if (largestNumber === 0) {
  3651.                  if (!/\s0\s/.test(textWithoutTime)) {
  3652.                    return '';
  3653.                  }
  3654.             }
  3655.  
  3656.             const formattedCount = new Intl.NumberFormat('en-US').format(largestNumber);
  3657.             return `${formattedCount} (${timeStr}s)`;
  3658.         }
  3659.  
  3660.         /**
  3661.          * Updates the displayed statistics in the sidebar if the source element is found.
  3662.          * @private
  3663.          * @returns {boolean} True if the stats were successfully displayed, false otherwise.
  3664.          */
  3665.         function _updateDisplay() {
  3666.             if (_isUpdating) return false;
  3667.  
  3668.             if (!SettingsManager.getCurrentSettings().showResultStats) {
  3669.                 _clearDisplay();
  3670.                 return true;
  3671.             }
  3672.  
  3673.             const sourceEl = document.getElementById('result-stats');
  3674.             if (!sourceEl || !_container) {
  3675.                 _clearDisplay();
  3676.                 return false;
  3677.             }
  3678.  
  3679.             const formattedText = _parseAndFormatStats(sourceEl.textContent);
  3680.             const displayEl = _container.querySelector('#gscs-result-stats-display');
  3681.  
  3682.             if (formattedText) {
  3683.                 _isUpdating = true;
  3684.                 if (displayEl && displayEl.textContent !== formattedText) {
  3685.                     displayEl.textContent = formattedText;
  3686.                 }
  3687.                 if (_container.style.display === 'none') {
  3688.                     _container.style.display = '';
  3689.                 }
  3690.                 _statsDisplayed = true;
  3691.                 _isUpdating = false;
  3692.                 return true;
  3693.             } else {
  3694.                 _clearDisplay();
  3695.                 return false;
  3696.             }
  3697.         }
  3698.  
  3699.         /**
  3700.          * Clears the displayed statistics from the sidebar.
  3701.          * @private
  3702.          */
  3703.         function _clearDisplay() {
  3704.             if (_container) {
  3705.                 _isUpdating = true;
  3706.                 const displayEl = _container.querySelector('#gscs-result-stats-display');
  3707.                 if (displayEl && displayEl.textContent !== '') {
  3708.                     displayEl.textContent = '';
  3709.                 }
  3710.                  if (_container.style.display !== 'none') {
  3711.                     _container.style.display = 'none';
  3712.                 }
  3713.                 _isUpdating = false;
  3714.             }
  3715.         }
  3716.  
  3717.         /**
  3718.          * Stops the polling interval used to find the stats element.
  3719.          * @private
  3720.          */
  3721.         function _stopPolling() {
  3722.             if (_pollingInterval) {
  3723.                 clearInterval(_pollingInterval);
  3724.                 _pollingInterval = null;
  3725.             }
  3726.         }
  3727.  
  3728.         /**
  3729.          * Starts a robust check for the statistics element, using both polling and a MutationObserver.
  3730.          * @private
  3731.          */
  3732.         function _startRobustCheck() {
  3733.             if (_updateDisplay()) {
  3734.                 return;
  3735.             }
  3736.  
  3737.             _stopPolling();
  3738.             _pollCount = 0;
  3739.             _pollingInterval = setInterval(() => {
  3740.                 _pollCount++;
  3741.                 if (_updateDisplay() || _pollCount >= MAX_POLLS) {
  3742.                     _stopPolling();
  3743.                 }
  3744.             }, POLLING_INTERVAL_MS);
  3745.  
  3746.             if (_observer) _observer.disconnect();
  3747.             const targetNode = document.body;
  3748.             if (!targetNode) return;
  3749.  
  3750.             _observer = new MutationObserver(() => {
  3751.                  if (document.getElementById('result-stats')) {
  3752.                     _updateDisplay();
  3753.                     _stopPolling();
  3754.                     _observer.disconnect();
  3755.                 }
  3756.             });
  3757.             _observer.observe(targetNode, { childList: true, subtree: true });
  3758.         }
  3759.  
  3760.         window.addEventListener('load', () => {
  3761.             setTimeout(() => {
  3762.                 if (!_statsDisplayed) {
  3763.                     _updateDisplay();
  3764.                 }
  3765.             }, 500);
  3766.         });
  3767.  
  3768.         return {
  3769.             /**
  3770.              * Initializes the manager, starting the search for the stats element.
  3771.              */
  3772.             init: function() {
  3773.                 _statsDisplayed = false;
  3774.                 _startRobustCheck();
  3775.             },
  3776.  
  3777.             /**
  3778.              * Creates the container element for the stats display.
  3779.              * @param {DocumentFragment} parentFragment - The fragment to append the container to.
  3780.              */
  3781.             createContainer: function(parentFragment) {
  3782.                 _container = document.createElement('div');
  3783.                 _container.id = IDS.RESULT_STATS_CONTAINER;
  3784.                 const display = document.createElement('div');
  3785.                 display.id = 'gscs-result-stats-display';
  3786.                 _container.appendChild(display);
  3787.                 parentFragment.appendChild(_container);
  3788.                 _container.style.display = 'none';
  3789.             },
  3790.  
  3791.             /**
  3792.              * Public method to trigger a manual update of the stats display.
  3793.              */
  3794.             update: _updateDisplay,
  3795.  
  3796.             /**
  3797.              * Toggles the visibility of the stats display based on user settings.
  3798.              * @param {boolean} show - Whether to show or hide the stats.
  3799.              */
  3800.             toggle: function(show) {
  3801.                 if (show) {
  3802.                     if (!_statsDisplayed) {
  3803.                        _startRobustCheck();
  3804.                     } else {
  3805.                        _updateDisplay();
  3806.                     }
  3807.                 } else {
  3808.                     _clearDisplay();
  3809.                 }
  3810.             }
  3811.         };
  3812.     })();
  3813. 	
  3814.     /**
  3815.      * @module URLActionManager
  3816.      * The core action handler of the script. It is responsible for applying all filters
  3817.      * by generating new Google search URLs with the appropriate parameters and then
  3818.      * navigating the browser to them. It handles a variety of URL parameters, including
  3819.      * the complex `tbs` parameter and query-modifying operators like `site:`.
  3820.      */
  3821.     const URLActionManager = (function() {
  3822.         function _getURLObject() { try { return new URL(window.location.href); } catch (e) { console.error(`${LOG_PREFIX} Error creating URL object: `, e); return null; }}
  3823.         function _navigateTo(url) { window.location.href = url.toString(); }
  3824.         function _setSearchParam(urlObj, paramName, value) { urlObj.searchParams.set(paramName, value); }
  3825.         function _deleteSearchParam(urlObj, paramName) { urlObj.searchParams.delete(paramName); }
  3826.         function _getTbsParts(urlObj) { const tbs = urlObj.searchParams.get('tbs'); return tbs ? tbs.split(',').filter(p => p.trim() !== '') : []; }
  3827.         function _setTbsParam(urlObj, tbsPartsArray) { const newTbsValue = tbsPartsArray.join(','); if (newTbsValue) { _setSearchParam(urlObj, 'tbs', newTbsValue); } else { _deleteSearchParam(urlObj, 'tbs'); }}
  3828.  
  3829.         /**
  3830.          * A generic function to generate a new URL based on a modification function.
  3831.          * @param {Function} urlModifier - A function that takes a URL object and modifies it.
  3832.          * @returns {string|null} The string representation of the modified URL, or null on error.
  3833.          */
  3834.         function generateURL(urlModifier) {
  3835.             try {
  3836.                 const u = _getURLObject();
  3837.                 if (!u) return null;
  3838.                 urlModifier(u);
  3839.                 return u.toString();
  3840.             } catch (e) {
  3841.                 console.error(`${LOG_PREFIX} Error generating URL:`, e);
  3842.                 return null;
  3843.             }
  3844.         }
  3845.  
  3846.         const publicApi = {
  3847.             generateURLObject: _getURLObject,
  3848.             generateResetFiltersURL: function() {
  3849.                 return generateURL(u => {
  3850.                     const q = u.searchParams.get('q') || '';
  3851.                     const nP = new URLSearchParams();
  3852.                     // Clean both site and filetype operators
  3853.                     let cQ = Utils._cleanQueryByOperator(q, 'site');
  3854.                     cQ = Utils._cleanQueryByOperator(cQ, 'filetype');
  3855.  
  3856.                     if (cQ) { nP.set('q', cQ); }
  3857.                     u.search = nP.toString();
  3858.                     _deleteSearchParam(u, 'tbs'); _deleteSearchParam(u, 'lr'); _deleteSearchParam(u, 'cr');
  3859.                     _deleteSearchParam(u, 'as_filetype'); _deleteSearchParam(u, 'as_occt');
  3860.                 });
  3861.             },
  3862.             generateToggleVerbatimURL: function() {
  3863.                 return generateURL(u => {
  3864.                     let tP = _getTbsParts(u);
  3865.                     const vP = 'li:1';
  3866.                     const iCA = tP.includes(vP);
  3867.                     tP = tP.filter(p => p !== vP);
  3868.                     if (!iCA) { tP.push(vP); }
  3869.                     _setTbsParam(u, tP);
  3870.                 });
  3871.             },
  3872.             generateTogglePersonalizationURL: function() {
  3873.                 return generateURL(u => {
  3874.                     const isActive = publicApi.isPersonalizationActive();
  3875.                     if (isActive) { _setSearchParam(u, 'pws', '0'); }
  3876.                     else { _deleteSearchParam(u, 'pws'); }
  3877.                 });
  3878.             },
  3879.             generateFilterURL: function(type, value) {
  3880.                 return generateURL(u => {
  3881.                     let tbsParts = _getTbsParts(u);
  3882.                     const isTimeFilter = type === 'qdr';
  3883.                     const isStandaloneParam = ['lr', 'cr', 'as_occt'].includes(type);
  3884.  
  3885.                     if (isTimeFilter) {
  3886.                         let processedTbsParts = tbsParts.filter(p => !p.startsWith(`qdr:`) && !p.startsWith('cdr:') && !p.startsWith('cd_min:') && !p.startsWith('cd_max:'));
  3887.                         if (value !== '') processedTbsParts.push(`qdr:${value}`);
  3888.                         _setTbsParam(u, processedTbsParts);
  3889.                     } else if (isStandaloneParam) {
  3890.                         _deleteSearchParam(u, type);
  3891.                         if (value !== '' && !(type === 'as_occt' && value === 'any')) {
  3892.                             _setSearchParam(u, type, value);
  3893.                         }
  3894.                     } else if (type === 'as_filetype') {
  3895.                         let currentQuery = u.searchParams.get('q') || '';
  3896.                         // MODIFIED: Only clean 'filetype:' operators
  3897.                         currentQuery = Utils._cleanQueryByOperator(currentQuery, 'filetype');
  3898.  
  3899.                         if (value !== '') {
  3900.                             _setSearchParam(u, 'q', (currentQuery + ` filetype:${value}`).trim());
  3901.                         } else {
  3902.                             if (currentQuery) _setSearchParam(u, 'q', currentQuery);
  3903.                             else _deleteSearchParam(u, 'q');
  3904.                         }
  3905.                         _deleteSearchParam(u, 'as_filetype');
  3906.                     }
  3907.                 });
  3908.             },
  3909.             generateSiteSearchURL: function(siteCriteria) {
  3910.                 return generateURL(u => {
  3911.                     const sitesToSearch = Array.isArray(siteCriteria) ? siteCriteria.flatMap(sc => Utils.parseCombinedValue(sc)) : Utils.parseCombinedValue(siteCriteria);
  3912.                     const uniqueSites = [...new Set(sitesToSearch.map(s => s.toLowerCase()))];
  3913.                     if (uniqueSites.length === 0) return;
  3914.                     let q = u.searchParams.get('q') || '';
  3915.                     // MODIFIED: Only clean 'site:' operators
  3916.                     q = Utils._cleanQueryByOperator(q, 'site');
  3917.                     let siteQueryPart = uniqueSites.map(s => `site:${s}`).join(' OR ');
  3918.                     const nQ = `${q} ${siteQueryPart}`.trim();
  3919.                     _setSearchParam(u, 'q', nQ);
  3920.                     // Clear other filters that conflict with site search
  3921.                     _deleteSearchParam(u, 'cr'); _deleteSearchParam(u, 'as_filetype');
  3922.                 });
  3923.             },
  3924.             generateCombinedFiletypeSearchURL: function(filetypeCriteria) {
  3925.                  return generateURL(u => {
  3926.                     const filetypesToSearch = Array.isArray(filetypeCriteria) ? filetypeCriteria.flatMap(fc => Utils.parseCombinedValue(fc)) : Utils.parseCombinedValue(filetypeCriteria);
  3927.                     const uniqueFiletypes = [...new Set(filetypesToSearch.map(f => f.toLowerCase()))];
  3928.                     if (uniqueFiletypes.length === 0) return;
  3929.                     let q = u.searchParams.get('q') || '';
  3930.                     // MODIFIED: Only clean 'filetype:' operators
  3931.                     q = Utils._cleanQueryByOperator(q, 'filetype');
  3932.                     let filetypeQueryPart = uniqueFiletypes.map(ft => `filetype:${ft}`).join(' OR ');
  3933.                     const nQ = `${q} ${filetypeQueryPart}`.trim();
  3934.                     _setSearchParam(u, 'q', nQ);
  3935.                     _deleteSearchParam(u, 'as_filetype');
  3936.                 });
  3937.             },
  3938.             generateClearSiteSearchURL: function() {
  3939.                 return generateURL(u => {
  3940.                     const q = u.searchParams.get('q') || '';
  3941.                     // MODIFIED: Only clean 'site:' operators
  3942.                     let nQ = Utils._cleanQueryByOperator(q, 'site');
  3943.                     if (nQ) { _setSearchParam(u, 'q', nQ); } else { _deleteSearchParam(u, 'q'); }
  3944.                 });
  3945.             },
  3946.             generateClearFiletypeSearchURL: function() {
  3947.                  return generateURL(u => {
  3948.                     let q = u.searchParams.get('q') || '';
  3949.                     // MODIFIED: Only clean 'filetype:' operators
  3950.                     q = Utils._cleanQueryByOperator(q, 'filetype');
  3951.                     if (q) { _setSearchParam(u, 'q', q); } else { _deleteSearchParam(u, 'q'); }
  3952.                     _deleteSearchParam(u, 'as_filetype');
  3953.                 });
  3954.             },
  3955.             generateDateRangeURL: function(dateMinStr, dateMaxStr) {
  3956.                 return generateURL(u => {
  3957.                     let dateTbsPart = 'cdr:1';
  3958.                     if (dateMinStr) { const [y, m, d] = dateMinStr.split('-'); dateTbsPart += `,cd_min:${m}/${d}/${y}`; }
  3959.                     if (dateMaxStr) { const [y, m, d] = dateMaxStr.split('-'); dateTbsPart += `,cd_max:${m}/${d}/${y}`; }
  3960.                     let tbsParts = _getTbsParts(u);
  3961.                     let preservedTbsParts = tbsParts.filter(p => !p.startsWith('qdr:') && !p.startsWith('cdr:') && !p.startsWith('cd_min:') && !p.startsWith('cd_max:'));
  3962.                     let newTbsParts = [...preservedTbsParts, dateTbsPart];
  3963.                     _setTbsParam(u, newTbsParts);
  3964.                 });
  3965.             },
  3966.             triggerResetFilters: function() {
  3967.                 const url = publicApi.generateResetFiltersURL();
  3968.                 if(url) _navigateTo(url);
  3969.                 else NotificationManager.show('alert_error_resetting_filters', {}, 'error', 5000);
  3970.             },
  3971.             triggerToggleVerbatim: function() {
  3972.                 const url = publicApi.generateToggleVerbatimURL();
  3973.                 if(url) _navigateTo(url);
  3974.                 else NotificationManager.show('alert_error_toggling_verbatim', {}, 'error', 5000);
  3975.             },
  3976.             triggerTogglePersonalization: function() {
  3977.                 const url = publicApi.generateTogglePersonalizationURL();
  3978.                 if (url) _navigateTo(url);
  3979.                 else NotificationManager.show('alert_error_toggling_personalization', {}, 'error', 5000);
  3980.             },
  3981.             applyFilter: function(type, value) {
  3982.                 if (type === 'as_filetype' && Utils.parseCombinedValue(value).length > 1) {
  3983.                     publicApi.applyCombinedFiletypeSearch(value);
  3984.                     return;
  3985.                 }
  3986.                 const url = publicApi.generateFilterURL(type, value);
  3987.                 if (url) _navigateTo(url);
  3988.                 else NotificationManager.show('alert_error_applying_filter', { type, value }, 'error', 5000);
  3989.             },
  3990.             applySiteSearch: function(siteCriteria) {
  3991.                 const url = publicApi.generateSiteSearchURL(siteCriteria);
  3992.                 if (url) _navigateTo(url);
  3993.                 else {
  3994.                     const siteForError = Array.isArray(siteCriteria) ? siteCriteria.join(', ') : siteCriteria;
  3995.                     NotificationManager.show('alert_error_applying_site_search', { site: siteForError }, 'error', 5000);
  3996.                 }
  3997.             },
  3998.             applyCombinedFiletypeSearch: function(filetypeCriteria) {
  3999.                 const url = publicApi.generateCombinedFiletypeSearchURL(filetypeCriteria);
  4000.                 if (url) _navigateTo(url);
  4001.                 else {
  4002.                     const ftForError = Array.isArray(filetypeCriteria) ? filetypeCriteria.join(', ') : filetypeCriteria;
  4003.                     NotificationManager.show('alert_error_applying_filter', { type: 'filetype (combined)', value: ftForError }, 'error', 5000);
  4004.                 }
  4005.             },
  4006.             clearSiteSearch: function() {
  4007.                 const url = publicApi.generateClearSiteSearchURL();
  4008.                 if(url) _navigateTo(url);
  4009.                 else NotificationManager.show('alert_error_clearing_site_search', {}, 'error', 5000);
  4010.             },
  4011.             clearFiletypeSearch: function() {
  4012.                 const url = publicApi.generateClearFiletypeSearchURL();
  4013.                 if (url) _navigateTo(url);
  4014.                 else NotificationManager.show('alert_error_applying_filter', { type: 'filetype', value: '(clear)' }, 'error', 5000);
  4015.             },
  4016.             applyDateRange: function(dateMinStr, dateMaxStr) {
  4017.                 const url = publicApi.generateDateRangeURL(dateMinStr, dateMaxStr);
  4018.                 if(url) _navigateTo(url);
  4019.                 else NotificationManager.show('alert_error_applying_date', {}, 'error', 5000);
  4020.             },
  4021.             isPersonalizationActive: function() { try { const u = _getURLObject(); return u ? u.searchParams.get('pws') !== '0' : true; } catch(e) { console.warn(`${LOG_PREFIX} [URLActionManager.isPersonalizationActive] Error:`, e); return true; }},
  4022.             isVerbatimActive: function() { try { const u = _getURLObject(); return u ? /li:1/.test(u.searchParams.get('tbs') || '') : false; } catch (e) { console.warn(`${LOG_PREFIX} Error checking verbatim status:`, e); return false; }},
  4023.         };
  4024.         return publicApi;
  4025.     })();
  4026.  
  4027.     /**
  4028.      * Injects the script's CSS styles into the page.
  4029.      * It relies on the companion style script to populate `window.GSCS_Namespace.stylesText`.
  4030.      */
  4031.     function addGlobalStyles() { if (typeof window.GSCS_Namespace !== 'undefined' && typeof window.GSCS_Namespace.stylesText === 'string') { const cleanedCSS = window.GSCS_Namespace.stylesText.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '$1').replace(/\n\s*\n/g, '\n'); GM_addStyle(cleanedCSS); } else { console.error(`${LOG_PREFIX} CRITICAL: CSS styles provider not found.`); if (typeof IDS !== 'undefined' && IDS.SIDEBAR) { GM_addStyle(`#${IDS.SIDEBAR} { border: 3px dashed red !important; padding: 15px !important; background: white !important; color: red !important; } #${IDS.SIDEBAR}::before { content: "Error: CSS Missing!"; }`);} } }
  4032.  
  4033.     /**
  4034.      * Sets up a listener to detect changes in the system's color scheme (light/dark mode).
  4035.      * This allows the sidebar to automatically update its theme when the user's system theme changes,
  4036.      * provided the "Follow System" theme option is selected.
  4037.      */
  4038.     function setupSystemThemeListener() { if (systemThemeMediaQuery && systemThemeMediaQuery._sidebarThemeListener) { try { systemThemeMediaQuery.removeEventListener('change', systemThemeMediaQuery._sidebarThemeListener); } catch (e) {} systemThemeMediaQuery._sidebarThemeListener = null; } if (window.matchMedia) { systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const listener = () => { const cs = SettingsManager.getCurrentSettings(); if (sidebar && cs.theme === 'system') { applyThemeToElement(sidebar, 'system'); } }; systemThemeMediaQuery.addEventListener('change', listener); systemThemeMediaQuery._sidebarThemeListener = listener; } }
  4039.  
  4040.     /**
  4041.      * Builds the basic HTML structure (skeleton) for the sidebar and injects it into the page.
  4042.      * This initial structure includes the header with collapse, drag, and settings buttons.
  4043.      */
  4044.     function buildSidebarSkeleton() { sidebar = document.createElement('div'); sidebar.id = IDS.SIDEBAR; const header = document.createElement('div'); header.classList.add(CSS.SIDEBAR_HEADER); const collapseBtn = document.createElement('button'); collapseBtn.id = IDS.COLLAPSE_BUTTON; collapseBtn.innerHTML = SVG_ICONS.chevronLeft; collapseBtn.title = _('sidebar_collapse_title'); const dragHandle = document.createElement('div'); dragHandle.classList.add(CSS.DRAG_HANDLE); dragHandle.title = _('sidebar_drag_title'); const settingsBtn = document.createElement('button'); settingsBtn.id = IDS.SETTINGS_BUTTON; settingsBtn.classList.add(CSS.SETTINGS_BUTTON); settingsBtn.innerHTML = SVG_ICONS.settings; settingsBtn.title = _('sidebar_settings_title'); header.appendChild(collapseBtn); header.appendChild(dragHandle); header.appendChild(settingsBtn); sidebar.appendChild(header); document.body.appendChild(sidebar); }
  4045.  
  4046.     /**
  4047.      * Applies all visual settings (position, dimensions, theme, colors, etc.) to the sidebar element.
  4048.      * This function is called whenever a relevant setting is changed.
  4049.      * @param {Object} [settingsToApply] - The settings object to apply. If not provided, it uses the current settings.
  4050.      */
  4051.     function applySettings(settingsToApply) {
  4052.         if (!sidebar) return;
  4053.         const currentSettings = settingsToApply || SettingsManager.getCurrentSettings();
  4054.         let targetTop = currentSettings.sidebarPosition.top;
  4055.         targetTop = Math.max(MIN_SIDEBAR_TOP_POSITION, targetTop);
  4056.         sidebar.style.left = `${currentSettings.sidebarPosition.left}px`;
  4057.         sidebar.style.top = `${targetTop}px`;
  4058.         sidebar.style.setProperty('--sidebar-font-base-size', `${currentSettings.fontSize}px`);
  4059.         sidebar.style.setProperty('--sidebar-header-icon-base-size', `${currentSettings.headerIconSize}px`);
  4060.         sidebar.style.setProperty('--sidebar-spacing-multiplier', currentSettings.verticalSpacingMultiplier);
  4061.         sidebar.style.setProperty('--sidebar-max-height', `${currentSettings.sidebarHeight}vh`);
  4062.         if (!currentSettings.sidebarCollapsed) { sidebar.style.width = `${currentSettings.sidebarWidth}px`; }
  4063.         else { sidebar.style.width = '40px';}
  4064.         applyThemeToElement(sidebar, currentSettings.theme);
  4065.         if (sidebar._hoverListeners) { sidebar.removeEventListener('mouseenter', sidebar._hoverListeners.enter); sidebar.removeEventListener('mouseleave', sidebar._hoverListeners.leave); sidebar._hoverListeners = null; sidebar.style.opacity = '1';}
  4066.         if (currentSettings.hoverMode && !currentSettings.sidebarCollapsed) { const idleOpacityValue = currentSettings.idleOpacity; sidebar.style.opacity = idleOpacityValue.toString(); const enterL = () => { if (!currentSettings.sidebarCollapsed) sidebar.style.opacity = '1'; }; const leaveL = () => { if (!currentSettings.sidebarCollapsed) sidebar.style.opacity = idleOpacityValue.toString(); }; sidebar.addEventListener('mouseenter', enterL); sidebar.addEventListener('mouseleave', leaveL); sidebar._hoverListeners = { enter: enterL, leave: leaveL }; }
  4067.         else { sidebar.style.opacity = '1'; }
  4068.         applySidebarCollapseVisuals(currentSettings.sidebarCollapsed);
  4069.  
  4070.         const colors = currentSettings.customColors;
  4071.         COLOR_MAPPINGS.forEach(map => {
  4072.             map.cssVars.forEach(cssVar => {
  4073.                 if (colors[map.key]) {
  4074.                     sidebar.style.setProperty(cssVar, colors[map.key]);
  4075.                 } else {
  4076.                     sidebar.style.removeProperty(cssVar);
  4077.                 }
  4078.             });
  4079.         });
  4080.  
  4081.         sidebar.classList.remove('scrollbar-left', 'scrollbar-hidden');
  4082.         if (currentSettings.scrollbarPosition === 'left') {
  4083.             sidebar.classList.add('scrollbar-left');
  4084.         } else if (currentSettings.scrollbarPosition === 'hidden') {
  4085.             sidebar.classList.add('scrollbar-hidden');
  4086.         }
  4087.  
  4088.         const googleLogo = document.querySelector('#logo');
  4089.         if (googleLogo) {
  4090.             if (currentSettings.hideGoogleLogoWhenExpanded && !currentSettings.sidebarCollapsed) {
  4091.                 googleLogo.style.visibility = 'hidden';
  4092.             } else {
  4093.                 googleLogo.style.visibility = 'visible';
  4094.             }
  4095.         }
  4096.  
  4097.         ResultStatsManager.toggle(currentSettings.showResultStats);
  4098.     }
  4099. 	
  4100.     /**
  4101.      * Parses a time filter value (e.g., 'h', 'd2', 'w') into a comparable number of minutes.
  4102.      * This is used for sorting time filter options logically.
  4103.      * @private
  4104.      * @param {string} timeValue - The time value string.
  4105.      * @returns {number} The equivalent number of minutes, or Infinity for invalid/any-time values.
  4106.      */
  4107.     function _parseTimeValueToMinutes(timeValue) { if (!timeValue || typeof timeValue !== 'string') return Infinity; const match = timeValue.match(/^([hdwmy])(\d*)$/i); if (!match) return Infinity; const unit = match[1].toLowerCase(); const number = parseInt(match[2] || '1', 10); if (isNaN(number)) return Infinity; switch (unit) { case 'h': return number * 60; case 'd': return number * 24 * 60; case 'w': return number * 7 * 24 * 60; case 'm': return number * 30 * 24 * 60; case 'y': return number * 365 * 24 * 60; default: return Infinity; } }
  4108.  
  4109.     /**
  4110.      * Prepares and sorts the final list of filter options to be displayed in a section.
  4111.      * It combines script-defined options, predefined user-enabled options, and custom user-added options.
  4112.      * @private
  4113.      * @param {string} sectionId - The ID of the section being prepared.
  4114.      * @param {Object[]} scriptDefinedOptions - Options hardcoded in the script (e.g., "Any Time").
  4115.      * @param {Object} currentSettings - The current settings object.
  4116.      * @param {Object} predefinedOptionsSource - A reference to the PREDEFINED_OPTIONS object.
  4117.      * @returns {Object[]} The final, sorted array of option objects to be rendered.
  4118.      */
  4119.     function _prepareFilterOptions(sectionId, scriptDefinedOptions, currentSettings, predefinedOptionsSource) {
  4120.         const finalOptions = [];
  4121.         const tempAddedValues = new Set();
  4122.         const sectionDef = ALL_SECTION_DEFINITIONS.find(s => s.id === sectionId);
  4123.         if (!sectionDef) return [];
  4124.  
  4125.         const isSortableMixedType = sectionDef.displayItemsKey && Array.isArray(currentSettings[sectionDef.displayItemsKey]);
  4126.         const isFiletypeCheckboxModeActive = sectionId === 'sidebar-section-filetype' && currentSettings.enableFiletypeCheckboxMode;
  4127.         const isSiteCheckboxModeActive = sectionId === 'sidebar-section-site-search' && currentSettings.enableSiteSearchCheckboxMode;
  4128.         const isOccurrenceSection = sectionId === 'sidebar-section-occurrence';
  4129.  
  4130.         if (scriptDefinedOptions) {
  4131.             scriptDefinedOptions.forEach(opt => {
  4132.                 if (opt && typeof opt.textKey === 'string' && typeof opt.v === 'string') {
  4133.                     if (isOccurrenceSection) {
  4134.                         const translatedText = _(opt.textKey);
  4135.                         finalOptions.push({ text: translatedText, value: opt.v, originalText: translatedText, isCustom: false, isAnyOption: (opt.v === '') });
  4136.                         tempAddedValues.add(opt.v);
  4137.                     } else if (opt.v === '') {
  4138.                         if (!((isFiletypeCheckboxModeActive && sectionId === 'sidebar-section-filetype') ||
  4139.                               (isSiteCheckboxModeActive && sectionId === 'sidebar-section-site-search'))) {
  4140.                             const translatedText = (sectionId === 'sidebar-section-site-search') ? _('filter_any_site') : _(opt.textKey);
  4141.                             finalOptions.push({ text: translatedText, value: opt.v, originalText: translatedText, isCustom: false, isAnyOption: true });
  4142.                             tempAddedValues.add(opt.v);
  4143.                         }
  4144.                     }
  4145.                 }
  4146.             });
  4147.         }
  4148.         if (isOccurrenceSection) return finalOptions;
  4149.  
  4150.         if (isSortableMixedType) {
  4151.             const displayItems = currentSettings[sectionDef.displayItemsKey] || [];
  4152.             displayItems.forEach(item => {
  4153.                 if (!tempAddedValues.has(item.value)) {
  4154.                     let displayText = item.text;
  4155.                     if (item.type === 'predefined' && item.originalKey) {
  4156.                         displayText = _(item.originalKey);
  4157.                         if (sectionId === 'sidebar-section-country') {
  4158.                             const parsed = Utils.parseIconAndText(displayText);
  4159.                             displayText = `${parsed.icon} ${parsed.text}`.trim();
  4160.                         }
  4161.                     }
  4162.                     finalOptions.push({ text: displayText, value: item.value, originalText: displayText, isCustom: item.type === 'custom' });
  4163.                     tempAddedValues.add(item.value);
  4164.                 }
  4165.             });
  4166.         } else {
  4167.             const predefinedKey = sectionDef.predefinedOptionsKey;
  4168.             const customKey = sectionDef.customItemsKey;
  4169.             const predefinedOptsFromSource = predefinedOptionsSource && predefinedKey ? (predefinedOptionsSource[predefinedKey] || []) : [];
  4170.             const customOptsFromSettings = customKey ? (currentSettings[customKey] || []) : [];
  4171.             let enabledPredefinedSystemVals;
  4172.  
  4173.             if (isFiletypeCheckboxModeActive && sectionId === 'sidebar-section-filetype') {
  4174.                 enabledPredefinedSystemVals = currentSettings.enabledPredefinedOptions[predefinedKey] || [];
  4175.             } else {
  4176.                 enabledPredefinedSystemVals = predefinedKey ? (currentSettings.enabledPredefinedOptions[predefinedKey] || []) : [];
  4177.             }
  4178.  
  4179.             const itemsForThisSection = [];
  4180.             const enabledSet = new Set(enabledPredefinedSystemVals);
  4181.  
  4182.             if (Array.isArray(predefinedOptsFromSource)) {
  4183.                 predefinedOptsFromSource.forEach(opt => {
  4184.                     if (opt && typeof opt.textKey === 'string' && typeof opt.value === 'string' && enabledSet.has(opt.value) && !tempAddedValues.has(opt.value)) {
  4185.                         const translatedText = _(opt.textKey);
  4186.                         itemsForThisSection.push({ text: translatedText, value: opt.value, originalText: translatedText, isCustom: false });
  4187.                     }
  4188.                 });
  4189.             }
  4190.  
  4191.             const validCustomOptions = Array.isArray(customOptsFromSettings) ? customOptsFromSettings.filter(cOpt => cOpt && typeof cOpt.text === 'string' && typeof cOpt.value === 'string') : [];
  4192.             validCustomOptions.forEach(opt => {
  4193.                 if (!tempAddedValues.has(opt.value)){
  4194.                     itemsForThisSection.push({ text: opt.text, value: opt.value, originalText: opt.text, isCustom: true });
  4195.                 }
  4196.             });
  4197.  
  4198.             itemsForThisSection.forEach(opt => {
  4199.                  if (!tempAddedValues.has(opt.value)){
  4200.                     finalOptions.push(opt);
  4201.                     tempAddedValues.add(opt.value);
  4202.                 }
  4203.             });
  4204.         }
  4205.  
  4206.         if (scriptDefinedOptions && !isOccurrenceSection) {
  4207.             scriptDefinedOptions.forEach(opt => {
  4208.                 if (opt && typeof opt.textKey === 'string' && typeof opt.v === 'string' && opt.v !== '' && !tempAddedValues.has(opt.v)) {
  4209.                     const translatedText = _(opt.textKey);
  4210.                     finalOptions.push({ text: translatedText, value: opt.v, originalText: translatedText, isCustom: false });
  4211.                     tempAddedValues.add(opt.v);
  4212.                 }
  4213.             });
  4214.         }
  4215.  
  4216.         if (!isSortableMixedType && !isOccurrenceSection) {
  4217.             let anyOptionToSortSeparately = null;
  4218.             const anyOptionIdx = finalOptions.findIndex(opt => opt.isAnyOption === true);
  4219.  
  4220.             if (anyOptionIdx !== -1) {
  4221.                 anyOptionToSortSeparately = finalOptions.splice(anyOptionIdx, 1)[0];
  4222.             }
  4223.  
  4224.             finalOptions.sort((a, b) => {
  4225.                 const isTimeSection = (sectionId === 'sidebar-section-time');
  4226.                 if (isTimeSection) {
  4227.                     const timeA = _parseTimeValueToMinutes(a.value);
  4228.                     const timeB = _parseTimeValueToMinutes(b.value);
  4229.                     if (timeA !== Infinity || timeB !== Infinity) {
  4230.                         if (timeA !== timeB) return timeA - timeB;
  4231.                     }
  4232.                 }
  4233.                 const sTA = a.originalText || a.text;
  4234.                 const sTB = b.originalText || b.text;
  4235.                 const sL = LocalizationService.getCurrentLocale() === 'en' ? undefined : LocalizationService.getCurrentLocale();
  4236.                 return sTA.localeCompare(sTB, sL, { numeric: true, sensitivity: 'base' });
  4237.             });
  4238.  
  4239.             if (anyOptionToSortSeparately) {
  4240.                 finalOptions.unshift(anyOptionToSortSeparately);
  4241.             }
  4242.         }
  4243.         return finalOptions;
  4244.     }
  4245.  
  4246.     /**
  4247.      * Creates a DOM element for a single filter option.
  4248.      * @private
  4249.      * @param {Object} optionData - The data for the option.
  4250.      * @param {string} filterParam - The URL parameter this option controls.
  4251.      * @param {boolean} isCountrySection - Flag indicating if this is for the country section (for special icon handling).
  4252.      * @param {string} countryDisplayMode - The current display mode for countries.
  4253.      * @returns {HTMLElement} The created option element.
  4254.      */
  4255.     function _createFilterOptionElement(optionData, filterParam, isCountrySection, countryDisplayMode) { const optionElement = document.createElement('div'); optionElement.classList.add(CSS.FILTER_OPTION); const displayText = optionData.text; if (isCountrySection) { const { icon, text: countryTextOnly } = Utils.parseIconAndText(displayText); switch (countryDisplayMode) { case 'textOnly': optionElement.textContent = countryTextOnly || displayText; break; case 'iconOnly': if (icon) { optionElement.innerHTML = `<span class="country-icon-container">${icon}</span>`; } else { optionElement.textContent = countryTextOnly || displayText; } break; case 'iconAndText': default: if (icon) { const textPart = countryTextOnly || displayText.substring(icon.length).trim(); optionElement.innerHTML = `<span class="country-icon-container">${icon}</span>${textPart}`; } else { optionElement.textContent = displayText; } break; } } else { optionElement.textContent = displayText; } optionElement.title = `${displayText} (${filterParam}=${optionData.value || _('filter_clear_tooltip_suffix')})`; optionElement.dataset[DATA_ATTR.FILTER_TYPE] = filterParam; optionElement.dataset[DATA_ATTR.FILTER_VALUE] = optionData.value; return optionElement; }
  4256.  
  4257.     /**
  4258.      * The main function for building or rebuilding the entire sidebar UI based on current settings.
  4259.      * It clears the existing content and dynamically creates all visible sections and controls in the correct order.
  4260.      */
  4261.     function buildSidebarUI() { if (!sidebar) { console.error("Sidebar element not ready for buildSidebarUI"); return; } const currentSettings = SettingsManager.getCurrentSettings(); const header = sidebar.querySelector(`.${CSS.SIDEBAR_HEADER}`); if (!header) { console.error("Sidebar header not found in buildSidebarUI"); return; } sidebar.querySelectorAll(`#${IDS.FIXED_TOP_BUTTONS}, .${CSS.SIDEBAR_CONTENT_WRAPPER}`).forEach(el => el.remove()); header.querySelectorAll(`.${CSS.HEADER_BUTTON}:not(#${IDS.SETTINGS_BUTTON}):not(#${IDS.COLLAPSE_BUTTON}), a.${CSS.HEADER_BUTTON}`).forEach(el => el.remove()); const rBL = currentSettings.resetButtonLocation; const vBL = currentSettings.verbatimButtonLocation; const aSL = currentSettings.advancedSearchLinkLocation; const pznBL = currentSettings.personalizationButtonLocation; const schL = currentSettings.googleScholarShortcutLocation; const trnL = currentSettings.googleTrendsShortcutLocation; const dsL = currentSettings.googleDatasetSearchShortcutLocation; const settingsButtonRef = header.querySelector(`#${IDS.SETTINGS_BUTTON}`); _buildSidebarHeaderControls(header, settingsButtonRef, rBL, vBL, aSL, pznBL, schL, trnL, dsL, currentSettings); const fixedTopControlsContainer = _buildSidebarFixedTopControls(rBL, vBL, aSL, pznBL, schL, trnL, dsL, currentSettings); if (fixedTopControlsContainer) { header.after(fixedTopControlsContainer); } const contentWrapper = document.createElement('div'); contentWrapper.classList.add(CSS.SIDEBAR_CONTENT_WRAPPER); const sectionDefinitionsMap = new Map(ALL_SECTION_DEFINITIONS.map(def => [def.id, def])); const sectionsFragment = _buildSidebarSections(sectionDefinitionsMap, rBL, vBL, aSL, pznBL, schL, trnL, dsL, currentSettings, PREDEFINED_OPTIONS); contentWrapper.appendChild(sectionsFragment); sidebar.appendChild(contentWrapper); _initializeSidebarEventListenersAndStates(); }
  4262.  
  4263.     /**
  4264.      * Builds all the individual section elements for the sidebar.
  4265.      * @private
  4266.      * @returns {DocumentFragment} A document fragment containing all the generated section elements.
  4267.      */
  4268.     function _buildSidebarSections(sectionDefinitionMap, rBL, vBL, aSL, pznBL, schL, trnL, dsL, currentSettings, PREDEFINED_OPTIONS_REF) { const contentFragment = document.createDocumentFragment(); currentSettings.sidebarSectionOrder.forEach(sectionId => { if (!currentSettings.visibleSections[sectionId]) return; const sectionData = sectionDefinitionMap.get(sectionId); if (!sectionData) { console.warn(`${LOG_PREFIX} No definition for section ID: ${sectionId}`); return; } let sectionElement = null; const sectionTitleKey = sectionData.titleKey; const sectionIdForDisplay = sectionData.id; switch (sectionData.type) { case 'filter': sectionElement = createFilterSection(sectionIdForDisplay, sectionTitleKey, sectionData.scriptDefined, sectionData.param, currentSettings, PREDEFINED_OPTIONS_REF, currentSettings.countryDisplayMode); break; case 'filetype': sectionElement = _createFiletypeSectionElement(sectionIdForDisplay, sectionTitleKey, sectionData.scriptDefined, sectionData.param, currentSettings, PREDEFINED_OPTIONS_REF); break; case 'date': sectionElement = _createDateSectionElement(sectionIdForDisplay, sectionTitleKey); break; case 'site': sectionElement = _createSiteSearchSectionElement(sectionIdForDisplay, sectionTitleKey, currentSettings); break; case 'tools': sectionElement = _createToolsSectionElement( sectionIdForDisplay, sectionTitleKey, rBL, vBL, aSL, pznBL, schL, trnL, dsL ); break; default: console.warn(`${LOG_PREFIX} Unknown section type: ${sectionData.type} for ID: ${sectionIdForDisplay}`); break; } if (sectionElement) contentFragment.appendChild(sectionElement); }); return contentFragment; }
  4269.  
  4270.     /**
  4271.      * Creates a filter section element with its options.
  4272.      * @param {string} id - The section's ID.
  4273.      * @param {string} titleKey - The localization key for the section title.
  4274.      * @param {Object[]} scriptDefinedOptions - Hardcoded options for this section.
  4275.      * @param {string} filterParam - The URL parameter this section controls.
  4276.      * @param {Object} currentSettings - The current settings object.
  4277.      * @param {Object} predefinedOptionsSource - The source of predefined options.
  4278.      * @param {string} countryDisplayMode - The display mode for countries.
  4279.      * @returns {HTMLElement|null} The created section element.
  4280.      */
  4281.     function createFilterSection(id, titleKey, scriptDefinedOptions, filterParam, currentSettings, predefinedOptionsSource, countryDisplayMode) { if (!sidebar) return null; const { section, sectionContent, sectionTitle } = _createSectionShell(id, titleKey); sectionTitle.textContent = _(titleKey); const fragment = document.createDocumentFragment(); const isCountrySection = (id === 'sidebar-section-country'); const combinedOptions = _prepareFilterOptions(id, scriptDefinedOptions, currentSettings, predefinedOptionsSource); combinedOptions.forEach(option => { fragment.appendChild(_createFilterOptionElement(option, filterParam, isCountrySection, countryDisplayMode)); }); sectionContent.innerHTML = ''; sectionContent.appendChild(fragment); if (!sectionContent.dataset.filterClickListenerAttached) { sectionContent.addEventListener('click', function(event) { const target = event.target.closest(`.${CSS.FILTER_OPTION}`); if (target && target.classList.contains(CSS.FILTER_OPTION)) { event.preventDefault(); const clickedFilterType = target.dataset[DATA_ATTR.FILTER_TYPE]; const clickedFilterValue = target.dataset[DATA_ATTR.FILTER_VALUE]; if (typeof clickedFilterType !== 'undefined' && typeof clickedFilterValue !== 'undefined') { this.querySelectorAll(`.${CSS.FILTER_OPTION}`).forEach(opt => opt.classList.remove(CSS.IS_SELECTED)); target.classList.add(CSS.IS_SELECTED); if (clickedFilterValue === '' || (clickedFilterType === 'as_occt' && clickedFilterValue === 'any') ) { const defaultVal = (clickedFilterType === 'as_occt') ? 'any' : ''; const anyOpt = this.querySelector(`.${CSS.FILTER_OPTION}[data-${DATA_ATTR.FILTER_VALUE}="${defaultVal}"]`); if (anyOpt) anyOpt.classList.add(CSS.IS_SELECTED); } URLActionManager.applyFilter(clickedFilterType, clickedFilterValue); } } }); sectionContent.dataset.filterClickListenerAttached = 'true'; } return section; }
  4282.  
  4283.     /**
  4284.      * Creates the "Site Search" section element.
  4285.      * @private
  4286.      * @param {string} sectionId - The section's ID.
  4287.      * @param {string} titleKey - The localization key for the section title.
  4288.      * @param {Object} currentSettings - The current settings object.
  4289.      * @returns {HTMLElement} The created section element.
  4290.      */
  4291.     function _createSiteSearchSectionElement(sectionId, titleKey, currentSettings) {
  4292.         const { section, sectionContent, sectionTitle } = _createSectionShell(sectionId, titleKey);
  4293.         sectionTitle.textContent = _(titleKey);
  4294.         populateSiteSearchList(sectionContent, currentSettings.favoriteSites, currentSettings.enableSiteSearchCheckboxMode, currentSettings.showFaviconsForSiteSearch);
  4295.         return section;
  4296.     }
  4297.  
  4298.     /**
  4299.      * Populates the content of the "Site Search" section. This function can be called
  4300.      * to rebuild the list when settings change.
  4301.      * @param {HTMLElement} sectionContentElement - The content element of the site search section.
  4302.      * @param {Object[]} favoriteSitesArray - The array of favorite sites from settings.
  4303.      * @param {boolean} checkboxModeEnabled - Whether checkbox mode is active.
  4304.      * @param {boolean} showFaviconsEnabled - Whether to show favicons.
  4305.      */
  4306.     function populateSiteSearchList(sectionContentElement, favoriteSitesArray, checkboxModeEnabled, showFaviconsEnabled) {
  4307.         if (!sectionContentElement) { console.error("Site search section content element missing"); return; }
  4308.         sectionContentElement.innerHTML = '';
  4309.  
  4310.         const sites = Array.isArray(favoriteSitesArray) ? favoriteSitesArray : [];
  4311.         const listFragment = document.createDocumentFragment();
  4312.  
  4313.         const clearOptDiv = document.createElement('div');
  4314.         clearOptDiv.classList.add(CSS.FILTER_OPTION);
  4315.         clearOptDiv.id = IDS.CLEAR_SITE_SEARCH_OPTION;
  4316.         clearOptDiv.title = _('tooltip_clear_site_search');
  4317.         clearOptDiv.textContent = _('filter_any_site');
  4318.         clearOptDiv.dataset[DATA_ATTR.FILTER_TYPE] = 'site_clear';
  4319.         sectionContentElement.appendChild(clearOptDiv);
  4320.  
  4321.         const listElement = document.createElement('ul');
  4322.         listElement.classList.add(CSS.CUSTOM_LIST);
  4323.         if (checkboxModeEnabled) {
  4324.             listElement.classList.add('checkbox-mode-enabled');
  4325.         }
  4326.  
  4327.         sites.forEach((site, index) => {
  4328.             if (site?.text && site?.url) {
  4329.                 const li = document.createElement('li');
  4330.                 const siteValue = site.url;
  4331.                 const isGroup = siteValue.includes(' OR ');
  4332.  
  4333.                 if (checkboxModeEnabled) {
  4334.                     const uniqueId = `site-cb-${index}-${Date.now()}`;
  4335.                     const checkbox = document.createElement('input');
  4336.                     checkbox.id = uniqueId;
  4337.                     checkbox.type = 'checkbox';
  4338.                     checkbox.value = siteValue;
  4339.                     checkbox.classList.add(CSS.CHECKBOX_SITE);
  4340.                     checkbox.dataset[DATA_ATTR.SITE_URL] = siteValue;
  4341.                     li.appendChild(checkbox);
  4342.  
  4343.                     const label = document.createElement('label');
  4344.                     label.htmlFor = uniqueId;
  4345.                     if (showFaviconsEnabled && !isGroup) {
  4346.                         const favicon = document.createElement('img');
  4347.                         favicon.src = `https://www.google.com/s2/favicons?sz=32&domain_url=${siteValue}`;
  4348.                         favicon.classList.add(CSS.FAVICON);
  4349.                         favicon.loading = 'lazy';
  4350.                         label.appendChild(favicon);
  4351.                     }
  4352.                     label.appendChild(document.createTextNode(site.text));
  4353.                     label.dataset[DATA_ATTR.SITE_URL] = siteValue;
  4354.                     label.title = _('tooltip_site_search', { siteUrl: siteValue.replace(/\s+OR\s+/gi, ', ') });
  4355.                     li.appendChild(label);
  4356.                 } else {
  4357.                     const divOpt = document.createElement('div');
  4358.                     divOpt.classList.add(CSS.FILTER_OPTION);
  4359.                     if (showFaviconsEnabled && !isGroup) {
  4360.                         const favicon = document.createElement('img');
  4361.                         favicon.src = `https://www.google.com/s2/favicons?sz=32&domain_url=${siteValue}`;
  4362.                         favicon.classList.add(CSS.FAVICON);
  4363.                         favicon.loading = 'lazy';
  4364.                         divOpt.appendChild(favicon);
  4365.                     }
  4366.                     divOpt.appendChild(document.createTextNode(site.text));
  4367.                     divOpt.dataset[DATA_ATTR.SITE_URL] = siteValue;
  4368.                     divOpt.title = _('tooltip_site_search', { siteUrl: siteValue.replace(/\s+OR\s+/gi, ', ') });
  4369.                     li.appendChild(divOpt);
  4370.                 }
  4371.  
  4372.                 listFragment.appendChild(li);
  4373.             }
  4374.         });
  4375.         listElement.appendChild(listFragment);
  4376.         sectionContentElement.appendChild(listElement);
  4377.  
  4378.         if (checkboxModeEnabled) {
  4379.             let applyButton = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_SITES_BUTTON}`);
  4380.             if (!applyButton) {
  4381.                 applyButton = document.createElement('button');
  4382.                 applyButton.id = IDS.APPLY_SELECTED_SITES_BUTTON;
  4383.                 applyButton.classList.add(CSS.BUTTON, CSS.BUTTON_APPLY_SITES);
  4384.                 applyButton.textContent = _('tool_apply_selected_sites');
  4385.                 sectionContentElement.appendChild(applyButton);
  4386.             }
  4387.             applyButton.disabled = true;
  4388.             applyButton.style.display = 'none';
  4389.         }
  4390.  
  4391.         // Use event delegation for site search interactions.
  4392.         if (!sectionContentElement.dataset.siteSearchListenerAttached) {
  4393.             sectionContentElement.dataset.siteSearchListenerAttached = 'true';
  4394.             sectionContentElement.addEventListener('click', (event) => {
  4395.                 const target = event.target;
  4396.                 const currentSettings = SettingsManager.getCurrentSettings();
  4397.                 const isCheckboxMode = currentSettings.enableSiteSearchCheckboxMode;
  4398.                 const clearSiteOpt = target.closest(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`);
  4399.  
  4400.                 if (clearSiteOpt) {
  4401.                     URLActionManager.clearSiteSearch();
  4402.                     sectionContentElement.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}, label.${CSS.IS_SELECTED}`).forEach(o => o.classList.remove(CSS.IS_SELECTED));
  4403.                     clearSiteOpt.classList.add(CSS.IS_SELECTED);
  4404.                     if (isCheckboxMode) {
  4405.                         sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_SITE}`).forEach(cb => cb.checked = false);
  4406.                         _updateApplySitesButtonState(sectionContentElement);
  4407.                     }
  4408.                 } else if (isCheckboxMode) {
  4409.                     const labelElement = target.closest('label');
  4410.                     if (labelElement && labelElement.dataset[DATA_ATTR.SITE_URL]) {
  4411.                         event.preventDefault();
  4412.                         const siteUrlOrCombined = labelElement.dataset[DATA_ATTR.SITE_URL];
  4413.                         sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_SITE}`).forEach(cb => {
  4414.                             const correspondingLabel = sectionContentElement.querySelector(`label[for="${cb.id}"]`);
  4415.                             cb.checked = (cb.value === siteUrlOrCombined);
  4416.                             if(correspondingLabel) correspondingLabel.classList.toggle(CSS.IS_SELECTED, cb.checked);
  4417.                         });
  4418.                         URLActionManager.applySiteSearch(siteUrlOrCombined);
  4419.                         _updateApplySitesButtonState(sectionContentElement);
  4420.                         sectionContentElement.querySelector(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4421.                     }
  4422.                 } else {
  4423.                     const siteOptionDiv = target.closest(`div.${CSS.FILTER_OPTION}:not(#${IDS.CLEAR_SITE_SEARCH_OPTION})`);
  4424.                     if (siteOptionDiv && siteOptionDiv.dataset[DATA_ATTR.SITE_URL]) {
  4425.                         const siteUrlOrCombined = siteOptionDiv.dataset[DATA_ATTR.SITE_URL];
  4426.                         sectionContentElement.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}`).forEach(o => o.classList.remove(CSS.IS_SELECTED));
  4427.                         URLActionManager.applySiteSearch(siteUrlOrCombined);
  4428.                         siteOptionDiv.classList.add(CSS.IS_SELECTED);
  4429.                         sectionContentElement.querySelector(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4430.                     }
  4431.                 }
  4432.             });
  4433.  
  4434.             sectionContentElement.addEventListener('change', (event) => {
  4435.                 if (event.target.matches(`input[type="checkbox"].${CSS.CHECKBOX_SITE}`)) {
  4436.                     _updateApplySitesButtonState(sectionContentElement);
  4437.                     const label = sectionContentElement.querySelector(`label[for="${event.target.id}"]`);
  4438.                     if (label) label.classList.toggle(CSS.IS_SELECTED, event.target.checked);
  4439.                     if (event.target.checked) {
  4440.                         sectionContentElement.querySelector(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4441.                     }
  4442.                 }
  4443.             });
  4444.  
  4445.             const applyBtn = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_SITES_BUTTON}`);
  4446.             if(applyBtn && !applyBtn.dataset[DATA_ATTR.LISTENER_ATTACHED]){
  4447.                 applyBtn.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true';
  4448.                 applyBtn.addEventListener('click', () => {
  4449.                     const selectedValues = Array.from(sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_SITE}:checked`)).map(cb => cb.value);
  4450.                     if (selectedValues.length > 0) {
  4451.                         URLActionManager.applySiteSearch(selectedValues);
  4452.                         sectionContentElement.querySelector(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4453.                     }
  4454.                 });
  4455.             }
  4456.         }
  4457.     }
  4458.  
  4459.     /**
  4460.      * Creates the "File Type" section element.
  4461.      * @private
  4462.      * @param {string} sectionId - The section's ID.
  4463.      * @param {string} titleKey - The localization key for the section title.
  4464.      * @param {Object[]} scriptDefinedOptions - Hardcoded options for this section.
  4465.      * @param {string} filterParam - The URL parameter this section controls.
  4466.      * @param {Object} currentSettings - The current settings object.
  4467.      * @param {Object} predefinedOptionsSource - The source of predefined options.
  4468.      * @returns {HTMLElement} The created section element.
  4469.      */
  4470.     function _createFiletypeSectionElement(sectionId, titleKey, scriptDefinedOptions, filterParam, currentSettings, predefinedOptionsSource) {
  4471.         const { section, sectionContent, sectionTitle } = _createSectionShell(sectionId, titleKey);
  4472.         sectionTitle.textContent = _(titleKey);
  4473.         populateFiletypeList(sectionContent, scriptDefinedOptions, currentSettings, predefinedOptionsSource, filterParam);
  4474.         return section;
  4475.     }
  4476. 	
  4477.     /**
  4478.      * Populates the content of the "File Type" section.
  4479.      * @param {HTMLElement} sectionContentElement - The content element of the file type section.
  4480.      * @param {Object[]} scriptDefinedOpts - Hardcoded options for this section.
  4481.      * @param {Object} currentSettings - The current settings object.
  4482.      * @param {Object} predefinedOptsSource - The source of predefined options.
  4483.      * @param {string} filterParam - The URL parameter this section controls.
  4484.      */
  4485.     function populateFiletypeList(sectionContentElement, scriptDefinedOpts, currentSettings, predefinedOptsSource, filterParam) {
  4486.         if (!sectionContentElement) { console.error("Filetype section content element missing"); return; }
  4487.         sectionContentElement.innerHTML = '';
  4488.  
  4489.         const checkboxModeEnabled = currentSettings.enableFiletypeCheckboxMode;
  4490.         const combinedOptions = _prepareFilterOptions('sidebar-section-filetype', scriptDefinedOpts, currentSettings, predefinedOptsSource);
  4491.         const listFragment = document.createDocumentFragment();
  4492.  
  4493.         const clearOptDiv = document.createElement('div');
  4494.         clearOptDiv.classList.add(CSS.FILTER_OPTION);
  4495.         clearOptDiv.id = IDS.CLEAR_FILETYPE_SEARCH_OPTION;
  4496.         clearOptDiv.title = _('filter_clear_tooltip_suffix');
  4497.         clearOptDiv.textContent = _('filter_any_format');
  4498.         clearOptDiv.dataset[DATA_ATTR.FILTER_TYPE] = 'filetype_clear';
  4499.         sectionContentElement.appendChild(clearOptDiv);
  4500.  
  4501.         const listElement = document.createElement('ul');
  4502.         listElement.classList.add(CSS.CUSTOM_LIST);
  4503.         if (checkboxModeEnabled) {
  4504.             listElement.classList.add('checkbox-mode-enabled');
  4505.         }
  4506.  
  4507.         combinedOptions.forEach((option, index) => {
  4508.             if (option.isAnyOption) return;
  4509.  
  4510.             const li = document.createElement('li');
  4511.             const filetypeValue = option.value;
  4512.  
  4513.             if (checkboxModeEnabled) {
  4514.                 const checkbox = document.createElement('input');
  4515.                 const uniqueId = `ft-cb-${index}-${Date.now()}`;
  4516.                 checkbox.type = 'checkbox';
  4517.                 checkbox.id = uniqueId;
  4518.                 checkbox.value = filetypeValue;
  4519.                 checkbox.classList.add(CSS.CHECKBOX_FILETYPE);
  4520.                 checkbox.dataset[DATA_ATTR.FILETYPE_VALUE] = filetypeValue;
  4521.                 li.appendChild(checkbox);
  4522.  
  4523.                 const label = document.createElement('label');
  4524.                 label.htmlFor = checkbox.id;
  4525.                 label.dataset[DATA_ATTR.FILETYPE_VALUE] = filetypeValue;
  4526.                 label.title = `${option.text} (${filterParam}=${filetypeValue.replace(/\s+OR\s+/gi, ', ')})`;
  4527.                 label.textContent = option.text;
  4528.                 li.appendChild(label);
  4529.             } else {
  4530.                 const divOpt = document.createElement('div');
  4531.                 divOpt.classList.add(CSS.FILTER_OPTION);
  4532.                 divOpt.dataset[DATA_ATTR.FILTER_TYPE] = filterParam;
  4533.                 divOpt.dataset[DATA_ATTR.FILTER_VALUE] = filetypeValue;
  4534.                 divOpt.title = `${option.text} (${filterParam}=${filetypeValue.replace(/\s+OR\s+/gi, ', ')})`;
  4535.                 divOpt.textContent = option.text;
  4536.                 li.appendChild(divOpt);
  4537.             }
  4538.             listFragment.appendChild(li);
  4539.         });
  4540.         listElement.appendChild(listFragment);
  4541.         sectionContentElement.appendChild(listElement);
  4542.  
  4543.         if (checkboxModeEnabled) {
  4544.             let applyButton = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_FILETYPES_BUTTON}`);
  4545.             if(!applyButton) {
  4546.                 applyButton = document.createElement('button');
  4547.                 applyButton.id = IDS.APPLY_SELECTED_FILETYPES_BUTTON;
  4548.                 applyButton.classList.add(CSS.BUTTON, CSS.BUTTON_APPLY_FILETYPES);
  4549.                 applyButton.textContent = _('tool_apply_selected_filetypes');
  4550.                 sectionContentElement.appendChild(applyButton);
  4551.             }
  4552.             applyButton.disabled = true;
  4553.             applyButton.style.display = 'none';
  4554.         }
  4555.  
  4556.         // Use event delegation for filetype search interactions.
  4557.         if (!sectionContentElement.dataset.filetypeClickListenerAttached) {
  4558.             sectionContentElement.dataset.filetypeClickListenerAttached = 'true';
  4559.             sectionContentElement.addEventListener('click', (event) => {
  4560.                 const target = event.target;
  4561.                 const isCheckboxMode = SettingsManager.getCurrentSettings().enableFiletypeCheckboxMode;
  4562.                 const clearFiletypeOpt = target.closest(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`);
  4563.  
  4564.                 if (clearFiletypeOpt) {
  4565.                     URLActionManager.clearFiletypeSearch();
  4566.                     sectionContentElement.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}, label.${CSS.IS_SELECTED}`).forEach(o => o.classList.remove(CSS.IS_SELECTED));
  4567.                     clearFiletypeOpt.classList.add(CSS.IS_SELECTED);
  4568.                     if (isCheckboxMode) {
  4569.                         sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}`).forEach(cb => cb.checked = false);
  4570.                         _updateApplyFiletypesButtonState(sectionContentElement);
  4571.                     }
  4572.                 } else if (isCheckboxMode) {
  4573.                     const labelElement = target.closest('label');
  4574.                     if (labelElement && labelElement.dataset[DATA_ATTR.FILETYPE_VALUE]) {
  4575.                         event.preventDefault();
  4576.                         const filetypeValueOrCombined = labelElement.dataset[DATA_ATTR.FILETYPE_VALUE];
  4577.                         sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}`).forEach(cb => {
  4578.                             const correspondingLabel = sectionContentElement.querySelector(`label[for="${cb.id}"]`);
  4579.                             cb.checked = (cb.value === filetypeValueOrCombined);
  4580.                              if(correspondingLabel) correspondingLabel.classList.toggle(CSS.IS_SELECTED, cb.checked);
  4581.                         });
  4582.                         URLActionManager.applyCombinedFiletypeSearch(filetypeValueOrCombined);
  4583.                         _updateApplyFiletypesButtonState(sectionContentElement);
  4584.                         sectionContentElement.querySelector(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4585.                     }
  4586.                 } else {
  4587.                     const optionDiv = target.closest(`div.${CSS.FILTER_OPTION}:not(#${IDS.CLEAR_FILETYPE_SEARCH_OPTION})`);
  4588.                     if (optionDiv && optionDiv.dataset[DATA_ATTR.FILTER_VALUE]) {
  4589.                         const clickedFilterType = optionDiv.dataset[DATA_ATTR.FILTER_TYPE];
  4590.                         const clickedFilterValueOrCombined = optionDiv.dataset[DATA_ATTR.FILTER_VALUE];
  4591.                         sectionContentElement.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}`).forEach(o => o.classList.remove(CSS.IS_SELECTED));
  4592.                         optionDiv.classList.add(CSS.IS_SELECTED);
  4593.                         URLActionManager.applyFilter(clickedFilterType, clickedFilterValueOrCombined);
  4594.                         sectionContentElement.querySelector(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4595.                     }
  4596.                 }
  4597.             });
  4598.  
  4599.             sectionContentElement.addEventListener('change', (event) => {
  4600.                 if (event.target.matches(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}`)) {
  4601.                     _updateApplyFiletypesButtonState(sectionContentElement);
  4602.                     const label = sectionContentElement.querySelector(`label[for="${event.target.id}"]`);
  4603.                     if (label) label.classList.toggle(CSS.IS_SELECTED, event.target.checked);
  4604.                     if (event.target.checked) {
  4605.                         sectionContentElement.querySelector(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4606.                     }
  4607.                 }
  4608.             });
  4609.  
  4610.             const applyBtn = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_FILETYPES_BUTTON}`);
  4611.             if (applyBtn && !applyBtn.dataset[DATA_ATTR.LISTENER_ATTACHED]) {
  4612.                 applyBtn.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true';
  4613.                 applyBtn.addEventListener('click', () => {
  4614.                     const selectedValues = Array.from(sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}:checked`)).map(cb => cb.value);
  4615.                     if (selectedValues.length > 0) {
  4616.                         URLActionManager.applyCombinedFiletypeSearch(selectedValues);
  4617.                         sectionContentElement.querySelector(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`)?.classList.remove(CSS.IS_SELECTED);
  4618.                     }
  4619.                 });
  4620.             }
  4621.         }
  4622.     }
  4623.  
  4624.     /**
  4625.      * Updates the state (enabled/disabled, visible/hidden) of the "Apply Selected" button
  4626.      * in the site search section based on how many checkboxes are checked.
  4627.      * @private
  4628.      * @param {HTMLElement} sectionContentElement - The content element of the site search section.
  4629.      */
  4630.     function _updateApplySitesButtonState(sectionContentElement) {
  4631.         if (!sectionContentElement) return;
  4632.         const applyButton = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_SITES_BUTTON}`);
  4633.         if (!applyButton) return;
  4634.         const checkedCount = sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_SITE}:checked`).length;
  4635.         applyButton.disabled = checkedCount === 0;
  4636.         applyButton.style.display = checkedCount > 0 ? 'inline-flex' : 'none';
  4637.     }
  4638.  
  4639.     /**
  4640.      * Updates the state of the "Apply Selected" button in the file type section.
  4641.      * @private
  4642.      * @param {HTMLElement} sectionContentElement - The content element of the file type section.
  4643.      */
  4644.     function _updateApplyFiletypesButtonState(sectionContentElement) {
  4645.         if (!sectionContentElement) return;
  4646.         const applyButton = sectionContentElement.querySelector(`#${IDS.APPLY_SELECTED_FILETYPES_BUTTON}`);
  4647.         if (!applyButton) return;
  4648.         const checkedCount = sectionContentElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}:checked`).length;
  4649.         applyButton.disabled = checkedCount === 0;
  4650.         applyButton.style.display = checkedCount > 0 ? 'inline-flex' : 'none';
  4651.     }
  4652. 	
  4653.     /**
  4654.      * Renders the draggable list of sections in the "Features" tab of the settings window.
  4655.      * @param {Object} settingsRef - A reference to the current settings object.
  4656.      */
  4657.     function renderSectionOrderList(settingsRef) { const settingsWindowEl = document.getElementById(IDS.SETTINGS_WINDOW); const orderListElement = settingsWindowEl?.querySelector(`#${IDS.SIDEBAR_SECTION_ORDER_LIST}`); if (!orderListElement) return; orderListElement.innerHTML = ''; const currentSettings = settingsRef || SettingsManager.getCurrentSettings(); const visibleOrderedSections = currentSettings.sidebarSectionOrder.filter(id => currentSettings.visibleSections[id]); if (visibleOrderedSections.length === 0) { orderListElement.innerHTML = `<li><span style="font-style:italic;color:var(--settings-tab-color);">${_('settings_no_orderable_sections')}</span></li>`; return; } const fragment = document.createDocumentFragment(); visibleOrderedSections.forEach((sectionId) => { const definition = ALL_SECTION_DEFINITIONS.find(def => def.id === sectionId); const displayName = definition ? _(definition.titleKey) : sectionId; const listItem = document.createElement('li'); listItem.dataset.sectionId = sectionId; listItem.draggable = true; const dragIconSpan = document.createElement('span'); dragIconSpan.classList.add(CSS.DRAG_ICON); dragIconSpan.innerHTML = SVG_ICONS.dragGrip; listItem.appendChild(dragIconSpan); const nameSpan = document.createElement('span'); nameSpan.textContent = displayName; listItem.appendChild(nameSpan); fragment.appendChild(listItem); }); orderListElement.appendChild(fragment); }
  4658.  
  4659.     /**
  4660.      * Initializes the script's menu commands using `GM_registerMenuCommand`.
  4661.      * This adds "Open Settings" and "Reset All Settings" options to the Tampermonkey menu.
  4662.      */
  4663.     function _initMenuCommands() { if (typeof GM_registerMenuCommand === 'function') { const openSettingsText = _('menu_open_settings'); const resetAllText = _('menu_reset_all_settings'); if (typeof GM_unregisterMenuCommand === 'function') { try { GM_unregisterMenuCommand(openSettingsText); } catch (e) {} try { GM_unregisterMenuCommand(resetAllText);   } catch (e) {} } GM_registerMenuCommand(openSettingsText, SettingsManager.show.bind(SettingsManager)); GM_registerMenuCommand(resetAllText, SettingsManager.resetAllFromMenu.bind(SettingsManager)); } }
  4664.  
  4665.     /**
  4666.      * Creates the basic shell for a sidebar section (the section container, title, and content elements).
  4667.      * @private
  4668.      * @param {string} id - The ID for the main section element.
  4669.      * @param {string} titleKey - The localization key for the section's title.
  4670.      * @returns {{section: HTMLElement, sectionContent: HTMLElement, sectionTitle: HTMLElement}} An object containing the created elements.
  4671.      */
  4672.     function _createSectionShell(id, titleKey) { const section = document.createElement('div'); section.id = id; section.classList.add(CSS.SECTION); const sectionTitle = document.createElement('div'); sectionTitle.classList.add(CSS.SECTION_TITLE); sectionTitle.textContent = _(titleKey); section.appendChild(sectionTitle); const sectionContent = document.createElement('div'); sectionContent.classList.add(CSS.SECTION_CONTENT); section.appendChild(sectionContent); return { section, sectionContent, sectionTitle }; }
  4673.  
  4674.     /**
  4675.      * Creates the "Date Range" section element.
  4676.      * @private
  4677.      * @param {string} sectionId - The section's ID.
  4678.      * @param {string} titleKey - The localization key for the section title.
  4679.      * @returns {HTMLElement} The created section element.
  4680.      */
  4681.     function _createDateSectionElement(sectionId, titleKey) { const { section, sectionContent, sectionTitle } = _createSectionShell(sectionId, titleKey); sectionTitle.textContent = _(titleKey); const today = new Date(); const yyyy = today.getFullYear(); const mm = String(today.getMonth() + 1).padStart(2, '0'); const dd = String(today.getDate()).padStart(2, '0'); const todayString = `${yyyy}-${mm}-${dd}`; sectionContent.innerHTML = `<label class="${CSS.DATE_INPUT_LABEL}" for="${IDS.DATE_MIN}">${_('date_range_from')}</label><input type="date" class="${CSS.DATE_INPUT_FIELD}" id="${IDS.DATE_MIN}" max="${todayString}"><label class="${CSS.DATE_INPUT_LABEL}" for="${IDS.DATE_MAX}">${_('date_range_to')}</label><input type="date" class="${CSS.DATE_INPUT_FIELD}" id="${IDS.DATE_MAX}" max="${todayString}"><span id="${IDS.DATE_RANGE_ERROR_MSG}" class="${CSS.DATE_RANGE_ERROR_MSG} ${CSS.INPUT_ERROR_MSG}"></span><button class="${CSS.BUTTON} apply-date-range">${_('tool_apply_date')}</button>`; return section; }
  4682.  
  4683.     /**
  4684.      * A factory function to create a standard button element used throughout the sidebar.
  4685.      * @private
  4686.      * @param {Object} options - The button's configuration.
  4687.      * @param {string|null} [options.id=null] - The ID for the button.
  4688.      * @param {string} options.className - The CSS class for the button.
  4689.      * @param {string} options.svgIcon - The SVG icon string.
  4690.      * @param {string|null} [options.textContent=null] - The text content for the button.
  4691.      * @param {string} options.title - The title attribute (tooltip) for the button.
  4692.      * @param {Function} options.clickHandler - The click event handler.
  4693.      * @param {boolean} [options.isActive=false] - Whether the button should be in an active state.
  4694.      * @returns {HTMLButtonElement} The created button element.
  4695.      */
  4696.     function _createStandardButton({ id = null, className, svgIcon, textContent = null, title, clickHandler, isActive = false }) { const button = document.createElement('button'); if (id) button.id = id; button.classList.add(className); if (isActive) button.classList.add(CSS.IS_ACTIVE); button.title = title; let content = svgIcon || ''; if (textContent) { content = svgIcon ? `${svgIcon} <span>${textContent}</span>` : `<span>${textContent}</span>`; } button.innerHTML = content.trim(); if (clickHandler) { if (!button.dataset[DATA_ATTR.LISTENER_ATTACHED]) { button.addEventListener('click', clickHandler); button.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; } } return button; }
  4697.  
  4698.     /**
  4699.      * Creates the Personalization toggle button.
  4700.      * @private
  4701.      * @param {('tools'|'header'|'topBlock')} [forLocation='tools'] - The location where the button will be placed.
  4702.      * @returns {HTMLButtonElement} The created button element.
  4703.      */
  4704.     function _createPersonalizationButtonHTML(forLocation = 'tools') { const personalizationActive = URLActionManager.isPersonalizationActive(); const isIconOnlyLocation = (forLocation === 'header'); const svgIcon = SVG_ICONS.personalization || ''; const displayText = !isIconOnlyLocation ? _('tool_personalization_toggle') : ''; const titleKey = personalizationActive ? 'tooltip_toggle_personalization_off' : 'tooltip_toggle_personalization_on'; return _createStandardButton({ id: IDS.TOOL_PERSONALIZE, className: (forLocation === 'header') ? CSS.HEADER_BUTTON : CSS.BUTTON, svgIcon: svgIcon, textContent: displayText, title: _(titleKey), clickHandler: () => URLActionManager.triggerTogglePersonalization(), isActive: personalizationActive }); }
  4705.  
  4706.     /**
  4707.      * Creates the "Advanced Search" link element.
  4708.      * @private
  4709.      * @param {boolean} [isButtonLike=false] - If true, styles the link to look like a button.
  4710.      * @returns {HTMLAnchorElement} The created anchor element.
  4711.      */
  4712.     function _createAdvancedSearchElementHTML(isButtonLike = false) { const el = document.createElement('a'); let iconHTML = SVG_ICONS.magnifyingGlass || ''; if (isButtonLike) { el.classList.add(CSS.BUTTON); el.innerHTML = `${iconHTML} <span>${_('tool_advanced_search')}</span>`; } else { el.classList.add(CSS.HEADER_BUTTON); el.innerHTML = iconHTML; } const baseUrl = "https://www.google.com/advanced_search"; let finalUrl = baseUrl; try { const currentFullUrl = Utils.getCurrentURL(); if (currentFullUrl) { const currentQuery = currentFullUrl.searchParams.get('q'); if (currentQuery) { let queryWithoutSite = Utils._cleanQueryByOperator(currentQuery, 'site'); queryWithoutSite = Utils._cleanQueryByOperator(queryWithoutSite, 'filetype'); if (queryWithoutSite) { finalUrl = `${baseUrl}?as_q=${encodeURIComponent(queryWithoutSite)}`; } } } } catch (e) { console.warn(`${LOG_PREFIX} Error constructing advanced search URL with query:`, e); } el.href = finalUrl; el.target = "_blank"; el.rel = "noopener noreferrer"; el.title = _('link_advanced_search_title'); return el; }
  4713.  
  4714.     /**
  4715.      * Creates a generic shortcut button for a specified Google service.
  4716.      * @private
  4717.      * @param {string} serviceId - The key for the service in SERVICE_SHORTCUT_CONFIG (e.g., 'googleScholar').
  4718.      * @param {('tools'|'header'|'topBlock')} [forLocation='tools'] - The location where the button will be placed.
  4719.      * @returns {HTMLButtonElement|null} The created button element, or null if config is not found.
  4720.      */
  4721.     function _createServiceShortcutButton(serviceId, forLocation = 'tools') {
  4722.         const config = SERVICE_SHORTCUT_CONFIG[serviceId];
  4723.         if (!config) {
  4724.             console.warn(`${LOG_PREFIX} No configuration found for service shortcut: ${serviceId}`);
  4725.             return null;
  4726.         }
  4727.  
  4728.         const isIconOnlyLocation = (forLocation === 'header');
  4729.         const displayText = !isIconOnlyLocation ? _(config.textKey) : '';
  4730.  
  4731.         // The click handler logic is now generic and reusable
  4732.         const clickHandler = () => {
  4733.             try {
  4734.                 const currentUrl = Utils.getCurrentURL();
  4735.                 if (currentUrl) {
  4736.                     const query = currentUrl.searchParams.get('q');
  4737.                     if (query) {
  4738.                         const serviceUrl = `${config.baseUrl}?${config.queryParam}=${encodeURIComponent(query)}`;
  4739.                         // Use GM_openInTab for better control, falling back to window.open
  4740.                         if (typeof GM_openInTab === 'function') {
  4741.                             GM_openInTab(serviceUrl, { active: true, insert: true });
  4742.                         } else {
  4743.                             window.open(serviceUrl, '_blank');
  4744.                         }
  4745.                     } else {
  4746.                         window.open(config.homepage, '_blank');
  4747.                         NotificationManager.show('alert_no_keywords_for_shortcut', { service_name: _(config.serviceNameKey) }, 'info');
  4748.                     }
  4749.                 }
  4750.             } catch (e) {
  4751.                 console.error(`${LOG_PREFIX} Error opening ${config.serviceNameKey}:`, e);
  4752.                 NotificationManager.show('alert_error_opening_link', { service_name: _(config.serviceNameKey) }, 'error');
  4753.             }
  4754.         };
  4755.  
  4756.         return _createStandardButton({
  4757.             id: config.id,
  4758.             className: (forLocation === 'header') ? CSS.HEADER_BUTTON : CSS.BUTTON,
  4759.             svgIcon: config.svgIcon || '',
  4760.             textContent: displayText,
  4761.             title: _(config.titleKey),
  4762.             clickHandler: clickHandler
  4763.         });
  4764.     }
  4765.  
  4766.     /**
  4767.      * Builds and inserts the control buttons and links into the sidebar header.
  4768.      * @private
  4769.      */
  4770.     function _buildSidebarHeaderControls(headerEl, settingsBtnRef, rBL, vBL, aSL, pznBL, schL, trnL, dsL, settings) { const verbatimActive = URLActionManager.isVerbatimActive(); const buttonsInOrder = []; if (aSL === 'header' && settings.advancedSearchLinkLocation !== 'none') { buttonsInOrder.push(_createAdvancedSearchElementHTML(false)); } if (schL === 'header' && settings.googleScholarShortcutLocation !== 'none') { buttonsInOrder.push(_createServiceShortcutButton('googleScholar', 'header')); } if (trnL === 'header' && settings.googleTrendsShortcutLocation !== 'none') { buttonsInOrder.push(_createServiceShortcutButton('googleTrends', 'header')); } if (dsL === 'header' && settings.googleDatasetSearchShortcutLocation !== 'none') { buttonsInOrder.push(_createServiceShortcutButton('googleDatasetSearch', 'header')); } if (vBL === 'header' && settings.verbatimButtonLocation !== 'none') { buttonsInOrder.push(_createStandardButton({ id: IDS.TOOL_VERBATIM, className: CSS.HEADER_BUTTON, svgIcon: SVG_ICONS.verbatim, title: _('tool_verbatim_search'), clickHandler: URLActionManager.triggerToggleVerbatim, isActive: verbatimActive })); } if (pznBL === 'header' && settings.personalizationButtonLocation !== 'none') { buttonsInOrder.push(_createPersonalizationButtonHTML('header')); } if (rBL === 'header' && settings.resetButtonLocation !== 'none') { buttonsInOrder.push(_createStandardButton({ id: IDS.TOOL_RESET_BUTTON, className: CSS.HEADER_BUTTON, svgIcon: SVG_ICONS.reset, title: _('tool_reset_filters'), clickHandler: URLActionManager.triggerResetFilters })); } buttonsInOrder.forEach(btn => { if (btn && settingsBtnRef) { headerEl.insertBefore(btn, settingsBtnRef); } else if (btn) { headerEl.appendChild(btn); } }); }
  4771.  
  4772.     /**
  4773.      * Builds the container and controls for the "Top Block" area of the sidebar.
  4774.      * @private
  4775.      * @returns {HTMLElement|null} The created container element, or null if no controls are placed there.
  4776.      */
  4777.     function _buildSidebarFixedTopControls(rBL, vBL, aSL, pznBL, schL, trnL, dsL, currentSettings) { const fTBC = document.createElement('div'); fTBC.id = IDS.FIXED_TOP_BUTTONS; const fTF = document.createDocumentFragment(); const verbatimActive = URLActionManager.isVerbatimActive(); if (currentSettings.showResultStats) { ResultStatsManager.createContainer(fTF); } if (rBL === 'topBlock' && currentSettings.resetButtonLocation !== 'none') { const btn = _createStandardButton({ id: IDS.TOOL_RESET_BUTTON, className: CSS.BUTTON, svgIcon: SVG_ICONS.reset, textContent: _('tool_reset_filters'), title: _('tool_reset_filters'), clickHandler: URLActionManager.triggerResetFilters }); const bD = document.createElement('div'); bD.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bD.appendChild(btn); fTF.appendChild(bD); } if (pznBL === 'topBlock' && currentSettings.personalizationButtonLocation !== 'none') { const btnPzn = _createPersonalizationButtonHTML('topBlock'); const bDPzn = document.createElement('div'); bDPzn.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDPzn.appendChild(btnPzn); fTF.appendChild(bDPzn); } if (vBL === 'topBlock' && currentSettings.verbatimButtonLocation !== 'none') { const btnVerbatim = _createStandardButton({ id: IDS.TOOL_VERBATIM, className: CSS.BUTTON, svgIcon: SVG_ICONS.verbatim, textContent: _('tool_verbatim_search'), title: _('tool_verbatim_search'), clickHandler: URLActionManager.triggerToggleVerbatim, isActive: verbatimActive }); const bDVerbatim = document.createElement('div'); bDVerbatim.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDVerbatim.appendChild(btnVerbatim); fTF.appendChild(bDVerbatim); } if (aSL === 'topBlock' && currentSettings.advancedSearchLinkLocation !== 'none') { const linkEl = _createAdvancedSearchElementHTML(true); const bDAdv = document.createElement('div'); bDAdv.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDAdv.appendChild(linkEl); fTF.appendChild(bDAdv); } if (schL === 'topBlock' && currentSettings.googleScholarShortcutLocation !== 'none') { const btnSch = _createServiceShortcutButton('googleScholar', 'topBlock'); if (btnSch) { const bDSch = document.createElement('div'); bDSch.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDSch.appendChild(btnSch); fTF.appendChild(bDSch); } } if (trnL === 'topBlock' && currentSettings.googleTrendsShortcutLocation !== 'none') { const btnTrn = _createServiceShortcutButton('googleTrends', 'topBlock'); if (btnTrn) { const bDTrn = document.createElement('div'); bDTrn.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDTrn.appendChild(btnTrn); fTF.appendChild(bDTrn); } } if (dsL === 'topBlock' && currentSettings.googleDatasetSearchShortcutLocation !== 'none') { const btnDs = _createServiceShortcutButton('googleDatasetSearch', 'topBlock'); if (btnDs) { const bDDs = document.createElement('div'); bDDs.classList.add(CSS.FIXED_TOP_BUTTONS_ITEM); bDDs.appendChild(btnDs); fTF.appendChild(bDDs); } } if (fTF.childElementCount > 0) { fTBC.appendChild(fTF); return fTBC; } return null; }
  4778.  
  4779.     /**
  4780.      * Creates the "Tools" section element.
  4781.      * @private
  4782.      * @returns {HTMLElement|null} The created section element, or null if no tools are configured to be in this section.
  4783.      */
  4784.     function _createToolsSectionElement(sectionId, titleKey, rBL, vBL, aSL, pznBL, schL, trnL, dsL) { const { section, sectionContent, sectionTitle } = _createSectionShell(sectionId, titleKey); sectionTitle.textContent = _(titleKey); const frag = document.createDocumentFragment(); const verbatimActive = URLActionManager.isVerbatimActive(); const currentSettings = SettingsManager.getCurrentSettings(); if (rBL === 'tools' && currentSettings.resetButtonLocation !== 'none') { const btn = _createStandardButton({ id: IDS.TOOL_RESET_BUTTON, className: CSS.BUTTON, svgIcon: SVG_ICONS.reset, textContent: _('tool_reset_filters'), title: _('tool_reset_filters'), clickHandler: URLActionManager.triggerResetFilters }); frag.appendChild(btn); } if (pznBL === 'tools' && currentSettings.personalizationButtonLocation !== 'none') { const btnPzn = _createPersonalizationButtonHTML('tools'); frag.appendChild(btnPzn); } if (vBL === 'tools' && currentSettings.verbatimButtonLocation !== 'none') { const btnVerbatim = _createStandardButton({ id: IDS.TOOL_VERBATIM, className: CSS.BUTTON, svgIcon: SVG_ICONS.verbatim, textContent: _('tool_verbatim_search'), title: _('tool_verbatim_search'), clickHandler: URLActionManager.triggerToggleVerbatim, isActive: verbatimActive }); frag.appendChild(btnVerbatim); } if (aSL === 'tools' && currentSettings.advancedSearchLinkLocation !== 'none') { frag.appendChild(_createAdvancedSearchElementHTML(true)); } if (schL === 'tools' && currentSettings.googleScholarShortcutLocation !== 'none') { const btnSch = _createServiceShortcutButton('googleScholar', 'tools'); if (btnSch) frag.appendChild(btnSch); } if (trnL === 'tools' && currentSettings.googleTrendsShortcutLocation !== 'none') { const btnTrn = _createServiceShortcutButton('googleTrends', 'tools'); if (btnTrn) frag.appendChild(btnTrn); } if (dsL === 'tools' && currentSettings.googleDatasetSearchShortcutLocation !== 'none') { const btnDs = _createServiceShortcutButton('googleDatasetSearch', 'tools'); if (btnDs) frag.appendChild(btnDs); } if (frag.childElementCount > 0) { sectionContent.appendChild(frag); return section; } return null; }
  4785.  
  4786.     /**
  4787.      * Validates the date range input fields.
  4788.      * @private
  4789.      * @param {HTMLInputElement} minInput - The start date input.
  4790.      * @param {HTMLInputElement} maxInput - The end date input.
  4791.      * @param {HTMLElement} errorMsgElement - The element for displaying errors.
  4792.      * @returns {boolean} True if the dates are valid.
  4793.      */
  4794.     function _validateDateInputs(minInput, maxInput, errorMsgElement) { _clearElementMessage(errorMsgElement, CSS.IS_ERROR_VISIBLE); minInput.classList.remove(CSS.HAS_ERROR); maxInput.classList.remove(CSS.HAS_ERROR); let isValid = true; const today = new Date(); today.setHours(0, 0, 0, 0); const startDateStr = minInput.value; const endDateStr = maxInput.value; let startDate = null; let endDate = null; if (startDateStr) { startDate = new Date(startDateStr); startDate.setHours(0,0,0,0); if (startDate > today) { _showElementMessage(errorMsgElement, 'alert_start_in_future', {}, CSS.IS_ERROR_VISIBLE); minInput.classList.add(CSS.HAS_ERROR); isValid = false; } } if (endDateStr) { endDate = new Date(endDateStr); endDate.setHours(0,0,0,0); if (endDate > today && !maxInput.getAttribute('max')) { if (isValid) _showElementMessage(errorMsgElement, 'alert_end_in_future', {}, CSS.IS_ERROR_VISIBLE); else errorMsgElement.textContent += " " + _('alert_end_in_future'); maxInput.classList.add(CSS.HAS_ERROR); isValid = false; } } if (startDate && endDate && startDate > endDate) { if (isValid) _showElementMessage(errorMsgElement, 'alert_end_before_start', {}, CSS.IS_ERROR_VISIBLE); else errorMsgElement.textContent += " " + _('alert_end_before_start'); minInput.classList.add(CSS.HAS_ERROR); maxInput.classList.add(CSS.HAS_ERROR); isValid = false; } return isValid; }
  4795.  
  4796.     /**
  4797.      * Adds event listeners to the date range input fields.
  4798.      */
  4799.     function addDateRangeListener() { const dateRangeSection = sidebar?.querySelector('#sidebar-section-date-range'); if (!dateRangeSection) return; const applyButton = dateRangeSection.querySelector('.apply-date-range'); const errorMsgElement = dateRangeSection.querySelector(`#${IDS.DATE_RANGE_ERROR_MSG}`); const dateMinInput = dateRangeSection.querySelector(`#${IDS.DATE_MIN}`); const dateMaxInput = dateRangeSection.querySelector(`#${IDS.DATE_MAX}`); if (!applyButton || !errorMsgElement || !dateMinInput || !dateMaxInput) { console.warn(`${LOG_PREFIX} Date range elements not found for listener setup.`); return; } const handleDateValidation = () => { const isValid = _validateDateInputs(dateMinInput, dateMaxInput, errorMsgElement); applyButton.disabled = !isValid; }; if (!dateMinInput.dataset[DATA_ATTR.LISTENER_ATTACHED]) { dateMinInput.addEventListener('input', handleDateValidation); dateMinInput.addEventListener('change', handleDateValidation); dateMinInput.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; } if (!dateMaxInput.dataset[DATA_ATTR.LISTENER_ATTACHED]) { dateMaxInput.addEventListener('input', handleDateValidation); dateMaxInput.addEventListener('change', handleDateValidation); dateMaxInput.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; } if (!applyButton.dataset[DATA_ATTR.LISTENER_ATTACHED]) { applyButton.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; applyButton.addEventListener('click', () => { if (!_validateDateInputs(dateMinInput, dateMaxInput, errorMsgElement)) return; URLActionManager.applyDateRange(dateMinInput.value, dateMaxInput.value); }); } handleDateValidation(); }
  4800.  
  4801.     /**
  4802.      * A helper function that calls other functions to initialize all sidebar states and listeners after the UI is built.
  4803.      */
  4804.     function _initializeSidebarEventListenersAndStates() { addDateRangeListener(); addToolButtonListeners(); initializeSelectedFilters(); applySectionCollapseStates(); ResultStatsManager.update(); }
  4805.  
  4806.     /**
  4807.      * Clears the text content and removes the visibility class from a message element.
  4808.      * @private
  4809.      */
  4810.     function _clearElementMessage(element, visibleClass = CSS.IS_ERROR_VISIBLE) { if(!element)return; element.textContent=''; element.classList.remove(visibleClass);}
  4811.  
  4812.     /**
  4813.      * Shows a message in a specific DOM element.
  4814.      * @private
  4815.      */
  4816.     function _showElementMessage(element, messageKey, messageArgs = {}, visibleClass = CSS.IS_ERROR_VISIBLE) { if(!element)return; element.textContent=_(messageKey,messageArgs); element.classList.add(visibleClass);}
  4817.  
  4818.     /**
  4819.      * Adds event listeners to tool buttons that might be in different locations.
  4820.      */
  4821.     function addToolButtonListeners() { const queryAreas = [ sidebar?.querySelector(`.${CSS.SIDEBAR_HEADER}`), sidebar?.querySelector(`#${IDS.FIXED_TOP_BUTTONS}`), sidebar?.querySelector(`#sidebar-section-tools .${CSS.SECTION_CONTENT}`) ].filter(Boolean); queryAreas.forEach(area => { area.querySelectorAll(`#${IDS.TOOL_VERBATIM}:not([data-${DATA_ATTR.LISTENER_ATTACHED}])`).forEach(b => { b.addEventListener('click', URLActionManager.triggerToggleVerbatim); b.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; }); area.querySelectorAll(`#${IDS.TOOL_RESET_BUTTON}:not([data-${DATA_ATTR.LISTENER_ATTACHED}])`).forEach(b => { b.addEventListener('click', URLActionManager.triggerResetFilters); b.dataset[DATA_ATTR.LISTENER_ATTACHED] = 'true'; }); }); }
  4822.  
  4823.     /**
  4824.      * Applies the visual styles for the sidebar's collapsed or expanded state.
  4825.      * @param {boolean} isCollapsed - Whether the sidebar is currently collapsed.
  4826.      */
  4827.     function applySidebarCollapseVisuals(isCollapsed) { if(!sidebar)return; const collapseButton = sidebar.querySelector(`#${IDS.COLLAPSE_BUTTON}`); if(isCollapsed){ sidebar.classList.add(CSS.IS_SIDEBAR_COLLAPSED); if(collapseButton){ collapseButton.innerHTML = SVG_ICONS.chevronRight; collapseButton.title = _('sidebar_expand_title');}} else{ sidebar.classList.remove(CSS.IS_SIDEBAR_COLLAPSED); if(collapseButton){ collapseButton.innerHTML = SVG_ICONS.chevronLeft; collapseButton.title = _('sidebar_collapse_title');}} }
  4828.  
  4829.     /**
  4830.      * Applies the collapsed/expanded state to all sections based on the current settings.
  4831.      */
  4832.     function applySectionCollapseStates() { if(!sidebar)return; const currentSettings = SettingsManager.getCurrentSettings(); const sections = sidebar.querySelectorAll(`.${CSS.SIDEBAR_CONTENT_WRAPPER} .${CSS.SECTION}`); sections.forEach(section => { const content = section.querySelector(`.${CSS.SECTION_CONTENT}`); const title = section.querySelector(`.${CSS.SECTION_TITLE}`); const sectionId = section.id; if (content && title && sectionId) { let shouldBeCollapsed = false; if (currentSettings.sectionDisplayMode === 'collapseAll') { shouldBeCollapsed = true; } else if (currentSettings.sectionDisplayMode === 'expandAll') { shouldBeCollapsed = false; } else { shouldBeCollapsed = currentSettings.sectionStates?.[sectionId] === true; } content.classList.toggle(CSS.IS_SECTION_COLLAPSED, shouldBeCollapsed); title.classList.toggle(CSS.IS_SECTION_COLLAPSED, shouldBeCollapsed); if (currentSettings.sectionDisplayMode === 'remember') { if (!currentSettings.sectionStates) currentSettings.sectionStates = {}; currentSettings.sectionStates[sectionId] = shouldBeCollapsed; } } }); }
  4833. 	
  4834.     /**
  4835.      * Initializes the visual state of all filter options in the sidebar to reflect the
  4836.      * current URL's search parameters upon page load.
  4837.      */
  4838.     function initializeSelectedFilters() {
  4839.         if (!sidebar) return;
  4840.         try {
  4841.             const currentUrl = URLActionManager.generateURLObject();
  4842.             if (!currentUrl) return;
  4843.             const params = currentUrl.searchParams;
  4844.             const currentTbs = params.get('tbs') || '';
  4845.             const currentQuery = params.get('q') || '';
  4846.  
  4847.             ALL_SECTION_DEFINITIONS.forEach(sectionDef => {
  4848.                 if (sectionDef.type === 'filter' && sectionDef.param && sectionDef.id !== 'sidebar-section-filetype' && sectionDef.id !== 'sidebar-section-site-search') {
  4849.                      _initializeStandaloneFilterState(params, sectionDef.id, sectionDef.param);
  4850.                 }
  4851.             });
  4852.             _initializeTimeFilterState(currentTbs);
  4853.             _initializeVerbatimState();
  4854.             _initializePersonalizationState();
  4855.             _initializeDateRangeInputs(currentTbs);
  4856.             _initializeSiteSearchState(currentQuery);
  4857.             _initializeFiletypeSearchState(currentQuery, params.get('as_filetype'));
  4858.         } catch (e) {
  4859.             console.error(`${LOG_PREFIX} Error initializing filter highlights:`, e);
  4860.         }
  4861.     }
  4862.  
  4863.     /**
  4864.      * Sets the selected state for options in a standard filter section based on URL parameters.
  4865.      * @private
  4866.      * @param {URLSearchParams} params - The current URL search parameters.
  4867.      * @param {string} sectionId - The ID of the section to initialize.
  4868.      * @param {string} paramToGetFromURL - The URL parameter key to check.
  4869.      */
  4870.     function _initializeStandaloneFilterState(params, sectionId, paramToGetFromURL) {
  4871.         const sectionElement = sidebar?.querySelector(`#${sectionId}`);
  4872.         if (!sectionElement) return;
  4873.         const urlValue = params.get(paramToGetFromURL);
  4874.         const options = sectionElement.querySelectorAll(`.${CSS.FILTER_OPTION}`);
  4875.         let anOptionWasSelectedBasedOnUrl = false;
  4876.  
  4877.         options.forEach(opt => {
  4878.             const optionValue = opt.dataset[DATA_ATTR.FILTER_VALUE];
  4879.             const isSelected = (urlValue !== null && urlValue === optionValue);
  4880.             opt.classList.toggle(CSS.IS_SELECTED, isSelected);
  4881.             if (isSelected) anOptionWasSelectedBasedOnUrl = true;
  4882.         });
  4883.  
  4884.         if (!anOptionWasSelectedBasedOnUrl) {
  4885.             const defaultOptionQuery = (paramToGetFromURL === 'as_occt')
  4886.                 ? `.${CSS.FILTER_OPTION}[data-${DATA_ATTR.FILTER_VALUE}="any"]`
  4887.                 : `.${CSS.FILTER_OPTION}[data-${DATA_ATTR.FILTER_VALUE}=""]`;
  4888.             const defaultOpt = sectionElement.querySelector(defaultOptionQuery);
  4889.             if (defaultOpt) {
  4890.                 defaultOpt.classList.add(CSS.IS_SELECTED);
  4891.             }
  4892.         }
  4893.     }
  4894.  
  4895.     /**
  4896.      * Sets the selected state for the time filter based on the 'tbs' URL parameter.
  4897.      * @private
  4898.      * @param {string} currentTbs - The current value of the 'tbs' URL parameter.
  4899.      */
  4900.     function _initializeTimeFilterState(currentTbs){ const timeSection = sidebar?.querySelector('#sidebar-section-time'); if(!timeSection) return; const qdrMatch = currentTbs.match(/qdr:([^,]+)/); const activeQdrValue = qdrMatch ? qdrMatch[1] : null; const hasDateRange = /cdr:1/.test(currentTbs); const timeOptions = timeSection.querySelectorAll(`.${CSS.FILTER_OPTION}`); timeOptions.forEach(opt => { const optionValue = opt.dataset[DATA_ATTR.FILTER_VALUE]; let shouldBeSelected = false; if(hasDateRange){ shouldBeSelected = (optionValue === ''); } else if(activeQdrValue){ shouldBeSelected = (optionValue === activeQdrValue); } else { shouldBeSelected = (optionValue === ''); } opt.classList.toggle(CSS.IS_SELECTED, shouldBeSelected); }); }
  4901.  
  4902.     /**
  4903.      * Sets the active state of the Verbatim search button.
  4904.      * @private
  4905.      */
  4906.     function _initializeVerbatimState(){ const isVerbatimActiveNow = URLActionManager.isVerbatimActive(); sidebar?.querySelectorAll(`#${IDS.TOOL_VERBATIM}`).forEach(b=>b.classList.toggle(CSS.IS_ACTIVE, isVerbatimActiveNow)); }
  4907.  
  4908.     /**
  4909.      * Sets the active state of the Personalization toggle button.
  4910.      * @private
  4911.      */
  4912.     function _initializePersonalizationState() { const isActive = URLActionManager.isPersonalizationActive(); sidebar?.querySelectorAll(`#${IDS.TOOL_PERSONALIZE}`).forEach(button => { button.classList.toggle(CSS.IS_ACTIVE, isActive); const titleKey = isActive ? 'tooltip_toggle_personalization_off' : 'tooltip_toggle_personalization_on'; button.title = _(titleKey); const svgIcon = SVG_ICONS.personalization || ''; const isIconOnly = button.classList.contains(CSS.HEADER_BUTTON) && !button.classList.contains(CSS.BUTTON); const currentText = !isIconOnly ? _('tool_personalization_toggle') : ''; let newHTML = ''; if(svgIcon) newHTML += svgIcon; if(currentText) newHTML += (svgIcon && currentText ? ' ' : '') + `<span>${currentText}</span>`; button.innerHTML = newHTML.trim(); }); }
  4913.  
  4914.     /**
  4915.      * Sets the values of the date range inputs based on the 'tbs' URL parameter.
  4916.      * @private
  4917.      * @param {string} currentTbs - The current value of the 'tbs' URL parameter.
  4918.      */
  4919.     function _initializeDateRangeInputs(currentTbs){ const dateSection = sidebar?.querySelector('#sidebar-section-date-range'); if (!dateSection) return; const dateMinInput = dateSection.querySelector(`#${IDS.DATE_MIN}`); const dateMaxInput = dateSection.querySelector(`#${IDS.DATE_MAX}`); const errorMsgElement = dateSection.querySelector(`#${IDS.DATE_RANGE_ERROR_MSG}`); const applyButton = dateSection.querySelector('.apply-date-range'); if (errorMsgElement) _clearElementMessage(errorMsgElement, CSS.IS_ERROR_VISIBLE); if (/cdr:1/.test(currentTbs)) { const minMatch = currentTbs.match(/cd_min:(\d{1,2})\/(\d{1,2})\/(\d{4})/); const maxMatch = currentTbs.match(/cd_max:(\d{1,2})\/(\d{1,2})\/(\d{4})/); if (dateMinInput) dateMinInput.value = minMatch ? `${minMatch[3]}-${minMatch[1].padStart(2, '0')}-${minMatch[2].padStart(2, '0')}` : ''; if (dateMaxInput) dateMaxInput.value = maxMatch ? `${maxMatch[3]}-${maxMatch[1].padStart(2, '0')}-${maxMatch[2].padStart(2, '0')}` : ''; } else { if (dateMinInput) dateMinInput.value = ''; if (dateMaxInput) dateMaxInput.value = ''; } if (dateMinInput && dateMaxInput && errorMsgElement && applyButton) { const isValid = _validateDateInputs(dateMinInput, dateMaxInput, errorMsgElement); applyButton.disabled = !isValid; } }
  4920.  
  4921.     /**
  4922.      * Sets the selected state for the site search options based on 'site:' operators in the query.
  4923.      * @private
  4924.      * @param {string} currentQuery - The current search query string.
  4925.      */
  4926.     function _initializeSiteSearchState(currentQuery){
  4927.         const siteSearchSectionContent = sidebar?.querySelector('#sidebar-section-site-search .'+CSS.SECTION_CONTENT);
  4928.         if (!siteSearchSectionContent) return;
  4929.  
  4930.         const clearSiteOptDiv = siteSearchSectionContent.querySelector(`#${IDS.CLEAR_SITE_SEARCH_OPTION}`);
  4931.         const listElement = siteSearchSectionContent.querySelector('ul.' + CSS.CUSTOM_LIST);
  4932.         const currentSettings = SettingsManager.getCurrentSettings();
  4933.         const checkboxModeEnabled = currentSettings.enableSiteSearchCheckboxMode;
  4934.  
  4935.         siteSearchSectionContent.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}, label.${CSS.IS_SELECTED}`).forEach(opt => opt.classList.remove(CSS.IS_SELECTED));
  4936.         if (checkboxModeEnabled && listElement) {
  4937.             listElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_SITE}`).forEach(cb => cb.checked = false);
  4938.         }
  4939.  
  4940.         const siteMatches = [...currentQuery.matchAll(/(?<!\S)site:([\w.:\/~%?#=&+-]+)(?!\S)/gi)];
  4941.         let activeSiteUrlsFromQuery = siteMatches.map(match => match[1].toLowerCase());
  4942.         activeSiteUrlsFromQuery.sort();
  4943.  
  4944.         if (activeSiteUrlsFromQuery.length > 0) {
  4945.             if(clearSiteOptDiv) clearSiteOptDiv.classList.remove(CSS.IS_SELECTED);
  4946.             let customOptionFullyMatched = false;
  4947.  
  4948.             if (listElement) {
  4949.                 const customSiteOptions = Array.from(listElement.querySelectorAll(checkboxModeEnabled ? 'label' : `div.${CSS.FILTER_OPTION}`));
  4950.                 for (const optElement of customSiteOptions) {
  4951.                     const customSiteValue = optElement.dataset[DATA_ATTR.SITE_URL];
  4952.                     if (!customSiteValue) continue;
  4953.  
  4954.                     const definedCustomSites = Utils.parseCombinedValue(customSiteValue).map(s => s.toLowerCase()).sort();
  4955.                     if (definedCustomSites.length > 0 && definedCustomSites.length === activeSiteUrlsFromQuery.length && definedCustomSites.every((val, index) => val === activeSiteUrlsFromQuery[index])) {
  4956.                         if (checkboxModeEnabled) {
  4957.                             const checkbox = listElement.querySelector(`input[type="checkbox"][value="${customSiteValue}"]`);
  4958.                             if (checkbox) checkbox.checked = true;
  4959.                         }
  4960.                         optElement.classList.add(CSS.IS_SELECTED);
  4961.                         customOptionFullyMatched = true;
  4962.                         break;
  4963.                     }
  4964.                 }
  4965.             }
  4966.  
  4967.             if (!customOptionFullyMatched && listElement && checkboxModeEnabled) {
  4968.                 activeSiteUrlsFromQuery.forEach(url => {
  4969.                     const checkbox = listElement.querySelector(`input[type="checkbox"].${CSS.CHECKBOX_SITE}[value="${url}"]`);
  4970.                     if (checkbox) {
  4971.                         checkbox.checked = true;
  4972.                         const label = listElement.querySelector(`label[for="${checkbox.id}"]`);
  4973.                         if(label) label.classList.add(CSS.IS_SELECTED);
  4974.                     }
  4975.                 });
  4976.             } else if (!customOptionFullyMatched && listElement && !checkboxModeEnabled && activeSiteUrlsFromQuery.length === 1) {
  4977.                 const singleSiteInQuery = activeSiteUrlsFromQuery[0];
  4978.                 const optionDiv = listElement.querySelector(`div.${CSS.FILTER_OPTION}[data-${DATA_ATTR.SITE_URL}="${singleSiteInQuery}"]`);
  4979.                 if (optionDiv) optionDiv.classList.add(CSS.IS_SELECTED);
  4980.             }
  4981.         } else {
  4982.             if (clearSiteOptDiv) clearSiteOptDiv.classList.add(CSS.IS_SELECTED);
  4983.         }
  4984.  
  4985.         if (checkboxModeEnabled) {
  4986.             _updateApplySitesButtonState(siteSearchSectionContent);
  4987.         }
  4988.     }
  4989.  
  4990.     /**
  4991.      * Sets the selected state for the file type options based on 'filetype:' operators or the 'as_filetype' parameter.
  4992.      * @private
  4993.      * @param {string} currentQuery - The current search query string.
  4994.      * @param {string|null} asFiletypeParam - The value of the 'as_filetype' URL parameter.
  4995.      */
  4996.     function _initializeFiletypeSearchState(currentQuery, asFiletypeParam) {
  4997.         const filetypeSectionContent = sidebar?.querySelector('#sidebar-section-filetype .'+CSS.SECTION_CONTENT);
  4998.         if (!filetypeSectionContent) return;
  4999.  
  5000.         const clearFiletypeOptDiv = filetypeSectionContent.querySelector(`#${IDS.CLEAR_FILETYPE_SEARCH_OPTION}`);
  5001.         const listElement = filetypeSectionContent.querySelector('ul.' + CSS.CUSTOM_LIST);
  5002.         const currentSettings = SettingsManager.getCurrentSettings();
  5003.         const checkboxModeEnabled = currentSettings.enableFiletypeCheckboxMode;
  5004.  
  5005.         filetypeSectionContent.querySelectorAll(`.${CSS.FILTER_OPTION}.${CSS.IS_SELECTED}, label.${CSS.IS_SELECTED}`).forEach(opt => opt.classList.remove(CSS.IS_SELECTED));
  5006.         if (checkboxModeEnabled && listElement) {
  5007.             listElement.querySelectorAll(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}`).forEach(cb => cb.checked = false);
  5008.         }
  5009.  
  5010.         let activeFiletypesFromQuery = [];
  5011.         const filetypeMatches = [...currentQuery.matchAll(/(?<!\S)filetype:([\w.:\/~%?#=&+-]+)(?!\S)/gi)];
  5012.  
  5013.         if (filetypeMatches.length > 0) {
  5014.             activeFiletypesFromQuery = filetypeMatches.map(match => match[1].toLowerCase());
  5015.         } else if (asFiletypeParam && !currentQuery.includes('filetype:')) {
  5016.              activeFiletypesFromQuery = Utils.parseCombinedValue(asFiletypeParam).map(ft => ft.toLowerCase());
  5017.         }
  5018.         activeFiletypesFromQuery.sort();
  5019.  
  5020.         if (activeFiletypesFromQuery.length > 0) {
  5021.             if(clearFiletypeOptDiv) clearFiletypeOptDiv.classList.remove(CSS.IS_SELECTED);
  5022.             let customOptionFullyMatched = false;
  5023.  
  5024.             if (listElement) {
  5025.                 const customFiletypeOptions = Array.from(listElement.querySelectorAll(checkboxModeEnabled ? 'label' : `div.${CSS.FILTER_OPTION}`));
  5026.                 for (const optElement of customFiletypeOptions) {
  5027.                     const customFtValueAttr = checkboxModeEnabled ? optElement.dataset[DATA_ATTR.FILETYPE_VALUE] : optElement.dataset[DATA_ATTR.FILTER_VALUE];
  5028.                     if (!customFtValueAttr) continue;
  5029.  
  5030.                     const definedCustomFiletypes = Utils.parseCombinedValue(customFtValueAttr).map(s => s.toLowerCase()).sort();
  5031.                      if (definedCustomFiletypes.length > 0 && definedCustomFiletypes.length === activeFiletypesFromQuery.length && definedCustomFiletypes.every((val, index) => val === activeFiletypesFromQuery[index])) {
  5032.                         if (checkboxModeEnabled) {
  5033.                             const checkbox = listElement.querySelector(`input[type="checkbox"][value="${customFtValueAttr}"]`);
  5034.                             if (checkbox) checkbox.checked = true;
  5035.                         }
  5036.                         optElement.classList.add(CSS.IS_SELECTED);
  5037.                         customOptionFullyMatched = true;
  5038.                         break;
  5039.                     }
  5040.                 }
  5041.             }
  5042.  
  5043.             if (!customOptionFullyMatched && listElement && checkboxModeEnabled) {
  5044.                 activeFiletypesFromQuery.forEach(ft => {
  5045.                     const checkbox = listElement.querySelector(`input[type="checkbox"].${CSS.CHECKBOX_FILETYPE}[value="${ft}"]`);
  5046.                     if (checkbox) {
  5047.                          checkbox.checked = true;
  5048.                          const label = listElement.querySelector(`label[for="${checkbox.id}"]`);
  5049.                          if(label) label.classList.add(CSS.IS_SELECTED);
  5050.                     }
  5051.                 });
  5052.             } else if (!customOptionFullyMatched && listElement && !checkboxModeEnabled && activeFiletypesFromQuery.length === 1) {
  5053.                 const singleFtInQuery = activeFiletypesFromQuery[0];
  5054.                 const optionDiv = listElement.querySelector(`div.${CSS.FILTER_OPTION}[data-${DATA_ATTR.FILTER_VALUE}="${singleFtInQuery}"]`);
  5055.                 if (optionDiv) optionDiv.classList.add(CSS.IS_SELECTED);
  5056.             }
  5057.         } else {
  5058.              if (clearFiletypeOptDiv) clearFiletypeOptDiv.classList.add(CSS.IS_SELECTED);
  5059.         }
  5060.         if (checkboxModeEnabled) {
  5061.             _updateApplyFiletypesButtonState(filetypeSectionContent);
  5062.         }
  5063.     }
  5064.  
  5065.     /**
  5066.      * Binds the main event listeners for the sidebar itself, primarily using event delegation.
  5067.      * This includes clicks on the settings and collapse buttons, as well as section titles.
  5068.      */
  5069.     function bindSidebarEvents() {
  5070.         if (!sidebar) return;
  5071.         const collapseButton = sidebar.querySelector(`#${IDS.COLLAPSE_BUTTON}`);
  5072.         const settingsButton = sidebar.querySelector(`#${IDS.SETTINGS_BUTTON}`);
  5073.         if (collapseButton) collapseButton.title = _('sidebar_collapse_title');
  5074.         if (settingsButton) settingsButton.title = _('sidebar_settings_title');
  5075.  
  5076.         // Use a single delegated event listener for the entire sidebar for efficiency.
  5077.         sidebar.addEventListener('click', (e) => {
  5078.             const settingsBtnTarget = e.target.closest(`#${IDS.SETTINGS_BUTTON}`);
  5079.             if (settingsBtnTarget) { SettingsManager.show(); return; }
  5080.             const collapseBtnTarget = e.target.closest(`#${IDS.COLLAPSE_BUTTON}`);
  5081.             if (collapseBtnTarget) { toggleSidebarCollapse(); return; }
  5082.             const sectionTitleTarget = e.target.closest(`.${CSS.SIDEBAR_CONTENT_WRAPPER} .${CSS.SECTION_TITLE}`);
  5083.             if (sectionTitleTarget && !sidebar.classList.contains(CSS.IS_SIDEBAR_COLLAPSED)) { handleSectionCollapse(e); return; }
  5084.         });
  5085.  
  5086.         sidebar.addEventListener('mousedown', (event) => {
  5087.             if (event.button !== 1) { return; } // Middle-click only
  5088.             const target = event.target.closest(`.${CSS.FILTER_OPTION}, label[data-site-url], label[data-filetype-value]`);
  5089.             if (!target) { return; }
  5090.             event.preventDefault();
  5091.  
  5092.             let targetUrl = null;
  5093.             const dataset = target.dataset;
  5094.  
  5095.             if (target.id === IDS.CLEAR_SITE_SEARCH_OPTION) { targetUrl = URLActionManager.generateClearSiteSearchURL(); }
  5096.             else if (target.id === IDS.CLEAR_FILETYPE_SEARCH_OPTION) { targetUrl = URLActionManager.generateClearFiletypeSearchURL(); }
  5097.             else if (dataset.siteUrl) { targetUrl = URLActionManager.generateSiteSearchURL(dataset.siteUrl); }
  5098.             else if (dataset.filetypeValue) { targetUrl = URLActionManager.generateCombinedFiletypeSearchURL(dataset.filetypeValue); }
  5099.             else if (dataset.filterType && typeof dataset.filterValue !== 'undefined') { targetUrl = URLActionManager.generateFilterURL(dataset.filterType, dataset.filterValue); }
  5100.  
  5101.             if (targetUrl && typeof GM_openInTab === 'function') {
  5102.                 GM_openInTab(targetUrl, { active: false, insert: true });
  5103.             }
  5104.         });
  5105.     }
  5106.  
  5107.     /**
  5108.      * Toggles the collapsed/expanded state of the entire sidebar and saves the new state.
  5109.      */
  5110.     function toggleSidebarCollapse() { const cs = SettingsManager.getCurrentSettings(); cs.sidebarCollapsed = !cs.sidebarCollapsed; applySettings(cs); SettingsManager.save('Sidebar Collapse');}
  5111.  
  5112.     /**
  5113.      * Handles a click on a section title to expand or collapse it.
  5114.      * It also manages the accordion effect if enabled.
  5115.      * @param {Event} event - The click event.
  5116.      */
  5117.     function handleSectionCollapse(event) { const title = event.target.closest(`.${CSS.SECTION_TITLE}`); if (!title || sidebar?.classList.contains(CSS.IS_SIDEBAR_COLLAPSED) || title.closest(`#${IDS.FIXED_TOP_BUTTONS}`)) return; const section = title.closest(`.${CSS.SECTION}`); if (!section) return; const content = section.querySelector(`.${CSS.SECTION_CONTENT}`); const sectionId = section.id; if (!content || !sectionId) return; const currentSettings = SettingsManager.getCurrentSettings(); const isCurrentlyCollapsed = content.classList.contains(CSS.IS_SECTION_COLLAPSED); const shouldBeCollapsedAfterClick = !isCurrentlyCollapsed; let overallStateChanged = false; if (currentSettings.accordionMode && !shouldBeCollapsedAfterClick) { const sectionsContainer = section.parentElement; if (_applyAccordionEffectToSections(sectionId, sectionsContainer, currentSettings)) overallStateChanged = true; } if (_toggleSectionVisualState(section, title, content, sectionId, shouldBeCollapsedAfterClick, currentSettings)) overallStateChanged = true; if (overallStateChanged && currentSettings.sectionDisplayMode === 'remember') { debouncedSaveSettings('Section Collapse/Accordion'); } }
  5118.  
  5119.     /**
  5120.      * Collapses all other sections when one is expanded in accordion mode.
  5121.      * @private
  5122.      * @returns {boolean} True if any section's state was changed.
  5123.      */
  5124.     function _applyAccordionEffectToSections(clickedSectionId, allSectionsContainer, currentSettings) { let stateChangedForAccordion = false; allSectionsContainer?.querySelectorAll(`.${CSS.SECTION}`)?.forEach(otherSection => { if (otherSection.id !== clickedSectionId) { const otherContent = otherSection.querySelector(`.${CSS.SECTION_CONTENT}`); const otherTitle = otherSection.querySelector(`.${CSS.SECTION_TITLE}`); if (otherContent && !otherContent.classList.contains(CSS.IS_SECTION_COLLAPSED)) { otherContent.classList.add(CSS.IS_SECTION_COLLAPSED); otherTitle?.classList.add(CSS.IS_SECTION_COLLAPSED); if (currentSettings.sectionDisplayMode === 'remember') { if (!currentSettings.sectionStates) currentSettings.sectionStates = {}; if (currentSettings.sectionStates[otherSection.id] !== true) { currentSettings.sectionStates[otherSection.id] = true; stateChangedForAccordion = true; } } } } }); return stateChangedForAccordion; }
  5125.  
  5126.     /**
  5127.      * Toggles the visual state of a single section and updates its state in the settings if necessary.
  5128.      * @private
  5129.      * @returns {boolean} True if the section's state was changed.
  5130.      */
  5131.     function _toggleSectionVisualState(sectionEl, titleEl, contentEl, sectionId, newCollapsedState, currentSettings) { let sectionStateActuallyChanged = false; const isCurrentlyCollapsed = contentEl.classList.contains(CSS.IS_SECTION_COLLAPSED); if (isCurrentlyCollapsed !== newCollapsedState) { contentEl.classList.toggle(CSS.IS_SECTION_COLLAPSED, newCollapsedState); titleEl.classList.toggle(CSS.IS_SECTION_COLLAPSED, newCollapsedState); sectionStateActuallyChanged = true; } if (currentSettings.sectionDisplayMode === 'remember') { if (!currentSettings.sectionStates) currentSettings.sectionStates = {}; if (currentSettings.sectionStates[sectionId] !== newCollapsedState) { currentSettings.sectionStates[sectionId] = newCollapsedState; if (!sectionStateActuallyChanged) sectionStateActuallyChanged = true; } } return sectionStateActuallyChanged; }
  5132.  
  5133.     /**
  5134.      * The main entry point for the script. It orchestrates the initialization process,
  5135.      * including loading dependencies, settings, and building the UI.
  5136.      */
  5137.     function initializeScript() {
  5138.         console.log(LOG_PREFIX + " Initializing script...");
  5139.         debouncedSaveSettings = Utils.debounce(() => SettingsManager.save('Debounced Save'), 800);
  5140.         try {
  5141.             addGlobalStyles(); NotificationManager.init(); LocalizationService.initializeBaseLocale();
  5142.             SettingsManager.initialize( defaultSettings, applySettings, buildSidebarUI, applySectionCollapseStates, _initMenuCommands, renderSectionOrderList );
  5143.             setupSystemThemeListener(); buildSidebarSkeleton();
  5144.             DragManager.init( sidebar, sidebar.querySelector(`.${CSS.DRAG_HANDLE}`), SettingsManager, debouncedSaveSettings );
  5145.             const initialSettings = SettingsManager.getCurrentSettings();
  5146.             DragManager.setDraggable(initialSettings.draggableHandleEnabled, sidebar, sidebar.querySelector(`.${CSS.DRAG_HANDLE}`));
  5147.             applySettings(initialSettings); buildSidebarUI(); bindSidebarEvents(); _initMenuCommands();
  5148.             ResultStatsManager.init();
  5149.             console.log(`${LOG_PREFIX} Script initialization complete. Final effective locale: ${LocalizationService.getCurrentLocale()}`);
  5150.         } catch (error) {
  5151.             console.error(`${LOG_PREFIX} [initializeScript] CRITICAL ERROR DURING INITIALIZATION:`, error, error.stack);
  5152.             const scriptNameForAlert = (typeof _ === 'function' && _('scriptName') && !(_('scriptName').startsWith('[ERR:'))) ? _('scriptName') : SCRIPT_INTERNAL_NAME;
  5153.             if (typeof NotificationManager !== 'undefined' && NotificationManager.show) { NotificationManager.show('alert_init_fail', { scriptName: scriptNameForAlert, error: error.message }, 'error', 0); }
  5154.             else { _showGlobalMessage('alert_init_fail', { scriptName: scriptNameForAlert, error: error.message }, 'error', 0); }
  5155.             if(sidebar && sidebar.remove) sidebar.remove(); const settingsOverlayEl = document.getElementById(IDS.SETTINGS_OVERLAY); if(settingsOverlayEl) settingsOverlayEl.remove(); ModalManager.hide();
  5156.         }
  5157.     }
  5158.  
  5159.     /**
  5160.      * This section handles the loading of external dependencies (styles and i18n).
  5161.      * It waits for custom events dispatched by the companion scripts before initializing the main script.
  5162.      * A timeout is included as a fallback in case the events do not fire.
  5163.      */
  5164.     if (document.getElementById(IDS.SIDEBAR)) { console.warn(`${LOG_PREFIX} Sidebar with ID "${IDS.SIDEBAR}" already exists. Skipping initialization.`); return; }
  5165.     const dependenciesReady = { styles: false, i18n: false }; let initializationAttempted = false; let timeoutFallback;
  5166.     function checkDependenciesAndInitialize() { if (initializationAttempted) return; if (dependenciesReady.styles && dependenciesReady.i18n) { console.log(`${LOG_PREFIX} All dependencies ready. Initializing script.`); clearTimeout(timeoutFallback); initializationAttempted = true; if (document.readyState === 'complete' || document.readyState === 'interactive' || document.readyState === 'loaded') { initializeScript(); } else { window.addEventListener('DOMContentLoaded', initializeScript, { once: true }); } } }
  5167.     document.addEventListener('gscsStylesLoaded', function stylesLoadedHandler() { console.log(`${LOG_PREFIX} Event "gscsStylesLoaded" received.`); dependenciesReady.styles = true; checkDependenciesAndInitialize(); }, { once: true });
  5168.     document.addEventListener('gscsi18nLoaded', function i18nLoadedHandler() { console.log(`${LOG_PREFIX} Event "gscsi18nLoaded" received.`); dependenciesReady.i18n = true; checkDependenciesAndInitialize(); }, { once: true });
  5169.     timeoutFallback = setTimeout(() => { if (initializationAttempted) return; console.log(`${LOG_PREFIX} Fallback: Checking dependencies after timeout.`); if (typeof window.GSCS_Namespace !== 'undefined') { if (typeof window.GSCS_Namespace.stylesText === 'string' && window.GSCS_Namespace.stylesText.trim() !== '' && !dependenciesReady.styles) { console.log(`${LOG_PREFIX} Fallback: Styles found via namespace.`); dependenciesReady.styles = true; } if (typeof window.GSCS_Namespace.i18nPack === 'object' && Object.keys(window.GSCS_Namespace.i18nPack.translations || {}).length > 0 && !dependenciesReady.i18n) { console.log(`${LOG_PREFIX} Fallback: i18n pack found via namespace.`); dependenciesReady.i18n = true; } } if (dependenciesReady.styles && dependenciesReady.i18n) { checkDependenciesAndInitialize(); } else { console.error(`${LOG_PREFIX} Fallback: Dependencies still not fully loaded after timeout. Styles: ${dependenciesReady.styles}, i18n: ${dependenciesReady.i18n}.`); if (!initializationAttempted) { console.warn(`${LOG_PREFIX} Attempting to initialize with potentially incomplete dependencies due to fallback timeout.`); if (!dependenciesReady.styles) { console.warn(`${LOG_PREFIX} Styles dependency forced true in fallback.`); dependenciesReady.styles = true; } if (!dependenciesReady.i18n) { console.warn(`${LOG_PREFIX} i18n dependency forced true in fallback.`); dependenciesReady.i18n = true; } checkDependenciesAndInitialize(); } } }, 2000);
  5170.     if (document.readyState === 'complete' || document.readyState === 'interactive' || document.readyState === 'loaded') {
  5171.         if (typeof window.GSCS_Namespace !== 'undefined') {
  5172.             if (typeof window.GSCS_Namespace.stylesText === 'string' && window.GSCS_Namespace.stylesText.trim() !== '' && !dependenciesReady.styles) {
  5173.                 dependenciesReady.styles = true;
  5174.             }
  5175.             if (typeof window.GSCS_Namespace.i18nPack === 'object' && Object.keys(window.GSCS_Namespace.i18nPack.translations || {}).length > 0 && !dependenciesReady.i18n) {
  5176.                 dependenciesReady.i18n = true;
  5177.             }
  5178.         }
  5179.         if (dependenciesReady.styles && dependenciesReady.i18n && !initializationAttempted) {
  5180.             checkDependenciesAndInitialize();
  5181.         }
  5182.     }
  5183. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址