/* AI Build layar penuh, gaya NEOBRUTALISM sama seperti aplikasi: border hitam tebal, bayangan keras, warna solid.
   Animasi: satu easing, durasi seragam, gerak simetris. Badan kartu tidak bereaksi saat disentuh. */
#aiRoot{--k:#111;--paper:#fff1d6;--acc:#ffd83d;--pink:#ff9ec8;--blue:#8cc8ff;--green:#7ee8a2;--red:#ff6b6b;--bw:3px;--sh:5px 5px 0 var(--sd,#111);--sh-s:3px 3px 0 var(--sd,#111);--mute:#4a4a4a}
#aiRoot .cx{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;height:var(--vvh,100dvh);color:var(--k);font-family:'Space Grotesk',system-ui,Roboto,sans-serif;font-weight:500;overflow:hidden;
  background-color:var(--paper);background-image:radial-gradient(rgba(17,17,17,.13) 1.3px,transparent 1.4px);background-size:22px 22px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#aiRoot .cx *{box-sizing:border-box;font-family:inherit;letter-spacing:0;text-transform:none}
#aiRoot .cx button{border:0;background:none;padding:0;margin:0;box-shadow:none;border-radius:0;color:var(--k);font-weight:700;min-height:0;cursor:pointer;touch-action:manipulation}
#aiRoot .cx b{font-weight:700;color:var(--k)}
#aiRoot .cx small{color:var(--mute)!important;font-weight:500}
#aiRoot .cx svg{stroke:currentColor}
#aiRoot .cx .hide{display:none!important}

/* ===== header ===== */
#aiRoot .cxh{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;background:var(--cbg,#fff);border-bottom:var(--bw) solid var(--bd,var(--k));flex:none}
#aiRoot .cxib{width:42px;height:42px;display:grid;place-items:center;font-size:21px;background:var(--cbg,#fff)!important;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:13px!important;box-shadow:var(--sh-s)!important;flex:none;position:relative}
#aiRoot .cxib:active{background:var(--acc)!important}
#aiRoot #cxMenu{background:var(--acc)!important}
#aiRoot .cxt{flex:1;min-width:0;padding:0 2px}
#aiRoot .cxt b{display:block;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiRoot .cxs{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12px;font-weight:700;color:var(--mute);font-family:'Space Mono',monospace}
#aiRoot .cxs i{width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bd,var(--k));flex:none}
#aiRoot .cx.busy .cxs i{background:var(--acc)}

/* ===== tata letak ===== */
#aiRoot .cxbody{flex:1;min-height:0;display:flex;flex-direction:column}
#aiRoot .cxc{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;width:100%}
#aiRoot .cxm{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 10px;display:flex;flex-direction:column;gap:18px}
#aiRoot .cxm>*{width:100%;max-width:780px;margin-inline:auto}

/* ===== pesan ===== */
#aiRoot .cxr{display:flex;gap:10px;align-items:flex-start}
#aiRoot .cxr.u{justify-content:flex-end}
#aiRoot .cxav{width:40px;height:40px;border-radius:13px;background:var(--blue);border:var(--bw) solid var(--bd,var(--k));box-shadow:var(--sh-s);display:grid;place-items:center;font-size:19px;flex:none;color:var(--k)}
#aiRoot .cxr.err .cxav{background:var(--red)}
#aiRoot .cxbd{min-width:0;display:flex;flex-direction:column;gap:8px;max-width:100%}
#aiRoot .cxr.a .cxbd{flex:1}
#aiRoot .cxr.u .cxbd{align-items:flex-end;max-width:88%}
#aiRoot .cxb{font-size:15px;line-height:1.6;color:var(--k);word-break:break-word;-webkit-user-select:text;user-select:text}
#aiRoot .cxr.a .cxb{background:var(--cbg,#fff);border:var(--bw) solid var(--bd,var(--k));border-radius:18px;box-shadow:var(--sh);padding:12px 15px}
#aiRoot .cxr.a .cxb:empty{display:none}
#aiRoot .cxr.err .cxb{background:#ffe1e1}
#aiRoot .cxr.u .cxb{background:var(--acc);border:var(--bw) solid var(--bd,var(--k));border-radius:18px;box-shadow:var(--sh);padding:11px 15px;white-space:pre-wrap;font-weight:600;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#aiRoot .cxr.u .cxb.sel{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;background:var(--cbg,#fff)6b8}
#aiRoot .cxr.u .cxb.hl{background:#ffcf00;box-shadow:2px 2px 0 var(--sd,var(--k))}
#aiRoot .cxr.u.editing .cxb{outline:3px dashed var(--k);outline-offset:3px}
#aiRoot .cxts{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;color:var(--mute);padding:0 4px}
#aiRoot .cxb p{margin:0 0 9px}#aiRoot .cxb p:last-child{margin:0}
#aiRoot .cxb ul,#aiRoot .cxb ol{margin:0 0 9px;padding-left:22px}#aiRoot .cxb li{margin:3px 0}
#aiRoot .cxb h4{font-size:15.5px;font-weight:700;margin:12px 0 6px}
#aiRoot .cxb code{font-family:'Space Mono','JetBrains Mono',monospace;font-size:.84em;font-weight:700;background:var(--acc);border:2px solid var(--bd,var(--k));border-radius:6px;padding:0 5px}
#aiRoot .cxb .cxmini{margin-top:10px}

