/* ===== TL UI: toolbar, pill online, loader kecil, arrow back, channel kami =====
   Catatan: dibuat ringan (bukan neo-brutalism penuh), tetap pakai variabel tema yang sudah ada
   (--acc, --card, --ink, --mute, --bd) supaya ikut tema gelap/terang dan warna aksen premium. */

/* --- toolbar solid, sudut lebih lembut, tidak terlalu brutal --- */
html body #app main .tb{
  background:var(--acc,#ffd83d)!important;
  border:1.5px solid var(--fb,#111)!important;
  border-radius:0 0 18px 18px!important;
  box-shadow:0 2px 0 rgba(0,0,0,.08)!important;
}
html body #app main .tb .ib2{
  background:rgba(255,255,255,.55)!important;
  border:1.5px solid var(--fb,#111)!important;
  border-radius:12px!important;
}
html body #app main .tb .tbt b{ color:#161300!important; }
html body #app main .tb .tbt small{ color:rgba(22,19,0,.65)!important; }

/* --- pill online/offline: kapsul putih, selalu terlihat di semua tab --- */
html body #app main .tb .pill{
  display:flex!important;
  align-items:center;
  gap:6px;
  background:#fff!important;
  border:1.5px solid var(--fb,#111)!important;
  border-radius:999px!important;
  padding:5px 12px!important;
  box-shadow:none!important;
}
html body #app main .tb .pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:#c8c3ab;border:1.5px solid var(--fb,#111);
}
html body #app main .tb .pill .dot.on{ background:#3ecf6e!important; }

/* --- back arrow di toolbar (dipakai saat sedang di layar sub/edit) --- */
html body #app main .tb .ib2.tl-back{ cursor:pointer; }
html body #app main .tb .ib2.tl-back svg{ transform:translateX(-1px); }

/* --- card "Channel Kami" sedikit dibedakan warnanya dari ikon abu default --- */
#vSet .st-c#stChTg .st-i{ background:#2aabee22!important; color:#2aabee!important; }
#vSet .st-c#stChTg .st-i svg,#vSet .st-c#stChTg .st-i i{ stroke:#2aabee!important; color:#2aabee!important; }
#vSet .st-c#stChWa .st-i{ background:#25d36622!important; color:#25d366!important; }
#vSet .st-c#stChWa .st-i svg,#vSet .st-c#stChWa .st-i i{ stroke:#25d366!important; color:#25d366!important; }

/* --- loader saat pindah tab: nutup area konten SAJA (toolbar & bottom nav tetap keliatan di atasnya),
   tinggi toolbar/nav dihitung live lewat JS ke --tbh/--navh. Progress-nya dead-center, animasi masuk/keluar halus. --- */
.tl-load{
  position:fixed;
  left:0;right:0;
  top:var(--tbh,64px);
  bottom:var(--navh,64px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper,#fff1d6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease;
  z-index:25;
}
.tl-load.on{ opacity:1;visibility:visible;pointer-events:auto; }
.tl-load i{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(0,0,0,.12);
  border-top-color:var(--acc,#ffd83d);
  animation:tlspin .7s linear infinite;
  transform:scale(.4);
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
}
.tl-load.on i{ transform:scale(1); opacity:1; }
html.dark .tl-load i{ border-color:rgba(255,255,255,.15); border-top-color:var(--acc,#ffd83d); }
@keyframes tlspin{ to{ transform:rotate(360deg); } }

/* --- background polos: hilangkan pola titik-titik di seluruh app --- */
html body,
html body #aiRoot .axm,
html body #aiRoot .cx,
html.dark body,
html.dark #aiRoot .axm,
html body .gp.chat .ch-list,
html.dark body .gp.chat .ch-list{
  background-image:none!important;
}

/* --- tema gelap: benar-benar gelap (netral hitam/abu), bukan coklat --- */
html.dark{
  --paper:#0a0a0a!important;
  --card:#171717!important;
  --card2:#202020!important;
  --card3:#2a2a2a!important;
  --cbg:#171717!important;
  --ink:#f2f2f2!important;
  --text:#f2f2f2!important;
  --mute:rgba(242,242,242,.65)!important;
  --line:#2a2a2a!important;
  --navbg:#0a0a0a!important;
  --sheet:#111111!important;
  --fb:#d4d4d4!important;
}
html.dark #aiRoot{ --k:#f2f2f2!important; --paper:#0a0a0a!important; --mute:rgba(242,242,242,.7)!important; }