/* ============================================================ SXMeets Mobile OS v3 — chassis layout ------------------------------------------------------------ Phone-frame preview, iOS status bar, app bar skeleton, body scroll region, bottom tabbar geometry, sheet + scrim positioning, toast stack positioning, Dynamic Island base. The OS file is responsible for ISLAND CONTENT (per-status expansion text + pins) and for STATUS-MODE GRADIENTS. This file styles only the structure. Depends on: chassis-tokens.css (for vars). Extracted 2026-05-29 from Batch 1 v3 files. ============================================================ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: #08090C; color: #BCC1CD; font-family: var(--font); font-size: 14px; line-height: 1.45; font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum'; -webkit-font-smoothing: antialiased; min-height: 100vh; } .mono, [class*="num"], .val, .num, .lab, .sub, .meta, .addr, .delta, .card-val, .card-sub { font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════ PHONE-FRAME PREVIEW (?frame=ios|android) ──────────────────────────────────────────────────────────── When the OS file boot script sees ?frame=ios or ?frame=android it sets . These rules render the app inside an iPhone/Android-shaped chrome so a desktop reviewer can see the full PWA without devtools. On real mobile (no query param) the rules are a no-op. ════════════════════════════════════════════════════════════ */ body[data-frame] { background: #08090C; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } body[data-frame] .screen { width: 393px; height: 852px; border-radius: 56px; border: 14px solid #1c1c1e; box-shadow: 0 25px 60px -10px rgba(0,0,0,.55), 0 0 0 2px #000; overflow: hidden; } body[data-frame="android"] .screen { border-radius: 32px; border-width: 8px; } @media (max-width: 480px) { body[data-frame] { padding: 0; } body[data-frame] .screen { width: 100vw; height: 100vh; border-radius: 0; border: 0; box-shadow: none; } } /* ════════════════════════════════════════════════════════════ DYNAMIC ISLAND — base shape + transition. The OS file controls expansion via [data-island=""] on and ships its own .pill-content markup + transition keyframe (islandFadeIn). The OS-specific "ride / serving / treating / stay" expansion content stays inline per file. ════════════════════════════════════════════════════════════ */ .island { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); height: 34px; width: 110px; border-radius: 22px; background: #000; z-index: 100; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: width .35s cubic-bezier(.32,.72,.30,1), height .35s cubic-bezier(.32,.72,.30,1), border-radius .35s cubic-bezier(.32,.72,.30,1); box-shadow: 0 0 0 2px rgba(255,255,255,.02); } .island .cam { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #2C3140 0%, #060708 70%); box-shadow: inset 0 0 1px rgba(255,255,255,.22); z-index: 5; } /* Pill content is hidden until OS triggers expansion */ .island .pill-content { display: none; } /* Generic expansion target — OS file usually scopes its own selector (body[data-island="ride"] / "active" / "stay" / "treating") for fine-grained per-state width control. This default fires for any non-empty data-island. */ body[data-island]:not([data-island=""]):not([data-island="idle"]) .island { width: 320px; height: 56px; border-radius: 28px; padding: 0 14px; } body[data-island]:not([data-island=""]):not([data-island="idle"]) .island .pill-content { display: flex; align-items: center; gap: 10px; width: 100%; padding-right: 22px; animation: islandFadeIn .35s ease; } @keyframes islandFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ──────────────────────────────────────────────────────────── SIMULATED iPHONE CHROME IS PREVIEW-ONLY. On a real device the hardware already provides the notch / Dynamic Island, so the fake camera dot + idle pill must NOT render in the live app — they belong only inside a ?frame= device preview. (Mirrors restos-mobile-v3 reference behaviour.) The FUNCTIONAL live-status pill still appears when the OS expands the island into an active state. ──────────────────────────────────────────────────────────── */ body:not([data-frame]) .island { display: none; } body:not([data-frame]) .island .cam { display: none; } body:not([data-frame])[data-island]:not([data-island=""]):not([data-island="idle"]) .island { display: flex; } /* The fake iOS status bar (mock time / signal / battery) is also preview-only — on a real device the OS draws the real one. Hide it off-frame and reclaim the space with proper safe-area insets so content tucks under the real notch instead of the fake bar. */ body:not([data-frame]) .statusbar { display: none; } body:not([data-frame]) .appbar { padding-top: max(12px, env(safe-area-inset-top)); } body:not([data-frame]) .tabbar { padding-bottom: max(8px, env(safe-area-inset-bottom)); } body:not([data-frame]) .body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ════════════════════════════════════════════════════════════ SCREEN — root flex column. Holds statusbar, appbar, body, tabbar. ════════════════════════════════════════════════════════════ */ .screen { border-radius: 40px; overflow: hidden; background: var(--bg); height: 100%; position: relative; display: flex; flex-direction: column; } body:not([data-frame]) .screen { /* On real device, fill viewport */ min-height: 100vh; } /* ════════════════════════════════════════════════════════════ iOS STATUS BAR — mono numerals, full-width, pads when island expands ════════════════════════════════════════════════════════════ */ .statusbar { height: 48px; padding: 16px 32px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--ink); flex: 0 0 auto; font-variant-numeric: tabular-nums; transition: padding .25s; } body[data-island]:not([data-island=""]):not([data-island="idle"]) .screen .statusbar { padding-top: 30px; } .statusbar .icons { display: flex; gap: 6px; align-items: center; color: var(--ink); } .statusbar svg { display: block; } /* ════════════════════════════════════════════════════════════ APP BAR SKELETON The OS file fills in: brand-mark text/SVG, brand-text title, action-chip mount, bell + settings icon-btns. ════════════════════════════════════════════════════════════ */ .appbar { display: flex; align-items: center; gap: 8px; padding: 6px 14px 12px; flex: 0 0 auto; } .brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .brand-mark { width: 28px; height: 28px; background: var(--accent); color: var(--ink-on-accent); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: -.02em; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--accent-glow), 0 4px 12px var(--accent-glow); } .brand-text { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .brand-text small { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-weight: 500; margin-top: 1px; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: background .12s; position: relative; } .icon-btn:hover, .icon-btn:active { background: var(--surface-2); color: var(--ink); } .icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); border: 2px solid var(--bg); } /* ════════════════════════════════════════════════════════════ BODY (scrollable) — between appbar and tabbar 100px bottom padding clears tabbar + iOS home indicator. ════════════════════════════════════════════════════════════ */ .body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 100px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .body::-webkit-scrollbar { width: 0; } /* ════════════════════════════════════════════════════════════ BOTTOM TABBAR — geometry only. Component styles (active tint, badges) in chassis-components.css. ════════════════════════════════════════════════════════════ */ .tabbar { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 0 28px; background: rgba(20,17,13,.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--line); z-index: 50; } [data-theme="light"] .tabbar { background: rgba(244,241,234,.95); } /* ════════════════════════════════════════════════════════════ SHEET + SCRIM POSITIONING (component styling is in chassis-components.css — this file owns only the layout.) ════════════════════════════════════════════════════════════ */ .sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet-scrim.open { opacity: 1; pointer-events: auto; } .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 210; transform: translateY(100%); transition: transform .25s; max-height: 82%; overflow-y: auto; } .sheet.open { transform: translateY(0); } /* ════════════════════════════════════════════════════════════ TOAST STACK POSITIONING ════════════════════════════════════════════════════════════ */ .toast-stack { position: absolute; top: 8px; left: 12px; right: 12px; z-index: 400; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }