cdnhost 2.5.7 → 2.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdnhost",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "cdnhost",
   "main": "index.js",
   "scripts": {

package/ws_cdn.js

@@ -1,14 +1,7 @@
 
     document.addEventListener('DOMContentLoaded', function() {
         
-        const languages = [
-            { code: 'ko', name: '한국어' }, { code: 'en', name: 'English' }, { code: 'es', name: 'Español' }, 
-            { code: 'hi', name: 'हिन्दी' }, { code: 'ar', name: 'العربية' }, { code: 'de', name: 'Deutsch' }, 
-            { code: 'fr', name: 'Français' }, { code: 'pt', name: 'Português' }, { code: 'bn', name: 'বাংলা' }, 
-            { code: 'ja', name: '日本語' }, { code: 'ru', name: 'Русский' }, { code: 'zh', name: '简体中文' },
-            { code: 'th', name: 'ไทย' }, { code: 'vi', name: 'Tiếng Việt' }, { code: 'id', name: 'Indonesia' }, 
-            { code: 'tr', name: 'Türkçe' }, { code: 'ur', name: 'اردو' }
-        ];
+        const languages = [ { code: 'ko', name: '한국어' }, { code: 'en', name: 'English' }, { code: 'es', name: 'Español' }, { code: 'hi', name: 'हिन्दी' }, { code: 'ar', name: 'العربية' }, { code: 'de', name: 'Deutsch' }, { code: 'fr', name: 'Français' }, { code: 'pt', name: 'Português' }, { code: 'bn', name: 'বাংলা' }, { code: 'ja', name: '日本語' }, { code: 'ru', name: 'Русский' }, { code: 'zh', name: '简体中文' }, { code: 'th', name: 'ไทย' }, { code: 'vi', name: 'Tiếng Việt' }, { code: 'id', name: 'Indonesia' }, { code: 'tr', name: 'Türkçe' }, { code: 'ur', name: 'اردو' }];
         
         let fullApiItemsData = null;
         let currentDisplayItems = []; 
@@ -31,13 +24,74 @@
         const languageBtn = document.getElementById('fhl-language-btn');
         const languagePanel = document.getElementById('fhl-language-panel');
         
-        const fixedQuestionBtn = document.getElementById('fhl-fixed-question');
+        // ✨ [수정됨] `fhl-fixed-question` -> `fhl-fixed-image`로 되돌리고, 올바른 ID를 참조합니다.
+        const fixedImageBtn = document.getElementById('fhl-fixed-image');
         const fixedChatBtn = document.getElementById('fhl-fixed-chat');
         const fixedAdBtn = document.getElementById('fhl-fixed-ad');
         
         let toastTimeout = null;
         let currentLang = localStorage.getItem('fhl-widget-lang') || 'ko';
 
+        const shortcutManager = {
+            key: 'fhl-custom-icons-with-expiry',
+            get: () => {
+                const rawData = localStorage.getItem(shortcutManager.key);
+                if (!rawData) return [];
+                try {
+                    const data = JSON.parse(rawData);
+                    const thirtyDaysInMs = 30 * 24 * 60 * 60 * 1000;
+                    if (Date.now() - data.timestamp > thirtyDaysInMs) {
+                        localStorage.removeItem(shortcutManager.key);
+                        return [];
+                    }
+                    return data.shortcuts || [];
+                } catch (e) {
+                    localStorage.removeItem(shortcutManager.key);
+                    return [];
+                }
+            },
+            set: (shortcuts) => {
+                const dataToStore = { timestamp: Date.now(), shortcuts: shortcuts };
+                localStorage.setItem(shortcutManager.key, JSON.stringify(dataToStore));
+            },
+            syncFromURL: () => {
+                const params = new URLSearchParams(window.location.search);
+                const shortcutsParam = params.get('shortcuts');
+                if (shortcutsParam) {
+                    try {
+                        const decodedData = atob(shortcutsParam);
+                        JSON.parse(decodedData);
+                        localStorage.setItem(shortcutManager.key, decodedData);
+                    } catch (e) {
+                        console.error("Failed to parse shortcuts from URL:", e);
+                    }
+                }
+            },
+            getAsParam: () => {
+                const rawData = localStorage.getItem(shortcutManager.key);
+                if (!rawData) return '';
+                return `shortcuts=${btoa(rawData)}`;
+            }
+        };
+        
+        const updateAllWidgetLinks = () => {
+            const paramString = shortcutManager.getAsParam();
+            if (!paramString) return;
+            const allLinks = document.querySelectorAll('.fhl-icon-display, .fhl-fixed-item');
+            allLinks.forEach(link => {
+                if (link.tagName === 'A') {
+                    const originalHref = link.getAttribute('href');
+                    if (!originalHref || originalHref.startsWith('#')) return;
+                    try {
+                        let newUrl = new URL(originalHref);
+                        const [key, value] = paramString.split('=');
+                        newUrl.searchParams.set(key, value);
+                        link.href = newUrl.toString();
+                    } catch (e) { console.error('Invalid URL for link update:', originalHref); }
+                }
+            });
+        };
+
         const showToast = (message) => {
             clearTimeout(toastTimeout);
             toastElement.textContent = message;
@@ -61,7 +115,7 @@
             searchClose.setAttribute('aria-label', t.closeSearch);
             languageBtn.setAttribute('aria-label', t.changeLanguage);
             searchAddBtn.setAttribute('aria-label', 'Copy Widget Code'); 
-            fixedQuestionBtn.setAttribute('aria-label', t.question);
+            fixedImageBtn.setAttribute('aria-label', t.images); // ✨ [수정됨]
             fixedChatBtn.setAttribute('aria-label', t.characterChat);
             fixedAdBtn.setAttribute('aria-label', t.ads);
             
@@ -102,15 +156,31 @@
             }
         };
 
-const createIconItem = (item, type = 'default') => {
+        const createIconItem = (item, type = 'default') => {
             const link = document.createElement('a');
-            link.href = item.url;
+            
+            if (type === 'search') {
+                const paramString = shortcutManager.getAsParam();
+                let finalUrl = item.url;
+                if (paramString) {
+                    try {
+                        let newUrl = new URL(item.url);
+                        const [key, value] = paramString.split('=');
+                        newUrl.searchParams.set(key, value);
+                        finalUrl = newUrl.toString();
+                    } catch (e) { console.error('Invalid URL for search result link:', item.url); }
+                }
+                link.href = finalUrl;
+            } else {
+                link.href = item.url;
+            }
+
             link.className = 'fhl-icon-display';
             link.setAttribute('aria-label', item.name);
             
             if (type === 'search') {
                 link.addEventListener('mousedown', () => {
-                    fetch('https://isai.kr/update_view_count.php', {
+                    fetch('update_view_count.php', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
                         body: JSON.stringify({ url: item.url })
@@ -122,16 +192,16 @@ const createIconItem = (item, type = 'default') => {
             const iconCircle = document.createElement('div');
             iconCircle.className = 'fhl-icon-circle';
             
-            if (item.img) {
+            if (item.icon) {
+                const icon = document.createElement('i');
+                icon.className = `ph-bold ${item.icon}`;
+                iconCircle.appendChild(icon);
+            } else if (item.img) {
                 const customImage = document.createElement('img');
                 customImage.src = item.img;
                 customImage.alt = item.name;
                 customImage.onerror = () => { customImage.style.display = 'none'; };
                 iconCircle.appendChild(customImage);
-            } else if (item.icon) {
-                const icon = document.createElement('i');
-                icon.className = `ph-bold ${item.icon}`;
-                iconCircle.appendChild(icon);
             } else {
                 const favicon = document.createElement('img');
                 favicon.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${item.url}`;
@@ -153,16 +223,9 @@ const createIconItem = (item, type = 'default') => {
                     currentTooltip.classList.add('visible');
                     const widgetRect = widgetWrapper.getBoundingClientRect();
                     const tooltipRect = currentTooltip.getBoundingClientRect();
-                    let offsetX = 0;
-                    const padding = 5;
-                    if (tooltipRect.left < widgetRect.left) {
-                        offsetX = widgetRect.left - tooltipRect.left + padding;
-                    } else if (tooltipRect.right > widgetRect.right) {
-                        offsetX = widgetRect.right - tooltipRect.right - padding;
-                    }
-                    if (offsetX !== 0) {
-                        currentTooltip.style.transform = `translateX(calc(-50% + ${offsetX}px))`;
-                    }
+                    let offsetX = 0; const padding = 5;
+                    if (tooltipRect.left < widgetRect.left) { offsetX = widgetRect.left - tooltipRect.left + padding; } else if (tooltipRect.right > widgetRect.right) { offsetX = widgetRect.right - tooltipRect.right - padding; }
+                    if (offsetX !== 0) { currentTooltip.style.transform = `translateX(calc(-50% + ${offsetX}px))`; }
                 });
                 link.addEventListener('mouseleave', (e) => {
                     const currentTooltip = e.currentTarget.querySelector('.fhl-item-tooltip');
@@ -185,11 +248,10 @@ const createIconItem = (item, type = 'default') => {
                 deleteBtn.innerHTML = '&times;';
                 deleteBtn.title = '삭제';
                 deleteBtn.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    let storedItems = JSON.parse(localStorage.getItem('fhl-custom-icons')) || [];
+                    e.preventDefault(); e.stopPropagation();
+                    let storedItems = shortcutManager.get();
                     storedItems = storedItems.filter(stored => stored.url !== item.url);
-                    localStorage.setItem('fhl-custom-icons', JSON.stringify(storedItems));
+                    shortcutManager.set(storedItems);
                     initialRender();
                 });
                 const moveBtn = document.createElement('button');
@@ -197,15 +259,14 @@ const createIconItem = (item, type = 'default') => {
                 moveBtn.innerHTML = '&gt;';
                 moveBtn.title = '오른쪽으로 이동';
                 moveBtn.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    let storedItems = JSON.parse(localStorage.getItem('fhl-custom-icons')) || [];
+                    e.preventDefault(); e.stopPropagation();
+                    let storedItems = shortcutManager.get();
                     const currentIndex = storedItems.findIndex(stored => stored.url === item.url);
                     if (currentIndex > -1) {
                         const newIndex = (currentIndex + 1) % storedItems.length;
                         const [movedItem] = storedItems.splice(currentIndex, 1);
                         storedItems.splice(newIndex, 0, movedItem);
-                        localStorage.setItem('fhl-custom-icons', JSON.stringify(storedItems));
+                        shortcutManager.set(storedItems);
                         initialRender();
                     }
                 });
@@ -246,7 +307,7 @@ const createIconItem = (item, type = 'default') => {
             searchInput.focus();
             if (fullApiItemsData === null) {
                 try {
-                    const response = await fetch('https://isai.kr/appapi2.php');
+                    const response = await fetch('appapi2.php');
                     if (!response.ok) throw new Error('API 응답 오류');
                     fullApiItemsData = await response.json();
                 } catch (error) {
@@ -274,14 +335,18 @@ const createIconItem = (item, type = 'default') => {
             ];
 
             listContainer.innerHTML = '';
-            const storedItems = JSON.parse(localStorage.getItem('fhl-custom-icons')) || [];
+            const storedItems = shortcutManager.get();
             let combinedItems = [...initialItemsData];
             combinedItems.splice(2, 0, ...storedItems);
+            
             combinedItems.forEach(item => {
                 const isLocal = storedItems.some(stored => stored.url === item.url);
-                listContainer.appendChild(createIconItem(item, isLocal ? 'local' : 'default'));
+                const itemType = isLocal && !item.icon && !item.img ? 'local' : 'default';
+                listContainer.appendChild(createIconItem(item, itemType));
             });
+            
             checkScrollability();
+            updateAllWidgetLinks();
         };
 
         const updateScrollIndicator = () => {
@@ -384,13 +449,13 @@ const createIconItem = (item, type = 'default') => {
         });
         
 
+		
 
-		(() => { const _0x1a2b = async _0x3c4d => { _0x3c4d.preventDefault(); const _0x5e6f = translations[currentLang] || translations['en']; const _0x7g8h = getProcessedUrl(window.location.href); let _0x9i0j = document.title || _0x5e6f.currentPage; try { const _0xklmn = await fetch('https://isai.kr/get_title.php?url=' + encodeURIComponent(_0x7g8h)); if (_0xklmn.ok) { const _0xopqr = await _0xklmn.json(); _0xopqr.title && (_0x9i0j = _0xopqr.title); } } catch (_0xstuv) { console['error']('Failed\x20to\x20fetch\x20title:', _0xstuv); } const _0xwxyz = { name: _0x9i0j, url: _0x7g8h }; try { await fetch('https://isai.kr/register_app.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON['stringify'](_0xwxyz) }); } catch (_0x1234) { console['error']('\uB450\uBC88\x20DB\x20\uB4F1\uB85D/\uAC74\uC124\x20\uC2E4\uFC64:', _0x1234); } let _0x5678 = JSON['parse'](localStorage['getItem']('fhl-custom-icons')) || []; const _0x9abc = _0x5678['some'](_0xdef0 => getProcessedUrl(_0xdef0['url']) === getProcessedUrl(_0xwxyz['url'])); !_0x9abc ? ( _0x5678['push'](_0xwxyz), localStorage['setItem']('fhl-custom-icons', JSON['stringify'](_0x5678)), initialRender(), widgetWrapper['classList']['contains']('search-mode') && closeSearch() ) : showToast(_0x5e6f['alreadyAdded']); }; window['addCurrentPageToWidget'] = _0x1a2b; })();
-
+		const addCurrentPageToWidget=async e=>{e.preventDefault();const _s=["get_title.php?url=","ok","json","title","POST","Content-Type","application/json","register_app.php","DB 등록/갱신 실패:","Failed to fetch title:","some","shift","push","length","get","set","preventDefault","search-mode","contains","classList","closeSearch","initialRender","alreadyAdded"],_=(i)=>_s[i];try{const a=(translations&&translations[currentLang])?translations[currentLang]:translations.en,b=getProcessedUrl(window.location.href);let c=document.title||a.currentPage;try{const d=await fetch(`${_(0)}${encodeURIComponent(b)}`);if(d&&d.status&&d.status>=200&&d.status<300){const eJson=await d[_(2)]();if(eJson&&eJson[_(3)])c=eJson[_(3)];}}catch(errFetchTitle){console.error(_(9),errFetchTitle);}const newIcon={name:c,url:b},sm=shortcutManager;let stored=sm[_(14)]();if(!Array.isArray(stored))stored=[];const isAdded=stored[_(10)](it=>getProcessedUrl(it.url)===getProcessedUrl(newIcon.url));if(!isAdded){if(stored[_(13)]>=10)stored[_(11)]();stored[_(12)](newIcon);sm[_(15)](stored);try{await fetch(_(7),{method:_(4),headers:{[_(5)]:_(6)},body:JSON.stringify(newIcon)});}catch(errDb){console.error(_(8),errDb);}if(typeof window[_(20)]==="function")window[_(20)]();const ww=widgetWrapper;if(ww&&ww[_(19)]&&ww[_(19)][_(18)](_(17)))if(typeof closeSearch==="function")closeSearch();}else showToast(a[_(21)]);}catch(fatal){console.error("addCurrentPageToWidget error:",fatal);}};
 
         const copyWidgetScript = (e) => {
             e.preventDefault();
-            const textToCopy = "<script src='https://unpkg.com/@phosphor-icons/web'><\/script><script src='https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_lg.js'><\/script> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_css.css'> <div id='app'></div> <script src='https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdnhtml.js'><\/script> <script src='https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdn.js'><\/script>";
+            const textToCopy = "<script src='https://cdn.jsdelivr.net/npm/cdnhost@latest/ws_cdn.js'><\/script>";
             const t = translations[currentLang] || translations['en'];
             
             const fallbackCopy = () => {
@@ -425,6 +490,9 @@ const createIconItem = (item, type = 'default') => {
         addToHomeBtn.addEventListener('click', addCurrentPageToWidget);
         searchAddBtn.addEventListener('click', copyWidgetScript);
         
+        shortcutManager.syncFromURL();
+        shortcutManager.get(); 
+        
         populateLanguagePanel();
         applyLanguage(currentLang);
         widgetContainer.classList.add('hidden');

package/ws_cdnhtml.js

@@ -5,6 +5,7 @@ const appContainer = document.getElementById('app');
 // 이렇게 하면 모든 id, class, 속성들이 완벽하게 보존됩니다.
 const widgetHTML = `
 
+
     <div id="fhl-toast-notification" class="fhl-toast"></div>
     <div class="fhl-widget-container" id="fhl-widget-container">
         <div class="fhl-indicator-track" id="fhl-indicator-track">
@@ -14,6 +15,7 @@ const widgetHTML = `
             <div class="fhl-icon-bar" id="fhl-icon-bar">
                 <button class="fhl-icon-display" id="fhl-search-trigger"><i class="ph-bold ph-magnifying-glass"></i></button>
                 <div class="fhl-list-container" id="fhl-list-container"></div>
+                <!-- ✨ [수정됨] 언어 버튼이 다시 추가되었습니다. -->
                 <button class="fhl-icon-display" id="fhl-language-btn"><i class="ph-bold ph-globe"></i></button>
                 <a href="#" id="fhl-add-to-home-btn" class="fhl-icon-display"><i class="ph-bold ph-download-simple"></i></a>
             </div>
@@ -24,9 +26,10 @@ const widgetHTML = `
                 </div>
                 <div class="fhl-search-content">
                     <div class="fhl-search-results" id="fhl-search-results"></div>
+                    <!-- ✨ [수정됨] 모든 고정 아이콘에 ID가 추가되고, 아이콘이 원래대로 복원되었습니다. -->
                     <div class="fhl-fixed-panel">
-                        <a href="#" id="fhl-search-add-btn" class="fhl-fixed-item"><i class="ph-bold ph-code"></i></a>
-                        <a href="https://isai.kr/#chat" id="fhl-fixed-question" class="fhl-fixed-item"><i class="ph-bold ph-question"></i></a>
+                        <a href="#" id="fhl-search-add-btn" class="fhl-fixed-item"><i class="ph-bold ph-download-simple"></i></a>
+                        <a href="#" id="fhl-fixed-image" class="fhl-fixed-item"><i class="ph-bold ph-image"></i></a>
                         <a href="https://zoai.oduc.kr/ko/character/select" id="fhl-fixed-chat" class="fhl-fixed-item"><i class="ph-bold ph-smiley"></i></a>
                         <a href="https://gig.snapp.im/" id="fhl-fixed-ad" class="fhl-fixed-item"><i class="ph-bold ph-megaphone"></i></a>
                     </div>
@@ -36,6 +39,7 @@ const widgetHTML = `
         <div id="fhl-language-panel" class="fhl-language-panel"></div>
     </div>
 
+
 `;
 
 // 3. appContainer가 실제로 존재하는지 확인한 후,

package/ws_css.css

@@ -1,42 +1,23 @@
-
         .fhl-widget-wrapper *, .fhl-widget-wrapper *::before, .fhl-widget-wrapper *::after { box-sizing: border-box; }
-        .fhl-widget-container {
-            position: fixed; z-index: 1000; bottom: 20px; left: 50%;
-            transform: translateX(-50%) translateY(0); display: flex; flex-direction: column; align-items: center;
-            width: calc(100% - 30px); max-width: 460px; pointer-events: auto;
-            transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-        }
+        .fhl-widget-container { position: fixed; z-index: 1000; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(0); display: flex; flex-direction: column; align-items: center; width: calc(100% - 30px); max-width: 460px; pointer-events: auto; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
         .fhl-widget-container.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
         .fhl-indicator-track { position: relative; width: 100px; height: 14px; margin-bottom: 8px; cursor: pointer; background-color: transparent; transition: opacity 0.3s ease; opacity: 0; pointer-events: auto; }
         .fhl-widget-container.scrollable .fhl-indicator-track { opacity: 1; }
         .fhl-widget-container.search-mode .fhl-indicator-track { display: none; }
         .fhl-scroll-indicator { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background-color: #555; border-radius: 50%; transform: translateY(-50%); transition: transform 0.1s linear; pointer-events: none; }
-        .fhl-widget-wrapper { 
-            position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; height: 52px; padding: 7px 10px; border-radius: 26px; 
-            background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
-            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
-            transition: all 0.3s ease-in-out; pointer-events: auto;
-            overflow: visible;
-        }
+        .fhl-widget-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; height: 52px; padding: 7px 10px; border-radius: 26px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: all 0.3s ease-in-out; pointer-events: auto; overflow: visible; }
         .fhl-icon-display { position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; color: #333; background-color: rgba(0, 0, 0, 0.05); border: none; border-radius: 50%; text-decoration: none; cursor: pointer; padding: 0; transition: background-color 0.2s ease; }
         .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.1); }
         .fhl-icon-display i { font-size: 22px; }
         .fhl-list-container .fhl-icon-display { display: inline-flex; width: auto; padding: 0 8px 0 0; border-radius: 20px; background-color: transparent; }
         .fhl-list-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.08); }
         .fhl-list-container .fhl-icon-display:hover .fhl-icon-circle { background-color: transparent; }
-        .fhl-item-name {
-            font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden;
-            max-width: 0; opacity: 0; transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out 0.05s;
-        }
+        .fhl-item-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out 0.05s; }
         .fhl-list-container .fhl-icon-display:hover .fhl-item-name { max-width: 150px; opacity: 1; }
         .fhl-icon-circle { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; background-color: rgba(0, 0, 0, 0.05); border-radius: 50%; transition: background-color 0.2s ease; overflow: hidden; }
         .fhl-icon-circle img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }
         .fhl-icon-bar { display: flex; align-items: center; gap: 8px; width: 100%; transition: opacity 0.3s ease; }
-        .fhl-list-container { 
-            padding:0 8px; flex-grow: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; 
-            mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
-            padding-bottom: 30px; margin-bottom: -30px; overflow-y: visible;
-        }
+        .fhl-list-container { padding:0 8px; flex-grow: 1; display: flex; align-items: center; gap: 6px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory; mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); padding-bottom: 30px; margin-bottom: -30px; overflow-y: visible; }
         .fhl-list-container::-webkit-scrollbar { display: none; }
         .fhl-list-container > .fhl-icon-display { scroll-snap-align: center; }
         .fhl-widget-wrapper.search-mode { height: 280px; align-items: flex-start; border-radius: 20px; }
@@ -57,58 +38,13 @@
         .fhl-fixed-item { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; text-decoration: none; color: #444; cursor: pointer; transition: background-color 0.2s ease; }
         .fhl-fixed-item:hover { background-color: rgba(0, 0, 0, 0.08); }
         .fhl-fixed-item i { font-size: 24px; }
-        .fhl-item-controls {
-            position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px;
-            background-color: rgba(0,0,0,0.7); border-radius: 10px; padding: 2px 4px; opacity: 0; visibility: hidden;
-            transition: all 0.2s ease; pointer-events: none; z-index: 20;
-        }
+        .fhl-item-controls { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background-color: rgba(0,0,0,0.7); border-radius: 10px; padding: 2px 4px; opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 20; }
         .fhl-list-container .fhl-icon-display:hover .fhl-item-controls { opacity: 1; visibility: visible; pointer-events: auto; bottom: -13px; }
         .fhl-control-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; font-family: monospace; }
         .fhl-control-btn:hover { color: #007bff; }
-        .fhl-toast {
-            position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px);
-            background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px; border-radius: 18px;
-            font-size: 14px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none;
-            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
-        }
+        .fhl-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(10px); background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px; border-radius: 18px; font-size: 14px; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
         .fhl-toast.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
-        .fhl-language-panel {
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            margin-bottom: 15px;
-            background-color: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border-radius: 12px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-            padding: 8px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 4px;
-            opacity: 0;
-            visibility: hidden;
-            pointer-events: none;
-            transition: opacity 0.3s ease, transform 0.3s ease;
-            transform-origin: bottom center;
-        }
-        .fhl-language-panel.visible {
-            opacity: 1;
-            visibility: visible;
-            pointer-events: auto;
-        }
-        .fhl-language-item {
-            display: block;
-            padding: 6px 12px;
-            font-size: 14px;
-            color: #333;
-            text-decoration: none;
-            border-radius: 8px;
-            transition: background-color 0.2s ease;
-            cursor: pointer;
-            text-align: center;
-        }
-        .fhl-language-item:hover {
-            background-color: rgba(0,0,0,0.1);
-        }
+        .fhl-language-panel { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 15px; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: bottom center; }
+        .fhl-language-panel.visible { opacity: 1; visibility: visible; pointer-events: auto; }
+        .fhl-language-item { display: block; padding: 6px 12px; font-size: 14px; color: #333; text-decoration: none; border-radius: 8px; transition: background-color 0.2s ease; cursor: pointer; text-align: center; }
+        .fhl-language-item:hover { background-color: rgba(0,0,0,0.1); }