/**
 * Chat Pelanggan ⇄ Admin — widget storefront.
 * Memakai token warna design system (var(--primary), --border, dst) supaya
 * ikut light/dark mode tanpa aturan tambahan.
 *
 * Dua bentuk tampilan:
 *   ≥ 641px  panel melayang di kanan bawah (ala chat toko marketplace desktop)
 *   ≤ 640px  layar penuh dengan tombol kembali (ala aplikasi chat mobile)
 */

/* Tombol chat duduk TEPAT DI ATAS tombol WhatsApp (.wa-float): right sama
   18px, jaraknya 52px tinggi tombol + 12px sela, termasuk saat bottom nav
   disembunyikan. */
.chat-launcher {
    position: fixed;
    right: 18px;
    bottom: calc(env(safe-area-inset-bottom) + 168px);
    z-index: 940;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: var(--primary, #2563EB);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(37, 99, 235, .35);
    transition: transform .18s ease, opacity .18s ease;
}
.chat-launcher:hover { transform: scale(1.06); }
.chat-launcher svg { width: 24px; height: 24px; }
body.mobile-nav-hidden .chat-launcher { bottom: calc(env(safe-area-inset-bottom) + 88px); }
@media (min-width: 768px) { .chat-launcher { bottom: 92px; } }
body.overlay-open .chat-launcher,
.chat-launcher[hidden] { display: none; }

.chat-launcher-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #DC2626);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg, #fff);
}

/* ── Panel ─────────────────────────────────────────────────────────────── */
.chat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(15, 23, 42, .45);
}

.chat-panel {
    position: fixed;
    right: 18px;
    bottom: 152px; /* di atas tombol chat + WhatsApp */
    z-index: 1200;
    width: 372px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 176px);
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.chat-panel.is-open { display: flex; animation: chatPanelIn .18s ease; }
@keyframes chatPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Mode DOCK: sidebar penuh di tepi kanan (dashboard admin) ──────────────
   Kotak mengambang cocok untuk storefront, tapi di dashboard staf bekerja lama
   di dalam inbox — panel yang menempel penuh setinggi layar jauh lebih lega dan
   tidak menutupi konten secara acak.

   Sengaja dibatasi ke >=641px: di bawah itu panel tetap layar penuh (aturan
   mobile di bagian bawah berkas ini), dan selector `#chat-widget.is-docked`
   yang lebih spesifik akan menang kalau tidak dikurung media query. */
@media (min-width: 641px) {
    #chat-widget.is-docked .chat-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 384px;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border: none;
        border-left: 1px solid var(--border, #E2E8F0);
        border-radius: 0;
        box-shadow: -10px 0 30px rgba(15, 23, 42, .12);
    }

    #chat-widget.is-docked .chat-panel.is-open {
        animation: chatDockIn .22s cubic-bezier(.32, .72, 0, 1);
    }
    @keyframes chatDockIn {
        from { opacity: 0; transform: translate3d(28px, 0, 0); }
        to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* Panel setinggi layar: daftar & percakapan dapat ruang lebih banyak. */
    #chat-widget.is-docked .chat-sheet { max-height: 320px; }
}

@media (min-width: 641px) and (max-width: 900px) {
    #chat-widget.is-docked .chat-panel { width: 340px; }
}

body.dark-mode #chat-widget.is-docked .chat-panel {
    border-left-color: var(--border, #232F47);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .45);
}

