/* ====== Gallery Shell ====== */
.nav-ai-gallery{position:relative;max-width:1100px;margin:0 auto;padding:8px 0 18px}
.nav-ai-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 8px 10px}
.nav-ai-tabs button{border:0;border-radius:999px;padding:6px 10px;background:#1f2937;color:#fff;cursor:pointer;font:600 13px/1 system-ui}
.nav-ai-tabs button.active{background:#6b21a8}

/* Strip */
.nav-ai-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 52px;scrollbar-width:none}
.nav-ai-strip::-webkit-scrollbar{display:none}
.nav-ai-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:999px;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-ai-btn.prev{left:8px}
.nav-ai-btn.next{right:8px}

/* Cards */
.nav-ai-item{position:relative;display:block;scroll-snap-align:center;border-radius:12px;overflow:hidden;background:#111;color:#fff;flex:0 0 260px;aspect-ratio:9/16}
.nav-ai-item img{width:100%;height:100%;object-fit:cover;display:block}
.nav-ai-caption{position:absolute;left:8px;bottom:8px;font:600 12px/1.2 system-ui;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.nav-ai-play{position:absolute;inset:auto auto 12px 12px;width:42px;height:42px;border-radius:999px;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
.nav-ai-play:before{content:"";border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}

/* Mobile: slightly smaller cards than before */
@media (max-width:640px){
  .nav-ai-item{flex:0 0 58vw} /* width controls height due to aspect-ratio */
  .nav-ai-strip{padding:6px 48px}
  .nav-ai-btn{width:32px;height:32px}
  .nav-ai-play{inset:auto auto 10px 10px;width:38px;height:38px}
}

/* Empty */
.nav-ai-empty{color:#cbd5e1;padding:16px}

/* ====== Modal ====== */
.nav-ai-modal{position:fixed;inset:0;display:block;z-index:9999}
.nav-ai-modal[hidden]{display:none}
.nav-ai-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.nav-ai-modal-body{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px}

.nav-ai-player-wrap{
  width:min(96vw, 960px);
  max-height:86vh;
  aspect-ratio:16/9;
  background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.6)
}
.nav-ai-player-wrap iframe{width:100%;height:100%;border:0}

@media (max-width:640px){
  .nav-ai-player-wrap{
    height:86vh;
    max-width:92vw;
    width:auto;
    aspect-ratio:9/16; /* portrait shorts on mobile */
  }
}

/* Close button */
.nav-ai-close{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.65);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;z-index:5
}
.nav-ai-close:hover{background:rgba(0,0,0,.8)}
.nav-ai-close:focus-visible{outline:3px solid rgba(255,255,255,.35)}

/* Modal arrows */
.nav-ai-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;background:rgba(0,0,0,.55);color:#fff;z-index:5}
.nav-ai-arrow.left{left:10px}
.nav-ai-arrow.right{right:10px}
.nav-ai-arrow:hover{background:rgba(0,0,0,.75)}

/* body lock */
.nav-ai--locked{overflow:hidden}