:root{--bg:#0e1116;--panel:#161b22;--teks:#e8eaed;--redup:#9aa4b2;--aksen:#e7b45a;--saya:#2b3a55;--jml:#1d232c;--galat:#e5534b;--garis:#252c36}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--teks);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow:hidden}
[hidden]{display:none!important}
.layar{height:100dvh;display:flex;flex-direction:column}
#layar-login{align-items:center;justify-content:center;padding:24px}
.kartu-login{width:100%;max-width:340px;text-align:center}
.kartu-login img{width:112px;height:112px;border-radius:50%;margin-bottom:16px}
.kartu-login h1{font-size:28px;letter-spacing:.5px}
.sub{color:var(--redup);margin:4px 0 24px}
#form-login{display:flex;flex-direction:column;gap:12px}
input,textarea{font:inherit;color:var(--teks);background:var(--panel);border:1px solid var(--garis);border-radius:14px;padding:14px 16px;outline:none}
input:focus,textarea:focus{border-color:var(--aksen)}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
#form-login button{background:var(--aksen);color:#1a1300;font-weight:600;border-radius:14px;padding:14px}
.galat{color:var(--galat);font-size:14px}
.atas{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 16px;border-bottom:1px solid var(--garis);background:var(--panel);position:relative}
.atas img{width:40px;height:40px;border-radius:50%}
.judul{flex:1;display:flex;flex-direction:column;line-height:1.25}
.judul span{font-size:13px;color:var(--redup)}
.ikon{font-size:22px;width:40px;height:40px;border-radius:50%}
.ikon:hover{background:var(--garis)}
.menu{position:absolute;right:12px;top:calc(58px + env(safe-area-inset-top));background:var(--panel);border:1px solid var(--garis);border-radius:12px;overflow:hidden;z-index:5;display:flex;flex-direction:column;min-width:190px;box-shadow:0 10px 30px #0008}
.menu button{padding:14px 16px;text-align:left}
.menu button:hover{background:var(--garis)}
.pesan{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.gel{max-width:min(84%,640px);padding:10px 14px;border-radius:18px;line-height:1.5;overflow-wrap:anywhere;font-size:15.5px}
.gel.saya{align-self:flex-end;background:var(--saya);border-bottom-right-radius:6px}
.gel.jamilah{align-self:flex-start;background:var(--jml);border:1px solid var(--garis);border-bottom-left-radius:6px}
.gel.galat{border-color:var(--galat);color:#ffb4ae}
.gel code{background:#0b0e12;padding:1px 5px;border-radius:5px;font-size:.92em}
.mengetik::after{content:"";display:inline-block;height:10px;width:36px;background:radial-gradient(circle,var(--redup) 3px,transparent 3.5px) 0 50%/12px 10px repeat-x;animation:titik 1s steps(4) infinite}
@keyframes titik{from{width:0}to{width:36px}}
.bawah{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--garis);background:var(--panel)}
.bawah textarea{flex:1;resize:none;max-height:140px;padding:12px 14px;border-radius:22px;line-height:1.4}
.bulat{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none}
.bulat svg{width:22px;height:22px}
.mic{background:var(--garis)}
.kirim{background:var(--aksen);color:#1a1300}
.bulat:disabled{opacity:.45}
.ngobrol{position:fixed;inset:0;z-index:20;background:radial-gradient(120% 80% at 50% 30%,#1c2533 0%,#0b0e13 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 24px calc(24px + env(safe-area-inset-bottom))}
.panggung{position:relative;width:min(70vw,300px);aspect-ratio:1}
.cincin{position:absolute;inset:-6%;border-radius:50%;border:3px solid var(--aksen);opacity:0}
.panggung.dengar .cincin{animation:denyut 1.6s ease-out infinite}
@keyframes denyut{0%{transform:scale(.92);opacity:.8}100%{transform:scale(1.15);opacity:0}}
.wajah{width:100%;height:100%;display:block;cursor:pointer}
.mulut-buka{transform-box:fill-box;transform-origin:center;transform:scaleY(0)}
.panggung.bicara .mulut-buka{animation:bicara .22s ease-in-out infinite alternate}
.panggung.bicara .mulut-tutup{opacity:0}
@keyframes bicara{0%{transform:scaleY(.15)}100%{transform:scaleY(1)}}
.mata{transform-box:fill-box;transform-origin:center;animation:kedip 4.5s infinite}
@keyframes kedip{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.pupil{transition:transform .5s}
.panggung.pikir .pupil{transform:translate(3px,-3px)}
.panggung.pikir::after{content:"";position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);width:60px;height:12px;background:radial-gradient(circle,var(--aksen) 4px,transparent 4.5px) 0 50%/20px 12px repeat-x;animation:titik2 1.2s steps(3) infinite}
@keyframes titik2{0%{width:20px}100%{width:60px}}
.ngobrol-status{color:var(--aksen);font-weight:600;letter-spacing:.3px;margin-top:8px}
.ngobrol-teks{min-height:3em;max-width:560px;max-height:30vh;overflow-y:auto;text-align:center;line-height:1.5;opacity:.92}
.selesai{background:#2a1515;color:#ffb4ae;border:1px solid #5a2a2a;border-radius:999px;padding:12px 30px;font-weight:600}