/* Tombol pengambilan selalu melekat pada bingkai kamera, bukan pada halaman. */
#panel-isi .kamera-live{position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:480px;height:min(66vh,640px);height:min(66svh,640px);min-height:260px;max-height:none;overflow:hidden;margin:12px auto;border-radius:12px;background:#101827}
#panel-isi .kamera-live[hidden]{display:none}
#panel-isi .kamera-live video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#panel-isi .kamera-live video[hidden]{display:none}
#panel-isi .kamera-live::after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none;z-index:1}
#panel-isi .kamera-live .kamera-capture{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;box-sizing:border-box;width:calc(100% - 20px);min-height:44px;margin:0;padding:10px 12px;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:#fff;color:#17365c;font:700 12px/1.3 Lexend,Arial,sans-serif;box-shadow:0 2px 12px rgba(0,0,0,.2);white-space:normal;touch-action:manipulation}
#panel-isi .kamera-live .kamera-capture:disabled{opacity:.65;cursor:wait}
#panel-isi .kamera-live .kamera-capture[hidden]{display:none}
#panel-isi .kamera-live .kamera-capture:focus-visible{outline:3px solid #57a6ff;outline-offset:-4px}
#panel-isi .kamera-tanpa-video{width:100%;height:auto;min-height:0;aspect-ratio:auto;background:transparent;overflow:visible}
#panel-isi .kamera-tanpa-video::after{display:none}
#panel-isi .kamera-tanpa-video .kamera-capture{position:static;width:100%;background:#1f3864;color:#fff}
@media print{.kamera-live{display:none!important}}

#panel-isi .kamera-hasil{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101827;z-index:1}
#panel-isi .kamera-hasil[hidden]{display:none}
#panel-isi .kamera-status{position:absolute;z-index:3;left:10px;right:10px;top:10px;margin:0;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1.4 Lexend,Arial,sans-serif;pointer-events:none}
#panel-isi .kamera-ulang{position:absolute;z-index:3;right:10px;bottom:68px;padding:8px 12px;background:#fff;color:#17365c;border:0;border-radius:20px;touch-action:manipulation}
#panel-isi .kamera-tanpa-video .kamera-status{position:static;margin-bottom:8px}
#panel-isi .kamera-live .kamera-capture{z-index:4;pointer-events:auto;cursor:pointer}

/* Absensi: layar penuh portrait; tangkapan mengikuti area video yang terlihat. */
#panel-isi .absen-kamera.kamera-live:not(.kamera-tanpa-video){width:100%;max-width:min(480px,54vh);max-width:min(480px,54svh);height:auto;min-height:0;aspect-ratio:3/4}
#panel-isi .absen-kamera.kamera-live video{object-fit:cover;object-position:center}
#panel-isi .absen-kamera .kamera-hasil{object-fit:contain;object-position:center}

