@touchcastllc/napster-companion-api 1.0.0-alpha.47 → 1.0.0-alpha.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -523,7 +523,104 @@ const instance = await NapsterCompanionApiSdk.init(token, {
523
523
  });
524
524
  ```
525
525
 
526
- ### 3.2 Position & Layout
526
+ #### Built-in Controls Block
527
+
528
+ Toggle the built-in controls UI (mute / volume / screen-share / end buttons) rendered over the avatar. Disable this when your application provides its own UI using the public methods (`muteMic`, `unmuteMic`, `setAudioVolume`, `stopAvatarTalking`, `destroy`, etc.). Defaults to `enabled: true` — existing integrations see no change.
529
+
530
+ ```typescript
531
+ const instance = await NapsterCompanionApiSdk.init(token, {
532
+ features: {
533
+ controls: {
534
+ enabled: false, // hide built-in buttons, render your own
535
+ },
536
+ },
537
+ });
538
+ ```
539
+
540
+ You can also toggle it at runtime via `updateFeatureConfig` (or `enableFeature` / `disableFeature`):
541
+
542
+ ```typescript
543
+ instance.updateFeatureConfig("controls", { enabled: false });
544
+ // later
545
+ instance.enableFeature("controls");
546
+ ```
547
+
548
+ ### 3.2 Picture-in-Picture (PiP)
549
+
550
+ Automatically pop the avatar into a Document Picture-in-Picture window when the user switches browser tabs, so the conversation stays visible while they work in another tab. The PiP window mirrors the live avatar video and renders the built-in controls (mute / volume / screen-share / end). Closing the PiP window or returning to the original tab restores the in-page avatar. Chrome / Edge 116+ on HTTPS.
551
+
552
+ ```typescript
553
+ const instance = await NapsterCompanionApiSdk.init(token, {
554
+ features: {
555
+ pictureInPicture: {
556
+ enabled: true,
557
+ width: 400, // optional, default 400
558
+ height: 300, // optional, default 300
559
+ },
560
+ },
561
+ });
562
+ ```
563
+
564
+ **Browser requirements for the auto-PiP trigger to fire:**
565
+
566
+ - Secure context (HTTPS)
567
+ - Active media playback with audio
568
+ - The site has met the browser's Media Engagement Index threshold (user frequently consumes media on the site)
569
+
570
+ If the requirements aren't met, the avatar simply stays in-page when the tab loses focus — no errors are thrown.
571
+
572
+ ### 3.3 Screen Sharing
573
+
574
+ Share the user's screen with the avatar in real time. The SDK captures the display at 1 FPS, renders each frame onto an internal canvas, and streams the canvas track over WebRTC so the avatar can "see" what the user sees. Fully browser-based — no plugins or extensions required.
575
+
576
+ #### Enable & Configure
577
+
578
+ ```typescript
579
+ const instance = await NapsterCompanionApiSdk.init(token, {
580
+ features: {
581
+ screenShare: {
582
+ enabled: true,
583
+ },
584
+ },
585
+ });
586
+ ```
587
+
588
+ > **Note:** `features.screenShare.enabled` must be `true` for the screen share controls to appear and for `isScreenShareSupported` to return `true`.
589
+
590
+ #### Start & Stop
591
+
592
+ ```typescript
593
+ // Start sharing (opens browser's screen picker)
594
+ await instance.startScreenShare();
595
+
596
+ // Stop sharing
597
+ instance.stopScreenShare();
598
+
599
+ // Or toggle on/off
600
+ await instance.toggleScreenShare();
601
+ ```
602
+
603
+ The SDK sends `start_video` / `stop_video` commands to the avatar server automatically. If the user stops sharing via the browser's native "Stop sharing" button, the SDK detects this and cleans up.
604
+
605
+ #### Checking State
606
+
607
+ ```typescript
608
+ // Whether screen sharing is currently active
609
+ instance.isScreenSharing; // boolean
610
+
611
+ // Whether the browser supports screen sharing AND the feature is enabled
612
+ instance.isScreenShareSupported; // boolean
613
+ ```
614
+
615
+ #### Cleanup
616
+
617
+ Screen sharing is automatically stopped when:
618
+
619
+ - The user calls `instance.destroy()`
620
+ - The WebRTC connection closes (network failure, session end)
621
+ - The user clicks the browser's native "Stop sharing" button
622
+
623
+ ### 3.4 Position & Layout
527
624
 
528
625
  Customize the avatar's position on the screen using predefined positions or custom styles. Also you can override the position using style properties.
529
626
 
@@ -685,7 +782,55 @@ if (instance.isFeatureEnabled("disclaimer")) {
685
782
  }
686
783
  ```
