/* Desain 2: menu bawah HP (dock kaca + gelembung "Lainnya"). HANYA layar <= 1099 px, mode gelap, layar (bukan cetak).
   Tablet/laptop (>= 1100 px) memakai menu samping kaca (vertex-kaca.css); mode terang tetap memakai menu bawaan Filament.
   Murni tampilan: markup resources/views/merek/dock-hp.blade.php, perilaku public/js/vertex-dock.js, daftar menu App\Support\Tampilan\DockHp. */

.vy-dock-wadah { display: none; }

@media screen and (max-width: 1099px) {
    :root {
        --vy-d-tinggi: 72px;
        --vy-d-jarak: 16px;
        --vy-d-bawah: calc(16px + env(safe-area-inset-bottom, 0px));
        --vy-d-ruang: calc(var(--vy-d-bawah) + var(--vy-d-tinggi));    /* tepi atas dock dari dasar layar */
        --vy-d-kiri: max(16px, env(safe-area-inset-left, 0px));
        --vy-d-kanan: max(16px, env(safe-area-inset-right, 0px));
    }

    html.dark .vy-dock-wadah { display: block; }

    /* menu samping dan tombol hamburger lama disembunyikan (menu = dock) */
    html.dark .fi-sidebar, html.dark .fi-sidebar-close-overlay, html.dark .fi-topbar-open-sidebar-btn, html.dark .fi-topbar-close-sidebar-btn { display: none !important; }

    /* ===== dock ===== */
    .vy-dock {
        position: fixed; z-index: 26; left: var(--vy-d-kiri); right: var(--vy-d-kanan); bottom: var(--vy-d-bawah); height: var(--vy-d-tinggi); max-width: 560px; margin-inline: auto;
        box-sizing: border-box; padding: 0 4px; display: grid; grid-template-columns: repeat(var(--jml, 5), minmax(0, 1fr)); align-items: stretch; border-radius: 36px;   /* --jml = jumlah slot (3-5, diisi server): ikon dibagi rata mengisi bar */
        background-color: rgba(22, 15, 10, .66);   /* alas gelap tambahan agar teks tetap >= 4,5:1 di atas isi halaman yang terang (mis. gambar karakter) */
        background-image: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05));
        border: 1px solid rgba(255, 222, 185, .2);
        -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 220, .3);
        transition: transform .35s cubic-bezier(.34, 1.2, .64, 1), opacity .25s;
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vy-dock { background-color: rgba(36, 26, 19, .96); } }

    .vy-dock-gelembung {
        position: absolute; left: 0; top: 3px; width: 64px; height: 64px; border-radius: 26px; pointer-events: none; opacity: 0; z-index: 0;
        background: linear-gradient(160deg, rgba(242, 163, 58, .35), rgba(242, 163, 58, .12));
        border: 1px solid rgba(255, 238, 215, .5);
        box-shadow: 0 8px 22px rgba(215, 155, 94, .32), inset 0 1px 0 rgba(255, 245, 225, .45);
        transition: transform .6s cubic-bezier(.34, 1.45, .64, 1), opacity .25s;
    }
    .vy-dock-slot {
        position: relative; z-index: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        margin: 0; padding: 0; border: 0; background: none; color: #E8DCC8; text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .vy-dock-ikon { display: grid; place-items: center; width: 24px; height: 24px; }
    .vy-dock-ikon svg { width: 24px; height: 24px; }
    .vy-dock-nama { max-width: 100%; padding: 0 2px; font-size: 11px; line-height: 1.1; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vy-dock-slot.is-aktif, .vy-dock-slot[aria-expanded="true"] { color: #FFF3E0; }
    .vy-dock-slot:focus-visible { outline: 2px solid #F2A33A; outline-offset: -4px; border-radius: 26px; }

    /* ruang di bawah isi halaman supaya tidak tertutup dock (halaman sudah punya jarak bawah 32 px) */
    html.dark body .fi-main { padding-bottom: 0; }
    html.dark body .fi-main-ctn { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }   /* di bawah isi DAN kaki halaman: dock berakhir di 88 px dari dasar, jadi kaki berjarak >= 36 px di atasnya (11 Nov 2026) */

    /* dock disembunyikan sementara saat mengetik (papan ketik) */
    html.vy-ketik .vy-dock { transform: translateY(calc(var(--vy-d-ruang) + 20px)); opacity: 0; pointer-events: none; }
    html.vy-ketik .vy-fab, html.vy-ketik .vy-fab-menu { opacity: 0; pointer-events: none; }

    /* ===== menu "Lainnya": gelembung kaca BULAT 76 px, 3 kolom zigzag (kolom tengah turun 26 px), nama di bawah gelembung ===== */
    .vy-lain-latar {
        position: fixed; inset: 0; z-index: 24; visibility: hidden; opacity: 0; background: rgba(10, 7, 5, .58);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .3s ease, visibility 0s .3s;
    }
    .is-buka .vy-lain-latar { visibility: visible; opacity: 1; transition: opacity .3s ease; }
    html.vy-lainnya-buka, html.vy-lainnya-buka body { overflow: hidden; }

    /* visibility baru "hidden" setelah gelembung terakhir kembali ke tombol (tutup: .35 s + jeda terbalik --tutup per gelembung: 40 ms, makin rapat bila gelembung banyak agar total jeda <= 300 ms) */
    .vy-lain { position: fixed; z-index: 25; left: var(--vy-d-kiri); right: var(--vy-d-kanan); bottom: var(--vy-d-bawah); max-width: 560px; margin-inline: auto; pointer-events: none; visibility: hidden; transition: visibility 0s calc(.4s + (var(--total, 9) - 1) * var(--tutup, 40ms)); }
    .is-buka .vy-lain { visibility: visible; transition: none; pointer-events: auto; }
    /* layar pendek: seluruh panel (akun + gelembung) bergulir dan berhenti di bawah tombol lonceng/avatar (76 px dari atas); skrip menggulir ke dasar saat dibuka (gelembung dekat dock tampil dulu) */
    .vy-lain { max-height: calc(100vh - var(--vy-d-bawah) - 76px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--vy-d-bawah) - 76px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-padding: 8px 0 calc(var(--vy-d-tinggi) + 44px); }   /* item yang digulirkan/difokus berhenti di atas dock */
    .vy-lain::-webkit-scrollbar { display: none; }
    .vy-lain-baris {
        box-sizing: border-box; max-width: 420px; margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 122px; align-content: end; justify-items: center;
        padding: 16px 0 calc(var(--vy-d-tinggi) + 44px);   /* di dalam kotak ini ada tombol Lainnya: titik awal gelembung */
    }
    .is-buka .vy-lain-baris { pointer-events: auto; }

    .vy-lain-item {
        position: relative; display: block; width: 100%; min-width: 0; align-self: start; padding: 0; border: 0; background: none; color: #FFF3E0; text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transform-origin: 50% 38px;   /* pusat gelembung: titik tumpu muncul/kembali ke tombol Lainnya */
        /* tertutup: kecil di tombol Lainnya (--dx/--dy diukur skrip); kembali dengan urutan terbalik, lebih cepat (.35 s) */
        opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.2);
        transition: transform .35s cubic-bezier(.4, 0, .6, 1) calc((var(--total, 9) - 1 - var(--n, 0)) * var(--tutup, 40ms)), opacity .25s ease calc((var(--total, 9) - 1 - var(--n, 0)) * var(--tutup, 40ms));
    }
    .vy-lain-baris .vy-lain-item:nth-child(3n + 2) { margin-top: 26px; }   /* zigzag */
    .is-buka .vy-lain-item { opacity: 1; transform: none; transition: transform .65s cubic-bezier(.34, 1.56, .64, 1) calc(var(--n, 0) * 55ms), opacity .25s ease calc(var(--n, 0) * 55ms); }
    .vy-lain-dalam {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        animation: vy-lain-napas var(--napas, 5.5s) ease-in-out calc(var(--fase, 0s) * -1) infinite alternate; animation-play-state: paused;
    }
    .is-buka .vy-lain-dalam { animation-play-state: running; }
    @keyframes vy-lain-napas { from { transform: translateY(0); } to { transform: translateY(-6px); } }
    .vy-lain-gel {
        position: relative; display: grid; place-items: center; width: 76px; height: 76px; box-sizing: border-box; border-radius: 50%; color: #E8DCC8;
        background-color: rgba(26, 17, 11, .5);   /* alas gelap tipis agar ikon terbaca di atas latar yang terang */
        background-image: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05));
        border: 1px solid rgba(255, 222, 185, .2);
        -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
        box-shadow: 0 14px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 240, 220, .3);
    }
    .vy-lain-item.is-aktif .vy-lain-gel { background-image: linear-gradient(160deg, rgba(242, 163, 58, .38), rgba(242, 163, 58, .12)); border-color: rgba(255, 238, 215, .5); color: #FFF3E0; }
    .vy-lain-item:focus-visible { outline: none; }
    .vy-lain-item:focus-visible .vy-lain-gel { outline: 2px solid #F2A33A; outline-offset: 3px; }
    .vy-lain-ikon { display: grid; place-items: center; width: 26px; height: 26px; }
    .vy-lain-ikon svg { width: 26px; height: 26px; }
    .vy-lain-nama {
        max-width: 100%; padding: 0 2px; font-size: 12px; line-height: 1.2; font-weight: 600; text-align: center; color: #FFF3E0; text-shadow: 0 1px 6px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
    }
    .vy-lain-lencana { position: absolute; top: -2px; right: -2px; min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 10px; background: #F2A33A; color: #2A1604; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

    /* ===== akun (selalu ada, semua peran): gelembung yang SAMA dengan gelembung menu (.vy-lain-item): bulat, zigzag, animasi muncul bergantian; Hapus akun berwarna peringatan merah-lembut ===== */
    .vy-lain-bahaya .vy-lain-gel { color: #FFB4A6; background-image: linear-gradient(160deg, rgba(255, 120, 100, .2), rgba(255, 120, 100, .06)); border-color: rgba(255, 160, 140, .42); }
    .vy-lain-bahaya .vy-lain-nama { color: #FFB4A6; }

    /* ===== "Semua menu": daftar kaca bergulir ke bawah (tanpa geser samping) ===== */
    .vy-semua {
        position: fixed; z-index: 25; left: var(--vy-d-kiri); right: var(--vy-d-kanan); bottom: calc(var(--vy-d-ruang) + 12px); max-width: 560px; margin-inline: auto; box-sizing: border-box;
        display: flex; flex-direction: column; max-height: min(72vh, calc(100vh - var(--vy-d-ruang) - 70px)); border-radius: 28px; overflow: hidden;
        background-color: rgba(22, 15, 10, .84); background-image: linear-gradient(160deg, rgba(255, 232, 205, .14), rgba(255, 232, 205, .05));
        border: 1px solid rgba(255, 222, 185, .2); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
        box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 220, .3);
        visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(24px) scale(.96); transform-origin: 50% 100%;
        transition: transform .3s cubic-bezier(.4, 0, .6, 1), opacity .25s ease, visibility 0s .3s;
    }
    .is-semua .vy-semua { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: transform .45s cubic-bezier(.34, 1.3, .64, 1), opacity .25s ease; }
    .is-semua .vy-lain-baris { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .vy-semua-kepala { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 8px 14px 6px 8px; border-bottom: 1px solid rgba(255, 222, 185, .14); }
    .vy-semua-kembali { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #FFF3E0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .vy-semua-kembali:focus-visible, .vy-semua-baris:focus-visible { outline: 2px solid #F2A33A; outline-offset: -2px; }
    .vy-semua-judul { font-family: Sora, Inter, sans-serif; font-size: 18px; font-weight: 600; color: #FFF3E0; }
    .vy-semua-isi { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 8px 12px; }
    .vy-semua-judul-bagian { padding: 14px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #D8C7AC; }
    .vy-semua-baris { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 16px; color: #F2E8D6; text-decoration: none; font-size: 15px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
    .vy-semua-baris.is-aktif { background-image: linear-gradient(160deg, rgba(242, 163, 58, .3), rgba(242, 163, 58, .1)); color: #FFF3E0; }
    .vy-semua-ikon { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; }
    .vy-semua-ikon svg { width: 22px; height: 22px; }
    .vy-semua-nama { flex: 1 1 auto; min-width: 0; }
    .vy-semua-lencana { min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 10px; background: #F2A33A; color: #2A1604; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

    /* ===== tombol tambah (+) di halaman RAB (hanya saat menu tertutup) ===== */
    .vy-fab {
        position: fixed; z-index: 22; right: var(--vy-d-kanan); bottom: calc(var(--vy-d-ruang) + 14px); width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
        display: grid; place-items: center; color: #2A1604; -webkit-tap-highlight-color: transparent;
        background: linear-gradient(145deg, #F7B955, #E0902A);
        box-shadow: 0 12px 28px rgba(224, 144, 42, .38), 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 245, 225, .6);
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
    }
    .vy-fab[hidden], .vy-fab-menu[hidden] { display: none; }
    .vy-fab:active { transform: scale(.94); }
    .vy-fab[aria-expanded="true"] svg { transform: rotate(45deg); }
    .vy-fab svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
    .vy-fab:focus-visible { outline: 3px solid #FFF3E0; outline-offset: 3px; }
    .is-buka .vy-fab, .is-buka .vy-fab-menu { opacity: 0; pointer-events: none; transform: scale(.6); }
    .vy-fab-menu {
        position: fixed; z-index: 22; right: var(--vy-d-kanan); bottom: calc(var(--vy-d-ruang) + 14px + 56px + 10px); min-width: 220px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px; border-radius: 24px;
        background-color: rgba(22, 15, 10, .9); background-image: linear-gradient(160deg, rgba(255, 232, 205, .16), rgba(255, 232, 205, .06)); border: 1px solid rgba(255, 222, 185, .22);
        -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 220, .3);
        transform-origin: bottom right; animation: vy-fab-muncul .3s cubic-bezier(.34, 1.56, .64, 1);
    }
    @keyframes vy-fab-muncul { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
    .vy-fab-opsi { display: block; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 16px; background: none; color: #F1E8DA; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; }
    .vy-fab-opsi:hover, .vy-fab-opsi:focus-visible { background: rgba(255, 235, 210, .1); outline: none; }
    /* di halaman RAB tombol bawah bawaan (+ Tambah item / Tanya AI) digantikan tombol (+) melayang; bila hanya "Tanya AI" yang ada, bilahnya tetap */
    html.dark body:has(#jl-tambah) .jl-bawah { display: none !important; }

    /* ===== header halaman: judul besar Sora kiri, tombol notifikasi bulat kaca kanan, breadcrumb kecil di atas judul ===== */
    html.dark .fi-main-ctn { position: relative; }
    html.dark .fi-topbar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: var(--vy-d-kanan); left: auto; width: auto; z-index: 20; background: none; overflow: visible; }
    html.dark .fi-topbar > nav { height: auto; padding: 0; background-color: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; }
    html.dark .fi-topbar > nav > div { gap: 10px; }
    html.dark .fi-topbar .fi-icon-btn, html.dark .fi-topbar .fi-user-menu button {
        width: 44px; height: 44px; min-width: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #E8DCC8;
        background-color: rgba(22, 15, 10, .45); background-image: linear-gradient(160deg, rgba(255, 232, 205, .16), rgba(255, 232, 205, .06)); border: 1px solid rgba(255, 222, 185, .22);
        -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 240, 220, .28);
    }
    html.dark .fi-topbar .fi-user-menu .fi-avatar { width: 34px; height: 34px; }
    html.dark body .fi-main .fi-page { padding-top: calc(env(safe-area-inset-top, 0px) + 21px); }
    html.dark body .fi-main .fi-page:not(:has(.fi-header)) { padding-top: calc(env(safe-area-inset-top, 0px) + 76px); }
    html.dark .fi-header > div:first-child { min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding-right: 108px; }
    html.dark .fi-header-heading { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; font-size: 27px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
    html.dark .fi-header .fi-breadcrumbs { display: block !important; margin: 0 0 4px; font-size: 12px; line-height: 1.3; }
    html.dark .fi-header .fi-breadcrumbs, html.dark .fi-header .fi-breadcrumbs a, html.dark .fi-header .fi-breadcrumbs span { color: #A8967F; }
    html.dark .fi-header .fi-breadcrumbs ol { gap: 4px; }
}

/* bar aksi bawah yang sudah ada (Simpan dll.) naik ke atas dock, tampil sebagai kartu melayang */
@media screen and (max-width: 767px) {
    html.dark body .vy-simpan-bar, html.dark body .fi-form-actions, html.dark body .jl-bawah {
        left: var(--vy-d-kiri); right: var(--vy-d-kanan); bottom: calc(var(--vy-d-ruang) + 12px); z-index: 23; padding: 10px 12px; border: 1px solid rgba(255, 222, 185, .2); border-radius: 22px;
        background-color: #1C150F; box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    }
    html.vy-ketik body .vy-simpan-bar, html.vy-ketik body .fi-form-actions, html.vy-ketik body .jl-bawah { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    html.dark body:has(.vy-simpan-bar, .fi-form-actions) .fi-main, html.dark body:has(.jl-bawah):not(:has(#jl-tambah)) .fi-main { padding-bottom: 0; }
    html.dark body:has(.vy-simpan-bar, .fi-form-actions) .fi-main-ctn, html.dark body:has(.jl-bawah):not(:has(#jl-tambah)) .fi-main-ctn { padding-bottom: calc(136px + var(--vy-bar-tinggi, 100px) + env(safe-area-inset-bottom, 0px)); }   /* tinggi bar diukur skrip; +24 px lega (10 Nov 2026) supaya kotak/kalimat terakhir tidak mepet di bawah bar */
}

@media screen and (max-width: 1099px) and (prefers-reduced-motion: reduce) {
    .vy-dock, .vy-dock *, .vy-lain-latar, .vy-lain, .vy-lain-item, .vy-lain-dalam, .vy-fab, .vy-fab svg, .vy-fab-menu, .vy-semua, .vy-semua-baris { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
    .is-buka .vy-lain-item { transition-delay: 0s !important; }
}