/**
 * Performance + mobile UX layer for StreamLumi.
 * Safe areas, touch targets, lazy images, reduced motion.
 */

/* ─── Safe area insets (notch / home indicator) ─── */
.sl-perf-safe-area.sl-perf-mobile-device .sl-front-mobile-rail,
.sl-perf-safe-area.sl-perf-mobile-device .sl-mobile-bottom-nav,
html.sl-perf-room-rail .sl-room-mobile-rail{
    padding-bottom:max(6px, env(safe-area-inset-bottom));
    padding-left:max(6px, env(safe-area-inset-left));
    padding-right:max(6px, env(safe-area-inset-right));
}
.sl-perf-safe-area.sl-perf-mobile-device .sl-room-topbar,
html.sl-perf-room-rail .sl-room-topbar{
    padding-top:max(0px, env(safe-area-inset-top));
    padding-left:max(8px, env(safe-area-inset-left));
    padding-right:max(8px, env(safe-area-inset-right));
}
.sl-perf-safe-area.sl-perf-mobile-device body.sl-front-shell-active.sl-front-has-mobile-rail{
    padding-top:calc(106px + env(safe-area-inset-top))!important;
}
.sl-perf-safe-area.sl-perf-mobile-device body.sl-front-shell-active.sl-mobile-bottom-nav-active{
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
}

/* ─── Touch-friendly targets ─── */
@media (max-width:860px){
    .sl-perf-touch-targets.sl-perf-mobile-device .sl-room-action,
    .sl-perf-touch-targets.sl-perf-mobile-device .sl-front-mobile-rail a,
    .sl-perf-touch-targets.sl-perf-mobile-device .nav-pill,
    .sl-perf-touch-targets.sl-perf-mobile-device .sl-mobile-bottom-nav a,
    .sl-perf-touch-targets.sl-perf-mobile-device button.sl-room-action{
        min-height:44px;
        min-width:44px;
    }
    html.sl-perf-room-rail .sl-room-mobile-rail .sl-room-action{
        min-height:44px;
    }
    html.sl-perf-room-rail body.sl-live-room-shell-enabled .vdchat-overlay{
        padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;
    }
}

/* ─── Room bottom rail polish ─── */
html.sl-perf-room-rail .sl-room-mobile-rail{
    box-shadow:0 -8px 32px rgba(0,0,0,.45);
}
html.sl-perf-room-rail .sl-room-mobile-rail .sl-room-action:active{
    transform:scale(.96);
    transition:transform .12s ease;
}

/* ─── Content visibility for long home grids ─── */
.sl-perf-content-visibility .cbp-rfgrid li:nth-child(n+9){
    content-visibility:auto;
    contain-intrinsic-size:220px 280px;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
    .sl-perf-reduce-motion *,
    .sl-perf-reduce-motion *::before,
    .sl-perf-reduce-motion *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}

/* ─── Overscroll / tap highlight ─── */
.sl-perf-mobile-device{
    -webkit-tap-highlight-color:rgba(245,178,59,.18);
}
.sl-perf-mobile-device .sl-front-mobile-rail,
.sl-perf-mobile-device .cbp-rfgrid,
.sl-perf-mobile-device .nav-pills-bar{
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
}

/* ─── Lazy image placeholder ─── */
img.sl-perf-lazy{
    background:linear-gradient(110deg,#12151c 8%,#1a1f2b 18%,#12151c 33%);
    background-size:200% 100%;
}
img.sl-perf-lazy.sl-perf-lazy-loaded{
    background:none;
}

/* ─── Studio acting banner safe area ─── */
.sl-perf-safe-area .sl-studio-acting-banner{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
}