:root{--blue:#2563eb;--blue-d:#1d4ed8;--txt:#141414;--mut:#8a8984;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#fff;color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{height:100%;display:flex;flex-direction:column;max-width:640px;margin:0 auto;position:relative;overflow:hidden}
header,main,.box{position:relative;z-index:1}
header{display:flex;align-items:center;gap:12px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
main{flex:1;overflow-y:auto;padding:8px 20px;display:flex;flex-direction:column}

/* latar biru lembut */
.blobs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:fl 12s ease-in-out infinite alternate}
.blobs i:nth-child(1){width:260px;height:260px;background:#93c5fd;top:-60px;left:-70px}
.blobs i:nth-child(2){width:220px;height:220px;background:#bfdbfe;top:35%;right:-80px;animation-delay:-4s}
.blobs i:nth-child(3){width:240px;height:240px;background:#93c5fd;bottom:-80px;left:10%;animation-delay:-8s}
@keyframes fl{to{transform:translate(30px,-40px) scale(1.15)}}

/* glass murni: tombol & logo */
.ib,.pill,.cb,.btn,.opt,.logo,.proj,#splash .lg{background:rgba(255,255,255,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);box-shadow:none;color:var(--txt);cursor:pointer}
.ib,.cb{display:grid;place-items:center;border-radius:50%}
.ib{width:42px;height:42px}.cb{width:48px;height:48px}
.cb.b,.btn,.opt,.logo,#splash .lg{color:var(--blue)}
.ib:active,.cb:active,.pill:active,.btn:active,.opt:active,.proj:active{background:rgba(255,255,255,.6)}
.pill{height:48px;padding:0 20px;border-radius:999px;font-size:16px}
.pill span{color:#55534e;margin-left:4px}
.btn{border-radius:999px;padding:14px 24px;font-size:16px;font-weight:600}
.logo{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;cursor:default}
.sp{flex:1}

/* layar awal & menu */
.center{margin:auto;text-align:center;max-width:360px;width:100%}
.center .logo{width:64px;height:64px;border-radius:20px;margin:0 auto 18px}
.center h1{font-size:28px;margin-bottom:8px}
.center p{color:var(--mut);margin-bottom:20px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.opt{border-radius:18px;padding:17px;font-size:16px;font-weight:700;letter-spacing:.4px}
.menu h1{animation:up .6s both}
.menu .opt{animation:rise .65s calc(.12s + var(--i)*.12s) cubic-bezier(.2,1.25,.4,1) both}
.welcome>*{animation:up .6s both}.welcome>*:nth-child(2){animation-delay:.1s}.welcome>*:nth-child(3){animation-delay:.2s}.welcome>*:nth-child(4){animation-delay:.3s}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.3) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

/* chat */
.msgs{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.m{max-width:85%;padding:11px 15px;border-radius:18px;line-height:1.45;font-size:15px;white-space:pre-wrap;animation:up .3s both}
.m.u{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.m.a{align-self:flex-start;background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-bottom-left-radius:6px}
.tag{align-self:center;font-size:12px;color:var(--blue);background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);padding:4px 12px;border-radius:999px;margin-bottom:6px}
.box{margin:8px 14px 14px;background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(255,255,255,.85);border-radius:28px;box-shadow:0 8px 32px rgba(37,99,235,.15);padding:16px 14px 12px;animation:up .5s both}
.box textarea{width:100%;border:0;outline:0;resize:none;font:inherit;font-size:18px;max-height:120px;background:transparent;padding:0 6px 14px;color:var(--txt)}
.box textarea::placeholder{color:var(--mut)}
.row{display:flex;align-items:center;gap:10px}

/* overlay, panel bawah, menu samping, toast */
.ov{position:absolute;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.25s;z-index:10}
.ov.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;border-radius:26px 26px 0 0;padding:14px 22px 30px;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:11;text-align:center}
.sheet.on{transform:none}
.grab{width:42px;height:5px;border-radius:9px;background:#d6d4cf;margin:0 auto 18px}
.sheet h3{font-size:18px;margin-bottom:6px}.sheet p{color:var(--mut);margin-bottom:16px}
.drawer{position:absolute;top:0;bottom:0;left:0;width:82%;max-width:320px;z-index:11;transform:translateX(-105%);transition:transform .3s;padding:calc(18px + env(safe-area-inset-top,0px)) 18px 18px;display:flex;flex-direction:column;gap:12px}
.sheet,.drawer{background:rgba(255,255,255,.65);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.9)}
.drawer.on{transform:none}
.drawer h4{font-size:13px;color:var(--mut);letter-spacing:.8px;text-transform:uppercase;margin-top:6px}
#plist{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.proj{padding:12px 14px;border-radius:14px;font-weight:600}
.proj.act{color:var(--blue);background:rgba(255,255,255,.7)}
.empty{color:var(--mut);font-size:14px}
.toast{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-30px);opacity:0;z-index:20;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--blue);background:rgba(255,255,255,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);transition:.4s;pointer-events:none;white-space:nowrap}
.toast.on{transform:translate(-50%,0);opacity:1}

/* layar pembuka */
#splash{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 42%,#dbeafe,#fff 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s,visibility .6s}
#splash.out{opacity:0;visibility:hidden}
#splash .lg{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;animation:pop .9s cubic-bezier(.2,1.4,.4,1) both}
#splash path{stroke-dasharray:60;stroke-dashoffset:60;animation:dr 1s .4s ease forwards}
#splash h2{font-size:30px;letter-spacing:1px;opacity:0;animation:up .7s 1s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}

/* balasan AI tanpa bubble, animasi mengetik */
.ai{align-self:stretch;font-size:15.5px;line-height:1.6;white-space:pre-wrap;animation:up .3s both;word-break:break-word}
.ai.err{color:#b42318}
.cur{display:inline-block;width:8px;height:1.05em;vertical-align:-3px;background:var(--blue);border-radius:2px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.task,.res{background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:12px 14px;margin-bottom:10px;white-space:normal}
.th,.rh{font-weight:700;font-size:13px;color:var(--blue);letter-spacing:.6px;text-transform:uppercase}
.th{margin-bottom:6px}
.rh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ra{display:flex;gap:6px}
.mini{background:rgba(255,255,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);color:var(--blue);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;cursor:pointer}
.task ul{list-style:none;padding:0}
.task li{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:14.5px;color:var(--mut)}
.task li i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c7d7f5;margin-top:2px;position:relative}
.task li.run{color:var(--txt)}
.task li.run i{border-color:var(--blue);border-top-color:transparent;animation:spin .8s linear infinite}
.task li.done{color:var(--txt)}
.task li.done i{background:var(--blue);border-color:var(--blue)}
.task li.done i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.rb p{white-space:pre-wrap;line-height:1.55;font-size:15px}
.rb pre{background:rgba(20,20,20,.05);border-radius:12px;padding:12px;overflow-x:auto;font-size:12.5px;line-height:1.5;white-space:pre;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace}
.pv{width:100%;height:380px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff}
.pill{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 14px;font-size:14px}
.mlist{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-size:14px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.85);text-align:left}
.mrow code{font-size:13px;color:var(--mut)}
.mrow.act,.mrow.act code{color:var(--blue)}