/* File: app/static/css/move_preview.css
   Movement preview (GIF/Video) lightbox modal
   ✅ UPDATED: modal ~2x larger + media sizing tuned:
      - VIDEO: fills available area (contain)
      - GIF: centered, scaled up but capped (prevents “too big” + prevents “zoomed”)
*/

/* Lightbox overlay + modal */
.mv-overlay{
  position: fixed;
  inset: 0;

  /* raise well above any z-[9999] utilities */
  z-index: 100000;

  background: rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;

  /* slightly smaller padding so the larger modal has room */
  padding: 6vmin 3vmin;
}

/* ✅ Bigger modal */
.mv-modal{
  width: min(1100px, 96vw);     /* was: min(480px, 90vw) */
  height: min(900px, 92vh);     /* new: gives “double size” feel */

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.mv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#111827;
  color:#fff;
  padding:.75rem 1rem;
}

.mv-title{
  font-weight:600;
}

.mv-close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}

/* ✅ Let body and media area expand */
.mv-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  background: #fff;
}

/* ✅ Media wrapper fills remaining height */
.mv-video-wrap{
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* optional: looks cleaner behind video/gif */
  background: #000;
  border-radius: 10px;
  overflow: hidden;

  /* small breathing room so media doesn’t touch edges */
  padding: 2vmin;
}

/* ✅ VIDEO: fill the area nicely without cropping */
.mv-video-wrap video{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
}

/* ✅ GIF: bigger than “auto”, but capped so it never becomes too big */
.mv-video-wrap .mv-gif{
  display:block;

  width: min(760px, 78vw);   /* cap width */
  height: auto;

  max-width: 82%;
  max-height: 78%;           /* cap height so it doesn’t feel zoomed */

  object-fit: contain;
  image-rendering: auto;
}

/* Fallback */
.mv-missing{
  color:#6b7280;
  padding:2rem;
  text-align:center;
  background:#fff;
}

/* pointer cue */
.movement-cell{ cursor:pointer; }

.movement-cell .play-dot{
  display:inline-block;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  margin-left:.35rem;
  vertical-align:middle;
  background:#9ca3af;
}

.movement-cell:hover .play-dot{ background:#111827; }