/* Absensi ringkas: informasi hanya di dalam bingkai, tanpa paragraf ganda. */
#panel-isi .absen-kamera.kamera-live:not(.kamera-tanpa-video){max-width:min(480px,61.5vh);max-width:min(480px,61.5svh)}
#panel-isi .absen-kamera .ab-info{position:absolute;z-index:3;top:9px;left:9px;right:9px;padding:7px 10px;background:rgba(10,17,29,.72);border-radius:10px;color:#fff;font:600 12px/1.35 Lexend,Arial,sans-serif;pointer-events:none}
#panel-isi .absen-kamera .ab-info p{margin:0;line-height:1.35;color:inherit;font-size:inherit}
#panel-isi .absen-kamera .ab-info p+p:not([hidden]){margin-top:3px}
#panel-isi .absen-kamera .ab-info .ab-peringatan{color:#ffe09b}
#panel-isi .absen-kamera #ab-status{max-height:3.9em;overflow:auto;pointer-events:auto;font-size:11px;font-weight:500}
#panel-isi .absen-kamera #ab-ulang{pointer-events:auto;width:auto;margin:5px 0 0;padding:5px 9px;min-height:28px;background:#fff;color:#17365c;font-size:11px}
#panel-isi>.ab-alasan{box-sizing:border-box;background:#f6f8fb;color:#17365c;border:1px solid #d6deea;border-radius:9px;padding:8px;margin:12px 0 0}
#panel-isi>.ab-alasan[hidden],#panel-isi .absen-kamera .ab-info [hidden]{display:none}
#panel-isi>.ab-alasan label{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 0 3px;font-size:11px;font-weight:600;line-height:1.25}
#panel-isi>.ab-alasan #ab-ket-sisa{font-size:10px;font-weight:400;white-space:nowrap}
#panel-isi>.ab-alasan #ab-ket{display:block;box-sizing:border-box;width:100%;margin:0;padding:6px 8px;min-height:34px;height:34px;max-height:54px;resize:none;border:1px solid #c7d2e2;border-radius:6px;font:400 12px/1.35 Lexend,Arial,sans-serif;color:#17365c;background:#fff}
#panel-isi .absen-kamera #ab-foto-ulang{top:auto;bottom:74px;padding:6px 10px;font-size:11px;min-height:28px}
#panel-isi .absen-kamera .kamera-capture{min-height:48px;font-size:12px}
@media(max-width:600px){#panel-isi:has(>.absen-kamera){margin-left:-8px;margin-right:-8px}#panel-isi:has(>.absen-kamera)>h2{margin-bottom:10px;font-size:20px}}


#panel-isi .absen-kamera #ab-gps{max-height:3.9em;overflow:auto;pointer-events:auto;font-size:11px}

#panel-isi .absen-kamera #ab-foto-ulang{z-index:5;pointer-events:auto;cursor:pointer;bottom:74px}
#panel-isi .absen-kamera .ab-info #ab-gps.ab-area-luar{color:#ff9999}
#panel-isi .absen-kamera .ab-info #ab-gps.ab-area-dalam{color:#8df0ad}
@media(max-width:600px){#panel-isi .absen-kamera.kamera-live:not(.kamera-tanpa-video){max-width:none;width:100%;height:calc(100dvh - 180px);min-height:300px;aspect-ratio:auto;margin-bottom:0}}
#panel-isi .absen-kamera .ab-info,#panel-isi .absen-kamera .ab-info p,#panel-isi .absen-kamera #ab-status,#panel-isi .absen-kamera .kamera-capture,#panel-isi .absen-kamera #ab-foto-ulang{font-weight:400}
#panel-isi .absen-kamera #ab-ulang{font-weight:400}
#panel-isi .absen-kamera.kamera-tanpa-video .ab-info{position:static;margin-bottom:8px}

/* Di HP lebar panel sudah penuh: pilihan lebar hanya berguna di desktop. */
@media(max-width:600px){
  body.msb-portal .panel-ukuran-toolbar .panel-ukuran-label,
  body.msb-portal .panel-ukuran-toolbar #panel-ukuran{display:none}
  #panel .panel-box:has(#panel-isi>.absen-kamera:not(.kamera-tanpa-video)){
    box-sizing:border-box;width:100%;max-width:100%;padding:0;
  }
  #panel .panel-box:has(#panel-isi>.absen-kamera:not(.kamera-tanpa-video))>.panel-ukuran-toolbar{
    position:absolute;top:0;right:0;left:auto;width:48px;height:48px;margin:0;padding:0;
    border:0;background:transparent;box-shadow:none;z-index:6;
  }
  #panel .panel-box:has(#panel-isi>.absen-kamera:not(.kamera-tanpa-video)) .panel-tutup{
    top:8px;right:8px;width:32px;height:32px;min-height:32px;border-radius:50%;
    background:rgba(10,17,29,.75);color:white;
  }
  #panel-isi:has(>.absen-kamera:not(.kamera-tanpa-video)){margin:0;padding:0}
  #panel-isi:has(>.absen-kamera:not(.kamera-tanpa-video))>h2{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  #panel-isi .absen-kamera.kamera-live:not(.kamera-tanpa-video){margin:0;border-radius:0;max-width:none;width:100%}
  #panel-isi .absen-kamera:not(.kamera-tanpa-video) .ab-info{right:49px}
  #panel-isi:has(>.absen-kamera:not(.kamera-tanpa-video))>.ab-alasan{margin:8px 8px 0}
}