.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; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; line-height: 1.5 !important; box-sizing: border-box !important; } #fhl-widget-container.hidden { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none} #fhl-widget-container i { color: #000; font-size: 22px !important; font-style: normal; } #fhl-widget-container span { font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; font-style: normal !important; line-height: normal !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; text-transform: none !important; color: #333333 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; outline: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; text-shadow: none !important; box-sizing: border-box !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; float: none !important; } #fhl-widget-container .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-widget-container .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-container .fhl-widget-wrapper { position: relative; display: flex; align-items: center; width: 100%; max-width: 440px; height: 52px; padding: 7px 10px; border-radius: 26px; background-color: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.4), 0 8px 32px 0 rgba(31, 38, 135, 0.1); transition: all 0.3s ease-in-out; pointer-events: auto; overflow: visible; } #fhl-widget-container .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; margin: 0 3px} #fhl-widget-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.1)} #fhl-widget-container .fhl-list-container .fhl-icon-display { display: inline-flex; width: auto; padding: 0 8px 0 0; border-radius: 20px; background-color: transparent} #fhl-widget-container .fhl-list-container .fhl-icon-display:hover { background-color: rgba(0, 0, 0, 0.08)} #fhl-widget-container .fhl-list-container .fhl-icon-display:hover .fhl-icon-circle { background-color: transparent} #fhl-widget-container .fhl-item-name { max-width: 0; opacity: 0; transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out 0.05s; white-space: nowrap; overflow: hidden; } #fhl-widget-container .fhl-list-container .fhl-icon-display:hover .fhl-item-name { max-width: 150px; opacity: 1} #fhl-widget-container .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-widget-container .fhl-icon-circle img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%} #fhl-widget-container .fhl-icon-bar { display: flex; align-items: center; gap: 8px; width: 100%; transition: opacity 0.3s ease} #fhl-widget-container .fhl-list-container { padding:0 8px; flex-grow: 1; display: flex; align-items: center; 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-widget-container .fhl-list-container::-webkit-scrollbar { display: none} #fhl-widget-container .fhl-list-container > .fhl-icon-display { scroll-snap-align: center} #fhl-widget-container .fhl-widget-wrapper.search-mode { height: 280px; align-items: flex-start; border-radius: 20px} #fhl-widget-container .fhl-widget-wrapper.search-mode .fhl-icon-bar { opacity: 0; pointer-events: none} #fhl-widget-container .fhl-search-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 10px 10px 10px 5px; opacity: 0; visibility: hidden; transition: opacity 0.3s 0.1s ease} #fhl-widget-container .fhl-widget-wrapper.search-mode .fhl-search-view { opacity: 1; visibility: visible} #fhl-widget-container .fhl-search-input-wrapper { display: flex; align-items: center; flex-shrink: 0; margin-bottom: 12px} #fhl-widget-container .fhl-search-input { flex-grow: 1; height: 38px; border: none; background: transparent; font-size: 16px; color: #111; padding: 0 10px; outline: none; transition: border-color 0.2s ease} #fhl-widget-container .fhl-search-input:focus { border-bottom-color: #007bff} #fhl-widget-container .fhl-search-content { display: flex; flex-grow: 1; overflow: hidden; border-radius:0 0} #fhl-widget-container .fhl-search-results { flex-grow: 1; width: 0; overflow-y: auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: 11px; padding:0 0 0 11px; -ms-overflow-style: none; scrollbar-width: none; } #fhl-widget-container .fhl-search-results::-webkit-scrollbar { display: none} #fhl-widget-container .fhl-search-results .fhl-icon-display { background-color: transparent} #fhl-widget-container .fhl-search-results .fhl-icon-display:hover .fhl-icon-circle { background-color: rgba(0, 0, 0, 0.1)} #fhl-widget-container .fhl-fixed-panel { flex-shrink: 0; width: 44px; height: 100%; margin-left: auto !important; display: flex; flex-direction: column; align-items: center; gap: 11px; border: none; background: transparent; } #fhl-widget-container .fhl-fixed-item { display: flex; align-items: center; justify-content: center; width: 38px !important; height: 38px !important; border-radius: 50% !important; background-color: rgba(0, 0, 0, 0.05) !important; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; } #fhl-widget-container .fhl-fixed-item:hover { background-color: rgba(0, 0, 0, 0.1) !important; } #fhl-widget-container .fhl-fixed-item i { color: #333 !important; font-size: 20px !important; } #fhl-widget-container .fhl-fixed-item img { width: 24px !important; height: 24px !important; border-radius: 50%; object-fit: cover; display: block; } #fhl-widget-container .fhl-item-tooltip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 3px 6px; border-radius: 15px; font-size: 11px !important; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease-in-out, bottom 0.2s ease-in-out; z-index: 10} #fhl-widget-container .fhl-item-tooltip.visible { opacity: 1; visibility: visible; bottom: -25px} #fhl-widget-container .fhl-item-controls { position: absolute; bottom: -20px; left: 20px; 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-widget-container .fhl-list-container.edit-mode .fhl-item-controls { opacity: 1; visibility: visible; pointer-events: auto; bottom: -13px} #fhl-widget-container .fhl-control-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; line-height: 1; padding: 2px; font-family: monospace} #fhl-widget-container .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.visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0)} #fhl-widget-container .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-widget-container .fhl-language-panel.visible { opacity: 1; visibility: visible; pointer-events: auto} #fhl-widget-container .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-widget-container .fhl-language-item:hover { background-color: rgba(0,0,0,0.1)}