/* DISPETCH V18 — perbaikan scroll + animasi overscroll (menggantikan isi v17).
   AKAR MASALAH (dibuktikan lewat tes browser):
   1) fixperf8q.css punya  html body #tbm{display:flex!important}  (spesifisitas ID) sehingga  .tbm.hide{display:none!important}
      kalah. Akibatnya TB.hide() (dipanggil saat buka Pengaturan > Terminal) TIDAK menyembunyikan Messenger: layar Messenger tetap
      menutupi Terminal. Dua layout menumpuk, sentuhan jatuh ke scroller Messenger (.tb-pg), bukan ke #log.
   2) v17 lama kalah spesifisitas dari aturan  overscroll-behavior-y:auto!important  di chatfix9x.css / layout-v13-edge-space.css,
      jadi .ch-list tetap "auto" (tanpa efek ujung-scroll), sedangkan #log (contain) tampil efeknya.
   Perbaikan di bawah hanya menambah spesifisitas; tidak mengubah layout. */

/* 1) Messenger yang di-hide benar-benar hilang -> Terminal / Alur Bot / dst tampil sendiri, hanya satu scroller aktif */
html:root:root:root body #tbm.hide,
html:root:root:root body #tbm.tbm.hide{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* 2) Semua daftar yang bisa di-scroll memakai perilaku yang sama dengan #log: contain (efek ujung-scroll tampil di elemen itu) */
html:root:root:root:root:root:root:root:root:root:root:root:root body :is(.ch-list,.tb-gl,.tb-cl,.mx-scroll,.gp-body,.tb-pg,.tb-scr,.tgc,.axm,.cxm,.ui-list,.act-body,.tb-sheet,.cs-sheet,.mv-sheet,.cs-list,.v14-list,.v16-rxl),
html:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat .ch-list,
html:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat:not(.tb-chc) .ch-list{
  overscroll-behavior-y:contain!important;
}

