/* ==========================================================================
   Perbaikan: lag/delay, animasi halaman, kolom ketik (chat + Meta AI), tarik-refresh, kartu kontak.
   Dimuat PALING AKHIR. Hanya memakai transform/opacity (jalan di GPU) supaya enteng di WebView.
   ========================================================================== */

/* ---------- 1. buka/tutup halaman: geser singkat, bukan lingkaran clip-path 0,55 detik ---------- */
html body .gp{clip-path:none!important;transform:translate3d(26px,0,0);opacity:0;will-change:transform,opacity;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .14s linear!important}
html body .gp.in{transform:none;opacity:1}
html body .gp.in.done{will-change:auto}
html body .gp.out{transform:translate3d(26px,0,0);opacity:0;transition-duration:.14s,.12s!important}
body.noanim .gp{transition:none!important}

/* ---------- 2. Meta AI: pertahankan animasi, pendekkan delay yang terasa lambat ---------- */
html body :is(.mx-hd,.mx-hav,.mx-bar,.mx-hero h2,.mx-chip){animation-duration:.28s!important}
html body .mx-big{animation-duration:.28s,3.6s!important}
html body .mx-hav{animation-delay:0ms!important}
html body .mx-bar{animation-delay:0ms!important}
html body .mx-hero h2{animation-delay:.04s!important}
html body .mx-chip:nth-child(n){animation-delay:0ms!important}
html body .mx-big{animation-delay:0ms,.35s!important}
/* Rotasi logo tetap ada; gunakan transform agar animasi tidak memicu layout. */
html body .mx-big svg{animation-duration:36s!important}