687
784
 
688
- ### 5.4 Communication Methods
785
+ ### 5.4 Screen Sharing Methods
786
+
787
+ #### `startScreenShare(): Promise<void>`
788
+
789
+ Start screen sharing. Opens the browser's screen picker and begins streaming frames to the avatar.
790
+
791
+ ```typescript
792
+ await instance.startScreenShare();
793
+ ```
794
+
795
+ > **Note:** Requires `features.screenShare.enabled = true` in the init config. Does nothing if already sharing.
796
+
797
+ #### `stopScreenShare(): void`
798
+
799
+ Stop screen sharing. Releases the display stream and notifies the server.
800
+
801
+ ```typescript
802
+ instance.stopScreenShare();
803
+ ```
804
+
805
+ #### `toggleScreenShare(): Promise<void>`
806
+
807
+ Toggle screen sharing on or off.
808
+
809
+ ```typescript
810
+ await instance.toggleScreenShare();
811
+ ```
812
+
813
+ #### `isScreenSharing: boolean` _(read-only)_
814
+
815
+ Whether screen sharing is currently active.
816
+
817
+ ```typescript
818
+ if (instance.isScreenSharing) {
819
+ console.log("User is sharing their screen");
820
+ }
821
+ ```
822
+
823
+ #### `isScreenShareSupported: boolean` _(read-only)_
824
+
825
+ Whether screen sharing is supported by the browser **and** enabled in the feature config.
826
+
827
+ ```typescript
828
+ if (instance.isScreenShareSupported) {
829
+ showScreenShareButton();
830
+ }
831
+ ```
832
+
833
+ ### 5.5 Communication Methods
689
834
 
690
835
  #### `sendCommand(command: { type: string; data?: object }): void`
691
836
 
