/* ───── Offline pill (non-blocking) ───── */ /* SYNC-MELDING-IS-EEN-PIL-OVERAL — these rules used to live in app.css only, but api.js appends #fz-offline-pill to whatever document imports it, and the coach app loads coach.css and never app.css. Unstyled, the pill was a full-width block at the bottom of with a stretched 24x24 cloud SVG. ONE file, mirrored by deploy.sh into the coach docroot alongside the app's assets, so both origins link the same source of truth (no second copy to drift). Every custom property is written with a fallback for the same reason: this file must survive in a document whose token set is not app.css'. */ /* OFFLINE-BANNER-NONBLOCKING-PILL — replaces the old full-width offline overlay (position:fixed;left:0;right:0;top:0;z-index:9999) which covered the chat notification bell. pointer-events:none is the whole point: the pill informs, it never intercepts a tap. Only the '?' help button opts back in. */ .fz-offline-pill { position: fixed; top: calc(var(--safe-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 90; /* under toasts (100), chat notif sheet, topbar chip */ display: inline-flex; align-items: center; gap: 6px; max-width: min(88vw, 360px); padding: 4px 10px; border-radius: var(--radius-pill, 999px); background: var(--ink, #0F172A); color: var(--bg, #F1F5F9); font-size: 12px; line-height: 1.25; box-shadow: 0 1px 6px rgba(0, 0, 0, .20); pointer-events: none; opacity: 0; transition: opacity var(--dur-base, .2s) var(--ease-standard, ease), max-width var(--dur-base, .2s) var(--ease-standard, ease); } .fz-offline-pill[hidden] { display: none; } .fz-offline-pill--visible { opacity: 1; } .fz-offline-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* SYNC-MERKTEKEN-IN-PLAATS-VAN-BALK — the icon is the ONLY part that opts back into taps (the pill itself keeps pointer-events:none above; that rule is the reason the old full-width banner could be retired). Tapping it expands the sentence; tapping anywhere else still falls through to the app. */ .fz-offline-pill__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; pointer-events: auto; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; cursor: pointer; } .fz-offline-pill__icon svg { width: 14px; height: 14px; } /* Count carried by the badge while collapsed; the sentence carries it when open. */ .fz-offline-pill__badge { position: absolute; top: -5px; right: -7px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px; font-size: 9px; line-height: 13px; font-weight: 600; text-align: center; background: var(--accent, #2AF0EA); color: var(--on-accent, #03040A); } .fz-offline-pill__badge--failed { background: var(--danger, #FF1744); color: #fff; } .fz-offline-pill__badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: -3px; right: -4px; } .fz-offline-pill--expanded .fz-offline-pill__badge { display: none; } .fz-offline-pill .fz-lc-help { pointer-events: auto; /* the only interactive affordance on the pill */ margin-left: 6px; flex: 0 0 auto; width: 18px; height: 18px; line-height: 16px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; padding: 0; cursor: pointer; } /* Chat surface keeps its own header + bell at the top edge — clear it entirely. */ body.is-chat .fz-offline-pill { top: calc(var(--safe-top, 0px) + 56px); } /* Coach hub renders its own sticky .cshell (8 + 40 + 8 + 1px border = 57px) at the top edge of the iframe; the pill has to clear that whole bar or it lands on the client search field. */ body.tab-coach-hub .fz-offline-pill { top: calc(var(--safe-top, 0px) + 65px); } /* SYNC-MERKTEKEN-IN-PLAATS-VAN-BALK — collapsed is the RESTING state on every width. This used to sit behind a 340px-ceiling media query, which no phone in use reaches (SE 375, 15 393), so the collapsed state was dead code and the dark bar stayed on screen. Collapsed = a ~24px round mark, nothing more. The old query's literal text is deliberately NOT repeated here: the ship gate greps this file for it, and a comment quoting the rule would keep the gate red forever (kaizen 2026-08-21 — a gate measures characters, not intent). */ .fz-offline-pill--collapsed { width: 24px; height: 24px; max-width: 24px; padding: 0; gap: 0; border-radius: 50%; justify-content: center; } .fz-offline-pill--collapsed .fz-offline-pill__label, .fz-offline-pill--collapsed .fz-lc-help { display: none; } .fz-offline-pill--collapsed .fz-offline-pill__icon { width: 100%; height: 100%; }