/* ---------- 3. baris/kartu interaktif: transisi singkat, bukan mematikan animasi ---------- */
html body :is(.tb-row,.tb-arv .tb-row,.tb-pi,.tb-scard,.tb-crow){
  transition:transform .14s cubic-bezier(.2,.8,.2,1),translate .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s ease,background-color .14s ease!important;
  -webkit-tap-highlight-color:transparent
}
html body :is(.tb-row,.tb-arv .tb-row,.tb-pi,.tb-scard):active{transform:scale(.985)!important;translate:0 1px!important}
html body :is(.tb-row,.tb-arv .tb-row,.tb-pi):active{box-shadow:2px 2px 0 var(--bd,#111)!important}
html body :is(.tb-crow):active{background-color:rgba(127,127,127,.1)!important}

/* ---------- 4. tarik-untuk-refresh: lingkaran polos (bukan neobrutalism) ---------- */
html:root body #ptr{width:40px;height:40px;margin-left:-20px;background:var(--card,#fff)!important;color:var(--ink,#111)!important;
  border:0!important;box-shadow:0 4px 14px rgba(0,0,0,.2)!important;will-change:transform,opacity}
html body #ptr svg{width:20px;height:20px;transition:none}
html body #ptr.snap{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s!important}

/* ---------- 5. ringankan latar saat Messenger aktif ---------- */
html.tb-on body{background:var(--paper,#fff1d6)!important;background-attachment:scroll!important}
html.tb-on body::before{display:none!important}

/* ---------- 6. KOLOM KETIK: satu gaya untuk chat pengguna DAN Meta AI ---------- */
@keyframes fxAct{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

html:root:root:root body :is(.ch-in,.mx-bar){
  display:flex;align-items:flex-end;gap:8px;position:relative;z-index:2;will-change:transform;
  padding:8px 10px calc(max(var(--sab,0px),env(safe-area-inset-bottom,0px)) + 8px)!important;
  background:transparent!important;border:0!important;box-shadow:none!important;animation:none!important}

/* tombol bulat di sisi (lampiran, stiker / emoji) */
html:root:root:root body :is(.ch-in .ch-at,.ch-in .ch-st,.mx-bar .mx-side){
  flex:none;width:44px;height:44px;min-width:44px;margin:0;padding:0;border-radius:50%!important;
  display:grid;place-items:center;line-height:0;opacity:1;
  border:2px solid var(--bd,#111)!important;background:var(--card,#fff)!important;color:var(--ink,#111)!important;
  box-shadow:none!important;transition:transform .1s ease-out}
html:root:root:root body :is(.ch-in .ch-at,.ch-in .ch-st,.mx-bar .mx-side) svg{width:22px;height:22px;stroke:currentColor;fill:none;transform:none}
html:root:root:root body :is(.ch-in .ch-at,.ch-in .ch-st,.mx-bar .mx-side):active{transform:scale(.92)!important;translate:none!important}

/* kolom teks: bentuk pil, isi putih/kartu, garis tipis */
html:root:root:root:root body .gp.chat .ch-in textarea,
html:root:root:root:root body .gp.chat .ch-in textarea:focus{
  flex:1;min-width:0;box-sizing:border-box;min-height:44px;height:44px;max-height:124px;margin:0;resize:none;
  padding:10px 16px!important;font-size:16px;line-height:1.3;
  border:2px solid var(--bd,#111)!important;border-radius:22px!important;
  background:var(--card,#fff)!important;color:var(--ink,#111)!important;box-shadow:none!important;outline:0}
html:root:root:root:root body .gp.chat .ch-in textarea:focus{outline:2px solid var(--acc,#ffd83d);outline-offset:1px}

html:root:root:root body .mx-bar .mx-field{
  flex:1;min-width:0;display:flex;align-items:flex-end;padding:0 16px!important;min-height:44px;
  border:2px solid var(--bd,#111)!important;border-radius:22px!important;
  background:var(--card,#fff)!important;box-shadow:none!important}
html:root:root:root body .mx-bar .mx-field:focus-within{outline:2px solid var(--acc,#ffd83d);outline-offset:1px}
html:root:root:root body .mx-bar .mx-field textarea#mxT{padding:10px 0!important;line-height:20px;min-height:20px!important;color:var(--ink,#111)!important}

html:root:root:root body :is(.ch-in textarea,.mx-bar textarea)::placeholder{color:var(--ink,#111);opacity:.42}

/* tombol aksi bulat (kirim / suara) */
html:root:root:root body :is(.ch-in .ch-send,.ch-in .ch-mic,.mx-bar .mx-act){
  flex:none;width:44px;height:44px;min-width:44px;margin:0;padding:0;border-radius:50%!important;
  display:grid;place-items:center;line-height:0;
  border:2px solid var(--bd,#111)!important;background:var(--acc,#ffd83d)!important;color:#111!important;
  box-shadow:none!important;transition:transform .1s ease-out}
html:root:root:root body :is(.ch-in .ch-send,.ch-in .ch-mic,.mx-bar .mx-act) svg{width:22px;height:22px;stroke:#111;transform:none}
html:root:root:root body :is(.ch-in .ch-send,.ch-in .ch-mic,.mx-bar .mx-act):active{transform:scale(.92)!important;translate:none!important}
html:root:root:root body .mx-bar .mx-act.rec{background:#ff4d4d!important;color:#fff!important}
html:root:root:root body .ch-in .ch-send.off{opacity:1;background:var(--acc,#ffd83d)!important}

/* mic <-> kirim bertukar halus (bukan hilang-muncul kasar) */
html:root:root:root body .ch-in :is(.ch-send,.ch-mic).pro-h{
  display:grid!important;position:absolute;right:10px;bottom:calc(max(var(--sab,0px),env(safe-area-inset-bottom,0px)) + 8px);
  opacity:0;transform:scale(.55);pointer-events:none;visibility:hidden}
html:root:root:root body .ch-in :is(.ch-send,.ch-mic):not(.pro-h){animation:fxAct .16s ease-out}
html:root:root:root body .ch-in.recing :is(.ch-send,.ch-mic,.ch-at,.ch-st,textarea){visibility:hidden}

/* ---------- 7. gelembung yang sedang dikirim / gagal ---------- */
.gp.chat .ch-m.opt{opacity:.9}
.gp.chat .ch-m.opt small svg{width:11px;height:11px;margin-right:3px;vertical-align:-1px}
.gp.chat .ch-m.fail{outline:2px solid #e5304c;outline-offset:1px;cursor:pointer}
.gp.chat .ch-m.fail small{color:#e5304c!important}
.tb-gmsg.opt{opacity:.75}

/* ---------- 8. header chat: tombol telepon/video/menu tidak kepotong ---------- */
html body .gp.chat .gp-r{width:auto;min-width:44px;flex:none;display:flex;align-items:center}

/* ---------- 9. stabilitas motion: hormati preferensi pengguna, tanpa mematikan animasi normal ---------- */
@media (prefers-reduced-motion: reduce) {
  html body .gp,
  html body :is(.tb-row,.tb-arv .tb-row,.tb-pi,.tb-scard,.tb-crow),
  html body :is(.mx-hd,.mx-hav,.mx-bar,.mx-hero h2,.mx-chip,.mx-big) {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}