/* ===== smooth10x: SATU-SATUNYA pemilik animasi halaman, spinner loading, wallpaper-zoom keyboard, dan bar balasan =====
   Dimuat paling akhir. Semua aturan lama yang bentrok (veil buram 0,95 dtk, zoom 0,5 dtk, counter-zoom #tbm)
   dimatikan di sini. Hanya transform/opacity/scale yang dianimasikan (GPU), durasi singkat. */

/* ---------- 1) Halaman (layer .gp): geser masuk dari kanan, keluar ke kanan. Bukan sekadar opacity. ---------- */
html:root:root:root:root:root body .gp{
  clip-path:none!important;
  opacity:1!important;
  transform:translate3d(100%,0,0)!important;
  transition:transform .3s cubic-bezier(.22,.82,.25,1)!important;
  will-change:transform;
}
html:root:root:root:root:root body .gp.in{transform:translate3d(0,0,0)!important;pointer-events:auto!important}
html:root:root:root:root:root body .gp.in.done{transform:none!important;will-change:auto}
html:root:root:root:root:root body .gp.out{
  transform:translate3d(100%,0,0)!important;
  transition:transform .24s cubic-bezier(.4,0,.9,.5)!important;
  pointer-events:none!important;
}
/* halaman di bawah tidak ikut di-zoom lagi (mahal & bikin patah-patah) */
html:root:root body #tbm,html:root.gp-open:root body #tbm{transform:none!important;transition:none!important}
html:root:root:root:root:root body.noanim .gp,html:root:root:root:root:root body.noanim .gp.out{transition:none!important}
@media(prefers-reduced-motion:reduce){
  html:root:root:root:root:root body .gp,html:root:root:root:root:root body .gp.out{transition-duration:.01ms!important}
}

/* ---------- 2) Spinner loading: latar TRANSPARAN, singkat, tidak menghalangi sentuhan ---------- */
html body .gp.in::after,
html body .gp.in:not(.chat):not(.mx)::after,
html body .gp.in.chat::after,
html body .gp.in.mx::after{display:none!important;content:none!important;background:transparent!important;animation:none!important}
@keyframes tbSpinLife{0%,55%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
html body .gp.in:not(.chat):not(.mx)::before,
html body .gp.in.chat::before,
html body .gp.in.mx::before{
  background:transparent!important;pointer-events:none!important;
  animation:tbPageSpin .7s linear infinite,tbSpinLife .5s ease-out both!important;
}
/* spinner antar-tab: transparan, tidak memblokir klik */
html body #tbm>.tb-main>.tb-tab-progress,
html body #tbm .tb-main>.tb-tab-progress,
html body #tbm .tb-tab-progress{
  background:transparent!important;background-color:transparent!important;
  pointer-events:none!important;z-index:5!important;
}
html body #tbm>.tb-main>.tb-tab-progress.show,
html body #tbm .tb-main>.tb-tab-progress.show,
html body #tbm .tb-tab-progress.show{pointer-events:none!important;transition:opacity .12s ease!important}
html body #tbm .tb-tab-progress{transition:opacity .15s ease,visibility 0s linear .15s!important}

/* ---------- 3) Wallpaper chat: ZOOM halus saat keyboard naik, bukan bergeser ---------- */
html:root:root:root:root:root body .gp.chat>.ch-wp{
  top:0!important;bottom:auto!important;left:0;right:0;width:100%;
  height:var(--wp-h,100%)!important;
  transform-origin:50% 38%;
  scale:1;
  transition:scale .32s cubic-bezier(.22,.82,.25,1);
  will-change:scale;
  transform:none!important;
}
html.kb:root:root:root:root:root body .gp.chat>.ch-wp{scale:1.12}
html:root:root:root:root:root body.noanim .gp.chat>.ch-wp{transition:none}
@media(prefers-reduced-motion:reduce){html:root:root:root:root:root body .gp.chat>.ch-wp{transition:none}}

