/* =========================================
   LELH BOTTOM PANEL STYLES (FULL API SUPPORT)
   ========================================= */

.lelh-bottom-panel {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: #ffffff; border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1); display: none; flex-direction: column; padding: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.lelh-bottom-panel.is-visible { display: flex; animation: lelhSlideUp 0.3s ease-out; }
@keyframes lelhSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* TOP EDGE: Vùng dành riêng cho Seekbar của MP */
.lelh-panel-top-edge { 
    position: absolute; top: 0; left: 0; right: 0; 
    height: 4px; /* MP có thể override height này nếu cần */
    z-index: 100; 
    /* Core không set background, để MP tự set style cho bar */
}

/* LAYOUT CHÍNH */
.lelh-panel-body { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 10px 20px; min-height: 80px; gap: 20px; 
}

/* KHU VỰC TRÁI: Chứa Nút Play/Pause */
.lelh-panel-left { 
    flex: 0 0 auto; 
    display: flex; align-items: center; 
    margin-right: 15px;
} 

/* Placeholder cho Controls (Mặc định ẩn) */
.lelh-panel-sticky-placeholder {
    display: none; 
}

/* KHU VỰC GIỮA: Text */
.lelh-panel-center { 
    flex-grow: 1; text-align: center; 
    display: flex; flex-direction: column; justify-content: center; 
    min-height: 80px; box-sizing: border-box; padding: 4px 0; line-height: 1.3; 
}

/* KHU VỰC PHẢI: Close Button */
.lelh-panel-right { 
    flex: 0 0 50px; display: flex; justify-content: flex-end; align-items: flex-start; 
}

/* TEXT STYLES */
.lelh-panel-text-en { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0; padding-bottom: 2px; }
.lelh-panel-text-ipa { font-size: 15px; font-style: italic; color: #b45309; font-family: "Lucida Sans Unicode", "Arial Unicode MS", sans-serif; margin: 0; }
.lelh-panel-text-vi { font-size: 14px; color: #64748b; font-weight: 400; margin: 6px 0 0 0; }

/* CLOSE BUTTON */
.lelh-panel-close { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: transparent; border: 1px solid transparent; padding: 0; cursor: pointer; color: #98a2b3; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.lelh-panel-close svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.lelh-panel-close:hover { background-color: #f2f4f7; color: #d92d20; }

/* --- STICKY MODE --- */
/* Hiện controls bên trái */
.lelh-bottom-panel.is-sticky-mode .lelh-panel-sticky-placeholder { display: block; }
/* Ẩn nút Close */
.lelh-bottom-panel.is-sticky-mode .lelh-panel-close { display: none !important; }

/* ACTION BUTTONS */
.lelh-actions-wrapper { display: inline-block; vertical-align: middle; margin-left: 8px; white-space: nowrap; }
.lelh-action-btn { cursor: pointer; margin-left: 6px; opacity: 0.6; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; background: transparent; border: none; padding: 4px; border-radius: 4px; color: #333; }
.lelh-action-btn:hover { opacity: 1; background-color: #f1f5f9; color: #0f172a; transform: scale(1.1); }
.lelh-action-btn svg { width: 20px; height: 20px; display: block; }

/* CENTRAL FUNCTION AREA (dành cho các plugins khác) */
.lelh-bp-default-area {
    width: 100%;
}

.lelh-bp-custom-area {
    display: none; /* Mặc định ẩn, JS sẽ bật display: flex */
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}