/* ── Kepala ────────────────────────────────────────────────────────────── */
.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: var(--primary, #2563EB);
    color: #fff;
    flex-shrink: 0;
}
.chat-head-back { display: none; }
.chat-head-avatar {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.chat-head-meta { min-width: 0; flex: 1; }
.chat-head-title { font-size: 14px; font-weight: 800; line-height: 1.2; }
.chat-head-sub {
    font-size: 11px; opacity: .85;
    display: flex; align-items: center; gap: 5px;
}
.chat-head-sub::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #4ADE80; flex-shrink: 0;
}
.chat-head-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.chat-head-btn {
    width: 30px; height: 30px; border: none; border-radius: 8px;
    background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.chat-head-btn:hover { background: rgba(255, 255, 255, .28); color: #fff; }
/* Alasan yang sama seperti pada .chat-tool svg: cegah ikon kolaps di flexbox. */
.chat-head-btn svg,
.chat-head-back svg,
.chat-send svg,
.chat-launcher svg { flex-shrink: 0; }

/* ── Kartu produk yang disematkan di atas percakapan ───────────────────── */
.chat-pinned {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border, #E2E8F0);
    flex-shrink: 0;
}
.chat-pinned[hidden] { display: none; }
.chat-pinned img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg-alt, #F8FAFC); }
.chat-pinned-info { min-width: 0; flex: 1; }
.chat-pinned-name {
    font-size: 12px; font-weight: 700; color: var(--text, #1E293B);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-pinned-price { font-size: 12px; font-weight: 800; color: var(--danger, #DC2626); margin-top: 2px; }
.chat-pinned-buy {
    flex-shrink: 0; padding: 7px 12px; border: none; border-radius: 8px;
    background: var(--primary, #2563EB); color: #fff;
    font-size: 12px; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center;
}
.chat-pinned-buy:hover { background: var(--primary-dark, #1D4ED8); color: #fff; }
.chat-pinned-close {
    flex-shrink: 0; border: none; background: none; cursor: pointer; padding: 4px;
    color: var(--text-muted, #64748B); font-size: 18px; line-height: 1;
}

/* ── Mode staf: daftar percakapan pelanggan ────────────────────────────────
   Pemilik toko membuka widget yang sama dan mendapat INBOX, bukan chat dengan
   dirinya sendiri. */
.chat-inbox {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg, #fff);
}
.chat-inbox[hidden] { display: none; }

.chat-inbox-search { padding: 10px 12px 8px; flex-shrink: 0; }
.chat-inbox-input {
    width: 100%; height: 34px; padding: 0 12px;
    border: 1px solid var(--border, #E2E8F0); border-radius: 999px;
    background: var(--bg-alt, #F8FAFC); color: var(--text, #1E293B);
    font-family: inherit; font-size: 12.5px;
}
.chat-inbox-input:focus { outline: none; border-color: var(--primary, #2563EB); }

.chat-inbox-list { flex: 1; overflow-y: auto; }

.chat-inbox-more {
    display: block; flex-shrink: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #E2E8F0);
    color: var(--primary, #2563EB);
    font-size: 12px; font-weight: 700; text-align: center; text-decoration: none;
}
.chat-inbox-more:hover { background: var(--bg-alt, #F8FAFC); color: var(--primary, #2563EB); }

.chat-conv {
    display: flex; gap: 10px; align-items: flex-start; width: 100%;
    padding: 10px 12px;
    border: none; border-bottom: 1px solid var(--border, #E2E8F0);
    background: none; text-align: left; cursor: pointer;
    color: var(--text, #1E293B); font-family: inherit;
}
.chat-conv:hover { background: var(--bg-alt, #F8FAFC); }

.chat-conv-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%; object-fit: cover;
    background: var(--primary-light, #EFF6FF);
}
.chat-conv-initial {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--primary, #2563EB); font-size: 15px; font-weight: 800;
}

.chat-conv-main { min-width: 0; flex: 1; }
.chat-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-conv-name {
    font-size: 12.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-time { font-size: 10.5px; color: var(--text-muted, #64748B); flex-shrink: 0; }
.chat-conv-last {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--text-muted, #64748B);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-product {
    display: block; margin-top: 1px;
    font-size: 11px; color: var(--primary, #2563EB);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conv-badge {
    flex-shrink: 0; align-self: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--danger, #DC2626); color: #fff;
    font-size: 10px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Tombol kembali ke daftar: tampil di semua ukuran (bukan hanya mobile). */
.chat-head-to-list {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    border: none; border-radius: 8px;
    background: transparent; color: #fff; cursor: pointer;
}
.chat-head-to-list[hidden] { display: none !important; }
.chat-head-to-list:hover { background: rgba(255, 255, 255, .18); }

/* ── Isi percakapan ────────────────────────────────────────────────────── */
.chat-body {
    flex: 1;
    min-height: 0;              /* wajib: tanpa ini flex item tidak mau menyusut */
    overflow-y: auto;
    /* Hanya daftar pesan yang boleh menggulung; gulirannya tidak merembet ke
       halaman di belakang panel. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Cegah cubit-zoom dimulai dari area percakapan supaya tata letak tidak
       bergeser; gulir vertikal tetap normal. */
    touch-action: pan-y;
    padding: 14px;
    background: var(--bg-alt, #F8FAFC);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* display:flex mengalahkan atribut [hidden], jadi harus dinyatakan eksplisit. */
.chat-body[hidden] { display: none; }

.chat-empty { margin: auto; text-align: center; color: var(--text-muted, #64748B); font-size: 13px; padding: 20px; }
.chat-empty strong { display: block; color: var(--text, #1E293B); font-size: 14px; margin-bottom: 4px; }

.chat-day {
    align-self: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bg, #fff);
    border: 1px solid var(--border, #E2E8F0);
    color: var(--text-muted, #64748B);
    font-size: 11px;
    font-weight: 600;
}

.chat-row { display: flex; }
.chat-row.is-mine { justify-content: flex-end; }

.chat-bubble {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg, #fff);
    color: var(--text, #1E293B);
    border: 1px solid var(--border, #E2E8F0);
    border-bottom-left-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-row.is-mine .chat-bubble {
    background: var(--primary, #2563EB);
    color: #fff;
    border-color: transparent;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}
/* Gelembung yang isinya hanya media: padding dikecilkan agar medianya penuh. */
.chat-bubble.is-media { padding: 5px; max-width: 68%; }
.chat-time { display: block; margin-top: 4px; font-size: 10px; opacity: .7; text-align: right; }
.chat-sender { display: block; font-size: 10px; font-weight: 700; opacity: .8; margin-bottom: 2px; }

/* Lampiran gambar / video */
.chat-media {
    display: block;
    width: 100%;
    max-width: 240px;
    max-height: 280px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-alt, #F8FAFC);
    cursor: pointer;
}
.chat-media-video { position: relative; display: inline-block; cursor: pointer; }
.chat-media-video::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 22px;
    pointer-events: none;
}
.chat-caption { display: block; padding: 6px 7px 2px; }

/* Kartu produk yang menempel pada pesan */
.chat-product {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--bg-alt, #F8FAFC);
    border: 1px solid var(--border, #E2E8F0);
    text-decoration: none;
    color: inherit;
}
.chat-product:last-child { margin-bottom: 0; }
.chat-row.is-mine .chat-product { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.chat-product img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #fff; }
.chat-product-body { min-width: 0; flex: 1; }
.chat-product-name { font-size: 11.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-product-price { font-size: 11px; font-weight: 700; opacity: .9; margin-top: 2px; }

/* Kartu pesanan */
.chat-order {
    display: block;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--bg-alt, #F8FAFC);
    border: 1px solid var(--border, #E2E8F0);
    text-decoration: none;
    color: inherit;
}
.chat-order:last-child { margin-bottom: 0; }
.chat-row.is-mine .chat-order { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.chat-order-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-order-code { font-size: 11.5px; font-weight: 800; }
.chat-order-status { font-size: 10px; font-weight: 700; opacity: .85; }
.chat-order-summary { font-size: 11px; opacity: .9; margin-top: 3px; }
.chat-order-total { font-size: 12px; font-weight: 800; margin-top: 4px; }

/* ── Lampiran yang siap dikirim (di atas kolom input) ──────────────────── */
.chat-context {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg, #fff);
    border-top: 1px solid var(--border, #E2E8F0);
    flex-shrink: 0;
}
.chat-context.is-visible { display: flex; }
.chat-context img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.chat-context-body { min-width: 0; flex: 1; }
.chat-context-label { display: block; font-size: 10.5px; color: var(--text-muted, #64748B); }
.chat-context-name {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 11.5px; font-weight: 700; color: var(--text, #1E293B);
}
.chat-context-clear {
    margin-left: auto; border: none; background: none; cursor: pointer;
    color: var(--text-muted, #64748B); font-size: 18px; line-height: 1; padding: 4px;
}

/* ── Balasan cepat ─────────────────────────────────────────────────────── */
.chat-quick {
    display: flex;
    gap: 6px;
    padding: 8px 10px 0;
    overflow-x: auto;
    flex-shrink: 0;
    background: var(--bg, #fff);
    scrollbar-width: none;
}
.chat-quick[hidden] { display: none; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 999px;
    background: var(--bg-alt, #F8FAFC);
    color: var(--text, #1E293B);
    font-family: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.chat-quick-chip:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }

/* ── Kolom input + alat lampiran ───────────────────────────────────────── */
.chat-foot {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border, #E2E8F0);
    background: var(--bg, #fff);
    flex-shrink: 0;
}
/* Toolbar lampiran: setiap tombol adalah target sentuh 40px (44px di mobile)
   dengan latar bulat semi-transparan supaya ikon tetap terbaca di light maupun
   dark mode — bukan ikon telanjang tipis yang nyaris hilang. */
.chat-tools {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.chat-tool {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border: none; border-radius: 12px;
    background: var(--bg-alt, #F1F5F9);
    color: var(--text, #334155);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.chat-tool svg {
    width: 22px; height: 22px;
    /* WAJIB: <svg> tanpa atribut width/height adalah elemen pengganti; sebagai
       flex item ia ikut menyusut dan lebarnya kolaps (terukur hanya 8px),
       itulah sebabnya ikon toolbar tampak seperti titik kecil. */
    flex-shrink: 0;
    /* Menimpa atribut stroke-width di markup: garis lebih tebal jauh lebih
       terbaca pada latar gelap. */
    stroke-width: 2.1;
}
.chat-tool:hover, .chat-tool.is-active {
    background: var(--primary-light, #EFF6FF);
    color: var(--primary, #2563EB);
}
.chat-tool:active { transform: scale(.92); }

.chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.chat-input {
    flex: 1;
    resize: none;
    max-height: 96px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 10px;
    background: var(--bg-alt, #F8FAFC);
    color: var(--text, #1E293B);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}
.chat-input:focus { outline: none; border-color: var(--primary, #2563EB); }
.chat-send {
    width: 40px; height: 40px; flex-shrink: 0;
    border: none; border-radius: 12px;
    background: var(--primary, #2563EB); color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.chat-send:active { transform: scale(.92); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Panel emoji / etalase / pesanan ───────────────────────────────────────
   Bukan overlay: panel ini menjadi anak flex tepat di atas kolom input, jadi
   pengguna tetap melihat apa yang sedang diketik saat memilih emoji/produk. */
.chat-sheet {
    flex-shrink: 0;
    max-height: 250px;
    display: flex;
    flex-direction: column;
    background: var(--bg, #fff);
    border-top: 1px solid var(--border, #E2E8F0);
    animation: chatSheetIn .16s ease;
}
.chat-sheet[hidden] { display: none; }
@keyframes chatSheetIn { from { opacity: 0; } to { opacity: 1; } }

.chat-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #E2E8F0);
    font-size: 12.5px; font-weight: 800; color: var(--text, #1E293B);
    flex-shrink: 0;
}
.chat-sheet-close {
    border: none; background: none; cursor: pointer;
    color: var(--text-muted, #64748B); font-size: 20px; line-height: 1; padding: 0 4px;
}
.chat-sheet-search { padding: 8px 12px 0; flex-shrink: 0; }
.chat-sheet-input {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid var(--border, #E2E8F0); border-radius: 8px;
    background: var(--bg-alt, #F8FAFC); color: var(--text, #1E293B);
    font-family: inherit; font-size: 12.5px;
}
.chat-sheet-input:focus { outline: none; border-color: var(--primary, #2563EB); }
.chat-sheet-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-sheet-empty { padding: 20px; text-align: center; color: var(--text-muted, #64748B); font-size: 12.5px; }

.chat-pick {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px; border: none; border-radius: 10px;
    background: transparent; color: var(--text, #1E293B);
    font-family: inherit; text-align: left; cursor: pointer;
}
.chat-pick:hover { background: var(--bg-alt, #F8FAFC); }
.chat-pick img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: var(--bg-alt, #F8FAFC); }
.chat-pick-body { min-width: 0; flex: 1; }
.chat-pick-name {
    font-size: 12px; font-weight: 700;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-pick-meta { font-size: 11px; color: var(--text-muted, #64748B); margin-top: 2px; }
.chat-pick-price { font-size: 11.5px; font-weight: 800; color: var(--danger, #DC2626); margin-top: 2px; }

.chat-emoji-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.chat-emoji {
    border: none; background: none; cursor: pointer;
    font-size: 20px; line-height: 1; padding: 6px 0; border-radius: 8px;
}
.chat-emoji:hover { background: var(--bg-alt, #F8FAFC); }

/* ── Pratinjau media ukuran penuh ──────────────────────────────────────── */
.chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(2, 6, 23, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.chat-lightbox[hidden] { display: none; }
.chat-lightbox-inner { max-width: 100%; max-height: 100%; }
.chat-lightbox-inner img,
.chat-lightbox-inner video { max-width: 100%; max-height: 86vh; border-radius: 10px; display: block; }
.chat-lightbox-close {
    position: absolute; top: 14px; right: 18px;
    width: 38px; height: 38px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 24px; line-height: 1; cursor: pointer;
}

.chat-login {
    margin: auto;
    text-align: center;
    padding: 24px 20px;
    color: var(--text-muted, #64748B);
    font-size: 13px;
}
.chat-login .btn { margin-top: 12px; }

/* ── Kontras mode gelap ────────────────────────────────────────────────────
   Token --bg-alt/--text-muted berbeda antara layout storefront dan dashboard
   admin, dan beberapa di antaranya terlalu redup untuk ikon kecil. Nilai di
   bawah ditetapkan eksplisit supaya seluruh ikon toolbar tetap terbaca (rasio
   kontras > 4.5:1 terhadap latarnya) di kedua layout. */
body.dark-mode .chat-tool {
    background: rgba(148, 163, 184, .16);
    color: #E2E8F0;
}
body.dark-mode .chat-tool:hover,
body.dark-mode .chat-tool.is-active {
    background: rgba(59, 130, 246, .26);
    color: #BFDBFE;
}
body.dark-mode .chat-input {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .28);
    color: #F1F5F9;
}
body.dark-mode .chat-input::placeholder { color: #94A3B8; }
body.dark-mode .chat-quick-chip {
    background: rgba(148, 163, 184, .14);
    border-color: rgba(148, 163, 184, .26);
    color: #E2E8F0;
}
body.dark-mode .chat-sheet-input,
body.dark-mode .chat-inbox-input {
    background: rgba(148, 163, 184, .12);
    border-color: rgba(148, 163, 184, .28);
    color: #F1F5F9;
}
body.dark-mode .chat-context-name,
body.dark-mode .chat-pinned-name { color: #F1F5F9; }
body.dark-mode .chat-context-label,
body.dark-mode .chat-conv-time,
body.dark-mode .chat-conv-last { color: #94A3B8; }

/* ── Mobile: layar penuh (gaya aplikasi chat) ──────────────────────────── */
@media (max-width: 640px) {
    .chat-panel {
        top: 0; right: 0; bottom: auto; left: 0;
        width: 100%;
        max-width: 100%;
        /* --chat-vh diisi JS dari window.visualViewport supaya panel selalu
           setinggi area yang BENAR-BENAR terlihat. Tanpa ini, saat papan ketik
           muncul di iOS panel tetap setinggi layout viewport dan kolom ketik
           tertimbun di balik keyboard. 100dvh dipakai sebagai nilai awal yang
           sudah benar sebelum JS sempat jalan (tidak ada lompatan). */
        height: var(--chat-vh, 100dvh);
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        /* Digeser mengikuti visualViewport.offsetTop — transform, bukan top,
           supaya tidak memicu reflow tiap frame. */
        transform: translate3d(0, var(--chat-vtop, 0px), 0);
        transition: transform .24s cubic-bezier(.32, .72, 0, 1);
        will-change: transform;
    }
    /* Animasi masuk hanya opacity: transform sudah dipakai untuk mengunci
       posisi terhadap keyboard, jadi keduanya tidak boleh saling menimpa. */
    .chat-panel.is-open { animation: chatPanelFade .2s ease; }
    @keyframes chatPanelFade { from { opacity: 0; } to { opacity: 1; } }

    .chat-head {
        padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    }
    .chat-head-back {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; margin-left: -6px; flex-shrink: 0;
        border: none; border-radius: 12px;
        background: transparent; color: #fff; cursor: pointer;
        touch-action: manipulation;
    }
    .chat-head-btn { width: 38px; height: 38px; }

    .chat-bubble { max-width: 84%; }
    .chat-bubble.is-media { max-width: 76%; }
    .chat-media { max-width: 220px; }
    .chat-sheet { max-height: 46vh; }
    .chat-emoji-grid { grid-template-columns: repeat(7, 1fr); }

    /* Target sentuh penuh 44px sesuai pedoman aksesibilitas. */
    .chat-tool, .chat-send { width: 44px; height: 44px; }
    .chat-tool svg { width: 23px; height: 23px; }
    .chat-tools { gap: 8px; }

    .chat-quick-chip { padding: 9px 14px; font-size: 12.5px; }

    .chat-foot {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }
    .chat-input {
        /* iOS memperbesar halaman otomatis saat fokus ke input < 16px — itulah
           yang membuat tata letak "meloncat" dan bergeser. 16px mematikannya. */
        font-size: 16px;
        min-height: 44px;
        padding: 11px 14px;
    }

    /* Panel menutupi seluruh layar, jadi tombol mengambang di baliknya hanya
       mengganggu. */
    body.chat-open .chat-launcher { display: none; }
}

/* Layar sangat sempit (320px): rapatkan tanpa mengorbankan target sentuh. */
@media (max-width: 360px) {
    .chat-tools { gap: 4px; }
    .chat-tool { width: 40px; height: 40px; }
    .chat-foot { padding-left: 8px; padding-right: 8px; }
}

/* Panel terbuka = halaman di belakangnya tidak ikut menggulung. */
body.chat-open { overflow: hidden; }
@media (min-width: 641px) {
    body.chat-open { overflow: auto; }
    .chat-backdrop { display: none; }
}

/* ── CTA sekunder di halaman produk ────────────────────────────────────────
   "Beli Via Whatsapp" + "Chat Sekarang". Keduanya solid (bukan outline) agar
   sebobot dengan tombol keranjang; warnanya dibedakan supaya tetap terbaca
   mana yang keluar ke WhatsApp dan mana yang membuka chat di dalam situs. */
.pd-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.25rem;
}
.pd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition, .15s ease), box-shadow var(--transition, .15s ease), transform .12s ease;
}
.pd-cta:active { transform: translateY(1px); }
.pd-cta svg { flex-shrink: 0; }

.pd-cta-wa { background: #25D366; box-shadow: 0 2px 10px rgba(37, 211, 102, .28); }
.pd-cta-wa:hover { background: #1EB955; color: #fff; box-shadow: 0 4px 16px rgba(37, 211, 102, .38); }

.pd-cta-chat { background: var(--primary, #2563EB); box-shadow: 0 2px 10px rgba(37, 99, 235, .26); }
.pd-cta-chat:hover { background: var(--primary-dark, #1D4ED8); box-shadow: 0 4px 16px rgba(37, 99, 235, .36); }

@media (min-width: 480px) {
    .pd-cta-stack { flex-direction: row; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-launcher, .chat-panel, .chat-sheet, .pd-cta { transition: none; animation: none; }
}