/* MALIK STORE - tampilan attachment chat (dipakai chat user & admin). Ringan, tanpa library. */
/* selector diperkuat agar tidak tertimpa ".s button" (chat user) / ".snd .btn" (admin) */
button.att-btn,.s button.att-btn,.snd button.att-btn{flex:none;width:44px;min-width:44px;padding:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:transparent;color:#8b9ab4;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
button.att-btn:hover:not(:disabled){color:#8ecae6;border-color:rgba(142,202,230,.45)}
button.att-btn:disabled{opacity:.4;cursor:not-allowed}
.att-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.att-pv{padding:8px 12px;border-top:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#fff}
.att-pv[hidden]{display:none}
.att-row{display:flex;align-items:center;gap:10px}
.att-row[hidden]{display:none}
.att-th{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#000}
.att-th img,.att-th video{display:block;width:100%;height:100%;object-fit:cover}
.att-meta{flex:1;min-width:0}
.att-n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.att-s{display:block;margin-top:2px;color:#8b9ab4;font-size:12px}
.att-prog{height:4px;margin-top:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.att-prog[hidden]{display:none}
.att-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7ba7ea,#8ecae6);transition:width .15s}
.att-prog.ind i{width:35%;animation:att-ind 1s linear infinite}
@keyframes att-ind{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.att-x{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:14px;cursor:pointer}
.att-err{margin-top:6px;color:#ff5c6c;font-size:12.5px;line-height:1.4}
.att-err[hidden]{display:none}
.att-box{width:240px;max-width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#000}
.att-img,.att-vid{display:block;width:100%;height:100%}
.att-img{object-fit:cover;cursor:zoom-in}
.att-vid{object-fit:contain}
.att-cap{margin-top:6px}
.att-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,14,.92);cursor:zoom-out}
.att-lb img{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain}

/* Chat admin di HP: shared.css memberi backdrop-filter pada .chat sehingga "position:fixed" milik .cth (layar penuh) menjadi relatif ke kartu
   dan bar ketik/kirim terpotong. Saat thread terbuka, matikan filter itu supaya layout layar penuh bekerja seperti yang dirancang di admin.css. */
@media(max-width:820px){.chat.open{-webkit-backdrop-filter:none;backdrop-filter:none}}