@memberjunction/ng-conversations 6.2.0-edge.5 → 6.2.0-edge.6

package/dist/lib/components/realtime/realtime-session-overlay.component.js

@@ -71,80 +71,84 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template(rf
     i0.ɵɵelementEnd();
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-realtime-agent-orb", 32);
-    i0.ɵɵelementStart(1, "div", 33);
+    i0.ɵɵelement(0, "mj-realtime-agent-orb", 31);
+    i0.ɵɵelementStart(1, "div", 32);
     i0.ɵɵelement(2, "span")(3, "span")(4, "span")(5, "span")(6, "span")(7, "span")(8, "span")(9, "span")(10, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r5 = i0.ɵɵnextContext(2);
+    const state_r4 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("State", ctx_r1.HeroOrbState(state_r5));
+    i0.ɵɵproperty("State", ctx_r1.HeroOrbState(state_r4));
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵelementStart(0, "span", 35);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const caption_r6 = i0.ɵɵnextContext();
+    const caption_r5 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", caption_r6.Speaker, ":");
+    i0.ɵɵtextInterpolate1("", caption_r5.Speaker, ":");
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 28)(1, "span", 34)(2, "span", 35);
-    i0.ɵɵconditionalCreate(3, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Conditional_3_Template, 2, 1, "span", 36);
+    i0.ɵɵelementStart(0, "p", 28)(1, "span", 33)(2, "span", 34);
+    i0.ɵɵconditionalCreate(3, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Conditional_3_Template, 2, 1, "span", 35);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const caption_r6 = ctx;
+    const caption_r5 = ctx;
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(caption_r6.Speaker ? 3 : -1);
+    i0.ɵɵconditional(caption_r5.Speaker ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", caption_r6.Text, " ");
+    i0.ɵɵtextInterpolate1(" ", caption_r5.Text, " ");
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelementStart(0, "div", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 38);
+    i0.ɵɵelementStart(2, "div", 37);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r5 = i0.ɵɵnextContext(2);
+    const state_r4 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.AgentName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r5));
+    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r4));
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r5 = i0.ɵɵnextContext(2);
+    const state_r4 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r5));
+    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r4));
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnTextReveal()); });
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵtext(2, " Show the conversation ");
+    i0.ɵɵelementEnd();
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵconditionalCreate(1, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_1_Template, 11, 1);
     i0.ɵɵelementStart(2, "div", 27, 3);
     i0.ɵɵconditionalCreate(4, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Template, 5, 2, "p", 28);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_5_Template, 4, 2)(6, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_6_Template, 2, 1, "span", 29);
-    i0.ɵɵelementStart(7, "button", 30);
-    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTextReveal()); });
-    i0.ɵɵelement(8, "i", 31);
-    i0.ɵɵtext(9, " Show the conversation ");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_7_Template, 3, 0, "button", 30);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_11_0;
-    const state_r5 = i0.ɵɵnextContext();
+    const state_r4 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("hero--presenting", ctx_r1.PresenterOnStage);
-    i0.ɵɵattribute("data-state", state_r5);
+    i0.ɵɵattribute("data-state", state_r4);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.PresenterOnStage ? 1 : -1);
     i0.ɵɵadvance();
@@ -153,10 +157,12 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template(r
     i0.ɵɵconditional((tmp_11_0 = ctx_r1.ShowAvatarCaptions && ctx_r1.AvatarCaption) ? 4 : -1, tmp_11_0);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.PresenterOnStage ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.PresenterOnStage || !ctx_r1.Ui.showCaptionsControl ? 7 : -1);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-session-thread", 39);
+    i0.ɵɵelementStart(0, "mj-realtime-session-thread", 40);
     i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_mj_realtime_session_thread_OpenRunRequested_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("OpenArtifactRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_mj_realtime_session_thread_OpenArtifactRequested_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenArtifactRequested($event)); })("CancelRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_mj_realtime_session_thread_CancelRequested_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCancelDelegation($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -168,24 +174,24 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Conditiona
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-perception-chip", 40);
+    i0.ɵɵelementStart(0, "mj-realtime-perception-chip", 41);
     i0.ɵɵlistener("SourceToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_perception_chip_SourceToggled_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnVideoSourceToggled($event)); })("SourcePicked", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_perception_chip_SourcePicked_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnVideoSourcePicked($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(1, RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Conditional_1_Template, 1, 0, "mj-realtime-channel-strip");
-    i0.ɵɵelementStart(2, "mj-realtime-composer", 41);
+    i0.ɵɵelementStart(2, "mj-realtime-composer", 42);
     i0.ɵɵlistener("OpenChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_OpenChanged_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerOpenChanged($event)); })("CameraToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_CameraToggled_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCameraToggled($event)); })("ShareRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_ShareRequested_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnShareRequested($event)); })("StopShareRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_StopShareRequested_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnStopShareRequested()); })("DeviceSelected", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_DeviceSelected_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeviceSelected($event)); })("CaptionsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_CaptionsToggled_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCaptionsToggled($event)); })("DetailsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_DetailsToggled_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDetailsToggled()); })("MuteChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_MuteChanged_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerMuteChanged($event)); })("EndRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template_mj_realtime_composer_EndRequested_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEndCall()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Sources", ctx_r1.VideoSources);
+    i0.ɵɵproperty("Sources", ctx_r1.VisibleVideoSources);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ChannelStripVisible ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Open", ctx_r1.ComposerOpen)("Compact", ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("CaptionsOn", ctx_r1.ShowCaptions)("IsMuted", ctx_r1.Muted)("ShowCamera", ctx_r1.CaptureOffers.Camera)("ShowShare", ctx_r1.CaptureOffers.Screen)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("SharePanels", ctx_r1.SharePanels)("Devices", ctx_r1.CallDevices)("SelectedMicrophoneID", ctx_r1.SelectedMicrophoneID)("SelectedCameraID", ctx_r1.SelectedCameraID)("ShowDetails", ctx_r1.ShowDetailsControl)("DetailsOn", ctx_r1.DetailsPeek);
+    i0.ɵɵproperty("Open", ctx_r1.ComposerOpen)("Compact", ctx_r1.Ui.chrome === "orb" || ctx_r1.Ui.compact)("CaptionsOn", ctx_r1.ShowCaptions)("IsMuted", ctx_r1.Muted)("ShowCamera", ctx_r1.CaptureOffers.Camera)("ShowShare", ctx_r1.CaptureOffers.Screen)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("SharePanels", ctx_r1.SharePanels)("Devices", ctx_r1.CallDevices)("SelectedMicrophoneID", ctx_r1.SelectedMicrophoneID)("SelectedCameraID", ctx_r1.SelectedCameraID)("ShowDetails", ctx_r1.ShowDetailsControl)("DetailsOn", ctx_r1.DetailsPeek);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵlistener("mousedown", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeStart($event)); })("dblclick", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template_div_dblclick_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeReset()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -194,8 +200,8 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditiona
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template, 1, 2, "div", 42);
-    i0.ɵɵelementStart(1, "div", 43)(2, "mj-realtime-surface-tabs", 44);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template, 1, 2, "div", 43);
+    i0.ɵɵelementStart(1, "div", 44)(2, "mj-realtime-surface-tabs", 45);
     i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_OpenRunRequested_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("CollapsedChange", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_CollapsedChange_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelCollapsedChange($event)); })("WideChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_WideChanged_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelWideChanged($event)); })("ActiveChannelChange", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_ActiveChannelChange_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnActiveChannelChange($event)); })("ChannelSlotChange", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_ChannelSlotChange_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChannelSlotChange($event)); })("MoveRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_MoveRequested_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnMoveRequested($event)); })("ResetLayoutRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template_mj_realtime_surface_tabs_ResetLayoutRequested_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnResetLayout()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -208,7 +214,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template(r
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-media-move-menu", 49);
+    i0.ɵɵelementStart(0, "mj-media-move-menu", 50);
     i0.ɵɵlistener("MoveRequested", function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Conditional_2_Template_mj_media_move_menu_MoveRequested_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMoveRequested($event)); })("ResetLayoutRequested", function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Conditional_2_Template_mj_media_move_menu_ResetLayoutRequested_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnResetLayout()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -218,9 +224,9 @@ function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditiona
     i0.ɵɵproperty("Key", key_r13)("Title", plugin_r12.TabTitle)("Allowed", ctx_r1.SurfaceStage.AllowedFor(key_r13));
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵelement(1, "mj-realtime-channel-pane", 47);
-    i0.ɵɵconditionalCreate(2, RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Conditional_2_Template, 1, 3, "mj-media-move-menu", 48);
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "mj-realtime-channel-pane", 48);
+    i0.ɵɵconditionalCreate(2, RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Conditional_2_Template, 1, 3, "mj-media-move-menu", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const plugin_r12 = ctx;
@@ -235,7 +241,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditiona
     i0.ɵɵconditional(placement_r16 === "stage" && plugin_r12.ShowsAgentVideo ? 2 : -1);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Template, 3, 7, "div", 46);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Conditional_0_Template, 3, 7, "div", 47);
 } if (rf & 2) {
     let tmp_9_0;
     const key_r13 = ctx.$implicit;
@@ -244,7 +250,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Template(r
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-media-move-menu", 51);
+    i0.ɵɵelementStart(0, "mj-media-move-menu", 52);
     i0.ɵɵlistener("MoveRequested", function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditional_0_Template_mj_media_move_menu_MoveRequested_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveRequested($event)); })("ResetLayoutRequested", function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditional_0_Template_mj_media_move_menu_ResetLayoutRequested_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetLayout()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -253,7 +259,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditiona
     i0.ɵɵproperty("Key", key_r18)("Title", ctx.TabTitle)("Allowed", ctx_r1.SurfaceStage.AllowedFor(key_r18));
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditional_0_Template, 1, 3, "mj-media-move-menu", 50);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Conditional_0_Template, 1, 3, "mj-media-move-menu", 51);
 } if (rf & 2) {
     let tmp_7_0;
     const key_r18 = ctx.$implicit;
@@ -261,7 +267,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Template(r
     i0.ɵɵconditional((tmp_7_0 = ctx_r1.SurfaceStage.PluginFor(key_r18)) ? 0 : -1, tmp_7_0);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 55);
+    i0.ɵɵelementStart(0, "span", 56);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -270,7 +276,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditiona
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-media-move-menu", 63);
+    i0.ɵɵelementStart(0, "mj-media-move-menu", 64);
     i0.ɵɵlistener("MoveRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template_mj_media_move_menu_MoveRequested_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveRequested($event)); })("ResetLayoutRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template_mj_media_move_menu_ResetLayoutRequested_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetLayout()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -281,36 +287,36 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditiona
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "span", 52);
-    i0.ɵɵelementStart(2, "span", 53)(3, "span", 54);
+    i0.ɵɵelement(1, "span", 53);
+    i0.ɵɵelementStart(2, "span", 54)(3, "span", 55);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_5_Template, 2, 1, "span", 55);
+    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_5_Template, 2, 1, "span", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 56);
+    i0.ɵɵelementStart(6, "button", 57);
     i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillMute()); });
-    i0.ɵɵelement(7, "i", 57);
+    i0.ɵɵelement(7, "i", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 58);
+    i0.ɵɵelementStart(8, "button", 59);
     i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillExit()); });
-    i0.ɵɵelement(9, "i", 59);
+    i0.ɵɵelement(9, "i", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template, 1, 3, "mj-media-move-menu", 60);
-    i0.ɵɵelementStart(11, "button", 61);
+    i0.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template, 1, 3, "mj-media-move-menu", 61);
+    i0.ɵɵelementStart(11, "button", 62);
     i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillEnd()); });
-    i0.ɵɵelement(12, "i", 62);
+    i0.ɵɵelement(12, "i", 63);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_8_0;
     let tmp_14_0;
-    const state_r5 = i0.ɵɵnextContext();
+    const state_r4 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-state", state_r5);
+    i0.ɵɵattribute("data-state", state_r4);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("Voice for ", ctx_r1.AgentName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_8_0 = ctx_r1.FocusStateLabel(state_r5)) ? 5 : -1, tmp_8_0);
+    i0.ɵɵconditional((tmp_8_0 = ctx_r1.FocusStateLabel(state_r4)) ? 5 : -1, tmp_8_0);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("board-focus-pill__btn--active", ctx_r1.FocusPillMuted);
     i0.ɵɵproperty("title", ctx_r1.FocusPillMuted ? "Unmute" : "Mute");