@@ -699,7 +844,7 @@ instance.sendCommand({ type: "send_message", data: { text: "Hello, how are you?"
699
844
  instance.sendCommand({ type: "cancel" });
700
845
  ```
701
846
 
702
- ### 5.5 Audio Control Methods
847
+ ### 5.6 Audio Control Methods
703
848
 
704
849
  Control the avatar's incoming WebRTC audio output (the avatar's voice the user hears). These methods operate on the underlying `<audio>` element and do not affect the user's microphone.
705
850
 
@@ -745,6 +890,68 @@ Get the current avatar audio output volume in the range `0..1`.
745
890
  const volume = instance.getAudioVolume();
746
891
  ```
747
892
 
893
+ ### 5.7 Microphone Control Methods
894
+
895
+ Control the user's microphone input that is sent to the avatar.
896
+
897
+ #### `muteMic(): void`
898
+
899
+ Mute the user's microphone input.
900
+
901
+ ```typescript
902
+ instance.muteMic();
903
+ ```
904
+
905
+ #### `unmuteMic(): void`
906
+
907
+ Unmute the user's microphone input.
908
+
909
+ ```typescript
910
+ instance.unmuteMic();
911
+ ```
912
+
913
+ #### `isMicMuted: boolean` (readonly)
914
+
915
+ Whether the user's microphone is currently muted.
916
+
917
+ ```typescript
918
+ if (instance.isMicMuted) {
919
+ instance.unmuteMic();
920
+ }
921
+ ```
922
+
923
+ ### 5.8 Avatar Speech Control Methods
924
+
925
+ Interrupt the avatar's response and inspect speaking state for both sides of the conversation.
926
+
927
+ #### `stopAvatarTalking(): void`
928
+
929
+ Interrupt the avatar's current response so it stops talking. Sends a `cancel` command over the data channel.
930
+
931
+ ```typescript
932
+ instance.stopAvatarTalking();
933
+ ```
934
+
935
+ #### `isAvatarSpeaking: boolean` (readonly)
936
+
937
+ Whether the avatar is currently speaking.
938
+
939
+ ```typescript
940
+ if (instance.isAvatarSpeaking) {
941
+ instance.stopAvatarTalking();
942
+ }
943
+ ```
944
+
945
+ #### `isUserTalking: boolean` (readonly)
946
+
947
+ Whether the user is currently talking (detected from the microphone input).
948
+
949
+ ```typescript
950
+ if (instance.isUserTalking) {
951
+ // e.g. dim a "push to talk" indicator
952
+ }
953
+ ```
954
+
748
955
  ## 6. Configuration Interface
749
956
 
750
957
  ```typescript
@@ -782,6 +989,13 @@ interface NapsterCompanionApiConfig {
782
989
  };
783
990
  disclaimer?: { enabled: boolean; text?: string };
784
991
  showSDKLoader?: { enabled: boolean; bgColor?: string };
992
+ pictureInPicture?: {
993
+ enabled: boolean;
994
+ width?: number; // default 400
995
+ height?: number; // default 300
996
+ };
997
+ screenShare?: { enabled: boolean };
998
+ controls?: { enabled: boolean };
785
999
  };
786
1000
 
787
1001
  // Configuration
@@ -17,11 +17,10 @@ export interface AvatarOptions {
17
17
  export interface StreamsUpdate {
18
18
  videoStream?: MediaStream | null;
19
19
  audioStream?: MediaStream | null;
20
- userMicrophoneStream?: MediaStream | null;
21
20
  }
22
21
  export interface AvatarController extends BaseController<AvatarOptions> {
23
22
  updateStreams: (streams: StreamsUpdate) => void;
24
- updateWaveform: (opts: Partial<Pick<WaveFormOptions, "isMuted" | "isAvatarSpeaking" | "selectedMicrophone" | "userMicrophoneStream">>) => void;
23
+ updateWaveform: (opts: Partial<Pick<WaveFormOptions, "isMuted" | "isAvatarSpeaking" | "selectedMicrophone">>) => void;
25
24
  updateFeatures: (features: Partial<FeatureConfig>) => void;
26
25
  setAvatarReady: (ready: boolean) => void;
27
26
  handleMessage: (data: EventMessage) => void;
@@ -30,6 +29,7 @@ export interface AvatarController extends BaseController<AvatarOptions> {
30
29
  getAudioMuted: () => boolean;
31
30
  setAudioVolume: (volume: number) => void;
32
31
  getAudioVolume: () => number;
32
+ notifyActivity: () => void;
33
33
  }
34
34
  /**
35
35
  * Vanilla Avatar implementation.
@@ -22,6 +22,7 @@ export interface EmbedController extends BaseController<EmbedOptions> {
22
22
  getAudioMuted: () => boolean;
23
23
  setAudioVolume: (volume: number) => void;
24
24
  getAudioVolume: () => number;
25
+ notifyActivity: () => void;
25
26
  }
26
27
  /**
27
28
  * Vanilla Embed implementation that renders a simple live container with Avatar
@@ -1,5 +1,4 @@
1
1
  import { BaseController } from "../../types";
2
- import "./StyledTooltip.css";
3
2
  export type Placement = "top" | "bottom" | "left" | "right";
4
3
  export interface AttachTooltipOptions {
5
4
  content: string | Node;
@@ -11,6 +10,8 @@ export interface TooltipController extends BaseController<AttachTooltipOptions>
11
10
  }
12
11
  /**
13
12
  * Vanilla tooltip attachment helper.
14
- * Attaches hover listeners to the trigger element and renders a tooltip into document.body.
13
+ * Attaches hover listeners to the trigger element and renders a tooltip.
14
+ * Uses ownerDocument so it works in both main window and PiP window.
15
+ * All styles are inline — no CSS class dependencies.
15
16
  */
16
17
  export declare function attachTooltip(trigger: HTMLElement, { content, placement }: AttachTooltipOptions): TooltipController;
@@ -5,7 +5,6 @@ export interface WaveFormOptions {
5
5
  isAvatarSpeaking?: boolean;
6
6
  isMuted: boolean;
7
7
  selectedMicrophone?: MediaDeviceInfo | null;
8
- userMicrophoneStream: MediaStream | null;
9
8
  toggleMute?: () => void;
10
9
  handleEnd?: () => void;
11
10
  onStopTalking?: () => void;
@@ -0,0 +1,2 @@
1
+ import type { ControlElement } from "./types";
2
+ export declare function createEndButton(onEnd: () => void): ControlElement;
@@ -0,0 +1,2 @@
1
+ import type { ControlElement } from "./types";
2
+ export declare function createMuteButton(): ControlElement;
@@ -0,0 +1,5 @@
1
+ import type { ControlElement } from "./types";
2
+ export declare function createScreenShareButton(options: {
3
+ onToggle: () => void;
4
+ isSupported: boolean;
5
+ }): ControlElement;
@@ -0,0 +1,2 @@
1
+ import type { ControlElement } from "./types";
2
+ export declare function createVolumeButton(): ControlElement;
@@ -0,0 +1,6 @@
1
+ export type { ControlElement } from "./types";
2
+ export { BASE_BUTTON_STYLE, TALKING_STYLE } from "./styles";
3
+ export { createMuteButton } from "./createMuteButton";
4
+ export { createEndButton } from "./createEndButton";
5
+ export { createVolumeButton } from "./createVolumeButton";
6
+ export { createScreenShareButton } from "./createScreenShareButton";
@@ -0,0 +1,2 @@
1
+ export declare const BASE_BUTTON_STYLE: Partial<CSSStyleDeclaration>;
2
+ export declare const TALKING_STYLE: Partial<CSSStyleDeclaration>;
@@ -0,0 +1,4 @@
1
+ export interface ControlElement {
2
+ element: HTMLElement;
3
+ destroy: () => void;
4
+ }
package/lib/index.css CHANGED
@@ -1 +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}*,: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}body,html{background-color:transparent;background:transparent;margin:0;padding:0;width:100%}.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{height:500px;position:fixed;transition:all .3s ease-in-out;width:400px;z-index:9999}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-rectangle{height:400px;width:340px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-silhouette{height:400px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round{height:360px;width:250px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round.np_companion_disclaimer-disabled{height:320px!important}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-right{bottom:0;right:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-left{bottom:0;left:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-center{bottom:0;left:50%;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-right{right:0;top:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-left{left:0;top:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-center{left:50%;top:0;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-center{left:50%;top:50%;transform:translate(-50%,-50%)}.np_companion-avatar{height:100%;position:relative;width:100%}#np_companion-avatar-container{background:transparent;border-radius:var(--base-border-radius);height:100%;overflow:hidden;position:absolute;width:100%}#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-container-fixed #np_companion-avatar-container.np_companion-view-round{border-radius:50%;height:212px;left:50%;transform:translate(-50%,12%);width:212px}.np_companion-container-fixed #np_companion-avatar-container.np_companion-view-rectangle,.np_companion-container-fixed #np_companion-avatar-container.np_companion-view-silhouette{left:50%;transform:translateX(-50%)}.np_companion-avatar-video{height:100%;inset:0;object-fit:cover;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out;width:100%;z-index:10}.np_companion-avatar-video.no-opacity{opacity:0}.np_companion-avatar-canvas{background:transparent;height:100%;object-fit:cover;position:relative;width:100%;z-index:1}.np_companion-container-fixed #np_companion-avatar-container.np_companion-loader-pulse:after{animation:pulse 1.5s ease-in-out infinite;background-color:var(--np-loader-bg-color);border-radius:var(--base-border-radius);content:"";display:block;height:100%;left:0;opacity:.6;overflow:hidden;position:absolute;top:0;width:100%}.np_companion-avatar.np_companion-bg-transparent #np_companion-avatar-container:after{display:none}.np_companion-avatar:has(#np_companion-avatar-container.np_companion-view-round):after{display:none}#np_companion-avatar-container.np_companion-loader-pulse.loader-container.np_companion-view-round:after{animation:pulse 1.5s ease-in-out infinite;background-color:var(--np-loader-bg-color);border-radius:50%;content:"";display:block;height:100%;left:0;opacity:.6;overflow:hidden;position:absolute;top:0;width:100%}.np_companion-avatar.np_companion-bg-transparent #np_companion-avatar-container.np_companion-view-round:after{display:none}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.2}}.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-container{backdrop-filter:blur(19px);background:none;background-color:rgba(52,51,51,.6);border-radius:16px;bottom:0;box-shadow:0 4px 4px 0 rgba(0,0,0,.25),2px 2px 8px 0 rgba(0,0,0,.12);left:50%;max-width:90%;min-width:210px;opacity:1;position:absolute;transform:translateX(-50%);transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:99}.np_companion-avatar-control-container.np_companion-action-btn-container-collapse{opacity:0}.np_companion-avatar-control-container:not(.np_companion-avatar-control-view-round){bottom:16px}.np_companion-avatar:not(.np_companion-bg-transparent) .np_companion-loader-spinner:not(.np_companion-view-silhouette){backdrop-filter:blur(19px);background-color:color-mix(in oklab,var(--np-loader-bg-color) 100%,transparent)!important;filter:none!important;height:100%;width:100%}.np_companion-loader-spinner .loader-container{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:var(--np-loader-color);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-bg-transparent .np_companion-loader-spinner .loader-container{display:none}.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:16px 16px 12px;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-action-btn-container-container .np_companion-action-btn-container-left{transition:all .3s ease-in-out;width:40px}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon{border-radius:80px;cursor:pointer;height:40px;transition:all .3s ease-in-out;width:40px}.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-action-btn-container-container .np_companion-action-btn-container-icon svg{height:auto;width:22px}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.muted svg.np_companion-mic-muted,.np_companion-action-btn-container-container .np_companion-action-btn-container-icon:not(.muted) svg.np_companion-mic-unmuted{display:flex}.np_companion-action-btn-container-container .np_companion-action-btn-container-middle .np_companion-action-btn-container-wave{display:flex;min-width:160px}.np_companion-action-btn-container-container .np_companion-action-btn-container-middle .np_companion-action-btn-container-wave canvas{height:40px;width:100%}.np_companion-action-btn-container-container .np_companion-action-btn-container-right{gap:8px;transition:all .3s ease-in-out}.np_companion-action-btn-container-container .np_companion-action-btn-container-left .np_companion-action-btn-container-icon:hover,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon.active,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:hover{background-color:#fff!important}.np_companion-action-btn-container-container .np_companion-action-btn-container-left .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color):hover svg path{fill:#000}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon.np_companion-action-btn-container-call-end svg{height:auto;width:16px}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).np_companion-action-btn-container-call-end:hover svg path{stroke:#000}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).active svg path,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).np_companion-action-btn-container-toggle:hover svg path,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color):hover svg path{fill:#000}.np_companion-mobile-mode{bottom:15px;scale:.7}.np_companion-mobile-mode .np_companion-action-btn-container-container .np_companion-action-btn-container-middle{display:none}.np_companion-mobile-mode .np_companion-action-btn-container-left{opacity:1;width:40px}.np_companion-mobile-mode .np_companion-action-btn-container-right{opacity:1}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.np_companion-talking{background:rgba(52,199,89,.25);box-shadow:0 0 0 2px rgba(52,199,89,.4);transition:background .2s ease,box-shadow .2s ease}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.np_companion-talking svg path{fill:#34c759}.tooltip{word-wrap:break-word;display:block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.5;margin:0;opacity:0;position:absolute;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:1080}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{display:block;height:.4rem;position:absolute;width:.8rem}.tooltip .tooltip-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.bs-tooltip-auto[data-popper-placement^=top],.bs-tooltip-top{padding:0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:-.4rem;left:50%;transform:translateX(-50%)}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before,.bs-tooltip-top .tooltip-arrow:before{border-top-color:#000;border-width:.4rem .4rem 0;top:0}.bs-tooltip-auto[data-popper-placement^=right],.bs-tooltip-end{padding:0}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{height:.8rem;left:-.4rem;top:50%;transform:translateY(-50%);width:.4rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before,.bs-tooltip-end .tooltip-arrow:before{border-right-color:#000;border-width:.4rem .4rem .4rem 0;right:0}.bs-tooltip-auto[data-popper-placement^=bottom],.bs-tooltip-bottom{padding:0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{left:50%;top:-.4rem;transform:translateX(-50%)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before,.bs-tooltip-bottom .tooltip-arrow:before{border-bottom-color:#000;border-width:0 .4rem .4rem;bottom:0}.bs-tooltip-auto[data-popper-placement^=left],.bs-tooltip-start{padding:0}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{height:.8rem;right:-.4rem;top:50%;transform:translateY(-50%);width:.4rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before,.bs-tooltip-start .tooltip-arrow:before{border-left-color:#000;border-width:.4rem 0 .4rem .4rem;left:0}.tooltip-inner{background-color:#000;border-radius:.25rem;color:#fff;max-width:200px;padding:.25rem .5rem;text-align:center}.styled-tooltip{z-index:99999}.styled-tooltip .tooltip-inner{background-color:#fff;border-radius:.375rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);color:#3f4254;display:block;font-size:14px;max-width:300px;padding:10px 14px}.styled-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before,.styled-tooltip.bs-tooltip-top .tooltip-arrow:before{border-top-color:#fff}.styled-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before,.styled-tooltip.bs-tooltip-end .tooltip-arrow:before{border-right-color:#fff}.styled-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before,.styled-tooltip.bs-tooltip-bottom .tooltip-arrow:before{border-bottom-color:#fff}.styled-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before,.styled-tooltip.bs-tooltip-start .tooltip-arrow:before{border-left-color:#fff}.np_volume-control{align-items:center;display:inline-flex;flex-direction:column;gap:12px;position:relative;z-index:1000}.np_volume-slider-container{background:#6565652e;border-radius:8px;bottom:52px;opacity:0;padding:8px;pointer-events:none;position:absolute;transform:translateY(10px);transition:all .3s ease;visibility:hidden;z-index:1001}.np_volume-control .np_volume-slider-container.np_volume-slider-visible,.np_volume-slider-container:hover{opacity:1;pointer-events:all;transform:translateY(0);visibility:visible}.np_volume-slider-track{backdrop-filter:blur(10px);background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.3);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;height:120px;position:relative;width:8px}.np_volume-slider-fill{background:linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.7));border-radius:4px;bottom:0;height:50%;left:0;pointer-events:none;position:absolute;right:0;transition:height .1s ease}.np_volume-slider-thumb{background:#fff;border-radius:50%;bottom:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:grab;height:16px;left:50%;pointer-events:none;position:absolute;transform:translate(-50%,50%);transition:bottom .1s ease;width:16px}.np_volume-slider-thumb:active{cursor:grabbing;transform:translate(-50%,50%) scale(1.1)}.np_volume-slider-track:hover .np_volume-slider-thumb{transform:translate(-50%,50%) scale(1.15)}@media (max-width:768px){.np_volume-slider-track{height:100px}.np_volume-slider-container{bottom:70px}}.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%}.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}.np_companion-timer-circle{align-items:center;display:flex;height:80px;justify-content:center;position:relative;width:80px}.np_companion-timer-circle svg{overflow:visible;transform:rotate(-90deg)}.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:all .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}
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}*,: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}body,html{background-color:transparent;background:transparent;margin:0;padding:0;width:100%}.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{height:500px;position:fixed;transition:all .3s ease-in-out;width:400px;z-index:9999}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-rectangle{height:400px;width:340px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-silhouette{height:400px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round{height:360px;width:250px}#np_companion-sdk-root.np_companion-container-fixed.np_companion-view-round.np_companion_disclaimer-disabled{height:320px!important}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-right{bottom:0;right:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-left{bottom:0;left:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-bottom-center{bottom:0;left:50%;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-right{right:0;top:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-left{left:0;top:0}#np_companion-sdk-root.np_companion-container-fixed.np_companion-top-center{left:50%;top:0;transform:translateX(-50%)}#np_companion-sdk-root.np_companion-container-fixed.np_companion-center{left:50%;top:50%;transform:translate(-50%,-50%)}.np_companion-avatar{height:100%;position:relative;width:100%}#np_companion-avatar-container{background:transparent;border-radius:var(--base-border-radius);height:100%;overflow:hidden;position:absolute;width:100%}#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-container-fixed #np_companion-avatar-container.np_companion-view-round{border-radius:50%;height:212px;left:50%;transform:translate(-50%,12%);width:212px}.np_companion-container-fixed #np_companion-avatar-container.np_companion-view-rectangle,.np_companion-container-fixed #np_companion-avatar-container.np_companion-view-silhouette{left:50%;transform:translateX(-50%)}.np_companion-avatar-video{height:100%;inset:0;object-fit:cover;pointer-events:none;position:absolute;transition:opacity .3s ease-in-out;width:100%;z-index:10}.np_companion-avatar-video.no-opacity{opacity:0}.np_companion-avatar-canvas{background:transparent;height:100%;object-fit:cover;position:relative;width:100%;z-index:1}.np_companion-container-fixed #np_companion-avatar-container.np_companion-loader-pulse:after{animation:pulse 1.5s ease-in-out infinite;background-color:var(--np-loader-bg-color);border-radius:var(--base-border-radius);content:"";display:block;height:100%;left:0;opacity:.6;overflow:hidden;position:absolute;top:0;width:100%}.np_companion-avatar.np_companion-bg-transparent #np_companion-avatar-container:after{display:none}.np_companion-avatar:has(#np_companion-avatar-container.np_companion-view-round):after{display:none}#np_companion-avatar-container.np_companion-loader-pulse.loader-container.np_companion-view-round:after{animation:pulse 1.5s ease-in-out infinite;background-color:var(--np-loader-bg-color);border-radius:50%;content:"";display:block;height:100%;left:0;opacity:.6;overflow:hidden;position:absolute;top:0;width:100%}.np_companion-avatar.np_companion-bg-transparent #np_companion-avatar-container.np_companion-view-round:after{display:none}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.2}}.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-container{backdrop-filter:blur(19px);background:none;background-color:rgba(52,51,51,.6);border-radius:16px;bottom:0;box-shadow:0 4px 4px 0 rgba(0,0,0,.25),2px 2px 8px 0 rgba(0,0,0,.12);left:50%;max-width:90%;min-width:210px;opacity:1;position:absolute;transform:translateX(-50%);transition:opacity .4s cubic-bezier(.4,0,.2,1);z-index:99}.np_companion-avatar-control-container.np_companion-action-btn-container-collapse{opacity:0}.np_companion-avatar-control-container:not(.np_companion-avatar-control-view-round){bottom:16px}.np_companion-avatar:not(.np_companion-bg-transparent) .np_companion-loader-spinner:not(.np_companion-view-silhouette){backdrop-filter:blur(19px);background-color:color-mix(in oklab,var(--np-loader-bg-color) 100%,transparent)!important;filter:none!important;height:100%;width:100%}.np_companion-loader-spinner .loader-container{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:var(--np-loader-color);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-bg-transparent .np_companion-loader-spinner .loader-container{display:none}.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:16px 16px 12px;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-action-btn-container-container .np_companion-action-btn-container-left{transition:all .3s ease-in-out;width:40px}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon{border-radius:80px;cursor:pointer;height:40px;transition:all .3s ease-in-out;width:40px}.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-action-btn-container-container .np_companion-action-btn-container-icon svg{height:auto;width:22px}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.muted svg.np_companion-mic-muted,.np_companion-action-btn-container-container .np_companion-action-btn-container-icon:not(.muted) svg.np_companion-mic-unmuted{display:flex}.np_companion-action-btn-container-container .np_companion-action-btn-container-middle .np_companion-action-btn-container-wave{display:flex;min-width:160px}.np_companion-action-btn-container-container .np_companion-action-btn-container-middle .np_companion-action-btn-container-wave canvas{height:40px;width:100%}.np_companion-action-btn-container-container .np_companion-action-btn-container-right{gap:8px;transition:all .3s ease-in-out}.np_companion-action-btn-container-container .np_companion-action-btn-container-left .np_companion-action-btn-container-icon:hover,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon.active,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:hover{background-color:#fff!important}.np_companion-action-btn-container-container .np_companion-action-btn-container-left .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color):hover svg path{fill:#000}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon.np_companion-action-btn-container-call-end svg{height:auto;width:16px}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).np_companion-action-btn-container-call-end:hover svg path{stroke:#000}.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).active svg path,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color).np_companion-action-btn-container-toggle:hover svg path,.np_companion-action-btn-container-container .np_companion-action-btn-container-right .np_companion-action-btn-container-icon:not(.np_companion-persist-fill-color):hover svg path{fill:#000}.np_companion-mobile-mode{bottom:15px;scale:.7}.np_companion-mobile-mode .np_companion-action-btn-container-container .np_companion-action-btn-container-middle{display:none}.np_companion-mobile-mode .np_companion-action-btn-container-left{opacity:1;width:40px}.np_companion-mobile-mode .np_companion-action-btn-container-right{opacity:1}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.np_companion-talking{background:rgba(52,199,89,.25);box-shadow:0 0 0 2px rgba(52,199,89,.4);transition:background .2s ease,box-shadow .2s ease}.np_companion-action-btn-container-container .np_companion-action-btn-container-icon.np_companion-talking svg path{fill:#34c759}.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%}.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:all .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}
package/lib/index.d.ts CHANGED
@@ -5,7 +5,7 @@ declare global {
5
5
  }
6
6
  }
7
7
  declare class NapsterCompanionApiSdkVanilla implements NapsterCompanionApiSDK {
8
- readonly version = "1.0.0-alpha.41";
8
+ readonly version: string;
9
9
  private static instance;
10
10
  private mountTarget;
11
11
  private rootEl;
@@ -16,6 +16,8 @@ declare class NapsterCompanionApiSdkVanilla implements NapsterCompanionApiSDK {
16
16
  private config;
17
17
  private isInitialized;
18
18
  private unloadHandler;
19
+ private pipController;
20
+ private lastFaceDetected;
19
21
  static getInstance(): NapsterCompanionApiSdkVanilla;
20
22
  constructor();
21
23
  private renderApp;