/* =========================================
   LELH GENERAL SETTINGS PANEL
   ========================================= */

.lelh-general-settings-panel { 
    position: fixed; 
    
    /* [CẬP NHẬT] Căn giữa màn hình */
    top: 50%; 
    left: 60px; /* Cách lề trái 60px để không đè lên nút bấm */
    right: auto; 
    bottom: auto;
    margin-top: 0;
    
    width: 320px; max-width: calc(100vw - 80px); 
    max-height: 420px; 
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    background: #ffffff; border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); 
    display: flex; flex-direction: column; z-index: 9999; 
    
    /* [Trạng thái ẨN] */
    opacity: 0; visibility: hidden; 
    /* Dịch xuống một chút (-45%) và thu nhỏ để tạo hiệu ứng trồi lên */
    transform: translateY(-45%) scale(0.95);
    
    user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

/* [Trạng thái HIỆN] */
.lelh-general-settings-panel.is-open { 
    opacity: 1; visibility: visible; 
    /* Căn giữa hoàn hảo theo chiều dọc */
    transform: translateY(-50%) scale(1); 
}

/* HEADER */
.lelh-gs-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f3f4f6; background: #fff; border-radius: 12px 12px 0 0; position: relative; z-index: 20; flex-shrink: 0; }
.lelh-general-settings-panel.is-saving .lelh-gs-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--tv-accent, #4A5D23) 50%, transparent 100%); background-size: 200% 100%; animation: lelhLoadingScan 1.5s infinite linear; z-index: 10; pointer-events: none; }
.lelh-gs-header span { font-weight: 700; font-size: 14px; color: #111827; }
.lelh-gs-close-btn { background: transparent; border: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9ca3af; transition: all 0.2s; padding: 0; }
.lelh-gs-close-btn svg { width: 18px; height: 18px; stroke-width: 2.5; }
.lelh-gs-close-btn:hover { background-color: var(--tv-accent, #4A5D23); color: #ffffff; transform: rotate(90deg); }

/* TABS */
.lelh-gs-tabs { display: flex; background: #f9fafb; padding: 4px 4px 0; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.lelh-gs-tab-btn { flex: 1; text-align: center; padding: 8px 0; font-size: 12px; font-weight: 600; color: #6b7280; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.lelh-gs-tab-btn:hover { color: var(--tv-accent, #4A5D23); background: rgba(0,0,0,0.02); }
.lelh-gs-tab-btn.active { color: var(--tv-accent, #4A5D23); border-bottom-color: var(--tv-accent, #4A5D23); background: #ffffff; border-radius: 6px 6px 0 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.02); }

/* BODY & SCROLL */
.lelh-gs-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; background: #fff; border-radius: 0 0 12px 12px; min-height: 100px; position: relative; z-index: 10; }
.lelh-gs-body::-webkit-scrollbar { width: 4px; }
.lelh-gs-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
.lelh-gs-tab-pane { display: none; padding: 12px; animation: fadeInSmooth 0.3s ease-in-out; }
.lelh-gs-tab-pane.active { display: block; }

/* STANDARD ROW */
.lelh-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px; border-bottom: 1px dashed #f0f0f0; gap: 10px; cursor: pointer; transition: background-color 0.1s; border-radius: 6px; position: relative; }
.lelh-toggle-row:hover { background-color: #f9fafb; }
.lelh-toggle-row:last-child { border-bottom: none; }

/* CHILD ROW */
.lelh-toggle-row.lelh-is-child { margin-left: 24px; padding-left: 8px; background-color: rgba(249, 250, 251, 0.5); position: relative; overflow: visible; border-left: 1px solid transparent; width: auto; }
.lelh-toggle-row.lelh-is-child::before { content: "↳"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 16px; font-weight: bold; pointer-events: none; line-height: 1; }

.lelh-toggle-row.lelh-disabled { opacity: 0.6; pointer-events: none; }
.lelh-toggle-row.lelh-is-overridden { opacity: 1; pointer-events: auto; cursor: not-allowed; background: #f9fafb; }
.lelh-toggle-row.lelh-is-overridden .lelh-row-label { color: #9ca3af; }
.lelh-toggle-row.lelh-is-overridden .lelh-control-wrapper { opacity: 0.5; pointer-events: none; }
.lelh-toggle-row.lelh-is-overridden .lelh-info-icon { opacity: 1; pointer-events: auto; cursor: help; }

/* LABELS & CONTROLS */
.lelh-row-label { font-size: 13px; color: #374151; font-weight: 500; flex: 1; display: flex; align-items: center; }
.lelh-control-wrapper { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }

/* ICON INFO */
.lelh-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; background: #e5e7eb; color: #6b7280; border-radius: 50%; font-size: 9px; font-weight: 700; font-family: serif; margin-left: 5px; cursor: help; flex-shrink: 0; position: static; }
.lelh-info-icon::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; background: #1f2937; color: #fff; font-family: sans-serif; font-size: 11px; line-height: 1.4; padding: 8px 12px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 99999; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s; white-space: normal; text-align: center; margin-bottom: 8px; }
.lelh-info-icon:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lelh-info-icon::before { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; margin-bottom: 3px; border-width: 5px; border-style: solid; border-color: #1f2937 transparent transparent transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s; pointer-events: none; z-index: 100000; }
.lelh-info-icon:hover::before { opacity: 1; visibility: visible; }

/* COMPONENTS */
.lelh-switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; margin: 0; }
.lelh-switch input { opacity: 0; width: 0; height: 0; }
.lelh-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: .4s; border-radius: 20px; }
.lelh-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
input:checked + .lelh-slider { background-color: var(--tv-accent, #4A5D23); }
input:checked + .lelh-slider:before { transform: translateX(14px); }

.lelh-gs-slider { width: 130px; height: 24px; display: flex; align-items: center; position: relative; cursor: pointer; touch-action: none; margin-right: 0; }
.lelh-gs-slider.disabled { opacity: 0.6; pointer-events: none; }
.lelh-gs-slider-track { width: 100%; height: 4px; background: #e5e7eb; border-radius: 2px; position: relative; }
.lelh-gs-slider-progress { position: absolute; left: 0; top: 0; bottom: 0; background: #bef264; border-radius: 2px; pointer-events: none; z-index: 1; }
.lelh-gs-slider-tick { position: absolute; width: 4px; height: 4px; background: #9ca3af; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.lelh-gs-slider-tick.is-active { background: #15803d; z-index: 2; transform: translate(-50%, -50%) scale(1.2); }
.lelh-gs-slider-thumb { position: absolute; width: 16px; height: 16px; background: #ffffff; border: 2px solid #bef264; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 3; transition: left 0.1s, transform 0.1s; }
.lelh-gs-slider:hover .lelh-gs-slider-thumb, .lelh-gs-slider.is-dragging .lelh-gs-slider-thumb { transform: translate(-50%, -50%) scale(1.15); }
.lelh-gs-slider.is-dragging .lelh-gs-slider-thumb { transition: none; }
.lelh-gs-slider-tooltip { position: absolute; bottom: 150%; left: 50%; transform: translateX(var(--tooltip-shift, -50%)) translateY(5px); background-color: #1f2937; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s, transform 0.1s; box-shadow: 0 2px 5px rgba(0,0,0,0.15); z-index: 10000; }
.lelh-gs-slider-tooltip::after { content: ''; position: absolute; top: 100%; left: var(--arrow-pos, 50%); margin-left: -4px; border-width: 4px; border-style: solid; border-color: #1f2937 transparent transparent transparent; transition: left 0.1s; }
.lelh-gs-slider:hover .lelh-gs-slider-tooltip, .lelh-gs-slider.is-dragging .lelh-gs-slider-tooltip { opacity: 1; visibility: visible; transform: translateX(var(--tooltip-shift, -50%)) translateY(0); }
.lelh-select { padding: 4px 24px 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #374151; outline: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 4px center/16px; appearance: none; }

.lelh-shortcuts-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.lelh-shortcuts-grid .lelh-toggle-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; border: 1px solid #f3f4f6; border-radius: 6px; background: #fff; padding: 6px 8px; gap: 8px; transition: border-color 0.2s; }
.lelh-shortcuts-grid .lelh-toggle-row:hover { border-color: #d1d5db; background: #f9fafb; }
.lelh-shortcuts-grid .lelh-toggle-row.lelh-is-child { border-left: 2px solid #e5e7eb; }
.lelh-shortcuts-grid .lelh-row-label { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; font-size: 13px; line-height: 1.4; color: #374151; }
.lelh-key-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; padding: 0 4px; background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 3px; font-family: monospace; font-size: 11px; font-weight: 700; color: #475569; line-height: 1; white-space: nowrap; }
.lelh-key-badge svg { width: 12px; height: 12px; display: block; stroke-width: 2.5; }
.lelh-key-plus { margin: 0 1px; color: #94a3b8; font-size: 10px; }
.lelh-key-divider { margin: 0 4px; color: #cbd5e1; font-weight: 300; }
.lelh-shortcuts-grid .lelh-info-icon { margin-left: 6px; background: transparent; border: 1px solid #e2e8f0; color: #94a3b8; }

/* FLOATING BUTTONS */
.lelh-floating-btn,
.lelh-sidebar-toggle-btn { 
    position: fixed; left: 0; right: auto; 
    top: 50% !important; bottom: auto !important; 
    width: 42px; height: 42px; 
    border-radius: 0 8px 8px 0; 
    background: #fff; color: #555; 
    border: 1px solid #e0e0e0; border-left: none; 
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1); 
    cursor: pointer; z-index: 190; 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; visibility: hidden; transform: translateX(-100%); 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, visibility 0.3s, width 0.2s ease, background 0.2s; 
    padding: 0 !important; outline: none; 
}
.lelh-floating-btn.is-visible,
.lelh-sidebar-toggle-btn.is-visible { opacity: 1; visibility: visible; transform: translateX(0); }
.lelh-floating-btn:hover,
.lelh-sidebar-toggle-btn:hover { width: 52px; background: #f9f9f9; color: var(--tv-accent, #4A5D23); box-shadow: 4px 2px 12px rgba(0,0,0,0.15); }
.lelh-floating-btn svg,
.lelh-sidebar-toggle-btn svg { width: 22px; height: 22px; stroke-width: 2; transition: transform 0.4s ease; }
.lelh-floating-btn:hover svg { transform: rotate(90deg); }

/* XẾP CHỒNG (TOC trên, GSP dưới) */
.lelh-sidebar-toggle-btn { margin-top: -24px; }
#lelh-general-settings-trigger.lelh-floating-btn { margin-top: 24px; }

/* Mobile Hiding */
body.showing-popup-drawer-from-right .lelh-floating-btn, body.showing-popup-drawer-from-left .lelh-floating-btn, body.kadence-drawer-open .lelh-floating-btn,
body.showing-popup-drawer-from-right .lelh-sidebar-toggle-btn, body.showing-popup-drawer-from-left .lelh-sidebar-toggle-btn, body.kadence-drawer-open .lelh-sidebar-toggle-btn { 
    opacity: 0 !important; visibility: hidden !important; transform: translateX(-100%) !important; 
}

@keyframes lelhLoadingScan { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeInSmooth { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }