/* ═══════════════════════════════════════════════════════════════════ NOX MOBILE OVERLAY Loaded LAST in , so every rule here wins specificity ties. Strategy: keep the desktop layout intact for big screens, redraw for ≤ 820px viewports. Bottom tab bar, safe-area-inset everywhere touching the device edge, large tap targets, momentum scrolling. ═══════════════════════════════════════════════════════════════════ */ :root { --mobile-tabbar-h: 64px; --mobile-topbar-h: 54px; --mobile-accent: #00C472; --mobile-accent-2: #00ffaa; --mobile-bg: #000; --mobile-surface: #0a0d10; --mobile-border: rgba(0,196,114,.14); --mobile-ink: #e7eef2; --mobile-ink-dim: #8d9aa0; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } html, body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; } /* ─── Native-feel polish ───────────────────────────────────────── */ body { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; font-feature-settings: "ss01", "cv01", "tnum"; } * { -webkit-touch-callout: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; } button, a, [role="button"] { touch-action: manipulation; } /* ─── App-shell wrapper for safe areas ─────────────────────────── */ .nx-mobile-shell { padding-top: var(--safe-top); padding-bottom: calc(var(--safe-bottom) + var(--mobile-tabbar-h)); padding-left: var(--safe-left); padding-right: var(--safe-right); min-height: 100vh; min-height: 100dvh; background: var(--mobile-bg); } /* ─── Mobile activation: applied by native.js for ≤820px ───────── */ html[data-mobile-active="1"] body { background: var(--mobile-bg); } /* Hide desktop sidebars on mobile */ @media (max-width: 820px) { html[data-mobile-active="1"] .sidebar-left, html[data-mobile-active="1"] .sidebar-right, html[data-mobile-active="1"] .desktop-only, html[data-mobile-active="1"] aside.left, html[data-mobile-active="1"] aside.right { display: none !important; } html[data-mobile-active="1"] .app-layout, html[data-mobile-active="1"] .main-layout, html[data-mobile-active="1"] main { grid-template-columns: 1fr !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } html[data-mobile-active="1"] .main-feed, html[data-mobile-active="1"] .feed { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: calc(var(--safe-bottom) + var(--mobile-tabbar-h) + 24px) !important; } /* Cards: full bleed, generous spacing */ html[data-mobile-active="1"] .post-card, html[data-mobile-active="1"] .card, html[data-mobile-active="1"] .reel-card { border-radius: 16px; margin-bottom: 12px; } /* Larger tap targets — iOS HIG says 44pt, we use 48 */ html[data-mobile-active="1"] button, html[data-mobile-active="1"] .btn, html[data-mobile-active="1"] [role="button"] { min-height: 44px; padding: 10px 14px; } html[data-mobile-active="1"] .icon-btn, html[data-mobile-active="1"] .action-icon { min-width: 44px; min-height: 44px; } /* Inputs */ html[data-mobile-active="1"] input, html[data-mobile-active="1"] textarea, html[data-mobile-active="1"] select { font-size: 16px !important; /* prevents iOS auto-zoom on focus */ border-radius: 12px; } /* Header — float over content */ html[data-mobile-active="1"] header, html[data-mobile-active="1"] .topbar, html[data-mobile-active="1"] .app-header { position: sticky; top: var(--safe-top); z-index: 100; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.78)); border-bottom: 1px solid var(--mobile-border); } /* Modals: full-screen sheets */ html[data-mobile-active="1"] .modal, html[data-mobile-active="1"] .dialog { width: 100vw !important; max-width: 100vw !important; height: auto; max-height: calc(100dvh - var(--safe-top) - var(--mobile-tabbar-h) - 12px); border-radius: 18px 18px 0 0 !important; position: fixed !important; bottom: calc(var(--mobile-tabbar-h) + var(--safe-bottom)); left: 0; right: 0; margin: 0; animation: nx-sheet-up .28s cubic-bezier(.2,.9,.25,1); } } /* ─── Bottom tab bar (built by native.js) ──────────────────────── */ .nx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; height: calc(var(--mobile-tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: linear-gradient(180deg, rgba(8,10,12,.96), rgba(0,0,0,.99)); border-top: 1px solid var(--mobile-border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; user-select: none; -webkit-user-select: none; } .nx-tabbar button { appearance: none; background: transparent; border: 0; color: var(--mobile-ink-dim); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; position: relative; cursor: pointer; transition: color .18s ease; } .nx-tabbar button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s cubic-bezier(.2,.9,.25,1.4); } .nx-tabbar button[aria-current="true"] { color: var(--mobile-accent); } .nx-tabbar button[aria-current="true"] svg { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 8px rgba(0,196,114,.55)); } .nx-tabbar button[aria-current="true"]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 2.5px; background: var(--mobile-accent); border-radius: 0 0 3px 3px; box-shadow: 0 0 10px rgba(0,196,114,.7); } .nx-tabbar button:active svg { transform: scale(.9); } /* Compose FAB sits above the tabbar, dead center */ .nx-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--mobile-tabbar-h) + var(--safe-bottom) + 14px); width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--mobile-accent) 0%, var(--mobile-accent-2) 100%); box-shadow: 0 6px 22px rgba(0,196,114,.45), 0 0 0 4px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; border: 0; color: #001209; z-index: 9100; cursor: pointer; transition: transform .15s cubic-bezier(.2,.9,.25,1.4); } .nx-fab:active { transform: translateX(-50%) scale(.92); } .nx-fab svg { width: 26px; height: 26px; stroke-width: 2.5; } /* ─── Pull-to-refresh indicator ───────────────────────────────── */ .nx-ptr { position: fixed; top: calc(var(--safe-top) + 6px); left: 50%; transform: translateX(-50%) translateY(-100%); width: 38px; height: 38px; border-radius: 50%; background: rgba(8,10,12,.9); border: 1px solid var(--mobile-border); display: flex; align-items: center; justify-content: center; z-index: 9500; transition: transform .25s cubic-bezier(.2,.9,.25,1); pointer-events: none; } .nx-ptr svg { width: 18px; height: 18px; color: var(--mobile-accent); } .nx-ptr.visible { transform: translateX(-50%) translateY(0); } .nx-ptr.spinning svg { animation: nx-spin .9s linear infinite; } @keyframes nx-spin { to { transform: rotate(360deg); } } /* ─── Offline banner ──────────────────────────────────────────── */ .nx-offline { position: fixed; top: var(--safe-top); left: 0; right: 0; z-index: 9400; padding: 8px 14px; background: linear-gradient(180deg, #3a0d0d, #220707); color: #ff8080; font-size: 12px; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(255,80,80,.25); transform: translateY(-100%); transition: transform .26s cubic-bezier(.2,.9,.25,1); } .nx-offline.visible { transform: translateY(0); } /* ─── Native gesture: swipe-back affordance ───────────────────── */ .nx-swipe-back-edge { position: fixed; left: 0; top: 0; bottom: 0; width: 16px; z-index: 5; pointer-events: auto; /* invisible — captures touch only */ } /* ─── Sheet animations ────────────────────────────────────────── */ @keyframes nx-sheet-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes nx-sheet-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } /* ─── Haptic-target press feedback (purely visual) ────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] button:active, html[data-mobile-active="1"] .btn:active { transform: scale(.97); transition: transform .08s ease-out; } } /* ─── Reels: full-bleed vertical feed on mobile ──────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .reels-container, html[data-mobile-active="1"] .reels-viewport { height: 100dvh; width: 100vw; margin: 0 !important; padding: 0 !important; scroll-snap-type: y mandatory; } html[data-mobile-active="1"] .reel-card { height: 100dvh; scroll-snap-align: start; border-radius: 0 !important; margin: 0 !important; } } /* ─── Loading skeleton — gentler on mobile ────────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .skeleton { background-size: 200% 100%; animation-duration: 1.4s; } } /* ─── Notch / Dynamic Island awareness ────────────────────────── */ @supports (padding-top: env(safe-area-inset-top)) { html[data-mobile-active="1"] .cinematic-intro, html[data-mobile-active="1"] #cinematicIntro { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); } } /* ─── Avoid double-tap zoom on interactive elements ───────────── */ html[data-mobile-active="1"] a, html[data-mobile-active="1"] button, html[data-mobile-active="1"] [role="button"], html[data-mobile-active="1"] .post-card, html[data-mobile-active="1"] .reel-card { touch-action: manipulation; } /* ─── Toasts: float above the tab bar ─────────────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .toast, html[data-mobile-active="1"] .toast-container { bottom: calc(var(--mobile-tabbar-h) + var(--safe-bottom) + 12px) !important; } } /* ─── Auth / unauth: hide chrome ────────────────────────────────── When the auth overlay is up or the user is logged out, the tab bar + FAB shouldn't be visible. native.js sets .nx-no-chrome on in that case; this rule honors it. Auth screen's own bottom padding (added below) is restored to zero so the form sits in its natural vertical flow. */ html.nx-no-chrome .nx-tabbar, html.nx-no-chrome .nx-fab { display: none !important; } html.nx-no-chrome.nx-keyboard-open .nx-tabbar, html.nx-no-chrome.nx-keyboard-open .nx-fab { display: none !important; } html.nx-no-chrome[data-mobile-active="1"] .main-feed, html.nx-no-chrome[data-mobile-active="1"] .feed { padding-bottom: 0 !important; } html.nx-no-chrome #authScreen { padding-bottom: var(--safe-bottom) !important; } /* ─── Keyboard: when open, FAB + tabbar slide off-screen ──────── */ @media (max-width: 820px) { html[data-mobile-active="1"].nx-keyboard-open .nx-tabbar, html[data-mobile-active="1"].nx-keyboard-open .nx-fab { transform: translateY(120%); transition: transform .18s cubic-bezier(.2,.9,.25,1); pointer-events: none; } /* And give the focused input some breathing room above the keyboard */ html[data-mobile-active="1"].nx-keyboard-open input:focus, html[data-mobile-active="1"].nx-keyboard-open textarea:focus { scroll-margin-bottom: calc(var(--keyboard-h, 0px) + 24px); } } /* ─── Wallet deep-link sheet ──────────────────────────────────── */ .nx-wallet-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); z-index: 9700; opacity: 0; transition: opacity .25s ease; pointer-events: none; } .nx-wallet-sheet-backdrop.open { opacity: 1; pointer-events: auto; } .nx-wallet-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9800; background: linear-gradient(180deg, #0c1014 0%, #050708 100%); border-top: 1px solid var(--mobile-border); border-radius: 22px 22px 0 0; padding: 18px 18px calc(22px + var(--safe-bottom)) 18px; transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.9,.25,1); max-height: 80dvh; overflow-y: auto; } .nx-wallet-sheet.open { transform: translateY(0); } .nx-wallet-sheet h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--mobile-ink); } .nx-wallet-sheet p { margin: 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--mobile-ink-dim); } .nx-wallet-sheet-grip { width: 38px; height: 4px; background: rgba(255,255,255,.15); border-radius: 4px; margin: 0 auto 14px; } .nx-wallet-list { display: flex; flex-direction: column; gap: 8px; } .nx-wallet-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: var(--mobile-ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .1s ease; } .nx-wallet-btn:active { background: rgba(0,196,114,.12); transform: scale(.985); } .nx-wallet-btn .nx-wallet-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,.06); flex-shrink: 0; } .nx-wallet-btn .nx-wallet-meta { flex: 1; min-width: 0; } .nx-wallet-btn .nx-wallet-name { font-size: 14px; font-weight: 700; } .nx-wallet-btn .nx-wallet-sub { font-size: 11px; color: var(--mobile-ink-dim); margin-top: 2px; } .nx-wallet-btn .nx-wallet-arrow { color: var(--mobile-accent); font-size: 18px; } .nx-wallet-sheet-cancel { width: 100%; margin-top: 12px; padding: 14px; background: transparent; border: 1px solid rgba(255,255,255,.1); color: var(--mobile-ink); border-radius: 14px; font-weight: 600; cursor: pointer; } /* ════════════════════════════════════════════════════════════════════ P65.613 — Institutional-grade polish layer ──────────────────────────────────────────────────────────────────── */ /* ─── Reduced motion: respect OS setting ────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .nx-fab, .nx-tabbar button[aria-current="true"] svg { transform: none !important; filter: none !important; } } /* ─── High contrast mode: boost borders + remove translucency ───── */ @media (prefers-contrast: more) { html[data-mobile-active="1"] { --mobile-border: rgba(255,255,255,.45); } .nx-tabbar, .nx-wallet-sheet, html[data-mobile-active="1"] header, html[data-mobile-active="1"] .topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--mobile-bg) !important; } } /* ─── Standalone PWA mode (installed to home screen) ────────────── */ @media (display-mode: standalone) { html { background: var(--mobile-bg); } /* Hide any "Install our app!" banner — they're already installed. */ .nx-install-banner { display: none !important; } /* Disable text selection on UI chrome — feels more native. Body text + inputs keep selection (handled via the input rule above). */ html[data-mobile-active="1"] header, html[data-mobile-active="1"] .nx-tabbar, html[data-mobile-active="1"] .post-card-actions { -webkit-user-select: none; user-select: none; } } /* ─── Notch-aware backdrop on the topbar ────────────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] header::before, html[data-mobile-active="1"] .topbar::before, html[data-mobile-active="1"] .app-header::before { /* Solid black behind the status bar area so the blur transition to the notch feels seamless on Dynamic Island devices. */ content: ''; position: absolute; top: calc(-1 * var(--safe-top)); left: 0; right: 0; height: var(--safe-top); background: #000; z-index: -1; } } /* ─── iOS-specific fixes ────────────────────────────────────────── */ @supports (-webkit-touch-callout: none) { /* iOS Safari shrinks fixed elements when keyboard opens — pin them */ html[data-mobile-active="1"] .nx-tabbar { /* Disable that quirky behavior — we handle keyboard via .nx-keyboard-open */ -webkit-transform: translateZ(0); } /* iOS overflow:auto needs -webkit-overflow-scrolling for momentum */ html[data-mobile-active="1"] .main-feed, html[data-mobile-active="1"] .feed, html[data-mobile-active="1"] .modal, html[data-mobile-active="1"] .scroll-container { -webkit-overflow-scrolling: touch; } /* iOS auto-zooms on inputs with font-size < 16px — already enforced above, but also kill the bounce-on-overscroll on the html element (we keep it on individual scrollers via overflow:auto). */ html[data-mobile-active="1"] { position: fixed; width: 100%; height: 100dvh; overflow: hidden; } html[data-mobile-active="1"] body { width: 100%; height: 100dvh; overflow: auto; -webkit-overflow-scrolling: touch; } } /* ─── Focus rings: visible only for keyboard users ──────────────── */ html[data-mobile-active="1"] *:focus { outline: none; } html[data-mobile-active="1"] *:focus-visible { outline: 2px solid var(--mobile-accent); outline-offset: 2px; border-radius: 6px; } /* ─── Selection color: match brand ──────────────────────────────── */ html[data-mobile-active="1"] ::selection { background: rgba(0, 196, 114, .45); color: #fff; } /* ─── Long-press preview suppression on images / cards ──────────── */ html[data-mobile-active="1"] img, html[data-mobile-active="1"] .post-card-media, html[data-mobile-active="1"] .reel-card-media { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* But allow long-press to save on standalone IMG tags inside posts (when the user explicitly wants to save the image) */ html[data-mobile-active="1"] .post-detail img, html[data-mobile-active="1"] [data-allow-save] { -webkit-touch-callout: default; } /* ─── Tap feedback ring (iOS-style highlight) ───────────────────── */ html[data-mobile-active="1"] .post-card, html[data-mobile-active="1"] .reel-card, html[data-mobile-active="1"] .leaderboard-row, html[data-mobile-active="1"] .weekly-row-inner { position: relative; overflow: hidden; } html[data-mobile-active="1"] .post-card::after, html[data-mobile-active="1"] .reel-card::after { content: ''; position: absolute; inset: 0; background: rgba(0, 196, 114, 0); pointer-events: none; transition: background .12s ease-out; } html[data-mobile-active="1"] .post-card:active::after, html[data-mobile-active="1"] .reel-card:active::after { background: rgba(0, 196, 114, .04); } /* ─── Skeleton shimmer: smoother, brand-coloured ────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .skeleton, html[data-mobile-active="1"] .skel, html[data-mobile-active="1"] [data-skeleton] { background: linear-gradient( 90deg, rgba(255,255,255,.04) 0%, rgba(0,196,114,.08) 50%, rgba(255,255,255,.04) 100% ); background-size: 200% 100%; animation: nx-shimmer 1.3s linear infinite; border-radius: 8px; } @keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } } /* ─── Landscape tablet/phone: re-show desktop chrome ────────────── */ /* If the user rotates to landscape on a tablet (≥ 820px wide), drop the mobile overlay so they see the full institutional layout. */ @media (min-width: 821px) and (orientation: landscape) { html[data-mobile-active="1"] .nx-tabbar, html[data-mobile-active="1"] .nx-fab { display: none !important; } } /* ─── Safe-area padding for floating elements ───────────────────── */ .nx-offline { padding-top: calc(8px + var(--safe-top)); } /* ─── Tab bar haptic-press: micro-bounce on the icon ────────────── */ .nx-tabbar button:active::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,196,114,.15) 0%, transparent 70%); pointer-events: none; animation: nx-tap-pulse .35s ease-out; } @keyframes nx-tap-pulse { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.3); } } /* ════════════════════════════════════════════════════════════════════ P65.615 — X-style mobile cleanup ──────────────────────────────────────────────────────────────────── */ /* ─── Kill the desktop floating buttons that overlap content ────── */ @media (max-width: 820px) { html[data-mobile-active="1"] #fabCompose, html[data-mobile-active="1"] #fabMarket, html[data-mobile-active="1"] .fab-create, html[data-mobile-active="1"] .fab-market { display: none !important; } } /* ─── Hide the desktop price ticker on mobile ───────────────────── */ /* Crypto prices belong in their own dedicated tab on mobile, not as a noisy strip eating header space. X / Robinhood / Coinbase all make this exact choice — clean header on mobile, prices in their own section. */ @media (max-width: 820px) { html[data-mobile-active="1"] #trendTicker, html[data-mobile-active="1"] .trend-ticker { display: none !important; } } /* ─── X-style header — slim, brand-only, single row ─────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] header, html[data-mobile-active="1"] .topbar, html[data-mobile-active="1"] .app-header { height: 52px !important; padding: 0 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } /* Hide the desktop search box + EN selector + $NMX badge in the header. On mobile, search lives on its own page and language belongs in Settings. */ html[data-mobile-active="1"] header .global-search-wrap, html[data-mobile-active="1"] header #globalSearch, html[data-mobile-active="1"] header .search-shortcut, html[data-mobile-active="1"] header .nmx-price-chip, html[data-mobile-active="1"] header .lang-switcher, html[data-mobile-active="1"] header .lang-trigger, html[data-mobile-active="1"] .topbar-search, html[data-mobile-active="1"] .topbar-nmx-chip, html[data-mobile-active="1"] .topbar-lang { display: none !important; } /* Slim the logo on mobile */ html[data-mobile-active="1"] header .logo, html[data-mobile-active="1"] header .brand-logo, html[data-mobile-active="1"] header .brand { transform: scale(.85); transform-origin: left center; } /* Notifications bell + avatar stay (X pattern) */ html[data-mobile-active="1"] header .notif-bell, html[data-mobile-active="1"] header #headerAvatar, html[data-mobile-active="1"] header .header-avatar { margin-left: auto; } } /* ─── X-style tabs row — horizontal scroll instead of wrap ──────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .feed-tabs, html[data-mobile-active="1"] .feed-filters, html[data-mobile-active="1"] .sort-tabs, html[data-mobile-active="1"] .tab-row, html[data-mobile-active="1"] .filter-row, html[data-mobile-active="1"] .audience-tabs { display: flex !important; overflow-x: auto !important; overflow-y: hidden; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.08); } html[data-mobile-active="1"] .feed-tabs::-webkit-scrollbar, html[data-mobile-active="1"] .feed-filters::-webkit-scrollbar, html[data-mobile-active="1"] .sort-tabs::-webkit-scrollbar { display: none; } html[data-mobile-active="1"] .feed-tabs > *, html[data-mobile-active="1"] .feed-filters > *, html[data-mobile-active="1"] .sort-tabs > *, html[data-mobile-active="1"] .audience-tabs > * { flex: 0 0 auto; white-space: nowrap; } } /* ─── Post cards — tighter, X-style ─────────────────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .post-card { border-radius: 0 !important; margin: 0 0 1px 0 !important; /* hairline separators, no card gaps */ padding: 12px 14px !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; background: transparent !important; } /* Avatar tighter */ html[data-mobile-active="1"] .post-card .post-author-avatar, html[data-mobile-active="1"] .post-card .post-avatar { width: 40px !important; height: 40px !important; } /* Post body text — X-app sized */ html[data-mobile-active="1"] .post-card .post-body, html[data-mobile-active="1"] .post-card .post-content { font-size: 15px !important; line-height: 1.45 !important; } /* Action bar — smaller icons, equal spacing like X */ html[data-mobile-active="1"] .post-card .post-actions, html[data-mobile-active="1"] .post-card .action-bar { padding: 6px 0 0 !important; gap: 0 !important; display: flex !important; justify-content: space-between !important; max-width: 100%; } html[data-mobile-active="1"] .post-action, html[data-mobile-active="1"] .post-card .post-action { padding: 6px 8px !important; font-size: 12px !important; min-height: 32px !important; min-width: 0 !important; } /* AGING / HOT / TRENDING pills smaller on mobile */ html[data-mobile-active="1"] .post-card .post-pill, html[data-mobile-active="1"] .post-card [class*="pill"] { font-size: 9.5px !important; padding: 2px 6px !important; } } /* ─── Feed container — no padding on mobile (full-bleed like X) ── */ @media (max-width: 820px) { html[data-mobile-active="1"] .main-feed, html[data-mobile-active="1"] .feed, html[data-mobile-active="1"] #mainContent { padding-left: 0 !important; padding-right: 0 !important; } } /* ─── Profile page polish ───────────────────────────────────────── */ @media (max-width: 820px) { /* Bigger avatar (X has a prominent profile picture) */ html[data-mobile-active="1"] .profile-header .profile-avatar, html[data-mobile-active="1"] .profile-avatar-large { width: 80px !important; height: 80px !important; margin-top: -40px !important; /* overlap the banner like X */ border: 4px solid #000 !important; border-radius: 50% !important; } html[data-mobile-active="1"] .profile-banner { aspect-ratio: 3 / 1 !important; border-radius: 0 !important; } /* Stats row — compress */ html[data-mobile-active="1"] .profile-stats .stat-num { font-size: 16px !important; } html[data-mobile-active="1"] .profile-stats .stat-label { font-size: 11px !important; } /* Add Socials button — make it match X's "Edit profile" style */ html[data-mobile-active="1"] .add-socials-btn, html[data-mobile-active="1"] .profile-edit-btn { border-radius: 999px !important; padding: 8px 18px !important; font-weight: 700 !important; font-size: 13px !important; background: transparent !important; border: 1px solid rgba(255,255,255,.4) !important; color: #fff !important; } } /* ─── Composer modal — full-screen X-style ──────────────────────── */ @media (max-width: 820px) { html[data-mobile-active="1"] .composer-modal, html[data-mobile-active="1"] #composerOverlay, html[data-mobile-active="1"] .create-post-modal { border-radius: 0 !important; max-height: 100dvh !important; height: 100dvh !important; bottom: 0 !important; top: 0 !important; } } /* ─── Trending/Topics widgets — hide entirely on mobile feed ──── */ /* They live in the right sidebar which is already hidden, but double-check anything that floats. */ @media (max-width: 820px) { html[data-mobile-active="1"] .weekly-top-3-widget, html[data-mobile-active="1"] .trending-topics-widget, html[data-mobile-active="1"] .viral-now-widget, html[data-mobile-active="1"] .right-rail { display: none !important; } } /* ─── Install prompt banner styling (rendered by JS, optional) ──── */ .nx-install-banner { position: fixed; bottom: calc(var(--mobile-tabbar-h) + var(--safe-bottom) + 12px); left: 12px; right: 12px; z-index: 9300; padding: 12px 14px; background: linear-gradient(135deg, #0d1418, #0a0c0d); border: 1px solid var(--mobile-border); border-radius: 14px; color: var(--mobile-ink); font-size: 13px; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6); transform: translateY(120%); transition: transform .3s cubic-bezier(.2,.9,.25,1); } .nx-install-banner.visible { transform: translateY(0); } .nx-install-banner-text { flex: 1; line-height: 1.4; } .nx-install-banner-text strong { color: var(--mobile-accent); } .nx-install-banner button { padding: 8px 14px; border: 0; background: var(--mobile-accent); color: #001a0d; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; } .nx-install-banner .nx-install-dismiss { background: transparent; color: var(--mobile-ink-dim); padding: 4px 8px; font-size: 18px; line-height: 1; }