/* ==========================================================================
   Meta AI: halaman percakapan gaya WhatsApp, mengikuti tema DISPETCH
   (neobrutalism, Share Tech Mono, variabel tema: --paper --card --ink --acc --bd --bw).
   Semua class memakai prefix "mx-" supaya tidak bentrok dengan CSS AI Build (.ai, .me, dst).
   Tata letak memakai blok biasa di area pesan (bukan flex column) agar bubble tidak pernah melar.
   ========================================================================== */

/* tombol melayang Meta AI di atas FAB utama */
html:root body .tb-fab.mini.mx-fab{position:absolute;right:25px;bottom:calc(var(--tb-nav-h,76px) + 16px + 58px + 14px);z-index:5}
/* penyebab FAB AI muncul di semua tab: rule "html body .mini{display:inline-flex!important}" menimpa .hide. Dikalahkan di sini. */
html:root:root body .tb-fab.hide,html:root:root body .tb-fab.mini.mx-fab.hide{display:none!important}

/* ---------- layer (neobrutalism, latar polos mengikuti tema) ---------- */
html body .gp.mx{--mx-r:16px;--mx-blue:#1d9bf0;background:var(--paper,#fff1d6)!important;color:var(--ink,#111)}
.gp.mx>.gp-h{display:none!important}
html body .gp.mx .gp-body{padding:0!important;margin:0!important;gap:0;width:100%!important;max-width:none!important;overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper,#fff1d6)!important;background-image:none!important;color:var(--ink,#111)}
.gp.mx .gp-body>*{flex-shrink:1;min-width:0}

/* header: memakai gaya header aplikasi (.gp-h) */
.mx-hd.gp-h{flex:none;gap:6px;animation:mxHdIn .42s cubic-bezier(.2,.9,.3,1) both}
.mx-hd .gp-b{flex:none}
.mx-hav{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#14161b;border:var(--bw,3px) solid var(--bd,#111);box-shadow:2px 2px 0 var(--bd,#111);margin:0 4px 0 2px;animation:mxAvIn .6s cubic-bezier(.3,1.3,.5,1) .12s both}
.mx-hav svg{width:74%;height:74%;display:block}
.mx-ht{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.mx-nm{display:inline-flex;align-items:center;font-weight:800;font-size:17px}
.mx-nm .tb-vb{width:17px;height:17px;margin-left:4px;flex:none}
.mx-st{display:none;font-size:12px;font-weight:700;white-space:nowrap}
.mx-st.on{display:block;color:#0a7a3d;animation:mxFade .3s ease-out both}
.mx-hb{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:transparent;border:0;color:inherit;padding:0}
.mx-hb:active{background:rgba(0,0,0,.1)}
.mx-logo{display:block;width:100%;height:100%}

/* ---------- area pesan: terkurung, tidak menimpa header / kolom ketik ---------- */
.mx-chat{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;contain:layout paint;isolation:isolate}
.mx-scroll{position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;-webkit-overflow-scrolling:touch;
  padding:10px 10px 16px;display:block;scroll-behavior:auto;background:transparent!important}
.mx-scroll.is-empty{padding:0 12px 8px}
.mx-day{display:flex;justify-content:center;margin:10px 0 8px}
.mx-day span{font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--card,#fff);color:var(--ink,#111);
  border:2px solid var(--bd,#111);letter-spacing:.02em;animation:mxDayIn .35s cubic-bezier(.3,1.5,.5,1) both}

.mx-row{display:flex;width:100%;min-width:0;margin:2px 0}
.mx-row.out{justify-content:flex-end}
.mx-row.in{justify-content:flex-start}
.mx-row.gap{margin-top:9px}

.mx-bub{position:relative;box-sizing:border-box;max-width:min(88%,640px);min-width:64px;height:auto;padding:7px 11px 5px;overflow:hidden;
  border:2px solid var(--bd,#111);border-radius:var(--mx-r);font-size:15px;line-height:1.5;
  color:var(--ink,#111);word-wrap:break-word;overflow-wrap:anywhere;word-break:break-word;box-shadow:2px 2px 0 var(--bd,#111);
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
.mx-row.out .mx-bub{background:var(--acc,#ffd83d);color:#111}
.mx-row.in .mx-bub{background:var(--card,#fff)}
.mx-row.out.first .mx-bub{border-top-right-radius:4px}
.mx-row.in.first .mx-bub{border-top-left-radius:4px}
.mx-row.new.out .mx-bub{transform-origin:100% 100%;animation:mxInR .42s cubic-bezier(.2,1.25,.4,1) both}
.mx-row.new.in .mx-bub{transform-origin:0 100%;animation:mxInL .42s cubic-bezier(.2,1.25,.4,1) both}
.mx-row.new.in .mx-tx>*{animation:mxUp .45s cubic-bezier(.2,.9,.3,1) both}
.mx-row.new.in .mx-tx>*:nth-child(1){animation-delay:.10s}.mx-row.new.in .mx-tx>*:nth-child(2){animation-delay:.18s}
.mx-row.new.in .mx-tx>*:nth-child(3){animation-delay:.26s}.mx-row.new.in .mx-tx>*:nth-child(4){animation-delay:.34s}
.mx-row.new.in .mx-tx>*:nth-child(5){animation-delay:.42s}.mx-row.new.in .mx-tx>*:nth-child(n+6){animation-delay:.5s}

.mx-bub.err{background:#ffd3d8!important;color:#7a0010!important;animation:mxShake .4s ease-out}
.mx-retry{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:999px;border:2px solid #7a0010;background:#fff;color:#7a0010;font:inherit;font-weight:800;font-size:13px}
.mx-retry:active{transform:translate(2px,2px)}

/* teks bubble (warna ikut bubble, tidak diambil dari gaya global) */
.mx-tx{min-width:0;max-width:100%}
.mx-tx :is(b,strong,em,s,li,p,ul,ol,h3,h4,h5,h6,blockquote,span){color:inherit!important}
.mx-tx>*:first-child{margin-top:0}.mx-tx>*:last-child{margin-bottom:0}
.mx-tx p{margin:6px 0}.mx-tx ul,.mx-tx ol{margin:6px 0;padding-left:22px}.mx-tx li{margin:3px 0}
.mx-tx .mx-h{margin:10px 0 4px;font-size:1.05em;line-height:1.3}
.mx-tx blockquote{margin:8px 0;padding:3px 10px;border-left:4px solid var(--mx-blue);background:rgba(29,155,240,.1);border-radius:0 8px 8px 0}
.mx-tx a{color:#1d6fe0;text-decoration:underline;word-break:break-all}
.mx-tx hr{border:0;border-top:2px solid var(--bd,#111);margin:10px 0;opacity:.25}
.mx-ic{padding:1px 5px;border-radius:6px;background:rgba(127,127,127,.22);font-family:ShareTechMono,ui-monospace,Menlo,Consolas,monospace;font-size:.92em;overflow-wrap:anywhere}

/* waktu + centang */
.mx-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:11px;line-height:1;opacity:.62;user-select:none}
.mx-tick{display:inline-flex;width:17px;height:11px}
.mx-tick svg{width:100%;height:100%}
.mx-tick.read{color:var(--mx-blue);opacity:1}
.mx-cp{display:inline-grid;place-items:center;width:22px;height:22px;margin:-6px 0 -5px -4px;padding:0;border:0;background:transparent;color:inherit;border-radius:6px;opacity:.9}
.mx-cp:active{background:rgba(0,0,0,.1)}
.mx-cp svg{width:15px;height:15px}

/* mengetik */
.mx-row[data-typing] .mx-bub{animation:mxInL .4s cubic-bezier(.2,1.25,.4,1) both}
.mx-bub.typing{padding:11px 14px;min-width:0}
.mx-dots{display:inline-flex;gap:5px;align-items:center;height:12px}
.mx-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;animation:mxDot 1s infinite}
.mx-dots i:nth-child(2){animation-delay:.16s}.mx-dots i:nth-child(3){animation-delay:.32s}

/* blok kode: tidak pernah lebih lebar dari bubble */
.mx-code{margin:8px 0;border:2px solid var(--bd,#111);border-radius:12px;overflow:hidden;background:#14161b;color:#e6e9ef;max-width:100%;min-width:0}
.mx-ch{display:flex;align-items:center;justify-content:space-between;padding:5px 8px 5px 12px;background:#23262e;color:#aab1c0;font-size:12px;letter-spacing:.04em}
.mx-ch button{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:8px;padding:5px 10px;background:#363a45;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.mx-ch button:active{background:#4a4f5d}
.mx-code pre{margin:0;padding:10px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:transparent;max-width:100%}
.mx-code code{display:block;white-space:pre;color:#e6e9ef;background:transparent;font-family:ShareTechMono,ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;tab-size:2}
.mx-code i{font-style:normal}.mx-code .c{color:#7d8799}.mx-code .s{color:#9fe38a}.mx-code .n{color:#f6b26b}.mx-code .k{color:#ff7ab2}.mx-code .f{color:#6cc4ff}.mx-code .o{color:#ffd866}
.mx-tw{overflow-x:auto;max-width:100%;margin:8px 0}.mx-tw table{border-collapse:collapse;font-size:13.5px}
.mx-tw th,.mx-tw td{border:1.5px solid var(--bd,#111);padding:4px 8px;text-align:left}.mx-tw th{background:rgba(127,127,127,.18)}

/* ---------- sambutan: logo + salam di tengah, daftar saran di bawah ---------- */
.mx-empty{min-height:100%;display:flex;flex-direction:column}
.mx-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:14px 0 12px;min-height:168px}
.mx-hero>:first-child{margin-top:auto}.mx-hero>:last-child{margin-bottom:auto}
.mx-big{flex:none;width:min(26vw,100px);height:min(26vw,100px);animation:mxAvIn .7s cubic-bezier(.3,1.3,.5,1) .1s both,mxFloat 3.6s ease-in-out .9s infinite}
.mx-big svg{width:100%;height:100%;display:block;animation:mxSpin 36s linear infinite}
.mx-hero h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.01em;color:var(--ink,#111);text-align:center;animation:mxUp .5s cubic-bezier(.2,.9,.3,1) .3s both}
.mx-sg{display:flex;flex-direction:column;gap:10px;padding:4px 4px 8px}
.mx-chip{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;border-radius:14px;border:var(--bw,3px) solid var(--bd,#111);background:var(--card,#fff);color:var(--ink,#111);
  font:inherit;font-size:14.5px;line-height:1.3;box-shadow:3px 3px 0 var(--bd,#111);animation:mxUp .5s cubic-bezier(.2,.9,.3,1) both;transition:translate .1s,box-shadow .1s}
.mx-chip:nth-child(1){animation-delay:.42s}.mx-chip:nth-child(2){animation-delay:.49s}.mx-chip:nth-child(3){animation-delay:.56s}.mx-chip:nth-child(4){animation-delay:.63s}
.mx-chip:nth-child(5){animation-delay:.70s}.mx-chip:nth-child(6){animation-delay:.77s}.mx-chip:nth-child(7){animation-delay:.84s}
.mx-chip svg{flex:none;color:var(--ink,#111)}
.mx-chip:active{translate:3px 3px;box-shadow:0 0 0 var(--bd,#111)}

/* tombol ke bawah */
.mx-jump{position:absolute;right:14px;bottom:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:var(--card,#fff);color:var(--ink,#111);border:2px solid var(--bd,#111);box-shadow:2px 2px 0 var(--bd,#111);
  opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .18s,transform .22s cubic-bezier(.3,1.4,.5,1)}
.mx-jump.on{opacity:1;transform:none;pointer-events:auto}

/* ---------- kolom ketik (rupa disamakan lewat composer.css) ---------- */
.mx-bar{flex:none;display:flex;align-items:flex-end;gap:8px;animation:mxBarIn .42s cubic-bezier(.2,.9,.3,1) .08s both}
.mx-field{flex:1;min-width:0;display:flex;align-items:flex-end;padding:0 4px 0 4px}
.mx-fi{flex:none;display:grid;place-items:center;width:40px;height:46px;border:0;background:transparent;color:var(--ink,#111);padding:0;opacity:.75}
.mx-fi:active{opacity:1;transform:scale(.9)}
html body .mx-field textarea#mxT{box-sizing:border-box!important;flex:1;min-width:0;width:100%;max-height:120px;min-height:24px!important;resize:none;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--ink,#111)!important;font:inherit;font-size:16px;line-height:22px;padding:12px 2px!important;margin:0!important;display:block;overflow-y:auto}
.mx-act{flex:none;position:relative;display:grid;place-items:center;padding:0;transition:transform .12s,background .15s}
.mx-act:active{transform:scale(.92)}
.mx-act svg{grid-area:1/1;width:24px;height:24px;transition:opacity .15s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.mx-act .i-send{opacity:0;transform:rotate(-50deg) scale(.5);margin-left:2px}
.mx-act.send .i-send{opacity:1;transform:none}
.mx-act.send .i-mic{opacity:0;transform:rotate(50deg) scale(.5)}
.mx-act.send{animation:mxSendPop .34s cubic-bezier(.3,1.5,.5,1)}
.mx-act.rec{background:#ff4d4d!important;color:#fff!important;animation:mxRec 1.1s ease-in-out infinite}
.mx-act:disabled{opacity:.55}

@keyframes mxHdIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes mxBarIn{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes mxAvIn{0%{transform:scale(.3) rotate(-120deg);opacity:0}70%{transform:scale(1.12) rotate(12deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes mxUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mxFade{from{opacity:0}to{opacity:1}}
@keyframes mxFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes mxSpin{to{transform:rotate(360deg)}}
@keyframes mxInR{0%{opacity:0;transform:translate(18px,12px) scale(.82)}100%{opacity:1;transform:none}}
@keyframes mxInL{0%{opacity:0;transform:translate(-18px,12px) scale(.82)}100%{opacity:1;transform:none}}
@keyframes mxDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes mxDayIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes mxSendPop{0%{transform:scale(.8)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes mxRec{0%,100%{box-shadow:2px 2px 0 var(--bd,#111),0 0 0 0 rgba(255,77,77,.5)}50%{box-shadow:2px 2px 0 var(--bd,#111),0 0 0 9px rgba(255,77,77,0)}}
@keyframes mxShake{0%,100%{transform:none}20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}

/* FAB neobrutalism: kotak solid, garis tebal, bayangan keras tanpa blur atau glow. Berlaku untuk FAB Mulai baru, FAB Meta AI, dan FAB Status. */
html:root:root:root body .tb-fab{
  border:var(--bw,3px) solid var(--bd,#111)!important;border-radius:18px!important;
  box-shadow:4px 4px 0 var(--bd,#111)!important;filter:none!important;
  transition:translate .12s ease,box-shadow .12s ease,background .15s}
html:root:root:root body .tb-fab.mini{border-radius:15px!important;box-shadow:3px 3px 0 var(--bd,#111)!important}
html:root:root:root body .tb-fab:active{translate:4px 4px!important;transform:none!important;box-shadow:0 0 0 var(--bd,#111)!important}
html:root:root:root body .tb-fab.mini:active{translate:3px 3px!important;box-shadow:0 0 0 var(--bd,#111)!important}
html:root:root:root body .tb-fab.open{background:var(--acc,#ffd83d)!important}
html:root:root:root body .tb-fab.open svg{color:var(--bd,#111);stroke:var(--bd,#111)}
html:root:root:root body .tb-fab.mx-fab{background:var(--card,#fff)!important;display:grid;place-items:center}
html:root:root:root body .tb-fab.mx-fab svg{width:30px;height:30px}

/* animasi FAB (sekali saja) */
@keyframes mxFabIn{0%{opacity:0;transform:translateY(22px) scale(.4) rotate(-30deg)}55%{opacity:1;transform:translateY(-5px) scale(1.1) rotate(8deg)}100%{opacity:1;transform:none}}
@keyframes mxTap{0%{transform:scale(1)}35%{transform:scale(.84) rotate(-10deg)}100%{transform:scale(1)}}
.tb-fab.mx-fab.mxpop{animation:mxFabIn .5s cubic-bezier(.3,1.4,.5,1) backwards}
.tb-fab.mx-fab.mxtap{animation:mxTap .3s ease-out}
html:root:root:root body .tb-fab:not(.mini).pop{animation:tbPop .38s cubic-bezier(.3,1.5,.5,1)}

/* baris Meta AI di daftar chat: diam di tempat, tanpa animasi masuk (daftar digambar ulang tiap beberapa detik) */
html body .tb-row .gl-av.mx-lav{display:grid;place-items:center;background:#0f1419!important;background-image:none!important;padding:0}
html body .tb-row .gl-av.mx-lav svg{width:78%;height:78%;display:block;animation:none!important;transform:none!important}
.tb-row.tb-airow,.tb-row.tb-airow *{animation:none!important}
.tb-row.tb-airow .tb-nm{display:inline-flex;align-items:center;gap:5px}
.tb-row.tb-airow .mx-typ{color:#25d366;font-weight:700}

/* hormati pengaturan "tanpa animasi" dan preferensi gerak sistem */
body.noanim :is(.mx-hd,.mx-hav,.mx-bar,.mx-big,.mx-big svg,.mx-hero h2,.mx-chip,.mx-day span,.mx-bub,.mx-tx>*,.mx-dots i,.mx-act,.mx-st),body.noanim .tb-fab.mx-fab{animation:none!important}
@media (prefers-reduced-motion:reduce){:is(.mx-hd,.mx-hav,.mx-bar,.mx-big,.mx-big svg,.mx-hero h2,.mx-chip,.mx-day span,.mx-bub,.mx-tx>*,.mx-dots i,.mx-act,.mx-st),.tb-fab.mx-fab{animation:none!important}}