/* File: public/pwa/xpose.css, Tanggal: 2026-10-22 */
/* =============================================
   Deskripsi: Style Xpose PWA — feed flat, story ring, FAB kotak, viewer, bottom sheet, UI trim video
   Tanggal: 2026-10-22
   Catatan: warna tema (list, teks, FAB, badge, avatar, ring) 100% dari tokens.css agar ikut light/dark global.
   Viewer (hitam) + overlay sheet + UI trim video sengaja hardcode hitam/putih (mode edit media fullscreen).
   Story ring: segmen SVG (stroke gradient dari xpose.js) + keyframe ring-pulse (style.css).
   Revisi: 2026-10-20 (UI-2b) — feed flat tanpa card, avatar lebih besar, FAB kotak membulat, progress bar viewer putih.
   Revisi: 2026-10-20 (UI-2c) — hijau WA dihapus; ring baru = gradient biru-oranye, FAB kamera = var(--primary),
           FAB teks netral (var(--surface)), ring seen = var(--text-tertiary).
   Revisi: 2026-10-20 (UI-2d) — list #0e1621, teks #ffffff, ring baru ungu #8774e1, FAB kamera #8774e1, FAB teks #242f3d.
   Revisi: 2026-10-21 (S-11) — hapus hardcode Telegram Dark (#0e1621/#8774e1/#242f3d/#aebac1/#a89bf2/#ffffff);
           ganti ke token: --bg, --surface, --text-primary, --text-secondary, --primary, --on-primary,
           --primary-text, --shadow-md. Hover/active row pakai color-mix dari --text-primary (terlihat di light & dark).
   Revisi: 2026-10-21 (S-12) — tambah section TRIM (.pwa-trim-*): overlay filmstrip, jendela seleksi, handle, dim,
           playhead, tombol Batal/Lanjut. Port dari xpose-cam.css Mini App, semua warna via token.
   Revisi: 2026-10-22 (S-13) — section TRIM didesain ulang gelap ala WA Status/IG Story: background #000, teks putih,
           filmstrip tipis, jendela seleksi = frame putih tipis, handle bulat putih di tepi, playhead putih tipis,
           info (durasi/ukuran) berbentuk pill, tombol Lanjut putih teks hitam. Tidak ada var(--primary) di section ini.
   Revisi: 2026-10-22 (S-14) — tambah section PREVIEW/CAPTION POST (.pwa-xp-prev): layar hitam, media object-fit contain,
           tombol X transparan gelap, bar blur, caption kapsul, tombol kirim bulat. Selector dibatasi ke .pwa-xp-prev
           supaya mode teks (.pwa-xp-text) yang berbagi class .pwa-xp-overlay/.pwa-xp-head/.pwa-xp-btn tidak berubah.
   Revisi: 2026-10-22 (S-14d) — VIEWER full-screen: media absolute inset 0 (contain, width/height 100%), bars/head/foot menumpuk
           di atas (z-index 2), foot margin-top:auto, scrim gradien tipis atas/bawah. Sebelumnya media hanya sisa ruang flex.
   Revisi: 2026-10-22 (S-14c) — tombol X di kanan atas (trim + preview); tombol kirim pakai var(--primary)/var(--on-primary) (ikut tema).
   Revisi: 2026-10-22 (S-14b) — layout full-screen ala WA Status untuk TRIM dan PREVIEW: media memenuhi layar (contain, hitam),
           tombol X/strip/pill info menumpuk di atas, kolom caption kapsul gelap + baris bawah dengan tombol kirim hijau.
   ============================================= */

