/* ============================================================================ AP-358 · Voice assistant UI — Siri-style edge glow + mic FAB + captions Mounted on (outside the scaled .stage) so it tracks the real viewport. ============================================================================ */ /* ---- edge glow ---------------------------------------------------------- The glow itself is NOT hand-rolled: it comes from the prebuilt `apple-intelligence-glow-ui` npm library (WebGL aurora shader, defaults calibrated to the original Apple Intelligence effect), bundled as vendor/apple-intelligence-glow.{js,css} and driven from pro-voice.js (state machine + speech amplitude). Rebuild the bundle via _vendor-src/. ------------------------------------------------------------------------ */ /* ---- mic FAB (start / stop) -------------------------------------------- */ #pv-fab{ position:fixed; right:26px; bottom:26px; z-index:9999; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--brand-grad,linear-gradient(90deg,#4A51DD,#77BFFC)); color:#fff; border:1px solid var(--panel-bd,rgba(119,191,252,.2)); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(119,191,252,.5); transition:transform .18s ease, box-shadow .3s ease, filter .2s ease; -webkit-tap-highlight-color:transparent; user-select:none; } #pv-fab:hover{ transform:translateY(-2px) scale(1.04); } #pv-fab:active{ transform:scale(.96); } #pv-fab svg{ width:26px; height:26px; display:block; } #pv-fab .pv-ico-stop{ display:none; } #pv-fab.busy .pv-ico-mic{ display:none; } #pv-fab.busy .pv-ico-stop{ display:block; } #pv-fab.busy{ background:linear-gradient(90deg,#178BF1,#20BD44); } /* pulse while listening */ #pv-fab.pulse{ animation:pv-fab-pulse 1.5s ease-out infinite; } @keyframes pv-fab-pulse{ 0%{ box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(119,191,252,.55); } 100%{ box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 22px rgba(119,191,252,0); } } /* small wake-word toggle tucked above the FAB */ #pv-wake{ position:fixed; right:30px; bottom:96px; z-index:9999; font:600 11px/1 var(--f-body,sans-serif); letter-spacing:.02em; padding:6px 10px; border-radius:999px; cursor:pointer; user-select:none; color:var(--ink2,#9DB0D6); background:var(--pill-bg,rgba(119,191,252,.06)); border:1px solid var(--pill-bd,rgba(119,191,252,.15)); display:flex; align-items:center; gap:6px; transition:color .2s, border-color .2s; } #pv-wake i{ width:7px; height:7px; border-radius:50%; background:var(--ink3,#63769F); box-shadow:none; transition:background .2s, box-shadow .2s; } #pv-wake.on{ color:var(--accent,#77BFFC); border-color:var(--accent,#77BFFC); } #pv-wake.on i{ background:#20BD44; box-shadow:0 0 8px #20BD44; animation:pv-breathe 2s ease-in-out infinite; } /* ---- caption / transcript chip ----------------------------------------- */ #pv-cap{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(12px); z-index:9998; max-width:min(760px,86vw); pointer-events:none; padding:12px 18px; border-radius:14px; background:var(--tip-bg,#040a1e); color:var(--tip-ink,#fff); border:1px solid var(--tip-bd,rgba(119,191,252,.25)); box-shadow:0 12px 40px rgba(0,0,0,.4); font:500 15px/1.35 var(--f-body,sans-serif); opacity:0; transition:opacity .3s ease, transform .3s ease; text-align:center; } #pv-cap.on{ opacity:1; transform:translateX(-50%) translateY(0); } #pv-cap .pv-role{ font:700 11px/1 var(--f-body,sans-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--accent,#77BFFC); display:block; margin-bottom:5px; } #pv-cap.you .pv-role{ color:var(--gold,#E9C250); } #pv-cap .pv-dots i{ display:inline-block; width:5px; height:5px; margin:0 2px; border-radius:50%; background:var(--accent,#77BFFC); animation:pv-dot 1s infinite; } #pv-cap .pv-dots i:nth-child(2){ animation-delay:.15s; } #pv-cap .pv-dots i:nth-child(3){ animation-delay:.3s; } @keyframes pv-dot{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } } /* ---- reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ #pv-fab.pulse{ animation:none !important; } .apple-viewport-glow, .apple-three-viewport-glow{ display:none !important; } }