/* Live chat bizbos (frontend/partials/chat-widget.blade.php). Warna mengikuti --bs-primary situs. */
/*
 * Tumpukan tombol melayang di kanan bawah (dari bawah ke atas):
 *   [kembali ke atas] -> [chat] -> [WhatsApp]; panel chat terbuka di atas tombol chat.
 * Semua posisi dihitung dari 3 variabel supaya tidak bertumpuk:
 *   --bz-float-gap : jarak dari tepi bawah layar
 *   --bz-lift      : ruang untuk tombol "kembali ke atas" (hanya saat sudah di-scroll, body.bz-scrolled)
 *   --cookie-h     : tinggi banner cookie yang sedang tampil (diisi partials/cookie-consent)
 */
/* Di body (bukan :root) supaya --bz-float-base ikut dihitung ulang saat class body berubah. */
body { --bz-float-gap: 24px; --bz-lift: 0px; --bz-float-base: calc(var(--cookie-h, 0px) + var(--bz-lift) + var(--bz-float-gap)); }
body.bz-scrolled { --bz-lift: 56px; } /* tombol 44px + jarak 12px */

/* Panel terbuka tepat di atas tombol bulat (tombol 56px + jarak 12px). */
.bz-chat {
    position: fixed; right: 24px; bottom: calc(var(--bz-float-base) + 68px); z-index: 1080;
    width: min(380px, calc(100vw - 2rem)); height: min(580px, calc(100vh - 112px));
    display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem; overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(16, 24, 40, .35); font-size: .925rem;
    animation: bzChatIn .22s ease-out;
}
.bz-chat[hidden] { display: none; }
/* Ukuran kolom termasuk padding & border, tidak bergantung pada CSS halaman. */
.bz-chat, .bz-chat *, .bz-chat *::before, .bz-chat *::after { box-sizing: border-box; }
@keyframes bzChatIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.bz-chat__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(135deg, var(--bs-primary), #b74c3f); }
.bz-chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.bz-chat__status { font-size: .78rem; opacity: .9; }
.bz-chat__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; margin-right: .2rem; }
.bz-chat__close { border: 0; background: transparent; color: #fff; font-size: 1.1rem; padding: .25rem; opacity: .85; }
.bz-chat__close:hover { opacity: 1; }

/* Langkah 1: form kenalan (nama, email, WhatsApp) sebelum chat. */
.bz-chat__start { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.25rem; background: #f8f6f5; display: flex; flex-direction: column; gap: .75rem; }
.bz-chat__start-intro { background: #fff; border: 1px solid #eee; border-radius: 1rem; padding: .8rem .95rem; line-height: 1.45; }
.bz-chat__field { display: flex; flex-direction: column; gap: .3rem; margin: 0; }
.bz-chat__field > span { font-size: .8rem; font-weight: 600; color: #4b3b36; }
.bz-chat__field input { width: 100%; border: 1px solid #e5e2e0; border-radius: .75rem; padding: .6rem .85rem; outline: none; background: #fff; min-width: 0; }
.bz-chat__field input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.bz-chat__field input.is-invalid { border-color: #dc3545; }
.bz-chat__field small { color: #dc3545; font-size: .75rem; min-height: 0; }
.bz-chat__field small:empty { display: none; }
.bz-chat__phone { display: flex; align-items: stretch; }
.bz-chat__phone > span { display: flex; align-items: center; padding: 0 .75rem; border: 1px solid #e5e2e0; border-right: 0; border-radius: .75rem 0 0 .75rem; background: #f1eeec; font-size: .875rem; color: #4b3b36; }
.bz-chat__phone input { border-radius: 0 .75rem .75rem 0; }
.bz-chat__start-btn { border: 0; border-radius: 999px; padding: .7rem 1rem; background: var(--bs-primary); color: #fff; font-weight: 600; margin-top: .25rem; }
.bz-chat__start-btn:disabled { opacity: .6; }
.bz-chat__privacy { font-size: .72rem; color: #8a7f7b; margin: 0; text-align: center; line-height: 1.4; }
.bz-chat__privacy a { color: inherit; text-decoration: underline; }
.bz-chat__start[hidden], .bz-chat__body[hidden], .bz-chat__form[hidden] { display: none; }

.bz-chat__body { flex: 1; overflow-y: auto; padding: 1rem; background: #f8f6f5; display: flex; flex-direction: column; gap: .5rem; }
.bz-chat__msg { max-width: 85%; padding: .6rem .85rem; border-radius: 1rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.bz-chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid #eee; border-bottom-left-radius: .3rem; }
.bz-chat__msg--me { align-self: flex-end; background: var(--bs-primary); color: #fff; border-bottom-right-radius: .3rem; }
.bz-chat__msg a { color: inherit; text-decoration: underline; }
.bz-chat__typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #bbb; animation: bzDot 1s infinite; }
.bz-chat__typing span:nth-child(2) { animation-delay: .15s; } .bz-chat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bzDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.bz-chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem 0; background: #fff; }
.bz-chat__chips[hidden] { display: none; }
.bz-chat__chips button { border: 1px solid var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; }
.bz-chat__chips button:hover { border-color: var(--bs-primary); }

.bz-chat__form { display: flex; gap: .5rem; padding: .75rem 1rem; background: #fff; border-top: 1px solid #f0eeed; }
.bz-chat__form input { flex: 1; border: 1px solid #e5e2e0; border-radius: 999px; padding: .55rem 1rem; outline: none; min-width: 0; }
.bz-chat__form input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
.bz-chat__form button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--bs-primary); color: #fff; flex-shrink: 0; }
.bz-chat__form button:disabled { opacity: .5; }

.bz-chat__wa { display: block; text-align: center; padding: .55rem 1rem .8rem; font-size: .8rem; color: #16a34a; background: #fff; text-decoration: none; }
.bz-chat__wa:hover { text-decoration: underline; color: #15803d; }

/* Tombol bulat melayang di kanan bawah -- ukuran, bayangan & efek hover sama
   persis dengan .whatsapp-float-btn (public/css/frontend.css), warna utama situs. */
.bz-chat-launcher {
    position: fixed; right: 24px; bottom: var(--bz-float-base); z-index: 1081;
    width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
    background-color: var(--bs-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: bottom .35s cubic-bezier(.22, 1, .36, 1), transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    /* Bergoyang kanan-kiri seperti lonceng (poros di atas) tiap 3 detik; berhenti saat disentuh/dibuka. */
    transform-origin: 50% 0;
    animation: bzChatBell 3s ease-in-out 2s infinite;
}
/* Gelombang tipis keluar dari tombol, berbarengan dengan goyangannya. */
.bz-chat-launcher::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    animation: bzChatRing 3s ease-out 2s infinite;
}
.bz-chat-launcher:hover, .bz-chat-launcher:focus-visible, .bz-chat-launcher.is-open,
.bz-chat-launcher:hover::after, .bz-chat-launcher.is-open::after { animation: none; }
.bz-chat-launcher:hover, .bz-chat-launcher:focus-visible { transform-origin: 50% 50%; }
/* ~1 detik berayun makin pelan (seperti lonceng), lalu diam ~2 detik. */
@keyframes bzChatBell {
    0%, 36%, 100% { transform: none; }
    4% { transform: rotate(16deg); }
    10% { transform: rotate(-14deg); }
    16% { transform: rotate(10deg); }
    22% { transform: rotate(-7deg); }
    28% { transform: rotate(4deg); }
    32% { transform: rotate(-2deg); }
}
@keyframes bzChatRing {
    0% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .45); }
    36%, 100% { box-shadow: 0 0 0 18px rgba(var(--bs-primary-rgb), 0); }
}
.bz-chat-launcher:hover,
.bz-chat-launcher:focus-visible {
    color: #fff; background-color: #c95345;
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.bz-chat-launcher:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .35); outline-offset: 2px; }
.bz-chat-launcher i { line-height: 1; transition: transform 0.2s ease, opacity 0.2s ease; }
.bz-chat-launcher__icon-close { position: absolute; font-size: 22px; opacity: 0; transform: rotate(-90deg); }
.bz-chat-launcher.is-open .bz-chat-launcher__icon-open { opacity: 0; transform: rotate(90deg); }
.bz-chat-launcher.is-open .bz-chat-launcher__icon-close { opacity: 1; transform: none; }

/* Tombol WhatsApp melayang naik ke atas tombol chat supaya tidak bertumpuk,
   dan disembunyikan selama panel chat terbuka (link WA ada di dalam panel). */
.whatsapp-float-btn { bottom: var(--bz-float-base); transition: bottom .35s cubic-bezier(.22, 1, .36, 1), transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
body:has(.bz-chat-launcher) .whatsapp-float-btn { bottom: calc(var(--bz-float-base) + 68px); }
body.bz-chat-open .whatsapp-float-btn { opacity: 0; visibility: hidden; pointer-events: none; }

/* Tombol "kembali ke atas": paling bawah, sejajar tengah dengan tombol chat; muncul setelah halaman di-scroll. */
.bz-scroll-top {
    position: fixed; right: 30px; bottom: calc(var(--cookie-h, 0px) + var(--bz-float-gap)); z-index: 1081;
    width: 44px; height: 44px; padding: 0; border: 1px solid rgba(var(--bs-primary-rgb), .2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: #fff; color: var(--bs-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.8);
    transition: opacity .3s ease, visibility .3s, transform .35s cubic-bezier(.22, 1, .36, 1), bottom .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, color .2s ease;
}
body.bz-scrolled .bz-scroll-top { opacity: 1; visibility: visible; transform: none; }
.bz-scroll-top:hover, .bz-scroll-top:focus-visible { background: var(--bs-primary); color: #fff; }
.bz-scroll-top:hover i { animation: bzScrollTopHop .6s ease; }
@keyframes bzScrollTopHop { 40% { transform: translateY(-4px); } }
body.bz-chat-open .bz-scroll-top { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .bz-chat-launcher, .bz-chat-launcher::after, .bz-scroll-top:hover i { animation: none; }
}

/* HP: layar penuh supaya nyaman mengetik; ukuran tombol mengikuti tombol WhatsApp versi HP. */
@media (max-width: 575.98px) {
    .bz-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
    /* Font isian minimal 16px supaya iPhone tidak memperbesar halaman saat mengetik. */
    .bz-chat input { font-size: 16px; }
    body { --bz-float-gap: 16px; }
    body.bz-scrolled { --bz-lift: 50px; } /* tombol 40px + jarak 10px */
    .bz-chat-launcher { right: 16px; width: 48px; height: 48px; font-size: 22px; }
    .bz-chat-launcher__icon-close { font-size: 18px; }
    body:has(.bz-chat-launcher) .whatsapp-float-btn { bottom: calc(var(--bz-float-base) + 60px); }
    .bz-scroll-top { right: 20px; width: 40px; height: 40px; font-size: 18px; }
    /* Panel penuh layar sudah punya tombol tutup sendiri. */
    body.bz-chat-open .bz-chat-launcher { display: none; }
}