/**
 * LM Call Button — Style Presets CSS
 * 15 presets, 5 groups
 * @version 3.4.0
 *
 * Architecture:
 *   .lm-call-buttons[data-style="slug"]         → desktop/unified
 *   @media(max-width:768px) [data-style-mobile]  → mobile override
 *
 * Groups:
 *   1. CLASSIC   (classic-vertical-dock, classic-contact-panel)
 *   2. MODERN    (modern-soft-floating, modern-card-stack, minimal-floating)
 *   3. PREMIUM   (premium-glass, luxury-gold-accent, premium-side-card)
 *   4. TECH      (tech-neon-dock, cyber-edge-panel, futuristic-glow)
 *   5. COMPACT   (compact-bottom-dock, minimal-mobile-strip, mobile-icon-grid, agent-list-panel)
 */

/* ============================================================
   SHARED PRESET VARIABLES
   ============================================================ */

.lm-call-buttons {
    --lm-preset-radius: 16px;
    --lm-preset-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    --lm-preset-panel-bg: #ffffff;
    --lm-preset-panel-radius: 16px;
    --lm-preset-panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    --lm-preset-item-radius: 12px;
    --lm-preset-item-gap: 6px;
    --lm-preset-item-padding: 12px 16px;
    --lm-preset-accent: var(--lm-button-color, #e91e63);
}


/* ============================================================
   1. CLASSIC GROUP
   ============================================================ */

/* -------------------------------------------------------
   1.1 CLASSIC VERTICAL DOCK
   Thanh dọc bên phải, item xếp dọc, nền trắng, viền nhẹ
   Panel type: dock
   ------------------------------------------------------- */

[data-style="classic-vertical-dock"] {
    --lm-preset-radius: 8px;
    --lm-preset-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --lm-preset-panel-radius: 10px;
    --lm-preset-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --lm-preset-item-radius: 8px;
    --lm-preset-item-gap: 4px;
    --lm-preset-item-padding: 10px 14px;
}

[data-style="classic-vertical-dock"] .lm-main-btn {
    border-radius: var(--lm-preset-radius);
    box-shadow: var(--lm-preset-shadow);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-style="classic-vertical-dock"] .lm-main-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

[data-style="classic-vertical-dock"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    border: 1px solid #e0e0e0;
    background: #fafafa;
    padding: 8px;
}

[data-style="classic-vertical-dock"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border: 1px solid #eee;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
}

[data-style="classic-vertical-dock"] .lm-btn-item:hover {
    transform: translateX(2px);
    border-color: var(--lm-preset-accent);
    background: #f8f9ff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

[data-style="classic-vertical-dock"] .lm-btn-item i {
    font-size: 16px;
}


/* -------------------------------------------------------
   1.2 CLASSIC CONTACT PANEL
   Panel mở ra cạnh nút, danh sách tên + SĐT + icon nhỏ
   Panel type: floating
   ------------------------------------------------------- */

[data-style="classic-contact-panel"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    --lm-preset-panel-radius: 12px;
    --lm-preset-panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    --lm-preset-item-radius: 6px;
    --lm-preset-item-gap: 2px;
    --lm-preset-item-padding: 14px 16px;
}

[data-style="classic-contact-panel"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="classic-contact-panel"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 6px;
    min-width: 220px;
}

[data-style="classic-contact-panel"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
    transition: background 0.2s ease;
}

[data-style="classic-contact-panel"] .lm-btn-item:last-child {
    border-bottom: none;
}

[data-style="classic-contact-panel"] .lm-btn-item:hover {
    transform: none;
    background: rgba(0, 0, 0, 0.03);
    box-shadow: none;
}


/* ============================================================
   2. MODERN GROUP
   ============================================================ */

/* -------------------------------------------------------
   2.1 MODERN SOFT FLOATING
   Bo góc mềm, shadow tinh tế, khoảng trắng rộng
   Panel type: floating
   ------------------------------------------------------- */

[data-style="modern-soft-floating"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    --lm-preset-panel-radius: 20px;
    --lm-preset-panel-shadow: 0 12px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --lm-preset-item-radius: 14px;
    --lm-preset-item-gap: 8px;
    --lm-preset-item-padding: 14px 18px;
}

[data-style="modern-soft-floating"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="modern-soft-floating"] .lm-main-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

[data-style="modern-soft-floating"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: #fff;
    padding: 14px;
}

[data-style="modern-soft-floating"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    font-weight: 500;
    font-size: 14px;
    gap: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-style="modern-soft-floating"] .lm-btn-item:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


/* -------------------------------------------------------
   2.2 MODERN CARD STACK
   Card riêng, icon + text + CTA rõ ràng
   Panel type: floating
   ------------------------------------------------------- */

[data-style="modern-card-stack"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    --lm-preset-panel-radius: 18px;
    --lm-preset-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --lm-preset-item-radius: 14px;
    --lm-preset-item-gap: 10px;
    --lm-preset-item-padding: 16px 18px;
}

[data-style="modern-card-stack"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="modern-card-stack"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: #f8f9fa;
    padding: 12px;
    min-width: 240px;
}

[data-style="modern-card-stack"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-weight: 600;
    font-size: 14px;
    gap: 14px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-style="modern-card-stack"] .lm-btn-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: transparent;
}

[data-style="modern-card-stack"] .lm-btn-item i {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
}


/* -------------------------------------------------------
   2.3 MINIMAL FLOATING
   Cực tối giản, shadow nhẹ, nhỏ gọn
   Panel type: floating
   ------------------------------------------------------- */

[data-style="minimal-floating"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --lm-preset-panel-radius: 12px;
    --lm-preset-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --lm-preset-item-radius: 8px;
    --lm-preset-item-gap: 4px;
    --lm-preset-item-padding: 10px 14px;
}

[data-style="minimal-floating"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="minimal-floating"] .lm-main-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

[data-style="minimal-floating"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: #fff;
    padding: 8px;
    min-width: 180px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-style="minimal-floating"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    font-weight: 400;
    font-size: 13px;
    gap: 10px;
}

[data-style="minimal-floating"] .lm-btn-item:hover {
    transform: translateX(3px);
    box-shadow: none;
    opacity: 0.85;
}

[data-style="minimal-floating"] .lm-btn-item i {
    font-size: 15px;
}


/* ============================================================
   3. PREMIUM GROUP
   ============================================================ */

/* -------------------------------------------------------
   3.1 PREMIUM GLASS PANEL
   Glassmorphism, nền blur, border sáng, shadow mềm
   Panel type: floating
   ------------------------------------------------------- */

[data-style="premium-glass"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15);
    --lm-preset-panel-radius: 20px;
    --lm-preset-item-radius: 12px;
    --lm-preset-item-gap: 8px;
    --lm-preset-item-padding: 14px 18px;
}

