/* ========================================================= SehVarta — Nav redesign polish (additive only). Does NOT touch anything 92-final-rebuild.css governs (nav.topbar.auth-topbar grid/position/overflow, sticky rails) — those live in that file per its own "sole authority" header comment. This file only adds cosmetic polish on top of markup that already exists: the shared left sidebar partial and the single mobile bottom tab bar. ========================================================= */ /* ---------- Sidebar: collapsible via a toggle button ---------- By default the nav-links sidebar (.sv-left-sidebar) is COLLAPSED at all widths >=761px, so the top bar shows only the brand (logo+name) plus the search/action icons. Clicking the new [data-sidebar-toggle] button (added next to the brand) adds .sidebar-open to , which reveals it and gives its grid column real width again via the --sv-rail-w custom property (73-layout-grid.css's grid-template-columns already reads this var with a fallback, so collapsing doesn't just hide the sidebar visually, it also reclaims its grid column for the main content). This also fixes a real dead-zone bug: 97-target-premium-ui.css's `@media(max-width:999px){.sv-left-sidebar{display:none!important}}` (loaded after 73-layout-grid.css) was suppressing the sidebar at 761-999px even though 73-layout-grid.css's own tablet grid expects it — with the old .app-nav.desktop-nav top-row now removed, that left a total no-navigation gap at tablet widths. Loading this file last lets the rules below win over that suppression. */ /* Desktop keeps navigation persistent. Tablet alone uses the overlay toggle. */ @media (min-width: 1200px) { .sidebar-toggle-btn { display: none !important; } } @media (min-width: 761px) and (max-width: 1199px) { .sidebar-toggle-btn { display: inline-flex !important; } } /* ---------- Safe-area fallback: status bar / notch (top) ---------- The real fix for the wrapped Android app is native (MainActivity now opts out of edge-to-edge via WindowCompat.setDecorFitsSystemWindows), so the WebView's own viewport already excludes the status bar there. This is a defensive fallback for any context where that isn't true (e.g. viewport-fit=cover browsers on notched phones) — costs nothing elsewhere since env() resolves to 0 when there's no inset. */ nav.topbar.auth-topbar { padding-top: max(8px, env(safe-area-inset-top)) !important; } /* ---------- Brand: nudge logo+name down slightly ---------- Sits flush with the row top by default; a touch of top margin reads as more deliberately "centered/settled" next to the search bar and action icons instead of looking pinned to the very top edge. */ nav.topbar.auth-topbar .app-logo { margin-top: 6px !important; } /* ---------- Sidebar: persistent "selected card" state ---------- 97-target-premium-ui.css already styles .sv-left-sidebar as a rounded, shadowed card and gives its links a hover gradient — this just makes the current page's link keep that same look permanently (not only on :hover). */ .sv-left-sidebar > a.is-active { background: linear-gradient(90deg, #eef4ff, #f6ecff) !important; color: #4f46e5 !important; font-weight: 800 !important; } .sv-left-sidebar > a.is-active > span { background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed)) !important; color: #fff !important; } /* ---------- Bottom tab bar: safe-area gap, bigger touch targets, slight lift ---------- Real bug: the bar sat with only max(6px, safe-area-inset-bottom) of bottom padding, which on many Android phones is thinner than the OS gesture-nav swipe zone — taps near the bottom row were landing on the system back/home gesture instead of the icon. NOTE: 98-instagram-reels.css explicitly warns that a PAST attempt to float this bar via backdrop-filter/blur + side margins caused a ghosting/duplicate-render glitch on scroll. To get the "floats above the edge" look the user asked for (like Instagram/ WhatsApp) without reopening that exact bug, this only lifts the bar vertically a little (bottom offset, no side margins/insets, no blur) — still full-bleed left-to-right, just not glued to the very bottom pixel. If any scroll flicker shows up on-device, the fix is to drop the `bottom` offset back to 0 here (keep the padding/touch-target changes either way, those are unrelated). */ @media (max-width: 760px) { nav.mobile-icon-nav.instagram-mobile-nav { bottom: 8px !important; border-radius: 20px !important; box-shadow: 0 -10px 26px rgba(16, 36, 61, .14) !important; padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important; padding-top: 10px !important; } nav.mobile-icon-nav.instagram-mobile-nav a, nav.mobile-icon-nav.instagram-mobile-nav label.nav-create { min-height: 48px !important; min-width: 48px !important; } nav.mobile-icon-nav.instagram-mobile-nav a.is-active { background: linear-gradient(180deg, rgba(37, 99, 235, .10), rgba(124, 58, 237, .06)) !important; border-radius: 14px !important; } } /* ---------- Feed posts: fill the card, no letterbox bars ---------- app.css (loaded first) sets .post-media.media-aspect to object-fit:contain with a visible #f8fafc background — so any post whose media doesn't exactly match its aspect box shows grey letterbox bars, reading as a "boxed/bordered" look instead of a filled, premium card. Nothing loaded after app.css overrides object-fit itself (only aspect-ratio/max-height vary per media-aspect-* variant), so switch it to cover here, loaded last. */ .post-media.media-aspect, video.post-media.media-aspect, img.post-media.media-aspect { object-fit: cover !important; } /* ---------- Reels: true full-bleed, edge-to-edge, no rounding ---------- 98-instagram-reels.css deliberately keeps a 6px side gutter and 16px corner rounding on mobile ("small breathing gap ... rounded corners kept"). For a true full-screen reels player (matching Instagram/TikTok's actual full-screen playback, not a card), remove both so the video fills the entire viewport width. */ @media (max-width: 760px) { .ig-reels-list { padding-inline: 0 !important; } .ig-reel-media { border-radius: 0 !important; max-width: none !important; } } /* ---------- In-app update-available pill (see app-update-check.js) ---------- */ .app-update-pill { display: block; margin: 8px 12px 4px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; text-decoration: none; text-align: center; } .app-update-pill.is-outdated { background: linear-gradient(90deg, #fef3c7, #fee2e2); color: #92400e; } .app-update-pill.is-current { background: #ecfdf5; color: #047857; cursor: default; }