/* RBLURRR HOLOGRAM CONCIERGE — chrome for the 3D avatar + chat */ .holo-stage { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 260px; height: 340px; z-index: 9200; pointer-events: none; font-family: 'Inter', 'Segoe UI', sans-serif; color: #f2e6cf; background: transparent; transform-origin: bottom right; transition: transform .6s cubic-bezier(.22,.9,.28,1); will-change: transform; } .holo-stage * { pointer-events: auto; } /* The canvas lives OUTSIDE .holo-stage, directly under . A fixed z-indexed parent is a stacking context, and mix-blend-mode can only blend against its own stacking context's backdrop — inside the stage the blend saw nothing but the stage's transparent background, which is why the black box survived. As a body-level element the canvas screen-blends against the real page: black renders as fully transparent on every browser and GPU, no alpha-channel cooperation needed from the WebGL bloom pipeline. */ #holoCanvas { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 260px; height: 340px; z-index: 9199; /* just under the stage HUD */ cursor: grab; background: transparent; touch-action: none; pointer-events: auto; mix-blend-mode: screen; transform-origin: bottom right; transition: transform .6s cubic-bezier(.22,.9,.28,1); will-change: transform; } #holoCanvas:active { cursor: grabbing; } .holo-hud { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; gap: 8px; align-items: center; padding: 6px 8px; background: transparent; } .holo-btn { width: 34px; height: 34px; border: 1px solid rgba(255, 210, 119, 0.35); background: rgba(20, 12, 6, 0.7); color: #ffd277; border-radius: 999px; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; backdrop-filter: blur(6px); } .holo-btn:hover { border-color: #ffd277; background: rgba(40, 22, 10, 0.85); transform: translateY(-1px); } .holo-btn.on { border-color: #ff7a3d; color: #ff7a3d; box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.18), 0 0 20px rgba(255, 122, 61, 0.35); animation: holo-pulse 1.4s ease-in-out infinite; } .holo-btn svg { width: 16px; height: 16px; stroke-width: 1.7; } @keyframes holo-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.18), 0 0 18px rgba(255, 122, 61, 0.3); } 50% { box-shadow: 0 0 0 5px rgba(255, 122, 61, 0.28), 0 0 28px rgba(255, 122, 61, 0.5); } } .holo-chat { flex: 1; display: flex; align-items: center; } #holoChatInput { flex: 1; width: 100%; padding: 8px 12px; background: rgba(20, 12, 6, 0.7); border: 1px solid rgba(255, 210, 119, 0.25); border-radius: 999px; color: #f2e6cf; font: 500 12px/1 'Inter', sans-serif; outline: none; transition: border-color .2s; backdrop-filter: blur(6px); } #holoChatInput:focus { border-color: #ffd277; } #holoChatInput::placeholder { color: rgba(242, 230, 207, 0.5); } .holo-bubble { position: absolute; left: -14px; right: -14px; top: -6px; padding: 10px 14px; background: linear-gradient(135deg, rgba(255, 210, 119, 0.14), rgba(255, 122, 61, 0.10)); border: 1px solid rgba(255, 210, 119, 0.30); border-radius: 14px; font: 500 12.5px/1.4 'Inter', sans-serif; color: #f7ecd6; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 210, 119, 0.15); max-height: 140px; overflow: hidden; } .holo-bubble.on { opacity: 1; transform: translateY(0); pointer-events: auto; } .holo-bubble::after { content: ''; position: absolute; left: 40%; bottom: -6px; width: 12px; height: 12px; background: linear-gradient(135deg, rgba(255, 210, 119, 0.14), rgba(255, 122, 61, 0.10)); border-right: 1px solid rgba(255, 210, 119, 0.30); border-bottom: 1px solid rgba(255, 210, 119, 0.30); transform: rotate(45deg); } /* mobile — a compact stage with the chat input BELOW the avatar so people on iOS Safari (which has no SpeechRecognition) still have a way in. mic auto-hides via .no-mic when the browser lacks recognition. */ @media (max-width: 720px) { .holo-stage { width: min(240px, calc(100vw - 20px)); height: auto; right: 10px; bottom: 10px; } #holoCanvas { width: min(220px, calc(100vw - 30px)); height: 220px; right: 10px; bottom: 58px; /* sits above the HUD row */ } .holo-hud { position: relative; left: 0; right: 0; bottom: 0; padding: 6px 0; } .holo-bubble { font-size: 12px; padding: 8px 10px; left: -6px; right: -6px; top: -290px; } } /* browser has no SpeechRecognition — hide mic, keep chat only */ .holo-stage.no-mic #holoMic { display: none; } .holo-stage.no-recog #holoMic { opacity: 0.35; cursor: not-allowed; } /* respect reduced motion — dim the pulse */ @media (prefers-reduced-motion: reduce) { .holo-btn.on { animation: none; } #holoCanvas { filter: none; } }