/* Story Reels layer 25.1: visual-only enhancement over the existing story viewer. */
#story_viewer_overlay.story_open{
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(26px) saturate(1.08);
    -webkit-backdrop-filter: blur(26px) saturate(1.08);
}

#story_viewer_overlay .story_viewer_box{
    width: min(100vw, 450px);
    height: min(92dvh, 820px);
    max-width: 450px;
    max-height: 820px;
    background: #090a0d;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.04);
    isolation: isolate;
    overflow: hidden;
    touch-action: pan-y;
    overscroll-behavior: contain;
}

#story_viewer_overlay .story_viewer_box::before,
#story_viewer_overlay .story_viewer_box::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}
#story_viewer_overlay .story_viewer_box::before{
    top: 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,0));
}
#story_viewer_overlay .story_viewer_box::after{
    bottom: 0;
    height: 210px;
    background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
}

#story_viewer_overlay .story_progress_row{
    top: 10px;
    left: 12px;
    right: 12px;
    gap: 5px;
    z-index: 8;
}
#story_viewer_overlay .story_progress_seg{
    height: 3px;
    background: rgba(255,255,255,.28);
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
#story_viewer_overlay .story_progress_fill{
    background: linear-gradient(90deg,#fff,#dfe8ff);
}

#story_viewer_overlay .story_viewer_header{
    top: 25px;
    left: 14px;
    right: 14px;
    padding-inline-end: 160px;
    z-index: 8;
    text-shadow: 0 1px 6px rgba(0,0,0,.65);
}
#story_viewer_overlay .story_viewer_header img{
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255,255,255,.86);
    box-shadow: 0 3px 12px rgba(0,0,0,.35);
}
#story_viewer_overlay .story_viewer_header .sv_name{
    font-size: 13px;
    font-weight: 700;
}

#story_viewer_overlay .story_media_wrap{
    position: relative;
    z-index: 1;
    height: 100%;
    background: #090a0d;
}
#story_viewer_overlay .story_media_wrap img,
#story_viewer_overlay .story_media_wrap video{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#story_viewer_overlay .story_tap_zone{
    z-index: 5;
}
#story_viewer_overlay .story_nav_arrow{
    z-index: 8;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#story_viewer_overlay .story_nav_arrow:hover{
    background: rgba(255,255,255,.16);
}
#story_viewer_overlay .story_close_btn,
#story_viewer_overlay .story_report_btn,
#story_viewer_overlay .story_delete_btn,
#story_viewer_overlay .story_mute_btn{
    z-index: 9;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0,0,0,.20);
}

#story_viewer_overlay .story_viewer_footer{
    bottom: 15px;
    left: 14px;
    right: 14px;
    z-index: 8;
    gap: 9px;
}
#story_viewer_overlay .story_comment_bar{
    width: 100%;
    margin-bottom: 1px;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 5px 20px rgba(0,0,0,.30);
}
#story_viewer_overlay .story_reaction_bar{
    padding: 6px 9px;
    background: rgba(10,12,18,.62);
    border-color: rgba(255,255,255,.22);
}
#story_viewer_overlay .story_views_pill{
    background: rgba(10,12,18,.62);
    border: 1px solid rgba(255,255,255,.16);
}

@media (max-width: 499px){
    #story_viewer_overlay .story_viewer_box{
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    #story_viewer_overlay .story_viewer_header{
        top: 24px;
    }
}

@media (prefers-reduced-motion: reduce){
    #story_viewer_overlay .story_progress_fill{
        transition: none !important;
    }
}