[data-style="premium-glass"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-style="premium-glass"] .lm-main-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2);
}

[data-style="premium-glass"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 14px;
}

[data-style="premium-glass"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-weight: 500;
    font-size: 14px;
    gap: 12px;
}

[data-style="premium-glass"] .lm-btn-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}


/* -------------------------------------------------------
   3.2 LUXURY GOLD ACCENT
   Điểm nhấn vàng champagne, sang trọng
   Panel type: floating
   ------------------------------------------------------- */

[data-style="luxury-gold-accent"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(212, 175, 55, 0.3);
    --lm-preset-panel-radius: 16px;
    --lm-preset-panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    --lm-preset-item-radius: 10px;
    --lm-preset-item-gap: 6px;
    --lm-preset-item-padding: 14px 18px;
}

[data-style="luxury-gold-accent"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
    border: 2px solid rgba(212, 175, 55, 0.4);
}

[data-style="luxury-gold-accent"] .lm-main-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(212, 175, 55, 0.5);
}

[data-style="luxury-gold-accent"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: linear-gradient(145deg, #fff 0%, #fdfbf5 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 12px;
    min-width: 230px;
}

[data-style="luxury-gold-accent"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border-left: 3px solid rgba(212, 175, 55, 0.5);
    font-weight: 500;
    font-size: 14px;
    gap: 12px;
}

[data-style="luxury-gold-accent"] .lm-btn-item:hover {
    transform: translateX(4px);
    border-left-color: #d4af37;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.15);
}

[data-style="luxury-gold-accent"] .lm-btn-item i {
    color: inherit;
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
}


/* -------------------------------------------------------
   3.3 PREMIUM SIDE CARD
   Card nổi bên cạnh, title "Liên hệ nhanh", grouped actions
   Panel type: side-card
   ------------------------------------------------------- */

[data-style="premium-side-card"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    --lm-preset-panel-radius: 18px;
    --lm-preset-item-radius: 12px;
    --lm-preset-item-gap: 8px;
    --lm-preset-item-padding: 14px 16px;
}

[data-style="premium-side-card"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="premium-side-card"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
    background: #fff;
    padding: 20px 16px;
    min-width: 250px;
}

[data-style="premium-side-card"] .lm-btn-list::before {
    content: 'Liên hệ nhanh';
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

[data-style="premium-side-card"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    font-weight: 500;
    font-size: 14px;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-style="premium-side-card"] .lm-btn-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}


/* ============================================================
   4. TECH GROUP
   ============================================================ */

/* -------------------------------------------------------
   4.1 TECH NEON DOCK
   Viền sáng neon, icon nổi, cảm giác digital
   Panel type: dock
   ------------------------------------------------------- */

[data-style="tech-neon-dock"] {
    --lm-preset-radius: 12px;
    --lm-preset-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 200, 255, 0.15);
    --lm-preset-panel-radius: 14px;
    --lm-preset-item-radius: 10px;
    --lm-preset-item-gap: 6px;
    --lm-preset-item-padding: 12px 16px;
}

