/* ==========================================================================
   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: tanpa animasi masuk yang menunda (header, bar, logo berputar terus-menerus) ---------- */
html body :is(.mx-hd,.mx-hav,.mx-bar,.mx-hero h2,.mx-chip){animation:none!important}
html body .mx-big,html body .mx-big svg{animation:none!important}

/* ---------- 3. kartu kontak / baris: TANPA animasi saat ditekan ---------- */
html body :is(.tb-row,.tb-arv .tb-row,.tb-pi,.tb-scard,.tb-crow){transition:none!important}
html body :is(.tb-row,.tb-arv .tb-row,.tb-pi,.tb-scard,.tb-crow):active{transform:none!important;translate:none!important;scale:none!important}
html:root body #tbm .tb-row:active,html:root body .gp:not(.chat) .tb-row:active{transform:none!important;translate:none!important;box-shadow:4px 4px 0 var(--bd,#111)!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}


/* ===== FIX 2026-10: stable IME geometry, coordinated chat zoom, clean composer ===== */
html:root:root body .gp.chat,
html:root:root body .gp.mx{--kb-progress:0;}
html:root:root:root body .gp.chat>.gp-body,
html:root:root:root body .gp.mx>.gp-body{
  transform-origin:50% 100%;
  transform:translate3d(0,calc(-7px * var(--kb-progress,0)),0) scale(calc(1 - .026 * var(--kb-progress,0)));
  transition:transform .24s cubic-bezier(.22,.72,.24,1);
  will-change:transform;
  backface-visibility:hidden;
}
html:root:root:root body .gp.chat.kb-ime>.gp-body,
html:root:root:root body .gp.mx.kb-ime>.gp-body{transition-duration:.16s;transition-timing-function:cubic-bezier(.22,.72,.24,1);}
/* The background is the same transformed surface as the message list and composer. */
html:root:root:root body .gp.chat .ch-list,
html:root:root:root body .gp.mx .mx-chat{transform-origin:50% 100%;backface-visibility:hidden;}
/* Remove only the unwanted focus ring around the message field; keep its single border. */
html:root:root:root:root body .gp.chat .ch-in textarea,
html:root:root:root:root body .gp.chat .ch-in textarea:focus{
  outline:0!important;outline-offset:0!important;
  border:2px solid var(--bd,#111)!important;
  box-shadow:none!important;
  background:var(--card,#fff)!important;
  transition:background-color .14s ease,color .14s ease;
}
html:root:root:root:root body .gp.chat .ch-in textarea::placeholder{color:#6d685d!important;opacity:.72!important;}
html:root:root:root:root body .gp.chat .ch-in{gap:8px!important;}
html:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-send,.ch-mic){box-sizing:border-box;width:44px;height:44px;min-width:44px;}
html: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;}

/* Neo-Brutalism is an actual saved chat theme, not a CSS-only permanent override. */
html.chat-neo body .gp.chat .ch-list{background-color:var(--paper,#fff1d6);}
html.chat-neo body .gp.chat .ch-m{
  box-sizing:border-box;border:2px solid #111!important;border-radius:15px!important;
  box-shadow:3px 3px 0 #111!important;max-width:min(86%,560px);padding:8px 12px 7px;
  color:#17140d!important;line-height:1.48;
}
html.chat-neo body .gp.chat .ch-m.me{background:#ffdc43!important;}
html.chat-neo body .gp.chat .ch-m.pe{background:#fff8e8!important;}
html.chat-neo body .gp.chat .ch-m.del{background:#f5e6c9!important;}
html.chat-neo body .gp.chat .ch-m :is(small,time,.ch-tk){color:inherit;}
html.chat-neo body .gp.chat .ch-in textarea{border-radius:18px!important;}
html.chat-neo body .gp.chat .ch-in :is(.ch-at,.ch-st){background:#fffaf0!important;border:2px solid #111!important;box-shadow:3px 3px 0 #111!important;}
html.chat-neo body .gp.chat .ch-in :is(.ch-mic,.ch-send){background:#ffdc43!important;border:2px solid #111!important;box-shadow:3px 3px 0 #111!important;}
html.chat-neo body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-mic,.ch-send):active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 #111!important;}
html.chat-neo body .gp.chat .ch-in textarea:focus{outline:0!important;}

/* Disabling the option restores a quieter legacy chat surface without touching wallpaper or behavior. */
html.chat-classic body .gp.chat .ch-m{
  border:1px solid var(--line,rgba(127,127,127,.28))!important;border-radius:18px!important;
  box-shadow:0 2px 7px rgba(0,0,0,.08)!important;padding:9px 13px 7px;
}
html.chat-classic body .gp.chat .ch-m.me{background:var(--acc,#ffd83d)!important;color:var(--ink,#111)!important;}
html.chat-classic body .gp.chat .ch-m.pe{background:var(--card2,var(--card,#fff))!important;color:var(--ink,#111)!important;}
html.chat-classic body .gp.chat .ch-in :is(.ch-at,.ch-st,.ch-mic,.ch-send){box-shadow:none!important;border:1px solid var(--line,rgba(127,127,127,.3))!important;}
html.chat-classic body .gp.chat .ch-in :is(.ch-at,.ch-st){background:var(--card,#fff)!important;}
html.chat-classic body .gp.chat .ch-in :is(.ch-mic,.ch-send){background:var(--acc,#ffd83d)!important;}
@media (prefers-reduced-motion:reduce){
  html:root:root:root body .gp.chat>.gp-body,html:root:root:root body .gp.mx>.gp-body{transition:none!important;}
}

/* Channel info: visible owner/admin profile cards */
.tb-staff{margin:8px 0 12px;padding-top:4px;border-top:1px solid var(--line,rgba(0,0,0,.12))}.tb-staff .tb-h2row{margin:8px 0 2px}.tb-staff .tb-fol{min-width:0}.tb-staff .tb-fol .gl-av{flex:none;width:46px;height:46px}.tb-staff .tb-fol>div{min-width:0}.tb-staff .tb-fol b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== FIX: full-screen sheets stay above the messenger shell ===== */
/* Keep the original overlay stacking order (z-index 130 above #tbm at 100). */
html body .gp{position:fixed!important;inset:0!important;z-index:130!important;isolation:isolate;}
html body .gp.out{pointer-events:none!important;}
/* Layer zoom in/out motion: see "Layer motion v2" at the end of this file (single source of truth). */
/* The native bar/inset owner provides keyboard geometry; don't constrain the tab shell. */
html body #tbm{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:0!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;}
html body #tbm>.tb-main{flex:1 1 0%!important;height:auto!important;min-height:0!important;max-height:none!important;position:relative!important;overflow:hidden!important;padding:0!important;margin:0!important;}
html body #tbm>.tb-main>.tb-pg{position:absolute!important;inset:0!important;height:auto!important;min-height:0!important;max-height:none!important;}
html body #tbm>.tb-nav{position:relative!important;flex:0 0 auto!important;margin:0!important;z-index:2!important;}

/* Fix: attachment/sticker icons stay legible on light controls in dark mode */
html.dark body :is(.tb-ibtn,.tb-upic,.tb-cb,.tb-mic,.tb-nic,.tb-pic) { color:var(--ink,#17130d)!important; }
html.dark body :is(.tb-ibtn,.tb-upic,.tb-cb,.tb-mic,.tb-nic,.tb-pic) svg { color:inherit!important; stroke:currentColor!important; }
html.dark body :is(.tb-ibtn,.tb-upic,.tb-cb) { background:var(--card,#fff8e8)!important; }
/* Restore profile surface; only the banner remains full bleed */
html body .tb-prof .tb-pcard { background:var(--card, #171717)!important; }
html body .tb-prof .tb-pcard .tb-pbn { background-color:var(--card2,rgba(127,127,127,.2))!important; }


/* ===== Final pass: full-bleed chat, visible keyboard zoom, page loader, stable splash ===== */
html:root:root:root body .gp.chat .ch-list{
  width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box;
  background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important;
  transition:background-position .38s cubic-bezier(.22,.72,.24,1);
}
html:root:root:root body .gp.chat .ch-m{
  width:fit-content;max-width:min(78%,560px);min-width:0;flex:0 0 auto;
  overflow-wrap:anywhere;box-sizing:border-box;
}
html:root:root:root body .gp.chat .ch-m.me{align-self:flex-end;}
html:root:root:root body .gp.chat .ch-m.pe{align-self:flex-start;}
/* Keep only the input field's own surface; the composer wrapper blends into wallpaper. */
html:root:root:root body .gp.chat .ch-in{
  background:transparent!important;border-top:0!important;box-shadow:none!important;
  transition:padding-bottom .34s cubic-bezier(.22,.72,.24,1),background-color .2s ease;
}
html:root:root:root body .gp.chat .ch-in textarea,
html:root:root:root body .gp.chat .ch-in textarea:focus{outline:0!important;box-shadow:none!important;}
html:root:root:root body .gp.chat>.gp-body,
html:root:root:root body .gp.mx>.gp-body{
  transform-origin:50% 100%;
  transform:translate3d(0,calc(-12px * var(--kb-progress,0)),0) scale(calc(1 - .045 * var(--kb-progress,0)));
  transition:transform .38s cubic-bezier(.22,.72,.24,1)!important;
  will-change:transform;backface-visibility:hidden;
}
html:root:root:root body .gp.chat.kb-ime>.gp-body,
html:root:root:root body .gp.mx.kb-ime>.gp-body{transition-duration:.38s!important;}
/* Page-opening loading veil: opaque surface and centered spinner; toolbar/tab bar remain usable/visible. */
@keyframes tbPageVeilIn{0%{opacity:1}72%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes tbPageSpin{to{transform:rotate(360deg)}}
html body .gp.in:not(.chat):not(.mx)::after,
html body .gp.in.chat::after,
html body .gp.in.mx::after{
  content:"";position:absolute;z-index:120;left:0;right:0;
  top:calc(max(var(--sat,0px),env(safe-area-inset-top,0px)) + 58px);
  bottom:calc(76px + max(var(--sab,0px),env(safe-area-inset-bottom,0px)));
  background:var(--paper,#fff1d6);opacity:0;pointer-events:none;
  animation:tbPageVeilIn .48s ease-out both;
}
html body .gp.in:not(.chat):not(.mx)::before,
html body .gp.in.chat::before,
html body .gp.in.mx::before{
  content:"";position:absolute;z-index:121;left:calc(50% - 17px);top:calc(50% - 17px);
  width:34px;height:34px;border:3px solid color-mix(in srgb,var(--ink,#17130d) 20%,transparent);
  border-top-color:var(--acc,#ffd83d);border-radius:50%;opacity:0;pointer-events:none;
  animation:tbPageSpin .7s linear infinite,tbPageVeilIn .48s ease-out both;
}
/* Avoid a flash between initial HTML paint and startup JS. */
html body #splash:not(.out){opacity:1;visibility:visible;pointer-events:auto;will-change:opacity;backface-visibility:hidden;}
html body #splash.out{transition:opacity .42s ease,visibility 0s linear .42s!important;}
html body #splash .sp-logo,html body #splash .sp-hero h1,html body #splash .sp-tag{backface-visibility:hidden;}
/* Remove only the top separator of the bottom navigation. */
html body #tbm>.tb-nav{border-top:0!important;box-shadow:none!important;}
/* Toast: dark gray and slightly taller, readable without glass blur. */
html body #toast,html body .tg .tgtoast{
  background:#343434!important;border:1px solid #555!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
  min-height:46px;padding-top:13px!important;padding-bottom:15px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;
}
@media(prefers-reduced-motion:reduce){
 html:root:root:root body .gp.chat>.gp-body,html:root:root:root body .gp.mx>.gp-body{transition:none!important;}
 html body .gp.in::before,html body .gp.in::after{animation:none!important;display:none!important;}
}


/* Opaque tab-loading layer: covers only the content viewport, never the toolbar or bottom navigation. */
html body #tbm .tb-main{position:relative;isolation:isolate;}
html body #tbm .tb-tab-progress{position:absolute;inset:0;z-index:1000;display:grid;place-items:center;background:var(--paper,#fff1d6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility 0s linear .22s;}
html body #tbm .tb-tab-progress.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease;}
html body #tbm .tb-tab-spinner{width:38px;height:38px;box-sizing:border-box;border:3px solid color-mix(in srgb,var(--ink,#17130d) 18%,transparent);border-top-color:var(--acc,#ffd83d);border-right-color:var(--acc,#ffd83d);border-radius:50%;animation:tbTabSpin .72s linear infinite;}
@keyframes tbTabSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html body #tbm .tb-tab-progress{transition:none}html body #tbm .tb-tab-spinner{animation-duration:1.5s}}


/* ===== Corrective pass: native scrolling, no IME zoom drift, real loading veil ===== */
/* Do not scale/translate the entire chat surface when the keyboard changes height.
   Native WebView/Activity owns geometry; message panes retain native touch scrolling. */
html:root:root:root body .gp.chat>.gp-body,
html:root:root:root body .gp.mx>.gp-body {
  transform:none!important;
  transform-origin:initial!important;
  transition:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
}
html:root:root:root body .gp.chat .ch-list,
html:root:root:root body .gp.mx .mx-chat,
html:root:root:root body .gp.mx .mx-scroll {
  transform:none!important;
  filter:none!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto;
}
html:root:root:root body .gp.chat .ch-list {
  width:100%!important;max-width:none!important;margin:0!important;
  background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important;
  transition:none!important;
}
html:root:root:root body .gp.mx .mx-scroll { scroll-behavior:auto!important; }

/* Meta AI icon is static: remove the old zoom/float/spin specifically from its hero mark. */
html:root:root:root body .gp.mx .mx-big,
html:root:root:root body .gp.mx .mx-big svg {
  animation:none!important;transform:none!important;translate:none!important;
  scale:1!important;will-change:auto!important;
}

/* The box that holds the placeholder is transparent; the actual text field keeps its own surface. */
html:root:root:root body .gp.mx .mx-bar {
  background:transparent!important;border:0!important;box-shadow:none!important;
}
html:root:root:root body .gp.mx .mx-bar .mx-field,
html:root:root:root body .gp.mx .mx-bar .mx-field:focus-within {
  flex:1 1 0;min-width:0;min-height:44px;padding:0!important;
  background:transparent!important;background-color:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;
}
html:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT,
html:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT:focus {
  min-height:44px!important;height:auto;max-height:120px;box-sizing:border-box!important;
  padding:10px 14px!important;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!important;
}
html:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT::placeholder {
  color:var(--ink,#111)!important;opacity:.48!important;
}

/* Message bubbles size to their contents rather than stretching into long capsules. */
html:root:root:root body .gp.mx .mx-row { align-items:flex-start!important; }
html:root:root:root body .gp.mx .mx-bub {
  display:block!important;width:fit-content!important;min-width:64px;max-width:min(88%,640px)!important;
  flex:0 1 auto!important;align-self:flex-start;box-sizing:border-box;overflow-wrap:anywhere;
}
html:root:root:root body .gp.mx .mx-row.out .mx-bub { align-self:flex-end; }
html:root:root:root body .gp.chat .ch-m {
  width:fit-content;min-width:0;max-width:min(78%,560px)!important;flex:0 1 auto;
  overflow-wrap:anywhere;box-sizing:border-box;
}

/* Opaque spinner on tab changes: the tab's toolbar and bottom navigation remain outside #tbMain. */
html body #tbm>.tb-main { position:relative!important;isolation:isolate!important;overflow:hidden!important; }
html body #tbm>.tb-main>.tb-tab-progress,
html body #tbm .tb-main>.tb-tab-progress {
  position:absolute!important;inset:0!important;z-index:99999!important;
  display:grid!important;place-items:center!important;
  background:transparent!important;color:var(--ink,#17130d)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .18s ease,visibility 0s linear .18s!important;
}
html body #tbm>.tb-main>.tb-tab-progress.show,
html body #tbm .tb-main>.tb-tab-progress.show {
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  transition:opacity .18s ease!important;
}
html body #tbm .tb-tab-progress .tb-tab-spinner {
  display:block!important;width:42px!important;height:42px!important;
  border:4px solid color-mix(in srgb,var(--ink,#17130d) 20%,transparent)!important;
  border-top-color:var(--acc,#ffd83d)!important;border-right-color:var(--acc,#ffd83d)!important;
  border-radius:50%!important;animation:tbTabSpin .78s linear infinite!important;
}

/* Full-page layer loader stays visible long enough to be perceived; toolbar is not covered. */
@keyframes tbPageVeilHoldV3 { 0%,84% {opacity:1;visibility:visible} 100% {opacity:0;visibility:hidden} }
html body .gp.in:not(.chat):not(.mx)::after,
html body .gp.in.chat::after,
html body .gp.in.mx::after {
  animation:tbPageVeilHoldV3 .95s ease-out both!important;
  background:var(--paper,#fff1d6)!important;
}
html body .gp.in:not(.chat):not(.mx)::before,
html body .gp.in.chat::before,
html body .gp.in.mx::before {
  animation:tbPageSpin .72s linear infinite,tbPageVeilHoldV3 .95s ease-out both!important;
}
@media(prefers-reduced-motion:reduce) {
  html:root:root:root body .gp.chat>.gp-body,
  html:root:root:root body .gp.mx>.gp-body {transform:none!important;transition:none!important;}
  html body #tbm .tb-tab-spinner {animation-duration:1.5s!important;}
  /* Keep loading feedback visible as a still ring when reduced motion is enabled. */
  html body .gp.in:not(.chat):not(.mx)::before,
  html body .gp.in.chat::before,
  html body .gp.in.mx::before {display:block!important;animation:none!important;opacity:1!important;visibility:visible!important;}
  html body .gp.in:not(.chat):not(.mx)::after,
  html body .gp.in.chat::after,
  html body .gp.in.mx::after {display:block!important;animation:tbPageVeilHoldV3 .95s ease-out both!important;}
}

/* ===== Final targeted repair: single composer surface, 20px controls, real layer zoom, splash handoff ===== */
/* Meta AI placeholder: only the actual textarea owns a surface. Its holder stays completely clear. */
html:root:root:root:root body .gp.mx .mx-bar {
  display:flex!important;align-items:center!important;gap:8px!important;
  background:transparent!important;background-color:transparent!important;
  border:0!important;border-top:0!important;box-shadow:none!important;outline:0!important;
  padding:8px 10px calc(max(var(--sab,0px),env(safe-area-inset-bottom,0px)) + 8px)!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-field,
html:root:root:root:root body .gp.mx .mx-bar .mx-field:focus-within {
  flex:1 1 0!important;min-width:0!important;min-height:44px!important;
  display:flex!important;align-items:center!important;padding:0!important;margin:0!important;
  background:transparent!important;background-color:transparent!important;
  border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT,
html:root:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT:focus {
  display:block!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;
  box-sizing:border-box!important;min-height:44px!important;height:44px;max-height:120px!important;
  margin:0!important;padding:10px 12px!important;line-height:20px!important;text-align:left!important;
  vertical-align:middle!important;resize:none!important;
  background:var(--card,#fff8e8)!important;background-color:var(--card,#fff8e8)!important;
  color:var(--ink,#17130d)!important;-webkit-text-fill-color:var(--ink,#17130d)!important;
  border:2px solid var(--bd,#111)!important;border-radius:20px!important;
  outline:0!important;outline-offset:0!important;box-shadow:none!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-field textarea#mxT::placeholder {
  color:var(--mute,#858078)!important;-webkit-text-fill-color:var(--mute,#858078)!important;
  opacity:.86!important;line-height:20px!important;text-align:left!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-field:focus-within {
  outline:0!important;outline-offset:0!important;box-shadow:none!important;
}
/* Attachment and sticker/emoji buttons use precise rounded-square corners, not circular capsules. */
html:root:root:root:root body .gp.mx .mx-bar .mx-side,
html:root:root:root:root body .gp.chat .ch-in .ch-at,
html:root:root:root:root body .gp.chat .ch-in .ch-st {
  flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;
  box-sizing:border-box!important;border-radius:20px!important;
  display:grid!important;place-items:center!important;align-self:center!important;
  padding:0!important;margin:0!important;line-height:0!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-side svg,
html:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st) svg {
  display:block!important;width:21px!important;height:21px!important;margin:0!important;
}
html:root:root:root:root body .gp.mx .mx-bar .mx-side:active,
html:root:root:root:root body .gp.chat .ch-in :is(.ch-at,.ch-st):active {
  transform:translate3d(1px,1px,0) scale(.97)!important;
  transition:transform .12s ease-out!important;
}
/* Browser/WebView's overflow scroller is the active scrolling surface; don't transform it. */
html:root:root:root body .gp.mx .mx-chat {flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;transform:none!important;}
html:root:root:root body .gp.mx .mx-scroll {
  display:block!important;flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;
  touch-action:auto!important;overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch!important;
  transform:none!important;filter:none!important;scroll-behavior:auto!important;
}
/* ===== Final motion/loading pass based on the reference recording ===== */
/* Keyboard geometry only resizes the WebView; never scale the whole chat/background. */
html:root:root:root:root body .gp.chat>.gp-body,
html:root:root:root:root body .gp.mx>.gp-body {
  transform:none!important;
  transform-origin:initial!important;
  transition:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
}
html:root:root:root:root body .gp.chat.kb-ime>.gp-body,
html:root:root:root:root body .gp.mx.kb-ime>.gp-body { transform:none!important; transition:none!important; }

/* Ensure the first Chat render also gets the same solid centered spinner as tab changes. */
html body #tbm>.tb-main { position:relative!important; isolation:isolate!important; }
html body #tbm>.tb-main>.tb-tab-progress {
  position:absolute!important; inset:0!important; z-index:99999!important;
  display:grid!important; place-items:center!important;
  background:var(--paper,#fff1d6)!important;
}
html body #tbm>.tb-main>.tb-tab-progress.show { opacity:1!important; visibility:visible!important; pointer-events:auto!important; }
html body #tbm>.tb-main>.tb-tab-progress .tb-tab-spinner {
  width:44px!important; height:44px!important; border-width:4px!important;
  animation:tbTabSpin .78s linear infinite!important;
}
@media(prefers-reduced-motion:reduce) {
  html body #tbm>.tb-main>.tb-tab-progress .tb-tab-spinner { animation-duration:1.5s!important; }
}


/* ===== Layer motion v3: symmetric open/close, no counter-zoom on the page underneath =====
   The foreground page uses matching scales and durations in both directions. The shell underneath stays
   at its natural size, so closing a layer cannot make the underlying layout pop/expand. */
html:root:root:root:root body .gp {
  transform-origin:var(--cx,50%) var(--cy,50%)!important;
  transform:scale(.94)!important;
  opacity:0!important;
  clip-path:none!important;
  will-change:transform,opacity;
  transition:transform .42s cubic-bezier(.2,.75,.25,1),opacity .28s cubic-bezier(.2,.75,.25,1)!important;
}
html:root:root:root:root body .gp.in {
  transform:scale(1)!important;opacity:1!important;pointer-events:auto!important;
}
html:root:root:root:root body .gp.in.done { transform:none!important;will-change:auto; }
html:root:root:root:root body .gp.out {
  transform:scale(.94)!important;opacity:0!important;pointer-events:none!important;
  transition:transform .42s cubic-bezier(.75,0,.8,.25),opacity .28s cubic-bezier(.75,0,.8,.25)!important;
}
/* Keep the underlying shell fixed-size throughout overlay motion. */
html:root:root body #tbm,
html:root.gp-open body #tbm { transform:none!important;transition:none!important;transform-origin:50% 50%; }
html:root #tbm .tb-pg.on.slide { animation-fill-mode:backwards!important;will-change:auto!important; }
html:root:root:root:root body.noanim .gp,
html:root:root:root:root body.noanim .gp.out { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  html:root:root:root:root body .gp,html:root:root:root:root body .gp.out {transition-duration:.01ms!important;}
}

/* ===== Chat: multi-select (long-press, then tap other bubbles) + smoother loading-veil release ===== */
/* Selected rows get a full-width tint band behind the bubble (like WhatsApp); nothing is dimmed or scaled. */
html:root body .gp.chat .ch-list.pro-sel{overflow-x:hidden;}
html:root body .gp.chat .ch-list.pro-sel .ch-m.sel{position:relative;z-index:7;box-shadow:none;}
html.chat-neo:root body .gp.chat .ch-list.pro-sel .ch-m.sel{box-shadow:3px 3px 0 #111!important;}
html.chat-classic:root body .gp.chat .ch-list.pro-sel .ch-m.sel{box-shadow:0 2px 7px rgba(0,0,0,.08)!important;}
html:root body .gp.chat .ch-list.pro-sel .ch-m.sel::before{
  content:"";position:absolute;left:-100vw;right:-100vw;top:-2px;bottom:-2px;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--acc,#ffd83d) 34%,transparent);
  animation:proSelBand .2s cubic-bezier(.2,0,.2,1) both;
}
@keyframes proSelBand{from{opacity:0}to{opacity:1}}
/* composer is inert while messages are being selected; the message list keeps its native scrolling */
html:root body .gp.pro-selecting .ch-in{pointer-events:none;opacity:.55;transition:opacity .2s ease;}
/* reaction bar fades away once more than one message is selected (or the list was scrolled) */
html:root body .pro-rxbar.in.gone{transform:scale(.8) translateY(6px);opacity:0;pointer-events:none;}
html:root body .pro-tb b{display:inline-block;}
html:root body .pro-tb b.bump{animation:proCountBump .22s cubic-bezier(.3,1.5,.5,1);}
@keyframes proCountBump{0%{transform:scale(.7)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){html:root body .gp.chat .ch-list.pro-sel .ch-m.sel::before,html:root body .pro-tb b.bump{animation:none!important;}}
body.noanim .gp.chat .ch-list.pro-sel .ch-m.sel::before,body.noanim .pro-tb b.bump{animation:none!important;}

/* Loading veil: same duration and same spinner; only the release is longer and eased, so the chat (and its
   wallpaper) fades in under the zoom instead of popping in at the very end. */
@keyframes tbPageVeilHoldV3{
  0%,60%{opacity:1;visibility:visible;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  100%{opacity:0;visibility:hidden}
}