/* NIBVOK shared top bar — Back button + mascot. Self-contained: no build step, no dependencies, no external assets. Injected by js/nibvok-topbar.js. Cluster id: #nibvok-topbar */ #nibvok-topbar { --nv-tb-fg: #0f0e17; --nv-tb-bg: #ffffff; --nv-tb-bg-hover: #f0efff; --nv-tb-border: rgba(15, 14, 23, 0.12); --nv-tb-accent: #6c63ff; --nv-tb-bar-bg: rgba(247, 247, 251, 0.94); display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin: 0 12px 0 0; padding: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1; vertical-align: middle; text-align: left; } #nibvok-topbar .nibvok-topbar-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--nv-tb-border); border-radius: 10px; background: var(--nv-tb-bg); color: var(--nv-tb-fg); font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; } #nibvok-topbar .nibvok-topbar-back:hover { background: var(--nv-tb-bg-hover); border-color: var(--nv-tb-accent); color: var(--nv-tb-accent); } #nibvok-topbar .nibvok-topbar-arrow { font-size: 15px; line-height: 1; } #nibvok-topbar .nibvok-topbar-mascot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; text-decoration: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #nibvok-topbar .nibvok-topbar-mascot:hover { background: var(--nv-tb-bg-hover); } #nibvok-topbar .nibvok-topbar-mascot:hover svg { transform: scale(1.06); } #nibvok-topbar .nibvok-topbar-mascot:active svg { transform: scale(0.97); } #nibvok-topbar .nibvok-topbar-mascot svg { display: block; width: 32px; height: 32px; border-radius: 10px; transition: transform 120ms ease-out; } #nibvok-topbar .nibvok-topbar-back:focus-visible, #nibvok-topbar .nibvok-topbar-mascot:focus-visible { outline: 2px solid var(--nv-tb-accent); outline-offset: 2px; } /* Fixed-position fallback: used only when the page has no nav/header to prepend into. */ #nibvok-topbar.nibvok-topbar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; display: flex; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--nv-tb-border); background: var(--nv-tb-bar-bg); -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px); } /* Keep the fixed bar from covering page content. */ body.nibvok-topbar-has-fixed { padding-top: 54px; } @media (prefers-color-scheme: dark) { #nibvok-topbar { --nv-tb-fg: #ffffff; --nv-tb-bg: #1c1b2a; --nv-tb-bg-hover: #2a2a40; --nv-tb-border: rgba(255, 255, 255, 0.18); --nv-tb-bar-bg: rgba(15, 14, 23, 0.94); } } /* Explicit app dark mode (pages toggle .dark on ). */ .dark #nibvok-topbar, html.dark #nibvok-topbar { --nv-tb-fg: #ffffff; --nv-tb-bg: #1c1b2a; --nv-tb-bg-hover: #2a2a40; --nv-tb-border: rgba(255, 255, 255, 0.18); --nv-tb-bar-bg: rgba(15, 14, 23, 0.94); } @media (max-width: 480px) { #nibvok-topbar { margin-right: 8px; gap: 6px; } #nibvok-topbar .nibvok-topbar-back { padding: 0 10px; } } /* ------------------------------------------------------------------------ Walking-mascot overlay — "AI is working on your video…". Injection by js/nibvok-topbar.js (#nibvok-mascot-walk, .nv-mascot-walk-on). The whole layer is inert: pointer-events:none, so it can never eat a click. ------------------------------------------------------------------------ */ #nibvok-mascot-walk { --nv-walk-fg: #0f0e17; --nv-walk-sub: #4a4763; --nv-walk-card: rgba(255, 255, 255, 0.96); --nv-walk-border: rgba(15, 14, 23, 0.10); --nv-walk-shadow: 0 18px 44px rgba(15, 14, 23, 0.18); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2147482000; /* Inert by design: the overlay must never intercept a click. */ pointer-events: none; -webkit-user-select: none; user-select: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; /* Hidden state: not painted, not announced, no layout or paint cost. */ opacity: 0; visibility: hidden; transition: opacity 160ms ease-out; } #nibvok-mascot-walk.nv-mascot-walk-on { opacity: 1; visibility: visible; } #nibvok-mascot-walk .nv-mascot-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 26px 18px; border: 1px solid var(--nv-walk-border); border-radius: 20px; background: var(--nv-walk-card); box-shadow: var(--nv-walk-shadow); -webkit-backdrop-filter: saturate(150%) blur(8px); backdrop-filter: saturate(150%) blur(8px); } #nibvok-mascot-walk .nv-mascot-stage { position: relative; display: block; width: 88px; height: 121px; line-height: 0; /* The walk cycle: whole body bobs while the legs swing (below). */ animation: nv-mascot-bob 0.62s ease-in-out infinite; } #nibvok-mascot-walk .nv-mascot-stage svg { display: block; width: 88px; height: 121px; overflow: visible; } /* Legs pivot at the hip; opposite phases read as a walk. */ #nibvok-mascot-walk .nv-mascot-leg { transform-box: fill-box; transform-origin: 50% 0%; } #nibvok-mascot-walk .nv-mascot-leg-l { animation: nv-mascot-step-a 0.62s ease-in-out infinite; } #nibvok-mascot-walk .nv-mascot-leg-r { animation: nv-mascot-step-b 0.62s ease-in-out infinite; } #nibvok-mascot-walk .nv-mascot-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: nv-mascot-shadow 0.62s ease-in-out infinite; } #nibvok-mascot-walk .nv-mascot-msg { margin: 0; max-width: 22ch; color: var(--nv-walk-fg); font-size: 15px; font-weight: 600; line-height: 1.35; } @keyframes nv-mascot-bob { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } } @keyframes nv-mascot-step-a { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } } @keyframes nv-mascot-step-b { 0%, 100% { transform: rotate(13deg); } 50% { transform: rotate(-13deg); } } @keyframes nv-mascot-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.82); opacity: 0.65; } } @media (prefers-color-scheme: dark) { #nibvok-mascot-walk { --nv-walk-fg: #ffffff; --nv-walk-sub: #c9c6e4; --nv-walk-card: rgba(28, 27, 42, 0.96); --nv-walk-border: rgba(255, 255, 255, 0.16); --nv-walk-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } } /* Explicit app dark mode (pages toggle .dark on ). */ .dark #nibvok-mascot-walk, html.dark #nibvok-mascot-walk { --nv-walk-fg: #ffffff; --nv-walk-sub: #c9c6e4; --nv-walk-card: rgba(28, 27, 42, 0.96); --nv-walk-border: rgba(255, 255, 255, 0.16); --nv-walk-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); } /* The user asked not to be moved: hold the mascot still, keep the message. */ @media (prefers-reduced-motion: reduce) { #nibvok-mascot-walk .nv-mascot-stage, #nibvok-mascot-walk .nv-mascot-leg-l, #nibvok-mascot-walk .nv-mascot-leg-r, #nibvok-mascot-walk .nv-mascot-shadow { animation: none !important; } #nibvok-mascot-walk { transition: none; } }