/* =====================================================================
   Chat "Tanya Cibi" (beranda). Pasangan js/obrolan.js.
   Warna mengikuti situs: navy #1e2a4f, biru #005da7, kuning #feb300.
   ===================================================================== */
.ob-luncur { position: fixed; right: 24px; bottom: 88px; z-index: 50; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at 50% 30%, #fff 0, #eef3fa 100%); box-shadow: 0 10px 24px -8px rgba(30,42,79,.5), 0 0 0 1px rgba(30,42,79,.08);
    -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.ob-luncur:hover { transform: translateY(-3px) scale(1.07); }
.ob-luncur:focus-visible { outline: 3px solid #feb300; outline-offset: 3px; }
.ob-luncur-kepala { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.ob-luncur-kepala svg { position: absolute; left: 50%; top: 9px; width: 46px; transform: translateX(-50%); animation: obIntip 4.5s ease-in-out infinite; }
@keyframes obIntip { 0%, 70%, 100% { transform: translateX(-50%) translateY(0) rotate(0); } 78% { transform: translateX(-50%) translateY(-3px) rotate(-8deg); } 86% { transform: translateX(-50%) translateY(-1px) rotate(6deg); } }
.ob-luncur-titik { position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%; background: #34d399; border: 2.5px solid #fff; }
.ob-luncur-titik.off { background: #feb300; }
.ob-terbuka .ob-luncur { transform: scale(.92); }

.ob-teaser { position: fixed; right: 86px; bottom: 98px; z-index: 50; max-width: 210px; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: #fff; color: #1e2a4f;
    font: 700 12.5px/1.35 'Sora', sans-serif; box-shadow: 0 12px 28px -12px rgba(30,42,79,.45), 0 0 0 1px rgba(30,42,79,.06); cursor: pointer;
    opacity: 0; transform: translateX(8px) scale(.9); transform-origin: 100% 100%; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ob-teaser.tampil { opacity: 1; transform: none; pointer-events: auto; }

.ob-latar { position: fixed; inset: 0; z-index: 64; background: rgba(15,23,42,.38); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
@media (min-width: 641px) { .ob-latar { display: none; } }
.ob-latar.tampil { opacity: 1; visibility: visible; }

.ob-panel { position: fixed; z-index: 65; right: 24px; bottom: 152px; width: 372px; height: min(580px, calc(100vh - 176px)); display: flex; flex-direction: column;
    background: #f4f7fb; color: #191c1e; font-family: 'Sora', sans-serif; border-radius: 24px; overflow: hidden;
    box-shadow: 0 28px 64px -20px rgba(15,23,42,.5), 0 0 0 1px rgba(30,42,79,.08);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.95); transform-origin: 100% 100%;
    transition: opacity .22s, transform .32s cubic-bezier(.3, 1.3, .5, 1), visibility .32s; }
.ob-panel.buka { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 640px) {
    .ob-panel { left: 0; right: 0; bottom: 0; width: auto; height: 86vh; height: 86dvh; border-radius: 24px 24px 0 0; transform: translateY(100%); transform-origin: 50% 100%; }
    .ob-panel.buka { transform: none; }
    html.ob-terbuka, html.ob-terbuka body { overflow: hidden; }
}

.ob-kepala { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 12px 14px 14px; color: #fff;
    background: radial-gradient(circle at 85% -20%, rgba(110,196,255,.35) 0, transparent 55%), linear-gradient(200deg, #123a6b 0%, #1e2a4f 60%, #18213f 100%); }
.ob-kepala::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.ob-avatar { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #fff 0, #dbe5f2 100%); box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.ob-avatar svg { position: absolute; left: 50%; top: 8px; width: 42px; transform: translateX(-50%); }
.ob-avatar.ob-hop svg { animation: obLompat .55s cubic-bezier(.3, 1.6, .5, 1); }
.ob-avatar.ob-hop .mk-mata { display: none; } .ob-avatar.ob-hop .mk-senang { display: inline; }
@keyframes obLompat { 0%, 100% { transform: translateX(-50%); } 40% { transform: translateX(-50%) translateY(-5px) rotate(-6deg); } }
.ob-nama { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ob-nama p { margin: 0; }
#ob-judul { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ob-status { display: flex; align-items: center; gap: 6px; margin-top: 2px !important; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.72); }
.ob-status i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.ob-status.off i { background: #feb300; box-shadow: 0 0 0 3px rgba(254,179,0,.2); }
.ob-tutup { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.ob-tutup:hover { background: rgba(255,255,255,.2); }
.ob-tutup .material-symbols-outlined { font-size: 20px; }

.ob-isi { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.ob-baris { display: flex; align-items: flex-end; gap: 7px; animation: obMasuk .3s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes obMasuk { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.ob-baris.kamu { justify-content: flex-end; }
.ob-ava-kecil { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 2px 6px -2px rgba(30,42,79,.3); }
.ob-ava-kecil svg { position: absolute; left: 50%; top: 5px; width: 27px; transform: translateX(-50%); }
.ob-gel { max-width: 84%; padding: 10px 13px; border-radius: 18px 18px 18px 6px; background: #fff; color: #1e2a4f; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 10px -6px rgba(30,42,79,.35); overflow-wrap: anywhere; }
.kamu .ob-gel { background: #005da7; color: #fff; border-radius: 18px 18px 6px 18px; }
.ob-gel p { margin: 0; }
.ob-gel p + p, .ob-gel p + ol, .ob-gel ol + p, .ob-gel .ob-tabel + p, .ob-gel .ob-kartu-daftar + p { margin-top: 8px; }
.ob-gel ol { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: ob; display: grid; gap: 8px; }
.ob-gel li { counter-increment: ob; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.ob-gel li::before { content: counter(ob); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e6effa; color: #005da7; font-size: 11px; font-weight: 800; }
.ob-gel li b { display: block; font-size: 12.5px; line-height: 1.35; }
.ob-gel li span { display: block; margin-top: 1px; font-size: 11.5px; color: #5b6676; line-height: 1.45; }
.ob-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ob-tombol a, .ob-tombol button { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #cfdcec; background: #fff; color: #005da7;
    font: 700 12px/1.2 'Sora', sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s; }
.ob-tombol a:hover, .ob-tombol button:hover { transform: translateY(-1px); background: #f0f6fd; }
.ob-tombol .material-symbols-outlined { font-size: 15px; }
.ob-tombol .utama { background: #005da7; border-color: #005da7; color: #fff; }
.ob-tombol .utama:hover { background: #004f8f; }
.ob-tombol .wa { background: #00b85c; border-color: #00b85c; color: #fff; }
.ob-tombol .wa:hover { background: #00a352; }
.ob-tabel { margin-top: 2px; border-radius: 12px; background: #f4f7fb; padding: 8px 10px; }
.ob-tabel-judul { font-size: 11px; font-weight: 800; color: #5b6676; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px !important; }
.ob-tabel div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.ob-tabel div.tebal { margin-top: 3px; padding-top: 6px; border-top: 1px dashed #cfdcec; font-weight: 800; color: #005da7; }
.ob-kartu-daftar { display: grid; gap: 7px; margin-top: 8px; }
.ob-kartu { display: flex; gap: 10px; align-items: center; padding: 7px; border-radius: 14px; background: #f4f7fb; border: 1px solid #e3eaf3; color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.ob-kartu:hover { transform: translateY(-1px); border-color: #b9cde6; }
.ob-kartu-foto { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #e6edf6; display: grid; place-items: center; color: #9aa9bd; }
.ob-kartu-foto img { width: 100%; height: 100%; object-fit: cover; }
.ob-kartu-teks { min-width: 0; display: grid; gap: 1px; }
.ob-kartu-teks b { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-harga { font-size: 12.5px; font-weight: 800; color: #ea580c; }
.ob-harga s { font-size: 10.5px; font-weight: 600; color: #94a3b8; }
.ob-kartu-teks small { font-size: 10.5px; color: #64748b; }
.ob-ketik { display: inline-flex; gap: 4px; padding: 13px 14px; }
.ob-ketik i { width: 7px; height: 7px; border-radius: 50%; background: #9fb3cc; animation: obKetik 1s ease-in-out infinite; }
.ob-ketik i:nth-child(2) { animation-delay: .15s; } .ob-ketik i:nth-child(3) { animation-delay: .3s; }
@keyframes obKetik { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.ob-saran { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 4px; scrollbar-width: none; flex-shrink: 0; }
.ob-saran::-webkit-scrollbar { display: none; }
.ob-chip { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #cfdcec; background: #fff; color: #1e2a4f; font: 700 12px/1.2 'Sora', sans-serif; white-space: nowrap; cursor: pointer; transition: transform .2s, border-color .2s, background-color .2s; }
.ob-chip:hover { transform: translateY(-1px); border-color: #005da7; background: #f0f6fd; }
.ob-form { display: flex; gap: 8px; padding: 6px 12px 6px; flex-shrink: 0; }
.ob-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #dbe5f2; background: #fff; color: #1e2a4f; font: 500 14px 'Sora', sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
@media (max-width: 640px) { .ob-form input { font-size: 16px; } }
.ob-form input:focus { border-color: #005da7; box-shadow: 0 0 0 3px rgba(0,93,167,.12); }
.ob-form button { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #005da7; color: #fff; cursor: pointer; transition: transform .2s, background-color .2s; }
.ob-form button:hover { background: #004f8f; transform: scale(1.05); }
.ob-form button .material-symbols-outlined { font-size: 20px; }
.ob-catatan { margin: 0; padding: 2px 14px 12px; text-align: center; font-size: 10.5px; color: #6b7280; }
.ob-catatan a { color: #00a352; font-weight: 700; text-decoration: none; }
.ob-catatan a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .ob-luncur-kepala svg, .ob-avatar.ob-hop svg, .ob-baris, .ob-ketik i { animation: none !important; }
    .ob-panel, .ob-teaser, .ob-latar, .ob-luncur { transition: none !important; }
}

/* bagian halaman yang ditunjuk Cibi ("Tunjukkan di halaman") */
.ob-sorot { outline: 3px solid #feb300 !important; outline-offset: 6px; border-radius: 10px; animation: obSorot 2.4s ease-out; scroll-margin: 90px; }
@keyframes obSorot { 0%, 30% { outline-color: #feb300; box-shadow: 0 0 0 10px rgba(254, 179, 0, .25); } 100% { outline-color: rgba(254, 179, 0, 0); box-shadow: 0 0 0 0 rgba(254, 179, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .ob-sorot { animation: none; } }

/* HP: menyelip ke tepi saat menggulir ke bawah (lihat js/obrolan.js) */
.ob-luncur { transition: transform .35s cubic-bezier(.3, 1.7, .5, 1), opacity .25s ease, bottom .3s ease; }
.wa-btn.wa-tetap { transition: transform .35s cubic-bezier(.3, 1.7, .5, 1), opacity .25s ease, bottom .3s ease, width .3s ease, border-radius .3s ease; }
.ob-luncur.ob-selip, .wa-btn.wa-tetap.ob-selip, .wa-btn.floating-wa.ob-selip { transform: translateX(84px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .2s ease, bottom .3s ease; }
@media (prefers-reduced-motion: reduce) { .ob-luncur.ob-selip, .wa-btn.wa-tetap.ob-selip, .wa-btn.floating-wa.ob-selip { transform: none; } }

/* tawaran bantuan (checkout & produk): gelembung disorot + denyut di tombol Cibi */
.ob-teaser.bantu { border-left: 3px solid #feb300; font-weight: 700; max-width: 230px; }
.ob-luncur.ob-ping::after { content: ''; position: absolute; inset: -5px; border-radius: 9999px; border: 2px solid #feb300; animation: obPing 1.6s ease-out infinite; pointer-events: none; }
@keyframes obPing { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ob-luncur.ob-ping::after { animation: none; opacity: .8; } }