@keyframes xpose-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ===== FEED ===== */
.pwa-xpose-defs{position:absolute;width:0;height:0;overflow:hidden}
.pwa-xpose-list{display:flex;flex-direction:column;margin-bottom:calc(var(--space-12) + var(--space-6));overflow:hidden;background:var(--bg);color:var(--text-primary);border:0;border-radius:0;box-shadow:none;animation:fade-in var(--motion-base) var(--easing-decelerate) backwards}
.pwa-xpose-section{padding:var(--space-3) var(--space-4) var(--space-2);background:var(--bg);color:var(--text-secondary);font-size:var(--fs-13);font-weight:var(--fw-700);letter-spacing:.04em;text-transform:uppercase}
.pwa-xpose-row{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:calc(var(--space-12) + var(--space-8));padding:var(--space-2) var(--space-4);background:none;border:0;color:inherit;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--motion-fast) var(--easing-standard)}
.pwa-xpose-row:active{background:color-mix(in srgb,var(--text-primary) 6%,transparent);transform:none}
@media (hover:hover){.pwa-xpose-row:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}}
.pwa-xpose-avwrap{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--size-avatar) + var(--space-2));height:calc(var(--size-avatar) + var(--space-2))}
.pwa-xpose-ring{position:absolute;inset:0;pointer-events:none}
.pwa-xpose-ring.new{animation:ring-pulse 2.4s var(--easing-standard) infinite}
.pwa-xpose-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.pwa-xpose-seg-new,.pwa-xpose-ring circle[stroke]{stroke:var(--primary)}
.pwa-xpose-seg-seen{stroke:var(--text-tertiary)}
.pwa-xpose-av{flex:none;display:flex;align-items:center;justify-content:center;width:calc(var(--size-avatar) - var(--space-1));height:calc(var(--size-avatar) - var(--space-1));border-radius:var(--radius-full);object-fit:cover;background:var(--primary);color:var(--on-primary);font-size:var(--fs-17);font-weight:var(--fw-600)}
.pwa-xpose-badge{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;width:var(--space-5);height:var(--space-5);border-radius:var(--radius-full);background:var(--primary);border:2px solid var(--bg);color:var(--on-primary);font-size:var(--fs-14);font-weight:var(--fw-700);line-height:1;box-shadow:none}
.pwa-xpose-rowtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwa-xpose-rowtxt b{font-size:var(--fs-16);font-weight:var(--fw-600);line-height:var(--lh-heading);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwa-xpose-rowtxt small{font-size:var(--fs-13);color:var(--text-secondary)}
.pwa-xpose-row.has-new .pwa-xpose-rowtxt b{font-weight:var(--fw-800)}
.pwa-xpose-row.has-new .pwa-xpose-rowtxt small{color:var(--primary-text);font-weight:var(--fw-600)}
.pwa-xpose-empty{padding:var(--space-6) var(--space-4);text-align:center;font-size:var(--fs-14);color:var(--text-secondary)}
.pwa-xpose-more{min-height:var(--space-12);border:0;background:none;color:var(--primary-text);font-size:var(--fs-15);font-weight:var(--fw-600);cursor:pointer}
.pwa-xpose-skrow{display:flex;align-items:center;gap:var(--space-4);min-height:calc(var(--space-12) + var(--space-8));padding:var(--space-2) var(--space-4)}
.pwa-xpose-sk-av{flex:none;width:calc(var(--size-avatar) + var(--space-2));height:calc(var(--size-avatar) + var(--space-2));border-radius:var(--radius-full)}
.pwa-xpose-sk-lines{flex:1;display:flex;flex-direction:column;gap:var(--space-2)}
.pwa-xpose-sk-l{width:55%;height:var(--space-3)}
.pwa-xpose-sk-l.s{width:30%}

/* ===== FAB ===== */
.pwa-xpose-fab{position:fixed;right:var(--space-4);bottom:calc(var(--nav-h) + var(--safe-bottom) + var(--space-4));z-index:15;display:flex;flex-direction:column;gap:var(--space-3)}
.pwa-xpose-fab button{display:flex;align-items:center;justify-content:center;width:calc(var(--space-12) + var(--space-1));height:calc(var(--space-12) + var(--space-1));border:0;border-radius:var(--radius-lg);background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-md);cursor:pointer}
.pwa-xpose-fab button svg{display:block;pointer-events:none}
.pwa-xpose-fab button:last-child{background:var(--primary);color:var(--on-primary)}

