/* WINNY AI — panel chat situs publik (22 Okt 2026), rupa dari mockup yang disetujui pemilik. Skrip: assets/js/winny.js.
   Layar lebar (>= 721px): panel mengambang kanan bawah 400 x 640. HP: pop-up mengambang. Warna = token wm-baru.css (cadangan bila tidak ada). */
.winny-tombol, .winny-panel { --wn-navy: var(--wm-navy, #18225C); --wn-oranye: var(--wm-oranye, #C24E12); --wn-tinta: var(--wm-tinta, #1E2333);
  --wn-redup: var(--wm-redup, #5B6178); --wn-garis: var(--wm-garis, #E6E8EF); --wn-latar: var(--wm-latar, #F6F7FA);
  font-family: var(--wm-huruf, 'Plus Jakarta Sans', system-ui, sans-serif); box-sizing: border-box; }
.winny-panel *, .winny-tombol * { box-sizing: border-box; }

/* TOMBOL MENCOLOK (pemilik 22 Okt 2026: "aku butuh sesuatu yang mencolok … tapi kalau versi HP jgn kayak gitu stylenya"; "kalau di HP jgn
   panjang gitu, karna layar hp kan kecil"): layar lebar = pil OREN tegas (ikon chat + teks putih) dengan denyut cahaya halus tiap
   beberapa detik; HP (<= 720px, blok bawah) = bulatan oranye 56px ikon saja. ~~pil putih "W WinMax Assistant"~~ (tenggelam di halaman). */
.winny-tombol { position: fixed; right: 20px; bottom: calc(20px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); z-index: 9000;
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #E0671F 0%, var(--wn-oranye) 100%); color: #FFFFFF; cursor: pointer;
  box-shadow: 0 6px 16px rgba(194,78,18,.35), 0 16px 36px rgba(16,22,60,.18); animation: winny-denyut 6s ease-out 2s infinite; }
.winny-tombol:hover { filter: brightness(1.06); transform: translateY(-1px); }
.winny-tombol:focus-visible { outline: 3px solid rgba(24,34,92,.45); outline-offset: 3px; }
.winny-tombol[hidden] { display: none; }
.winny-tombol-ikon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; color: #FFFFFF; }
.winny-tombol-teks { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.winny-tombol-teks b { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.winny-tombol-teks small { font-size: 12.5px; color: rgba(255,255,255,.88); }
@keyframes winny-denyut {
  0% { box-shadow: 0 0 0 0 rgba(224,103,31,.55), 0 6px 16px rgba(194,78,18,.35), 0 16px 36px rgba(16,22,60,.18); }
  18% { box-shadow: 0 0 0 14px rgba(224,103,31,0), 0 6px 16px rgba(194,78,18,.35), 0 16px 36px rgba(16,22,60,.18); }
  100% { box-shadow: 0 0 0 0 rgba(224,103,31,0), 0 6px 16px rgba(194,78,18,.35), 0 16px 36px rgba(16,22,60,.18); }
}
@media (prefers-reduced-motion: reduce) { .winny-tombol { animation: none; } }

/* MASKOT ROBOT (pemilik 22 Okt 2026: "aku kan punya mascot AI" -> "ya kerjakan ketiganya"): layar lebar = robot menyembul dari sisi kiri
   pil (lebih tinggi dari pilnya) + sapaan sekali per sesi; HP = bulatan berisi kepala robot; panel = avatar kepala, robot bergoyang saat
   mencari, robot menyapa di pesan pertama. Gerak mati bila prefers-reduced-motion. */
.winny-tombol { padding-left: 104px; }
.winny-tombol-robot { position: absolute; left: -8px; bottom: 0; height: 100px; width: auto; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(16,22,60,.28)); transform-origin: 50% 100%; animation: winny-goyang 5s ease-in-out infinite; }
.winny-tombol-ikon { display: none; }
.winny-tombol-pendek { display: none; }
@keyframes winny-goyang { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-4deg) translateY(-2px); } 75% { transform: rotate(3deg) translateY(-1px); } }
.winny-avatar { overflow: hidden; background: #EAF1FF; box-shadow: inset 0 0 0 1px rgba(24,34,92,.08); }
.winny-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.12) translateY(1px); }
.winny-ketik { align-items: center; }
.winny-ketik-robot { width: 30px; height: 30px; margin-right: 4px; animation: winny-goyang 1.2s ease-in-out infinite; }
.winny-sambut { display: flex; align-items: flex-end; gap: 8px; }
.winny-sambut-robot { flex: none; height: 84px; width: auto; margin-left: -6px; filter: drop-shadow(0 4px 8px rgba(16,22,60,.18)); }
.winny-sambut .winny-gel { max-width: none; flex: 1; }
.winny-sapa { position: fixed; right: 28px; bottom: calc(108px + var(--winny-angkat, 0px)); z-index: 9000; display: flex; align-items: flex-start; gap: 4px;
  max-width: 280px; padding: 12px 8px 12px 16px; border-radius: 16px 16px 4px 16px; background: #FFFFFF; border: 1px solid var(--wn-garis, #E6E8EF);
  box-shadow: 0 12px 30px rgba(16,22,60,.18); font-family: var(--wm-huruf, 'Plus Jakarta Sans', system-ui, sans-serif); animation: winny-muncul .35s ease-out; }
