/* Ulora v8 — tampilan baru halaman chat. Dimuat setelah style.css, jadi menimpa aturan lamanya. */

/* ===== Header ===== */
header{position:sticky;top:0;gap:10px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;background:rgba(248,251,252,.78);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(210,225,236,.7);z-index:3}
header .brand{font-size:20px}
#menu{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-1);transition:box-shadow .15s,transform .1s,background .15s}
#menu:hover{background:var(--hover);box-shadow:var(--sh-2)}
#menu:active{transform:translateY(1px)}

/* ===== Pemilih model: Ulora 6 + sub-model Lite ===== */
.mp{position:relative;margin-left:auto;min-width:0}
.mp-btn{display:flex;align-items:center;gap:7px;max-width:46vw;height:40px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;font-weight:600;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1);transition:box-shadow .15s,transform .1s,background .15s}
.mp-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-btn svg{flex:none;color:var(--mute);transition:transform .2s}
.mp-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.mp-btn:hover{background:var(--hover);box-shadow:var(--sh-2)}
.mp-btn:active{transform:translateY(1px)}
.mp-menu{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px));background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:var(--sh-3);z-index:7;animation:mpin .16s ease-out}
@keyframes mpin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.mp-menu[hidden],.mp-opt[hidden]{display:none}
.mp-opt{position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:14px;padding:11px 12px;color:inherit;transition:background .12s}
.mp-opt+.mp-opt:not(.sub){margin-top:6px}
.mp-opt[aria-checked=true]{background:var(--chip)}
@media(hover:hover){.mp-opt:hover{background:var(--hover)}.mp-opt[aria-checked=true]:hover{background:var(--chip)}}
.mp-txt{flex:1;min-width:0}
.mp-name{font-weight:600;font-size:15px}
.mp-desc{font-size:13px;color:var(--mute);line-height:1.4}
.mp-chk{width:18px;flex:none;color:var(--brand)}
/* Lite: sub-model, menjorok di bawah Ulora 6, konektor L sejajar teks induk */
.mp-opt.sub{width:calc(100% - 30px);margin:0 0 0 30px;padding:9px 12px}
.mp-opt.sub::before{content:'';position:absolute;left:-18px;top:-10px;width:14px;height:calc(50% + 10px);border-left:2px solid #c2d5e5;border-bottom:2px solid #c2d5e5;border-radius:0 0 0 10px}
.mp-opt.sub .mp-name{font-size:14.5px}
/* Laci Penalaran: tiap model (Ulora 6 / Lite / Pro) punya daftar tingkat yang terbuka di bawahnya; yang terkunci (Tinggi di Lite) redup */
.mp-item{display:block}
.mp-item[hidden]{display:none}
.mp-drawer{margin:2px 10px 8px 18px;padding-left:10px;border-left:2px solid var(--line)}
.mp-drawer[hidden]{display:none}
.mp-lvl{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.mp-lvl:hover{background:rgba(65,128,171,.08)}
.mp-lvl .mp-name{font-size:14px;font-weight:600}
.mp-lvl .mp-desc{font-size:12.5px}
.mp-lvl.locked{cursor:not-allowed}
.mp-lvl.locked .mp-txt{opacity:.5}
.mp-chev{display:inline-flex;align-items:center;gap:4px}
.mp-chev svg:last-child{transition:transform .15s}
.mp-chev.open svg:last-child{transform:rotate(180deg)}
/* Grup Penalaran di menu model: judul kecil + tiga tingkat; yang terkunci (mis. Tinggi untuk akun Lite) redup dan tidak bisa dipilih */
.mp-group{margin:12px 12px 4px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.mp-group[hidden]{display:none}
.mp-opt.pn{padding:9px 12px}
.mp-opt.pn .mp-name{font-size:14.5px}
.mp-opt.locked .mp-txt{opacity:.55}
.mp-opt.locked .mp-chk{color:var(--mute)}
.mp-opt.locked{cursor:not-allowed}

/* ===== Kolom chat ===== */
#thread{padding:18px 16px 28px;scroll-behavior:smooth}
.col{max-width:760px}
.msg{gap:12px;margin:0 0 26px;animation:msgin .28s ease-out both}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.msg{animation:none}}

/* Output chat: jawaban Ulora tanpa avatar, pesan pengguna sebagai bubble */
.msg.assistant .b{font-size:16px;line-height:1.72}
.msg.user .b{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff;padding:11px 17px;border-radius:20px 20px 6px 20px;max-width:84%;box-shadow:0 4px 14px rgba(29,80,117,.22),var(--rim)}
.msg.error .b{background:#fdeeee;border:1px solid #f4c7c7;border-radius:14px;padding:10px 14px}
.b h1,.b h2,.b h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.3;margin:1.2em 0 .5em}
.b h1{font-size:1.4em}.b h2{font-size:1.22em}.b h3{font-size:1.08em}
.b a{color:var(--brand);text-underline-offset:3px}
.b blockquote{margin:.9em 0;padding:4px 0 4px 14px;border-left:3px solid var(--violet);color:var(--mute)}
.b table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:.9em 0;font-size:14.5px}
.b th,.b td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.b th{background:var(--chip);font-weight:600}
.b pre{border-radius:16px;margin:12px 0}
.b :not(pre)>code{background:var(--chip);color:var(--brand);font-weight:500}
.abar{margin:6px 0 0 -8px;opacity:.85}
.abar button:hover{opacity:1}

/* Beranda kosong */
#empty .wm.big{margin-bottom:6px}
#empty h1{margin-bottom:6px}

/* ===== Input chat ===== */
form{padding:6px 12px max(10px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--canvas) 62%,rgba(248,251,252,0))}
.box{max-width:760px;border-radius:28px;padding:12px 10px 8px;background:rgba(255,255,255,.96);border:1px solid var(--line);box-shadow:0 6px 24px rgba(17,50,74,.10),var(--rim)}
.box::before{border-radius:29px}
textarea{font-size:16px;line-height:24px;padding:2px 10px 10px}
textarea::placeholder{color:#7b8e9c}
.ib{width:38px;height:38px}
#go,#stop{width:38px;height:38px;box-shadow:0 4px 12px rgba(29,80,117,.38),var(--rim)}
#imgprev,#zipprev{max-width:760px}
.attach-menu{border-radius:16px;box-shadow:var(--sh-3)}

@media(max-width:600px){
  .msg{gap:10px}
  .msg.user .b{max-width:90%}
  .mp-btn{padding:0 12px;font-size:14px}
}

/* ===== v9: menu burger (drawer) ===== */

/* Chat baru */
#new{justify-content:center;gap:9px;padding:13px 16px;border-radius:16px;border:1.5px solid var(--violet);background:linear-gradient(180deg,#fff,var(--chip));color:var(--brand);font:700 16px 'Bricolage Grotesque','Schibsted Grotesk',sans-serif;letter-spacing:.01em}
#new svg{flex:none;padding:3px;box-sizing:content-box;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff}
#new span{line-height:1}

/* Riwayat chat */
.gl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 12px 8px}
#list{gap:3px;padding:0 2px 8px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}
.conv{position:relative;border-radius:14px;border:1px solid transparent}
.conv .t{display:flex;align-items:center;gap:10px;padding:11px 8px 11px 12px;font-size:15px;font-weight:500}
.conv .t::before{content:"";flex:none;width:17px;height:17px;background:url("../img/icon-96.png") center/contain no-repeat;opacity:.78}
.conv.on{background:var(--chip);border-color:var(--line);box-shadow:none;font-weight:600}
.conv.on::after{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.conv.on .t::before{opacity:1}
.conv .x{width:34px;height:34px;margin-right:4px;padding:0;border-radius:10px;display:grid;place-items:center}
.conv .x:hover{background:#fdeeee;color:var(--err)}
.empty-h{text-align:center;padding:22px 12px;border:1.5px dashed var(--line);border-radius:14px;margin:0 2px}

/* Tombol Masuk + placeholder saat status login dicek */
#login{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border-radius:16px;font-size:16px;letter-spacing:.01em;box-shadow:0 6px 16px rgba(29,80,117,.32),var(--rim)}
#login[hidden],#acct[hidden],.authsk[hidden]{display:none}
.authsk{height:50px;border-radius:16px;background:linear-gradient(90deg,var(--chip) 25%,#f4f7fa 50%,var(--chip) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.authsk{animation:none}}

/* ===== v9: tombol kirim ===== */
#go{width:42px;height:42px;background:linear-gradient(145deg,var(--brand2),var(--brand));box-shadow:0 6px 16px rgba(29,80,117,.42),var(--rim);transition:box-shadow .15s,transform .12s,background .15s}
#go svg{transition:transform .18s}
@media(hover:hover){#go:not(:disabled):hover{transform:translateY(-1px) scale(1.04);box-shadow:0 8px 20px rgba(29,80,117,.48),var(--rim)}#go:not(:disabled):hover svg{transform:translateY(-1px)}}
#go:not(:disabled):active{transform:scale(.94);box-shadow:0 2px 6px rgba(29,80,117,.4)}
#go:not(:disabled){animation:gopop .22s ease-out}
@keyframes gopop{from{transform:scale(.85)}60%{transform:scale(1.08)}to{transform:scale(1)}}
#go:disabled{background:#e2ecf3;color:#98aebc;box-shadow:none}
/* Sedang memeriksa sesi login: panah diganti spinner kecil */
#go.checking{background:linear-gradient(145deg,var(--brand2),var(--brand));color:transparent;animation:none;opacity:.9;position:relative}
#go.checking svg{opacity:0}
#go.checking::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#go:not(:disabled){animation:none}}

/* ===== Mode suara (public/js/voice.js) ===== */
.vx{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom));color:#1a1a1a;background:#fff;--lv:0}
.vx.on{display:flex;animation:vxin .22s ease-out}
@keyframes vxin{from{opacity:0}to{opacity:1}}
body.vx-open{overflow:hidden}
.vx-x{align-self:flex-end;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:rgba(0,0,0,.04);color:#1a1a1a;display:grid;place-items:center}
.vx-x:hover{background:rgba(0,0,0,.09)}
.vx-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;min-height:0}
.vx-orb{position:relative;display:block;width:min(78vw,300px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;transform:scale(calc(1 + var(--lv)*.22));transition:transform .09s linear}
.vx-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 22px rgba(0,0,0,.14))}
/* latar putih: kilau bintang putih tidak akan kelihatan, jadi pakai warna bola */
.vx .spark{fill:var(--ob,#f5c518)}
/* animasi bola: sama dengan halaman login (login.css), dipetakan ke status mode suara */
.vx .ob-glow{transform-box:fill-box;transform-origin:center;animation:oGlow 3.6s ease-in-out infinite}
.vx .ob-core{transform-box:fill-box;transform-origin:center;animation:oBreath 3.6s ease-in-out infinite}
.vx .ob-energy{transform-box:fill-box;transform-origin:center;animation:oEnergy 3.6s ease-in-out infinite}
.vx .ob-bar{transform-box:fill-box;transform-origin:center;animation:oBar 1.5s ease-in-out infinite}
.vx .ob-bar.b0,.vx .ob-bar.b4{animation-delay:-.2s}
.vx .ob-bar.b1,.vx .ob-bar.b3{animation-delay:-.55s}
.vx .ob-bar.b2{animation-delay:-.9s}
.vx .spark{animation:oSpark 3.2s ease-in-out infinite}
/* kamu bicara = mendengarkan (seperti kolom form difokus) */
.vx[data-s=hearing] .ob-bar{animation-duration:.6s}
.vx[data-s=hearing] .ob-glow,.vx[data-s=hearing] .ob-core,.vx[data-s=hearing] .ob-energy{animation-duration:1.8s}
/* mengenali / berpikir = inti berdenyut lebih cepat */
.vx[data-s=recognizing] .ob-core,.vx[data-s=thinking] .ob-core,.vx[data-s=recognizing] .ob-energy,.vx[data-s=thinking] .ob-energy{animation-duration:1.8s}
/* Ulora berbicara (seperti body.talking di login) */
.vx[data-s=speaking] .ob-bar{animation-duration:.38s}
.vx[data-s=speaking] .ob-glow,.vx[data-s=speaking] .ob-core,.vx[data-s=speaking] .ob-energy{animation-duration:.9s}
@keyframes oGlow{0%,100%{opacity:.7;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes oEnergy{0%,100%{opacity:.75;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes oBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes oBar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.15)}}
@keyframes oSpark{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
/* Warna bola per suara: warna + putih susu. Tanpa data-c = kuning bawaan (nilai cadangan di dalam SVG). */
.vx[data-c=blue]{--ol:#eaf2ff;--om:#a9c9ff;--os:#4f8cff;--op:#f4f8ff;--ob:#6ea2ff;--ox:#cfe0ff;--od:#1f3f8a;--ow:#fdfcf7}
.vx[data-c=purple]{--ol:#e7eef5;--om:#abc3db;--os:#438ad3;--op:#f2f6f9;--ob:#6ba5dc;--ox:#c8d9e8;--od:#163555;--ow:#fdfcf7}
.vx[data-c=green]{--ol:#e8f9ee;--om:#a6e6bf;--os:#3fbf78;--op:#f3fcf6;--ob:#5fd08f;--ox:#c9f0d7;--od:#145a34;--ow:#fdfcf7}
.vx[data-c=orange]{--ol:#fff0e0;--om:#ffc58c;--os:#ff8f2e;--op:#fff7ee;--ob:#ffa24d;--ox:#ffd9b3;--od:#7a3a00;--ow:#fdfcf7}
.vx-pick{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;touch-action:pan-y}
.vx-pick[hidden],.vx-dots[hidden]{display:none}
.vx-vname{flex:1;text-align:center;min-width:0;transition:opacity .18s,transform .22s}
.vx-vname b{display:block;font-size:32px;font-weight:800;letter-spacing:-.5px;color:var(--od,#7a4a00)}
.vx-vname span{display:block;margin-top:2px;font-size:14px;color:#777}
.vx-vname.o-l{opacity:0;transform:translateX(-22px)}.vx-vname.o-r{opacity:0;transform:translateX(22px)}
.vx-nx{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);color:var(--od,#7a4a00);display:grid;place-items:center;transition:transform .12s,opacity .2s}
.vx-nx:active{transform:scale(.9)}.vx-pv svg{transform:scaleX(-1)}
.vx[data-s=thinking] .vx-nx,.vx[data-s=speaking] .vx-nx{opacity:.3;pointer-events:none} /* jangan ganti suara di tengah jawaban */
.vx-dots{display:flex;gap:7px}.vx-dots i{width:7px;height:7px;border-radius:9px;background:#ddd;transition:width .25s,background .3s}.vx-dots i.on{width:22px;background:var(--ob,#f5c518)}
.vx-sp{height:44px}
.vx-st{font-size:16px;font-weight:600;letter-spacing:.2px;color:rgba(0,0,0,.78);min-height:24px;text-align:center}
@media(prefers-reduced-motion:reduce){.vx.on{animation:none}.vx .vx-svg *{animation:none!important}}

.vx .spark.s1{animation-delay:-0s;transform-origin:48px 70px}
.vx .spark.s2{animation-delay:-1.1s;transform-origin:252px 92px}
.vx .spark.s3{animation-delay:-2.0s;transform-origin:236px 246px}
.vx .spark.s4{animation-delay:-0.6s;transform-origin:58px 232px}

.vx .ox0{fill:var(--ow,#fffdf2)}
.vx .ox1{fill:var(--ox,#fff1b8)}
.vx .ox2{stop-color:var(--ob,#f5c518)}
.vx .ox3{stop-color:var(--od,#7a4a00)}
.vx .ox4{stop-color:var(--od,#8a5200)}
.vx .ox5{stop-color:var(--ol,#ffec96)}
.vx .ox6{stop-color:var(--om,#ffd21f)}
.vx .ox7{stop-color:var(--op,#fff2b0)}
.vx .ox8{stop-color:var(--op,#fff3b0)}
.vx .ox9{stop-color:var(--op,#fff6c8)}
.vx .ox10{stop-color:var(--os,#ffc400)}
.vx .ox11{stop-color:var(--ox,#ffe066)}
.vx .ox12{stop-color:var(--ox,#ffe680)}

/* ===== Quiz (Mode Belajar) ===== */
.uq{margin:10px 0 4px;padding:16px;border:1.5px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--sh-1)}
.uq-title{font-weight:800;font-size:17px;line-height:1.3}
.uq-sub{font-size:12.5px;color:var(--mute);margin:2px 0 6px}
.uq-q{padding:12px 0;border-top:1px solid var(--line)}
.uq-q:first-of-type{border-top:0}
.uq-qt{font-weight:650;font-size:15px;line-height:1.5;margin-bottom:8px}
.uq-opts{display:flex;flex-direction:column;gap:7px}
.uq-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-size:14.5px;line-height:1.4;transition:border-color .15s,background .15s}
.uq-opt:hover:not(:disabled){border-color:var(--brand2);background:#f7f9fc}
.uq-opt .uq-k{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--chip);color:var(--brand)}
.uq-opt .uq-t{flex:1;min-width:0}
.uq-opt .uq-m{flex:none;width:18px;text-align:center;font-weight:800}
.uq-opt.sel{border-color:var(--brand);background:#eaf1f6}
.uq-opt.sel .uq-k{background:var(--brand);color:#fff}
.uq-opt:disabled{cursor:default;opacity:1}
.uq-opt.ok{border-color:#2e9d5f;background:#eaf8f0}
.uq-opt.ok .uq-k{background:#2e9d5f;color:#fff}
.uq-opt.ok .uq-m{color:#1f7a47}
.uq-opt.bad{border-color:#d25b5b;background:#fdeeee}
.uq-opt.bad .uq-k{background:#d25b5b;color:#fff}
.uq-opt.bad .uq-m{color:#b13a3a}
.uq.done .uq-opt:not(.ok):not(.bad){opacity:.6}
.uq-ex{margin-top:8px;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5}
.uq-ex.ok{background:#eaf8f0;color:#1d6a40}
.uq-ex.bad{background:#fdeeee;color:#8f2f2f}
.uq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.uq-prog{font-size:13px;color:var(--mute)}
.uq-submit{border:0;border-radius:999px;padding:10px 20px;font-weight:700;font-size:14.5px;color:#fff;background:linear-gradient(135deg,var(--brand2),var(--brand))}
.uq-submit:disabled{opacity:.45;cursor:not-allowed}
.uq-res{padding-top:12px;border-top:1px solid var(--line)}
.uq-score{font-weight:800;font-size:17px;margin-bottom:10px}
.uq-acts{display:flex;flex-wrap:wrap;gap:8px}

/* Mode Belajar: sakelar di Pengaturan > Gaya jawab */
.study-toggle{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:14px 16px;border:1.5px solid var(--line);border-radius:20px;background:#fff;cursor:pointer}
.study-toggle input{position:absolute;opacity:0;pointer-events:none}
.study-toggle .st-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.study-toggle .st-body b{font-size:16px}
.study-toggle .st-d{font-size:13px;color:var(--mute);line-height:1.45}
.study-toggle .st-sw{flex:none;position:relative;width:46px;height:28px;border-radius:999px;background:#c8dae7;transition:background .2s}
.study-toggle .st-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(17,50,74,.3);transition:transform .2s}
.study-toggle input:checked ~ .st-sw{background:var(--brand)}
.study-toggle input:checked ~ .st-sw::after{transform:translateX(18px)}
.study-toggle input:focus-visible ~ .st-sw{outline:2px solid var(--amber);outline-offset:2px}