/* TELEBUILD Pro: full-width, animasi halus (transform/opacity saja), lapisan transparan */
:root{--pro-ease:cubic-bezier(.22,1,.36,1)}
.pro-h{display:none!important}
/* ---- lebar penuh, tidak lagi di tengah ---- */
.tb-scr,.tb-pad{max-width:none!important;margin:0!important;width:100%;box-sizing:border-box}
.tb-sheet{max-width:none!important;width:100%}
@media (min-width:760px){.tbm{max-width:none!important;width:100%!important;left:0!important;right:0!important;translate:none!important;border-left:0!important;border-right:0!important}}
.gp-body>.tb-pad{margin:0!important;width:100%!important}
/* ---- halus & ringan ---- */
.ch-list,.tb-scr,.gp-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ch-list{contain:layout style}
.tb-row{content-visibility:auto;contain-intrinsic-size:auto 72px}
.gp{will-change:transform,opacity;backface-visibility:hidden}
.ch-m{contain:layout style;animation:proIn .26s var(--pro-ease) both}
@keyframes proIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.tb-btn,.gp-b,.ch-send,.tb-row,.pro-row{transition:transform .16s var(--pro-ease),opacity .16s,background-color .2s}
.tb-btn:active,.gp-b:active,.ch-send:active,.pro-row:active{transform:scale(.95)}
.tb-row:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ---- header chat: ikon call + titik tiga vertikal ---- */
.gp.chat .gp-r{display:flex;align-items:center;gap:2px}
.gp.chat .gp-r .gp-b{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.ch-who{display:flex;align-items:center;gap:10px;min-width:0}
.ch-nm{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ch-nm .ch-n{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-pop{transform-origin:top right;animation:proPop .2s var(--pro-ease) both}
@keyframes proPop{from{opacity:0;transform:scale(.88) translateY(-6px)}to{opacity:1;transform:none}}
/* ---- bar input: stiker + kirim/mic ---- */
.ch-in{position:relative;align-items:center!important;transition:background .2s}
.ch-in .ch-send,.ch-in .ch-mic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:var(--bw,3px) solid var(--bd,#111);background:var(--acc,#ffd83d);color:#111;padding:0}
.ch-in .ch-send.off{opacity:1;filter:none}
.ch-st{flex:none;background:none;border:0;padding:6px;color:inherit;opacity:.75}
.pro-sp{flex:none;background:var(--card,#fff);border-top:var(--bw,3px) solid var(--bd,#111);animation:proUp .24s var(--pro-ease) both}
@keyframes proUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pro-spt{display:flex;gap:4px;padding:6px 8px;overflow-x:auto;border-bottom:2px solid rgba(128,128,128,.25)}
.pro-spt button{position:relative;flex:none;font-size:22px;width:42px;height:38px;border-radius:12px;border:0;background:none}
.pro-spt button.on{background:rgba(128,128,128,.22)}
.pro-spt button i{position:absolute;right:4px;top:3px;width:8px;height:8px;border-radius:50%;background:#f04461}
.pro-spg{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:8px;max-height:200px;overflow-y:auto}
.pro-spg button{font-size:32px;height:52px;border:0;background:none;border-radius:12px}
.pro-spg button:active{background:rgba(128,128,128,.22);transform:scale(1.15)}
.ch-m.m-stk{background:none!important;border:0!important;box-shadow:none!important;padding:2px 4px!important}
.pro-stk{font-size:72px;line-height:1.1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));animation:proStk .5s var(--pro-ease) both}
@keyframes proStk{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.pro-stkimg{width:140px;height:140px;object-fit:contain}
/* ---- perekam transparan ---- */
.recing{background:transparent!important;border-top-color:transparent!important;box-shadow:none!important}
.recing>*:not(.pro-rec){visibility:hidden}
.pro-rec{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 14px;background:transparent;animation:proUp .22s var(--pro-ease) both;pointer-events:auto}
.pro-rec.out{animation:proOut .2s forwards}
@keyframes proOut{to{opacity:0;transform:translateY(16px)}}
.pro-rc,.pro-rs{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pro-rc{animation:proPulse 1.2s infinite;color:#ff5a6e}
.pro-rs{background:var(--acc,#ffd83d);color:#111}
@keyframes proPulse{50%{transform:scale(1.12)}}
.pro-wv{flex:1;display:flex;align-items:center;gap:3px;height:44px;min-width:0}
.pro-wv i{flex:1;max-width:6px;height:100%;border-radius:3px;background:#fff;opacity:.9;transform:scaleY(.15);transition:transform .08s linear;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pro-tm{flex:none;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* ---- balasan status: input transparan + mic/kirim ---- */
.tb-rep{background:transparent!important;border:0!important;box-shadow:none!important;position:absolute}
.tb-rep input{background:rgba(0,0,0,.28)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.35)!important;border-radius:24px!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tb-rep input::placeholder{color:rgba(255,255,255,.7)}
.tb-rep .tb-rb2{background:rgba(0,0,0,.28);color:#fff;border-radius:50%}
.tb-rep .tb-rb2.snd{background:var(--acc,#ffd83d);color:#111}
.tb-rep .pro-rec{padding:0 6px}
/* ---- kutipan di gelembung (status / balasan) ---- */
.pro-q{display:flex;gap:8px;align-items:stretch;margin:-2px -4px 5px;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.14);border-left:4px solid #f04461;overflow:hidden;cursor:pointer;min-height:42px}
.pro-q.rp{border-left-color:#7a5af8}
.pro-q .qb{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.3}
.pro-q b{font-size:13px;color:#f04461;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pro-q.rp b{color:#7a5af8}
.pro-q span{font-size:13px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
.pro-q span svg{width:14px;height:14px;flex:none}
.pro-q img{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;margin:-2px -2px -2px 0}
.ch-m.flash{animation:proFlash 1s}
@keyframes proFlash{30%{box-shadow:0 0 0 4px rgba(122,90,248,.55)}}
/* ---- reaksi ---- */
.ch-m.has-rx{margin-bottom:16px!important}
.pro-rx{position:absolute;left:10px;bottom:-14px;display:flex;gap:3px;animation:proStk .3s var(--pro-ease) both}
.ch-m.me .pro-rx{left:auto;right:10px}
.pro-rx span{display:inline-flex;align-items:center;gap:2px;padding:1px 7px;border-radius:12px;font-size:14px;background:var(--card,#fff);color:var(--ink,#111);border:2px solid var(--bd,#111);line-height:1.4}
.pro-rx span.me{background:var(--acc,#ffd83d);color:#111}
.pro-rx em{font-style:normal;font-size:11px;font-weight:700}
/* ---- mode pilih pesan ---- */
.pro-dim .ch-m:not(.sel),.pro-dim .ch-day,.pro-dim .ch-sys{opacity:.4;transition:opacity .2s}
.ch-m.sel{box-shadow:0 0 0 3px rgba(122,90,248,.6)!important;transition:box-shadow .2s}
.pro-scrim{position:absolute;inset:0;z-index:6}
.pro-tb{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;padding:0 4px;background:var(--navbg,#1a1a1a);color:var(--ink,#fff);border-bottom:var(--bw,3px) solid var(--bd,#111);transform:translateY(-100%);transition:transform .22s var(--pro-ease);padding-top:env(safe-area-inset-top)}
.pro-tb.in{transform:none}
.pro-tb b{font-size:20px;margin:0 10px;min-width:22px}.pro-tb i{flex:1}
.pro-tb button{width:42px;height:44px;display:grid;place-items:center;background:none;border:0;color:inherit}
.pro-tb button:active{background:rgba(128,128,128,.25);border-radius:50%}
.pro-rxbar{position:absolute;z-index:9;display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:28px;background:var(--navbg,#222);border:2px solid var(--bd,#111);box-shadow:0 6px 18px rgba(0,0,0,.45);transform:scale(.6);opacity:0;transform-origin:bottom left;transition:transform .24s var(--pro-ease),opacity .18s}
.pro-rxbar.in{transform:none;opacity:1}
.pro-rxbar .r1,.pro-rxbar .r2{display:flex;gap:2px;align-items:center}
.pro-rxbar .r2{display:none;padding-top:2px}.pro-rxbar.ex .r2{display:flex}
.pro-rxbar button{font-size:27px;width:40px;height:40px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:#fff;padding:0;transition:transform .15s}
.pro-rxbar button:active{transform:scale(1.3)}
.pro-rxbar button.on{background:rgba(255,255,255,.22)}
.pro-rxbar .pl{background:rgba(255,255,255,.18);width:32px;height:32px;margin-left:2px}
.pro-more{position:absolute;z-index:9;right:8px;top:calc(env(safe-area-inset-top) + 52px);background:var(--sheet,#fff);color:var(--ink,#111);border:2px solid var(--bd,#111);border-radius:14px;padding:6px;box-shadow:0 8px 22px rgba(0,0,0,.4);animation:proPop .2s var(--pro-ease) both}
.pro-more button{display:flex;gap:10px;align-items:center;padding:10px 14px;border:0;background:none;color:#e5304c;font-weight:700}
/* ---- pesan suara ---- */
.pro-vn{display:flex;align-items:center;gap:10px;min-width:210px;padding:2px 0}
.pro-vp{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.2);color:inherit;display:grid;place-items:center}
.pro-vw{flex:1;display:flex;align-items:center;gap:2px;height:30px}
.pro-vw i{flex:1;border-radius:2px;background:currentColor;opacity:.35;transition:opacity .15s}.pro-vw i.on{opacity:1}
.pro-vt{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
/* ---- dialog + halaman aktivitas ---- */
.pro-pd,.pro-pf{text-align:center}
.pro-crown{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ffd83d,#ff8a3d);color:#111}
.pro-crown.big{width:72px;height:72px}.pro-crown.big svg{width:36px;height:36px}
.pro-perks{list-style:none;margin:12px 0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.pro-perks li{display:flex;gap:10px;align-items:center;font-size:14px}.pro-perks svg{flex:none;color:#7a5af8}
.pro-perks.card{background:var(--card,#fff);border:var(--bw,3px) solid var(--bd,#111);border-radius:18px;padding:14px;margin:12px 0}
.pro-pg{padding:14px 16px calc(env(safe-area-inset-bottom) + 40px);display:flex;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}
.pro-hero{text-align:center;padding:22px 12px;border-radius:22px;border:var(--bw,3px) solid var(--bd,#111);background:linear-gradient(135deg,rgba(255,216,61,.4),rgba(122,90,248,.3));animation:proIn .4s var(--pro-ease) both}
.pro-hero h2{margin:10px 0 4px}.pro-hero p{margin:0;opacity:.75}
.pro-row{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px;border-radius:18px;border:var(--bw,3px) solid var(--bd,#111);background:var(--card,#fff);color:var(--ink,#111)}
.pro-row.hot{background:var(--acc,#ffd83d);color:#111}
.pro-row span{display:flex;flex-direction:column}.pro-row small{opacity:.65}
.pro-pk{background:var(--card,#fff);border:var(--bw,3px) solid var(--bd,#111);border-radius:18px;padding:12px 14px;animation:proIn .35s var(--pro-ease) both}
.pro-pkh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pro-pkh em{font-style:normal;font-size:12px;font-weight:800;padding:2px 10px;border-radius:10px;background:#c9f2d4;color:#0a5a2a}.pro-pkh em.lk{background:#ffe2a8;color:#7a4a00}
.pro-pkg{display:grid;grid-template-columns:repeat(6,1fr);font-size:28px;text-align:center}
.pro-pf .pro-pfb{height:92px;margin:-20px -18px 0;border-radius:19px 19px 0 0;background:linear-gradient(135deg,#ffd83d,#7a5af8);overflow:hidden}
.pro-pf .pro-pfb img,.pro-pf .pro-pfb video{width:100%;height:100%;object-fit:cover}
.pro-pfa{margin-top:-36px;display:flex;justify-content:center}
.pro-pf h3{margin:8px 0 0}.pro-pf small{opacity:.65}.pro-pf p{margin:8px 0 0;font-size:14px;opacity:.85}
.pro-pfs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.pro-pfs button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-radius:14px;border:2px solid var(--bd,#111);background:var(--card,#fff);color:var(--ink,#111);font-size:12px;font-weight:700}
/* ---- layar panggilan ---- */
.pro-call{position:fixed;inset:0;z-index:99999;background:linear-gradient(160deg,#16161d,#2a1b4d);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 60px) 20px calc(env(safe-area-inset-bottom) + 36px);opacity:0;transform:scale(1.04);transition:opacity .35s var(--pro-ease),transform .35s var(--pro-ease)}
.pro-call.in{opacity:1;transform:none}
.pc-top{text-align:center;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5)}.pc-top h2{margin:14px 0 4px}.pc-st{margin:0;opacity:.8}
.pc-av{display:flex;justify-content:center}.pro-call:not(.inc):not(.on) .pc-av{animation:proPulse 1.6s infinite}
.pc-rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.pro-call.live .pc-rv{display:block}
.pc-lv{position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 14px);width:96px;height:136px;object-fit:cover;border-radius:16px;border:2px solid #fff;z-index:3;display:none;transform:scaleX(-1)}
.pro-call.video .pc-lv{display:block}.pro-call.live .pc-top{align-self:flex-start;text-align:left}
.pc-bar{display:flex;gap:22px;z-index:2}
.pc-b{width:64px;height:64px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.pc-b.end{background:#e5304c;transform:rotate(135deg)}.pc-b.ok{background:#25b45a}.pc-b.off{background:#fff;color:#111}
.pc-b:active{transform:scale(.92)}.pc-b.end:active{transform:rotate(135deg) scale(.92)}
/* ---- bar balasan di atas input chat ---- */
.ch-rp{display:flex;align-items:center;gap:8px;padding:8px 12px 0;background:var(--card,#fff);border-top:var(--bw,3px) solid var(--bd,#111);flex:none;animation:proUp .2s var(--pro-ease) both}
.ch-rp .pro-q{flex:1;min-width:0;margin:0}
.ch-rp>button{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(128,128,128,.2);color:inherit;display:grid;place-items:center}
.ch-rp+.ch-in{border-top:0}