@@ -322,7 +328,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template(r
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-camera-check-card", 64);
+    i0.ɵɵelementStart(0, "mj-realtime-camera-check-card", 65);
     i0.ɵɵlistener("Confirmed", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_20_Template_mj_realtime_camera_check_card_Confirmed_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCameraCheckConfirmed()); })("Declined", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_20_Template_mj_realtime_camera_check_card_Declined_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCameraCheckDeclined()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -340,7 +346,7 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵconditionalCreate(6, RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template, 3, 1, "div", 10);
     i0.ɵɵconditionalCreate(7, RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template, 2, 2, "div", 11);
     i0.ɵɵelementStart(8, "div", 12);
-    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 0, "div", 13)(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template, 10, 8, "div", 14)(11, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template, 1, 5, "mj-realtime-session-thread", 15);
+    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 0, "div", 13)(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template, 8, 9, "div", 14)(11, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template, 1, 5, "mj-realtime-session-thread", 15);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "div", 16, 2);
     i0.ɵɵconditionalCreate(14, RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template, 3, 16);
@@ -354,17 +360,17 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵconditionalCreate(20, RealtimeSessionOverlayComponent_Conditional_0_Conditional_20_Template, 1, 3, "mj-realtime-camera-check-card", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_25_0;
-    let tmp_40_0;
-    const state_r5 = ctx;
+    let tmp_26_0;
+    let tmp_41_0;
+    const state_r4 = ctx;
     const callControls_r23 = i0.ɵɵreference(13);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("call-overlay--hidden", ctx_r1.Hidden)("call-overlay--review", ctx_r1.IsReviewing)("board-focus", ctx_r1.ChannelFocusMode);
     i0.ɵɵattribute("aria-label", ctx_r1.IsReviewing ? "Past session review" : "Live voice session");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("State", state_r5)("Compact", !ctx_r1.IsReviewing && ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("AgentName", ctx_r1.AgentName)("ErrorLabel", ctx_r1.CallEndLabel)("ModelName", ctx_r1.IsReviewing ? null : i0.ɵɵpipeBind1(3, 40, ctx_r1.ModelName$))("DevMode", ctx_r1.DevMode)("SessionID", ctx_r1.IsReviewing ? ctx_r1.ReviewSessionID : ctx_r1.SessionID)("ReviewMode", ctx_r1.IsReviewing)("ReviewStartedAt", ctx_r1.ReviewStartedAt)("ReviewClosedAt", ctx_r1.ReviewClosedAt)("ReviewCloseReason", ctx_r1.ReviewCloseReason)("ShowGear", !ctx_r1.IsReviewing && ctx_r1.Ui.showGear)("ShowDensityPicker", ctx_r1.Ui.showDensityPicker)("ShowMinimize", !ctx_r1.IsReviewing && ctx_r1.Ui.showMinimize)("ShowStartLive", ctx_r1.AllowStartLive)("Density", ctx_r1.Disclosure.Milestones.Density);
+    i0.ɵɵproperty("State", state_r4)("Compact", !ctx_r1.IsReviewing && ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("HideState", ctx_r1.ShowHero && !ctx_r1.PresenterOnStage)("AgentName", ctx_r1.AgentName)("ErrorLabel", ctx_r1.CallEndLabel)("ModelName", ctx_r1.IsReviewing ? null : i0.ɵɵpipeBind1(3, 41, ctx_r1.ModelName$))("DevMode", ctx_r1.DevMode)("SessionID", ctx_r1.IsReviewing ? ctx_r1.ReviewSessionID : ctx_r1.SessionID)("ReviewMode", ctx_r1.IsReviewing)("ReviewStartedAt", ctx_r1.ReviewStartedAt)("ReviewClosedAt", ctx_r1.ReviewClosedAt)("ReviewCloseReason", ctx_r1.ReviewCloseReason)("ShowGear", !ctx_r1.IsReviewing && ctx_r1.Ui.showGear)("ShowDensityPicker", ctx_r1.Ui.showDensityPicker)("ShowMinimize", !ctx_r1.IsReviewing && ctx_r1.Ui.showMinimize)("ShowStartLive", ctx_r1.AllowStartLive)("Density", ctx_r1.Disclosure.Milestones.Density);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_25_0 = ctx_r1.MicrophoneNotice) ? 4 : -1, tmp_25_0);
+    i0.ɵɵconditional((tmp_26_0 = ctx_r1.MicrophoneNotice) ? 4 : -1, tmp_26_0);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.AvatarNotice ? 5 : -1);
     i0.ɵɵadvance();
@@ -372,9 +378,9 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.ShowHero ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("call-body--hero", ctx_r1.ShowHero && !ctx_r1.ShowConnectingScreen(state_r5));
+    i0.ɵɵclassProp("call-body--hero", ctx_r1.ShowHero && !ctx_r1.ShowConnectingScreen(state_r4));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ShowConnectingScreen(state_r5) ? 9 : ctx_r1.ShowHero ? 10 : 11);
+    i0.ɵɵconditional(ctx_r1.ShowConnectingScreen(state_r4) ? 9 : ctx_r1.ShowHero ? 10 : 11);
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(!ctx_r1.IsReviewing ? 14 : -1);
     i0.ɵɵadvance();
@@ -384,11 +390,11 @@ function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.ChannelFocusMode ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_40_0 = ctx_r1.CameraCheck) ? 20 : -1, tmp_40_0);
+    i0.ɵɵconditional((tmp_41_0 = ctx_r1.CameraCheck) ? 20 : -1, tmp_41_0);
 } }
 function RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "mj-realtime-whiteboard", 66);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵelement(1, "mj-realtime-whiteboard", 67);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -396,15 +402,15 @@ function RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template(rf
     i0.ɵɵproperty("State", ctx)("AgentName", ctx_r1.AgentName)("ReadOnly", true);
 } }
 function RealtimeSessionOverlayComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template, 2, 3, "div", 65);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template, 2, 3, "div", 66);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional((tmp_3_0 = ctx_r1.ReviewWhiteboard) ? 0 : -1, tmp_3_0);
 } }
 function RealtimeSessionOverlayComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67);
-    i0.ɵɵelement(1, "mj-storage-media-player", 68);
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "mj-storage-media-player", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -502,6 +508,18 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
      * this version doesn't know, such as a newer server's, in place of `AVATAR_NOTICE_CALL_UNKNOWN_REASON_TEXT`.
      */
     AvatarNoticeLabels = null;
+    /**
+     * Whether the top "Audio only: this voice model can't show an avatar" notice banner is shown when
+     * an audio-only call connects. Default `false` so standard voice sessions stay calm and uncluttered
+     * unless a host explicitly opts into showing avatar capability notices.
+     */
+    ShowAvatarNotice = false;
+    /**
+     * Whether the bottom "Agent can see" perception chip is always shown even when only background channel
+     * bridges exist. Default `false`: the chip is only shown when the user actively captures their camera or
+     * screen ({@link CameraOn} / {@link Sharing}), or when explicitly enabled via `[ShowPerceptionChip]="true"`.
+     */
+    ShowPerceptionChip = false;
     // ── Declarative UI configuration (host controls every aspect of the surface) ──
     //
     // Each input is a thin, PascalCase setter over a private slot in {@link _uiInputs}.
@@ -989,11 +1007,11 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     avatarNoticeTimer = null;
     /**
      * Why this live call shows no avatar its agent asked for, while the notice shows: from the moment the call connects
-     * until the user dismisses it or it hides itself. `null` otherwise, and always in review.
+     * until the user dismisses it or it hides itself. `null` otherwise, when {@link ShowAvatarNotice} is off, and always in review.
      */
     get AvatarNotice() {
         const notice = this.avatarNotice;
-        return notice && notice !== this.avatarNoticeDone && !this.IsReviewing ? notice : null;
+        return this.ShowAvatarNotice && notice && notice !== this.avatarNoticeDone && !this.IsReviewing ? notice : null;
     }
     /**
      * The notice's line, in the host's words when it gave some ({@link AvatarNoticeLabels}); a notice without a reason (one
@@ -1033,6 +1051,21 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     }
     /** The video sources the agent can or could see right now (see {@link RealtimeSessionService.VideoSources$}). */
     VideoSources = [];
+    /**
+     * The video sources surfaced to `<mj-realtime-perception-chip>`.
+     * By default (`ShowPerceptionChip = false`), the chip only appears when the user has an active camera or
+     * screen capture (`CameraOn`, `Sharing`, or an enabled `'camera'` / `'screen'` source), preventing
+     * background channel bridges from cluttering pure-voice calls.
+     */
+    get VisibleVideoSources() {
+        const hasUserCapture = this.CameraOn ||
+            this.Sharing ||
+            this.VideoSources.some((s) => (s.Kind === 'camera' || s.Kind === 'screen') && s.Enabled);
+        if (!this.ShowPerceptionChip && !hasUserCapture) {
+            return [];
+        }
+        return this.VideoSources;
+    }
     /** The user's camera and screen share (see {@link RealtimeSessionService.Captures$}). */
     CaptureStates = REALTIME_CAPTURES_OFF;
     /** Which captures the call offers (see {@link RealtimeSessionService.CaptureOffers$}); the composer shows Camera and Share from it. */