/* ===== VIEWER ===== */
.pwa-xpose-viewer{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#000;color:#fff;-webkit-user-select:none;user-select:none;animation:fade-in var(--motion-base) linear backwards}
/* scrim tipis atas/bawah supaya header & tombol tetap terbaca di atas video terang */
.pwa-xpose-viewer::before,.pwa-xpose-viewer::after{content:"";position:absolute;left:0;right:0;z-index:1;height:calc(var(--safe-top) + var(--space-12) * 2);pointer-events:none}
.pwa-xpose-viewer::before{top:0;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.pwa-xpose-viewer::after{bottom:0;height:calc(var(--safe-bottom) + var(--space-12) * 2);background:linear-gradient(transparent,rgba(0,0,0,.55))}
.pwa-xpose-bars{position:relative;z-index:2;flex:none;display:flex;gap:var(--space-1);padding:calc(var(--safe-top) + var(--space-2)) var(--space-2) 0}
.pwa-xpose-bars i{flex:1;height:var(--space-1);border-radius:var(--radius-full);background:rgba(255,255,255,.3);overflow:hidden}
.pwa-xpose-bars b{display:block;height:100%;width:0;border-radius:var(--radius-full);background:#fff}
.pwa-xpose-head{position:relative;z-index:2;flex:none;display:flex;align-items:center;gap:var(--space-3);min-height:calc(var(--space-12) + var(--space-2));padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3)}
.pwa-xpose-head .pwa-xpose-av{width:var(--space-10);height:var(--space-10);font-size:var(--fs-15);border:2px solid rgba(255,255,255,.7)}
.pwa-xpose-hinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.pwa-xpose-hinfo b{font-size:var(--fs-15);font-weight:var(--fw-700)}
.pwa-xpose-hinfo small{font-size:var(--fs-12);opacity:.75}
.pwa-xpose-x{flex:none;width:var(--tap-min);height:var(--tap-min);border:0;border-radius:var(--radius-full);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:var(--fs-20);cursor:pointer}
.pwa-xpose-media{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.pwa-xpose-media img,.pwa-xpose-media video,.pwa-xpose-text{animation:fade-in var(--motion-base) var(--easing-decelerate) backwards}
.pwa-xpose-media img,.pwa-xpose-media video{display:block;width:100%;height:100%;object-fit:contain}
.pwa-xpose-text{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--space-8);text-align:center;font-size:var(--fs-24);font-weight:var(--fw-700);line-height:var(--lh-heading);white-space:pre-wrap;word-break:break-word;background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.pwa-xpose-cap{z-index:2;position:absolute;left:var(--space-4);right:var(--space-4);bottom:calc(var(--safe-bottom) + var(--space-12) * 2 - var(--space-2));padding:var(--space-3) var(--space-4);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);font-size:var(--fs-15);line-height:var(--lh-body);text-align:center;white-space:pre-wrap;word-break:break-word;pointer-events:none}
.pwa-xpose-tap{z-index:1;position:absolute;top:calc(var(--safe-top) + var(--space-12) * 2);bottom:calc(var(--safe-bottom) + var(--space-12) * 2);width:50%}
.pwa-xpose-tap.l{left:0}
.pwa-xpose-tap.r{right:0}
.pwa-xpose-foot{position:relative;z-index:2;margin-top:auto;flex:none;display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--safe-bottom) + var(--space-4))}
.pwa-xpose-foot button{min-height:var(--space-12);padding:0 var(--space-6);border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-full);background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:var(--fs-15);font-weight:var(--fw-600);cursor:pointer}
.pwa-xpose-foot button.danger{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 40%,transparent)}

