@touchcastllc/napster-companion-api-dev 2.0.0-alpha.2 → 2.0.0-alpha.20

package/README.md

@@ -185,6 +185,35 @@ idle so the next session is one click away.
 > inside the persisted frame is lost. The SDK warns when both flags are on. Use one
 > or the other until this is resolved.
 
+### Inline layout: minimum container size
+
+With `layout: { type: "inline", mountContainer }` the avatar fills the container you
+give it, so you decide how much room it gets. Below the minimum the controls clip, so
+give the container's **content area** (its size without its own border and padding) at
+least:
+
+| What has to fit                                            | Minimum    |
+| ---------------------------------------------------------- | ---------- |
+| Control bar, 4 buttons (volume, mic, screen share, end)    | 176px wide |
+| Control bar, 3 buttons (screen sharing off or unsupported) | 132px wide |
+| Control bar height, `rectangle` and `silhouette`           | 80px tall  |
+| Control bar height, `round`                                | 64px tall  |
+| Start card (`button.enabled`), default label length        | 150px wide |
+
+- Each button needs 44px of width: `44 × buttons`.
+- The numbers are the same for all three `style.view` shapes. The height of the avatar
+  itself follows the container, so no height beyond the control bar's is needed.
+- A longer `button.label` or `button.description` makes the start card need more width.
+- These sit well below 320px, so the widget keeps working in a 320px-wide page and at
+  400% zoom (WCAG 1.4.10 Reflow) as long as the container is not narrower than the table.
+- The fixed layout sizes itself (240px wide) and needs nothing from you.
+
+If the widget has less room than it needs, the SDK writes a warning to the console —
+even without `debug: true` — that says how much is missing, for example *"The widget
+has only 175px of width, but the controls need at least 176px, so the buttons are being
+clipped"*. It warns once each time the problem appears and again if it comes back after
+being fixed.
+
 For framework-specific setup, version pinning and the first working session, see
 **[developers.napster.com/docs/sdks/web-sdk/installation](https://developers.napster.com/docs/sdks/web-sdk/installation)**.
 

package/lib/button/session.d.ts

@@ -72,5 +72,12 @@ export interface ButtonSessionDeps {
      * report through `onError`.
      */
     onSessionDismissed: (handler: () => void) => () => void;
+    /**
+     * Register a handler fired when a session has ended while keyboard focus was
+     * inside the widget. The teardown removed whatever had focus, so the browser
+     * dropped it to <body>; the handler puts it on the entry point instead
+     * (CA-1139). Fired after the trigger is back to idle. Returns an unsubscribe.
+     */
+    onReturnFocus: (handler: () => void) => () => void;
 }
 export declare function createButtonSession(deps: ButtonSessionDeps, config: Partial<NapsterCompanionApiConfig>): NapsterCompanionApiController;

package/lib/button/trigger.d.ts

@@ -3,6 +3,8 @@ import type { ButtonConfig } from "../types";
 export type TriggerState = "idle" | "connecting" | "active";
 export interface Trigger {
     setState(state: TriggerState): void;
+    /** Put keyboard focus on the clickable node (CA-1139: after a session ends). */
+    focus(): void;
     /** Release the trigger. SDK-owned nodes are removed; host-owned nodes are restored. */
     destroy(): void;
 }

package/lib/components/Avatar/controlsAutoHide.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Auto-hide for the control bar: it fades out a few seconds after the pointer
+ * leaves and returns when the pointer comes back.
+ *
+ * Keyboard focus counts as presence too (CA-841, WCAG 2.1.1 / 2.4.7). The bar
+ * is only faded (opacity), not removed, so its buttons stay in the tab order;
+ * without this a keyboard user tabbed onto buttons they could not see, and
+ * nothing but a mouse movement ever brought the bar back.
+ *
+ * So does the pointer resting on a control's tooltip (CA-1143): the tooltip
+ * lives on document.body, outside the root, so moving onto it fires the
+ * root's mouseleave.
+ */
+export interface ControlsAutoHide {
+    isVisible(): boolean;
+    /**
+     * Start the countdown to hiding the bar. When the countdown ends the bar
+     * stays up if a control inside the widget still has focus; it is hidden
+     * later, after focus leaves.
+     */
+    scheduleHide(): void;
+    destroy(): void;
+}
+export interface ControlsAutoHideOptions {
+    /** Called whenever the bar becomes visible (`true`) or hidden (`false`). */
+    onChange: (visible: boolean) => void;
+    /** How long after the pointer or focus leaves before hiding. Default 5000. */
+    delayMs?: number;
+}
+export declare function createControlsAutoHide(root: HTMLElement, { onChange, delayMs }: ControlsAutoHideOptions): ControlsAutoHide;

package/lib/components/Avatar/readyGrow.d.ts

@@ -0,0 +1,37 @@
+export interface ReadyGrowStart {
+    /** Uniform scale that shrinks the box's shorter side to the bubble. */
+    scale: number;
+    /** Clip, in the box's own unscaled pixels, down to a centred circle. */
+    insetX: number;
+    insetY: number;
+    radius: number;
+}
+/**
+ * First frame of the ready grow-in for a `width` x `height` box: the box
+ * scaled down and clipped to a circle, so it lands exactly on the loading
+ * bubble. The animation then only moves `transform` and `clip-path` — the
+ * box itself never changes size, so nothing is laid out per frame (CA-1122).
+ * Null when the box has no size to measure (hidden, or no layout engine).
+ */
+export declare function readyGrowStart(width: number, height: number): ReadyGrowStart | null;
+/**
+ * How long the loading → ready hand-off waits for the visible media to show
+ * its first real frame before giving up and entering ready anyway
+ * (Avatar/index.ts's markAvatarShown(), CA-1122). The grow-in should start
+ * from a real picture, not from the poster or the canvas's CSS placeholder:
+ * on the tester's iPhone the first keyed canvas frame landed ~60 ms after
+ * the server's `ready`, so a dark placeholder disc grew and the person
+ * popped in afterwards. Bounded so a stream that never paints can't hold
+ * the controls (and the integrator's onAvatarReady) back for long.
+ */
+export declare const FIRST_FRAME_WAIT_MS = 500;
+/**
+ * Safety net for the grow-in's own cleanup (Avatar/index.ts's
+ * playReadyGrowIn(), CA-1122): the growing class normally comes off on
+ * `animationend`, but while it is on, the control bar is hidden by CSS
+ * (Avatar.css) and the placeholder card lingers — so if the animation is
+ * cancelled, never starts (a host rule setting `animation: none`), or its
+ * event is lost, the cleanup still runs after this long. Comfortably above
+ * any `--np-ready-grow-duration` the stylesheet has used (150–500 ms).
+ */
+export declare const READY_GROW_FALLBACK_MS = 1000;

package/lib/components/InactiveOverlay/index.d.ts

@@ -10,6 +10,8 @@ export interface InactiveOverlayOptions {
 export type InactiveOverlayController = BaseController<InactiveOverlayOptions> & {
     /** Root DOM node — used to relocate the overlay between documents (e.g. PiP). */
     getElement(): HTMLElement;
+    /** Moves keyboard focus into the overlay (CA-1139). */
+    focus(): void;
 };
 /**
  * Vanilla InactiveOverlay implementation.

package/lib/components/MicPermission/index.d.ts

@@ -3,16 +3,18 @@ import "./MicPermission.css";
 /**
  * Screens of the microphone-permission recovery flow. A session cannot start
  * without the mic, so instead of tearing the widget down we keep it mounted and
- * walk the user back to a working state (CA-622).
+ * walk the user back to a working state (CA-622). The step-by-step
+ * "How to enable" guide is gone (CA-1132): it described the icon beside the
+ * address bar, which Safari does not have.
  */
-export type MicPermissionState = "pending" | "blocked" | "stillBlocked" | "step1" | "step2" | "step3";
+export type MicPermissionState = "pending" | "blocked";
 export interface MicPermissionOptions {
     /**
      * Re-probe the microphone. Resolves with the retry's real outcome — the
      * three are genuinely different for this card, so this deliberately is not
      * a boolean:
      * - "granted": the caller resumes the session and disposes this controller.
-     * - "denied": still blocked, this card stays up and moves to stillBlocked.
+     * - "denied": still blocked, this card stays up and returns to blocked.
      * - "dismissed": the retry's own native prompt went unanswered for 30s and
      *   the caller has ALREADY destroyed this controller — there is nothing
      *   left to repaint.

package/lib/components/StyledTooltip/index.d.ts

@@ -4,6 +4,9 @@ export interface AttachTooltipOptions {
     content: string | Node;
     placement?: Placement;
 }
+/** Class on every tooltip element; `data-np-hovered` is set while the pointer is on it. */
+export declare const TOOLTIP_CLASS = "np_companion-tooltip";
+export declare const TOOLTIP_HOVERED_ATTR = "data-np-hovered";
 export interface TooltipController extends BaseController<AttachTooltipOptions> {
     show: () => void;
     hide: () => void;

package/lib/components/controls/createControlButton.d.ts

@@ -11,3 +11,12 @@
  * `:hover` or `:focus-visible`.
  */
 export declare function createControlButton(extraClass?: string): HTMLButtonElement;
+/**
+ * Puts a control's icon in its button, replacing whatever was there.
+ *
+ * The icon is decorative: the button's own `aria-label` is its name. Without
+ * `aria-hidden` assistive technology may announce the unlabelled graphic as
+ * well, and `focusable="false"` keeps legacy engines from adding the SVG to
+ * the tab order.
+ */
+export declare function setControlIcon(btn: HTMLElement, icon: SVGElement): void;

package/lib/constants/accessibleNames.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Accessible names shared by the main widget and its Picture-in-Picture copy
+ * (CA-1144), so both are announced the same.
+ */
+export declare const WIDGET_LABEL = "AI Agent";
+export declare const CONTROLS_LABEL = "Avatar controls";
+export declare const LIVE_CALL_LABEL = "Live call";

package/lib/constants/inactivity.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shown and announced when the local inactivity timeout fires without a
+ * message of its own (CA-1139: the overlay and the announcer must say the
+ * same thing).
+ */
+export declare const INACTIVE_OVERLAY_DEFAULT_MESSAGE = "It looks like you've been inactive for a while. Would you like to continue this conversation?";

package/lib/constants/index.d.ts

@@ -4,3 +4,4 @@
 export * from "./greenscreen";
 export * from "./events";
 export * from "./iceServers";
+export * from "./inactivity";

package/lib/index.css

@@ -1 +1 @@
-.np_companion-live-container,.np_companion-preview-container{height:100%;margin:0;padding:0;position:absolute;transition:opacity .3s ease-in-out;width:100%}.np_companion-preview-container{opacity:1;z-index:2}.np_companion-preview-container.np_companion-fade-out{opacity:0;pointer-events:none;transition:opacity .5s ease-out}.np_companion-live-container{opacity:0;z-index:1}.np_companion-live-container.np_companion-fade-in{opacity:1;z-index:3}:root{--base-border-radius:10px;--base-gap:20px;--np-ready-grow-duration:150ms}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}::-webkit-input-placeholder{color:hsla(0,0%,100%,.4)}::-moz-placeholder{color:hsla(0,0%,100%,.4)}:-ms-input-placeholder{color:hsla(0,0%,100%,.4)}:-moz-placeholder{color:hsla(0,0%,100%,.4)}a,input{outline:none}.np_companion-hide{display:none!important}.np_companion-align-middle{align-items:center;display:flex;justify-content:center}.np_companion-align-between{align-items:center;display:flex;justify-content:space-between}.np_companion-align-end{align-items:center;display:flex;justify-content:flex-end}.np_companion-align-start{align-items:flex-start;display:flex;justify-content:flex-start}.np_companion__d-none{display:none!important}#np_companion-sdk-root.np_companion-container-fixed{aspect-ratio:4/5;position:fixed;width:240px;z-index:9999}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round{aspect-ratio:1/1}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-right{bottom:16px;right:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-left{bottom:16px;left:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-center{bottom:16px;left:50%;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-right{right:16px;top:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-left{left:16px;top:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-center{left:50%;top:16px;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-center{left:50%;top:50%;transform:translate(-50%,-50%)}#np_companion-sdk-root.np_companion-container-inline{aspect-ratio:4/5;height:100%;position:relative;width:100%}#np_companion-sdk-root.np_companion-container-inline.np_companion-view-round{aspect-ratio:1/1}#np_companion-avatar-container,.np_companion-avatar{height:100%;position:relative;width:100%}#np_companion-avatar-container{background:transparent;border-radius:var(--base-border-radius);overflow:hidden}#np_companion-avatar-container:not(.np_companion-view-silhouette){box-shadow:0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 10px 15px -3px color-mix(in oklab,#00000080 100%,transparent),0 4px 6px -4px color-mix(in oklab,#00000080 100%,transparent)}.np_companion-avatar.np_companion-bg-transparent #np_companion-avatar-container.np_companion-view-silhouette{filter:drop-shadow(0 10px 15px rgba(0,0,0,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.5))}#np_companion-avatar-container.np_companion-mic-muted-shape:not(.np_companion-view-silhouette){outline:4px solid #ff0037;outline-offset:0}.np_companion-avatar-wrap{inset:0;position:absolute}.np_companion-avatar-wrap.np_companion-view-round{aspect-ratio:1/1;height:auto}#np_companion-avatar-container.np_companion-view-rectangle.np_companion-status-ready-video:before{backdrop-filter:blur(11.059px);border-radius:0 0 32px 32px;content:"";height:180px;inset:auto 0 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 65%);mask-image:linear-gradient(180deg,transparent 0,#000 65%);opacity:1;pointer-events:none;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:15}#np_companion-avatar-container.np_companion-view-rectangle.np_companion-status-ready-video:after{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 62.109%);border-radius:0 0 32px 32px;content:"";height:116px;inset:auto 0 0 0;opacity:1;pointer-events:none;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:15}.np_companion-avatar:has(.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse) #np_companion-avatar-container.np_companion-view-rectangle:after,.np_companion-avatar:has(.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse) #np_companion-avatar-container.np_companion-view-rectangle:before{opacity:0}#np_companion-avatar-container.np_companion-view-round{aspect-ratio:1/1;border-radius:50%;height:auto}.np_companion-avatar-video{border-radius:inherit;height:100%;inset:0;object-fit:cover;overflow:hidden;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out;width:100%;z-index:10}@keyframes np-ready-grow-in{0%{border-radius:50%;height:var(--np-ready-grow-size,135px);width:var(--np-ready-grow-size,135px)}to{border-radius:var(--np-ready-grow-end-radius,50%);height:100%;width:100%}}#np_companion-avatar-container.np_companion-view-rectangle,#np_companion-avatar-container.np_companion-view-silhouette{--np-ready-grow-end-radius:32px}.np_companion-avatar-canvas.np_companion-ready-growing,.np_companion-avatar-video.np_companion-ready-growing{animation:np-ready-grow-in var(--np-ready-grow-duration,.45s) ease-out forwards;margin:auto;z-index:13}.np_companion-avatar-video.no-opacity{opacity:0}.np_companion-avatar-canvas{background-image:var(--np-placeholder-bg-image);background-position:50%;background-size:cover;border-radius:inherit;height:100%;inset:0;object-fit:cover;overflow:hidden;pointer-events:none;position:absolute;width:100%;z-index:1}#np_companion-avatar-container.np_companion-status-entry .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-loading .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-canvas{background-image:none}.np_companion-avatar:has(#np_companion-avatar-container.np_companion-view-round):after{display:none}.np_companion-disclaimer-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;color:#fff;font-size:10px;line-height:12px;margin:auto auto 16px;max-width:940px;opacity:.7;overflow:hidden;padding:0 16px;text-align:center;z-index:12}.np_companion-disclaimer-text a{color:#fff}.np_companion-disclaimer-text a:hover{color:#fff;text-decoration:underline}.np_companion-disclaimer-text a:focus,.np_companion-disclaimer-text a:visited{color:#fff}.np_companion-action-btn-container-wrapper{pointer-events:auto;width:100%}.np_companion-avatar-control-wrap{bottom:16px;left:50%;max-width:calc(100% - 8px);opacity:1;position:absolute;transform:translateX(-50%);transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:99}.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse{opacity:0}.np_companion-avatar-control-wrap.np_companion-avatar-control-view-round{bottom:0}.np_companion-avatar-control-container{background-color:#111;border-radius:32px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25),2px 2px 8px 0 rgba(0,0,0,.12);display:flow-root;position:relative}.np_companion-avatar-control-container.np_companion-avatar-control-view-rectangle{backdrop-filter:none;background-color:transparent;box-shadow:none}.np_companion-avatar:not(.np_companion-bg-transparent) .np_companion-loader-spinner:not(.np_companion-view-silhouette){backdrop-filter:blur(19px);backdrop-filter:none!important;background-color:color-mix(in oklab,hsla(0,0%,87%,.6) 100%,transparent)!important;background-color:transparent!important;filter:none!important;height:100%;width:100%}.np_companion-loader-spinner .loader-container{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.np_companion-loader-spinner .loader-container .loader{--_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;animation:l3 1s linear infinite;aspect-ratio:1;background:#585858;border-radius:50%;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;padding:4px;width:24px}@keyframes l3{to{transform:rotate(1turn)}}.np_companion-loader-spinner.np_companion-view-round .loader-container .loader{padding:4px;width:212px}#np_companion-avatar-container.np_companion-nonbutton-precheck-hidden{display:none}#np_companion-avatar-container.np_companion-status-entry .np_companion-entry-point{display:flex}#np_companion-avatar-container .np_companion-loading-photo-bubble{display:none;inset:0;margin:auto;position:absolute;z-index:20}#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble{display:block}#np_companion-avatar-container .np_companion-loading-photo-bubble{height:135px;width:135px}#np_companion-avatar-container .np_companion-loading-photo-bubble .np_companion-photo-bubble-inner{border:3px solid var(--np-accent-color,#be369d);border-radius:100px;inset:6.15px}#np_companion-avatar-container.np_companion-status-loading:not(.np_companion-view-round),#np_companion-avatar-container.np_companion-status-permission-blocked:not(.np_companion-view-round),#np_companion-avatar-container.np_companion-status-permission-pending:not(.np_companion-view-round){border-radius:32px}#np_companion-avatar-container.np_companion-status-entry,#np_companion-avatar-container.np_companion-status-loading,#np_companion-avatar-container.np_companion-status-permission-blocked,#np_companion-avatar-container.np_companion-status-permission-pending{box-shadow:none!important}#np_companion-avatar-container.np_companion-status-entry,#np_companion-avatar-container.np_companion-status-permission-pending{overflow:visible}#np_companion-avatar-container .np_companion-placeholder-bg{border-radius:inherit;display:none;inset:0;overflow:hidden;position:absolute;z-index:11}#np_companion-avatar-container .np_companion-placeholder-bg:before{background-image:linear-gradient(var(--np-placeholder-bg-overlay,hsla(0,0%,7%,.7)),var(--np-placeholder-bg-overlay,hsla(0,0%,7%,.7))),var(--np-placeholder-bg-image);background-position:50%;background-size:cover;content:"";position:absolute}#np_companion-avatar-container.np_companion-view-rectangle .np_companion-placeholder-bg:before,#np_companion-avatar-container.np_companion-view-round .np_companion-placeholder-bg:before,#np_companion-avatar-container.np_companion-view-silhouette .np_companion-placeholder-bg:before{--np-placeholder-bg-overlay:hsla(0,0%,7%,.2);filter:blur(12px);inset:-35px}#np_companion-avatar-container.np_companion-status-loading .np_companion-placeholder-bg{display:block}#np_companion-avatar-container.np_companion-loading-indicator-disabled:not(.np_companion-status-ready-video) .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-loading-indicator-disabled:not(.np_companion-status-ready-video) .np_companion-avatar-video,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-video,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-video{display:none}#np_companion-avatar-container.np_companion-placeholder-lingering .np_companion-placeholder-bg{display:block}@keyframes np-placeholder-fade-out{0%{opacity:1}to{opacity:0}}#np_companion-avatar-container.np_companion-view-silhouette.np_companion-placeholder-lingering .np_companion-placeholder-bg{animation:np-placeholder-fade-out var(--np-ready-grow-duration,.45s) ease-out forwards}#np_companion-avatar-container.np_companion-recovery-entering .np_companion-placeholder-bg,#np_companion-avatar-container.np_companion-recovery-entering.np_companion-status-permission-blocked .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-recovery-entering.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:np-placeholder-fade-out .2s ease-out forwards;display:block}@keyframes np-loading-pulse{0%,to{transform:scale(1)}50%{transform:scale(.92)}}#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:np-loading-pulse 1.8s ease-in-out infinite;transform-origin:center;will-change:transform}@media (prefers-reduced-motion:reduce){#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:none}}:root{--np-ctl-btn-size:36px}.np_companion-controls-container{align-items:center;background:hsla(0,0%,100%,.3);border:.5px solid #fff;border-radius:12px;bottom:20px;box-shadow:0 1px 1px rgba(0,0,0,.267),0 2px 5px rgba(0,0,0,.267),0 3px 8px rgba(0,0,0,.267);display:flex;gap:8px;left:50%;max-width:360px;pointer-events:auto;position:absolute;transform:translateX(-50%);transform-origin:bottom center;transition:width .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:auto;z-index:99}.np_companion-controls-container.collapsed{gap:0}.np_companion-time-running{color:#fff}.np_companion-controls-time-action-btn-container{align-items:center;background:hsla(0,0%,100%,.1);border-radius:8px;display:flex;filter:grayscale(1);flex-shrink:0;gap:8px;height:32px;padding-left:8px;padding-right:8px;transition:filter .3s ease}.np_companion-controls-mic-control,.np_companion-controls-stop-control{cursor:pointer;display:flex;margin:0 5px;overflow:hidden;transition:opacity .3s ease-in-out,width .3s ease-in-out;width:47px}.np_companion-controls-mic-control.visible,.np_companion-controls-stop-control.visible{opacity:1}.np_companion-controls-mic-control.visible{width:1em}.np_companion-controls-stop-control.visible{width:1.5em}.np_companion-controls-mic-control.hidden,.np_companion-controls-stop-control.hidden{margin:0;opacity:0;padding:0;pointer-events:none;width:0}.np_companion-controls-mic-control:hover svg path{fill:red}.np_companion-controls-stop-control{display:flex;margin:0 5px 0 0}.np_companion-controls-stop-control:hover svg .stop-circle{fill:red}.np_companion-controls-stop-control:hover svg .stop-square{fill:#fff}.np_companion-mic-dropdown{background:#2b2c32;border-radius:4px;border-radius:6px;bottom:35px;box-shadow:0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.2),0 0 0 1px #46464d;color:#fff;font-size:14px;list-style-type:none;margin:0;max-height:200px;min-width:300px;overflow-y:auto;overflow:auto;padding:5px;pointer-events:auto;position:absolute;width:auto;z-index:1000}.np_companion-mic-dropdown li{cursor:pointer;padding:8px 12px}.np_companion-mic-dropdown li:hover{background-color:#000}.np_companion-action-btn-container-container{background:transparent;border-radius:80px;gap:8px;padding:12px 16px;transition:all .3s ease-in-out}.np_companion-action-btn-container-container.np_companion_disclaimer-disabled{padding-bottom:16px}.np_companion-action-btn-container-container .np_companion-chat-question-bar-container{border-radius:16px;gap:8px}.np_companion-dark-grey-bg{background:linear-gradient(0deg,#5e5e5e14 0 100%),#ffffff0f}.np_companion-grey-bg{background:linear-gradient(0deg,rgba(94,94,94,.07),rgba(94,94,94,.07)),hsla(0,0%,100%,.04)}#np_companion-sdk-root .np_companion-ctl-btn{align-items:center;appearance:none;border:none;border-radius:80px;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font:inherit;height:var(--np-ctl-btn-size);justify-content:center;padding:0;transition:all .3s ease-in-out;width:var(--np-ctl-btn-size)}#np_companion-sdk-root .np_companion-ctl-btn:not(.np_companion-ctl-btn--mic){backdrop-filter:blur(50.7px);background:hsla(0,0%,7%,.2);border:none;position:relative}#np_companion-sdk-root .np_companion-ctl-btn:not(.np_companion-ctl-btn--mic):before{background:linear-gradient(135deg,hsla(0,0%,100%,.35),rgba(16,0,38,.35) 50%,hsla(0,0%,100%,.35));border-radius:inherit;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;pointer-events:none;position:absolute}#np_companion-sdk-root .np_companion-ctl-btn--mic{background:radial-gradient(10px 10px at 10% 81%,hsla(24,91%,91%,.5) 0,hsla(24,91%,91%,0) 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 100%),var(--np-accent-color,#be369d);box-shadow:inset 0 2.203px 3.305px rgba(255,150,217,.5),inset 0 -2.203px 3.305px rgba(0,0,0,.15)}#np_companion-sdk-root .np_companion-ctl-btn--mic.np_companion-muted{background:#ff0037;box-shadow:none}@media (hover:hover){#np_companion-sdk-root .np_companion-ctl-btn:hover{background:#fff;box-shadow:none;color:#000}}#np_companion-sdk-root .np_companion-ctl-btn svg{height:20px;width:20px}.np_companion-inactive-overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:9999}.np_companion-inactive-dialog{backdrop-filter:blur(19px);background:hsla(0,0%,50%,.3);background-blend-mode:luminosity;border-radius:16px;max-width:500px;overflow:hidden;padding:24px 16px;position:relative;text-align:center;width:100%}@supports (-moz-appearance:none){.np_companion-inactive-dialog{background:rgba(32,32,34,.88);background-blend-mode:normal}}.np_companion-inactive-dialog:before{background:linear-gradient(180deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,0),hsla(0,0%,100%,0),hsla(0,0%,100%,.1));border-radius:16px;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;padding:1.473px;pointer-events:none;position:absolute}.np_companion-inactive-message{color:#fff;font-size:16px;line-height:1.5;margin-bottom:24px;margin-top:0}.np_companion-inactive-timer{display:flex;justify-content:center;margin:24px 0;pointer-events:none}.np_companion-timer-circle{align-items:center;display:flex;height:80px;justify-content:center;position:relative;width:80px}.np_companion-timer-circle svg{height:100%;transform:rotate(-90deg);width:100%}.np_companion-timer-circle path{transition:stroke-dasharray .3s ease}.np_companion-timer-number{color:#fff;font-size:24px;font-weight:500;position:absolute}.np_companion-inactive-buttons{display:flex;gap:12px;justify-content:center}.np_companion-inactive-buttons button{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:background-color .2s ease}.np_companion-end-button{background:hsla(0,0%,100%,.1);color:#fff}.np_companion-end-button:hover{background:hsla(0,0%,100%,.2)}.np_companion-continue-button{background:#3c19cd;color:#fff}.np_companion-continue-button:hover{background:#2f13a0}.np_companion-entry-point{align-items:center;display:none;inset:0;justify-content:center;position:absolute;z-index:20}.np_companion-entry-point-card-wrap{max-width:100%;min-width:0}.np_companion-entry-point-card{align-items:center;background:#111;border:0;border-radius:25px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;max-width:100%;padding:12px;position:relative;text-align:left}.np_companion-photo-bubble{flex-shrink:0;height:64px;position:relative;width:64px}.np_companion-photo-bubble-inner{background:linear-gradient(180deg,#0c010a,#3f236b);border-radius:50%;inset:4px;overflow:hidden;position:absolute}.np_companion-photo-bubble-inner--fallback{background:var(--np-accent-color,#be369d)}.np_companion-photo-bubble-image{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.np_companion-entry-point-text{color:#fff;display:flex;flex-direction:column;gap:4px;min-width:0;width:153px}.np_companion-entry-point-heading{font-size:16px;font-weight:700;letter-spacing:-.6px;line-height:1.2;margin:0}.np_companion-entry-point-description{font-size:12px;font-weight:400;letter-spacing:-.48px;line-height:1.3;margin:0;opacity:.5}#np_companion-sdk-root[data-np-state=active] .np_button-trigger,#np_companion-sdk-root[data-np-state=connecting] .np_button-trigger,#np_companion-sdk-root[data-np-state=idle] .np_companion-live-container{display:none}#np_companion-sdk-root[data-np-state=idle].np_companion-container-fixed{aspect-ratio:auto!important;height:auto!important;width:auto!important}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline{aspect-ratio:auto;height:auto}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline.np_companion-button-align-left{justify-content:flex-start}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline.np_companion-button-align-right{justify-content:flex-end}.np_site-frame{backface-visibility:hidden;border:0;height:100vh;height:100dvh;inset:0;position:fixed;transform:translateZ(0);width:100%;z-index:100000000}.np_site-progress{animation:np_site-progress-grow 6s cubic-bezier(.15,.75,.25,1) forwards;background:var(--np-persist-progress-color,#be369d);border-end-end-radius:3px;box-shadow:0 0 10px var(--np-persist-progress-color,#be369d);height:var(--np-persist-progress-height,3px);left:0;pointer-events:none;position:fixed;top:0;width:0;z-index:100000002}@keyframes np_site-progress-grow{0%{width:0}to{width:92%}}.np_site-progress--done{animation:none;opacity:0;transition:width .14s ease-out,opacity .24s ease-out .12s;width:100%}@media (prefers-reduced-motion:reduce){.np_site-progress{animation:none;width:92%}.np_site-progress--done{transition:opacity .14s linear}}#np_companion-sdk-root .np_companion-mic-permission{--np-mic-permission-accent:var(--np-accent-color,#be369d);--np-mic-permission-accent-hover:color-mix(in srgb,var(--np-accent-color,#be369d) 85%,#000);--np-mic-permission-card-bg:hsla(0,0%,4%,.8);--np-mic-permission-card-radius:27px;align-items:flex-end;display:flex;inset:0;justify-content:center;padding:8px;pointer-events:auto;position:absolute;z-index:9999}#np_companion-sdk-root .np_companion-mic-permission-card{backdrop-filter:blur(19px);background:var(--np-mic-permission-card-bg);border-radius:var(--np-mic-permission-card-radius);box-sizing:border-box;max-width:386px;padding:15px;text-align:center;width:100%}#np_companion-sdk-root .np_companion-mic-permission.np_companion-view-round{padding:8px 0}#np_companion-sdk-root .np_companion-mic-permission-pagination{align-items:center;display:flex;gap:4px;justify-content:center;margin-bottom:8px}#np_companion-sdk-root .np_companion-mic-permission-pagination[hidden]{display:none}#np_companion-sdk-root .np_companion-mic-permission-dot{background:hsla(0,0%,100%,.4);border-radius:2px;height:4px;transition:width .2s ease,background .2s ease;width:4px}#np_companion-sdk-root .np_companion-mic-permission-dot--active{background:#fff;width:16px}#np_companion-sdk-root .np_companion-mic-permission-heading{color:#fff;font-family:inherit;font-size:18px;font-style:normal;font-weight:700;letter-spacing:-.18px;line-height:21.6px;margin:0 0 4px;text-transform:none}#np_companion-sdk-root .np_companion-mic-permission-subheading{color:hsla(0,0%,100%,.5);font-family:inherit;font-size:14px;font-style:normal;font-weight:400;letter-spacing:-.28px;line-height:19.6px;margin:0 0 20px;text-transform:none}#np_companion-sdk-root .np_companion-mic-permission-card:has(.np_companion-mic-permission-actions[hidden]) .np_companion-mic-permission-subheading{margin-bottom:0}#np_companion-sdk-root .np_companion-mic-permission-em--semibold{font-weight:600}#np_companion-sdk-root .np_companion-mic-permission-em--bold{font-weight:700}#np_companion-sdk-root .np_companion-mic-permission-actions{align-items:stretch;display:flex;flex-direction:column;gap:8px}#np_companion-sdk-root .np_companion-mic-permission-actions[hidden]{display:none}#np_companion-sdk-root .np_companion-mic-permission-actions button{border:0;color:#fff;cursor:pointer;font-family:inherit;font-style:normal;font-weight:600;text-transform:none;transition:background .2s ease}#np_companion-sdk-root .np_companion-mic-permission-actions button:disabled{cursor:progress;opacity:.6}#np_companion-sdk-root .np_companion-mic-permission-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}#np_companion-sdk-root .np_companion-mic-permission-primary{background:var(--np-mic-permission-accent);border-radius:999px;font-size:15px;letter-spacing:-.15px;line-height:22px;min-height:48px;padding:7px 15px}#np_companion-sdk-root .np_companion-mic-permission-primary:hover:not(:disabled){background:var(--np-mic-permission-accent-hover)}#np_companion-sdk-root .np_companion-mic-permission-secondary{background:transparent;font-size:14px;letter-spacing:-.14px;line-height:19.6px;min-height:32px;padding:4px}#np_companion-sdk-root .np_companion-mic-permission-secondary:hover:not(:disabled){color:hsla(0,0%,100%,.8)}#np_companion-sdk-root .np_companion-mic-permission-live{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+#np_companion-sdk-root .np_companion-mic-permission{--np-mic-permission-accent:var(--np-accent-color,#be369d);--np-mic-permission-accent-hover:color-mix(in srgb,var(--np-accent-color,#be369d) 85%,#000);--np-mic-permission-card-bg:hsla(0,0%,4%,.8);--np-mic-permission-card-radius:27px;align-items:safe center;container-type:size;display:flex;inset:0;justify-content:center;overflow:auto;padding:8px;pointer-events:auto;position:absolute;z-index:9999}#np_companion-sdk-root .np_companion-mic-permission-card{backdrop-filter:blur(19px);background:var(--np-mic-permission-card-bg);border-radius:var(--np-mic-permission-card-radius);box-sizing:border-box;max-width:230px;padding:15px;text-align:center;width:100%}#np_companion-sdk-root .np_companion-mic-permission-wrap{max-width:230px;width:100%}#np_companion-sdk-root .np_companion-mic-permission.np_companion-view-round{padding:8px 0}#np_companion-sdk-root .np_companion-mic-permission-heading{color:#fff;font-family:inherit;font-size:18px;font-style:normal;font-weight:700;letter-spacing:-.18px;line-height:21.6px;margin:0 0 4px;text-transform:none}#np_companion-sdk-root .np_companion-mic-permission-subheading{color:hsla(0,0%,100%,.5);font-family:inherit;font-size:14px;font-style:normal;font-weight:400;letter-spacing:-.28px;line-height:19.6px;margin:0 0 20px;text-transform:none}#np_companion-sdk-root .np_companion-mic-permission-card:has(.np_companion-mic-permission-actions[hidden]) .np_companion-mic-permission-subheading{margin-bottom:0}#np_companion-sdk-root .np_companion-mic-permission-actions{align-items:stretch;display:flex;flex-direction:column}#np_companion-sdk-root .np_companion-mic-permission-actions[hidden]{display:none}#np_companion-sdk-root .np_companion-mic-permission-actions button{border:0;color:#fff;cursor:pointer;font-family:inherit;font-style:normal;font-weight:600;text-transform:none;transition:background .2s ease}#np_companion-sdk-root .np_companion-mic-permission-actions button[aria-disabled=true]{cursor:progress;opacity:.6}#np_companion-sdk-root .np_companion-mic-permission:focus{outline:none}#np_companion-sdk-root .np_companion-mic-permission-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}#np_companion-sdk-root .np_companion-mic-permission-primary{background:var(--np-mic-permission-accent);border-radius:999px;font-size:15px;letter-spacing:-.15px;line-height:22px;min-height:48px;padding:7px 15px}#np_companion-sdk-root .np_companion-mic-permission-primary:hover:not([aria-disabled=true]){background:var(--np-mic-permission-accent-hover)}@container (max-height: 250px) or (max-width: 215px){#np_companion-sdk-root .np_companion-mic-permission-card{border-radius:20px;padding:12px}#np_companion-sdk-root .np_companion-mic-permission-heading{font-size:15px;line-height:18px}#np_companion-sdk-root .np_companion-mic-permission-subheading{font-size:12px;line-height:16px;margin-bottom:10px}#np_companion-sdk-root .np_companion-mic-permission-primary{font-size:14px;min-height:36px;padding:4px 12px}}@container (height < 142px) or ((width < 182px) and (height < 158px)){#np_companion-sdk-root .np_companion-mic-permission[data-state=blocked] .np_companion-mic-permission-subheading{display:none}}@container (height < 78px) or ((width < 206px) and (height < 96px)) or ((width < 154px) and (height < 114px)){#np_companion-sdk-root .np_companion-mic-permission[data-state=pending] .np_companion-mic-permission-subheading{display:none}}#np_companion-sdk-root .np_companion-mic-permission-live{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.np_companion-live-container,.np_companion-preview-container{height:100%;margin:0;padding:0;position:absolute;transition:opacity .3s ease-in-out;width:100%}.np_companion-preview-container{opacity:1;z-index:2}.np_companion-preview-container.np_companion-fade-out{opacity:0;pointer-events:none;transition:opacity .5s ease-out}.np_companion-live-container{opacity:0;z-index:1}.np_companion-live-container.np_companion-fade-in{opacity:1;z-index:3}:root{--np-base-border-radius:10px;--np-ready-grow-duration:150ms}#np_companion-sdk-root button:focus-visible{outline:revert;outline-offset:revert}#np_companion-sdk-root .np_companion-announcer{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:where(#np_companion-sdk-root,#np_companion-sdk-root *,#np_companion-sdk-root :before,#np_companion-sdk-root :after){-webkit-box-sizing:border-box;box-sizing:border-box}.np_companion-hide{display:none!important}.np_companion-align-middle{align-items:center;display:flex;justify-content:center}.np_companion-align-between{align-items:center;display:flex;justify-content:space-between}.np_companion-align-end{align-items:center;display:flex;justify-content:flex-end}.np_companion-align-start{align-items:flex-start;display:flex;justify-content:flex-start}.np_companion__d-none{display:none!important}#np_companion-sdk-root.np_companion-container-fixed{aspect-ratio:4/5;position:fixed;width:240px;z-index:9999}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round{aspect-ratio:1/1}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-right{bottom:16px;right:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-left{bottom:16px;left:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-center{bottom:16px;left:50%;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-right{right:16px;top:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-left{left:16px;top:16px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-center{left:50%;top:16px;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-center{left:50%;top:50%;transform:translate(-50%,-50%)}#np_companion-sdk-root.np_companion-container-inline{aspect-ratio:4/5;height:100%;position:relative;width:100%}#np_companion-sdk-root.np_companion-container-inline.np_companion-view-round{aspect-ratio:1/1}#np_companion-avatar-container,.np_companion-avatar{height:100%;position:relative;width:100%}#np_companion-avatar-container{background:transparent;border-radius:var(--np-base-border-radius);overflow:hidden}#np_companion-avatar-container:not(.np_companion-view-silhouette){box-shadow:0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 10px 15px -3px color-mix(in oklab,#00000080 100%,transparent),0 4px 6px -4px color-mix(in oklab,#00000080 100%,transparent)}.np_companion-avatar.np_companion-shadow-ready .np_companion-avatar-wrap.np_companion-view-silhouette{filter:drop-shadow(0 10px 15px rgba(0,0,0,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.5))}#np_companion-avatar-container.np_companion-mic-muted-shape:not(.np_companion-view-silhouette){outline:4px solid #ff0037;outline-offset:0}.np_companion-avatar-wrap{inset:0;position:absolute}.np_companion-avatar-wrap.np_companion-view-round{aspect-ratio:1/1;height:auto}#np_companion-avatar-container.np_companion-view-rectangle.np_companion-status-ready-video:before{backdrop-filter:blur(11.059px);border-radius:0 0 32px 32px;content:"";height:180px;inset:auto 0 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 65%);mask-image:linear-gradient(180deg,transparent 0,#000 65%);opacity:1;pointer-events:none;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:15}#np_companion-avatar-container.np_companion-view-rectangle.np_companion-status-ready-video:after{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 62.109%);border-radius:0 0 32px 32px;content:"";height:116px;inset:auto 0 0 0;opacity:1;pointer-events:none;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:15}.np_companion-avatar:has(.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse) #np_companion-avatar-container.np_companion-view-rectangle:after,.np_companion-avatar:has(.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse) #np_companion-avatar-container.np_companion-view-rectangle:before{opacity:0}#np_companion-avatar-container.np_companion-view-round{aspect-ratio:1/1;border-radius:50%;height:auto}.np_companion-avatar-media,.np_companion-avatar-video{border-radius:inherit;inset:0;pointer-events:none;position:absolute;z-index:10}.np_companion-avatar-video{height:100%;object-fit:cover;overflow:hidden;transition:opacity .3s ease-in-out;width:100%}@keyframes np-ready-grow-in{0%{clip-path:inset(var(--np-ready-grow-inset-y,0) var(--np-ready-grow-inset-x,0) round var(--np-ready-grow-radius,var(--np-ready-grow-end-radius,50%)));transform:scale(var(--np-ready-grow-scale,1))}to{clip-path:inset(0 round var(--np-ready-grow-end-radius,50%));transform:scale(1)}}#np_companion-avatar-container.np_companion-view-rectangle,#np_companion-avatar-container.np_companion-view-silhouette{--np-ready-grow-end-radius:32px}.np_companion-avatar-media.np_companion-ready-growing{animation:np-ready-grow-in var(--np-ready-grow-duration,.45s) ease-out forwards;z-index:13}.np_companion-avatar:has(.np_companion-avatar-media.np_companion-ready-growing) .np_companion-avatar-control-wrap{opacity:0;transition:none}.np_companion-avatar-video.no-opacity{opacity:0}.np_companion-avatar-canvas{background-image:var(--np-placeholder-bg-image);background-position:50%;background-size:cover;border-radius:inherit;height:100%;inset:0;object-fit:cover;overflow:hidden;pointer-events:none;position:absolute;width:100%;z-index:1}#np_companion-avatar-container.np_companion-status-entry .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-loading .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-canvas{background-image:none}.np_companion-avatar:has(#np_companion-avatar-container.np_companion-view-round):after{display:none}.np_companion-disclaimer-text{-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;color:#fff;font-size:10px;line-height:12px;margin:auto auto 16px;max-width:940px;opacity:.7;overflow:hidden;padding:0 16px;text-align:center;z-index:12}.np_companion-disclaimer-text a{color:#fff}.np_companion-disclaimer-text a:hover{color:#fff;text-decoration:underline}.np_companion-disclaimer-text a:focus,.np_companion-disclaimer-text a:visited{color:#fff}.np_companion-action-btn-container-wrapper{pointer-events:auto;width:100%}.np_companion-avatar-control-wrap{bottom:16px;left:50%;max-width:calc(100% - 8px);opacity:1;position:absolute;transform:translateX(-50%);transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:99}.np_companion-avatar-control-wrap.np_companion-action-btn-container-collapse{opacity:0}.np_companion-avatar-control-wrap.np_companion-avatar-control-view-round{bottom:0}.np_companion-avatar-control-container{background-color:#111;border-radius:32px;box-shadow:0 4px 4px 0 rgba(0,0,0,.25),2px 2px 8px 0 rgba(0,0,0,.12);display:flow-root;position:relative}.np_companion-avatar-control-container.np_companion-avatar-control-view-rectangle{backdrop-filter:none;background-color:transparent;box-shadow:none}.np_companion-avatar:not(.np_companion-bg-transparent) .np_companion-loader-spinner:not(.np_companion-view-silhouette){backdrop-filter:blur(19px);backdrop-filter:none!important;background-color:color-mix(in oklab,hsla(0,0%,87%,.6) 100%,transparent)!important;background-color:transparent!important;filter:none!important;height:100%;width:100%}.np_companion-loader-spinner .loader-container{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.np_companion-loader-spinner .loader-container .loader{--_m:conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;animation:l3 1s linear infinite;aspect-ratio:1;background:#585858;border-radius:50%;-webkit-mask:var(--_m);mask:var(--_m);-webkit-mask-composite:source-out;mask-composite:subtract;padding:4px;width:24px}@keyframes l3{to{transform:rotate(1turn)}}.np_companion-loader-spinner.np_companion-view-round .loader-container .loader{padding:4px;width:212px}#np_companion-avatar-container.np_companion-nonbutton-precheck-hidden{display:none}#np_companion-avatar-container.np_companion-status-entry .np_companion-entry-point{display:flex}#np_companion-avatar-container .np_companion-loading-photo-bubble{display:none;inset:0;margin:auto;position:absolute;z-index:20}#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble{display:block}#np_companion-avatar-container .np_companion-loading-photo-bubble{height:135px;width:135px}#np_companion-avatar-container .np_companion-loading-photo-bubble .np_companion-photo-bubble-inner{border:3px solid var(--np-accent-color,#be369d);border-radius:100px;inset:6.15px}#np_companion-avatar-container.np_companion-status-loading:not(.np_companion-view-round),#np_companion-avatar-container.np_companion-status-permission-blocked:not(.np_companion-view-round),#np_companion-avatar-container.np_companion-status-permission-pending:not(.np_companion-view-round){border-radius:32px}#np_companion-avatar-container.np_companion-status-entry,#np_companion-avatar-container.np_companion-status-loading,#np_companion-avatar-container.np_companion-status-permission-blocked,#np_companion-avatar-container.np_companion-status-permission-pending{box-shadow:none!important}#np_companion-avatar-container.np_companion-status-entry,#np_companion-avatar-container.np_companion-status-permission-pending{overflow:visible}#np_companion-avatar-container .np_companion-placeholder-bg{border-radius:inherit;display:none;inset:0;overflow:hidden;position:absolute;z-index:11}#np_companion-avatar-container.np_companion-view-round .np_companion-placeholder-bg{clip-path:circle(50%)}#np_companion-avatar-container.np_companion-view-rectangle .np_companion-placeholder-bg,#np_companion-avatar-container.np_companion-view-silhouette .np_companion-placeholder-bg{clip-path:inset(0 round 32px)}#np_companion-avatar-container .np_companion-placeholder-bg:before{background-image:linear-gradient(var(--np-placeholder-bg-overlay,hsla(0,0%,7%,.7)),var(--np-placeholder-bg-overlay,hsla(0,0%,7%,.7))),var(--np-placeholder-bg-image);background-position:50%;background-size:cover;content:"";position:absolute}#np_companion-avatar-container.np_companion-view-rectangle .np_companion-placeholder-bg:before,#np_companion-avatar-container.np_companion-view-round .np_companion-placeholder-bg:before,#np_companion-avatar-container.np_companion-view-silhouette .np_companion-placeholder-bg:before{--np-placeholder-bg-overlay:hsla(0,0%,7%,.2);filter:blur(12px);inset:-35px}#np_companion-avatar-container.np_companion-status-loading .np_companion-placeholder-bg{display:block}#np_companion-avatar-container.np_companion-loading-indicator-disabled:not(.np_companion-status-ready-video) .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-loading-indicator-disabled:not(.np_companion-status-ready-video) .np_companion-avatar-video,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-blocked .np_companion-avatar-video,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-canvas,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-avatar-video{display:none}#np_companion-avatar-container.np_companion-loading-indicator-disabled:not(.np_companion-status-ready-video){box-shadow:none!important}#np_companion-avatar-container.np_companion-placeholder-lingering .np_companion-placeholder-bg{display:block}@keyframes np-placeholder-fade-out{0%{opacity:1}to{opacity:0}}#np_companion-avatar-container.np_companion-placeholder-lingering .np_companion-placeholder-bg{animation:np-placeholder-fade-out var(--np-ready-grow-duration,.45s) ease-out forwards}#np_companion-avatar-container.np_companion-recovery-entering .np_companion-placeholder-bg,#np_companion-avatar-container.np_companion-recovery-entering.np_companion-status-permission-blocked .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-recovery-entering.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:np-placeholder-fade-out .2s ease-out forwards;display:block}@keyframes np-loading-pulse{0%,to{transform:scale(1)}50%{transform:scale(.92)}}#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:np-loading-pulse 1.8s ease-in-out infinite;transform-origin:center;will-change:transform}@media (prefers-reduced-motion:reduce){#np_companion-avatar-container.np_companion-status-loading .np_companion-loading-photo-bubble,#np_companion-avatar-container.np_companion-status-permission-pending .np_companion-loading-photo-bubble{animation:none}}:root{--np-ctl-btn-size:36px}.np_companion-action-btn-container-container{background:transparent;border-radius:80px;gap:8px;padding:12px 16px}.np_companion-action-btn-container-container.np_companion_disclaimer-disabled{padding-bottom:16px}.np_companion-action-btn-container-container .np_companion-chat-question-bar-container{border-radius:16px;gap:8px}.np_companion-dark-grey-bg{background:linear-gradient(0deg,#5e5e5e14 0 100%),#ffffff0f}#np_companion-sdk-root .np_companion-ctl-btn{align-items:center;appearance:none;border:none;border-radius:80px;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font:inherit;height:var(--np-ctl-btn-size);justify-content:center;padding:0;transition:background-color .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out;width:var(--np-ctl-btn-size)}#np_companion-sdk-root .np_companion-ctl-btn:not(.np_companion-ctl-btn--mic){backdrop-filter:blur(50.7px);background:hsla(0,0%,7%,.2);border:none;position:relative}#np_companion-sdk-root .np_companion-ctl-btn:not(.np_companion-ctl-btn--mic):before{background:linear-gradient(135deg,hsla(0,0%,100%,.35),rgba(16,0,38,.35) 50%,hsla(0,0%,100%,.35));border-radius:inherit;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1px;pointer-events:none;position:absolute}#np_companion-sdk-root .np_companion-ctl-btn--mic{background:radial-gradient(10px 10px at 10% 81%,hsla(24,91%,91%,.5) 0,hsla(24,91%,91%,0) 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.5) 100%),var(--np-accent-color,#be369d);box-shadow:inset 0 2.203px 3.305px rgba(255,150,217,.5),inset 0 -2.203px 3.305px rgba(0,0,0,.15)}#np_companion-sdk-root .np_companion-ctl-btn--mic.np_companion-muted{background:#ff0037;box-shadow:none}@media (hover:hover){#np_companion-sdk-root .np_companion-ctl-btn:hover{background:#fff;box-shadow:none;color:#000}}#np_companion-sdk-root .np_companion-ctl-btn--mic.np_companion-mic-unavailable{position:relative}#np_companion-sdk-root .np_companion-ctl-btn--mic.np_companion-mic-unavailable:after{background:#fbbc04;border-radius:50%;color:#202124;content:"!";font-size:10px;font-weight:700;height:14px;line-height:14px;pointer-events:none;position:absolute;right:-3px;text-align:center;top:-3px;width:14px}#np_companion-sdk-root .np_companion-ctl-btn svg{height:20px;width:20px}.np_companion-inactive-overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:9999}.np_companion-inactive-dialog{backdrop-filter:blur(19px);background:hsla(0,0%,50%,.3);background-blend-mode:luminosity;border-radius:16px;max-width:500px;overflow:hidden;padding:24px 16px;position:relative;text-align:center;width:100%}@supports (-moz-appearance:none){.np_companion-inactive-dialog{background:rgba(32,32,34,.88);background-blend-mode:normal}}.np_companion-inactive-dialog:before{background:linear-gradient(180deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,0),hsla(0,0%,100%,0),hsla(0,0%,100%,.1));border-radius:16px;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude;padding:1.473px;pointer-events:none;position:absolute}.np_companion-inactive-message{color:#fff;font-size:16px;line-height:1.5;margin-bottom:24px;margin-top:0}.np_companion-inactive-timer{display:flex;justify-content:center;margin:24px 0;pointer-events:none}.np_companion-timer-circle{align-items:center;display:flex;height:80px;justify-content:center;position:relative;width:80px}.np_companion-timer-circle svg{height:100%;transform:rotate(-90deg);width:100%}.np_companion-timer-circle path{transition:stroke-dasharray .3s ease}.np_companion-timer-number{color:#fff;font-size:24px;font-weight:500;position:absolute}.np_companion-inactive-buttons{display:flex;gap:12px;justify-content:center}.np_companion-inactive-buttons button{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 24px;transition:background-color .2s ease}.np_companion-end-button{background:hsla(0,0%,100%,.1);color:#fff}.np_companion-end-button:hover{background:hsla(0,0%,100%,.2)}.np_companion-continue-button{background:#3c19cd;color:#fff}.np_companion-continue-button:hover{background:#2f13a0}.np_companion-entry-point{align-items:center;display:none;inset:0;justify-content:center;position:absolute;z-index:20}.np_companion-entry-point-card-wrap{max-width:100%;min-width:0}.np_companion-entry-point-card{align-items:center;background:#111;border:0;border-radius:25px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;max-width:100%;padding:12px;position:relative;text-align:left}.np_companion-photo-bubble{flex-shrink:0;height:64px;position:relative;width:64px}.np_companion-photo-bubble-inner{background:linear-gradient(180deg,#0c010a,#3f236b);border-radius:50%;inset:4px;overflow:hidden;position:absolute}.np_companion-photo-bubble-inner--fallback{background:var(--np-accent-color,#be369d)}.np_companion-photo-bubble-image{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.np_companion-entry-point-text{color:#fff;display:flex;flex-direction:column;gap:4px;min-width:0;width:153px}.np_companion-entry-point-heading{font-size:16px;font-weight:700;letter-spacing:-.6px;line-height:1.2;margin:0}.np_companion-entry-point-description{font-size:12px;font-weight:400;letter-spacing:-.48px;line-height:1.3;margin:0;opacity:.5}#np_companion-sdk-root[data-np-state=active] .np_button-trigger,#np_companion-sdk-root[data-np-state=connecting] .np_button-trigger,#np_companion-sdk-root[data-np-state=idle] .np_companion-live-container{display:none}#np_companion-sdk-root[data-np-state=idle].np_companion-container-fixed{aspect-ratio:auto!important;height:auto!important;width:auto!important}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline{aspect-ratio:auto;height:auto}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline.np_companion-button-align-left{justify-content:flex-start}#np_companion-sdk-root[data-np-state=idle].np_companion-container-inline.np_companion-button-align-right{justify-content:flex-end}.np_site-frame{backface-visibility:hidden;border:0;height:100vh;height:100dvh;inset:0;position:fixed;transform:translateZ(0);width:100%;z-index:100000000}.np_site-progress{animation:np_site-progress-grow 6s cubic-bezier(.15,.75,.25,1) forwards;background:var(--np-persist-progress-color,#be369d);border-end-end-radius:3px;box-shadow:0 0 10px var(--np-persist-progress-color,#be369d);height:var(--np-persist-progress-height,3px);left:0;pointer-events:none;position:fixed;top:0;width:0;z-index:100000002}@keyframes np_site-progress-grow{0%{width:0}to{width:92%}}.np_site-progress--done{animation:none;opacity:0;transition:width .14s ease-out,opacity .24s ease-out .12s;width:100%}@media (prefers-reduced-motion:reduce){.np_site-progress{animation:none;width:92%}.np_site-progress--done{transition:opacity .14s linear}}

package/lib/index.d.ts

@@ -11,6 +11,7 @@ declare class NapsterCompanionApiSdkVanilla implements NapsterCompanionApiSDK {
     private rootEl;
     private embed;
     private micGate;
+    private micRecovery;
     private getTokenFn;
     private sessionEpoch;
     private webrtcController;
@@ -20,11 +21,16 @@ declare class NapsterCompanionApiSdkVanilla implements NapsterCompanionApiSDK {
     private isInitialized;
     private unloadHandler;
     private pipController;
+    private stopSessionAnnouncements;
+    private pipBody;
+    private cancelEndAnnouncement;
+    private containerSizeWatcher;
     private edgeMcpBridge;
     private persistCtl;
     private onSessionFailedHandler;
     private onSessionEndedHandler;
     private onSessionDismissedHandler;
+    private onReturnFocusHandler;
     private buttonMode;
     private lastFaceDetected;
     private userMutedDuringFaceTracking;