/* anim.css — animasi proses: progress upload, top bar, skeleton, tombol sibuk */

/* ── Top bar (indikator proses jaringan) ── */
#top-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:900;pointer-events:none;opacity:0;transition:opacity .25s}
#top-bar.on{opacity:1}
#top-bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent,#3b82f6),#8b5cf6,transparent);
  width:40%;border-radius:3px;animation:topBarRun 1.1s cubic-bezier(.4,0,.2,1) infinite;box-shadow:0 0 10px var(--accent,#3b82f6)}
@keyframes topBarRun{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ── Kartu progress upload ── */
.up-card{position:fixed;left:50%;bottom:86px;width:min(92vw,380px);transform:translate(-50%,24px) scale(.96);opacity:0;pointer-events:none;
  z-index:850;background:var(--surface2,#1a2338);border:1px solid var(--border2,#2a3550);border-radius:18px;padding:14px 16px 12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .25s,border-color .3s}
.up-card.show{transform:translate(-50%,0) scale(1);opacity:1}
.up-head{display:flex;align-items:center;gap:12px}
.up-ico{width:40px;height:40px;border-radius:12px;background:rgba(59,130,246,.15);color:var(--accent,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;position:relative}
.up-ico::after{content:"";position:absolute;inset:-3px;border-radius:15px;border:2px solid transparent;border-top-color:var(--accent,#3b82f6);animation:spin 1s linear infinite}
.up-titles{flex:1;min-width:0}
.up-title{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-phase{font-size:11px;color:var(--text3,#6b7a99);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-pct{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent,#3b82f6);min-width:48px;text-align:right}
.up-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:12px 0 8px;position:relative}
.up-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transition:width .25s ease;position:relative;overflow:hidden}
.up-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:upSheen 1.2s linear infinite}
@keyframes upSheen{to{transform:translateX(100%)}}
.up-card.indet .up-fill{width:35%!important;animation:upIndet 1.1s ease-in-out infinite}
@keyframes upIndet{0%{margin-left:-35%}100%{margin-left:100%}}
.up-card.indet .up-pct{font-size:12px}
.up-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text3,#6b7a99);font-variant-numeric:tabular-nums}
.up-card.ok{border-color:rgba(34,197,94,.5)}
.up-card.ok .up-ico{background:rgba(34,197,94,.15);color:var(--green,#22c55e)}
.up-card.ok .up-ico::after{display:none;animation:none}
.up-card.ok .up-ico i{animation:upCheck .45s cubic-bezier(.2,1.6,.4,1)}
.up-card.ok .up-fill{background:var(--green,#22c55e)}
.up-card.ok .up-pct{color:var(--green,#22c55e)}
.up-card.err{border-color:rgba(239,68,68,.5);animation:upShake .4s}
.up-card.err .up-ico{background:rgba(239,68,68,.15);color:var(--red,#ef4444)}
.up-card.err .up-ico::after{display:none;animation:none}
.up-card.err .up-fill{background:var(--red,#ef4444)}
.up-card.err .up-pct{color:var(--red,#ef4444)}
@keyframes upCheck{0%{transform:scale(.2) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes upShake{0%,100%{transform:translate(-50%,0)}25%{transform:translate(calc(-50% - 6px),0)}75%{transform:translate(calc(-50% + 6px),0)}}

/* ── Skeleton (pengganti "Memuat...") ── */
.sk-wrap{padding:6px 2px}
.sk-row{display:flex;align-items:center;gap:12px;padding:12px 10px}
.sk-av{width:46px;height:46px;border-radius:50%;flex-shrink:0}
.sk-av.sq{border-radius:14px}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
.sk-line{height:11px;border-radius:6px}
.sk-line.s{width:55%}.sk-line.m{width:75%}.sk-line.l{width:90%}
.sk-av,.sk-line,.sk-pill{background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 70%);background-size:300% 100%;animation:skShimmer 1.3s ease-in-out infinite}
.sk-pill{width:44px;height:20px;border-radius:99px}
@keyframes skShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-row:nth-child(2) .sk-av,.sk-row:nth-child(2) .sk-line{animation-delay:.12s}
.sk-row:nth-child(3) .sk-av,.sk-row:nth-child(3) .sk-line{animation-delay:.24s}
.sk-row:nth-child(4) .sk-av,.sk-row:nth-child(4) .sk-line{animation-delay:.36s}

/* ── Daftar muncul bertahap (hanya saat pertama kali terisi) ── */
.anim-in>*{animation:itemIn .38s cubic-bezier(.2,.8,.3,1) both}
.anim-in>*:nth-child(2){animation-delay:.04s}.anim-in>*:nth-child(3){animation-delay:.08s}
.anim-in>*:nth-child(4){animation-delay:.12s}.anim-in>*:nth-child(5){animation-delay:.16s}
.anim-in>*:nth-child(6){animation-delay:.20s}.anim-in>*:nth-child(7){animation-delay:.24s}
.anim-in>*:nth-child(n+8){animation-delay:.28s}
@keyframes itemIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Tombol sibuk & sentuhan ── */
.is-busy{position:relative;overflow:hidden;pointer-events:none;opacity:.85}
.is-busy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-100%);animation:upSheen 1s linear infinite}
button,.icon-btn,.sidebar-tab,.group-card,.convo-item,.people-card{-webkit-tap-highlight-color:transparent}
.btn-primary,.icon-btn,.sidebar-tab{transition:transform .12s ease,filter .15s}
.btn-primary:active,.icon-btn:active,.sidebar-tab:active{transform:scale(.94)}
.group-card:active,.convo-item:active,.people-card:active{transform:scale(.985);transition:transform .1s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}