/* nd-history-popup.css — panel "History Nonton" dari tombol melayang (FAB).

   Sebelumnya ini kotak persegi polos yang muncul begitu saja. Sekarang: lembar
   kaca yang meluncur naik dari sudut, tanpa garis tepi, dengan daftar film
   berbentuk kartu mini — dan di layar kecil berubah jadi bottom sheet seperti
   aplikasi, bukan kotak mengambang yang kekecilan.

   Markup dan JS-nya TIDAK diubah; hanya tampilannya. Dimuat paling akhir supaya
   menang atas aturan lama di nd-layout.css tanpa !important. */

/* ---------- Tombol melayang ---------- */

body.nd-ui .watch-history-fab {
  position: fixed;
  z-index: var(--nd-z-fab, 90);
  inset-block-end: clamp(1rem, 4vh, 2rem);
  inset-inline-end: clamp(.75rem, 2vw, 1.5rem);
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--nd-r-full);
  background: var(--nd-s2);
  color: var(--nd-t2);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--nd-e3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--nd-dur-2) var(--nd-ease-out),
              background-color var(--nd-dur-1) var(--nd-ease-out),
              color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .watch-history-fab:hover {
  background: var(--nd-accent);
  color: var(--nd-t-on-accent);
  transform: translateY(-3px) scale(1.06);
}
body.nd-ui .watch-history-fab:active { transform: scale(.95); }
body.nd-ui .watch-history-fab:focus-visible { outline: 0; box-shadow: var(--nd-e3), 0 0 0 3px var(--nd-accent-400); }

/* ---------- Panel ---------- */

body.nd-ui .watch-history-popup {
  position: fixed;
  z-index: var(--nd-z-popover, 95);
  inset-block-end: calc(clamp(1rem, 4vh, 2rem) + 3.75rem);
  inset-inline-end: clamp(.75rem, 2vw, 1.5rem);
  inline-size: min(23rem, calc(100vw - 1.5rem));
  max-block-size: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--nd-r-4);
  background: var(--nd-s1);
  box-shadow: var(--nd-e4);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  overflow: hidden;

  /* Tertutup: tidak sekadar transparan — juga tidak bisa diklik maupun
     dijangkau pembaca layar, supaya tak ada jebakan fokus tak terlihat. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity var(--nd-dur-2) var(--nd-ease-out),
              transform var(--nd-dur-3) var(--nd-ease-spring, cubic-bezier(.22, 1.2, .36, 1)),
              visibility 0s linear var(--nd-dur-2);
}

body.nd-ui .watch-history-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

/* ---------- Kepala ---------- */

body.nd-ui .watch-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-sp-3);
  padding: var(--nd-sp-4) var(--nd-sp-4) var(--nd-sp-3);
  border: 0;
  color: var(--nd-t1);
  font: 800 var(--nd-fs-md) / 1.2 var(--nd-font-display);
  flex: 0 0 auto;
}

body.nd-ui .watch-history-close {
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--nd-r-full);
  background: transparent;
  color: var(--nd-t3);
  cursor: pointer;
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .watch-history-close:hover { background: var(--nd-s2); color: var(--nd-t1); }

/* ---------- Daftar ---------- */

body.nd-ui .watch-history-list {
  display: grid;
  /* Tanpa ini, baris grid IKUT MEREGANG memenuhi tinggi panel saat isinya cuma
     satu-dua film, sehingga antar-item muncul jarak kosong yang lebar. */
  align-content: start;
  gap: var(--nd-sp-2);
  padding: 0 var(--nd-sp-3) var(--nd-sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}

body.nd-ui .watch-history-item-wrap { position: relative; }

body.nd-ui .watch-history-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--nd-sp-3);
  align-items: center;
  padding: var(--nd-sp-2);
  border: 0;
  border-radius: var(--nd-r-3);
  background: transparent;
  color: var(--nd-t2);
  text-decoration: none;
  transition: background-color var(--nd-dur-1) var(--nd-ease-out), transform var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .watch-history-item:hover { background: var(--nd-s2); transform: translateX(2px); }
body.nd-ui .watch-history-item.is-current {
  background: var(--nd-accent-tint);
  box-shadow: inset 0 0 0 1px var(--nd-accent-400);
}

body.nd-ui .watch-history-thumb,
body.nd-ui .watch-history-thumb-fallback {
  inline-size: 3rem;
  block-size: 4rem;
  border-radius: var(--nd-r-2);
  object-fit: cover;
  overflow: hidden;
}

body.nd-ui .watch-history-title {
  color: var(--nd-t1);
  font: 700 var(--nd-fs-sm) / 1.3 var(--nd-font-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.nd-ui .watch-history-time,
body.nd-ui .watch-history-meta {
  color: var(--nd-t3);
  font-size: var(--nd-fs-3xs);
}

body.nd-ui .watch-history-item-remove {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: var(--nd-sp-2);
  translate: 0 -50%;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--nd-r-full);
  background: var(--nd-s3);
  color: var(--nd-t3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--nd-dur-1) var(--nd-ease-out),
              background-color var(--nd-dur-1) var(--nd-ease-out),
              color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .watch-history-item-wrap:hover .watch-history-item-remove,
body.nd-ui .watch-history-item-remove:focus-visible { opacity: 1; }
body.nd-ui .watch-history-item-remove:hover {
  background: var(--nd-danger-solid, var(--nd-danger));
  color: #fff;
}
@media (hover: none) {
  body.nd-ui .watch-history-item-remove { opacity: 1; }
}

/* ---------- Kosong ---------- */

body.nd-ui .watch-history-empty {
  padding: var(--nd-sp-10) var(--nd-sp-4);
  text-align: center;
  color: var(--nd-t3);
  font-size: var(--nd-fs-sm);
}

/* ---------- Layar kecil: bottom sheet ---------- */

@media (max-width: 560px) {
  body.nd-ui .watch-history-popup {
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    max-block-size: 72vh;
    border-start-start-radius: var(--nd-r-4);
    border-start-end-radius: var(--nd-r-4);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transform: translateY(100%);
    transform-origin: 50% 100%;
    /* Ruang aman supaya daftar tidak tertutup bottom nav. */
    padding-block-end: var(--nd-bottomnav-h, 0px);
  }
  body.nd-ui .watch-history-popup.is-open { transform: none; }

  /* Pegangan geser, penanda visual bahwa ini lembar yang bisa ditutup. */
  body.nd-ui .watch-history-header::before {
    content: "";
    position: absolute;
    inset-block-start: var(--nd-sp-2);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 2.25rem;
    block-size: 4px;
    border-radius: var(--nd-r-full);
    background: var(--nd-s3);
  }
  body.nd-ui .watch-history-header { position: relative; padding-block-start: var(--nd-sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  body.nd-ui .watch-history-popup { transition: opacity var(--nd-dur-1) linear, visibility 0s; transform: none; }
  body.nd-ui .watch-history-fab:hover { transform: none; }
  body.nd-ui .watch-history-item:hover { transform: none; }
}