/* aiQu v2 */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,Tahoma,sans-serif}
:root{--bg:#0f172a;--kartu:#1e293b;--garis:#334155;--aksen:#38bdf8;--teks:#f1f5f9;--redup:#94a3b8;--emas:#fbbf24;--bahaya:#ef4444;--ok:#22c55e}
body{background:var(--bg);color:var(--teks);min-height:100dvh;line-height:1.45;padding-bottom:env(safe-area-inset-bottom)}
body.tengah{display:flex;justify-content:center;align-items:center;padding:20px}
a{color:var(--aksen)}
h2{font-size:20px;margin-bottom:6px}h3{font-size:16px;margin:22px 0 8px}
.redup{color:var(--redup)}.kecil{font-size:12.5px;margin-top:8px}
code{background:#0b1220;padding:1px 6px;border-radius:5px;font-size:12px}
input,select,textarea{width:100%;padding:12px;margin:6px 0;border-radius:10px;border:1px solid var(--garis);background:var(--bg);color:var(--teks);font-size:16px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aksen);outline-offset:0}
label{font-size:13px;color:var(--redup)}
button{font-family:inherit}

/* tombol */
.btn-utama{background:var(--aksen);color:#04202e;font-weight:700;padding:12px 16px;border:0;border-radius:10px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;font-size:15px}
.btn-utama.penuh{display:block;width:100%;margin-top:10px}.btn-utama.besar{padding:15px;font-size:16px}
.btn-kecil{padding:7px 12px;border-radius:8px;font-size:12.5px;cursor:pointer;border:0;text-decoration:none;display:inline-block;font-weight:600}
.btn-kecil.utama{background:var(--aksen);color:#04202e}.btn-kecil.gelap{background:var(--garis);color:var(--teks)}.btn-kecil.bahaya{background:#7f1d1d;color:#fecaca}
.btn-bulat{width:44px;height:44px;border-radius:50%;border:0;background:var(--garis);color:#fff;font-size:18px;cursor:pointer;flex:none}
.btn-bulat.rekam{background:var(--bahaya);animation:denyut 1s infinite}
@keyframes denyut{50%{transform:scale(1.1)}}
.btn-kirim{padding:0 18px;border-radius:22px;background:var(--aksen);color:#04202e;font-weight:700;border:0;cursor:pointer;flex:none}
button:disabled,.btn-kirim:disabled{opacity:.5;cursor:not-allowed}
.tautan{background:none;border:0;color:var(--redup);text-decoration:underline;cursor:pointer;font-size:12px}

/* login */
.kartu-login{background:var(--kartu);padding:28px;border-radius:16px;width:100%;max-width:400px;text-align:center}
.kartu-login p{margin:6px 0}.ganti-mode{margin-top:16px!important;font-size:14px}
.logo{color:var(--aksen);font-weight:800;font-size:20px;text-decoration:none}.logo.besar{font-size:34px}
.galat{background:#450a0a;border:1px solid #7f1d1d;color:#fecaca;padding:9px 12px;border-radius:10px;margin:10px 0;font-size:14px;text-align:left}
.sukses{background:#052e16;border:1px solid #14532d;color:#bbf7d0;padding:9px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.info-koin{background:#3b2a05;border:1px solid #78580b;color:#fde68a;padding:9px 12px;border-radius:10px;margin-bottom:14px;font-size:14px}

/* kerangka */
.navbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;background:var(--kartu);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:5}
.nav-kanan{display:flex;gap:8px;align-items:center}
.koin-badge{background:var(--emas);color:#000;padding:6px 11px;border-radius:20px;font-weight:700;font-size:14px;text-decoration:none}
.wadah{padding:18px 16px 40px;max-width:900px;margin:auto}.wadah.sempit{max-width:560px}
.bar-aksi{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.kosong{padding:30px 0;text-align:center}

/* avatar: semua lapisan 800x800 bertumpuk */
.avatar{position:relative;width:100%;aspect-ratio:4/5}
.avatar .lp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
.l-buka{opacity:0}
.l-mata{animation:kedip 4.2s infinite}
@keyframes kedip{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.avatar.bicara .l-buka{animation:buka .3s steps(1) infinite}
.avatar.bicara .l-tutup{animation:tutup .3s steps(1) infinite}
@keyframes buka{0%{opacity:0}50%{opacity:1}}
@keyframes tutup{0%{opacity:1}50%{opacity:0}}

/* beranda */
.grid-karakter{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kartu-karakter{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:12px;text-align:center}
.foto-karakter{background:#0b1220;border-radius:10px;margin-bottom:8px;overflow:hidden;aspect-ratio:1/.82}
.kartu-karakter h3{margin:4px 0 0;font-size:15px;overflow-wrap:anywhere}
.aksi-karakter{display:flex;gap:6px;margin-top:10px;justify-content:center;flex-wrap:wrap}
.aksi-karakter form{display:inline}

/* rakit */
.panggung{position:relative;background:#0b1220 url(../assets/bg_sawah.webp) center/cover;border:1px solid var(--garis);border-radius:16px;overflow:hidden;display:flex;justify-content:center}
.panggung .avatar{width:min(100%,380px)}
.panggung.kecil{margin-bottom:14px}.panggung.kecil .avatar{width:min(70%,260px)}
.nama-tag{position:absolute;left:12px;bottom:10px;background:rgba(15,23,42,.75);padding:4px 10px;border-radius:12px;font-size:13px;font-weight:600}
.form-rakit{background:var(--kartu);padding:16px;border-radius:14px}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.grup{margin-bottom:6px}

/* chat: layar penuh, panggung besar, percakapan di panel bawah */
body.halaman-chat{overflow:hidden}
.ruang-chat{position:fixed;left:0;right:0;top:62px;bottom:0;display:flex;flex-direction:column;max-width:none;margin:0;padding:0}
.ruang-chat .panggung{flex:1;min-height:0;border:0;border-radius:0;align-items:flex-end;justify-content:center;background-size:cover;background-position:center;overflow:hidden}
.ruang-chat .panggung .avatar{width:auto;height:100%;max-width:100%}
.nama-tag{z-index:3}
.panel-chat{flex:none;height:32dvh;display:flex;flex-direction:column;background:rgba(15,23,42,.88);backdrop-filter:blur(8px);border-top:1px solid var(--garis);padding:0 10px env(safe-area-inset-bottom);transition:height .2s}
.panel-chat.lebar{height:64dvh}
.gagang{align-self:center;background:none;border:0;color:var(--redup);font-size:18px;line-height:1;padding:4px 24px;cursor:pointer}
.kotak-chat{flex:1;min-height:0;overflow-y:auto;padding:4px 2px 8px;display:flex;flex-direction:column;gap:8px}
.pesan{padding:9px 14px;border-radius:16px;max-width:82%;font-size:14.5px;overflow-wrap:anywhere}
.pesan.ai{background:var(--garis);align-self:flex-start;border-bottom-left-radius:4px}
.pesan.user{background:var(--aksen);color:#04202e;align-self:flex-end;border-bottom-right-radius:4px}
.pesan.galat-pesan{background:#450a0a;color:#fecaca}
.input-chat{display:flex;gap:8px;align-items:center;background:var(--kartu);padding:8px;border-radius:26px;flex:none}
.input-chat input{margin:0;border:0;border-radius:22px;flex:1;min-width:0;padding:11px 14px}
.habis{background:#3b2a05;color:#fde68a;border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:14px}
.catatan-kecil{text-align:center;margin:2px 0 4px;flex:none}

/* top-up & admin */
.daftar-paket{display:grid;gap:10px;margin:14px 0}
.paket{display:flex;justify-content:space-between;align-items:center;background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:12px 14px}
.kartu-bayar{background:var(--kartu);border:2px solid var(--emas);border-radius:14px;padding:16px;margin:14px 0;text-align:center}
.kartu-bayar h3{margin-top:0;color:var(--emas)}.qris{max-width:260px;width:100%;background:#fff;border-radius:10px;margin:12px auto;display:block}
.riwayat{list-style:none}.riwayat li{display:flex;gap:10px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--garis);font-size:13.5px}
.status{font-weight:700;text-transform:capitalize}.status.diterima{color:var(--ok)}.status.pending{color:var(--emas)}.status.ditolak,.status.kadaluarsa{color:var(--redup)}
.ringkas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.k{background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:11px}.k span{display:block;font-size:12px;color:var(--redup)}
.k b{display:block;font-size:19px;color:var(--emas)}.k small{display:block;color:var(--redup);font-size:11.5px}
.k.ok{border-color:var(--ok)}.k.peringatan{border-color:#f59e0b}
.rincian{margin:6px 0 10px 18px;font-size:13.5px}.rincian li{margin:4px 0}
.gulir{overflow-x:auto;border:1px solid var(--garis);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--garis);white-space:nowrap}th{background:#14213d;color:var(--emas)}
.aksi-sel{display:flex;gap:6px}.aksi-sel form{display:inline}

/* ---- v3: ukuran/posisi bagian wajah, Profil ---- */
.l-mata{scale:var(--mata-s,1);translate:0 var(--mata-y,0);transform-origin:50% 52.2%}
.l-hidung{scale:var(--hidung-s,1);translate:0 var(--hidung-y,0);transform-origin:50% 63%}
.l-tutup,.l-buka{scale:var(--mulut-s,1);translate:0 var(--mulut-y,0);transform-origin:50% 67.8%}
.galat-pesan{white-space:pre-wrap}
.panggung.melekat{position:sticky;top:62px;z-index:4}
.atur{background:var(--bg);border:1px solid var(--garis);border-radius:12px;padding:10px 12px;margin:10px 0 14px}
.atur summary{cursor:pointer;font-weight:700;color:var(--aksen);padding:4px 0}
.atur-baris{padding:8px 0;border-bottom:1px dashed var(--garis)}
.atur-baris b{display:block;margin-bottom:2px}
.atur-baris label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:13px;margin:4px 0}
.atur-baris output{color:var(--emas);font-weight:700}
.atur-baris input[type=range]{width:100%;padding:0;margin:2px 0;accent-color:var(--aksen)}
.atur .btn-kecil{margin-top:10px}
.kartu-profil{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:16px;margin:12px 0}
.baris-profil{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--garis);font-size:14.5px}
.baris-profil:last-child{border-bottom:0}.baris-profil b{overflow-wrap:anywhere;text-align:right}

/* latar suasana */
.latar-sawah{background-image:url(../assets/bg_sawah.webp)!important}
.latar-bengkel{background-image:url(../assets/bg_bengkel.webp)!important}
.latar-pasar{background-image:url(../assets/bg_pasar.webp)!important}
.latar-rumah{background-image:url(../assets/bg_rumah.webp)!important}
.foto-karakter{background-size:cover;background-position:center}