/* ================================================================
 * FAB ORCHESTRATOR [v19 2026-05-11]
 * ================================================================
 * Bungkus 3 floating button (WhatsApp + Chat Asisten + Template
 * Customizer Gear) ke dalam 1 Main FAB Button. Klik Main FAB →
 * 3 button mini muncul stacked di atasnya. Klik lagi → collapse.
 *
 * Original buttons disembunyikan via CSS, lalu click di-proxy ke
 * fungsi/href aslinya, supaya tidak ada konflik z-index/tumpuk.
 * ================================================================ */

/* ===== HIDE original buttons (digantikan oleh proxy di FAB) ===== */
body.fab-active .wa-float,
body.fab-active #caBtn,
body.fab-active #tcGearBtn {
 display: none !important;
 pointer-events: none !important;
}

/* ===== MAIN FAB BUTTON ===== */
#fabMain {
 position: fixed;
 bottom: 24px;
 right: 24px;
 width: 58px;
 height: 58px;
 border-radius: 50%;
 background: var(--app-grad-main, linear-gradient(135deg,#0a2540,#1a4a7a));
 color: #fff;
 border: 0;
 cursor: pointer;
 box-shadow: 0 8px 24px rgba(10,37,64,.4);
 z-index: 2147483599;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s;
 -webkit-tap-highlight-color: transparent;
}
#fabMain:hover {
 transform: scale(1.06);
 box-shadow: 0 12px 32px rgba(10,37,64,.5);
}
#fabMain .fab-icon-default { transition: opacity .2s, transform .25s; }
#fabMain .fab-icon-close {
 position: absolute;
 opacity: 0;
 transform: scale(.5) rotate(-180deg);
 transition: opacity .2s, transform .25s;
}
#fabMain.open {
 background: #dc2626;
 transform: rotate(90deg);
}
#fabMain.open .fab-icon-default { opacity: 0; transform: scale(.5); }
#fabMain.open .fab-icon-close { opacity: 1; transform: scale(1) rotate(0); }

/* ===== HINT BUBBLE (kalau belum pernah klik FAB) ===== */
#fabHint {
 position: fixed;
 right: 92px;
 bottom: 34px;
 background: #0a2540;
 color: #fff;
 padding: 7px 12px;
 border-radius: 8px;
 font-size: .78rem;
 font-weight: 600;
 box-shadow: 0 4px 12px rgba(0,0,0,.3);
 z-index: 2147483598;
 white-space: nowrap;
 animation: fabHintFloat 2.2s ease-in-out infinite;
 pointer-events: none;
 display: none;
}
#fabHint::after {
 content: '';
 position: absolute;
 right: -6px;
 top: 50%;
 transform: translateY(-50%);
 border: 6px solid transparent;
 border-left-color: #0a2540;
}
body.fab-show-hint #fabHint { display: block; }
@keyframes fabHintFloat {
 0%, 100% { transform: translateX(0); }
 50% { transform: translateX(-3px); }
}

/* ===== SUB-BUTTONS CONTAINER ===== */
#fabSubs {
 position: fixed;
 right: 24px;
 bottom: 96px;
 z-index: 2147483597;
 display: flex;
 flex-direction: column;
 gap: 10px;
 align-items: flex-end;
 pointer-events: none;
}

/* ===== SUB-BUTTON ===== */
.fab-sub {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 0;
 box-shadow: 0 6px 18px rgba(0,0,0,.25);
 color: #fff;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.1rem;
 position: relative;
 opacity: 0;
 transform: translateY(20px) scale(.5);
 pointer-events: none;
 transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
 -webkit-tap-highlight-color: transparent;
}
body.fab-open .fab-sub {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: auto;
}
.fab-sub:hover { transform: scale(1.1); }

/* Stagger animation untuk tiap sub */
body.fab-open .fab-sub:nth-child(1) { transition-delay: .04s; }
body.fab-open .fab-sub:nth-child(2) { transition-delay: .08s; }
body.fab-open .fab-sub:nth-child(3) { transition-delay: .12s; }
body.fab-open .fab-sub:nth-child(4) { transition-delay: .16s; }
body.fab-open .fab-sub:nth-child(5) { transition-delay: .20s; }

/* ===== Variants ===== */
.fab-sub-wa { background: #25D366; }
.fab-sub-wa:hover{ background: #1ebe5b; color: #fff; }
.fab-sub-chat { background: var(--app-primary, #0a2540); }
.fab-sub-gear { background: var(--app-primary-hover, #1a4a7a); }
.fab-sub-gear .fa-cog { animation: tc-rotate 6s linear infinite; }
.fab-sub-music { background: linear-gradient(135deg, #f5a623, #e6951a); }
.fab-sub-music:hover { background: #ffc857; color: #0a2540; }
.fab-sub-music .fa-music { animation: tc-rotate 6s linear infinite; }

/* ===== TOOLTIP saat hover sub-button ===== */
.fab-sub::before {
 content: attr(data-label);
 position: absolute;
 right: 60px;
 top: 50%;
 transform: translateY(-50%);
 background: #0a2540;
 color: #fff;
 padding: 5px 10px;
 border-radius: 6px;
 font-size: .76rem;
 font-weight: 600;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity .15s;
}
.fab-sub:hover::before { opacity: 1; }
.fab-sub::after {
 content: '';
 position: absolute;
 right: 53px;
 top: 50%;
 transform: translateY(-50%);
 border: 5px solid transparent;
 border-left-color: #0a2540;
 opacity: 0;
 pointer-events: none;
 transition: opacity .15s;
}
.fab-sub:hover::after { opacity: 1; }

/* ===== BACKDROP saat FAB open =====
 [v20 2026-05-11] Transparent, TIDAK dim/blur layar.
 Hanya untuk capture klik di luar FAB area supaya bisa auto-close.
 Pakai pointer-events untuk catch klik tanpa visual interferensi. */
#fabBackdrop {
 position: fixed;
 inset: 0;
 background: transparent;
 z-index: 2147483596;
 pointer-events: none;
 transition: none;
}
body.fab-open #fabBackdrop {
 pointer-events: auto;
}

/* ===== Mobile tweaks ===== */
@media (max-width: 540px) {
 #fabMain { width: 52px; height: 52px; bottom: 18px; right: 18px; font-size: 1.25rem; }
 #fabSubs { bottom: 80px; right: 18px; }
 .fab-sub { width: 44px; height: 44px; font-size: 1rem; }
 .fab-sub::before { display: none; } /* tooltip skip di mobile */
 .fab-sub::after { display: none; }
 #fabHint { display: none !important; }
}

/* Safe area insets (iPhone notch) */
@supports (padding: max(0px)) {
 #fabMain {
 bottom: max(24px, env(safe-area-inset-bottom));
 right: max(24px, env(safe-area-inset-right));
 }
 #fabSubs {
 bottom: max(96px, calc(env(safe-area-inset-bottom) + 72px));
 right: max(24px, env(safe-area-inset-right));
 }
}

/* Dark theme support */
[data-theme="dark"] #fabHint { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] #fabHint::after { border-left-color: #1e293b; }
[data-theme="dark"] .fab-sub::before { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .fab-sub::after { border-left-color: #1e293b; }