/* ============================================================ Yaloo — iPhone / mobile app experience Loads after the main bundle CSS so it can override the existing responsive rules (which previously hid all nav). ============================================================ */ :root { --yal-mnav-h: 54px; --yi-mobile-spaces-dock-h: 0px; } html { -webkit-text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; } /* App chrome is hidden by default (desktop / logged-out). It is only shown on small screens when the app shell is mounted. */ #yal-mnav, #yal-fab, .yal-mnav-backdrop { display: none; } /* Phones + tablets (touch) — native app shell */ @media (max-width: 1100px) and (pointer: coarse), (max-width: 760px) { /* ---- Full-width single-column feed ---- */ body .x-shell { grid-template-columns: 1fr; } body .x-center { border: none; padding-bottom: calc(var(--yal-mnav-h) + env(safe-area-inset-bottom, 0px) + 12px); } /* Sticky header clears the notch / status bar */ .x-center-head { padding-top: env(safe-area-inset-top, 0px); } /* ---- Left sidebar -> slide-in drawer (opened via the More tab) ---- */ body .x-left { display: flex; position: fixed; top: 0; left: 0; z-index: 1200; width: min(84vw, 320px); height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); border-right: 1px solid var(--border); padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-104%); transition: transform 0.25s ease; box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); } body.yal-drawer-open .x-left { transform: translateX(0); z-index: 12760; } body .x-left .x-nav-btn { text-align: left; padding-inline: 0.9rem; } /* Drawer backdrop */ body.yal-has-shell .yal-mnav-backdrop { display: block; position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } body.yal-drawer-open .yal-mnav-backdrop { opacity: 1; /* Do NOT capture taps. The drawer (.x-left) lives inside the app's #root wrapper, while this backdrop is a child; if a wrapper creates a stacking context, a tap-capturing backdrop paints on top of the drawer and makes the menu look visible but unclickable. Keeping it pointer-events:none lets taps reach the drawer in every stacking case; closing on an outside tap is handled in JS instead. */ pointer-events: none; z-index: 12740; } /* ---- Bottom tab bar ---- */ body.yal-has-shell #yal-mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12600; height: calc(var(--yal-mnav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); justify-content: space-around; align-items: stretch; } .yal-mnav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; border-radius: 0; padding: 3px 0; margin: 0; color: var(--muted); position: relative; } .yal-mnav-btn.active { color: var(--blue); } .yal-mnav-btn svg { width: 23px; height: 23px; display: block; } .yal-mnav-label { font-size: 9px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Hide right sidebar on phone — Spaces live card moves into feed column */ body .x-right { display: none; } body .x-center { max-width: 100%; } #yi-live-panel { margin: 0; border-radius: 0; border-left: none; border-right: none; } /* Mobile Spaces UI lives in the Spaces tab (not a bottom dock) */ body.yal-has-shell #yi-live-panel.yi-live-panel-mobile-dock, #yi-live-panel.yi-live-panel-mobile-dock { display: none !important; pointer-events: none !important; } body.yal-has-shell:not(.yi-space-shell-hidden) .x-center { padding-bottom: calc(var(--yal-mnav-h) + env(safe-area-inset-bottom, 0px) + 12px) !important; } body.yi-in-space-mobile #yi-live-panel.yi-live-panel-mobile-dock { display: none !important; } body.yi-space-shell-hidden #yal-fab { display: none !important; } /* Legacy dock rules — dock removed; keep FAB default position */ body.yal-has-shell #yal-fab { bottom: calc(var(--yal-mnav-h) + env(safe-area-inset-bottom, 0px) + 16px) !important; } #yi-live-panel.yi-live-panel-mobile-dock .yi-panel-head { font-size: 0.82rem; padding: 0 0 6px; font-weight: 700; color: var(--muted); } .yal-mnav-badge { position: absolute; top: 1px; left: calc(50% + 5px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #000; } /* ---- Floating compose button ---- */ body.yal-has-shell #yal-fab { display: flex; position: fixed; right: 16px; bottom: calc(var(--yal-mnav-h) + env(safe-area-inset-bottom, 0px) + 16px); z-index: 999; width: 54px; height: 54px; border-radius: 50%; align-items: center; justify-content: center; background: var(--blue); color: #fff; border: none; box-shadow: 0 6px 20px rgba(29, 155, 240, 0.45); padding: 0; } #yal-fab svg { width: 26px; height: 26px; } /* Prevent iOS auto-zoom on focus (needs >=16px font on the control) */ input, textarea, select { font-size: 16px; } html, body { overflow-x: hidden; overscroll-behavior-y: none; width: 100%; max-width: 100vw; } body.yal-has-shell { min-height: 100dvh; -webkit-overflow-scrolling: touch; } body .x-shell { width: 100%; max-width: 100vw; overflow-x: hidden; min-width: 0; } body .x-center, body .x-center-main, body .x-feed { width: 100%; max-width: 100vw; min-width: 0; overflow-x: hidden; } .x-post-row, .x-post-header, .x-post-body, .x-compose, .x-compose-top, .yal-home-compose { max-width: 100%; min-width: 0; } .x-identity-line { display: inline-flex; align-items: center; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; } .x-identity-line strong, .x-identity-line .x-user-link-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .x-post-media img, .x-post-media video { max-width: 100%; height: auto; } .x-center-head { position: sticky; top: 0; z-index: 50; background: var(--bg); } body.yal-has-shell .x-share-modal, body.yal-has-shell .x-space-modal, body.yal-has-shell .x-bookmark-modal, body.yal-has-shell .yal-follows-modal, body.yal-has-shell .yal-edit-profile-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; top: 0; left: 0; transform: none; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } body.yal-modal-open #yal-fab, body.yal-drawer-open #yal-fab { opacity: 0; pointer-events: none; } .x-profile-hero, .x-profile-topbar { max-width: 100vw; } .yal-show-posts-bar { margin: 0; border-radius: 0; border-left: none; border-right: none; } .x-nav-btn, .yal-mnav-btn, .x-post-btn, button.x-user-link-btn { min-height: 44px; } /* App-like full-bleed modals / sheets */ .x-share-modal, .x-space-modal, .x-bookmark-modal { max-width: 100vw; } } /* ── Touch app shell (phones + tablets) ── */ body.yal-touch-app { touch-action: manipulation; } /* ── Tablet / iPad — centered feed, larger chrome ── */ @media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) { :root { --yal-mnav-h: 58px; --yi-mobile-spaces-dock-h: 188px; } body.yal-has-shell .x-center { max-width: min(720px, 100%); margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } body.yal-has-shell #yal-fab { right: max(20px, calc((100vw - min(720px, 100vw)) / 2 + 20px)); } body.yal-has-shell #yi-live-panel.yi-live-panel-mobile-dock { left: max(0px, calc((100vw - min(720px, 100vw)) / 2)) !important; right: max(0px, calc((100vw - min(720px, 100vw)) / 2)) !important; width: auto !important; max-width: min(720px, 100%) !important; } .yal-mnav-btn svg { width: 26px; height: 26px; } .yal-mnav-label { font-size: 11px; } .yal-mnav-badge { min-width: 18px; height: 18px; font-size: 10px; } body.yal-has-shell #yal-fab { width: 58px; height: 58px; } /* Monica — full-width chat on tablet */ .ym-chat { max-width: 100% !important; padding: 0 24px !important; } .ym-quick-btn { padding: 12px 18px; font-size: 0.92rem; min-height: 44px; } /* Chat grid stacks like phone */ .yal-chat-grid { grid-template-columns: 1fr !important; } .yal-chat-main { min-height: 55vh; } } /* Tablet Space room — slightly larger stage */ @media (min-width: 761px) and (max-width: 1100px) and (pointer: coarse) { body.yi-in-space-tablet .yi-live-room .yi-speaker-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; gap: 16px 10px !important; } body.yi-in-space-tablet .yi-live-room .yi-speaker-av-wrap { width: clamp(72px, 14vw, 96px) !important; height: clamp(72px, 14vw, 96px) !important; } body.yi-in-space-tablet .yi-mic-btn, body.yi-in-space-tablet .yi-hand-btn { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; } body.yi-in-space-tablet .yi-live-room-title { font-size: 1.2rem !important; } } /* Spaces tab: hide feed duplicate — panel has the single Create button */ body.yal-touch-app:has(#yi-spaces-tab-panel) .x-center section.x-settings-wrap:has(> .x-post-btn) { display: none !important; }