/* native.css — scoped styles applied ONLY when YUHA runs inside the Capacitor Android shell. static/native.js adds .native-app + .platform- to when Capacitor.isNativePlatform() is true, so browsers are unaffected. */ /* Hide web-only chrome that doesn't belong in an installed app. */ .native-app #pwaInstallBanner, .native-app #push-ios-note { display: none !important; } /* ── Status-bar safe area ──────────────────────────────────────────────────── The WebView is edge-to-edge. We paint a single fixed-position teal strip at the top of viewport (only the system bar height), and reserve that space inside every top-level container so content doesn't hide behind it. Container backgrounds: .top-nav uses rgba(255,255,255,0.88) + backdrop blur and .desk-main uses var(--bg) (which the theme can set to teal in some contexts) — that combo lets a teal cast bleed through what should be a white topbar. We force both to opaque white so only the fixed teal strip shows brand color, never the topbar itself. */ .native-app { background-color: #ffffff; } body.native-app { background-color: #ffffff; } /* Fixed teal strip — viewport top, height = system bar inset, top of stack. */ .native-app::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #0d9488; z-index: 99999; pointer-events: none; } /* Container background overrides — force opaque white so no teal bleeds through the semi-transparent topbar. Also override the fixed height that platform.css / views.css set (`.top-nav { height: 50px }` and `[data-ui=v2] .top-nav { height: var(--topbar-h) }`) so the padding-top env() inset can actually push the hamburger + page-title DOWN below the system bar. Without this, the height stays at ~64px, the 51px padding eats almost all of it, and the topbar content sits inside the visible teal zone. */ .native-app .desk-main, .native-app #topNav, .native-app .top-nav { background-color: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; height: auto !important; min-height: calc(50px + env(safe-area-inset-top, 0px)) !important; } /* Top-level containers reserve safe-area space so their natural content doesn't hide behind the teal strip. View containers (#viewChat, #viewDash, …) used to be in this list too, but topNav ABOVE them already reserves the inset — adding it again on each view pushed the page content another 51px down, creating ~100px of empty space between the topbar and the first hero card. Removed: only top-most elements (auth-overlay, sidebar, landing) and the topNav itself need the inset reserve. */ .native-app #auth-overlay, .native-app #sidebar, .native-app #landing, .native-app #topNav, .native-app .top-nav { padding-top: env(safe-area-inset-top, 0px) !important; box-sizing: border-box; } /* Sticky/fixed top-anchored chrome — push the anchor BELOW the strip. */ .native-app .sb-nav, .native-app .yh-nav, .native-app .l-topbar, .native-app .topbar, .native-app [class*="top-bar"], .native-app [class*="header-fixed"] { top: env(safe-area-inset-top, 0px) !important; } /* ── Hide the responsive-web hamburger + left sidebar on native ──────── * The bottom tab bar + avatar → Account hub already cover navigation in * the Android shell. The hamburger duplicates that and pulls users into * a web-style sidebar with web-only items (Connected sources, Sign out * etc. that the Account hub already owns). Hide both. */ .native-app .mob-menu-btn { display: none !important; } .native-app .sidebar { /* Defensive: even if openMobSidebar() runs, the sidebar stays * offscreen on native. transform wins because !important. */ transform: translateX(-100%) !important; pointer-events: none !important; } /* ── Tier pill: collapse to icon-only on native ───────────────────────── * v9 mockup's topnav was just "Dashboard" + avatar — no PREMIUM text. * Hide the .tp-tier label and show only the ★ icon. The pill stays * clickable (opens upgrade modal) so the affordance isn't lost; it just * occupies less visual real estate. */ .native-app .tier-pill .tp-tier { display: none !important; } .native-app .tier-pill-premium { padding: 6px 10px !important; border: none !important; background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; } .native-app .tier-pill-premium .tp-icon { font-size: 14px; color: #fff; font-weight: 800; line-height: 1; } /* For non-premium tiers on native, the count (e.g. 12/20) stays visible * with the "Free" label trimmed via the .tp-tier display:none above. */ .native-app .tier-pill:not(.tier-pill-premium) { padding: 4px 10px !important; } /* ── Drop the "Dashboard" title text from the topnav on dash view ───── * The hero's greeting strip ("Wednesday, 4 June · Good evening, Abhishek") * already provides context, so the redundant "Dashboard" title under * the status bar was visual noise. The topnav itself stays (avatar + * tier-pill + sync indicator remain reachable) — only the title text * is hidden, and only on the Dashboard view. Other views (Insights, * Activities, etc.) still show their title labels. */ body.native-app.yuha-view-dash #topNavTitle, body.native-app.yuha-view-dash .top-nav-page { display: none !important; } /* ── Chat FAB on native — hidden on auth screens, shown once logged in ── * The FAB provides a persistent chat entry point alongside the bottom * tab bar. Hidden by default; platform.css shows it via the * body.native-app.yuha-app-ready selector once the user is authenticated. * Hidden again on the Chat view itself (see platform.css:10168). */ .native-app .yuha-chat-fab { display: none; }