/* ===== chatfix9x: SATU-SATUNYA pemilik wallpaper chat, composer chat (pil), dan geometri keyboard (dimuat paling akhir) =====
   Keyboard: WebView/native mengubah tinggi viewport; kbsmooth9x.js hanya menganimasikan transform (.gp-body + .ch-wp) secara identik.
   Tidak ada lagi tinggi yang dianimasikan lewat JS, tidak ada scale/zoom, tidak ada --kb-progress. */

/* 1) Wallpaper: lapisan tetap (tinggi layar penuh + cadangan di bawah) yang menempel ke dasar area chat.
   Ia bergerak bersama composer lewat transform yang sama (kbsmooth9x.js); cadangan bawah mencegah celah saat animasi turun. */
html body .gp.chat>.ch-wp{
  position:absolute;left:0;right:0;top:auto;bottom:calc(-1 * var(--wp-x,0px));width:100%;
  height:calc(var(--wp-h,100%) + var(--wp-x,0px));z-index:-1;pointer-events:none;background:none;
}
html[data-tbw=cx] body .gp.chat>.ch-wp{background:var(--tb-chatwall) center top/cover repeat-y}
/* proporsi gambar diketahui: crop sama persis dengan "cover" pada layar penuh, tidak berubah saat keyboard */
html[data-tbw=cx][style*="--wp-ar"] body .gp.chat>.ch-wp{background-size:max(100%,calc(var(--wp-h) * var(--wp-ar))) auto}
html[data-tbw=w0] body .gp.chat>.ch-wp{background:#fff1d6}
html[data-tbw=w1] body .gp.chat>.ch-wp{background:#fff3b0}
html[data-tbw=w2] body .gp.chat>.ch-wp{background:repeating-linear-gradient(45deg,#fff1d6 0 8px,#ffe2a0 8px 16px)}
html[data-tbw=w3] body .gp.chat>.ch-wp{background:conic-gradient(#fff1d6 25%,#ffe2a0 0 50%,#fff1d6 0 75%,#ffe2a0 0) 0 0/24px 24px}
html[data-tbw=w4] body .gp.chat>.ch-wp{background:#ffd3d8}
html[data-tbw=w5] body .gp.chat>.ch-wp{background:#d6ecff}
html[data-tbw=w6] body .gp.chat>.ch-wp{background:#1e1b12}
html body .gp.chat.tb-chc>.ch-wp{display:none}
/* header tetap di atas isi yang bergeser saat animasi */
html body .gp.chat>.gp-h{position:relative;z-index:3}

/* daftar pesan dan pembungkusnya transparan: wallpaper tembus sampai ke belakang composer */
html:root:root:root:root:root body .gp.chat:not(.tb-chc) .ch-list{background:none!important;background-image:none!important}
html:root:root:root:root:root body .gp.chat:not(.tb-chc)>.gp-body{background:transparent!important;background-image:none!important}

/* 2) Composer chat: satu pil Neo-Brutalism (radius 20px, border hitam, hard shadow). Semua isi sejajar di tengah.
   Area di luar pil transparan, jadi wallpaper terlihat sampai tepi layar (tidak ada bidang putih di bawah). */
html:root:root:root:root:root body .gp.chat .ch-in{
  position:relative;box-sizing:border-box;display:flex;align-items:center;gap:2px;flex:none;
  margin:6px 14px calc(max(var(--sab,0px),env(safe-area-inset-bottom,0px)) + 12px);padding:5px 8px;min-height:56px;
  background:var(--card,#fff)!important;background-image:none!important;
  border:3px solid var(--bd,#111)!important;border-radius:20px!important;box-shadow:4px 4px 0 var(--bd,#111)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
}
html.kb:root:root:root:root:root body .gp.chat .ch-in{margin-bottom:10px}
html:root:root:root:root:root body .gp.chat .ch-rp+.ch-in{border-top:3px solid var(--bd,#111)!important}
html:root:root:root:root:root body .gp.chat .ch-in::before,
html:root:root:root:root:root body .gp.chat .ch-in::after{content:none!important;display:none!important}

html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic){
  box-sizing:border-box;flex:0 0 42px!important;width:42px!important;min-width:42px!important;height:42px!important;
  display:grid;place-items:center;align-self:center;padding:0!important;margin:0!important;line-height:0;
  background:transparent!important;border:0!important;border-radius:14px!important;box-shadow:none!important;translate:none!important;
  color:var(--ic,#ff4757)!important;transition:transform .12s ease-out!important;
}
html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic) svg{display:block!important;width:24px!important;height:24px!important;margin:0!important;stroke:currentColor;color:inherit}
html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic):active{transform:scale(.9)!important;box-shadow:none!important}
html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic):focus-visible{outline:2px solid var(--bd,#111)!important;outline-offset:-2px!important}
/* mic <-> kirim bertukar di tempat yang sama (yang disembunyikan tidak memakan ruang) */
html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-send,.ch-mic).pro-h{position:absolute;right:8px;top:50%;bottom:auto;margin-top:-21px!important}

html:root:root:root:root:root body .gp.chat .ch-in textarea,
html:root:root:root:root:root body .gp.chat .ch-in textarea:focus{
  flex:1 1 auto;min-width:0;box-sizing:border-box;height:40px;min-height:40px!important;max-height:120px;margin:0!important;padding:10px 6px!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;
  font-size:15px;line-height:20px;color:var(--ink,#111)!important;resize:none;
}
html:root:root:root:root:root body .gp.chat .ch-in textarea::placeholder{color:var(--ink,#111)!important;opacity:.7!important}
@media (prefers-reduced-motion:reduce){
  html:root:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic){transition:none!important}
}

/* 3) Composer grup/mx: pembungkus transparan sungguhan (tidak diubah rupa lainnya) */
html:root:root:root:root:root body .gp :is(.tb-gf,.mx-bar){
  background:transparent!important;background-image:none!important;border:0!important;border-top:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
}
html:root:root:root:root:root body .gp :is(.tb-gf .tb-send,.mx-bar .mx-side,.mx-bar .mx-act){
  border:1.5px solid color-mix(in srgb,var(--ink,#111) 24%,transparent)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.10)!important;translate:none!important;
  transition:transform .12s ease-out,box-shadow .12s ease-out,background-color .2s ease!important;
}
html:root:root:root:root:root body .gp .mx-bar .mx-side{background:var(--card,#fff)!important}
html:root:root:root:root:root body .gp :is(.tb-gf .tb-send,.mx-bar .mx-side,.mx-bar .mx-act):active{transform:scale(.93)!important;translate:none!important;box-shadow:0 1px 2px rgba(0,0,0,.12)!important}
html:root:root:root:root:root body .gp :is(.tb-gf input,.tb-gf input:focus,.mx-bar .mx-field,.mx-bar .mx-field:focus-within){
  background:color-mix(in srgb,var(--card,#fff) 94%,transparent)!important;
  border:1.5px solid color-mix(in srgb,var(--ink,#111) 22%,transparent)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.09)!important;outline:0!important;transition:border-color .2s ease,box-shadow .2s ease!important;
}
html:root:root:root:root:root body .gp :is(.tb-gf input:focus,.mx-bar .mx-field:focus-within){
  border-color:color-mix(in srgb,var(--acc,#ffd83d) 80%,var(--ink,#111) 20%)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc,#ffd83d) 42%,transparent),0 4px 14px rgba(0,0,0,.10)!important;
}

/* 4) Chip reaksi: area ketuk lebih nyaman, chip milik sendiri bisa diketuk untuk dihapus */
.pro-rx span{transition:transform .15s ease,opacity .15s ease}
.pro-rx span.me{cursor:pointer;min-height:26px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.pro-rx span.me:active{transform:scale(.9)}
.pro-rx span.out{transform:scale(.4);opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  html:root:root:root:root:root body .gp.chat .ch-in{transition:none!important}
}