/* ===== blok kode ===== */
#aiRoot .cxcode{margin:6px 0 12px;border:var(--bw) solid var(--bd,var(--k));border-radius:14px;overflow:hidden;background:#111;box-shadow:var(--sh-s)}
#aiRoot .cxch{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;background:var(--blue);border-bottom:var(--bw) solid var(--bd,var(--k));font-size:12px;font-weight:700;font-family:'Space Mono',monospace;color:var(--k)}
#aiRoot .cxch button{background:var(--cbg,#fff)!important;border:2px solid var(--bd,var(--k))!important;border-radius:8px!important;padding:3px 10px!important;font-size:12px}
#aiRoot .cxcode pre{margin:0;padding:12px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#aiRoot .cxcode code{background:none!important;border:0!important;color:#f7f3e3!important;padding:0!important;font-size:12.5px;font-weight:400;line-height:1.6;white-space:pre;display:block}

/* ===== kartu hasil (diam, tidak bergerak saat disentuh) ===== */
#aiRoot .cxres{display:flex;flex-direction:column;gap:10px}
#aiRoot .cxrh{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
#aiRoot .cxrh svg{font-size:16px;background:var(--green);border:2px solid var(--bd,var(--k));border-radius:6px;padding:1px}
#aiRoot .cxf,#aiRoot .cxlfr{display:flex;align-items:center;gap:11px;padding:11px 12px;border:var(--bw) solid var(--bd,var(--k));border-radius:16px;background:var(--cbg,#fff);box-shadow:var(--sh-s);cursor:default}
#aiRoot .cxf.on{background:var(--cbg,#fff)6b8}
#aiRoot .cxfi{width:38px;height:38px;border-radius:11px;background:var(--acc);border:2px solid var(--bd,var(--k));display:grid;place-items:center;font-size:19px;flex:none;color:var(--k)}
#aiRoot .cxfb{flex:1;min-width:0}
#aiRoot .cxfn{display:flex;align-items:center;gap:8px}
#aiRoot .cxfn b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiRoot .cxfn em{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;border:2px solid var(--bd,var(--k));flex:none;font-family:'Space Mono',monospace}
#aiRoot .cxfn em.nw{background:var(--green)}#aiRoot .cxfn em.up{background:var(--acc)}
#aiRoot .cxfb small{display:block;font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Space Mono',monospace}
#aiRoot .cxfa{display:flex;gap:7px;flex:none}
#aiRoot .cxmini{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 11px!important;border:2px solid var(--bd,var(--k))!important;border-radius:10px!important;background:var(--cbg,#fff)!important;box-shadow:2px 2px 0 var(--sd,var(--k))!important;font-size:12.5px;font-weight:700}
#aiRoot .cxmini:active{background:var(--acc)!important}
#aiRoot .cxmini svg{font-size:14px}
#aiRoot .cxmini.on,#aiRoot .cxf [data-a=pv]{background:var(--acc)!important}
#aiRoot .cxmini:disabled{opacity:.4}
@media(max-width:520px){#aiRoot .cxf{flex-wrap:wrap}#aiRoot .cxfa{width:100%}#aiRoot .cxfa .cxmini{flex:1}}

/* ===== progres ===== */
#aiRoot .cxlive{width:min(100%,560px);display:flex;flex-direction:column;gap:11px;padding:14px;border:var(--bw) solid var(--bd,var(--k));border-radius:18px;background:var(--cbg,#fff);box-shadow:var(--sh)}
#aiRoot .cxlh{display:flex;align-items:center;gap:10px}
#aiRoot .cxlt{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
#aiRoot .cxlt b{font-size:15px}
#aiRoot .cxsp{width:14px;height:14px;border:3px solid var(--k);border-top-color:transparent;border-radius:50%;animation:cxSpin .7s linear infinite!important;flex:none}
#aiRoot .cxlive.fin .cxsp{animation:none!important;border:0;width:16px;height:16px;border-radius:5px;background:var(--green);position:relative}
#aiRoot .cxlive.fin .cxsp::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid var(--k);border-width:0 2.5px 2.5px 0;rotate:45deg}
#aiRoot .cxlive.fin.fail .cxsp{background:var(--red)}
#aiRoot .cxlive.fin.fail .cxsp::after{left:6px;top:2px;width:2px;height:10px;border:0;background:var(--k);rotate:45deg;box-shadow:none}
#aiRoot .cxlive.fin.cancel .cxsp{background:var(--acc)}
#aiRoot .cxlive.fin.cancel .cxsp::after{left:4px;top:7px;width:8px;height:0;border-width:2.5px 0 0;rotate:0deg}
#aiRoot .cxtm{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;background:var(--acc);border:2px solid var(--bd,var(--k));border-radius:8px;padding:1px 8px}
#aiRoot .cxtg{font-size:12px;font-weight:700;padding:2px 10px!important;border:2px solid var(--bd,var(--k))!important;border-radius:8px!important;background:var(--cbg,#fff)!important}
#aiRoot .cxtg::after{content:'';display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-left:.25em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}#aiRoot .cxlive.open .cxtg::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E")}
#aiRoot .cxbar{height:26px;border:var(--bw) solid var(--bd,var(--k));border-radius:99px;background:var(--cbg,#fff);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(17,17,17,.06)}
#aiRoot .cxfill{height:100%;width:3%;min-width:46px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;border-right:var(--bw) solid var(--bd,var(--k));border-radius:99px;transition:width .45s cubic-bezier(.2,.8,.2,1)!important;background-color:var(--acc);background-image:linear-gradient(135deg,rgba(17,17,17,.14) 25%,transparent 25%,transparent 50%,rgba(17,17,17,.14) 50%,rgba(17,17,17,.14) 75%,transparent 75%);background-size:28px 28px;animation:cxStripe .8s linear infinite}
#aiRoot .cxfill span{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;color:var(--k)}
#aiRoot .cxlive.fin .cxfill{animation:none;background-image:none;background-color:var(--green)}
#aiRoot .cxlive.fin.fail .cxfill{background-color:var(--red)}
#aiRoot .cxlive.fin.cancel .cxfill{background-color:var(--acc)}
#aiRoot .cxst{display:flex;gap:6px}
#aiRoot .cxsg{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 6px;border:2px solid var(--bd,var(--k));border-radius:10px;font-size:12px;font-weight:700;color:var(--mute);background:var(--cbg,#fff);min-width:0;transition:background-color var(--t2),color var(--t2)}
#aiRoot .cxsg i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;flex:none;display:grid;place-items:center;opacity:.55}
#aiRoot .cxsg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiRoot .cxsg.on{color:var(--k);background:var(--acc)}
#aiRoot .cxsg.on i{opacity:1;border-top-color:transparent;animation:cxSpin .7s linear infinite!important}
#aiRoot .cxsg.ok{color:var(--k);background:var(--green)}
#aiRoot .cxsg.ok i{opacity:1;border:0;background:var(--k);position:relative;animation:cxPop var(--t2) var(--spring)}
#aiRoot .cxsg.ok i::after{content:'';width:3px;height:6px;border:solid var(--green);border-width:0 2px 2px 0;margin-top:-1px;rotate:45deg}
#aiRoot .cxdt{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;color:var(--mute);min-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiRoot .cxlive.fin .cxst,#aiRoot .cxlive.fin .cxdt{display:none}
#aiRoot .cxlive.fin.open .cxst{display:flex}#aiRoot .cxlive.fin.open .cxdt{display:block}
#aiRoot .cxlm{display:flex;flex-wrap:wrap;gap:6px}
#aiRoot .cxlm span{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;padding:2px 9px;border:2px solid var(--bd,var(--k));border-radius:99px;background:var(--blue)}
#aiRoot .cxtree{display:flex;flex-direction:column;gap:8px}#aiRoot .cxtree:empty{display:none}
#aiRoot .cxtf{border:2px solid var(--bd,var(--k));border-radius:14px;background:var(--cbg,#fff);box-shadow:2px 2px 0 var(--sd,var(--k));overflow:hidden;animation:cxLeft var(--t2) var(--ease) both}
#aiRoot .cxtf>summary,#aiRoot .ctcode>summary,#aiRoot .cxtreebox>summary{list-style:none;cursor:pointer}
#aiRoot .cxtf>summary::-webkit-details-marker,#aiRoot .ctcode>summary::-webkit-details-marker,#aiRoot .cxtreebox>summary::-webkit-details-marker{display:none}
#aiRoot .cxtf>summary{display:flex;align-items:center;gap:10px;padding:8px 10px}
#aiRoot .cxtf[open]>summary{border-bottom:2px dashed var(--k);background:var(--acc)}
#aiRoot .cxtn{display:flex;flex-direction:column;min-width:0;flex:1}
#aiRoot .cxtn b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiRoot .cxtn small{font-size:11.5px;font-family:'Space Mono',monospace;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiRoot .cxtf>summary em{font-style:normal;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:1px 8px;border:2px solid var(--bd,var(--k));border-radius:99px;background:var(--blue);flex:none}
#aiRoot .ctlist{list-style:none;margin:0;padding:6px 8px 8px;display:flex;flex-direction:column;gap:4px;counter-reset:none}
#aiRoot .ctrow,#aiRoot .ctcode>summary{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;font-size:12.5px}
#aiRoot .ctcode>summary{background:#111;color:#f7f3e3}
#aiRoot .ctnum{width:20px;height:20px;border-radius:6px;border:2px solid var(--bd,var(--k));background:var(--cbg,#fff);display:grid;place-items:center;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;flex:none;color:var(--k)}
#aiRoot .ctname{font-weight:700;flex:none}
#aiRoot .cthint{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#aiRoot .ctcode>summary .cthint{color:#bdb8a6}
#aiRoot .ctcode pre{margin:0;padding:10px 12px;background:#111;border-top:1px solid #333;overflow-x:auto;max-height:260px;-webkit-overflow-scrolling:touch;border-radius:0 0 8px 8px}
#aiRoot .ctcode code{display:block;white-space:pre;color:#f7f3e3;font-size:12px;line-height:1.55;font-family:'Space Mono',monospace;background:none;border:0;padding:0}
#aiRoot .cxtreebox{width:min(100%,560px);border:var(--bw) solid var(--bd,var(--k));border-radius:16px;background:var(--cbg,#fff);box-shadow:var(--sh-s);padding:0}
#aiRoot .cxtreebox>summary{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13.5px}
#aiRoot .cxtreebox>summary svg{font-size:18px}
#aiRoot .cxtreebox>summary em{margin-left:auto;font-style:normal;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--mute)}
#aiRoot .cxtreebox .cxtree{padding:0 10px 10px}
#aiRoot .cxlx{margin-top:2px}
@media(max-width:330px){#aiRoot .cxsg span{display:none}}

/* ===== sambutan ===== */
#aiRoot .cxw{margin:auto;text-align:center;max-width:620px;padding:10px 0}
#aiRoot .cxorb{width:72px;height:72px;margin:0 auto 16px;border:var(--bw) solid var(--bd,var(--k));border-radius:22px;background:var(--acc);box-shadow:var(--sh);display:grid;place-items:center;font-size:32px}
#aiRoot .cxw h3{font-size:24px;font-weight:700;letter-spacing:-.01em}
#aiRoot .cxw p{color:var(--mute);font-size:14px;line-height:1.6;margin:8px auto 20px;max-width:470px;font-weight:500}
#aiRoot .cxg{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
@media(max-width:560px){#aiRoot .cxg{grid-template-columns:1fr}}
#aiRoot .cxk{display:flex;gap:11px;align-items:flex-start;padding:12px;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:16px!important;background:var(--cbg,#fff)!important;box-shadow:var(--sh-s)!important;text-align:left}
#aiRoot .cxk:nth-child(2) .cxfi{background:var(--pink)}#aiRoot .cxk:nth-child(3) .cxfi{background:var(--blue)}#aiRoot .cxk:nth-child(4) .cxfi{background:var(--green)}
#aiRoot .cxk:active{background:var(--cbg,#fff)6b8!important}
#aiRoot .cxk b{display:block;font-size:14.5px}
#aiRoot .cxk small{display:block;font-size:12.5px;margin-top:2px;line-height:1.4}

/* ===== chip saran ===== */
#aiRoot .cxq{display:flex;gap:10px;padding:6px 14px 10px;overflow-x:auto;flex:none}
#aiRoot .cxq.hide{display:none}
#aiRoot .cxq button{flex:none;font-size:13.5px;font-weight:700;padding:7px 14px!important;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:99px!important;background:var(--cbg,#fff)!important;box-shadow:var(--sh-s)!important;white-space:nowrap}
#aiRoot .cxq button:active{background:var(--acc)!important}

/* ===== composer ===== */
#aiRoot .cxi{padding:4px 14px calc(env(safe-area-inset-bottom) + 14px);flex:none}
#aiRoot .cxbox{width:100%;max-width:780px;margin:0 auto;border:var(--bw) solid var(--bd,var(--k));border-radius:20px;background:var(--cbg,#fff);box-shadow:var(--sh);padding:12px 12px 10px 15px}
#aiRoot .cx textarea{display:block;width:100%!important;min-height:26px!important;max-height:180px;padding:2px 0!important;margin:0;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;color:var(--k)!important;font-size:15.5px!important;line-height:1.5;font-weight:500!important;resize:none;-webkit-user-select:text;user-select:text}
#aiRoot .cx textarea::placeholder{color:#8a8576!important;font-weight:500!important}
#aiRoot .cxbr{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:2px dashed var(--k)}
#aiRoot .cxcn{margin-left:auto;font-size:11.5px;color:var(--mute);font-family:'Space Mono',monospace;font-weight:700}
#aiRoot .cxtg{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;padding:0!important;text-transform:uppercase!important;letter-spacing:.04em!important}
#aiRoot .cxtg i{width:44px;height:26px;border:var(--bw) solid var(--bd,var(--k));border-radius:99px;background:var(--cbg,#fff);position:relative;flex:none}
#aiRoot .cxtg i::after{content:'';position:absolute;top:50%;left:2px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--k)}
#aiRoot .cxtg[aria-checked=true] i{background:var(--green)}
#aiRoot .cxtg[aria-checked=true] i::after{left:auto;right:2px}
#aiRoot .cxsend{width:46px;height:46px;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:14px!important;background:var(--acc)!important;box-shadow:var(--sh-s)!important;display:grid;place-items:center;font-size:20px;flex:none}
#aiRoot .cxsend:active{background:#ffc400!important}
/* saat AI bekerja: tombol berhenti merah dengan kotak putih */
#aiRoot .cx.busy .cxsend{background:var(--red)!important}
#aiRoot .cx.busy .cxsend svg,#aiRoot .cx.busy .cxsend svg *{stroke:var(--k)!important;fill:#fff!important}
#aiRoot .cxedit{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;padding:6px 8px 6px 12px;border:2px solid var(--bd,var(--k));border-radius:12px;background:var(--pink);font-size:12.5px;font-weight:700}
#aiRoot .cxedit span{display:inline-flex;align-items:center;gap:6px}
#aiRoot .cxedit svg{font-size:15px}
#aiRoot .cxedit button{font-size:12.5px;padding:4px 10px!important;border:2px solid var(--bd,var(--k))!important;border-radius:8px!important;background:var(--cbg,#fff)!important}

/* ===== pratinjau Telegram di dalam bubble ===== */
#aiRoot .cxpvb{margin-top:10px;padding:10px;border:var(--bw) solid var(--bd,var(--k));border-radius:18px;background:var(--blue);box-shadow:var(--sh-s);display:flex;flex-direction:column;gap:10px}
#aiRoot .cxpvh{display:flex;align-items:center;gap:8px}
#aiRoot .cxlv{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin-right:auto}
#aiRoot .cxlv i{width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bd,var(--k))}
#aiRoot .cxpvb .tg{width:100%;max-width:340px;height:480px;flex:none;margin:0 auto;border:var(--bw) solid var(--bd,var(--k));border-radius:28px}
#aiRoot .axem{margin:auto;text-align:center;color:#8b9aa8;font-size:13.5px;padding:0 24px;line-height:1.6}

/* ===== drawer riwayat ===== */
#aiRoot .cxdr{position:absolute;inset:0;z-index:5;display:flex}
#aiRoot .cxdr.hide{display:none}
#aiRoot .cxsc{position:absolute;inset:0;background:rgba(17,17,17,.45)}
#aiRoot .cxpn{position:relative;width:min(86vw,330px);height:100%;background:var(--paper);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 12px);border-right:var(--bw) solid var(--bd,var(--k));box-shadow:6px 0 0 var(--sd,#111)}
#aiRoot .cxph{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px}
#aiRoot .cxph b{font-size:20px}
#aiRoot .cxnew{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:14px!important;background:var(--acc)!important;box-shadow:var(--sh-s)!important;font-size:15px;flex:none}
#aiRoot .cxnew svg{font-size:19px}
#aiRoot .cxsr{display:flex;align-items:center;gap:8px;height:44px;margin:14px 0 6px;padding:0 12px;border:var(--bw) solid var(--bd,var(--k));border-radius:14px;background:var(--cbg,#fff);flex:none}
#aiRoot .cxsr svg{font-size:18px}
#aiRoot .cxsr input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important;font-size:14.5px!important;font-weight:600!important;color:var(--k)!important;outline:0!important;-webkit-user-select:text;user-select:text}
#aiRoot .cxls{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px 6px}
#aiRoot .cxgh{font-size:11.5px;font-weight:700;font-family:'Space Mono',monospace;text-transform:uppercase!important;padding:14px 4px 6px}
#aiRoot .cxch2{display:flex;align-items:center;margin-bottom:8px;border:var(--bw) solid var(--bd,var(--k));border-radius:14px;background:var(--cbg,#fff);box-shadow:2px 2px 0 var(--sd,var(--k));overflow:hidden}
#aiRoot .cxch2.on{background:var(--acc)}
#aiRoot .cxcb{flex:1;min-width:0;text-align:left;padding:9px 11px!important}
#aiRoot .cxcb b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#aiRoot .cxcb small{font-size:11.5px;font-family:'Space Mono',monospace}
#aiRoot .cxcd{width:40px;align-self:stretch;display:grid;place-items:center;font-size:17px;border-left:2px solid var(--bd,var(--k))!important;background:var(--cbg,#fff)!important;flex:none}
#aiRoot .cxcd:active{background:var(--red)!important}
#aiRoot .cxem{font-size:13px;color:var(--mute);padding:16px 4px;line-height:1.55}
#aiRoot .cxpf{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;font-family:'Space Mono',monospace;padding:10px 2px 0;border-top:var(--bw) solid var(--bd,var(--k));flex:none}
#aiRoot .cxpf button{font-size:12px;padding:5px 10px!important;border:2px solid var(--bd,var(--k))!important;border-radius:9px!important;background:var(--red)!important}

/* ===== popup tahan-bubble dan toast ===== */
#aiRoot .cxpop{position:fixed;z-index:6;min-width:216px;padding:6px;border:var(--bw) solid var(--bd,var(--k));border-radius:16px;background:var(--cbg,#fff);box-shadow:var(--sh)}
#aiRoot .cxpop button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px!important;border-radius:10px!important;font-size:15px;font-weight:700;text-align:left}
#aiRoot .cxpop button+button{border-top:2px dashed var(--k)!important;border-radius:0!important}
#aiRoot .cxpop button:active{background:var(--acc)!important}
#aiRoot .cxpop button:disabled{opacity:.4}
#aiRoot .cxpop svg{font-size:19px;flex:none}
#aiRoot .cxtoast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 130px);translate:-50% 0;z-index:7;padding:9px 16px;border:var(--bw) solid var(--bd,var(--k));border-radius:12px;background:var(--acc);box-shadow:var(--sh-s);color:var(--k);font-size:13px;font-weight:700;opacity:0;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
#aiRoot .cxtoast.in{opacity:1}

/* ===== mode layar penuh: sembunyikan bar atas dan navigasi bawah aplikasi ===== */
body.aifull #app main .tb,body.aifull #app .tb,body.aifull #app aside,body.aifull #app aside.glass,body.aifull aside.glass{display:none!important}
body.aifull{overflow:hidden}

/* ===================== ANIMASI ===================== */
#aiRoot{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.64,1);--t1:.12s;--t2:.26s;--t3:.3s}
@keyframes cxUp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes cxLeft{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}
@keyframes cxRight{from{opacity:0;translate:16px 0}to{opacity:1;translate:0 0}}
@keyframes cxPop{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes cxOpen{from{opacity:0;scale:1 .9;translate:0 -8px}to{opacity:1;scale:1 1;translate:0 0}}
@keyframes cxScreen{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes cxFloat{0%,100%{translate:0 -4px}50%{translate:0 4px}}
@keyframes cxBeat{0%,100%{scale:.88}50%{scale:1.12}}
@keyframes cxStripe{to{background-position:28px 0}}
@keyframes cxDot{0%,80%,100%{translate:0 0;opacity:.35}40%{translate:0 -5px;opacity:1}}

/* layar AI masuk */
#aiRoot .cx{animation:cxScreen var(--t3) var(--ease) both}

/* pesan masuk: pengguna dari kanan, AI dari kiri (hanya pesan baru, bukan riwayat) */
#aiRoot .cxr.ent.u{animation:cxRight var(--t2) var(--ease) both}
#aiRoot .cxr.ent.a{animation:cxLeft var(--t2) var(--ease) both}
#aiRoot .cxr.ent .cxav{animation:cxPop var(--t2) var(--spring) both;animation-delay:.05s}
/* kartu hasil muncul berurutan, jarak jeda sama */
#aiRoot .cxr.ent .cxres>*{animation:cxUp var(--t2) var(--ease) both}
#aiRoot .cxr.ent .cxres>:nth-child(1){animation-delay:.12s}
#aiRoot .cxr.ent .cxres>:nth-child(2){animation-delay:.19s}
#aiRoot .cxr.ent .cxres>:nth-child(3){animation-delay:.26s}
#aiRoot .cxr.ent .cxres>:nth-child(4){animation-delay:.33s}
#aiRoot .cxr.ent .cxres>:nth-child(n+5){animation-delay:.4s}
#aiRoot .cxpvb{transform-origin:top center;animation:cxOpen var(--t3) var(--ease) both}

/* progres: titik mengetik, garis bergerak, status berdenyut */
#aiRoot .cxdots{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
#aiRoot .cxdots i{width:6px;height:6px;border-radius:50%;background:var(--k);animation:cxDot 1.2s ease-in-out infinite}
#aiRoot .cxdots i:nth-child(2){animation-delay:.15s}#aiRoot .cxdots i:nth-child(3){animation-delay:.3s}
#aiRoot .cx.busy .cxs i{animation:cxBeat 1s ease-in-out infinite}
#aiRoot .cxav.busy{animation:cxBeat 1.2s ease-in-out infinite}

/* sambutan: kartu berurutan, ikon melayang naik-turun sama jauh */
#aiRoot .cxw>*{animation:cxUp .4s var(--ease) both}
#aiRoot .cxw>:nth-child(2){animation-delay:.06s}#aiRoot .cxw>:nth-child(3){animation-delay:.12s}
#aiRoot .cxorb{animation:cxFloat 3.2s ease-in-out infinite,cxPop .4s var(--spring) both}
#aiRoot .cxg>*{animation:cxUp .4s var(--ease) both}
#aiRoot .cxg>:nth-child(1){animation-delay:.18s}#aiRoot .cxg>:nth-child(2){animation-delay:.25s}
#aiRoot .cxg>:nth-child(3){animation-delay:.32s}#aiRoot .cxg>:nth-child(4){animation-delay:.39s}

/* tombol bergaya neobrutalism: saat ditekan turun tepat sebesar bayangannya (tanpa selisih) */
#aiRoot .cxib,#aiRoot .cxsend,#aiRoot .cxnew,#aiRoot .cxq button{transition:translate var(--t1) var(--ease),box-shadow var(--t1) var(--ease),background-color var(--t1)}
#aiRoot .cxmini,#aiRoot .cxedit button,#aiRoot .cxch button,#aiRoot .cxpf button{transition:translate var(--t1) var(--ease),box-shadow var(--t1) var(--ease),background-color var(--t1)}
#aiRoot .cxib:active,#aiRoot .cxsend:active,#aiRoot .cxnew:active,#aiRoot .cxq button:active{translate:3px 3px;box-shadow:0 0 0 var(--sd,var(--k))!important}
#aiRoot .cxmini:active{translate:2px 2px;box-shadow:0 0 0 var(--sd,var(--k))!important}
#aiRoot .cxsend svg{animation:cxPop var(--t2) var(--spring) both}

/* composer */
#aiRoot .cxbox{transition:translate var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
#aiRoot .cxbox:focus-within{translate:-2px -2px;box-shadow:7px 7px 0 var(--sd,var(--k))}
#aiRoot .cxedit{animation:cxUp var(--t2) var(--ease) both}
#aiRoot .cxtg i{transition:background-color var(--t2) var(--ease)}
#aiRoot .cxtg i::after{left:2px;right:auto;transition:translate var(--t2) var(--spring)}
#aiRoot .cxtg[aria-checked=true] i::after{left:2px;right:auto;translate:20px 0}
#aiRoot .cxcn{transition:color var(--t2)}

/* drawer: panel geser dari kiri, latar memudar, daftar masuk berurutan */
#aiRoot .cxsc{opacity:0;transition:opacity var(--t3) var(--ease)}
#aiRoot .cxdr.in .cxsc{opacity:1}
#aiRoot .cxpn{translate:-105% 0;transition:translate var(--t3) var(--ease)}
#aiRoot .cxdr.in .cxpn{translate:0 0}
#aiRoot .cxdr.in .cxch2,#aiRoot .cxdr.in .cxgh{animation:cxLeft var(--t2) var(--ease) both;animation-delay:var(--d,0ms)}
#aiRoot .cxch2{transition:background-color var(--t1)}

/* popup dan toast */
#aiRoot .cxpop{transform-origin:top right;animation:cxPop .18s var(--spring) both}
#aiRoot .cxpop button{transition:background-color var(--t1)}
#aiRoot .cxtoast{translate:-50% 12px;transition:opacity var(--t2) var(--ease),translate var(--t2) var(--ease)}
#aiRoot .cxtoast.in{translate:-50% 0}

/* kartu hasil dan kartu ide: badan kartu tidak bereaksi (tidak ada hover/press), hanya warna latar saat terpilih */
#aiRoot .cxf,#aiRoot .cxk{transition:background-color var(--t2)}

@media(prefers-reduced-motion:reduce){#aiRoot .cx *,#aiRoot .cx{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* avatar progres: muncul dulu, lalu berdenyut terus selama AI bekerja */
#aiRoot .cxr.ent .cxav.busy{animation:cxPop var(--t2) var(--spring),cxBeat 1.2s ease-in-out var(--t2) infinite}

/* bubble AI: pop-up tahan, pilih teks, sorot */
#aiRoot .cxr.a .cxb.hl{background:#ffcf00;box-shadow:2px 2px 0 var(--sd,var(--k))}
#aiRoot .cxr.a .cxb.sel{-webkit-touch-callout:default}
#aiRoot .cxpop.left{transform-origin:top left}
#aiRoot .cxr.set .cxres>*{animation:cxUp var(--t2) var(--ease) both}
#aiRoot .cxr.set .cxres>:nth-child(2){animation-delay:.07s}#aiRoot .cxr.set .cxres>:nth-child(n+3){animation-delay:.14s}
/* lembar bagikan */
#aiRoot .cxsheet{position:fixed;inset:0;z-index:8;display:flex;align-items:flex-end;justify-content:center}
#aiRoot .cxsback{position:absolute;inset:0;background:rgba(17,17,17,.45);animation:cxFade .2s both}
#aiRoot .cxsbox{position:relative;width:min(100%,520px);padding:10px 16px calc(env(safe-area-inset-bottom) + 16px);border:var(--bw) solid var(--bd,var(--k));border-bottom:0;border-radius:22px 22px 0 0;background:var(--cbg,#fff);box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;animation:cxSheet .28s var(--ease) both}
#aiRoot .cxsgrip{width:44px;height:5px;border-radius:9px;background:var(--k);opacity:.25;margin:0 auto}
#aiRoot .cxsbox>b{font-size:16px}
#aiRoot .cxsprev{font-size:13px;line-height:1.5;color:var(--mute);padding:8px 10px;border:2px dashed var(--k);border-radius:12px;max-height:84px;overflow:hidden;white-space:pre-wrap;word-break:break-word}
#aiRoot .cxsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#aiRoot .cxsgrid>*{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px!important;font-size:12px;font-weight:700;color:var(--k);text-decoration:none;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:14px!important;background:var(--cbg,#fff)!important;box-shadow:2px 2px 0 var(--sd,var(--k))}
#aiRoot .cxsgrid>*:active{background:var(--acc)!important}
#aiRoot .cxsgrid i{width:38px;height:38px;border-radius:12px;border:2px solid var(--bd,var(--k));background:var(--blue);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:17px}
#aiRoot .cxsgrid i svg{font-size:20px}
#aiRoot .cxsx{padding:11px!important;font-weight:700;border:var(--bw) solid var(--bd,var(--k))!important;border-radius:14px!important;background:var(--acc)!important}
@keyframes cxFade{from{opacity:0}to{opacity:1}}
@keyframes cxSheet{from{translate:0 100%}to{translate:0 0}}

/* ===== warna: ikut aksen tema, tanpa biru ===== */
#aiRoot{--blue:var(--card3,#38331f)}
#aiRoot .cxav{background:var(--acc);color:#111}
#aiRoot .cxpvb{background:var(--card2,#2d2919)}
#aiRoot .cxsgrid i{background:var(--acc);color:#111}
#aiRoot .cxch{background:var(--acc);color:#111}

/* ===== animasi progres yang halus ===== */
#aiRoot .cxfill{background-image:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%);background-size:220% 100%;background-repeat:no-repeat;animation:cxSheen 1.7s ease-in-out infinite}
#aiRoot .cxlive.fin .cxfill{animation:cxDone .7s var(--ease) both;background-image:none}
#aiRoot .cxav.busy{animation:cxGlow 1.8s ease-in-out infinite}
#aiRoot .cxsg{transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--spring)}
#aiRoot .cxsg.on{transform:translateY(-2px)}
#aiRoot .cxlive{animation:cxRise .4s var(--spring) both}
#aiRoot .cxlive.fin{animation:cxSettle .55s var(--spring)}
#aiRoot .cxst,#aiRoot .cxdt{overflow:hidden;transition:max-height .4s var(--ease),opacity .3s var(--ease),margin .4s var(--ease)}
#aiRoot .cxlive.fin .cxst,#aiRoot .cxlive.fin .cxdt{display:flex;max-height:0;opacity:0;margin-block:-5px}
#aiRoot .cxlive.fin .cxdt{display:block}
#aiRoot .cxlive.fin.open .cxst{max-height:60px;opacity:1;margin-block:0}
#aiRoot .cxlive.fin.open .cxdt{max-height:30px;opacity:1;margin-block:0}
#aiRoot .cxtf{animation:cxRise .45s var(--spring) both}
#aiRoot .cxtf[open] .ctstep{animation:cxStep .35s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
#aiRoot .cxtf>summary{transition:background-color .3s var(--ease)}
#aiRoot .cxlx,#aiRoot .cxr.set .cxb{animation:cxFadeUp .4s var(--ease) both}
#aiRoot .cxlm span{animation:cxPop .35s var(--spring) both}
@keyframes cxSheen{0%{background-position:160% 0}100%{background-position:-60% 0}}
@keyframes cxGlow{0%,100%{box-shadow:var(--sh-s),0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}50%{box-shadow:var(--sh-s),0 0 0 10px transparent}}
@keyframes cxRise{from{opacity:0;translate:0 12px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes cxSettle{0%{scale:1}40%{scale:1.015}100%{scale:1}}
@keyframes cxDone{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}
@keyframes cxStep{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}
@keyframes cxFadeUp{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){#aiRoot *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* kontras teks di atas warna aksen / hijau (tema gelap memakai teks putih) */
#aiRoot .cxtm,#aiRoot .cxsg.on,#aiRoot .cxsg.ok,#aiRoot .cxtf[open]>summary,#aiRoot .cxtf[open]>summary small,#aiRoot .cxtf[open]>summary b{color:#111}
#aiRoot .cxtf[open]>summary em{color:#f6efd8;background:#111;border-color:#111}
#aiRoot .cxtg{color:var(--k)}

/* pewarna sintaks kode */
#aiRoot .hc{color:#7f8790;font-style:italic}
#aiRoot .hs{color:#9ece6a}
#aiRoot .hn{color:#ff9e64}
#aiRoot .hk{color:#c792ea}
#aiRoot .hf{color:#ffd83d}
#aiRoot .hp{color:#f08c8c}
#aiRoot .hd{color:#f08c8c}
#aiRoot .hl{color:#ff9e64}
#aiRoot .hy{color:#e5c07b}
#aiRoot .ho{color:#a9b0bb}

html.dark #aiRoot .cxpn{border-right-color:#000;box-shadow:none}
html.dark #aiRoot .cxpf{border-top-color:rgba(255,255,255,.12)}