[data-style="tech-neon-dock"] .lm-main-btn {
    border-radius: var(--lm-preset-radius);
    box-shadow: var(--lm-preset-shadow);
    border: 1px solid rgba(0, 200, 255, 0.3);
}

[data-style="tech-neon-dock"] .lm-main-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 200, 255, 0.25);
    border-color: rgba(0, 200, 255, 0.5);
}

[data-style="tech-neon-dock"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(0, 200, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 200, 255, 0.1);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

[data-style="tech-neon-dock"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border: 1px solid rgba(0, 200, 255, 0.12);
    font-weight: 500;
    font-size: 13px;
    gap: 12px;
    transition: all 0.2s ease;
}

[data-style="tech-neon-dock"] .lm-btn-item:hover {
    transform: translateX(4px);
    border-color: rgba(0, 200, 255, 0.35);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.1), inset 0 0 8px rgba(0, 200, 255, 0.05);
}


/* -------------------------------------------------------
   4.2 CYBER EDGE PANEL
   Panel góc cạnh, line phát sáng, futuristic
   Panel type: floating
   ------------------------------------------------------- */

[data-style="cyber-edge-panel"] {
    --lm-preset-radius: 4px;
    --lm-preset-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), 0 0 10px rgba(138, 43, 226, 0.15);
    --lm-preset-panel-radius: 4px;
    --lm-preset-item-radius: 2px;
    --lm-preset-item-gap: 4px;
    --lm-preset-item-padding: 12px 16px;
}

[data-style="cyber-edge-panel"] .lm-main-btn {
    border-radius: var(--lm-preset-radius);
    box-shadow: var(--lm-preset-shadow);
    border: 1px solid rgba(138, 43, 226, 0.3);
}

[data-style="cyber-edge-panel"] .lm-main-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(138, 43, 226, 0.25);
}

[data-style="cyber-edge-panel"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    background: linear-gradient(135deg, rgba(20, 20, 35, 0.96), rgba(30, 20, 50, 0.96));
    border: 1px solid rgba(138, 43, 226, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(138, 43, 226, 0.5);
    padding: 8px;
    position: relative;
}

[data-style="cyber-edge-panel"] .lm-btn-list::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 43, 226, 0.7), transparent);
}

[data-style="cyber-edge-panel"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border-left: 2px solid rgba(138, 43, 226, 0.4);
    font-weight: 500;
    font-size: 13px;
    gap: 12px;
    transition: all 0.15s ease;
}

[data-style="cyber-edge-panel"] .lm-btn-item:hover {
    transform: translateX(6px);
    border-left-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.15);
}


/* -------------------------------------------------------
   4.3 FUTURISTIC GLOW
   Button phát sáng mềm, panel sắc nét
   Panel type: floating
   ------------------------------------------------------- */

[data-style="futuristic-glow"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --lm-preset-panel-radius: 16px;
    --lm-preset-item-radius: 10px;
    --lm-preset-item-gap: 6px;
    --lm-preset-item-padding: 12px 16px;
}