@@ -2532,8 +2565,8 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.presenterSlotRef = _t.first);
         } }, hostBindings: function RealtimeSessionOverlayComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function RealtimeSessionOverlayComponent_keydown_HostBindingHandler($event) { return ctx.OnDocumentKeydown($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Hidden: "Hidden", AgentName: "AgentName", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", AvatarNoticeLabels: "AvatarNoticeLabels", Chrome: "Chrome", ConsoleBreakpointPx: "ConsoleBreakpointPx", Compact: "Compact", AutoHideControls: "AutoHideControls", AllowTextReveal: "AllowTextReveal", ShowCaptionsControl: "ShowCaptionsControl", ShowDensityPicker: "ShowDensityPicker", ShowMinimize: "ShowMinimize", ShowEnd: "ShowEnd", ShowSurfacePanel: "ShowSurfacePanel", ShowChannels: "ShowChannels", ShowActivityRail: "ShowActivityRail", ShowDevLinks: "ShowDevLinks", AllowResize: "AllowResize", UiConfig: "UiConfig", ReviewData: "ReviewData", AllowStartLive: "AllowStartLive" }, outputs: { Ended: "Ended", NavigateRequest: "NavigateRequest", StartLiveRequested: "StartLiveRequested", ReviewClosed: "ReviewClosed", Minimized: "Minimized", TextRevealed: "TextRevealed", ChromeChanged: "ChromeChanged", ConnectionStateChanged: "ConnectionStateChanged", MuteChanged: "MuteChanged", DensityChanged: "DensityChanged", SurfacePanelResized: "SurfacePanelResized", ControlInvoked: "ControlInvoked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["reviewBoardTpl", ""], ["recordingTpl", ""], ["callControls", ""], ["presenterSlot", ""], ["role", "region", 1, "call-overlay", 3, "call-overlay--hidden", "call-overlay--review", "board-focus"], ["role", "region", 1, "call-overlay"], [1, "call-main"], [3, "OpenSessionRequested", "DevModeToggled", "DensityChanged", "MinimizeRequested", "StartLiveRequested", "CloseRequested", "State", "Compact", "AgentName", "ErrorLabel", "ModelName", "DevMode", "SessionID", "ReviewMode", "ReviewStartedAt", "ReviewClosedAt", "ReviewCloseReason", "ShowGear", "ShowDensityPicker", "ShowMinimize", "ShowStartLive", "Density"], ["Variant", "warning", "Size", "sm", "Icon", "fa-solid fa-microphone-slash", 1, "call-microphone-notice", 3, "Message"], ["Variant", "info", "Size", "sm", "Icon", "fa-solid fa-video-slash", "Dismissible", "", 1, "call-avatar-notice", 3, "Message"], ["role", "status", "aria-live", "polite", 1, "banner-live-note"], [1, "call-presenter", 3, "call-presenter--on"], [1, "call-body"], [1, "call-connecting"], ["role", "status", "aria-live", "polite", 1, "hero", 3, "hero--presenting"], [3, "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], [1, "call-controls"], [1, "call-stage", 3, "PipRectChange", "Surfaces", "TabSlot", "StageSlot", "ActiveTabKey", "PipRects", "PipKeepClear"], ["mjMediaStageSurface", ""], ["mjMediaStagePipActions", ""], ["role", "status", "aria-label", "Live call (board focus)", 1, "board-focus-pill"], [3, "Camera", "AgentName", "Switch"], ["Variant", "info", "Size", "sm", "Icon", "fa-solid fa-video-slash", "Dismissible", "", 1, "call-avatar-notice", 3, "Dismissed", "Message"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"], [1, "call-presenter"], ["text", "Connecting to the live session\u2026", "size", "medium"], ["role", "status", "aria-live", "polite", 1, "hero"], [1, "hero__presenter"], ["aria-hidden", "true", 1, "hero__caption"], [1, "hero__sr"], ["type", "button", "title", "Show the conversation as text", 1, "hero__reveal", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], [1, "hero__orb", 3, "State"], ["aria-hidden", "true", 1, "hero__eq"], [1, "hero__caption-window"], [1, "hero__caption-lines"], [1, "hero__caption-speaker"], [1, "hero__name"], [1, "hero__sub"], [3, "OpenRunRequested", "OpenArtifactRequested", "CancelRequested", "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], [3, "SourceToggled", "SourcePicked", "Sources"], [3, "OpenChanged", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "CaptionsToggled", "DetailsToggled", "MuteChanged", "EndRequested", "Open", "Compact", "CaptionsOn", "IsMuted", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "Devices", "SelectedMicrophoneID", "SelectedCameraID", "ShowDetails", "DetailsOn"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "call-resizer--active"], [1, "call-panel"], [3, "OpenRunRequested", "CollapsedChange", "WideChanged", "ActiveChannelChange", "ChannelSlotChange", "MoveRequested", "ResetLayoutRequested", "State", "DevMode", "CurrentUser", "EnvironmentID", "ShowActivityTab", "ExtraArtifacts", "Collapsed", "SurfacePlacements", "AllowedPlacements"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "mousedown", "dblclick"], ["role", "region", 1, "stage-frame", 3, "mjSharePanel", "mjSharePanelIcon"], [3, "Plugin", "Visible", "Placement"], ["Placement", "stage", 1, "stage-presenter-move", 3, "Key", "Title", "Allowed"], ["Placement", "stage", 1, "stage-presenter-move", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], ["Placement", "pip", 3, "Key", "Title", "Allowed"], ["Placement", "pip", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], ["aria-hidden", "true", 1, "board-focus-pill__orb"], [1, "board-focus-pill__text"], [1, "board-focus-pill__name"], [1, "board-focus-pill__state"], ["type", "button", 1, "board-focus-pill__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", "title", "Show thread", "aria-label", "Show the conversation thread", 1, "board-focus-pill__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["Placement", "stage", 3, "Key", "Title", "Allowed"], ["type", "button", "title", "End call", "aria-label", "End the call", 1, "board-focus-pill__btn", "board-focus-pill__btn--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["Placement", "stage", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], [3, "Confirmed", "Declined", "Camera", "AgentName", "Switch"], [1, "review-board-host"], [3, "State", "AgentName", "ReadOnly"], [1, "review-recording-host"], [3, "FileID", "Transcript", "Provider"]], template: function RealtimeSessionOverlayComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Template, 21, 42, "div", 4);
+        } }, inputs: { Hidden: "Hidden", AgentName: "AgentName", CurrentUser: "CurrentUser", EnvironmentID: "EnvironmentID", AvatarNoticeLabels: "AvatarNoticeLabels", ShowAvatarNotice: "ShowAvatarNotice", ShowPerceptionChip: "ShowPerceptionChip", Chrome: "Chrome", ConsoleBreakpointPx: "ConsoleBreakpointPx", Compact: "Compact", AutoHideControls: "AutoHideControls", AllowTextReveal: "AllowTextReveal", ShowCaptionsControl: "ShowCaptionsControl", ShowDensityPicker: "ShowDensityPicker", ShowMinimize: "ShowMinimize", ShowEnd: "ShowEnd", ShowSurfacePanel: "ShowSurfacePanel", ShowChannels: "ShowChannels", ShowActivityRail: "ShowActivityRail", ShowDevLinks: "ShowDevLinks", AllowResize: "AllowResize", UiConfig: "UiConfig", ReviewData: "ReviewData", AllowStartLive: "AllowStartLive" }, outputs: { Ended: "Ended", NavigateRequest: "NavigateRequest", StartLiveRequested: "StartLiveRequested", ReviewClosed: "ReviewClosed", Minimized: "Minimized", TextRevealed: "TextRevealed", ChromeChanged: "ChromeChanged", ConnectionStateChanged: "ConnectionStateChanged", MuteChanged: "MuteChanged", DensityChanged: "DensityChanged", SurfacePanelResized: "SurfacePanelResized", ControlInvoked: "ControlInvoked" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["reviewBoardTpl", ""], ["recordingTpl", ""], ["callControls", ""], ["presenterSlot", ""], ["role", "region", 1, "call-overlay", 3, "call-overlay--hidden", "call-overlay--review", "board-focus"], ["role", "region", 1, "call-overlay"], [1, "call-main"], [3, "OpenSessionRequested", "DevModeToggled", "DensityChanged", "MinimizeRequested", "StartLiveRequested", "CloseRequested", "State", "Compact", "HideState", "AgentName", "ErrorLabel", "ModelName", "DevMode", "SessionID", "ReviewMode", "ReviewStartedAt", "ReviewClosedAt", "ReviewCloseReason", "ShowGear", "ShowDensityPicker", "ShowMinimize", "ShowStartLive", "Density"], ["Variant", "warning", "Size", "sm", "Icon", "fa-solid fa-microphone-slash", 1, "call-microphone-notice", 3, "Message"], ["Variant", "info", "Size", "sm", "Icon", "fa-solid fa-video-slash", "Dismissible", "", 1, "call-avatar-notice", 3, "Message"], ["role", "status", "aria-live", "polite", 1, "banner-live-note"], [1, "call-presenter", 3, "call-presenter--on"], [1, "call-body"], [1, "call-connecting"], ["role", "status", "aria-live", "polite", 1, "hero", 3, "hero--presenting"], [3, "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], [1, "call-controls"], [1, "call-stage", 3, "PipRectChange", "Surfaces", "TabSlot", "StageSlot", "ActiveTabKey", "PipRects", "PipKeepClear"], ["mjMediaStageSurface", ""], ["mjMediaStagePipActions", ""], ["role", "status", "aria-label", "Live call (board focus)", 1, "board-focus-pill"], [3, "Camera", "AgentName", "Switch"], ["Variant", "info", "Size", "sm", "Icon", "fa-solid fa-video-slash", "Dismissible", "", 1, "call-avatar-notice", 3, "Dismissed", "Message"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"], [1, "call-presenter"], ["text", "Connecting to the live session\u2026", "size", "medium"], ["role", "status", "aria-live", "polite", 1, "hero"], [1, "hero__presenter"], ["aria-hidden", "true", 1, "hero__caption"], [1, "hero__sr"], ["type", "button", "title", "Show the conversation as text", 1, "hero__reveal"], [1, "hero__orb", 3, "State"], ["aria-hidden", "true", 1, "hero__eq"], [1, "hero__caption-window"], [1, "hero__caption-lines"], [1, "hero__caption-speaker"], [1, "hero__name"], [1, "hero__sub"], ["type", "button", "title", "Show the conversation as text", 1, "hero__reveal", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], [3, "OpenRunRequested", "OpenArtifactRequested", "CancelRequested", "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], [3, "SourceToggled", "SourcePicked", "Sources"], [3, "OpenChanged", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "CaptionsToggled", "DetailsToggled", "MuteChanged", "EndRequested", "Open", "Compact", "CaptionsOn", "IsMuted", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "Devices", "SelectedMicrophoneID", "SelectedCameraID", "ShowDetails", "DetailsOn"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "call-resizer--active"], [1, "call-panel"], [3, "OpenRunRequested", "CollapsedChange", "WideChanged", "ActiveChannelChange", "ChannelSlotChange", "MoveRequested", "ResetLayoutRequested", "State", "DevMode", "CurrentUser", "EnvironmentID", "ShowActivityTab", "ExtraArtifacts", "Collapsed", "SurfacePlacements", "AllowedPlacements"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize the surface panel (double-click to reset)", "title", "Drag to resize \u2022 double-click to reset", 1, "call-resizer", 3, "mousedown", "dblclick"], ["role", "region", 1, "stage-frame", 3, "mjSharePanel", "mjSharePanelIcon"], [3, "Plugin", "Visible", "Placement"], ["Placement", "stage", 1, "stage-presenter-move", 3, "Key", "Title", "Allowed"], ["Placement", "stage", 1, "stage-presenter-move", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], ["Placement", "pip", 3, "Key", "Title", "Allowed"], ["Placement", "pip", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], ["aria-hidden", "true", 1, "board-focus-pill__orb"], [1, "board-focus-pill__text"], [1, "board-focus-pill__name"], [1, "board-focus-pill__state"], ["type", "button", 1, "board-focus-pill__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], ["type", "button", "title", "Show thread", "aria-label", "Show the conversation thread", 1, "board-focus-pill__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["Placement", "stage", 3, "Key", "Title", "Allowed"], ["type", "button", "title", "End call", "aria-label", "End the call", 1, "board-focus-pill__btn", "board-focus-pill__btn--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["Placement", "stage", 3, "MoveRequested", "ResetLayoutRequested", "Key", "Title", "Allowed"], [3, "Confirmed", "Declined", "Camera", "AgentName", "Switch"], [1, "review-board-host"], [3, "State", "AgentName", "ReadOnly"], [1, "review-recording-host"], [3, "FileID", "Transcript", "Provider"]], template: function RealtimeSessionOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Template, 21, 43, "div", 4);
             i0.ɵɵpipe(1, "async");
             i0.ɵɵtemplate(2, RealtimeSessionOverlayComponent_ng_template_2_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, RealtimeSessionOverlayComponent_ng_template_4_Template, 2, 3, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -2580,7 +2613,7 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
                     RealtimeWhiteboardBoardComponent,
                     MJStorageMediaPlayerComponent,
                     MJAlertComponent
-                ], template: "@if (ConnectionState$ | async; as state) {\n  <div class=\"call-overlay\"\n       [class.call-overlay--hidden]=\"Hidden\"\n       [class.call-overlay--review]=\"IsReviewing\"\n       [class.board-focus]=\"ChannelFocusMode\"\n       role=\"region\" [attr.aria-label]=\"IsReviewing ? 'Past session review' : 'Live voice session'\">\n\n    <!-- PROGRESSIVE DISCLOSURE (the console that grows with you \u2014 Redesign A Progressive):\n         level 0 is PURE AUDIO (the hero orb owns the main column; no thread, no composer;\n         the strip's Details control peeks at the panels on demand); level 1 reveals the\n         caption thread + captions control + type-to-type hint; level 2+ docks the composer\n         and keeps the surface panel. CONTENT NEVER FLIPS THE CONSOLE OPEN: finished\n         artifacts land as glowing unfocused tabs; the ONE auto-reveal is a channel's\n         first agent activity (e.g. the first whiteboard write), which opens the panel as\n         a peek with that tab focused \u2014 the left column stays exactly as it was.\n         REVIEW always renders the full console. -->\n    <div class=\"call-main\">\n      <!-- The UNIFIED APP-BAR: identity + state + every session action (Redesign A). -->\n      <mj-realtime-agent-banner\n        [State]=\"state\"\n        [Compact]=\"!IsReviewing && Ui.compact && Ui.chrome === 'orb'\"\n        [AgentName]=\"AgentName\"\n        [ErrorLabel]=\"CallEndLabel\"\n        [ModelName]=\"IsReviewing ? null : (ModelName$ | async)\"\n        [DevMode]=\"DevMode\"\n        [SessionID]=\"IsReviewing ? ReviewSessionID : SessionID\"\n        [ReviewMode]=\"IsReviewing\"\n        [ReviewStartedAt]=\"ReviewStartedAt\"\n        [ReviewClosedAt]=\"ReviewClosedAt\"\n        [ReviewCloseReason]=\"ReviewCloseReason\"\n        [ShowGear]=\"!IsReviewing && Ui.showGear\"\n        [ShowDensityPicker]=\"Ui.showDensityPicker\"\n        [ShowMinimize]=\"!IsReviewing && Ui.showMinimize\"\n        [ShowStartLive]=\"AllowStartLive\"\n        [Density]=\"Disclosure.Milestones.Density\"\n        (OpenSessionRequested)=\"OnOpenSessionRequested($event)\"\n        (DevModeToggled)=\"OnDevModeToggled($event)\"\n        (DensityChanged)=\"OnDensityChanged($event)\"\n        (MinimizeRequested)=\"OnMinimize()\"\n        (StartLiveRequested)=\"OnStartLive()\"\n        (CloseRequested)=\"OnReviewClose()\">\n      </mj-realtime-agent-banner>\n\n      <!-- No microphone works: the call lost its microphone, so the agent hears nothing until the user picks one in the\n           device menu. It stays for as long as that lasts, with no dismiss button, and goes once a microphone is on.\n           Never in review. -->\n      @if (MicrophoneNotice; as message) {\n        <mj-alert class=\"call-microphone-notice\"\n                  Variant=\"warning\"\n                  Size=\"sm\"\n                  Icon=\"fa-solid fa-microphone-slash\"\n                  [Message]=\"message\">\n        </mj-alert>\n      }\n\n      <!-- Why the call shows no avatar its agent asked for: once per call, from the moment it connects, until the user\n           dismisses it or it hides itself after 10 s. Never in review. -->\n      @if (AvatarNotice) {\n        <mj-alert class=\"call-avatar-notice\"\n                  Variant=\"info\"\n                  Size=\"sm\"\n                  Icon=\"fa-solid fa-video-slash\"\n                  [Message]=\"AvatarNoticeMessage\"\n                  Dismissible\n                  (Dismissed)=\"OnAvatarNoticeDismissed()\">\n        </mj-alert>\n      }\n\n      <!-- Ephemeral narration with no active working card to anchor to \u2192 under the banner -->\n      @if (!IsReviewing && State.Narration && !State.ActiveCallId && Disclosure.ShowThread) {\n        <div class=\"banner-live-note\" role=\"status\" aria-live=\"polite\">\n          <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n          {{ State.Narration }}\n        </div>\n      }\n\n      <!-- The agent's place above the thread in the console: the agent's video (the Avatar) lies over it while it presents.\n           Outside the scrolling body, so it stays in view as the conversation grows. -->\n      @if (!ShowHero) {\n        <div class=\"call-presenter\" [class.call-presenter--on]=\"PresenterOnStage\" #presenterSlot></div>\n      }\n\n      <!-- While the call connects, the connecting screen takes the body, except from a hero the agent's video presents in:\n           a resume on a new connection keeps that hero, so the video keeps its place and its last frame. -->\n      <div class=\"call-body\" [class.call-body--hero]=\"ShowHero && !ShowConnectingScreen(state)\">\n        @if (ShowConnectingScreen(state)) {\n          <div class=\"call-connecting\">\n            <mj-loading text=\"Connecting to the live session\u2026\" size=\"medium\"></mj-loading>\n          </div>\n        } @else if (ShowHero) {\n          <!-- PURE-AUDIO HERO (level 0): the orb IS the interface \u2014 it breathes with the\n               audio inside expanding sound-wave rings; nothing to read, nothing to configure. -->\n          <div class=\"hero\" [class.hero--presenting]=\"PresenterOnStage\" [attr.data-state]=\"state\" role=\"status\" aria-live=\"polite\">\n            @if (!PresenterOnStage) {\n              <mj-realtime-agent-orb class=\"hero__orb\" [State]=\"HeroOrbState(state)\"></mj-realtime-agent-orb>\n              <div class=\"hero__eq\" aria-hidden=\"true\">\n                <span></span><span></span><span></span><span></span><span></span>\n                <span></span><span></span><span></span><span></span>\n              </div>\n            }\n            <!-- The agent's place in the hero: the agent's video (the Avatar) lies over it while it presents. With\n                 captions on, the newest caption runs over the video's lower third, as subtitles do. Hidden from\n                 assistive technology: the conversation, a click away, is the accessible transcript, and this live\n                 region would read every word as it arrives. -->\n            <div class=\"hero__presenter\" [class.hero__presenter--on]=\"PresenterOnStage\" #presenterSlot>\n              @if (ShowAvatarCaptions && AvatarCaption; as caption) {\n                <p class=\"hero__caption\" aria-hidden=\"true\">\n                  <span class=\"hero__caption-window\">\n                    <span class=\"hero__caption-lines\">\n                      @if (caption.Speaker) {\n                        <span class=\"hero__caption-speaker\">{{ caption.Speaker }}:</span>\n                      }\n                      {{ caption.Text }}\n                    </span>\n                  </span>\n                </p>\n              }\n            </div>\n            @if (!PresenterOnStage) {\n              <div class=\"hero__name\">{{ AgentName }}</div>\n              <div class=\"hero__sub\">{{ HeroStateLabel(state) }}</div>\n            } @else {\n              <!-- The agent's tile names it and says what it is doing; this live region still says it for screen readers. -->\n              <span class=\"hero__sr\">{{ HeroStateLabel(state) }}</span>\n            }\n            <button type=\"button\" class=\"hero__reveal\" (click)=\"OnTextReveal()\"\n                    title=\"Show the conversation as text\">\n              <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n              Show the conversation\n            </button>\n          </div>\n        } @else {\n          <mj-realtime-session-thread\n            [State]=\"State\"\n            [AgentName]=\"AgentName\"\n            [UserName]=\"CurrentUser?.Name || 'You'\"\n            [ShowCaptions]=\"IsReviewing ? true : ShowCaptions\"\n            [DevMode]=\"DevMode\"\n            (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n            (OpenArtifactRequested)=\"OnOpenArtifactRequested($event)\"\n            (CancelRequested)=\"OnCancelDelegation($event)\">\n          </mj-realtime-session-thread>\n        }\n      </div>\n\n      <!-- The call's controls along the foot of the column. The stage starts its picture-in-picture boxes clear of\n           them, so a camera or a shared screen never opens over End call (#5408). Empty, so with no size, in review. -->\n      <div class=\"call-controls\" #callControls>\n        @if (!IsReviewing) {\n          <!-- \"Agent can see\": what the agent is looking at, with a switch per source. Always shown while any\n               video source exists (a privacy indicator is never gated behind the disclosure ladder). -->\n          <mj-realtime-perception-chip [Sources]=\"VideoSources\"\n                                       (SourceToggled)=\"OnVideoSourceToggled($event)\"\n                                       (SourcePicked)=\"OnVideoSourcePicked($event)\">\n          </mj-realtime-perception-chip>\n\n          <!-- Active channels (earned with the console at level 2+, host-gated via [ShowChannels]).\n               The strip component self-hides when there are no active channels. -->\n          @if (ChannelStripVisible) {\n            <mj-realtime-channel-strip></mj-realtime-channel-strip>\n          }\n\n          <!-- The BOTTOM DOCK: phone-call strip \u21C4 fused minis+composer \u2014 the user's own\n               two-way toggle (Type opens, hide closes), never level-forced. -->\n          <mj-realtime-composer\n            [Open]=\"ComposerOpen\"\n            [Compact]=\"Ui.compact && Ui.chrome === 'orb'\"\n            (OpenChanged)=\"OnComposerOpenChanged($event)\"\n            [CaptionsOn]=\"ShowCaptions\"\n            [IsMuted]=\"Muted\"\n            [ShowCamera]=\"CaptureOffers.Camera\"\n            [ShowShare]=\"CaptureOffers.Screen\"\n            [CameraOn]=\"CameraOn\"\n            [Sharing]=\"Sharing\"\n            [SharePanels]=\"SharePanels\"\n            [Devices]=\"CallDevices\"\n            [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n            [SelectedCameraID]=\"SelectedCameraID\"\n            (CameraToggled)=\"OnCameraToggled($event)\"\n            (ShareRequested)=\"OnShareRequested($event)\"\n            (StopShareRequested)=\"OnStopShareRequested()\"\n            (DeviceSelected)=\"OnDeviceSelected($event)\"\n            [ShowDetails]=\"ShowDetailsControl\"\n            [DetailsOn]=\"DetailsPeek\"\n            (CaptionsToggled)=\"OnCaptionsToggled($event)\"\n            (DetailsToggled)=\"OnDetailsToggled()\"\n            (MuteChanged)=\"OnComposerMuteChanged($event)\"\n            (EndRequested)=\"OnEndCall()\">\n          </mj-realtime-composer>\n        }\n      </div>\n    </div>\n\n    <!-- RIGHT: TABBED SURFACE PANEL \u2014 disclosure-gated: it EXISTS once earned (level 2+,\n         which the first delegation forces), peeked on demand via the strip's Details\n         control, or always in review. Slides in from the right when it arrives \u2014 the\n         panel's arrival IS the progress cue. -->\n    @if (ShowPanelArea) {\n      <!-- Resize handle (hidden while the panel is collapsed or a channel holds focus). -->\n      @if (!PanelResizeDisabled) {\n        <div class=\"call-resizer\"\n             [class.call-resizer--active]=\"IsPanelResizing\"\n             role=\"separator\" aria-orientation=\"vertical\"\n             aria-label=\"Resize the surface panel (double-click to reset)\"\n             title=\"Drag to resize \u2022 double-click to reset\"\n             (mousedown)=\"OnPanelResizeStart($event)\"\n             (dblclick)=\"OnPanelResizeReset()\"></div>\n      }\n\n      <div class=\"call-panel\" [style.width.px]=\"PanelAreaSize\">\n        <mj-realtime-surface-tabs\n          [State]=\"State\"\n          [DevMode]=\"DevMode\"\n          [CurrentUser]=\"CurrentUser\"\n          [EnvironmentID]=\"EnvironmentID\"\n          [ShowActivityTab]=\"ShowActivityTab\"\n          [ExtraArtifacts]=\"ReviewArtifacts\"\n          (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n          [Collapsed]=\"PanelCollapsed\"\n          (CollapsedChange)=\"OnPanelCollapsedChange($event)\"\n          (WideChanged)=\"OnPanelWideChanged($event)\"\n          (ActiveChannelChange)=\"OnActiveChannelChange($event)\"\n          (ChannelSlotChange)=\"OnChannelSlotChange($event)\"\n          [SurfacePlacements]=\"SurfaceStage.Placements\"\n          [AllowedPlacements]=\"SurfaceStage.AllowedPlacements\"\n          (MoveRequested)=\"OnMoveRequested($event)\"\n          (ResetLayoutRequested)=\"OnResetLayout()\">\n        </mj-realtime-surface-tabs>\n      </div>\n    }\n\n    <!-- THE STAGE: every channel surface lives here, in one layer over the overlay. A surface\n         is created the first time it is seen, lies over its tab's slot while that tab is\n         active, fills the overlay while its channel holds focus (or, for the agent's video,\n         lies in the agent's place in the call), and otherwise waits out of sight \u2014 so\n         collapsing the panel, switching tabs or entering focus never reloads it.\n         The pane tells each channel when its surface goes out of sight, so it can pause.\n         A channel that opts in (SurfaceShareable, such as the whiteboard) marks its frame as a panel the Share menu\n         offers under \"This panel\" while it is on screen. A picture-in-picture box the user has not moved starts\n         clear of the call's controls. -->\n    <mj-media-stage class=\"call-stage\"\n                    [Surfaces]=\"SurfaceStage.Surfaces\"\n                    [TabSlot]=\"StageSlot?.Element ?? null\"\n                    [StageSlot]=\"StageSurfaceSlot\"\n                    [ActiveTabKey]=\"StageSlot?.Key ?? null\"\n                    [PipRects]=\"PipRects\"\n                    [PipKeepClear]=\"callControls\"\n                    (PipRectChange)=\"OnPipRectChange($event)\">\n      <ng-template mjMediaStageSurface let-key let-visible=\"Visible\" let-placement=\"Placement\">\n        @if (SurfaceStage.PluginFor(key); as plugin) {\n          <div class=\"stage-frame\" role=\"region\" [attr.aria-label]=\"plugin.TabTitle\"\n               [mjSharePanel]=\"plugin.SurfaceShareable ? plugin.TabTitle : null\" [mjSharePanelIcon]=\"plugin.TabIcon\">\n            <mj-realtime-channel-pane [Plugin]=\"plugin\" [Visible]=\"visible\" [Placement]=\"placement\"></mj-realtime-channel-pane>\n            <!-- A surface presenting the agent has no focus pill, so its \"Move to\u2026\" menu rides on it. -->\n            @if (placement === 'stage' && plugin.ShowsAgentVideo) {\n              <mj-media-move-menu\n                class=\"stage-presenter-move\"\n                [Key]=\"key\"\n                [Title]=\"plugin.TabTitle\"\n                Placement=\"stage\"\n                [Allowed]=\"SurfaceStage.AllowedFor(key)\"\n                (MoveRequested)=\"OnMoveRequested($event)\"\n                (ResetLayoutRequested)=\"OnResetLayout()\">\n              </mj-media-move-menu>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- A picture-in-picture box's bar carries the same \"Move to\u2026\" menu. -->\n      <ng-template mjMediaStagePipActions let-key>\n        @if (SurfaceStage.PluginFor(key); as plugin) {\n          <mj-media-move-menu\n            [Key]=\"key\"\n            [Title]=\"plugin.TabTitle\"\n            Placement=\"pip\"\n            [Allowed]=\"SurfaceStage.AllowedFor(key)\"\n            (MoveRequested)=\"OnMoveRequested($event)\"\n            (ResetLayoutRequested)=\"OnResetLayout()\">\n          </mj-media-move-menu>\n        }\n      </ng-template>\n    </mj-media-stage>\n\n    <!-- FOCUS floating call pill: the main column is hidden, so the live call's\n         identity + state + mute / show-thread / end controls ride over the surface. -->\n    @if (!IsReviewing && ChannelFocusMode) {\n      <div class=\"board-focus-pill\" role=\"status\" aria-label=\"Live call (board focus)\">\n        <span class=\"board-focus-pill__orb\" [attr.data-state]=\"state\" aria-hidden=\"true\"></span>\n        <span class=\"board-focus-pill__text\">\n          <span class=\"board-focus-pill__name\">Voice for {{ AgentName }}</span>\n          @if (FocusStateLabel(state); as label) {\n            <span class=\"board-focus-pill__state\">{{ label }}</span>\n          }\n        </span>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                [class.board-focus-pill__btn--active]=\"FocusPillMuted\"\n                (click)=\"OnFocusPillMute()\"\n                [title]=\"FocusPillMuted ? 'Unmute' : 'Mute'\"\n                [attr.aria-label]=\"FocusPillMuted ? 'Unmute microphone' : 'Mute microphone'\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!FocusPillMuted\" [class.fa-microphone-slash]=\"FocusPillMuted\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                (click)=\"OnFocusPillExit()\"\n                title=\"Show thread\" aria-label=\"Show the conversation thread\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        @if (StagePlugin; as stagePlugin) {\n          <mj-media-move-menu\n            [Key]=\"stagePlugin.ChannelName\"\n            [Title]=\"stagePlugin.TabTitle\"\n            Placement=\"stage\"\n            [Allowed]=\"SurfaceStage.AllowedFor(stagePlugin.ChannelName)\"\n            (MoveRequested)=\"OnMoveRequested($event)\"\n            (ResetLayoutRequested)=\"OnResetLayout()\">\n          </mj-media-move-menu>\n        }\n        <button type=\"button\" class=\"board-focus-pill__btn board-focus-pill__btn--end\"\n                (click)=\"OnFocusPillEnd()\"\n                title=\"End call\" aria-label=\"End the call\">\n          <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- THE CAMERA CHECK: the first time the user turns the camera on in a call, they see it, and can pick another\n         camera, before the agent does. Until they choose, the camera's own box says it is waiting. -->\n    @if (CameraCheck; as camera) {\n      <mj-realtime-camera-check-card\n        [Camera]=\"camera\"\n        [AgentName]=\"AgentName\"\n        [Switch]=\"SwitchCheckedCamera\"\n        (Confirmed)=\"OnCameraCheckConfirmed()\"\n        (Declined)=\"OnCameraCheckDeclined()\">\n      </mj-realtime-camera-check-card>\n    }\n\n  </div>\n}\n\n<!-- SESSION REVIEW whiteboard pane body: the reviewed session's saved board, rehydrated\n     locally (WhiteboardState.FromJSON) and rendered READ-ONLY (pan/zoom only). Registered\n     as a template-based channel tab ONLY when a parseable Whiteboard state exists. -->\n<ng-template #reviewBoardTpl>\n  @if (ReviewWhiteboard; as board) {\n    <!-- The board host positions itself absolutely \u2014 give it a filling, positioned frame. -->\n    <div class=\"review-board-host\">\n      <mj-realtime-whiteboard\n        [State]=\"board\"\n        [AgentName]=\"AgentName\"\n        [ReadOnly]=\"true\">\n      </mj-realtime-whiteboard>\n    </div>\n  }\n</ng-template>\n\n<!-- SESSION REVIEW recording pane body: the reviewed session's recorded audio synced to its\n     transcript, replayed via the shared storage media player (click-to-seek transcript + playhead\n     highlight). Registered as a template-based channel tab ONLY when the reviewed session carries a\n     RecordingFileID; the player resolves the authenticated audio itself from that file id. -->\n<ng-template #recordingTpl>\n  <div class=\"review-recording-host\">\n    <mj-storage-media-player\n      [FileID]=\"ReviewRecordingFileID\"\n      [Transcript]=\"ReviewCues\"\n      [Provider]=\"Provider\">\n    </mj-storage-media-player>\n  </div>\n</ng-template>\n", styles: [":host {\n  display: contents;\n}\n\n/* Fills the conversation panel IN PLACE: the chat area host provides the positioned\n   context (position:relative on .chat-area) and this covers it edge to edge \u2014 header,\n   thread and composer included. Opaque-ish page surface with a slight blur so the\n   conversation underneath reads as \"paused\", not as an app-wide modal. */\n.call-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  background: color-mix(in srgb, var(--mj-bg-page) 94%, transparent);\n  backdrop-filter: blur(8px);\n  overflow: hidden;\n}\n\n/* Minimized: hidden (NOT destroyed) so the shell's session/view state survives while\n   the host shows its floating \"on call\" pill. The audio session is untouched. */\n.call-overlay--hidden {\n  display: none;\n}\n\n/* MAIN column: banner (top) \u2192 scrolling thread \u2192 channel strip \u2192 composer \u2192 controls.\n   The 420px floor keeps the call column readable while the panel is dragged wide\n   (the drag clamp's 70% cap is the other guard). */\n.call-main {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* The call's controls at the foot of the column: the \"Agent can see\" chip, the channel strip and the composer. The\n   stage starts its picture-in-picture boxes above this box, so it is never squeezed below its content's height. */\n.call-controls {\n  flex: none;\n}\n\n.call-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 22px;\n  min-height: 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.call-body::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n/* ---------- PURE-AUDIO HERO (disclosure level 0) ----------\n   The orb IS the interface: it breathes with the audio inside expanding sound-wave\n   rings, with a small voice equalizer underneath. Nothing to read, nothing to\n   configure \u2014 text, panels and the composer are revealed later (or peeked on demand). */\n.call-body--hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n/* The orb (mj-realtime-agent-orb) at hero scale. */\n.hero__orb {\n  margin-bottom: 4px;\n}\n/* Voice equalizer: lively while the agent speaks, near-still otherwise. */\n.hero__eq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq span {\n  width: 4px;\n  height: 8px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-brand-accent, var(--mj-brand-primary));\n  opacity: 0.55;\n}\n.hero[data-state='speaking'] .hero__eq span {\n  animation: hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq span:nth-child(1) { animation-delay: 0s; }\n.hero__eq span:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq span:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq span:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq span:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq span:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq span:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq span:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq span:nth-child(9) { animation-delay: 0.03s; }\n@keyframes hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n/* ---------- the agent's place while its video presents (the Avatar) ----------\n   The stage lays the agent's video over these boxes; each has a size only while the video presents. Portrait, as\n   avatar video is (Google's samples are 704x1280). */\n.hero--presenting {\n  height: 100%;\n  min-height: 0;\n}\n.hero__presenter,\n.call-presenter {\n  display: none;\n}\n.hero__presenter--on {\n  display: block;\n  position: relative;\n  container-type: size;\n  flex: 1 1 auto;\n  min-height: 160px;\n  max-height: 520px;\n  aspect-ratio: 3 / 4;\n  margin-bottom: 8px;\n}\n/* Captions over the agent's video, as subtitles: the newest two lines, over the lower third and clear of the tile's\n   footer. Above the stage (z-index 1), where the video is. Light on a dark band in both themes, like the tile's chips. */\n.hero__caption {\n  position: absolute;\n  left: 6%;\n  right: 6%;\n  bottom: 16%;\n  z-index: 2;\n  margin: 0;\n  padding: 6px 10px;\n  border-radius: var(--mj-radius-md);\n  background: rgba(0, 0, 0, 0.6);\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 0.95rem;\n  line-height: 1.4;\n  text-align: center;\n}\n/* Two lines, the newest: older ones leave through the top. The window clips, not the padded band, so nothing of an\n   older line shows in the padding. */\n.hero__caption-window {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  max-height: 2.8em;\n  overflow: hidden;\n}\n.hero__caption-speaker {\n  font-weight: 600;\n}\n/* A small tile (a short window): one smaller line, so the video still shows. */\n@container (max-height: 240px) {\n  .hero__caption {\n    bottom: 22%;\n    padding: 3px 6px;\n    font-size: 0.75rem;\n  }\n  .hero__caption-window {\n    max-height: 1.4em;\n  }\n}\n/* In the console it sits above the scrolling thread, so it stays in view as the conversation grows. Wide enough for\n   the tile's \"AI-generated video\" label on one line. */\n.call-presenter--on {\n  display: block;\n  flex: none;\n  align-self: center;\n  height: 200px;\n  aspect-ratio: 4 / 5;\n  margin-top: 12px;\n}\n.hero__name {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n/* The hero's state for screen readers only, while the agent's tile shows it. */\n.hero__sr {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n/* ---------- AUDIO-REACTIVE MODE (data-audio-live, set by the rAF meter loop) ----------\n   With real audio metering the visuals stop acting and start REACTING: the EQ renders the\n   true spectrum (--eq-1..9), and [data-voice-dir] colors it by who is speaking (agent =\n   brand, user = green). The orb (mj-realtime-agent-orb) reads the same attributes and the\n   smoothed output envelope (--voice-out) itself. Without metering (driver attached no\n   meters) the attribute stays 'false' and the turn-state keyframe animations stay in charge. */\n/* True-spectrum EQ: per-bar heights from the meter's bins. */\n.call-overlay[data-audio-live='true'] .hero__eq span {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(1) { height: calc(6px + var(--eq-1, 0) * 24px); opacity: calc(0.45 + var(--eq-1, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(2) { height: calc(6px + var(--eq-2, 0) * 24px); opacity: calc(0.45 + var(--eq-2, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(3) { height: calc(6px + var(--eq-3, 0) * 24px); opacity: calc(0.45 + var(--eq-3, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(4) { height: calc(6px + var(--eq-4, 0) * 24px); opacity: calc(0.45 + var(--eq-4, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(5) { height: calc(6px + var(--eq-5, 0) * 24px); opacity: calc(0.45 + var(--eq-5, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(6) { height: calc(6px + var(--eq-6, 0) * 24px); opacity: calc(0.45 + var(--eq-6, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(7) { height: calc(6px + var(--eq-7, 0) * 24px); opacity: calc(0.45 + var(--eq-7, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(8) { height: calc(6px + var(--eq-8, 0) * 24px); opacity: calc(0.45 + var(--eq-8, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(9) { height: calc(6px + var(--eq-9, 0) * 24px); opacity: calc(0.45 + var(--eq-9, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__eq span {\n  background: var(--mj-status-success);\n}\n\n/* The quiet first reveal: show the conversation as text (raises disclosure to level 1). */\n.hero__reveal {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 18px;\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.hero__reveal:hover {\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.hero__reveal i {\n  font-size: 11px;\n}\n\n/* Ephemeral narration shown under the banner when no working card anchors it */\n.banner-live-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  padding: 8px 22px 0;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: overlay-note-in 220ms ease;\n}\n.banner-live-note i {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* The call's notices under the banner (no microphone works; no avatar): mj-alert brings its own tint, border and text\n   colours; this only places them. */\n.call-microphone-notice,\n.call-avatar-notice {\n  flex-shrink: 0;\n  margin: var(--mj-space-2) var(--mj-space-5) 0;\n}\n\n/* ---------- FOCUS-BOARD mode (whiteboard \"Focus board\" toggle) ----------\n   The main call column collapses away entirely and the focused channel's surface fills\n   the stage; a compact floating call pill keeps the live call reachable. */\n.call-overlay.board-focus .call-main {\n  display: none;\n}\n\n/* ---------- the stage (every channel surface, in one layer) ----------\n   mj-media-stage covers the overlay and places each surface itself. Above the panel it\n   lays surfaces over, and above the call's controls, so its picture-in-picture boxes\n   start clear of them (.call-controls); below the onboarding card (5), the menus of the\n   dock and the chip (5) and the focus pill (60). */\n.call-stage {\n  z-index: 1;\n}\n/* A surface's frame: fills the box the stage gives it. The surface component is created\n   beside the pane host inside it, and sizes itself to it (height: 100%). */\n.stage-frame {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n/* The \"Move to\u2026\" menu on a surface that presents the agent, backed so it reads over video. Bottom right, in the\n   tile's footer, which holds nothing there for the agent, so it never covers the tile's labels. */\n.stage-presenter-move {\n  position: absolute;\n  bottom: 4px;\n  right: 6px;\n  z-index: 1;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n}\n\n/* Floating call pill: orb + state + mute / show-thread / end (per the whiteboard mockup). */\n.board-focus-pill {\n  position: absolute;\n  left: 64px;\n  top: 12px;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 9px 7px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 92%, transparent);\n  backdrop-filter: blur(8px);\n  border: 1px solid var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  animation: overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.board-focus-pill__orb[data-state='speaking'],\n.board-focus-pill__orb[data-state='listening'] {\n  animation: board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'] {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n}\n@keyframes board-pill-pulse {\n  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n}\n.board-focus-pill__text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__state {\n  font-size: 10.5px;\n  font-weight: 600;\n  white-space: nowrap;\n  color: var(--mj-brand-primary);\n}\n.board-focus-pill__btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 11px;\n  display: grid;\n  place-items: center;\n  font-family: inherit;\n  flex-shrink: 0;\n}\n.board-focus-pill__btn:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n/* ---------- Session review mode ---------- */\n/* Subtle archival tint so a glance says \"this is history, not a live call\". */\n.call-overlay--review {\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 4%, transparent), transparent 120px),\n    var(--mj-bg-surface);\n}\n\n/* The review whiteboard pane body: the board component positions itself absolutely\n   (inset: 0), so its template-based pane needs a filling, positioned frame. */\n.review-board-host {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* The review recording pane body: the evidence player fills its host (:host height:100%),\n   so its template-based pane needs a filling, constrained frame. */\n.review-recording-host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host mj-realtime-evidence-playback {\n  flex: 1;\n  min-height: 0;\n}\n\n/* ---------- flex layout (main column | resize handle | surface panel) ---------- */\n/* Token-styled resize handle: invisible until hover, brand-tinted while interacting.\n   7px hit target, col-resize cursor; removed (not rendered) while collapsed / focus. */\n.call-resizer {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer:hover,\n.call-resizer--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n/* The surface panel: a plain fixed-width flex item (inline width set by the overlay;\n   collapsed = the slim strip width). flex-shrink lets it yield to the call column's\n   min-width on tight overlays; overflow hidden keeps the flex height chain intact so\n   the panel's content scrolls internally. */\n.call-panel {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  /* Disclosure-gated: the panel is CREATED when earned/peeked \u2014 its arrival slides in\n     from the right so the reveal doubles as the progress cue. */\n  animation: panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel > * {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n"] }]
+                ], template: "@if (ConnectionState$ | async; as state) {\n  <div class=\"call-overlay\"\n       [class.call-overlay--hidden]=\"Hidden\"\n       [class.call-overlay--review]=\"IsReviewing\"\n       [class.board-focus]=\"ChannelFocusMode\"\n       role=\"region\" [attr.aria-label]=\"IsReviewing ? 'Past session review' : 'Live voice session'\">\n\n    <!-- PROGRESSIVE DISCLOSURE (the console that grows with you \u2014 Redesign A Progressive):\n         level 0 is PURE AUDIO (the hero orb owns the main column; no thread, no composer;\n         the strip's Details control peeks at the panels on demand); level 1 reveals the\n         caption thread + captions control + type-to-type hint; level 2+ docks the composer\n         and keeps the surface panel. CONTENT NEVER FLIPS THE CONSOLE OPEN: finished\n         artifacts land as glowing unfocused tabs; the ONE auto-reveal is a channel's\n         first agent activity (e.g. the first whiteboard write), which opens the panel as\n         a peek with that tab focused \u2014 the left column stays exactly as it was.\n         REVIEW always renders the full console. -->\n    <div class=\"call-main\">\n      <!-- The UNIFIED APP-BAR: identity + state + every session action (Redesign A). -->\n      <mj-realtime-agent-banner\n        [State]=\"state\"\n        [Compact]=\"!IsReviewing && Ui.compact && Ui.chrome === 'orb'\"\n        [HideState]=\"ShowHero && !PresenterOnStage\"\n        [AgentName]=\"AgentName\"\n        [ErrorLabel]=\"CallEndLabel\"\n        [ModelName]=\"IsReviewing ? null : (ModelName$ | async)\"\n        [DevMode]=\"DevMode\"\n        [SessionID]=\"IsReviewing ? ReviewSessionID : SessionID\"\n        [ReviewMode]=\"IsReviewing\"\n        [ReviewStartedAt]=\"ReviewStartedAt\"\n        [ReviewClosedAt]=\"ReviewClosedAt\"\n        [ReviewCloseReason]=\"ReviewCloseReason\"\n        [ShowGear]=\"!IsReviewing && Ui.showGear\"\n        [ShowDensityPicker]=\"Ui.showDensityPicker\"\n        [ShowMinimize]=\"!IsReviewing && Ui.showMinimize\"\n        [ShowStartLive]=\"AllowStartLive\"\n        [Density]=\"Disclosure.Milestones.Density\"\n        (OpenSessionRequested)=\"OnOpenSessionRequested($event)\"\n        (DevModeToggled)=\"OnDevModeToggled($event)\"\n        (DensityChanged)=\"OnDensityChanged($event)\"\n        (MinimizeRequested)=\"OnMinimize()\"\n        (StartLiveRequested)=\"OnStartLive()\"\n        (CloseRequested)=\"OnReviewClose()\">\n      </mj-realtime-agent-banner>\n\n      <!-- No microphone works: the call lost its microphone, so the agent hears nothing until the user picks one in the\n           device menu. It stays for as long as that lasts, with no dismiss button, and goes once a microphone is on.\n           Never in review. -->\n      @if (MicrophoneNotice; as message) {\n        <mj-alert class=\"call-microphone-notice\"\n                  Variant=\"warning\"\n                  Size=\"sm\"\n                  Icon=\"fa-solid fa-microphone-slash\"\n                  [Message]=\"message\">\n        </mj-alert>\n      }\n\n      <!-- Why the call shows no avatar its agent asked for: once per call, from the moment it connects, until the user\n           dismisses it or it hides itself after 10 s. Never in review. -->\n      @if (AvatarNotice) {\n        <mj-alert class=\"call-avatar-notice\"\n                  Variant=\"info\"\n                  Size=\"sm\"\n                  Icon=\"fa-solid fa-video-slash\"\n                  [Message]=\"AvatarNoticeMessage\"\n                  Dismissible\n                  (Dismissed)=\"OnAvatarNoticeDismissed()\">\n        </mj-alert>\n      }\n\n      <!-- Ephemeral narration with no active working card to anchor to \u2192 under the banner -->\n      @if (!IsReviewing && State.Narration && !State.ActiveCallId && Disclosure.ShowThread) {\n        <div class=\"banner-live-note\" role=\"status\" aria-live=\"polite\">\n          <i class=\"fa-solid fa-comment-dots\" aria-hidden=\"true\"></i>\n          {{ State.Narration }}\n        </div>\n      }\n\n      <!-- The agent's place above the thread in the console: the agent's video (the Avatar) lies over it while it presents.\n           Outside the scrolling body, so it stays in view as the conversation grows. -->\n      @if (!ShowHero) {\n        <div class=\"call-presenter\" [class.call-presenter--on]=\"PresenterOnStage\" #presenterSlot></div>\n      }\n\n      <!-- While the call connects, the connecting screen takes the body, except from a hero the agent's video presents in:\n           a resume on a new connection keeps that hero, so the video keeps its place and its last frame. -->\n      <div class=\"call-body\" [class.call-body--hero]=\"ShowHero && !ShowConnectingScreen(state)\">\n        @if (ShowConnectingScreen(state)) {\n          <div class=\"call-connecting\">\n            <mj-loading text=\"Connecting to the live session\u2026\" size=\"medium\"></mj-loading>\n          </div>\n        } @else if (ShowHero) {\n          <!-- PURE-AUDIO HERO (level 0): the orb IS the interface \u2014 it breathes with the\n               audio inside expanding sound-wave rings; nothing to read, nothing to configure. -->\n          <div class=\"hero\" [class.hero--presenting]=\"PresenterOnStage\" [attr.data-state]=\"state\" role=\"status\" aria-live=\"polite\">\n            @if (!PresenterOnStage) {\n              <mj-realtime-agent-orb class=\"hero__orb\" [State]=\"HeroOrbState(state)\"></mj-realtime-agent-orb>\n              <div class=\"hero__eq\" aria-hidden=\"true\">\n                <span></span><span></span><span></span><span></span><span></span>\n                <span></span><span></span><span></span><span></span>\n              </div>\n            }\n            <!-- The agent's place in the hero: the agent's video (the Avatar) lies over it while it presents. With\n                 captions on, the newest caption runs over the video's lower third, as subtitles do. Hidden from\n                 assistive technology: the conversation, a click away, is the accessible transcript, and this live\n                 region would read every word as it arrives. -->\n            <div class=\"hero__presenter\" [class.hero__presenter--on]=\"PresenterOnStage\" #presenterSlot>\n              @if (ShowAvatarCaptions && AvatarCaption; as caption) {\n                <p class=\"hero__caption\" aria-hidden=\"true\">\n                  <span class=\"hero__caption-window\">\n                    <span class=\"hero__caption-lines\">\n                      @if (caption.Speaker) {\n                        <span class=\"hero__caption-speaker\">{{ caption.Speaker }}:</span>\n                      }\n                      {{ caption.Text }}\n                    </span>\n                  </span>\n                </p>\n              }\n            </div>\n            @if (!PresenterOnStage) {\n              <div class=\"hero__name\">{{ AgentName }}</div>\n              <div class=\"hero__sub\">{{ HeroStateLabel(state) }}</div>\n            } @else {\n              <!-- The agent's tile names it and says what it is doing; this live region still says it for screen readers. -->\n              <span class=\"hero__sr\">{{ HeroStateLabel(state) }}</span>\n            }\n            @if (PresenterOnStage || !Ui.showCaptionsControl) {\n              <button type=\"button\" class=\"hero__reveal\" (click)=\"OnTextReveal()\"\n                      title=\"Show the conversation as text\">\n                <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n                Show the conversation\n              </button>\n            }\n          </div>\n        } @else {\n          <mj-realtime-session-thread\n            [State]=\"State\"\n            [AgentName]=\"AgentName\"\n            [UserName]=\"CurrentUser?.Name || 'You'\"\n            [ShowCaptions]=\"IsReviewing ? true : ShowCaptions\"\n            [DevMode]=\"DevMode\"\n            (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n            (OpenArtifactRequested)=\"OnOpenArtifactRequested($event)\"\n            (CancelRequested)=\"OnCancelDelegation($event)\">\n          </mj-realtime-session-thread>\n        }\n      </div>\n\n      <!-- The call's controls along the foot of the column. The stage starts its picture-in-picture boxes clear of\n           them, so a camera or a shared screen never opens over End call (#5408). Empty, so with no size, in review. -->\n      <div class=\"call-controls\" #callControls>\n        @if (!IsReviewing) {\n          <!-- \"Agent can see\": what the agent is looking at, with a switch per source. Shown while the user\n               captures camera/screen (or when [ShowPerceptionChip]=\"true\"). -->\n          <mj-realtime-perception-chip [Sources]=\"VisibleVideoSources\"\n                                       (SourceToggled)=\"OnVideoSourceToggled($event)\"\n                                       (SourcePicked)=\"OnVideoSourcePicked($event)\">\n          </mj-realtime-perception-chip>\n\n          <!-- Active channels (earned with the console at level 2+, host-gated via [ShowChannels]).\n               The strip component self-hides when there are no active channels. -->\n          @if (ChannelStripVisible) {\n            <mj-realtime-channel-strip></mj-realtime-channel-strip>\n          }\n\n          <!-- The BOTTOM DOCK: phone-call strip \u21C4 fused minis+composer \u2014 the user's own\n               two-way toggle (Type opens, hide closes), never level-forced. -->\n          <mj-realtime-composer\n            [Open]=\"ComposerOpen\"\n            [Compact]=\"Ui.chrome === 'orb' || Ui.compact\"\n            (OpenChanged)=\"OnComposerOpenChanged($event)\"\n            [CaptionsOn]=\"ShowCaptions\"\n            [IsMuted]=\"Muted\"\n            [ShowCamera]=\"CaptureOffers.Camera\"\n            [ShowShare]=\"CaptureOffers.Screen\"\n            [CameraOn]=\"CameraOn\"\n            [Sharing]=\"Sharing\"\n            [SharePanels]=\"SharePanels\"\n            [Devices]=\"CallDevices\"\n            [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n            [SelectedCameraID]=\"SelectedCameraID\"\n            (CameraToggled)=\"OnCameraToggled($event)\"\n            (ShareRequested)=\"OnShareRequested($event)\"\n            (StopShareRequested)=\"OnStopShareRequested()\"\n            (DeviceSelected)=\"OnDeviceSelected($event)\"\n            [ShowDetails]=\"ShowDetailsControl\"\n            [DetailsOn]=\"DetailsPeek\"\n            (CaptionsToggled)=\"OnCaptionsToggled($event)\"\n            (DetailsToggled)=\"OnDetailsToggled()\"\n            (MuteChanged)=\"OnComposerMuteChanged($event)\"\n            (EndRequested)=\"OnEndCall()\">\n          </mj-realtime-composer>\n        }\n      </div>\n    </div>\n\n    <!-- RIGHT: TABBED SURFACE PANEL \u2014 disclosure-gated: it EXISTS once earned (level 2+,\n         which the first delegation forces), peeked on demand via the strip's Details\n         control, or always in review. Slides in from the right when it arrives \u2014 the\n         panel's arrival IS the progress cue. -->\n    @if (ShowPanelArea) {\n      <!-- Resize handle (hidden while the panel is collapsed or a channel holds focus). -->\n      @if (!PanelResizeDisabled) {\n        <div class=\"call-resizer\"\n             [class.call-resizer--active]=\"IsPanelResizing\"\n             role=\"separator\" aria-orientation=\"vertical\"\n             aria-label=\"Resize the surface panel (double-click to reset)\"\n             title=\"Drag to resize \u2022 double-click to reset\"\n             (mousedown)=\"OnPanelResizeStart($event)\"\n             (dblclick)=\"OnPanelResizeReset()\"></div>\n      }\n\n      <div class=\"call-panel\" [style.width.px]=\"PanelAreaSize\">\n        <mj-realtime-surface-tabs\n          [State]=\"State\"\n          [DevMode]=\"DevMode\"\n          [CurrentUser]=\"CurrentUser\"\n          [EnvironmentID]=\"EnvironmentID\"\n          [ShowActivityTab]=\"ShowActivityTab\"\n          [ExtraArtifacts]=\"ReviewArtifacts\"\n          (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n          [Collapsed]=\"PanelCollapsed\"\n          (CollapsedChange)=\"OnPanelCollapsedChange($event)\"\n          (WideChanged)=\"OnPanelWideChanged($event)\"\n          (ActiveChannelChange)=\"OnActiveChannelChange($event)\"\n          (ChannelSlotChange)=\"OnChannelSlotChange($event)\"\n          [SurfacePlacements]=\"SurfaceStage.Placements\"\n          [AllowedPlacements]=\"SurfaceStage.AllowedPlacements\"\n          (MoveRequested)=\"OnMoveRequested($event)\"\n          (ResetLayoutRequested)=\"OnResetLayout()\">\n        </mj-realtime-surface-tabs>\n      </div>\n    }\n\n    <!-- THE STAGE: every channel surface lives here, in one layer over the overlay. A surface\n         is created the first time it is seen, lies over its tab's slot while that tab is\n         active, fills the overlay while its channel holds focus (or, for the agent's video,\n         lies in the agent's place in the call), and otherwise waits out of sight \u2014 so\n         collapsing the panel, switching tabs or entering focus never reloads it.\n         The pane tells each channel when its surface goes out of sight, so it can pause.\n         A channel that opts in (SurfaceShareable, such as the whiteboard) marks its frame as a panel the Share menu\n         offers under \"This panel\" while it is on screen. A picture-in-picture box the user has not moved starts\n         clear of the call's controls. -->\n    <mj-media-stage class=\"call-stage\"\n                    [Surfaces]=\"SurfaceStage.Surfaces\"\n                    [TabSlot]=\"StageSlot?.Element ?? null\"\n                    [StageSlot]=\"StageSurfaceSlot\"\n                    [ActiveTabKey]=\"StageSlot?.Key ?? null\"\n                    [PipRects]=\"PipRects\"\n                    [PipKeepClear]=\"callControls\"\n                    (PipRectChange)=\"OnPipRectChange($event)\">\n      <ng-template mjMediaStageSurface let-key let-visible=\"Visible\" let-placement=\"Placement\">\n        @if (SurfaceStage.PluginFor(key); as plugin) {\n          <div class=\"stage-frame\" role=\"region\" [attr.aria-label]=\"plugin.TabTitle\"\n               [mjSharePanel]=\"plugin.SurfaceShareable ? plugin.TabTitle : null\" [mjSharePanelIcon]=\"plugin.TabIcon\">\n            <mj-realtime-channel-pane [Plugin]=\"plugin\" [Visible]=\"visible\" [Placement]=\"placement\"></mj-realtime-channel-pane>\n            <!-- A surface presenting the agent has no focus pill, so its \"Move to\u2026\" menu rides on it. -->\n            @if (placement === 'stage' && plugin.ShowsAgentVideo) {\n              <mj-media-move-menu\n                class=\"stage-presenter-move\"\n                [Key]=\"key\"\n                [Title]=\"plugin.TabTitle\"\n                Placement=\"stage\"\n                [Allowed]=\"SurfaceStage.AllowedFor(key)\"\n                (MoveRequested)=\"OnMoveRequested($event)\"\n                (ResetLayoutRequested)=\"OnResetLayout()\">\n              </mj-media-move-menu>\n            }\n          </div>\n        }\n      </ng-template>\n      <!-- A picture-in-picture box's bar carries the same \"Move to\u2026\" menu. -->\n      <ng-template mjMediaStagePipActions let-key>\n        @if (SurfaceStage.PluginFor(key); as plugin) {\n          <mj-media-move-menu\n            [Key]=\"key\"\n            [Title]=\"plugin.TabTitle\"\n            Placement=\"pip\"\n            [Allowed]=\"SurfaceStage.AllowedFor(key)\"\n            (MoveRequested)=\"OnMoveRequested($event)\"\n            (ResetLayoutRequested)=\"OnResetLayout()\">\n          </mj-media-move-menu>\n        }\n      </ng-template>\n    </mj-media-stage>\n\n    <!-- FOCUS floating call pill: the main column is hidden, so the live call's\n         identity + state + mute / show-thread / end controls ride over the surface. -->\n    @if (!IsReviewing && ChannelFocusMode) {\n      <div class=\"board-focus-pill\" role=\"status\" aria-label=\"Live call (board focus)\">\n        <span class=\"board-focus-pill__orb\" [attr.data-state]=\"state\" aria-hidden=\"true\"></span>\n        <span class=\"board-focus-pill__text\">\n          <span class=\"board-focus-pill__name\">Voice for {{ AgentName }}</span>\n          @if (FocusStateLabel(state); as label) {\n            <span class=\"board-focus-pill__state\">{{ label }}</span>\n          }\n        </span>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                [class.board-focus-pill__btn--active]=\"FocusPillMuted\"\n                (click)=\"OnFocusPillMute()\"\n                [title]=\"FocusPillMuted ? 'Unmute' : 'Mute'\"\n                [attr.aria-label]=\"FocusPillMuted ? 'Unmute microphone' : 'Mute microphone'\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!FocusPillMuted\" [class.fa-microphone-slash]=\"FocusPillMuted\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" class=\"board-focus-pill__btn\"\n                (click)=\"OnFocusPillExit()\"\n                title=\"Show thread\" aria-label=\"Show the conversation thread\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        @if (StagePlugin; as stagePlugin) {\n          <mj-media-move-menu\n            [Key]=\"stagePlugin.ChannelName\"\n            [Title]=\"stagePlugin.TabTitle\"\n            Placement=\"stage\"\n            [Allowed]=\"SurfaceStage.AllowedFor(stagePlugin.ChannelName)\"\n            (MoveRequested)=\"OnMoveRequested($event)\"\n            (ResetLayoutRequested)=\"OnResetLayout()\">\n          </mj-media-move-menu>\n        }\n        <button type=\"button\" class=\"board-focus-pill__btn board-focus-pill__btn--end\"\n                (click)=\"OnFocusPillEnd()\"\n                title=\"End call\" aria-label=\"End the call\">\n          <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- THE CAMERA CHECK: the first time the user turns the camera on in a call, they see it, and can pick another\n         camera, before the agent does. Until they choose, the camera's own box says it is waiting. -->\n    @if (CameraCheck; as camera) {\n      <mj-realtime-camera-check-card\n        [Camera]=\"camera\"\n        [AgentName]=\"AgentName\"\n        [Switch]=\"SwitchCheckedCamera\"\n        (Confirmed)=\"OnCameraCheckConfirmed()\"\n        (Declined)=\"OnCameraCheckDeclined()\">\n      </mj-realtime-camera-check-card>\n    }\n\n  </div>\n}\n\n<!-- SESSION REVIEW whiteboard pane body: the reviewed session's saved board, rehydrated\n     locally (WhiteboardState.FromJSON) and rendered READ-ONLY (pan/zoom only). Registered\n     as a template-based channel tab ONLY when a parseable Whiteboard state exists. -->\n<ng-template #reviewBoardTpl>\n  @if (ReviewWhiteboard; as board) {\n    <!-- The board host positions itself absolutely \u2014 give it a filling, positioned frame. -->\n    <div class=\"review-board-host\">\n      <mj-realtime-whiteboard\n        [State]=\"board\"\n        [AgentName]=\"AgentName\"\n        [ReadOnly]=\"true\">\n      </mj-realtime-whiteboard>\n    </div>\n  }\n</ng-template>\n\n<!-- SESSION REVIEW recording pane body: the reviewed session's recorded audio synced to its\n     transcript, replayed via the shared storage media player (click-to-seek transcript + playhead\n     highlight). Registered as a template-based channel tab ONLY when the reviewed session carries a\n     RecordingFileID; the player resolves the authenticated audio itself from that file id. -->\n<ng-template #recordingTpl>\n  <div class=\"review-recording-host\">\n    <mj-storage-media-player\n      [FileID]=\"ReviewRecordingFileID\"\n      [Transcript]=\"ReviewCues\"\n      [Provider]=\"Provider\">\n    </mj-storage-media-player>\n  </div>\n</ng-template>\n", styles: [":host {\n  display: contents;\n}\n\n/* Fills the conversation panel IN PLACE: the chat area host provides the positioned\n   context (position:relative on .chat-area) and this covers it edge to edge \u2014 header,\n   thread and composer included. Opaque-ish page surface with a slight blur so the\n   conversation underneath reads as \"paused\", not as an app-wide modal. */\n.call-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 50;\n  display: flex;\n  background: color-mix(in srgb, var(--mj-bg-page) 94%, transparent);\n  backdrop-filter: blur(8px);\n  overflow: hidden;\n}\n\n/* Minimized: hidden (NOT destroyed) so the shell's session/view state survives while\n   the host shows its floating \"on call\" pill. The audio session is untouched. */\n.call-overlay--hidden {\n  display: none;\n}\n\n/* MAIN column: banner (top) \u2192 scrolling thread \u2192 channel strip \u2192 composer \u2192 controls.\n   The 420px floor keeps the call column readable while the panel is dragged wide\n   (the drag clamp's 70% cap is the other guard). */\n.call-main {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* The call's controls at the foot of the column: the \"Agent can see\" chip, the channel strip and the composer. The\n   stage starts its picture-in-picture boxes above this box, so it is never squeezed below its content's height. */\n.call-controls {\n  flex: none;\n}\n\n.call-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 22px;\n  min-height: 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.call-body::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n/* ---------- PURE-AUDIO HERO (disclosure level 0) ----------\n   The orb IS the interface: it breathes with the audio inside expanding sound-wave\n   rings, with a small voice equalizer underneath. Nothing to read, nothing to\n   configure \u2014 text, panels and the composer are revealed later (or peeked on demand). */\n.call-body--hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n/* The orb (mj-realtime-agent-orb) at hero scale. */\n.hero__orb {\n  margin-bottom: 4px;\n}\n/* Voice equalizer: lively while the agent speaks, near-still otherwise. */\n.hero__eq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq span {\n  width: 4px;\n  height: 8px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-brand-accent, var(--mj-brand-primary));\n  opacity: 0.55;\n}\n.hero[data-state='speaking'] .hero__eq span {\n  animation: hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq span:nth-child(1) { animation-delay: 0s; }\n.hero__eq span:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq span:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq span:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq span:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq span:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq span:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq span:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq span:nth-child(9) { animation-delay: 0.03s; }\n@keyframes hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n/* ---------- the agent's place while its video presents (the Avatar) ----------\n   The stage lays the agent's video over these boxes; each has a size only while the video presents. Portrait, as\n   avatar video is (Google's samples are 704x1280). */\n.hero--presenting {\n  height: 100%;\n  min-height: 0;\n}\n.hero__presenter,\n.call-presenter {\n  display: none;\n}\n.hero__presenter--on {\n  display: block;\n  position: relative;\n  container-type: size;\n  flex: 1 1 auto;\n  min-height: 160px;\n  max-height: 520px;\n  aspect-ratio: 3 / 4;\n  margin-bottom: 8px;\n}\n/* Captions over the agent's video, as subtitles: the newest two lines, over the lower third and clear of the tile's\n   footer. Above the stage (z-index 1), where the video is. Light on a dark band in both themes, like the tile's chips. */\n.hero__caption {\n  position: absolute;\n  left: 6%;\n  right: 6%;\n  bottom: 16%;\n  z-index: 2;\n  margin: 0;\n  padding: 6px 10px;\n  border-radius: var(--mj-radius-md);\n  background: rgba(0, 0, 0, 0.6);\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 0.95rem;\n  line-height: 1.4;\n  text-align: center;\n}\n/* Two lines, the newest: older ones leave through the top. The window clips, not the padded band, so nothing of an\n   older line shows in the padding. */\n.hero__caption-window {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  max-height: 2.8em;\n  overflow: hidden;\n}\n.hero__caption-speaker {\n  font-weight: 600;\n}\n/* A small tile (a short window): one smaller line, so the video still shows. */\n@container (max-height: 240px) {\n  .hero__caption {\n    bottom: 22%;\n    padding: 3px 6px;\n    font-size: 0.75rem;\n  }\n  .hero__caption-window {\n    max-height: 1.4em;\n  }\n}\n/* In the console it sits above the scrolling thread, so it stays in view as the conversation grows. Wide enough for\n   the tile's \"AI-generated video\" label on one line. */\n.call-presenter--on {\n  display: block;\n  flex: none;\n  align-self: center;\n  height: 200px;\n  aspect-ratio: 4 / 5;\n  margin-top: 12px;\n}\n.hero__name {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n/* The hero's state for screen readers only, while the agent's tile shows it. */\n.hero__sr {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n/* ---------- AUDIO-REACTIVE MODE (data-audio-live, set by the rAF meter loop) ----------\n   With real audio metering the visuals stop acting and start REACTING: the EQ renders the\n   true spectrum (--eq-1..9), and [data-voice-dir] colors it by who is speaking (agent =\n   brand, user = green). The orb (mj-realtime-agent-orb) reads the same attributes and the\n   smoothed output envelope (--voice-out) itself. Without metering (driver attached no\n   meters) the attribute stays 'false' and the turn-state keyframe animations stay in charge. */\n/* True-spectrum EQ: per-bar heights from the meter's bins. */\n.call-overlay[data-audio-live='true'] .hero__eq span {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(1) { height: calc(6px + var(--eq-1, 0) * 24px); opacity: calc(0.45 + var(--eq-1, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(2) { height: calc(6px + var(--eq-2, 0) * 24px); opacity: calc(0.45 + var(--eq-2, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(3) { height: calc(6px + var(--eq-3, 0) * 24px); opacity: calc(0.45 + var(--eq-3, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(4) { height: calc(6px + var(--eq-4, 0) * 24px); opacity: calc(0.45 + var(--eq-4, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(5) { height: calc(6px + var(--eq-5, 0) * 24px); opacity: calc(0.45 + var(--eq-5, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(6) { height: calc(6px + var(--eq-6, 0) * 24px); opacity: calc(0.45 + var(--eq-6, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(7) { height: calc(6px + var(--eq-7, 0) * 24px); opacity: calc(0.45 + var(--eq-7, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(8) { height: calc(6px + var(--eq-8, 0) * 24px); opacity: calc(0.45 + var(--eq-8, 0) * 0.55); }\n.call-overlay[data-audio-live='true'] .hero__eq span:nth-child(9) { height: calc(6px + var(--eq-9, 0) * 24px); opacity: calc(0.45 + var(--eq-9, 0) * 0.55); }\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__eq span {\n  background: var(--mj-status-success);\n}\n\n/* The quiet first reveal: show the conversation as text (raises disclosure to level 1). */\n.hero__reveal {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 18px;\n  padding: 6px 14px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px dashed var(--mj-border-strong);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-family: inherit;\n  font-size: 11.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;\n}\n.hero__reveal:hover {\n  color: var(--mj-text-secondary);\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n.hero__reveal i {\n  font-size: 11px;\n}\n\n/* Ephemeral narration shown under the banner when no working card anchors it */\n.banner-live-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 7px;\n  padding: 8px 22px 0;\n  font-size: 12px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n  animation: overlay-note-in 220ms ease;\n}\n.banner-live-note i {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* The call's notices under the banner (no microphone works; no avatar): mj-alert brings its own tint, border and text\n   colours; this only places them. */\n.call-microphone-notice,\n.call-avatar-notice {\n  flex-shrink: 0;\n  margin: var(--mj-space-2) var(--mj-space-5) 0;\n}\n\n/* ---------- FOCUS-BOARD mode (whiteboard \"Focus board\" toggle) ----------\n   The main call column collapses away entirely and the focused channel's surface fills\n   the stage; a compact floating call pill keeps the live call reachable. */\n.call-overlay.board-focus .call-main {\n  display: none;\n}\n\n/* ---------- the stage (every channel surface, in one layer) ----------\n   mj-media-stage covers the overlay and places each surface itself. Above the panel it\n   lays surfaces over, and above the call's controls, so its picture-in-picture boxes\n   start clear of them (.call-controls); below the onboarding card (5), the menus of the\n   dock and the chip (5) and the focus pill (60). */\n.call-stage {\n  z-index: 1;\n}\n/* A surface's frame: fills the box the stage gives it. The surface component is created\n   beside the pane host inside it, and sizes itself to it (height: 100%). */\n.stage-frame {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n/* The \"Move to\u2026\" menu on a surface that presents the agent, backed so it reads over video. Bottom right, in the\n   tile's footer, which holds nothing there for the agent, so it never covers the tile's labels. */\n.stage-presenter-move {\n  position: absolute;\n  bottom: 4px;\n  right: 6px;\n  z-index: 1;\n  border-radius: var(--mj-radius-full);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n}\n\n/* Floating call pill: orb + state + mute / show-thread / end (per the whiteboard mockup). */\n.board-focus-pill {\n  position: absolute;\n  left: 64px;\n  top: 12px;\n  z-index: 60;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 7px 9px 7px 12px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 92%, transparent);\n  backdrop-filter: blur(8px);\n  border: 1px solid var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-xl, 0 12px 32px rgba(0, 0, 0, 0.18));\n  animation: overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n.board-focus-pill__orb[data-state='speaking'],\n.board-focus-pill__orb[data-state='listening'] {\n  animation: board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'] {\n  background: var(--mj-status-error);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 18%, transparent);\n}\n@keyframes board-pill-pulse {\n  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n}\n.board-focus-pill__text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name {\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1.2;\n  white-space: nowrap;\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__state {\n  font-size: 10.5px;\n  font-weight: 600;\n  white-space: nowrap;\n  color: var(--mj-brand-primary);\n}\n.board-focus-pill__btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 11px;\n  display: grid;\n  place-items: center;\n  font-family: inherit;\n  flex-shrink: 0;\n}\n.board-focus-pill__btn:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n/* ---------- Session review mode ---------- */\n/* Subtle archival tint so a glance says \"this is history, not a live call\". */\n.call-overlay--review {\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--mj-text-muted) 4%, transparent), transparent 120px),\n    var(--mj-bg-surface);\n}\n\n/* The review whiteboard pane body: the board component positions itself absolutely\n   (inset: 0), so its template-based pane needs a filling, positioned frame. */\n.review-board-host {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* The review recording pane body: the evidence player fills its host (:host height:100%),\n   so its template-based pane needs a filling, constrained frame. */\n.review-recording-host {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host mj-realtime-evidence-playback {\n  flex: 1;\n  min-height: 0;\n}\n\n/* ---------- flex layout (main column | resize handle | surface panel) ---------- */\n/* Token-styled resize handle: invisible until hover, brand-tinted while interacting.\n   7px hit target, col-resize cursor; removed (not rendered) while collapsed / focus. */\n.call-resizer {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer:hover,\n.call-resizer--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n/* The surface panel: a plain fixed-width flex item (inline width set by the overlay;\n   collapsed = the slim strip width). flex-shrink lets it yield to the call column's\n   min-width on tight overlays; overflow hidden keeps the flex height chain intact so\n   the panel's content scrolls internally. */\n.call-panel {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  /* Disclosure-gated: the panel is CREATED when earned/peeked \u2014 its arrival slides in\n     from the right so the reveal doubles as the progress cue. */\n  animation: panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel > * {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n"] }]
     }], () => [], { Hidden: [{
             type: Input
         }], AgentName: [{
@@ -2591,6 +2624,10 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             type: Input
         }], AvatarNoticeLabels: [{
             type: Input
+        }], ShowAvatarNotice: [{
+            type: Input
+        }], ShowPerceptionChip: [{
+            type: Input
         }], Chrome: [{
             type: Input
         }], ConsoleBreakpointPx: [{