/* ===== V18: kartu Pengaturan neo-brutalism, tanpa garis pemisah di Profil ===== */
html:root body .tb-pi:not(.plain){
  border:3px solid var(--bd,#111)!important;
  border-radius:18px!important;
  box-shadow:4px 4px 0 var(--bd,#111)!important;
  margin-bottom:16px!important;
  background-color:var(--card,#fff);
}
html:root body .tb-pi:not(.plain):active{
  transform:none!important;translate:2px 2px!important;
  box-shadow:2px 2px 0 var(--bd,#111)!important;
}
html:root body .tb-pi.plain{border:3px solid var(--bd,#111)!important;box-shadow:none!important}
/* garis di bawah kartu profil (pemisah header profil dengan daftar pengaturan) dihapus */
html:root body .tb-pcard,html:root body #tbP-prof .tb-pcard{border-bottom:0!important;border-top:0!important;box-shadow:none!important}
html:root body #tbP-prof .tb-sec{border:0!important}

/* ===== V18: layar Status (buat/lihat) selalu opak & gelap sejak frame pertama, loader tab Messenger tidak tembus ===== */
html:root body .gp.tb-cmx,html:root body .gp.tb-cmx>.gp-body,html:root body .gp.tb-sv,html:root body .gp.tb-sv>.gp-body{background:#111!important}
html.gp-open:root body #tbm .tb-tab-progress,html.gp-open:root body #tbm>.tb-main>.tb-tab-progress{opacity:0!important;visibility:hidden!important;transition:none!important}
/* spinner di layar gelap otomatis terang; di layar terang otomatis gelap */
html:root body .gp.tb-cmx .tb-tab-spinner,html:root body .gp.tb-sv .tb-tab-spinner{border-color:rgba(255,255,255,.25)!important;border-top-color:#fff!important;border-right-color:#fff!important}

/* ===== V18: margin kiri-kanan halaman chat dikurangi ===== */
html:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat .ch-list,
html:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat:not(.tb-chc) .ch-list,
html:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat.tb-chc .ch-list.tb-cl{
  padding-left:7px!important;padding-right:7px!important;
}
html:root:root body #tbP-chat .tb-scr{padding-left:9px!important;padding-right:9px!important}
html:root:root body #tbP-chat #tbStories,html:root:root body #tbP-chat #tbChips{margin-left:-9px!important;margin-right:-9px!important;padding-left:9px!important;padding-right:9px!important}

/* ===== V18: ring avatar tidak terpotong (daftar story boleh meluap vertikal, ring tidak keluar dari kotaknya) ===== */
html:root body #tbStories{padding-top:8px!important;padding-bottom:8px!important}
html:root body .gl-av{box-sizing:border-box!important;flex:none;aspect-ratio:1/1;overflow:hidden}
html:root body .tb-sring{box-sizing:border-box!important;flex:none;max-width:100%;overflow:visible}

/* ===== V18: animasi buka Meta AI (hero, kartu saran, pesan, kolom ketik) ===== */
@keyframes mxV18Pop{0%{opacity:0;transform:scale(.55) rotate(-14deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes mxV18Card{0%{opacity:0;transform:translateY(26px) scale(.94)}65%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes mxV18Row{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@keyframes mxV18Bar{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:none}}
@keyframes mxV18Hero{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
html:root:root:root body .gp.mx .mx-big{animation:mxV18Pop .62s cubic-bezier(.2,.9,.3,1.2) .08s both!important}
html:root:root:root body .gp.mx .mx-hero h2{animation:mxV18Hero .5s ease-out .28s both!important}
html:root:root:root body .gp.mx .mx-chip{animation:mxV18Card .55s cubic-bezier(.2,.9,.3,1) both!important}
html:root:root:root body .gp.mx .mx-chip:nth-child(1){animation-delay:.34s!important}
html:root:root:root body .gp.mx .mx-chip:nth-child(2){animation-delay:.44s!important}
html:root:root:root body .gp.mx .mx-chip:nth-child(3){animation-delay:.54s!important}
html:root:root:root body .gp.mx .mx-chip:nth-child(4){animation-delay:.64s!important}
html:root:root:root body .gp.mx .mx-chip:nth-child(n+5){animation-delay:.74s!important}
html:root:root:root body .gp.mx .mx-bar{animation:mxV18Bar .45s cubic-bezier(.2,.9,.3,1) .12s both!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open .mx-row,html:root:root:root body .gp.mx .mx-scroll.mx-open .mx-day{animation:mxV18Row .42s cubic-bezier(.2,.9,.3,1) both!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open>:nth-last-child(1){animation-delay:.36s!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open>:nth-last-child(2){animation-delay:.28s!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open>:nth-last-child(3){animation-delay:.2s!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open>:nth-last-child(4){animation-delay:.12s!important}
html:root:root:root body .gp.mx .mx-scroll.mx-open>:nth-last-child(n+5){animation-delay:.04s!important}
@media(prefers-reduced-motion:reduce){html:root:root:root body .gp.mx :is(.mx-big,.mx-hero h2,.mx-chip,.mx-bar,.mx-row,.mx-day){animation:none!important}}
html:root:root:root body.noanim .gp.mx :is(.mx-big,.mx-hero h2,.mx-chip,.mx-bar,.mx-row,.mx-day){animation:none!important}

/* V19: layer status (composer/viewer) langsung gelap & solid — tanpa kilatan krem/putih saat buka */
html:root:root:root body .gp.tb-cmx,html:root:root:root body .gp.tb-sv{background:#111!important;clip-path:none!important;transition:opacity .18s ease!important}
html:root:root:root body .gp.tb-cmx:not(.in),html:root:root:root body .gp.tb-sv:not(.in){opacity:0!important}
html:root:root:root body .gp.tb-cmx .tb-sload,html:root:root:root body .gp.tb-sv .tb-sload{background:#111!important;color:#fff!important}
/* V19: veil loading tab tidak menutupi avatar/ring */
html:root:root:root body #tbm .tb-tab-progress{background:transparent!important;pointer-events:none!important}
html:root:root:root body #tbStories,html:root:root:root body #tbSg{padding-right:14px!important;scroll-padding-right:14px!important}

/* V23: akar masalah putih/krem di pembuat status = veil loader ::after milik .gp (chatfix9x.css) — matikan di composer & viewer status */
html:root:root:root:root:root:root body .gp.tb-cmx::before,html:root:root:root:root:root:root body .gp.tb-cmx::after,
html:root:root:root:root:root:root body .gp.tb-sv::before,html:root:root:root:root:root:root body .gp.tb-sv::after,
html:root:root:root:root:root:root body .gp.tb-cmx.in::after,html:root:root:root:root:root:root body .gp.tb-sv.in::after{content:none!important;display:none!important;background:none!important;visibility:hidden!important;animation:none!important}

/* V23: tombol Verifikasi OTP — saat memeriksa: tombol abu-abu + progress LINGKARAN (tanpa teks / ikon), seperti layar Nomor Telepon */
html:root:root:root:root body #btnVerify{position:relative;overflow:hidden;transition:background-color .25s ease!important}
html:root:root:root:root body #btnVerify.vp-load,html:root:root:root:root body #btnVerify.vp-load:disabled{font-size:0!important;line-height:0!important;color:transparent!important;opacity:1!important;text-shadow:none!important;background:#e3e3e3!important;border-color:#e3e3e3!important;box-shadow:none!important;pointer-events:none}
html:root:root:root:root body #btnVerify.vp-load::before{content:"";display:block!important;position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;box-sizing:border-box;border-radius:50%;border:3px solid rgba(255,255,255,.9);border-top-color:#00a884;background:none!important;transform:none;animation:v23Spin .8s linear infinite!important}
html:root:root:root:root body #btnVerify.vp-load::after{content:none!important;display:none!important}
html:root:root:root:root body #btnVerify.vp-load.vp-ok,html:root:root:root:root body #btnVerify.vp-load.vp-ok:disabled{background:#00a884!important;border-color:#00a884!important}
html:root:root:root:root body #btnVerify.vp-load.vp-ok::before{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes v23Spin{to{transform:rotate(360deg)}}

/* ===== V23: ring avatar digambar DI DALAM kotak avatar (tidak meluber ke header / baris / layout lain) ===== */
html:root:root:root[data-tbr] .gl-av[data-me]{outline:0!important;outline-offset:0!important;box-shadow:none!important;border:2px solid #111!important;box-sizing:border-box!important;overflow:hidden!important;max-width:100%!important}
html:root:root:root[data-tbr=comic] .gl-av[data-me]{box-shadow:inset 0 0 0 2px #ffd83d!important}
html:root:root:root[data-tbr=duo] .gl-av[data-me]{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #ff4458!important}
html:root:root:root[data-tbr=half] .gl-av[data-me]{border:2.5px dotted #ffd83d!important}
html:root:root:root[data-tbr=speed] .gl-av[data-me]{border:2.5px dashed #fff!important;box-shadow:inset 0 0 0 2px #1a1a1a!important}
html:root:root:root[data-tbr=pow] .gl-av[data-me]{border:3px dashed #ffd83d!important;box-shadow:inset 0 0 0 2px #111!important}
html:root:root:root[data-tbr] .tb-sring .gl-av[data-me],html:root:root:root[data-tbr] .tb-story .gl-av[data-me]{box-shadow:none!important;border:0!important}
/* di header chat: ukuran avatar tetap kecil & tidak mendorong header */
html:root:root:root body .gp.chat .gp-h .ch-av,html:root:root:root body .gp.chat .gp-h .ch-av .gl-av{width:40px!important;height:40px!important;min-width:40px!important;flex:none!important}
html:root:root:root body .gp.chat .gp-h .ch-av{overflow:visible!important;position:relative}
/* ===== V23: baris Story rapi ===== */
html:root:root:root body .tb-stories{display:flex;gap:14px;padding:10px 14px 6px!important;align-items:flex-start;overflow-x:auto;scroll-padding-inline:14px}
html:root:root:root body .tb-story{width:68px!important;gap:6px!important;flex:none}
html:root:root:root body .tb-story small{width:68px!important;max-width:68px!important;text-align:center;font-size:11.5px!important;font-weight:700;line-height:1.2}
html:root:root:root body .tb-story .tb-sring{width:62px!important;height:62px!important;padding:4px!important;border-width:2.5px!important;outline:0!important;box-sizing:border-box!important;margin:0 auto}
html:root:root:root body .tb-story .tb-sring.none{border-style:dashed!important;border-color:var(--bd,#111)!important;opacity:1}
html:root:root:root body .tb-story .tb-sring.sgm{border:0!important;padding:5px!important}
html:root:root:root body .tb-story .tb-sring .gl-av{width:100%!important;height:100%!important;border:0!important;box-shadow:none!important;outline:0!important}
html:root:root:root body .tb-story .tb-sp{position:absolute!important;right:-3px!important;bottom:-3px!important;left:auto!important;top:auto!important;width:22px!important;height:22px!important;display:grid;place-items:center;border-radius:50%;border:2px solid var(--paper,#fff1d6)!important;box-sizing:border-box}
html:root:root:root body .tb-story .tb-sp svg{width:12px!important;height:12px!important}

/* ===== V23: penampil status orang — gaya kaca transparan (header/bawah bergradien, kolom balas gelap transparan) ===== */
html:root:root:root body .tb-sv .tb-vw{background:transparent}
html:root:root:root body .tb-sv .tb-vh{background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.22) 62%,transparent)!important;padding-bottom:18px!important}
html:root:root:root body .tb-sv .tb-vh .gl-av{border:2px solid rgba(255,255,255,.85)!important;box-shadow:none!important;width:38px!important;height:38px!important;outline:0!important}
html:root:root:root body .tb-sv .tb-vw::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent);pointer-events:none;z-index:1}
html:root:root:root body .tb-sv .tb-rep,html:root:root:root body .tb-sv .tb-act{position:absolute;z-index:2}
html:root:root:root:root:root:root body .tb-sv .tb-rep input{background:rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.28)!important;color:#fff!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep input::placeholder{color:rgba(255,255,255,.78)!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep input:focus{background:rgba(0,0,0,.46)!important;border-color:rgba(255,255,255,.55)!important}
html:root:root:root body .tb-sv .tb-rb2{background:rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:root:root:root body .tb-sv .tb-rb2.mic{background:rgba(255,255,255,.22)!important;border:1px solid rgba(255,255,255,.4)!important}
html:root:root:root body .tb-sv .tb-rnd{background:rgba(0,0,0,.34)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* animasi sentuh: menciut halus + sedikit terang (bukan geser neobrutalism) */
html:root:root:root body .tb-sv :is(.tb-rb2,.tb-rnd,.tb-vb2){transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .16s ease,opacity .16s ease!important;transform:none;translate:none!important;-webkit-tap-highlight-color:transparent}
html:root:root:root body .tb-sv :is(.tb-rb2,.tb-rnd,.tb-vb2):active{transform:scale(.88)!important;translate:none!important;box-shadow:none!important;background-color:rgba(255,255,255,.28)!important}
html:root:root:root body .tb-sv .tb-vb2:active{background-color:rgba(255,255,255,.18)!important}
html:root:root:root body .tb-sv .tb-rnd.on:active,html:root:root:root body .tb-sv .tb-rnd:active svg{transform:scale(1.12)}

/* V23: kartu status teks memakai warna latar status itu sendiri (sebelumnya ditimpa putih) */
html:root:root:root:root body .tb-scard[style*="--sc-bg"]{background:var(--sc-bg)!important;background-color:var(--sc-bg)!important}

/* ===== V23: perekam suara di balasan status — satu baris rapi: [hapus] [gelombang] [waktu] [kirim] ===== */
html:root:root:root:root:root:root body .tb-sv .tb-rep.recing>*:not(.pro-rec){visibility:hidden!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rec{position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;padding:0 2px!important;margin:0!important;z-index:6;background:transparent!important;color:#fff!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rec>*{position:static!important;margin:0!important;transform:none}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rc,html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rs{flex:none!important;width:46px!important;height:46px!important;min-width:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;padding:0!important;line-height:0!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(0,0,0,.34)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rc{color:#ff7a8a!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rs{background:#fff!important;border-color:#fff!important;color:#111!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rc svg,html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-rs svg{width:22px!important;height:22px!important;display:block!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-wv{flex:1 1 auto!important;min-width:0!important;height:36px!important;display:flex!important;align-items:center;gap:3px!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .pro-tm{flex:none!important;color:#fff!important;font:700 14px/1 var(--mf,'Share Tech Mono',monospace)!important;min-width:34px;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.55)!important}
/* ikon kirim balasan teks: bulat putih, ikon di tengah */
html:root:root:root:root:root:root body .tb-sv .tb-rep .tb-rb2.snd{background:#fff!important;color:#111!important;border-color:#fff!important}
html:root:root:root:root:root:root body .tb-sv .tb-rep .tb-rb2 svg{width:22px!important;height:22px!important;display:block!important;margin:0 auto}

/* ===== V23: kartu balasan + kolom ketik = SATU permukaan menyambung (tanpa celah / terpotong, lebar sama) ===== */
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat .gp-body>.ch-rp:not(.pro-h){margin:6px 8px 0 8px!important;box-sizing:border-box!important;width:auto!important;border:3px solid #111!important;border-bottom:0!important;border-radius:20px 20px 0 0!important;box-shadow:4px 0 0 #111!important;background:#fffdf8!important;padding:8px 10px 6px!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat .gp-body>.ch-rp:not(.pro-h)~.ch-in{margin-top:0!important;margin-left:8px!important;margin-right:8px!important;border-top:0!important;border-radius:0 0 20px 20px!important;box-shadow:4px 4px 0 #111,4px 0 0 #111!important}
html:root:root:root:root:root:root:root:root:root:root:root:root:root:root body .gp.chat .gp-body>.ch-rp:not(.pro-h)~.ch-in::before{content:none!important}