[data-style="futuristic-glow"] .lm-main-btn {
    box-shadow: 0 0 15px color-mix(in srgb, var(--lm-button-color, #e91e63) 40%, transparent),
        0 4px 15px rgba(0, 0, 0, 0.2);
}

[data-style="futuristic-glow"] .lm-main-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px color-mix(in srgb, var(--lm-button-color, #e91e63) 55%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.25);
}

[data-style="futuristic-glow"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    background: rgba(10, 10, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 20px color-mix(in srgb, var(--lm-button-color, #e91e63) 10%, transparent);
    padding: 12px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

[data-style="futuristic-glow"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 500;
    font-size: 13px;
    gap: 12px;
}

[data-style="futuristic-glow"] .lm-btn-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px color-mix(in srgb, var(--lm-button-color, #e91e63) 15%, transparent);
}


/* ============================================================
   5. COMPACT / MOBILE GROUP
   ============================================================ */

/* -------------------------------------------------------
   5.1 COMPACT BOTTOM DOCK
   Dock ở đáy, icon hành động chính nằm ngang
   Panel type: dock
   ------------------------------------------------------- */

[data-style="compact-bottom-dock"],
.lm-call-buttons[data-style-mobile="compact-bottom-dock"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

[data-style="compact-bottom-dock"] .lm-main-btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-style="compact-bottom-dock"] .lm-btn-list {
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding: 16px 12px;
    min-width: 260px;
}

[data-style="compact-bottom-dock"] .lm-btn-item {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
}

[data-style="compact-bottom-dock"] .lm-btn-item:hover {
    transform: none;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
}

[data-style="compact-bottom-dock"] .lm-btn-item i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
}


/* -------------------------------------------------------
   5.2 MINIMAL MOBILE STRIP
   Dải mỏng đáy, ít chiếm diện tích
   Panel type: strip
   ------------------------------------------------------- */

[data-style="minimal-mobile-strip"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[data-style="minimal-mobile-strip"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
    width: 44px !important;
    height: 44px !important;
}

[data-style="minimal-mobile-strip"] .lm-main-btn i {
    font-size: 18px;
}

[data-style="minimal-mobile-strip"] .lm-btn-list {
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
    padding: 10px 8px;
    min-width: 200px;
}

[data-style="minimal-mobile-strip"] .lm-btn-item {
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
    gap: 8px;
}

[data-style="minimal-mobile-strip"] .lm-btn-item:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

[data-style="minimal-mobile-strip"] .lm-btn-item i {
    font-size: 14px;
}


/* -------------------------------------------------------
   5.3 MOBILE ICON GRID
   Popup lưới icon, dễ bấm, trực quan
   Panel type: grid
   ------------------------------------------------------- */

[data-style="mobile-icon-grid"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
}

[data-style="mobile-icon-grid"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="mobile-icon-grid"] .lm-btn-list {
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    padding: 20px;
    min-width: 240px;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

[data-style="mobile-icon-grid"] .lm-btn-list.active {
    display: grid !important;
}

[data-style="mobile-icon-grid"] .lm-btn-item {
    flex-direction: column;
    border-radius: 16px;
    padding: 16px 8px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 500;
    gap: 8px;
    text-align: center;
    white-space: normal;
    min-height: 80px;
    justify-content: center;
}

[data-style="mobile-icon-grid"] .lm-btn-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

[data-style="mobile-icon-grid"] .lm-btn-item i {
    font-size: 24px;
    width: auto;
}

[data-style="mobile-icon-grid"] .lm-btn-item span {
    white-space: normal;
    line-height: 1.3;
}


/* -------------------------------------------------------
   5.4 AGENT LIST PANEL
   Danh sách nhân viên, avatar + tên + SĐT
   Panel type: floating
   ------------------------------------------------------- */

[data-style="agent-list-panel"] {
    --lm-preset-radius: 50%;
    --lm-preset-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    --lm-preset-panel-radius: 18px;
    --lm-preset-panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    --lm-preset-item-radius: 14px;
    --lm-preset-item-gap: 8px;
    --lm-preset-item-padding: 14px 16px;
}

[data-style="agent-list-panel"] .lm-main-btn {
    box-shadow: var(--lm-preset-shadow);
}

[data-style="agent-list-panel"] .lm-btn-list {
    border-radius: var(--lm-preset-panel-radius);
    box-shadow: var(--lm-preset-panel-shadow);
    background: #fff;
    padding: 16px;
    min-width: 260px;
}

[data-style="agent-list-panel"] .lm-btn-list::before {
    content: 'Nhân viên hỗ trợ';
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

[data-style="agent-list-panel"] .lm-btn-item {
    border-radius: var(--lm-preset-item-radius);
    padding: var(--lm-preset-item-padding);
    margin-bottom: var(--lm-preset-item-gap);
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
}

[data-style="agent-list-panel"] .lm-btn-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-style="agent-list-panel"] .lm-btn-item i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    font-size: 16px;
    flex-shrink: 0;
}


/* ============================================================
   MOBILE OVERRIDES (split mode)
   When data-style-mobile is set & viewport <= 768px,
   mobile style takes precedence
   ============================================================ */

@media (max-width: 768px) {

    /* Mobile presets override desktop styles */
    .lm-call-buttons[data-style-mobile="compact-bottom-dock"] .lm-main-btn {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .lm-call-buttons[data-style-mobile="compact-bottom-dock"] .lm-btn-list {
        border-radius: 20px 20px 0 0;
        background: #fff;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
        padding: 16px 12px;
    }

    .lm-call-buttons[data-style-mobile="compact-bottom-dock"] .lm-btn-item {
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .lm-call-buttons[data-style-mobile="compact-bottom-dock"] .lm-btn-item i {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
    }

    .lm-call-buttons[data-style-mobile="minimal-mobile-strip"] .lm-main-btn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        width: 44px !important;
        height: 44px !important;
    }

    .lm-call-buttons[data-style-mobile="minimal-mobile-strip"] .lm-btn-list {
        border-radius: 16px 16px 0 0;
        background: #fff;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
        padding: 10px 8px;
    }

    .lm-call-buttons[data-style-mobile="minimal-mobile-strip"] .lm-btn-item {
        border-radius: 8px;
        padding: 8px 12px;
        margin-bottom: 3px;
        font-size: 12px;
    }

    .lm-call-buttons[data-style-mobile="mobile-icon-grid"] .lm-btn-list {
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
        padding: 20px;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .lm-call-buttons[data-style-mobile="mobile-icon-grid"] .lm-btn-list.active {
        display: grid !important;
    }

    .lm-call-buttons[data-style-mobile="mobile-icon-grid"] .lm-btn-item {
        flex-direction: column;
        border-radius: 16px;
        padding: 16px 8px;
        margin-bottom: 0;
        font-size: 11px;
        gap: 8px;
        text-align: center;
        white-space: normal;
        min-height: 80px;
        justify-content: center;
    }

    .lm-call-buttons[data-style-mobile="mobile-icon-grid"] .lm-btn-item i {
        font-size: 24px;
        width: auto;
    }

    .lm-call-buttons[data-style-mobile="agent-list-panel"] .lm-btn-list {
        border-radius: 18px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
        padding: 16px;
        min-width: 260px;
    }

    .lm-call-buttons[data-style-mobile="agent-list-panel"] .lm-btn-list::before {
        content: 'Nhân viên hỗ trợ';
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }

    .lm-call-buttons[data-style-mobile="agent-list-panel"] .lm-btn-item {
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 8px;
        font-size: 14px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: #fafafa;
    }

    .lm-call-buttons[data-style-mobile="agent-list-panel"] .lm-btn-item i {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.06);
    }
}


/* ============================================================
   DIRECT DOCK PRESETS
   Before v3.5.0 every preset looked identical in direct-dock mode because
   all preset rules targeted .lm-main-btn / .lm-btn-list only.
   ============================================================ */

.lm-direct-dock {
    --lm-dock-item-radius: 8px;
    --lm-dock-item-gap: 2px;
    --lm-dock-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.lm-direct-dock.lm-dock-vertical {
    gap: var(--lm-dock-item-gap);
}

/* --- Classic --- */
.lm-direct-dock[data-style="classic-vertical-dock"] .lm-dock-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 500;
}

.lm-direct-dock[data-style="classic-contact-panel"] {
    --lm-dock-item-gap: 6px;
}

.lm-direct-dock[data-style="classic-contact-panel"].lm-dock-vertical .lm-dock-item {
    border-radius: 999px 0 0 999px;
    box-shadow: var(--lm-dock-shadow);
}

.lm-direct-dock[data-style="classic-contact-panel"].lm-dock-vertical.lm-dock-left .lm-dock-item {
    border-radius: 0 999px 999px 0;
}

/* --- Modern --- */
.lm-direct-dock[data-style="modern-soft-floating"] {
    --lm-dock-item-gap: 8px;
}

.lm-direct-dock[data-style="modern-soft-floating"].lm-dock-vertical {
    right: 12px;
}

.lm-direct-dock[data-style="modern-soft-floating"].lm-dock-vertical.lm-dock-left {
    left: 12px;
    right: auto;
}

.lm-direct-dock[data-style="modern-soft-floating"].lm-dock-vertical .lm-dock-item {
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.lm-direct-dock[data-style="modern-card-stack"] {
    --lm-dock-item-gap: 10px;
}

.lm-direct-dock[data-style="modern-card-stack"] .lm-dock-item {
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.lm-direct-dock[data-style="modern-card-stack"].lm-dock-vertical {
    right: 12px;
}

.lm-direct-dock[data-style="minimal-floating"] .lm-dock-item {
    font-weight: 400;
    font-size: 12px;
    padding: 8px 12px;
}

/* --- Premium --- */
.lm-direct-dock[data-style="premium-glass"] .lm-dock-item {
    border: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

.lm-direct-dock[data-style="luxury-gold-accent"] .lm-dock-item {
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    letter-spacing: 0.2px;
}

.lm-direct-dock[data-style="luxury-gold-accent"] .lm-dock-item:hover {
    border-color: #d4af37;
}

.lm-direct-dock[data-style="premium-side-card"] {
    --lm-dock-item-gap: 8px;
}

.lm-direct-dock[data-style="premium-side-card"].lm-dock-vertical {
    right: 14px;
    padding: 10px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

.lm-direct-dock[data-style="premium-side-card"].lm-dock-vertical.lm-dock-left {
    left: 14px;
    right: auto;
}

.lm-direct-dock[data-style="premium-side-card"].lm-dock-vertical .lm-dock-item {
    border-radius: 12px;
}

/* --- Tech --- */
.lm-direct-dock[data-style="tech-neon-dock"] .lm-dock-item {
    border: 1px solid rgba(0, 200, 255, 0.35);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.18);
    border-radius: 10px;
}

.lm-direct-dock[data-style="tech-neon-dock"] .lm-dock-item:hover {
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.35);
}

.lm-direct-dock[data-style="cyber-edge-panel"] .lm-dock-item {
    border-radius: 2px !important;
    border-left: 2px solid rgba(138, 43, 226, 0.6);
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.18);
}

.lm-direct-dock[data-style="futuristic-glow"] .lm-dock-item {
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
}

.lm-direct-dock[data-style="futuristic-glow"] .lm-dock-item:hover {
    filter: brightness(1.08);
}

/* --- Compact / mobile --- */
.lm-direct-dock[data-style="compact-bottom-dock"].lm-dock-horizontal {
    min-height: 64px;
}

.lm-direct-dock[data-style="compact-bottom-dock"].lm-dock-horizontal .lm-dock-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
}

.lm-direct-dock[data-style="minimal-mobile-strip"].lm-dock-horizontal {
    min-height: 48px;
}

.lm-direct-dock[data-style="minimal-mobile-strip"].lm-dock-horizontal .lm-dock-item {
    font-size: 9px;
    padding: 4px 6px;
}

.lm-direct-dock[data-style="minimal-mobile-strip"].lm-dock-horizontal .lm-dock-item i {
    font-size: 18px;
}

.lm-direct-dock[data-style="mobile-icon-grid"].lm-dock-horizontal .lm-dock-item {
    flex: 1 1 0;
    min-width: 0;
}

.lm-direct-dock[data-style="agent-list-panel"] .lm-dock-item {
    border-radius: 14px;
    font-weight: 600;
}

.lm-direct-dock[data-style="agent-list-panel"] .lm-dock-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Every dock item honours the shared radius token unless a preset overrides it */
.lm-dock-horizontal .lm-dock-item {
    border-radius: var(--lm-dock-item-radius);
}


/* ============================================================
   FOCUS STATES — All presets
   ============================================================ */

[data-style] .lm-main-btn:focus-visible,
[data-style] .lm-dock-item:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.6);
    outline-offset: 3px;
}

[data-style] .lm-btn-item:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 1px;
}