/* NU Pelem PWA — bottom nav, banner install, sheet aplikasi. Mobile only. */
.np-bottomnav {
    display: none;
}
/* Sembunyikan semua elemen PWA di desktop; tampil hanya via media query mobile */
.np-banner,
.np-sheet,
.np-sheet-bg,
.np-toast {
    display: none;
}
/* Mode gelap (mengikuti atribut tema) */
html[data-theme="dark"] .np-bottomnav { background: #131a15; border-top-color: #263129; }
html[data-theme="dark"] .np-bottomnav a, html[data-theme="dark"] .np-bottomnav button { color: #9db0a4; }
html[data-theme="dark"] .np-bottomnav .np-active { color: #7fd6a0; }
html[data-theme="dark"] .np-sheet { background: #161e19; }
html[data-theme="dark"] .np-sheet h3 { color: #e7ede9; }
html[data-theme="dark"] .np-sheet p { color: #9db0a4; }
html[data-theme="dark"] .np-sheet .np-act.np-off { background: #263129; color: #cfd8d1; }
html[data-theme="dark"] .np-sheet .np-close { color: #9db0a4; }
html[data-theme="dark"] .np-toast { background: #e7ede9; color: #111827; }
@media (max-width: 768px) {
    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
    .np-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99990;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .np-bottomnav a, .np-bottomnav button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 2px 7px;
        background: none;
        border: 0;
        color: #6b7280;
        font-size: 10px;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
    }
    .np-bottomnav svg {
        width: 23px;
        height: 23px;
    }
    .np-bottomnav .np-active {
        color: #166534;
        font-weight: 700;
    }
    /* Banner install */
    .np-banner {
        display: none;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        z-index: 99995;
        background: #166534;
        color: #fff;
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
        align-items: center;
        gap: 10px;
    }
    .np-banner.np-show {
        display: flex;
    }
    .np-banner img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #fff;
        flex: none;
    }
    .np-banner .np-txt {
        flex: 1;
        font-size: 12px;
        line-height: 1.45;
    }
    .np-banner .np-txt b {
        display: block;
        font-size: 13px;
    }
    .np-banner .np-btns {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: none;
    }
    .np-banner button {
        border: 0;
        border-radius: 8px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
    }
    .np-install-go {
        background: #fff;
        color: #166534;
    }
    .np-install-later {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }
    /* Sheet aplikasi */
    .np-sheet-bg {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99996;
        background: rgba(0, 0, 0, 0.45);
    }
    .np-sheet-bg.np-show {
        display: block;
    }
    .np-sheet {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99997;
        background: #fff;
        border-radius: 18px 18px 0 0;
        padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
    }
    .np-sheet.np-show {
        display: block;
    }
    .np-sheet h3 {
        margin: 0 0 4px;
        font-size: 16px;
        color: #111827;
    }
    .np-sheet p {
        margin: 0 0 12px;
        font-size: 12px;
        color: #6b7280;
    }
    .np-sheet .np-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
    }
    .np-sheet .np-act {
        flex: 1;
        border: 0;
        border-radius: 10px;
        padding: 11px 8px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        background: #166534;
        color: #fff;
    }
    .np-sheet .np-act.np-off {
        background: #e5e7eb;
        color: #374151;
    }
    .np-sheet .np-close {
        width: 100%;
        border: 0;
        background: none;
        padding: 8px;
        font-size: 13px;
        color: #6b7280;
        cursor: pointer;
        font-family: inherit;
    }
    .np-toast {
        display: none;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        z-index: 99998;
        background: #111827;
        color: #fff;
        font-size: 12px;
        padding: 9px 16px;
        border-radius: 20px;
        white-space: nowrap;
    }
    .np-toast.np-show {
        display: block;
    }
    /* Angkat tombol chat WA + kotak chatnya agar tak tertutup bottom nav.
       JoinChat memakai --bottom di wadah .joinchat; timpa variabelnya. */
    .joinchat {
        --bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
}