/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchMobilePlayerMobileOnlyV13 */
@media screen and (max-width: 767.98px){
  html body.single{overflow-x:hidden!important;}
  html body.single #main{padding-top:var(--tiliv-watch-header-h,56px)!important;}
  html body.single #main .tiliv-row.mt-3{margin-top:0!important;}
  html body.single #video-player.tiliv-watch-player-v12{display:block!important;position:relative!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;width:100vw!important;max-width:100vw!important;margin-right:calc(50% - 50vw)!important;margin-left:calc(50% - 50vw)!important;margin-top:0!important;margin-bottom:0!important;z-index:30!important;background:#000!important;overflow:hidden!important;box-shadow:none!important;transform:none!important;clear:both!important;min-height:0!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12{aspect-ratio:16/9!important;height:auto!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12.is-ratio-16-10{aspect-ratio:16/10!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12{position:fixed!important;top:var(--tiliv-watch-header-h,56px)!important;right:0!important;left:0!important;width:100vw!important;max-width:100vw!important;margin:0!important;height:var(--tiliv-watch-player-h,56.25vw)!important;aspect-ratio:auto!important;z-index:90!important;box-shadow:0 7px 22px rgba(17,24,63,.18)!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js{width:100%!important;height:100%!important;min-height:0!important;max-width:100%!important;display:block!important;background:#000!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js.vjs-16-9:before{display:none!important;padding-top:0!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .video-js{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:100%!important;display:block!important;background:#000!important;}
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .video-js.vjs-16-9:before{display:none!important;padding-top:0!important;}
  html body.single #video-player.tiliv-watch-player-v12 .vjs-tech,
  html body.single #video-player.tiliv-watch-player-v12 video{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;background:#000!important;}
  html body.single #tiliv-watch-player-spacer{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;visibility:hidden!important;clear:both!important;}
  html body.single #tiliv-watch-player-spacer.is-active-v12{display:block!important;height:var(--tiliv-watch-player-h,0px)!important;min-height:var(--tiliv-watch-player-h,0px)!important;margin:0!important;padding:0!important;visibility:visible!important;clear:both!important;}
  html body.single .video-single{position:relative!important;z-index:20!important;clear:both!important;margin-top:0!important;background:#fff!important;transform:none!important;}
  html body.b-dark.single .video-single{background:#181818!important;}
}
@media screen and (min-width: 768px){
  html body.single #main{padding-top:78px!important;}
  html body.single #video-player,
  html body.single #video-player.tiliv-watch-player-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12,
  html body.single #video-player.tiliv-watch-player--sticky-mobile,
  html body.single #video-player.tiliv-watch-player--mobile-fixed,
  html body.single #video-player.tiliv-watch-player--fluid-mobile,
  html body.single #video-player.tiliv-watch-player--mobile-fluid{
    display:block!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    transform:none!important;
    z-index:1!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    box-shadow:none!important;
  }
  html body.single #video-player .video-js{width:100%!important;max-width:100%!important;}
  html body.single #tiliv-watch-player-spacer,
  html body.single #tiliv-watch-player-spacer.is-active,
  html body.single #tiliv-watch-player-spacer.is-active-v12{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;visibility:hidden!important;}
}


/* extracted from application/views/views/tiliv/home/watch.php #tiliv-watch-lighthouse-fast-v1 */
/* Performance-critical watch fixes: reserve the player, stop poster/video CLS,
   and make below-the-fold sidebar cards cheap before JS starts. */
html body.single #video-player{position:relative;width:100%;background:#000;overflow:hidden;contain:layout paint;}
html body.single #video-player.is-watch-wide-v12{aspect-ratio:16/9;min-height:180px;}
html body.single #video-player.is-watch-wide-v12.is-ratio-16-10{aspect-ratio:16/10;}
html body.single #video-player .video-js,html body.single #video-player .vjs-poster,html body.single #video-player .vjs-tech{width:100%!important;height:100%!important;background-color:#000!important;}
html body.single #video-player .video-js.vjs-16-9:before{display:none!important;padding-top:0!important;}
html body.single .sidebar-post figure{aspect-ratio:16/9;overflow:hidden;background:#f1f3f7;}
html body.b-dark.single .sidebar-post figure{background:#202020;}
html body.single .sidebar-post figure img{display:block;width:100%;height:100%;object-fit:cover;}
@media (min-width:768px){html body.single #video-player.is-watch-wide-v12{min-height:360px;}}
@media (max-width:767.98px){html body.single #video-player.is-watch-wide-v12{width:100vw;max-width:100vw;margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);}}
/* v3: override older mobile/desktop player rules that forced aspect-ratio:auto on desktop.
   This reserves the player box before Video.js/Nuevo boot and removes the huge .video-single CLS. */
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12{
  position:relative!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:180px!important;
  overflow:hidden!important;
  contain:layout paint!important;
  background:#000!important;
}
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12.is-ratio-16-10{aspect-ratio:16/10!important;}
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .video-js,
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .vjs-poster,
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .vjs-tech{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:100%!important;
  display:block!important;
  background:#000!important;
}
html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12 .video-js.vjs-16-9:before{display:none!important;padding-top:0!important;}
@media (min-width:768px){html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12{min-height:360px!important;}}
@media (max-width:767.98px){html body.single #sidebar{content-visibility:auto;contain-intrinsic-size:1200px;}}


/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchMobileStickyHardFixV15 */
/* v7: This must be loaded AFTER the generic player/CLS rules.
   The previous v6 added .is-watch-fixed-v12 correctly, but later .is-watch-wide-v12
   rules with equal specificity forced the player back to position:relative. That made
   the spacer active while the player stayed in normal flow, causing the big white gap
   and the up/down jump at the beginning of related videos. */
@media screen and (max-width: 767.98px){
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12.is-watch-fixed-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12.is-watch-fixed-v12{
    display:block!important;
    position:fixed!important;
    top:var(--tiliv-watch-header-h,56px)!important;
    right:0!important;
    left:0!important;
    bottom:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:var(--tiliv-watch-player-h,56.25vw)!important;
    min-height:0!important;
    max-height:72vh!important;
    margin:0!important;
    padding:0!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    contain:layout paint!important;
    background:#000!important;
    box-shadow:0 7px 22px rgba(17,24,63,.18)!important;
    transform:none!important;
    z-index:999!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .vjs-tech{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .video-js.vjs-16-9:before{
    display:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 video,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .vjs-tech{
    object-fit:contain!important;
  }

  html body.single #tiliv-watch-player-spacer.is-active-v12{
    display:block!important;
    height:var(--tiliv-watch-player-h,0px)!important;
    min-height:var(--tiliv-watch-player-h,0px)!important;
    margin:0!important;
    padding:0!important;
    visibility:visible!important;
    clear:both!important;
  }
}


/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchAspectRulesV17 */
/* v9: aspect-ratio rules are separated by device.
   Desktop must always render the watch player in the standard 16:9 canvas,
   regardless of the source aspect ratio. Mobile keeps the saved/natural aspect
   decision and only turns into the compact fixed player while sticky. */
@media screen and (min-width: 768px){
  html body.single #video-player.tiliv-watch-player-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12{
    display:block!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:360px!important;
    aspect-ratio:16/9!important;
    margin:0!important;
    overflow:hidden!important;
    contain:layout paint!important;
    background:#000!important;
    transform:none!important;
    box-shadow:none!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 .video-js,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-tech{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12 .video-js.vjs-16-9:before{
    display:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 video,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-tech{
    object-fit:contain!important;
  }
}

@media screen and (max-width: 767.98px){
  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12){
    display:block!important;
    position:relative!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-right:calc(50% - 50vw)!important;
    margin-left:calc(50% - 50vw)!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    contain:layout paint!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12:not(.is-watch-fixed-v12){
    aspect-ratio:16/9!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12.is-ratio-16-10:not(.is-watch-fixed-v12){
    aspect-ratio:16/10!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12:not(.is-watch-fixed-v12){
    aspect-ratio:var(--tiliv-watch-natural-ratio,16/9)!important;
    max-height:calc(100vh - var(--tiliv-watch-header-h,56px) - 18px)!important;
  }

  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .video-js,
  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .vjs-tech{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .video-js.vjs-16-9:before{
    display:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) video,
  html body.single #video-player.tiliv-watch-player-v12:not(.is-watch-fixed-v12) .vjs-tech{
    object-fit:contain!important;
  }
}


/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchAspectRulesV18 */
/* v10 final aspect contract:
   - Mobile: only 16:9 / 16:10 videos are allowed to become sticky.
   - Mobile: every other known aspect ratio renders in its own natural ratio and never sticks.
   - Desktop: all videos stay inside the standard watch player canvas; the video itself is object-fit:contain so the full frame is visible without cropping. */
@media screen and (min-width: 768px){
  html body.single #video-player.tiliv-watch-player-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12{
    display:block!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:360px!important;
    aspect-ratio:16/9!important;
    margin:0!important;
    overflow:hidden!important;
    contain:layout paint!important;
    background:#000!important;
    transform:none!important;
    box-shadow:none!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-ratio-16-10{
    aspect-ratio:16/10!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 .video-js,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-tech{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12 .video-js.vjs-16-9:before{
    display:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12 video,
  html body.single #video-player.tiliv-watch-player-v12 .vjs-tech{
    object-fit:contain!important;
  }
}

@media screen and (max-width: 767.98px){
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12:not(.is-watch-fixed-v12),
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12.is-watch-fixed-v12{
    display:block!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-right:calc(50% - 50vw)!important;
    margin-left:calc(50% - 50vw)!important;
    margin-top:0!important;
    margin-bottom:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:var(--tiliv-watch-natural-ratio,16/9)!important;
    z-index:30!important;
    overflow:hidden!important;
    contain:layout paint!important;
    background:#000!important;
    transform:none!important;
    box-shadow:none!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12:not(.is-watch-fixed-v12){
    aspect-ratio:16/9!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-wide-v12.is-ratio-16-10:not(.is-watch-fixed-v12){
    aspect-ratio:16/10!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .video-js,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .vjs-tech{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .video-js.vjs-16-9:before{
    display:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 video,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .vjs-tech{
    object-fit:contain!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 + #tiliv-watch-player-spacer,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 + #tiliv-watch-player-spacer.is-active-v12{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    visibility:hidden!important;
  }
}


/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchDesktopContainRulesV19 */
/* v11: desktop custom/non-standard aspect videos must use the normal watch canvas,
   but the actual video frame must be fully visible. Do not let Video.js/Nuevo fluid
   sizing crop or collapse these sources. Mobile rules stay untouched. */
@media screen and (min-width: 768px){
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12.is-watch-fluid-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12.is-watch-wide-v12{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:360px!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    background:#000!important;
    contain:layout paint!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js.vjs-fluid,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js.vjs-16-9,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .vjs-poster,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .vjs-tech{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    padding:0!important;
    margin:0!important;
    background:#000!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js.vjs-fluid:before,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js.vjs-16-9:before,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .video-js:before{
    display:none!important;
    content:none!important;
    padding-top:0!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 video,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .vjs-tech{
    object-fit:contain!important;
    object-position:center center!important;
  }

  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .vjs-poster{
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}


/* extracted from application/views/views/tiliv/home/watch.php */
/* همه استایل‌های موجود در home.php را اینجا کپی کنید */
.stories-container {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    background: linear-gradient(45deg, #ff6b6b, #ee5a24, #feca57, #5f27cd);
    border-bottom: 1px solid #dbdbdb;
    scrollbar-width: none;
    border-radius: 15px;
    margin: 10px;
}

.stories-container::-webkit-scrollbar {
    display: none;
}

.story-item {
    flex-shrink: 0;
    margin: 0 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
}

.story-item:hover {
    transform: translateY(-5px);
}

.story-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto 8px;
    transition: all 0.3s ease;
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}


/* استوری دیده شده - نوار خاکستری */
.story-avatar.viewed::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px solid #c7c7c7;
    border-radius: 50%;
}

/* استوری دیده نشده - نوار رنگی */
.story-avatar.unviewed::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: transparent;
    border-radius: 50%;
}

@keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* دکمه افزودن استوری */
.story-avatar.add-story {
    border: 3px dashed #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.story-avatar.add-story::before {
    display: none;
}

.add-icon {
    font-size: 28px;
    color: #ffffff;
    font-weight: bold;
}

.story-username {
    font-size: 12px;
    color: #ffffff;
    max-width: 66px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-weight: 500;
}

/* مودال نمایش استوری */
.story-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
}

.story-modal.show {
    display: block;
}

.story-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-media {
    max-width: 400px;
    max-height: 80vh;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.story-media img,
.story-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* هدر استوری */
.story-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 10px;
}

/* نوار پیشرفت چندگانه */
.story-progress-container {
    display: flex;
    gap: 4px;
    flex: 1;
    margin: 0 15px;
}

.story-progress {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    position: relative;
}

.story-progress-bar {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.story-user-info {
    display: flex;
    align-items: center;
    color: white;
}

.story-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: 12px;
    border: 2px solid white;
}

.story-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.story-user-name {
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.close-story {
    background: rgba(0,0,0,0.6);
    border: none;
    color: white;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-story:hover {
    background: rgba(0,0,0,0.8);
}

/* کنترل‌های استوری */
.story-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    background: rgba(0,0,0,0.6);
    padding: 12px;
    border-radius: 15px;
}

.story-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 14px;
}

.story-input:focus {
    outline: none;
    border-color: #007bff;
}

.story-input::placeholder {
    color: rgba(255,255,255,0.7);
}

.story-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-btn:hover {
    background: rgba(255,255,255,0.2);
}

.story-btn.liked {
    color: #ff3040;
}

/* دکمه‌های ناوبری */
.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    border: none;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.story-nav:hover {
    background: rgba(0,0,0,0.8);
}

.story-nav.prev {
    right: 20px;
}

.story-nav.next {
    left: 20px;
}

/* ری استوری */
.repost-indicator {
    position: absolute;
    top: 65px;
    left: 20px;
    right: 20px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 3;
}

.repost-name {
    color: #fff;
    cursor: pointer;
    text-decoration: underline;
}

.repost-name:hover {
    color: #ccc;
}

/* منشن */
.mention {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
}

.mention:hover {
    text-decoration: underline;
}

/* نوار استوری روی آواتار */
.story-ring {
position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: transparent;
    border-radius: 50%;
}

.story-ring.viewed {
    border: 3px solid #c7c7c7;
    background: none;
    animation: none;
}

/* مطمئن شوید که تصویر z-index کمتری دارد */
.au-avatar img, .ch-avatar img {
    position: relative;
    z-index: 0;
}

/* container آواتار باید position relative داشته باشد */
.au-avatar, .ch-avatar {
    position: relative;
    display: inline-block;
}

@keyframes rotating {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* استایل مودال اشتراک‌گذاری */
.share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 10002;
}

.share-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-content {
    background: white;
    border-radius: 15px;
    padding: 25px;
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.share-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.share-header button {
    background: #f8f9fa;
    border: none;
    color: #666;
    cursor: pointer;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-container {
    margin-bottom: 20px;
}

.search-container input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.search-container input:focus {
    outline: none;
    border-color: #007bff;
}

.contacts-list {
    flex: 1;
    overflow: hidden;
    max-height: 400px;
}
.contact-item img{
    height:40px !important;
    margin-left:10px;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item:hover {
    background: #f8f9fa;
    margin: 0 -10px;
    padding: 12px 10px;
    border-radius: 8px;
}

.contact-info {
    flex: 1;
    margin-left: 12px;
}

.contact-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.contact-username {
    font-size: 12px;
    color: #999;
}

.share-contact-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.share-contact-btn:hover {
    background: #0056b3;
}


/* extracted from application/views/views/tiliv/home/watch.php */
.tiliv-paid-video-lock{aspect-ratio:16/9;display:grid;place-items:center;padding:28px;border-radius:18px;background:radial-gradient(circle at top right,#4e5bc9,#151a3f 68%);color:#fff;text-align:center;overflow:hidden}.tiliv-paid-video-lock-card{max-width:520px;display:grid;justify-items:center;gap:12px}.tiliv-paid-video-lock img{width:76px;height:76px}.tiliv-paid-video-lock h2{margin:0;font-size:25px}.tiliv-paid-video-lock p{margin:0;line-height:1.9;color:#e6e8ff}.tiliv-paid-video-lock button{border:0;border-radius:14px;padding:13px 22px;background:#fff;color:#28347a;font-weight:900;cursor:pointer}.tiliv-paid-video-lock small{color:#d5d8ff}.tiliv-paid-video-lock button[disabled]{opacity:.55;cursor:wait}


/* extracted from application/views/views/tiliv/home/watch.php #tiliv-watch-mobile-lcp-shell-v12 */
/* v12: mobile-only poster shell. It makes the poster the early LCP element without touching Video.js/Nuevo order. */
.tiliv-watch-mobile-poster-shell-v12{display:none;}
@media (max-width:767.98px){
  html body.single #video-player.tiliv-watch-player-v12{position:relative!important;background:#000!important;}
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12{
    position:absolute!important;inset:0!important;z-index:18!important;width:100%!important;height:100%!important;
    display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;margin:0!important;padding:0!important;
    background:#000!important;overflow:hidden!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;
    transition:opacity .16s ease,visibility .16s ease!important;
  }
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12 img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;background:#000!important;
  }
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fluid-v12 .tiliv-watch-mobile-poster-shell-v12 img,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-desktop-contained-v12 .tiliv-watch-mobile-poster-shell-v12 img{object-fit:contain!important;}
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12:after{
    content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.25));pointer-events:none;
  }
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12 .tiliv-watch-mobile-play-v12{
    position:relative;z-index:2;width:62px;height:62px;border-radius:999px;background:rgba(17,24,63,.76);box-shadow:0 10px 28px rgba(0,0,0,.32);display:flex;align-items:center;justify-content:center;
  }
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12 .tiliv-watch-mobile-play-v12:before{
    content:"";display:block;margin-right:5px;border-top:15px solid transparent;border-bottom:15px solid transparent;border-right:0;border-left:22px solid #fff;
  }
  html body.single #video-player.tiliv-watch-player-v12 .tiliv-watch-mobile-poster-shell-v12.is-hidden-v12,
  html body.single #video-player.tiliv-watch-player-v12.is-watch-fixed-v12 .tiliv-watch-mobile-poster-shell-v12{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
}
@media (min-width:768px){html body.single #video-player .tiliv-watch-mobile-poster-shell-v12{display:none!important;}}


/* extracted from application/views/views/tiliv/home/watch.php #tilivWatchMobileHeaderGapFix129 */
/* FIX129: هدر جدید موبایل sticky و داخل flow است؛ padding قدیمی watch باعث گپ سفید قبل از ویدیو می‌شد. */
@media screen and (max-width: 767.98px) {
  html body.single #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body.single #main > .tiliv-row,
  html body.single #main .tiliv-row.mt-3,
  html body.single .video-single {
    margin-top: 0 !important;
  }
  html body.single #video-player,
  html body.single #video-player.tiliv-watch-player-v12 {
    margin-top: 0 !important;
  }
}


/* extracted from application/views/views/tiliv/home/watch.php */
.video-js .vjs-control-text,.vjs-settings-item,p{
            font-family: IRANSansX !important;
        }
        
        .vjs-text-track-cue>div {
            font-size: 10pt;
            font-family: IRANSansX !important;
            padding:4px !important;
            background: rgba(0,0,0,0.5) !important;
        }
        .vjs-texttrack-settings {
          display: none !important;
        }
            
        .vjs-menu-content,.vjs-menu-item-text{
            font-family:IRANSansX !important; 
        }
        
        .rel-url label{
            font-family:IRANSansX !important; 
        }
        
        
        .unsub{
            background:#fff !important;
            color:#5C6180 !important;
        }
        
    
        .download_box_container{
            position:fixed;
            bottom:10px;
            left:10px;
            width:350px;
            height:auto;
            z-index: 9999;
	color:green;
        }
        .download_box{
            margin-bottom:5px;
            background: #FFFFFF;
            border: 1px solid #D9E5FC;
            box-shadow: 0px 4px 16px 11px rgb(182 190 208 / 16%);
            border-radius: 15px;
            width: 350px;
            height:135px;
            padding: 10px 10px;
            z-index:999;
        }
        
        .close_download_box{
            display: inline;
            float: right;
            padding-right: 10px;
            padding-left: 5px;
            font-size: 20px;
            margin-top: 2px;
            color:#11183F;
        }
        .close_download_box svg{
            color:gray;
            padding:2px;
            cursor:pointer;
            color:#11183F;
        }
        .download_box_title{
            display:inline;
            float:right;
            padding-right: 5px;
            color:#11183F;
            
        }
        
        .progress_container{
            width:310px;
            height:20px;
            background: #E5ECF9;
        }
        .progress_segment{
            margin-top: 30px;
            padding: 8px;
        }
        .progress{
            background: linear-gradient(to right,#26a9e1,#2984bf);
            height:100%;
            color:white;
            text-align: center;
            font-size: 15px;
        }
        .pause_progress,.resume_progress{
            float:left;
            margin-left:10px;
            display:none;
            border:0px;
            background: linear-gradient(to right,#26a9e1,#2984bf);
            color:white;
            border-radius: 5px;
            cursor: pointer;
            margin-top:5px;
        }
        .progress_percentage{
            float:right;
            margin-right: 10px;
            margin-top: -5px;
            font-size:14px;
            color:#5C6180;
        }
        .progress_detail{
            float:left;
            margin-left: 10px;
            margin-top: -5px;
            font-size:14px;
            color:#5C6180;

        }
        .download_problem{
            margin-top: 25px;
            font-size: 12px;
            padding-right: 10px;
            color: #000 !important;

        }
        .download_problem a{
            cursor:pointer;
            color: blue !important;

        }

/* Cleaned static inline styles — watch page */
.au-avatar-trigger{cursor:pointer;position:relative;display:inline-block;}
.au-avatar-trigger .au-avatar-img{position:relative;z-index:2;border-radius:50%;border:0;top:1px;right:2px;width:62px;height:62px;}
.download-success-message{margin-top:35px;margin-right:40px;}
.download-success-link{font-size:12px;color:blue;}
.progress-zero{width:0%;}

/* FIX155: force Tiliv's local Persian-number font on every textual node in
   Watch playlist and related rows, including rows appended later by AJAX. Icon
   elements are deliberately excluded so their icon font/SVG rendering stays intact. */
html body.single #sidebar .playlist-inner,
html body.single #sidebar #tilivPlaylistItems,
html body.single #sidebar #sidebar_videos,
html body.single #sidebar .side-posts,
html body.single #sidebar .playlist-inner strong,
html body.single #sidebar .playlist-inner a,
html body.single #sidebar .playlist-inner span,
html body.single #sidebar .playlist-inner p,
html body.single #sidebar .playlist-inner button,
html body.single #sidebar #tilivPlaylistItems h1,
html body.single #sidebar #tilivPlaylistItems h2,
html body.single #sidebar #tilivPlaylistItems h3,
html body.single #sidebar #tilivPlaylistItems h4,
html body.single #sidebar #tilivPlaylistItems a,
html body.single #sidebar #tilivPlaylistItems span,
html body.single #sidebar #tilivPlaylistItems p,
html body.single #sidebar #tilivPlaylistItems strong,
html body.single #sidebar #tilivPlaylistItems button,
html body.single #sidebar #sidebar_videos h1,
html body.single #sidebar #sidebar_videos h2,
html body.single #sidebar #sidebar_videos h3,
html body.single #sidebar #sidebar_videos h4,
html body.single #sidebar #sidebar_videos a,
html body.single #sidebar #sidebar_videos span,
html body.single #sidebar #sidebar_videos p,
html body.single #sidebar #sidebar_videos strong,
html body.single #sidebar #sidebar_videos button,
html body.single #sidebar .side-posts h1,
html body.single #sidebar .side-posts h2,
html body.single #sidebar .side-posts h3,
html body.single #sidebar .side-posts h4,
html body.single #sidebar .side-posts a,
html body.single #sidebar .side-posts span,
html body.single #sidebar .side-posts p,
html body.single #sidebar .side-posts strong,
html body.single #sidebar .side-posts button{
  font-family:IRANSansXFaNum,IRANSansX,Tahoma,Arial,sans-serif!important;
}