.story2685-wrapper{
width:100%;
direction:rtl;
overflow:hidden;
}

.story2685-list{
display:flex;
gap:14px;
overflow-x:auto;
padding:10px 4px;

scroll-behavior:smooth;
scroll-snap-type:x mandatory;

-webkit-overflow-scrolling:touch;
}

/* hide scrollbar */

.story2685-list::-webkit-scrollbar{
display:none;
}

.story2685-list{
-ms-overflow-style:none;
scrollbar-width:none;
}

.story2685-item{
flex:0 0 auto;
width:72px;
cursor:pointer;
text-align:center;
scroll-snap-align:start;
}

.story2685-thumb{
width:72px;
height:72px;
border-radius:50%;
overflow:hidden;
border:2px solid #ff004f;
display:flex;
align-items:center;
justify-content:center;
background:#000;
}

.story2685-thumb img,
.story2685-thumb video{
width:100%;
height:100%;
object-fit:cover;
}

.story2685-title{
display:block;
font-size:12px;
margin-top:6px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* viewer */

.story2685-viewer{
position:fixed;
inset:0;
background:#000;
z-index:999999;
display:none;
align-items:center;
justify-content:center;
}

.story2685-viewer.show{
display:flex;
}

.story2685-stage{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
}

.story2685-stage img,
.story2685-stage video{
max-width:100%;
max-height:100%;
object-fit:contain;
}

/* progress */

.story2685-progress{
position:absolute;
top:10px;
left:10px;
right:10px;
height:3px;
display:flex;
gap:4px;
}

.story2685-bar{
flex:1;
background:rgba(255,255,255,.25);
overflow:hidden;
position:relative;
}





















.story2685-bar::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:#fff;

    transform:scaleX(0);
    transform-origin:right; /* مهم: مبدا از راست */
    animation:story2685progress var(--story2685-duration, 5s) linear forwards;
}

@keyframes story2685progress{
    to{
        transform:scaleX(1); /* حالا از راست به چپ پر می‌شود */
    }
}



.story2685-bar.done::after{
    transform:scaleX(1);
}

.story2685-bar:not(.active)::after{
    animation:none;
}

























/* admin slides */

#story2685-slides{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}

.story2685-slide{
position:relative;
width:90px;
height:90px;
border:1px solid #ddd;
overflow:hidden;
cursor:move;
}

.story2685-slide img,
.story2685-slide video{
width:100%;
height:100%;
object-fit:cover;
}

.story2685-remove{
position:absolute;
top:2px;
right:2px;
width:20px;
height:20px;
border:none;
background:#ff0033;
color:#fff;
font-size:14px;
line-height:20px;
cursor:pointer;
}






















.story2685-progress{
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    height:3px;
    display:flex;
    gap:4px;
    z-index: 1001; /* بالاتر از تصویر */
}

.story2685-stage{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top: 20px; /* چند پیکسل فاصله از بالا برای اینکه زیر پروگرس بیفتد */
    box-sizing:border-box;
}

.story2685-stage img,
.story2685-stage video{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.story2685-close{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:20px;
    line-height:32px;
    text-align:center;
    cursor:pointer;
    z-index:1002;
}




































/* حالت درگ روی لیست استوری‌ها */
.story2685-list {
    cursor: grab;
}

.story2685-list.story2685-grabbing {
    cursor: grabbing;
}