/* ===== SHEET (balas + dilihat oleh) ===== */
.pwa-xpose-sheet-back{position:fixed;left:0;right:0;top:0;height:100%;z-index:310;display:flex;align-items:flex-end;background:rgba(15,23,42,.5);animation:fade-in var(--motion-fast) linear backwards}
.pwa-xpose-sheet-back.v{z-index:311}
.pwa-xpose-sheet{width:100%;max-height:75%;overflow-y:auto;padding:0 var(--space-4) calc(var(--safe-bottom) + var(--space-4));border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-lg);animation:xpose-sheet-up var(--motion-slow) var(--easing-decelerate) backwards}
.pwa-xpose-grab{display:flex;justify-content:center;padding:var(--space-3) 0 var(--space-2);touch-action:none;cursor:grab}
.pwa-xpose-handle{width:var(--space-10);height:var(--space-1);border-radius:var(--radius-full);background:var(--text-tertiary);opacity:.6}
.pwa-xpose-sheet-title{margin-bottom:var(--space-3);font-size:var(--fs-17);font-weight:var(--fw-700)}
.pwa-xpose-ta{width:100%;min-height:90px;resize:none;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text-primary);font:inherit;font-size:var(--fs-16);outline:none;-webkit-user-select:text;user-select:text;transition:border-color var(--motion-fast) var(--easing-standard),box-shadow var(--motion-fast) var(--easing-standard)}
.pwa-xpose-ta:focus{border-color:var(--primary);box-shadow:var(--glow-primary)}
.pwa-xpose-count{margin-top:var(--space-1);font-size:var(--fs-12);text-align:right;color:var(--text-secondary)}
.pwa-xpose-sheet-btns{display:flex;gap:var(--space-3);margin-top:var(--space-3)}
.pwa-xpose-sheet-btns button{flex:1;min-height:var(--space-12);border:0;border-radius:var(--radius-md);background:var(--bg);color:var(--primary-text);font-size:var(--fs-16);font-weight:var(--fw-600);cursor:pointer}
.pwa-xpose-sheet-btns button.primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-md)}
.pwa-xpose-sheet-btns button:disabled{opacity:.5}
.pwa-xpose-vrow{display:flex;align-items:center;gap:var(--space-3);min-height:calc(var(--space-12) + var(--space-2))}
.pwa-xpose-vrow .pwa-xpose-av{width:var(--space-12);height:var(--space-12)}
.pwa-xpose-vchat{flex:none;width:var(--tap-min);height:var(--tap-min);border:0;border-radius:var(--radius-full);background:var(--gradient-soft),var(--bg);font-size:var(--fs-20);cursor:pointer}

/* ===== TOAST ===== */
.pwa-xpose-toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + var(--space-12) * 2);transform:translateX(-50%);z-index:400;max-width:88%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);background:var(--text-primary);color:var(--surface);font-size:var(--fs-14);text-align:center;box-shadow:var(--shadow-lg)}

/* ===== TRIM VIDEO (S-14b) — full-screen ala WA Status; hardcode hitam/putih (mode edit media) ===== */
.pwa-trim-overlay{position:fixed;inset:0;z-index:1000;background:#000;color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none;animation:fade-in var(--motion-base) var(--easing-decelerate) backwards}
.pwa-trim-stage{position:absolute;inset:0;z-index:0;background:#000}
.pwa-trim-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.pwa-trim-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-13);color:rgba(255,255,255,.6);pointer-events:none}
.pwa-trim-spin[hidden]{display:none}

