/* ==========================================================================
   11 — FLOATING CONTACT WIDGET
   --------------------------------------------------------------------------
   Tombol mengambang pojok kanan-bawah: WhatsApp / Telepon / Email. Posisinya
   SELALU di bawah tombol "Back to top" — lihat body.has-kn-widget di
   03-layout.css & 08-responsive.css yang menggeser .to-top ke atas widget
   ini supaya keduanya tidak pernah bertumpuk.
   ========================================================================== */

.kn-fab {
    position: fixed;
    inset-block-end: max(22px, env(safe-area-inset-bottom));
    inset-inline-end: max(22px, env(safe-area-inset-right));
    z-index: calc(var(--kn-z-top) - 1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* -------------------------------------------------------------- trigger */
.kn-fab__trigger {
    position: relative;
    width: 58px; height: 58px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kn-grad-brand);
    color: var(--kn-white);
    box-shadow: var(--kn-shadow-blue);
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow var(--kn-dur) var(--kn-ease), transform var(--kn-dur) var(--kn-ease-spring);
}
.kn-fab__trigger:hover { box-shadow: var(--kn-shadow-blue-h); transform: translateY(-3px); }
.kn-fab__trigger:focus-visible { outline: 2px solid var(--kn-white); outline-offset: 3px; }

.kn-fab__trigger .kn-fab__icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--kn-dur-fast) var(--kn-ease), transform var(--kn-dur-fast) var(--kn-ease);
}
.kn-fab__trigger .kn-fab__icon--close { opacity: 0; transform: rotate(-40deg) scale(0.6); }
.kn-fab__trigger .kn-fab__icon--open { opacity: 1; transform: rotate(0) scale(1); }
.kn-fab.is-open .kn-fab__trigger .kn-fab__icon--open { opacity: 0; transform: rotate(40deg) scale(0.6); }
.kn-fab.is-open .kn-fab__trigger .kn-fab__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* ---------------------------------------------------------------- panel */
.kn-fab__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-block-end: 4px;
}

.kn-fab__item {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 7px 20px 7px 7px;
    border-radius: var(--kn-r-pill);
    background: var(--kn-glass-bg-strong);
    border: 1px solid var(--kn-glass-border);
    backdrop-filter: blur(var(--kn-glass-blur)) saturate(var(--kn-glass-sat));
    -webkit-backdrop-filter: blur(var(--kn-glass-blur)) saturate(var(--kn-glass-sat));
    box-shadow: var(--kn-shadow-sm);
    color: var(--kn-navy-800);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    pointer-events: none;
    transition: opacity var(--kn-dur) var(--kn-ease), transform var(--kn-dur) var(--kn-ease-spring),
                box-shadow var(--kn-dur) var(--kn-ease);
}

.kn-fab.is-open .kn-fab__item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Stagger kecil supaya item muncul berurutan, bukan bersamaan. */
.kn-fab__panel .kn-fab__item:nth-child(1) { transition-delay: 0.1s; }
.kn-fab__panel .kn-fab__item:nth-child(2) { transition-delay: 0.06s; }
.kn-fab__panel .kn-fab__item:nth-child(3) { transition-delay: 0.02s; }

.kn-fab__item:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--kn-shadow-md); }
.kn-fab.is-open .kn-fab__item:hover { transform: translateY(-2px) scale(1.02); }

.kn-fab__item .kn-fab__icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kn-white);
    flex-shrink: 0;
}
.kn-fab__item--whatsapp .kn-fab__icon { background: #25d366; }
.kn-fab__item--phone .kn-fab__icon { background: var(--kn-grad-brand); }
.kn-fab__item--email .kn-fab__icon { background: linear-gradient(135deg, var(--kn-violet-500), var(--kn-violet-400)); }

.kn-fab__text { display: flex; flex-direction: column; line-height: 1.2; }
.kn-fab__label { font-family: var(--kn-font-body); font-size: var(--kn-fs-sm); font-weight: 700; }
.kn-fab__sub { font-family: var(--kn-font-body); font-size: var(--kn-fs-2xs); color: var(--kn-ink-500); }

/* Tanpa JS (progressive enhancement): sembunyikan trigger, tampilkan semua
   tombol channel langsung supaya widget tetap bisa dipakai. */
html:not(.kn-js) .kn-fab__trigger { display: none; }
html:not(.kn-js) .kn-fab__item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 999px) {
    .kn-fab { inset-block-end: 16px; inset-inline-end: 16px; }
}

@media (max-width: 480px) {
    .kn-fab__trigger { width: 52px; height: 52px; }
    .kn-fab__item { padding: 6px 16px 6px 6px; gap: 9px; }
    .kn-fab__item .kn-fab__icon { width: 32px; height: 32px; }
    .kn-fab__sub { display: none; } /* di HP, label channel saja sudah cukup jelas */
}

@media (pointer: coarse) {
    .kn-fab__trigger { width: 54px; height: 54px; }
}