/* R141 web141media: penampil video/audio/gambar dan gambar mini. Dimuat sesudah aset 140.
   Kelas baru berakhiran 141 (vwrap141, vbar141, timed141, wave141, strip141, thumb141, ...). Token warna dari tokens132/web133. */

/* ---------- video: bilah kontrol sendiri (papan web-video) ---------- */
/* Kontrol lama (Kecepatan, ±10, PiP, layar penuh, Asli Np, Melanjutkan dari) tetap di DOM dan tetap tersinkron;
   fungsinya kini ada di bilah di atas video, jadi baris alat video disembunyikan selama bilah aktif. */
body:not(.console-page) #dialog.video141 #preview-tools:has(#media-speed134){display:none}
body:not(.console-page) #dialog.video141 #preview-content{display:flex;flex-direction:column;justify-content:center;gap:14px}
body:not(.console-page) #dialog.video141 #preview-note{width:100%;max-width:880px;align-self:center}
body:not(.console-page) #dialog .vwrap141{position:relative;width:100%;max-width:880px;margin:0 auto;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.45);line-height:normal}
body:not(.console-page) #dialog .vwrap141 video.media-preview{display:block;width:100%;max-height:calc(100vh - 210px);min-height:240px;margin:0;border:0;border-radius:0;background:#000;object-fit:contain;cursor:pointer}
body:not(.console-page) #dialog .vwrap141 [hidden]{display:none!important}
body:not(.console-page) .vwrap141:fullscreen{max-width:none;width:100%;height:100%;border-radius:0;display:flex;align-items:center;justify-content:center}
body:not(.console-page) .vwrap141:fullscreen video.media-preview{max-height:100vh;height:100%}
body:not(.console-page) #dialog .resume141{position:absolute;left:16px;top:14px;z-index:2;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.5);color:#FFFFFF;font-size:13px;font-weight:700}
body:not(.console-page) .vbar141{position:absolute;left:0;right:0;bottom:0;z-index:2;box-sizing:border-box;padding:40px 18px 12px;background:linear-gradient(transparent,rgba(5,9,14,.85));display:flex;flex-direction:column;gap:8px;color:#FFFFFF;font-family:inherit}
body:not(.console-page) .vbar141 .track141{position:relative;height:16px;display:flex;align-items:center}
body:not(.console-page) .vbar141 .track141::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
body:not(.console-page) .vbar141 .buf141{position:absolute;left:0;width:var(--b141,0%);height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
body:not(.console-page) .vbar141 input[type=range]{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
body:not(.console-page) .vbar141 .seek141{position:relative;z-index:1;width:100%;height:16px}
body:not(.console-page) .vbar141 .seek141::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--stage-accent,#42BCFA),var(--stage-accent,#42BCFA)) 0 0/var(--p141,0%) 100% no-repeat}
body:not(.console-page) .vbar141 .seek141::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#FFFFFF}
body:not(.console-page) .vbar141 .seek141::-moz-range-track{height:4px;background:transparent}
body:not(.console-page) .vbar141 .seek141::-moz-range-progress{height:4px;border-radius:2px;background:var(--stage-accent,#42BCFA)}
body:not(.console-page) .vbar141 .seek141::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#FFFFFF}
body:not(.console-page) .vbar141 .marks141{position:absolute;left:0;right:0;top:-10px;height:16px;pointer-events:none;z-index:2}
body:not(.console-page) .vbar141 .mark141{position:absolute;top:0;width:16px;height:16px;margin-left:-8px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;cursor:pointer}
body:not(.console-page) .vbar141 .mark141::before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#F2C26B}
body:not(.console-page) .vbar141 .row141{display:flex;align-items:center;gap:4px;min-width:0}
body:not(.console-page) .vbar141 .vb141{width:40px;height:40px;flex:0 0 auto;padding:0;border:0;border-radius:999px;background:transparent;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
body:not(.console-page) .vbar141 .vb141:hover,body:not(.console-page) .vbar141 .pill141:hover{background:rgba(255,255,255,.12)}
body:not(.console-page) .vbar141 .vb141 svg{width:20px;height:20px}
body:not(.console-page) .vbar141 [data-v141=play] svg{width:22px;height:22px}
body:not(.console-page) .vbar141 .vol141{width:70px;height:16px;flex:0 0 auto}
body:not(.console-page) .vbar141 .vol141::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(#FFFFFF,#FFFFFF) 0 0/var(--v141,100%) 100% no-repeat,rgba(255,255,255,.3)}
body:not(.console-page) .vbar141 .vol141::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:#FFFFFF}
body:not(.console-page) .vbar141 .vol141::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.3)}
body:not(.console-page) .vbar141 .vol141::-moz-range-progress{height:4px;border-radius:2px;background:#FFFFFF}
body:not(.console-page) .vbar141 .vol141::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#FFFFFF}
body:not(.console-page) .vbar141 .time141{margin-left:10px;font-size:13px;font-weight:600;white-space:nowrap}
body:not(.console-page) .vbar141 .time141 b{font-weight:600}
body:not(.console-page) .vbar141 .time141 span{color:rgba(255,255,255,.7)}
body:not(.console-page) .vbar141 .right141{margin-left:auto;display:flex;align-items:center;gap:4px;min-width:0}
body:not(.console-page) .vbar141 .pill141{height:32px;box-sizing:border-box;padding:0 16px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#FFFFFF;font:700 13px/1 inherit;font-family:inherit;display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer}
body:not(.console-page) .vbar141 .res141{cursor:default}
body:not(.console-page) .vbar141 .res141:hover{background:transparent}
body:not(.console-page) .vbar141 .pill141[aria-pressed=true]{background:#FFFFFF;color:#0C1E2D;border-color:#FFFFFF}
body:not(.console-page) .vbar141 button:focus-visible,body:not(.console-page) .vbar141 input:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width:640px){
 /* Di layar sempit bilah berada di bawah video agar gambar tidak tertutup. */
 body:not(.console-page) #dialog .vwrap141 video.media-preview{min-height:0}
 body:not(.console-page) .vbar141{position:static;padding:8px 10px 6px;background:#05090E}
 body:not(.console-page) .vwrap141:fullscreen .vbar141{position:absolute;background:linear-gradient(transparent,rgba(5,9,14,.85))}
 body:not(.console-page) .vbar141 .vol141,body:not(.console-page) .vbar141 .res141{display:none}
 body:not(.console-page) .vbar141 .row141{flex-wrap:wrap}
 body:not(.console-page) .vbar141 .pill141{padding:0 10px}
}

/* ---------- panel: komentar berwaktu (Hub), fakta video, penanda waktu ---------- */
body:not(.console-page) #dialog #preview-info134 .timed141{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
body:not(.console-page) #dialog #preview-info134 .timed141 h4{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
body:not(.console-page) #dialog #preview-info134 .timed141 h4 span{margin-left:4px;font-weight:600;color:var(--muted)}
body:not(.console-page) #dialog #preview-info134 .tlist141{display:flex;flex-direction:column;gap:14px}
body:not(.console-page) #dialog #preview-info134 .tc141{display:flex;gap:10px;margin:0;padding:0;border:0;background:none}
body:not(.console-page) #dialog #preview-info134 .face141{width:32px;height:32px;flex:0 0 auto;border-radius:50%;background:var(--video,#EDE6FA);color:var(--video-ink,#5A2E8C);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
body:not(.console-page) #dialog #preview-info134 .tc141>div{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.45;color:var(--ink)}
body:not(.console-page) #dialog #preview-info134 .tc141 p{margin:0;overflow-wrap:anywhere}
body:not(.console-page) #dialog #preview-info134 .tc141.done141 p{color:var(--muted)}
body:not(.console-page) #dialog #preview-info134 .at141{padding:0;border:0;background:none;color:var(--link);font:inherit;font-weight:700;cursor:pointer}
body:not(.console-page) #dialog #preview-info134 .muted141{margin:0;color:var(--muted);font-size:13px}
body:not(.console-page) #dialog #preview-info134 .say141{display:flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 6px 0 14px;border:1px solid var(--line-2);border-radius:22px;background:var(--surface)}
body:not(.console-page) #dialog #preview-info134 .say141:focus-within{border-color:var(--accent)}
body:not(.console-page) #dialog #preview-info134 .say141 label{flex:1;min-width:0;display:flex;margin:0}
body:not(.console-page) #dialog #preview-info134 .say141 input{flex:1;min-width:0;height:40px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;box-shadow:none}
body:not(.console-page) #dialog #preview-info134 .say141 button{width:34px;height:34px;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer}
body:not(.console-page) #dialog #preview-info134 .say141 button svg{width:16px;height:16px}
body:not(.console-page) #dialog #preview-info134 .say141[aria-busy=true]{opacity:.6}
body:not(.console-page) #dialog #preview-info134 .sr141{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:not(.console-page) #dialog #preview-info134 .err141{margin:0;font-size:13px;color:var(--danger-ink)}
body:not(.console-page) #dialog #preview-info134 .err141:empty{display:none}
body:not(.console-page) #dialog .old141{display:none}
body:not(.console-page) #dialog .preview-tabs134 [data-preview-tab=Komentar]:has(.count141) .count139{display:none}
body:not(.console-page) #dialog .preview-tabs134 .count141{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--soft);color:var(--soft-ink);font-size:11px;font-weight:700}
body:not(.console-page) #dialog #preview-info134 .vfacts141{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;color:var(--ink)}
body:not(.console-page) #dialog #preview-info134 .vfacts141 .k141{color:var(--muted)}
body:not(.console-page) #dialog #preview-info134 .vfacts141>span{min-width:0;overflow-wrap:anywhere}
body:not(.console-page) #dialog #preview-info134 .ok141{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--ok);color:var(--ok-ink);font-size:13px;font-weight:700}
body:not(.console-page) #dialog #preview-info134 .marklist141{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:13px}
body:not(.console-page) #dialog #preview-info134 .marklist141 h4{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
body:not(.console-page) #dialog #preview-info134 .pm141{display:flex;gap:10px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
body:not(.console-page) #dialog #preview-info134 .pm141 b{width:44px;flex:0 0 auto;color:var(--link);font-weight:700}
body:not(.console-page) #dialog #preview-info134 .pm141:hover span{text-decoration:underline}

/* ---------- audio: gelombang suara dan berikutnya di folder (papan web-audio) ---------- */
body:not(.console-page) #dialog .player139.tagged141 .meta139 strong:not(.tag141){display:none}
body:not(.console-page) #dialog .wave141{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
body:not(.console-page) #dialog .wave141 .bars141{width:100%;height:64px;cursor:pointer}
body:not(.console-page) #dialog .wave141 .bars141:empty{display:none}
body:not(.console-page) #dialog .wave141 svg{display:block;width:100%;height:64px}
body:not(.console-page) #dialog .wave141 rect{fill:rgba(255,255,255,.28)}
body:not(.console-page) #dialog .wave141 rect.on141{fill:var(--stage-accent,#42BCFA)}
body:not(.console-page) #dialog .wave141 .times141{display:flex;justify-content:space-between;font-size:13px;color:var(--stage-muted)}
body:not(.console-page) #dialog .wave141 .bars141:empty+.times141{display:none}
body:not(.console-page) #dialog .wave141 .wnote141{margin:0;font-size:13px;color:var(--stage-muted)}
body:not(.console-page) #dialog .wave141 .wnote141:empty{display:none}
body:not(.console-page) #dialog .wload141{height:34px;padding:0 16px;border:1px solid var(--stage-line);border-radius:999px;background:transparent;color:var(--stage-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
body:not(.console-page) #dialog .next141{width:100%;max-width:640px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;color:var(--stage-ink)}
body:not(.console-page) #dialog .next141>b{font-size:14px;font-weight:700}
body:not(.console-page) #dialog .next141 button{min-height:52px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--stage-ink);font:inherit;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}
body:not(.console-page) #dialog .next141 button:hover{background:rgba(255,255,255,.06)}
body:not(.console-page) #dialog .next141 .file-type{width:32px;height:32px;min-width:32px;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
body:not(.console-page) #dialog .next141 .nm141{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.console-page) #dialog .next141 .du141{font-size:13px;color:var(--stage-muted)}

/* ---------- gambar: 100%, tayangan slide, strip, unduh sebagai (papan web-gambar) ---------- */
body:not(.console-page) #dialog .preview-pager .sep141{width:1px;height:22px;margin:0 4px;background:var(--stage-line)}
body:not(.console-page) #dialog #slide141{width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
body:not(.console-page) #dialog #slide141 svg{width:18px;height:18px}
body:not(.console-page) #dialog #slide141[hidden]{display:none}
body:not(.console-page) #dialog #slide141[aria-pressed=true],body:not(.console-page) #dialog #image-actual141[aria-pressed=true]{background:rgba(255,255,255,.12)}
body:not(.console-page) #dialog .strip141{order:2;align-self:center;max-width:100%;display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:thin}
body:not(.console-page) #dialog .strip141 button{width:72px;height:50px;flex:0 0 auto;padding:0;border:0;border-radius:8px;background:var(--stage-2);color:var(--stage-muted);font:700 11px/1 inherit;font-family:inherit;opacity:.7;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
body:not(.console-page) #dialog .strip141 button:hover{opacity:1}
body:not(.console-page) #dialog .strip141 button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--stage-accent,#42BCFA)}
body:not(.console-page) #dialog .strip141 img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.console-page) #dialog .dlm141{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
body:not(.console-page) #dialog .dlm141 h4{margin:0;font-size:13px;font-weight:700;color:var(--ink)}
body:not(.console-page) #dialog .dlm141>div{display:flex;gap:8px}
body:not(.console-page) #dialog #preview-info134 .dlm141 .btn{flex:1;height:40px;min-height:40px;padding:0 10px;border-radius:999px;font-size:13px;justify-content:center;white-space:nowrap}
body:not(.console-page) #dialog #preview-info134 .dlm141 a.dlo141{border:0;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;display:inline-flex;align-items:center}
body:not(.console-page) #dialog #preview-info134 .dlm141 button.dls141{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600}
body:not(.console-page) #dialog .dlm141 .dls141[hidden]{display:none}
body:not(.console-page) #dialog .dlm141 .dln141{margin:0;font-size:13px;color:var(--muted)}
body:not(.console-page) #dialog .dlm141 .dln141:empty{display:none}

/* ---------- petak: gambar mini dan durasi video (papan web-terbaru) ---------- */
body:not(.console-page)[data-page=recent] .file-tile.thumbed141 img.thumb141{grid-column:1/-1;grid-row:1;position:absolute;left:0;top:0;width:100%;height:128px;object-fit:cover;display:block;border-radius:19px 19px 0 0;background:var(--surface-2)}
body:not(.console-page) .file-tile .file-type.thumbed141{position:relative;overflow:hidden;color:transparent}
body:not(.console-page) .file-tile .file-type.thumbed141 img.thumb141{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body:not(.console-page) .file-tile .dur141{position:absolute;right:10px;top:96px;z-index:1;padding:2px 8px;border-radius:6px;background:rgba(5,9,14,.72);color:#FFFFFF;font-size:12px;font-weight:700;pointer-events:none}
body:not(.console-page):not([data-page=recent]) .file-tile{position:relative}
body:not(.console-page):not([data-page=recent]) .file-tile .dur141{top:auto;bottom:10px}