/* BLINK mobile Home and Reels redesign — staged, scoped to authenticated routes. */
@media(max-width:760px){
 body:has(.app-shell) {background:#080808;color:#f5f5f5}
 .app-shell{--accent:#fff;--border:#282828;background:#080808;color:#f5f5f5}
 .app-shell .main{background:#080808;min-width:0}
 .app-shell .topbar{position:sticky;top:0;z-index:15;background:#090909;border-bottom:1px solid #242424;min-height:54px;padding:6px 12px}
 .app-shell .topbar h1{font-size:19px;color:#fff}
 .app-shell .top-actions{gap:7px}
 .app-shell .top-actions .download-app,.app-shell .top-actions [data-action="create-post"]{display:none}
 .app-shell .content-wrap{padding:0 0 82px;max-width:none}
 .app-shell .android-ui-parity-dock{display:none!important}
 .app-shell .mobile-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));background:#090909;border-top:1px solid #242424;z-index:30}
 .app-shell .mobile-nav button{color:#bdbdbd;font-size:11px;min-width:0}
 .app-shell .mobile-nav button span{font-size:20px}
 .app-shell .mobile-nav button.active{color:#fff;background:#202020}
 body:has(.feed) .app-shell .story-strip,body:has(.feed) .app-shell .stories,body:has(.feed) .app-shell [class*="story-bar"]{display:none!important}
 body:has(.feed) .app-shell .tabs{display:flex;gap:6px;padding:10px 12px;margin:0;background:#080808}
 body:has(.feed) .app-shell .tab{border-radius:999px;border:1px solid #343434;background:#121212;color:#ddd;font-size:14px}
 body:has(.feed) .app-shell .tab.active{background:#fff;color:#080808;border-color:#fff}
 body:has(.feed) .app-shell .composer{display:none!important}
 body:has(.feed) .app-shell .feed{gap:2px}
 body:has(.feed) .app-shell .post-card{border:0;border-radius:0;border-bottom:1px solid #262626;background:#0d0d0d}
 body:has(.feed) .app-shell .post-head{padding:10px 12px}
 body:has(.feed) .app-shell .post-stats{padding:8px 12px;color:#bcbcbc}
 body:has(.feed) .app-shell .post-actions{border-top:1px solid #252525;padding:3px 7px}
 body:has(.feed) .app-shell .post-actions button{font-size:12px;color:#ededed}
 .blink-mobile-create{position:fixed;right:18px;bottom:85px;z-index:31;width:54px;height:54px;border-radius:50%;border:1px solid #333;background:#fff;color:#050505;font-size:30px;box-shadow:0 5px 20px #0009}
 body:has(.reels-feed) .app-shell .topbar{min-height:46px}
 body:has(.reels-feed) .app-shell .content-wrap{padding:0}
 body:has(.reels-feed) .app-shell .reels-feed{height:calc(100dvh - 153px);overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
 body:has(.reels-feed) .app-shell .reel-card{height:calc(100dvh - 153px);min-height:0;border:0;border-radius:0;scroll-snap-align:start;background:#000}
 body:has(.reels-feed) .app-shell .reel-card video,body:has(.reels-feed) .app-shell .reel-card img{width:100%;height:100%;object-fit:contain;background:#000}
 body:has(.reels-feed) .app-shell .reel-overlay{z-index:3;bottom:24px;left:12px;right:65px;text-shadow:0 1px 5px #000}
 body:has(.reels-feed) .app-shell .reel-actions{z-index:4;right:8px;bottom:52px;display:flex;flex-direction:column;gap:16px}
 body:has(.reels-feed) .app-shell .reel-actions button{min-width:44px;min-height:44px;color:#fff;background:#0006;border-radius:50%}
}

/* Reels creator/actions layer: legible on light and dark footage. */
@media(max-width:760px){
 body:has(.reels-feed) .app-shell .reel-card{position:relative;overflow:hidden}
 body:has(.reels-feed) .app-shell .reel-overlay{position:absolute!important;left:14px!important;right:80px!important;bottom:25px!important;z-index:6!important;color:white!important;pointer-events:auto}
 body:has(.reels-feed) .app-shell .reel-creator{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
 body:has(.reels-feed) .app-shell .reel-creator-link{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:white;font-size:15px;text-align:left;padding:0;text-shadow:0 1px 5px black}
 body:has(.reels-feed) .app-shell .reel-creator-link .avatar-sm{width:34px;height:34px;border-radius:50%}
 body:has(.reels-feed) .app-shell .reel-follow{border:1px solid #fff8;border-radius:8px;background:#0009;color:white;padding:6px 11px;font-size:12px}
 body:has(.reels-feed) .app-shell .reel-caption{font-size:14px;line-height:1.4;max-height:4.2em;overflow:hidden;margin:8px 0 0;color:#fff;text-shadow:0 2px 5px #000}
 body:has(.reels-feed) .app-shell .reel-actions{position:absolute!important;right:9px!important;bottom:70px!important;z-index:7!important;gap:10px!important}
 body:has(.reels-feed) .app-shell .reel-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:51px;height:51px;min-width:51px;font-size:23px;background:#0008;color:white;border:1px solid #ffffff38;backdrop-filter:blur(3px)}
 body:has(.reels-feed) .app-shell .reel-actions small{font-size:9px;line-height:1.1;margin-top:2px;color:white}
 body:has(.reels-feed) .app-shell .reel-card video{touch-action:pan-y}
}