/* ---------- 4) Bar balasan: satu rupa dengan kolom ketik (kartu neo, sejajar, animasi buka/tutup berulang) ---------- */
html:root:root:root:root:root body .gp.chat .ch-rp,
html:root:root:root:root:root body .gp.chat .ch-rp.pro-h{
  display:grid!important;grid-template-rows:0fr;flex:none;
  margin:0 10px 0 14px!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;animation:none!important;
  opacity:0;pointer-events:none;
  transition:grid-template-rows .26s cubic-bezier(.22,.82,.25,1),opacity .2s ease;
}
html:root:root:root:root:root body .gp.chat .ch-rp.show{grid-template-rows:1fr;opacity:1;pointer-events:auto}
html:root:root:root:root:root body .gp.chat .ch-rp>.ch-rpo{min-height:0;overflow:hidden;padding-right:4px}
html:root:root:root:root:root body .gp.chat .ch-rp .ch-rpc{
  display:flex;align-items:center;gap:8px;box-sizing:border-box;
  margin:8px 0 4px 0;padding:6px 6px 6px 8px;min-height:52px;
  background:var(--card,#fff);color:var(--ink,#111);
  border:3px solid var(--bd,#111);border-radius:20px;box-shadow:4px 4px 0 var(--bd,#111);
}
html:root:root:root:root:root body .gp.chat .ch-rp .pro-q{
  flex:1;min-width:0;margin:0;min-height:40px;padding:4px 10px;
  background:color-mix(in srgb,var(--acc,#ffd83d) 30%,transparent);
  border-left:4px solid var(--bd,#111);border-radius:12px;
}
html:root:root:root:root:root body .gp.chat .ch-rp .pro-q b,
html:root:root:root:root:root body .gp.chat .ch-rp .pro-q.rp b{color:var(--ink,#111);font-weight:700}
html:root:root:root:root:root body .gp.chat .ch-rp .pro-q span{color:var(--ink,#111);opacity:.75}
html:root:root:root:root:root body .gp.chat .ch-rp .ch-rpx{
  flex:0 0 38px;width:38px;height:38px;min-width:38px;padding:0;margin:0;border-radius:14px;
  display:grid;place-items:center;line-height:0;
  background:transparent;border:0;color:var(--ic,#ff4757);
  transition:transform .12s ease-out;
}
html:root:root:root:root:root body .gp.chat .ch-rp .ch-rpx:active{transform:scale(.9)}
html:root:root:root:root:root body .gp.chat .ch-rp .ch-rpx svg{width:22px;height:22px;stroke:currentColor}
/* kolom ketik ikut sejajar; jarak atas lebih rapat bila ada bar balasan */
html:root:root:root:root:root body .gp.chat .ch-rp.show+.ch-in{margin-top:2px!important;border-top:3px solid var(--bd,#111)!important}
body.noanim .gp.chat .ch-rp{transition:none!important}
@media(prefers-reduced-motion:reduce){html:root:root:root:root:root body .gp.chat .ch-rp{transition:none!important}}

/* ---------- 5) Header chat: area ketuk jelas (profil / status) ---------- */
html body .gp.chat .gp-t{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}
html body .gp.chat .ch-who{min-height:44px;position:relative;z-index:4}
html body .gp.chat .ch-av.hs{border-radius:50%;box-shadow:0 0 0 2.5px var(--acc,#ffd83d),0 0 0 4.5px var(--bd,#111)}
html body .tb-avw.hs{cursor:pointer}

/* ---------- 6) Kutipan balasan di dalam gelembung: ikut gaya neo (bukan ungu) ---------- */
html.chat-neo body .gp.chat .ch-m .pro-q,html.chat-neo body .gp.chat .ch-m .pro-q.rp{
  background:rgba(17,17,17,.09)!important;border-left:4px solid #111!important;border-radius:10px;
}
html.chat-neo body .gp.chat .ch-m .pro-q b,html.chat-neo body .gp.chat .ch-m .pro-q.rp b{color:#111!important}