/* ═══════════════════════════════════════════════════════════════════════════ SOKONI — CANONICAL TOAST CONTAINMENT --------------------------------------------------------------------------- ONE stylesheet that makes EVERY toast in SOKONI viewport-safe, on every page, without rewriting the ~81 page-local toast implementations. Injected on all 313 shared-header pages (shared-header.js PHASE 1, alongside sokoni-tokens.css) and linked directly on the handful that do not load it. ── WHY CLAMP AND NOT REPOSITION ────────────────────────────────────────── The obvious fix ("force left:16px; right:16px") is WRONG here and was rejected after auditing the real markup. SOKONI has two toast anchoring conventions in production: A. corner-anchored .toast{position:fixed;bottom:24px;right:24px} (~35) B. centre-anchored .toast{position:fixed;bottom:24px;left:50%; transform:translateX(-50%)} (~46) Forcing `left`/`right` on convention B leaves translateX(-50%) in place and shifts every one of those 46 toasts off-screen by half its own width — trading a clipping bug for a worse one. So this sheet never touches the anchor. It constrains WIDTH instead: max-width = 100vw - (2 x gutter) - safe-area insets That single invariant is sufficient for both conventions: · centre-anchored → box narrower than the viewport, centred → fully visible · corner-anchored → box narrower than (viewport - its own offset) → fully visible and it can never be the cause of horizontal page scrolling. ── VERTICAL ────────────────────────────────────────────────────────────── Bottom-nav / safe-area clearance is applied as `margin-bottom`, NOT `bottom`. For a bottom-anchored fixed box margin-bottom lifts it above the nav; for a top-anchored one (#notificationContainer is top:24px) `bottom` is auto so the margin is inert. One rule, correct for both, no per-page knowledge needed. --sk-bottom-nav-h is MEASURED from the live .bottom-nav element by sokoni-layout.js, so it is genuinely 0px on pages that have no bottom nav — no page here has to opt in or out. ── SELECTOR STRATEGY ───────────────────────────────────────────────────── Toast roots are named 40+ different ways across the repo (toast, toastWrap, msToast, carHubToast, wal-toast, inv-toast-container, …) but every one of them contains the substring "toast", and every one of them is a DIRECT CHILD OF (a fixed overlay always is). `body > [id*="toast" i]` therefore hits all of them while never hitting inner parts (.toast-icon, .toast-body), which must not be given overlay geometry. Do NOT add page-local toast positioning after this. Extend this file. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Breathing room between a toast and the viewport edge. */ --sk-toast-gutter: 16px; /* Desktop cap — long messages wrap rather than growing a wide ribbon. */ --sk-toast-max: 420px; /* Bottom nav + home-indicator clearance. --sk-bottom-nav-h is measured live by sokoni-layout.js; both fall back to 0px so this is inert where unused. */ --sk-toast-clear: calc(var(--sk-bottom-nav-h, 0px) + var(--sk-safe-bottom, 0px)); } /* ─────────────────────────────────────────────────────────────────────────── 1. TOAST ROOTS — viewport containment `!important` is required and intentional: many toasts are built in JS with inline style.cssText, which outranks any normal-weight rule. ─────────────────────────────────────────────────────────────────────────── */ body > [id*="toast" i], body > [class*="toast" i], body > #notificationContainer { box-sizing: border-box !important; /* THE invariant: a toast can never be wider than the safe viewport. */ max-width: min( var(--sk-toast-max), calc(100vw - (var(--sk-toast-gutter) * 2) - var(--sk-safe-left, 0px) - var(--sk-safe-right, 0px)) ) !important; /* Landscape notch / rounded-corner insets. Inert unless the box is actually anchored to that edge, so centre-anchored toasts are unaffected. */ margin-right: var(--sk-safe-right, 0px) !important; margin-left: var(--sk-safe-left, 0px) !important; /* Clear the fixed bottom nav and the home indicator. Inert on top-anchored. */ margin-bottom: var(--sk-toast-clear) !important; /* Above the bottom nav (9996), FABs and chat buttons. */ z-index: var(--sk-z-toast, 200002) !important; /* A root that was set to nowrap is precisely the overflow defect. Inner elements keep their own nowrap (e.g. action buttons) — they are not direct children of body so this rule does not reach them. */ white-space: normal !important; } /* ─────────────────────────────────────────────────────────────────────────── 2. LONG MESSAGES — wrap instead of overflowing. Normal weight: pages may legitimately override wrapping on inner parts. ─────────────────────────────────────────────────────────────────────────── */ [id*="toast" i], [class*="toast" i], #notificationContainer, .notification { overflow-wrap: anywhere; word-break: break-word; } /* An action button ("Try again") must stay tappable and must never be the reason the toast outgrows the viewport. */ body > [id*="toast" i] button, body > [class*="toast" i] button, body > #notificationContainer button { max-width: 100%; min-height: 38px; /* WCAG-comfortable touch target on phones */ } /* ─────────────────────────────────────────────────────────────────────────── 3. MOBILE — tighter gutter, no desktop width cap. Only the two custom properties change; no anchor is touched, so both anchoring conventions keep working exactly as designed. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { :root { --sk-toast-gutter: 12px; --sk-toast-max: 100vw; /* the calc() above is what actually constrains */ } } /* ─────────────────────────────────────────────────────────────────────────── 4. REDUCED MOTION — respect the OS setting for toast entrance animations. ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body > [id*="toast" i], body > [class*="toast" i], body > #notificationContainer, .notification { animation-duration: 1ms !important; transition-duration: 1ms !important; } }