/* lapisan atas: tombol X, filmstrip, pill info (menumpuk di atas video) */
.pwa-trim-top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;padding-top:var(--safe-top);pointer-events:none}
.pwa-trim-head{flex:none;display:flex;align-items:center;justify-content:flex-end;padding:8px 16px}
.pwa-trim-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(32,32,32,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.pwa-trim-strip-wrap{flex:none;padding:4px 18px 0}
.pwa-trim-strip{position:relative;height:48px;border-radius:4px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.18);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;pointer-events:auto}
.pwa-trim-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:4px}
.pwa-trim-dim{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.6);pointer-events:none}
.pwa-trim-dim-l{left:0;width:0}
.pwa-trim-dim-r{right:0;width:0}
.pwa-trim-win{position:absolute;top:0;bottom:0;left:0;width:100%;box-sizing:border-box;border:3px solid #fff;border-radius:3px;touch-action:none}
.pwa-trim-h{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);touch-action:none}
.pwa-trim-h-l{left:-14px}
.pwa-trim-h-r{right:-14px}
.pwa-trim-h::before{content:"";position:absolute;top:-16px;bottom:-16px;left:-16px;right:-16px} /* area sentuh lebih luas, tidak terlihat */
.pwa-trim-ph{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 2px rgba(0,0,0,.6);pointer-events:none}
.pwa-trim-info{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 0}
.pwa-trim-range,.pwa-trim-meta{margin:0;padding:5px 12px;border-radius:999px;background:rgba(32,32,32,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--fs-13);line-height:1.3}
.pwa-trim-range{color:#fff;font-weight:var(--fw-600)}
.pwa-trim-meta{color:rgba(255,255,255,.8)}
.pwa-trim-meta.warn{color:#fbbf24}

/* lapisan bawah: kolom caption kapsul + baris tombol kirim */
.pwa-trim-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column}
.pwa-trim-cap,.pwa-xp-prev .pwa-xp-cap{display:block;box-sizing:border-box;width:calc(100% - 24px);min-height:52px;max-height:120px;margin:0 12px 8px;padding:14px 18px;border:none;border-radius:26px;background:rgba(17,27,33,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:inherit;font-size:17px;line-height:1.35;resize:none;outline:none;overflow-y:auto;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.pwa-trim-cap::placeholder,.pwa-xp-prev .pwa-xp-cap::placeholder{color:rgba(255,255,255,.6)}
.pwa-trim-row,.pwa-xp-prev .pwa-xp-sendrow{display:flex;align-items:center;justify-content:flex-end;padding:10px 16px calc(var(--safe-bottom) + 10px);background:#0b141a}
.pwa-trim-send,.pwa-xp-prev .pwa-xp-sendbtn{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--primary);color:var(--on-primary);cursor:pointer}
.pwa-trim-send:active,.pwa-xp-prev .pwa-xp-sendbtn:active{opacity:.8}
.pwa-trim-send:disabled,.pwa-xp-prev .pwa-xp-sendbtn:disabled{opacity:.5}

/* video tersembunyi untuk ekstraksi frame filmstrip (harus tetap "tampil" agar browser mobile decode) */
.pwa-trim-sv{position:absolute;left:0;top:0;width:48px;height:86px;opacity:.02;pointer-events:none;z-index:-1}

/* ===== PREVIEW / CAPTION POST (S-14b) — foto/kamera/WebM; gaya sama dengan trim; selector dibatasi ke .pwa-xp-prev ===== */
.pwa-xp-overlay.pwa-xp-prev{position:fixed;left:0;right:0;top:0;bottom:0;background:#000 !important;color:#fff;overflow:hidden}
.pwa-xp-overlay.pwa-xp-prev .pwa-xp-media{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.pwa-xp-prev .pwa-xp-media img,.pwa-xp-prev .pwa-xp-media video{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain !important;background:#000}
.pwa-xp-overlay.pwa-xp-prev .pwa-xp-head{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;padding:calc(var(--safe-top) + 8px) 16px 8px;background:none;pointer-events:none}
.pwa-xp-prev .pwa-xp-head .pwa-xp-btn{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(32,32,32,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.pwa-xp-overlay.pwa-xp-prev .pwa-xp-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;padding:0;background:none;border:0}