.winny-sapa[hidden] { display: none; }
.winny-sapa-teks { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--wm-tinta, #1E2333); cursor: pointer; }
.winny-sapa-tutup { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #5B6178; display: grid; place-items: center; cursor: pointer; }
.winny-sapa-tutup:hover { background: #F3F4F8; }
@keyframes winny-muncul { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .winny-tombol-robot, .winny-ketik-robot, .winny-sapa { animation: none; } }

/* TEMA ORANYE (pemilik 22 Okt 2026: "tema kita tetap orange yaa, untuk Assistant ini"): ~~kepala putih, gelembung pengunjung & tombol
   agen navy~~ -> kepala panel oranye bergradasi berteks putih, gelembung pengunjung oranye, tombol "Tanya <agen>" oranye (sama dengan tombol
   WhatsApp kartu situs), "Cari yang mirip" & sorotan isian bergaris oranye. Dipasang SESUDAH aturan dasar supaya menang. */
.winny-panel .winny-kepala { background: linear-gradient(135deg, #E0671F 0%, var(--wn-oranye) 100%); border-bottom: 0; color: #FFFFFF; }
.winny-panel .winny-kepala-teks small { color: rgba(255,255,255,.88); }
.winny-panel .winny-ikon { background: rgba(255,255,255,.18); color: #FFFFFF; }
.winny-panel .winny-ikon:hover { background: rgba(255,255,255,.3); }
.winny-panel .winny-avatar { background: #FFFFFF; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.winny-panel .winny-gel--saya { background: var(--wn-oranye); }
.winny-panel .winny-wa { background: var(--wn-oranye); }
.winny-panel .winny-wa:hover { background: #A8410E; }
.winny-panel .winny-mirip { border-color: #F2C6A8; color: #9A3D0E; }
.winny-panel .winny-mirip:hover { background: #FFF6F0; }
.winny-panel .winny-chip:hover { border-color: #F2C6A8; background: #FFF6F0; }
.winny-panel .winny-masukan:focus, .winny-panel .winny-titip input:focus { outline: 2px solid rgba(194,78,18,.25); border-color: var(--wn-oranye); }
.winny-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--wn-navy); color: #FFFFFF; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }

.winny-panel { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 9001; width: 400px; height: min(640px, calc(100vh - 48px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--wn-latar); border: 1px solid #E1E4EC;
  box-shadow: 0 24px 60px rgba(20,25,54,.22); color: var(--wn-tinta); font-size: 14px; line-height: 1.5; }
.winny-panel[hidden] { display: none; }
.winny-kepala { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: #FFFFFF; border-bottom: 1px solid var(--wn-garis); }
.winny-kepala-teks { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.winny-kepala-teks b { font-size: 16px; font-weight: 800; }
.winny-kepala-teks small { font-size: 12.5px; color: var(--wn-redup); }
.winny-ikon { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: #F3F4F8; color: var(--wn-navy); display: grid; place-items: center; cursor: pointer; }
.winny-ikon:hover { background: #E9EBF2; }

.winny-isi { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
/* ⛔ ANAK ISI TIDAK BOLEH DIPERAS (pemilik 23 Okt 2026, potret HP: "bug, pilihannya gak bisa di scroll kebawah" — tombol kamar tinggal
   garis atasnya). Baris pilihan & baris kartu HP bisa digeser ke samping (overflow-x: auto) = wadah gulir, dan di kolom flex wadah gulir
   bertinggi minimum 0: begitu isi chat penuh, barisnya DIPERAS alih-alih isi chat yang digulir. */
.winny-isi > * { flex-shrink: 0; }
.winny-gel { max-width: 86%; padding: 10px 13px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.winny-gel--winny { align-self: flex-start; border-radius: 4px 16px 16px 16px; background: #FFFFFF; border: 1px solid var(--wn-garis); }
.winny-gel--saya { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: var(--wn-navy); color: #FFFFFF; }
.winny-ketik { display: flex; gap: 5px; padding: 14px 16px; }
.winny-ketik span { width: 7px; height: 7px; border-radius: 50%; background: #A7ACC0; animation: winny-titik 1.1s infinite ease-in-out; }
.winny-ketik span:nth-child(2) { animation-delay: .15s; }
.winny-ketik span:nth-child(3) { animation-delay: .3s; }
@keyframes winny-titik { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .winny-ketik span { animation: none; } }

.winny-deret { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; flex: none; }
/* TANPA BATANG GESER (pemilik 23 Okt 2026: "kalau geser kiri kanan lewat bawah itu kayaknya jadul banget deh"): batang disembunyikan,
   tombol panah bulat di tepi deret (winny.js deretEl) muncul hanya bila masih ada kartu ke arah itu. */
.winny-deret-bungkus { position: relative; flex: none; }
.winny-deret-bungkus .winny-deret { scrollbar-width: none; scroll-behavior: smooth; }
.winny-deret-bungkus .winny-deret::-webkit-scrollbar { display: none; }
.winny-geser { position: absolute; top: 58px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #E1E4EC; background: rgba(255,255,255,.96);
  color: var(--wn-tinta); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(16,22,60,.18); padding: 0; }
.winny-geser:hover { border-color: #F2C6A8; color: #9A3D0E; }
.winny-geser[hidden] { display: none; }
.winny-geser--kiri { left: -6px; }
.winny-geser--kanan { right: -6px; }
/* BALASAN BERTAHAP (pemilik 23 Okt 2026: "kasih semacam typing, jgn langsung keluar semua"): tiap bagian masuk halus. */
.winny-muncul { animation: winny-masuk .3s ease-out both; }
@keyframes winny-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .winny-muncul { animation: none; } }
.winny-kartu { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--wn-garis); }
.winny-kartu-foto { position: relative; display: block; height: 150px; background: #FFFFFF; }
/* FOTO UTUH (pemilik 22 Okt 2026 atas kartu chat "Tropical Modern Graha Family": "kok fotonya kepotong sih") — sama dengan aturan kartu
   situs ("semua foto harus kelihatan full, jangan kepotong", sisa ruang PUTIH). ~~object-fit: cover~~. */
.winny-kartu-foto { border-bottom: 1px solid var(--wn-garis); }
.winny-kartu-foto img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; display: block; }
.winny-lencana { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.winny-lencana span { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--wn-navy); }
.winny-lencana .winny-hot { background: var(--wn-oranye); color: #FFFFFF; }
.winny-panel a.winny-kartu-badan, .winny-panel a.winny-kartu-badan:hover { color: var(--wn-tinta); text-decoration: none; }
.winny-kartu-badan { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 8px; text-decoration: none; color: var(--wn-tinta); }
.winny-harga { font-size: 15px; font-weight: 800; color: var(--wn-navy); }
.winny-judul { color: var(--wn-tinta); font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.winny-spek { font-size: 11.5px; color: var(--wn-redup); line-height: 1.4; }
.winny-wa { margin: auto 12px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px;
  background: var(--wn-navy); color: #FFFFFF !important; text-decoration: none; font-size: 13px; font-weight: 700; }
.winny-wa:hover { background: #10163C; }
.winny-mirip { margin: -4px 12px 12px; min-height: 40px; border: 1px solid #DADDE7; border-radius: 10px; background: #FFFFFF; color: var(--wn-navy); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.winny-mirip:hover { background: #F6F7FA; }
/* Tombol WA tidak lagi dipaksa ke dasar kartu bila ada tombol mirip sesudahnya. */
.winny-kartu .winny-wa + .winny-mirip { margin-top: 0; }
/* Pilihan agen: tombol di kartu (seukuran tombol "Tanya"), daftarnya di LEMBAR yang menutupi chat. */
button.winny-wa { border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; width: calc(100% - 24px); }
.winny-lembar { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: #FFFFFF; animation: winny-lembar-naik .18s ease-out; }
@keyframes winny-lembar-naik { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .winny-lembar { animation: none; } }
.winny-lembar-kepala { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--wn-garis); }
.winny-panel .winny-lembar .winny-ikon { background: #F3F4F8; color: var(--wn-navy); }
.winny-panel .winny-lembar .winny-ikon:hover { background: #E8EAF1; }
.winny-lembar-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.winny-lembar-judul b { font-size: 16px; font-weight: 800; }
.winny-lembar-judul small { font-size: 12px; color: var(--wn-redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winny-lembar-cari { margin: 10px 16px 4px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #DADDE7; background: #F9FAFC; font: inherit; font-size: 14px; color: var(--wn-tinta); }
.winny-lembar-cari:focus { outline: 2px solid rgba(194,78,18,.25); border-color: var(--wn-oranye); background: #FFFFFF; }
.winny-lembar-daftar { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; }
.winny-lembar-kosong { margin: 18px 8px; color: var(--wn-redup); font-size: 13px; text-align: center; }
.winny-panel a.winny-agen { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; color: var(--wn-tinta); text-decoration: none; }
.winny-panel a.winny-agen:hover { background: #FFF6F0; }
.winny-panel a.winny-agen[hidden] { display: none; }
.winny-agen + .winny-agen { border-top: 1px solid #F0F1F5; }
.winny-agen-inisial { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #FDEBDD; color: #9A3D0E; font-size: 13px; font-weight: 800; }
.winny-agen-inisial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #FDEBDD; }
.winny-agen-teks { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.winny-agen-teks b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winny-agen-teks small { font-size: 12px; color: var(--wn-redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winny-agen-chat { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--wn-oranye); color: #FFFFFF; font-size: 12.5px; font-weight: 700; }
.winny-kartu .winny-wa:has(+ .winny-mirip) { margin-bottom: 8px; }

.winny-saran { display: flex; flex-wrap: wrap; gap: 8px; }
.winny-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #DADDE7; background: #FFFFFF; font: inherit; font-size: 13px; font-weight: 600; color: var(--wn-tinta); cursor: pointer; }
.winny-chip:hover { border-color: #C3C7D6; background: #FAFBFD; }
.winny-chip--utama { border-color: #F2C6A8; background: #FFF6F0; color: #9A3D0E; }

.winny-banding { border-radius: 14px; overflow-x: auto; background: #FFFFFF; border: 1px solid var(--wn-garis); flex: none; }
.winny-banding table { width: 100%; border-collapse: collapse; font-size: 13px; }
.winny-banding th, .winny-banding td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF0F5; }
.winny-banding tr:last-child td { border-bottom: 0; }
.winny-banding th { font-weight: 800; font-size: 12.5px; line-height: 1.3; }
.winny-banding-label { color: var(--wn-redup); white-space: nowrap; }
.winny-unggul { color: #1E7B45; font-weight: 700; }

.winny-titip { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--wn-garis); flex: none; }
.winny-titip > b { font-size: 15px; }
.winny-titip-ringkas { font-size: 12.5px; color: var(--wn-redup); }
.winny-titip label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.winny-titip input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #DADDE7; font: inherit; font-size: 16px; font-weight: 400; color: var(--wn-tinta); background: #FFFFFF; }
.winny-titip input:focus { outline: 2px solid rgba(24,34,92,.25); border-color: var(--wn-navy); }
/* TITIP JUAL BERFOTO (26 Okt 2026): kotak spek bebas + pilih foto (maks 10). */
.winny-titip textarea { min-height: 110px; padding: 10px 14px; border-radius: 12px; border: 1px solid #DADDE7; font: inherit; font-size: 16px; font-weight: 400; color: var(--wn-tinta); background: #FFFFFF; resize: vertical; line-height: 1.45; }
.winny-titip textarea:focus { outline: 2px solid rgba(24,34,92,.25); border-color: var(--wn-navy); }
.winny-titip input[type="file"] { height: auto; padding: 10px 12px; font-size: 14px; }
.winny-titip-foto-info { font-size: 12.5px; font-weight: 400; color: var(--wn-redup); }
.winny-titip-kirim { min-height: 46px; border: 0; border-radius: 12px; background: var(--wn-oranye); color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.winny-titip-kirim:disabled { opacity: .55; cursor: default; }
.winny-titip small { font-size: 12px; color: var(--wn-redup); line-height: 1.45; }

.winny-bawah { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid var(--wn-garis); margin: 0; }
.winny-masukan { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid #DADDE7; background: #F9FAFC; font: inherit; font-size: 14.5px; color: var(--wn-tinta); }
.winny-masukan:focus { outline: 2px solid rgba(24,34,92,.2); border-color: var(--wn-navy); background: #FFFFFF; }
.winny-kirim { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--wn-oranye); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.winny-kirim:disabled { opacity: .6; cursor: default; }

/* PC LEBAR (pemilik 22 Okt 2026 atas potret layar lebar: "kalau di PC kekecilan ga sih ?"): ~~400 x 640 di semua layar lebar~~ -> panel,
   huruf & kartu ikut membesar bertahap. >= 1280: 460 x 760; >= 1680: 520 x 860 (tetap muat tinggi layar). */
@media (min-width: 1280px) {
  .winny-tombol { right: 28px; bottom: calc(28px + var(--winny-angkat, 0px)); padding: 12px 26px 12px 112px; gap: 14px; }
  .winny-tombol-robot { height: 108px; }
  .winny-sapa { right: 32px; bottom: calc(118px + var(--winny-angkat, 0px)); }
  .winny-tombol-ikon { width: 48px; height: 48px; }
  .winny-tombol-teks b { font-size: 16.5px; }
  .winny-tombol-teks small { font-size: 13.5px; }
  .winny-panel { right: 28px; bottom: 28px; width: 440px; height: min(740px, calc(100vh - 56px)); font-size: 14px; }
  .winny-kepala { padding: 12px 12px 12px 16px; }
  .winny-kepala .winny-avatar { width: 42px; height: 42px; font-size: 15px; }
  .winny-kepala-teks b { font-size: 16px; }
  .winny-kepala-teks small { font-size: 12.5px; }
  .winny-isi { gap: 12px; padding: 16px; }
  .winny-deret { margin: 0 -16px; padding: 2px 16px 6px; gap: 10px; }
  .winny-kartu { flex-basis: 224px; }
  .winny-kartu-foto { height: 156px; }
  .winny-bawah { padding: 12px 16px 14px; }
  .winny-masukan { height: 46px; font-size: 14.5px; }
  .winny-kirim { width: 46px; height: 46px; }
}
@media (min-width: 1680px) {
  .winny-panel { width: 480px; height: min(820px, calc(100vh - 56px)); }
  .winny-kartu { flex-basis: 236px; }
  .winny-kartu-foto { height: 168px; }
}

/* HP: panel pop-up mengambang, tombol ringkas. Halaman di belakang tidak ikut tergulir. */
@media (max-width: 720px) {
  /* HP: robot UTUH berdiri di atas pil oranye pendek "Tanya AI" (pemilik: "kalau di HP jgn panjang gitu" lalu "jgn kepalanya doang dong
     maskotnya"). ~~Bulatan berisi kepala robot~~. */
  /* ~~bottom 14px~~ -> 72px (pemilik 23 Okt 2026: "untuk tanya AI di Hp, kayaknya terlalu dibawah ya"). */
  .winny-tombol { right: 14px; bottom: calc(72px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); height: 44px; padding: 0 16px 0 62px; gap: 0; }
  .winny-tombol-robot { height: 74px; left: -4px; }
  /* HP: gelembung pendek di KIRI tombol bulat ("Cari pakai AI? Tanya aku"), hilang sendiri sesudah 9 detik (winny.js). */
  /* ~~bottom 144px~~ -> 180px (24 Okt 2026, sapaan HP kini tampil di beberapa halaman): 144 bertumpuk dengan tombol x maskot (x di 136-160 px). */
  .winny-sapa { right: 14px; bottom: calc(180px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); max-width: 220px; padding: 8px 4px 8px 12px; border-radius: 14px 14px 4px 14px; }
  .winny-sapa-teks { font-size: 13.5px; }
  .winny-sapa-tutup { width: 24px; height: 24px; }
  .winny-tombol-ikon { display: none; }
  .winny-tombol-pendek { display: inline; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
  .winny-tombol-teks { display: none; }
  /* POP-UP MENGAMBANG (pemilik 22 Okt 2026: "kalau di hp tetap gantung kayak pop up aja, jgn kayak halaman sendiri"): ~~penuh layar~~ ->
     8 px dari tepi, ~~tinggi maks 78% layar~~ setinggi layar (pemilik: "tetap popnya bisa 1 halaman penuh aja buat maksimal"), sudut membulat, bayangan. */
  .winny-panel { left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top)); bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: auto; border-radius: 18px; border: 1px solid #E1E4EC; box-shadow: 0 18px 50px rgba(16,22,60,.32); animation: winny-muncul .25s ease-out; }
  /* HP RINGKAS (pemilik 22 Okt 2026 atas potret chat HP: "apa ga terlalu besar ? tulisan2nya dan lainnya"): huruf & kartu turun satu
     tingkat, pilihan jawaban SATU BARIS yang bisa digeser (dulu 5 baris bertumpuk). Sasaran sentuh tetap >= 38-40 px; kolom ketik tetap
     16 px (iPhone tidak zoom otomatis). */
  .winny-kepala { padding: 10px 10px 10px 14px; gap: 10px; }
  .winny-kepala .winny-avatar { width: 36px; height: 36px; }
  .winny-kepala-teks b { font-size: 15px; }
  .winny-kepala-teks small { font-size: 12px; }
  .winny-ikon { width: 38px; height: 38px; }
  .winny-isi { gap: 10px; padding: 12px; }
  .winny-gel { font-size: 14px; padding: 9px 12px; line-height: 1.45; }
  .winny-deret { margin: 0 -12px; padding: 2px 12px 4px; gap: 8px; }
  .winny-kartu { flex-basis: 62%; max-width: 220px; border-radius: 12px; }
  .winny-kartu-foto { height: 120px; }
  .winny-kartu-badan { padding: 8px 10px 6px; }
  .winny-harga { font-size: 14.5px; }
  .winny-judul { font-size: 12.5px; }
  .winny-spek { font-size: 12px; }
  .winny-wa { margin: auto 10px 8px; min-height: 38px; font-size: 13px; border-radius: 9px; }
  button.winny-wa { width: calc(100% - 20px); }
  .winny-lembar-cari { font-size: 16px; }
  .winny-mirip { margin: 0 10px 10px; min-height: 36px; font-size: 12.5px; border-radius: 9px; }
  .winny-saran { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; gap: 6px; }
  .winny-saran::-webkit-scrollbar { display: none; }
  .winny-chip { flex: none; min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .winny-sambut-robot { height: 64px; }
  .winny-bawah { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .winny-masukan { height: 44px; font-size: 16px; }
  .winny-kirim { width: 44px; height: 44px; }
  html.winny-buka, html.winny-buka body { overflow: hidden; }
}
/* SELIP (pemilik 23 Okt 2026: "tanya AInya bisa diselipkan, tinggal maskotnya aja supaya tidak menutupi lainnya"; audit UX: tombol menutupi
   tombol Search beranda, nilai KT detail, Lihat detail Projects, Daftar Join Us): begitu pengunjung menggulir (atau 5 detik), pil menciut jadi
   MASKOT saja di tepi kanan — tetap bisa diketuk, label hilang. Selektor ganda supaya menang atas aturan HP/layar lebar di atas. */
.winny-tombol.winny-tombol--selip { padding: 0; gap: 0; width: 56px; height: 56px; right: 4px; background: transparent; box-shadow: none; animation: none; }
/* + LABEL KECIL "Tanya AI" di bawah maskot (pemilik 23 Okt 2026: "masa orang tau, ada tombol tanya Ai dibawah itu kalau di HP ?"): maskot
   saja tidak menjelaskan dirinya; label mungil tetap terbaca tanpa menutupi isi. */
.winny-tombol.winny-tombol--selip .winny-tombol-teks, .winny-tombol.winny-tombol--selip .winny-tombol-ikon { display: none; }
.winny-tombol.winny-tombol--selip .winny-tombol-pendek { display: block; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #E0671F 0%, var(--wn-oranye) 100%); color: #FFFFFF;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; box-shadow: 0 3px 8px rgba(194,78,18,.35); }
.winny-tombol.winny-tombol--selip .winny-tombol-robot { left: 0; height: 64px; }
.winny-tombol.winny-tombol--selip:hover { filter: none; transform: translateY(-2px); }
@media (min-width: 721px) {
  .winny-tombol.winny-tombol--selip { width: 76px; height: 76px; right: 12px; }
  .winny-tombol.winny-tombol--selip .winny-tombol-robot { height: 88px; }
}
/* ~~HP: maskot selip LEBIH KECIL (52x44, robot 48px)~~ & ~~MENYINGKIR sendiri saat menggulir~~ — DICABUT (pemilik 23 Okt 2026 malam: "robotnya
   jgn kecil, bikin bisa dihide ajaa"): maskot kembali 56px / robot 64px, dan pengunjung yang menyembunyikannya lewat tombol x (winny.js).
   Tersembunyi = maskot & sapaan hilang, tersisa TAB berkepala robot di tepi kanan (setinggi tombol, menempel tepi = tidak menutupi isi). */
.winny-sembunyi, .winny-tarik { display: none; }
/* HP & TABLET 10 inci tegak (<= 900px); posisi tablet disetel di blok sesudahnya. */
@media (max-width: 900px) {
  .winny-sembunyi { display: grid; place-items: center; position: fixed; z-index: 9001; right: 52px; bottom: calc(136px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom));
    width: 24px; height: 24px; padding: 0; border: 1px solid #E3E6EE; border-radius: 50%; background: #FFFFFF; color: #5B6178; box-shadow: 0 2px 6px rgba(16,22,60,.18); cursor: pointer; }
  /* Kotak ketuk 40px tanpa membesarkan bulatannya. */
  .winny-sembunyi::before { content: ''; position: absolute; inset: -8px; }
  .winny-tarik { position: fixed; z-index: 9000; right: 0; bottom: calc(80px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); width: 34px; height: 48px; padding: 0 0 0 4px;
    border: 0; border-radius: 14px 0 0 14px; background: linear-gradient(135deg, #E0671F 0%, #C24E12 100%); box-shadow: 0 4px 12px rgba(194,78,18,.35); cursor: pointer; }
  .winny-tarik img { width: 26px; height: 26px; object-fit: contain; display: block; }
  html.winny-tersembunyi .winny-tombol, html.winny-tersembunyi .winny-sapa, html.winny-tersembunyi .winny-sembunyi { display: none; }
  html.winny-tersembunyi .winny-tarik { display: grid; place-items: center; }
  html.winny-buka .winny-sembunyi, html.winny-buka .winny-tarik { display: none; }
}
/* TABLET (721-900px): maskot selip 76px / robot 88px di right 12px, bottom 20px (terukur 800px: robot x 711-789, y 991-1080) -> x di
   pojok kiri atas robot, tab sejajar tengah tombol. */
@media (min-width: 720.01px) and (max-width: 900px) {
  .winny-sembunyi { right: 81px; bottom: calc(105px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); }
  .winny-tarik { bottom: calc(38px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); }
}
/* MASKOT SEDIKIT LEBIH BESAR (pemilik 23 Okt 2026 malam: "kalau robot bisa di hide, gedein sedikit ukuran robotnya"): HP 56 -> 64 px (robot 64 -> 76 px),
   tablet tegak 76 -> 84 px (robot 88 -> 98 px). Letak tombol x & tab mengikuti (diukur ulang di Chrome: x di luar pojok kiri atas robot,
   HP right 52 / bottom 136, tablet right 81 / bottom 105, tab tablet bottom 38). */
@media (max-width: 720px) {
  .winny-tombol.winny-tombol--selip { width: 64px; height: 64px; }
  .winny-tombol.winny-tombol--selip .winny-tombol-robot { height: 76px; }
}
@media (min-width: 720.01px) and (max-width: 900px) {
  .winny-tombol.winny-tombol--selip { width: 84px; height: 84px; }
  .winny-tombol.winny-tombol--selip .winny-tombol-robot { height: 98px; }
}
/* LAYAR LEBAR SETINGGI HP (pemilik 24 Okt 2026: "di website jgn terlalu bawah banget gitu, sama kayak HP aja maskotnya"): ~~20 px (>= 1280:
   28 px) dari dasar layar~~ -> 72 px seperti HP, sapaan ikut naik di atasnya. Tablet tegak (721-900 px) TETAP: letak tombol x & tab di sana
   diukur terhadap jarak lama. Ditaruh di ujung supaya menang atas blok >= 1280 px di atas (spesifisitas sama). */
@media (min-width: 900.01px) {
  .winny-tombol { bottom: calc(72px + var(--winny-angkat, 0px) + env(safe-area-inset-bottom)); }
  .winny-sapa { bottom: calc(162px + var(--winny-angkat, 0px)); }
}
@media print { .winny-tombol, .winny-panel { display: none !important; } }

/* ── GAYA CHATGPT (pemilik 24 Okt 2026, potret HP Portal: "Menjorok masuk / Warna beda / Ini kurang enak tampilane / Bingung. Suruh tiru
   gpt aja", bersama potret ChatGPT). ~~Balasan WinMax AI = kotak putih bergaris, maks 86% lebar~~ (menjorok) -> TEKS POLOS selebar panel,
   tanpa kotak. ~~Gelembung pengunjung oranye pekat #C24E12 berteks putih~~ (bersaing dengan kepala bergradasi & tombol oranye) ->
   gelembung oranye MUDA berteks gelap, sudut bulat penuh (seperti gelembung biru muda ChatGPT). Latar isi putih. Oranye pekat kini
   hanya kepala panel, tombol kirim & tombol formulir. Dipasang di UJUNG berkas supaya menang atas blok HP. */
.winny-panel .winny-isi { background: #FFFFFF; gap: 16px; }
.winny-panel .winny-gel--winny { max-width: 100%; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--wn-tinta);
  font-size: 14px; line-height: 1.55; }
.winny-panel .winny-gel--saya { max-width: 82%; padding: 8px 14px; border-radius: 18px; background: #FDEDE3; color: #5E2406;
  font-size: 14px; line-height: 1.45; }
.winny-panel .winny-sambut .winny-gel { max-width: none; }
.winny-panel .winny-titip { border-color: #ECEEF3; border-radius: 16px; }
/* TULISAN JANGAN KEBESARAN (pemilik 24 Okt 2026, menyusul: "ukuran tulisannya jg jgn kebesaran ya, kayaknya itu bikin bingung dan padat
   banget"): ~~15px~~ -> 14px layar lebar, 13,5px HP; pilihan cepat 12,5px. Kotak isian formulir TETAP 16px (di bawah itu iPhone
   memperbesar layar saat kotak disentuh). */
.winny-panel .winny-chip { font-size: 12.5px; }
@media (max-width: 720px) {
  .winny-panel .winny-isi { gap: 12px; }
  .winny-panel .winny-gel--winny, .winny-panel .winny-gel--saya { font-size: 13.5px; }
  .winny-panel .winny-chip { min-height: 34px; font-size: 12.5px; }
}

/* ── VARIASI WARNA A: KEPALA NAVY, ORANYE HANYA UNTUK AKSI (pemilik 24 Okt 2026: "chat AI kayaknya kalau warna orange semua, jadi bingung
   deh, kamu punya ide ga variasikan ?" -> tiga usulan, pemilik "kerjain dulu aja" atas usulan yang disarankan; dikalahkan: B kepala putih,
   C kepala oranye isi netral). ~~Kepala oranye bergradasi~~ -> navy merek; ~~gelembung pengunjung oranye muda~~ -> abu-navy muda berteks
   navy. Oranye tinggal: tombol kirim, tombol Tanya agen / WhatsApp, tombol formulir titip, lencana Hot, dan tombol mengambang di luar panel
   (tetap mencolok). "Cari yang mirip" & sorotan isian ikut navy. Dipasang PALING UJUNG supaya menang atas blok tema oranye & gaya ChatGPT. */
.winny-panel .winny-kepala { background: var(--wn-navy); }
.winny-panel .winny-kepala-teks small { color: rgba(255,255,255,.75); }
.winny-panel .winny-gel--saya { background: #EEF0F6; color: var(--wn-navy); }
.winny-panel .winny-mirip { border-color: #DADDE7; color: var(--wn-navy); }
.winny-panel .winny-mirip:hover { background: #F6F7FA; }
.winny-panel .winny-chip:hover { border-color: #C3C7D6; background: #F6F7FA; }
.winny-panel .winny-masukan:focus, .winny-panel .winny-titip input:focus { outline: 2px solid rgba(24,34,92,.2); border-color: var(--wn-navy); }

/* ── PESANKU vs BALASAN AI HARUS JELAS (pemilik 24 Okt 2026, potret HP: "masih ga bisa bedakan chatku sama chat AInya yang mana, ini kalau
   orang tua yang pake serba bingung"). ~~Gelembung pengunjung abu-navy muda #EEF0F6~~ (nyaris sewarna latar putih) -> NAVY PEKAT berteks
   putih, sudut kanan bawah lancip (arah pengirim). Balasan AI tetap teks polos tanpa kotak, tapi tiap balasan diberi LABEL "WinMax AI"
   (oranye kecil) di atasnya — dua penanda sekaligus: warna DAN nama. Label teks, bukan gambar: CSS ini dimuat dari dua domain (situs &
   web), alamat gambar relatif bisa tidak sampai. Sapaan pertama (sudah ada robotnya) & animasi mencari tanpa label. PALING UJUNG. */
.winny-panel .winny-gel--saya { background: var(--wn-navy); color: #FFFFFF; border-radius: 18px 18px 6px 18px; }
.winny-panel .winny-gel--winny::before { content: 'WinMax AI'; display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--wn-oranye); }
.winny-panel .winny-ketik::before, .winny-panel .winny-sambut .winny-gel::before { content: none; }

/* ── BALASAN AI DALAM KOTAK BERWARNA (pemilik 24 Okt 2026, menyusul label: "chatnya AI ga dikasih kotak warna aja ?"). ~~Teks polos tanpa
   kotak (gaya ChatGPT)~~ -> kotak ABU MUDA bersudut kiri bawah lancip (arah pengirim), berlawanan dengan gelembung pengunjung NAVY di kanan.
   Label "WinMax AI" tetap di dalam kotak. Animasi mencari ikut berkotak. PALING UJUNG. */
.winny-panel .winny-gel--winny { max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #F1F3F8; border: 0; }
.winny-panel .winny-sambut .winny-gel { max-width: none; }

/* ── MENTOK ATAS SAAT MENGETIK DI HP (pemilik 24 Okt 2026, potret iPhone: "kalau di iphone kok ga mentok atas ?"). winny.js pasLayar
   memasang kelas ini selama kolom ketik aktif: panel menempel tepi atas & sisi layar, sudut atas lurus. */
@media (max-width: 720px) {
  .winny-panel.winny-papan { left: 0; right: 0; border-radius: 0 0 18px 18px; border-top: 0; }
}