@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.4

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

@@ -4,14 +4,22 @@ import { UserInfoEngine } from '@memberjunction/core-entities';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
 import { MJStorageMediaPlayerComponent } from '@memberjunction/ng-media-player';
+import { DescribeCallEnd, REALTIME_CAPTURES_OFF, REALTIME_CAPTURE_OFFERS_NONE, REALTIME_MICROPHONE_NONE, } from '@memberjunction/realtime-runtime';
+import { MJAlertComponent } from '@memberjunction/ng-ui-components';
 import { RealtimeSessionService } from '../../services/realtime-session.service';
 import { BuildReviewThreadItems } from '../../services/realtime-session-review.service';
 import { RealtimeSessionState } from './realtime-session-state';
 import { RealtimeAgentBannerComponent } from './realtime-agent-banner.component';
 import { RealtimeSessionThreadComponent } from './realtime-session-thread.component';
 import { RealtimeChannelStripComponent } from './realtime-channel-strip.component';
+import { RealtimePerceptionChipComponent } from './realtime-perception-chip.component';
 import { RealtimeComposerComponent } from './realtime-composer.component';
 import { RealtimeSurfaceTabsComponent } from './realtime-surface-tabs.component';
+import { RealtimeSurfaceStageModel } from './realtime-surface-stage.model';
+import { AgentOrbStateFor, RealtimeAgentOrbComponent } from './realtime-agent-orb.component';
+import { RealtimeCameraCheckCardComponent } from './capture/realtime-camera-check-card.component';
+import { SURFACE_PIP_PREF_KEY, SURFACE_PLACEMENT_PREF_KEY } from './realtime-surface-placement-prefs';
+import { RealtimeChannelPaneComponent } from './channels/realtime-channel-pane.component';
 import { ClampSurfacePanelWidth, DefaultSurfacePanelWidth, IsSurfacePanelDrag, ParseSurfacePanelPref, SerializeSurfacePanelPref, SurfacePanelDragWidth, SURFACE_PANEL_COLLAPSED_WIDTH, SURFACE_PANEL_DEFAULT_WIDTH, SURFACE_PANEL_PREF_KEY } from './realtime-surface-panel-prefs';
 import { RealtimeDisclosureModel, SerializeUxMilestones, REALTIME_UX_PREF_KEY } from './realtime-disclosure';
 import { ResolveRealtimeUi, DEFAULT_REALTIME_UI_INPUTS, DEFAULT_REALTIME_UI_SIGNALS } from './realtime-ui-config';
@@ -19,14 +27,31 @@ import { RealtimeAudioVisualSmoother } from './realtime-audio-visuals';
 import { ShouldRemoveReviewWhiteboardTab } from './realtime-surface-tabs.model';
 import { ShouldRegisterChannelTabUpFront } from './realtime-surface-tab-style';
 import { RealtimeWhiteboardBoardComponent, WhiteboardState } from '@memberjunction/ng-whiteboard';
+import { AvatarNoticeText, MediaMoveMenuComponent, MediaStageComponent, MediaStagePipActionsDirective, MediaStageSurfaceDirective, SharePanelDirective, SharePanelRegistry } from '@memberjunction/ng-realtime-media';
+import { MediaLayoutPrefs, RecordPipRect } from '@memberjunction/ai-realtime-client/media';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
 import * as i2 from "@angular/common";
 const _c0 = ["reviewBoardTpl"];
 const _c1 = ["recordingTpl"];
+const _c2 = ["presenterSlot"];
 function RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelement(0, "mj-alert", 8);
+} if (rf & 2) {
+    i0.ɵɵproperty("Message", ctx);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-alert", 22);
+    i0.ɵɵlistener("Dismissed", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_5_Template_mj_alert_Dismissed_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnAvatarNoticeDismissed()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Message", ctx_r1.AvatarNoticeMessage);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 23);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -34,172 +59,336 @@ function RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template(rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.State.Narration, " ");
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "mj-loading", 13);
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 24, 3);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("call-presenter--on", ctx_r1.PresenterOnStage);
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "mj-loading", 25);
     i0.ɵɵelementEnd();
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 14);
-    i0.ɵɵelement(2, "span", 15)(3, "span", 16)(4, "span", 17)(5, "div", 18);
+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(2, "span")(3, "span")(4, "span")(5, "span")(6, "span")(7, "span")(8, "span")(9, "span")(10, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 19);
-    i0.ɵɵelement(7, "span")(8, "span")(9, "span")(10, "span")(11, "span")(12, "span")(13, "span")(14, "span")(15, "span");
+} if (rf & 2) {
+    const state_r5 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("State", ctx_r1.HeroOrbState(state_r5));
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 20);
-    i0.ɵɵtext(17);
+} if (rf & 2) {
+    const caption_r6 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", caption_r6.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.ɵɵtext(4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const caption_r6 = ctx;
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(caption_r6.Speaker ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", caption_r6.Text, " ");
+} }
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 21);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(2, "div", 38);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 22);
-    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTextReveal()); });
-    i0.ɵɵelement(21, "i", 23);
-    i0.ɵɵtext(22, " Show the conversation ");
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const state_r4 = i0.ɵɵnextContext();
+    const state_r5 = i0.ɵɵnextContext(2);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("data-state", state_r4);
-    i0.ɵɵadvance(5);
-    i0.ɵɵattribute("data-state", ctx_r1.HeroOrbState(state_r4));
-    i0.ɵɵadvance(12);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.AgentName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r4));
+    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r5));
+} }
+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 ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.HeroStateLabel(state_r5));
+} }
+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()();
+} if (rf & 2) {
+    let tmp_11_0;
+    const state_r5 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("hero--presenting", ctx_r1.PresenterOnStage);
+    i0.ɵɵattribute("data-state", state_r5);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.PresenterOnStage ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("hero__presenter--on", ctx_r1.PresenterOnStage);
+    i0.ɵɵadvance(2);
+    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);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-session-thread", 24);
-    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_OpenRunRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("OpenArtifactRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_OpenArtifactRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenArtifactRequested($event)); })("CancelRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template_mj_realtime_session_thread_CancelRequested_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCancelDelegation($event)); });
+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.ɵɵ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) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("State", ctx_r1.State)("AgentName", ctx_r1.AgentName)("UserName", (ctx_r1.CurrentUser == null ? null : ctx_r1.CurrentUser.Name) || "You")("ShowCaptions", ctx_r1.IsReviewing ? true : ctx_r1.ShowCaptions)("DevMode", ctx_r1.DevMode);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-realtime-channel-strip");
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Conditional_0_Template, 1, 0, "mj-realtime-channel-strip");
-    i0.ɵɵelementStart(1, "mj-realtime-composer", 25);
-    i0.ɵɵlistener("OpenChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_OpenChanged_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerOpenChanged($event)); })("CaptionsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_CaptionsToggled_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCaptionsToggled($event)); })("DetailsToggled", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_DetailsToggled_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDetailsToggled()); })("MuteChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_MuteChanged_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnComposerMuteChanged($event)); })("EndRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template_mj_realtime_composer_EndRequested_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEndCall()); });
+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.ɵɵ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.ɵɵ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.ɵɵconditional(ctx_r1.ChannelStripVisible ? 0 : -1);
+    i0.ɵɵproperty("Sources", ctx_r1.VideoSources);
+    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)("ShowDetails", ctx_r1.ShowDetailsControl)("DetailsOn", ctx_r1.DetailsPeek);
+    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);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵlistener("mousedown", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeStart($event)); })("dblclick", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template_div_dblclick_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPanelResizeReset()); });
+function RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    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) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("call-resizer--active", ctx_r1.IsPanelResizing);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Conditional_0_Template, 1, 2, "div", 26);
-    i0.ɵɵelementStart(1, "div", 27)(2, "mj-realtime-surface-tabs", 28);
-    i0.ɵɵlistener("OpenRunRequested", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_OpenRunRequested_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenRunRequested($event)); })("CollapsedChange", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_CollapsedChange_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelCollapsedChange($event)); })("WideChanged", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template_mj_realtime_surface_tabs_WideChanged_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPanelWideChanged($event)); });
+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.ɵɵ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) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(!ctx_r1.PanelResizeDisabled ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r1.ChannelFocusMode ? null : ctx_r1.PanelAreaSize, "px");
+    i0.ɵɵstyleProp("width", ctx_r1.PanelAreaSize, "px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("CurrentUser", ctx_r1.CurrentUser)("EnvironmentID", ctx_r1.EnvironmentID)("ShowActivityTab", ctx_r1.ShowActivityTab)("ExtraArtifacts", ctx_r1.ReviewArtifacts)("Fill", ctx_r1.ChannelFocusMode);
+    i0.ɵɵproperty("State", ctx_r1.State)("DevMode", ctx_r1.DevMode)("CurrentUser", ctx_r1.CurrentUser)("EnvironmentID", ctx_r1.EnvironmentID)("ShowActivityTab", ctx_r1.ShowActivityTab)("ExtraArtifacts", ctx_r1.ReviewArtifacts)("Collapsed", ctx_r1.PanelCollapsed)("SurfacePlacements", ctx_r1.SurfaceStage.Placements)("AllowedPlacements", ctx_r1.SurfaceStage.AllowedPlacements);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+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.ɵɵ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) {
+    const plugin_r12 = i0.ɵɵnextContext();
+    const key_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const plugin_r12 = ctx;
+    const ctx_r13 = i0.ɵɵnextContext();
+    const visible_r15 = ctx_r13.Visible;
+    const placement_r16 = ctx_r13.Placement;
+    i0.ɵɵproperty("mjSharePanel", plugin_r12.SurfaceShareable ? plugin_r12.TabTitle : null)("mjSharePanelIcon", plugin_r12.TabIcon);
+    i0.ɵɵattribute("aria-label", plugin_r12.TabTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Plugin", plugin_r12)("Visible", visible_r15)("Placement", placement_r16);
+    i0.ɵɵadvance();
+    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);
+} if (rf & 2) {
+    let tmp_9_0;
+    const key_r13 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_9_0 = ctx_r1.SurfaceStage.PluginFor(key_r13)) ? 0 : -1, tmp_9_0);
+} }
+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.ɵɵ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) {
+    const key_r18 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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);
+} if (rf & 2) {
+    let tmp_7_0;
+    const key_r18 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx);
 } }
-function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "span", 30);
-    i0.ɵɵelementStart(2, "span", 31)(3, "span", 32);
+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.ɵɵ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) {
+    const stagePlugin_r21 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("Key", stagePlugin_r21.ChannelName)("Title", stagePlugin_r21.TabTitle)("Allowed", ctx_r1.SurfaceStage.AllowedFor(stagePlugin_r21.ChannelName));
+} }
+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.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Conditional_5_Template, 2, 1, "span", 33);
+    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_5_Template, 2, 1, "span", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 34);
-    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillMute()); });
-    i0.ɵɵelement(7, "i", 35);
+    i0.ɵɵelementStart(6, "button", 56);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 36);
-    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillExit()); });
-    i0.ɵɵelement(9, "i", 37);
+    i0.ɵɵelementStart(8, "button", 58);
+    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.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 38);
-    i0.ɵɵlistener("click", function RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFocusPillEnd()); });
-    i0.ɵɵelement(11, "i", 39);
+    i0.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Conditional_10_Template, 1, 3, "mj-media-move-menu", 60);
+    i0.ɵɵelementStart(11, "button", 61);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_7_0;
-    const state_r4 = i0.ɵɵnextContext();
+    let tmp_8_0;
+    let tmp_14_0;
+    const state_r5 = i0.ɵɵnextContext();
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-state", state_r4);
+    i0.ɵɵattribute("data-state", state_r5);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("Voice for ", ctx_r1.AgentName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_7_0 = ctx_r1.FocusStateLabel(state_r4)) ? 5 : -1, tmp_7_0);
+    i0.ɵɵconditional((tmp_8_0 = ctx_r1.FocusStateLabel(state_r5)) ? 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");
     i0.ɵɵattribute("aria-label", ctx_r1.FocusPillMuted ? "Unmute microphone" : "Mute microphone");
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-microphone", !ctx_r1.FocusPillMuted)("fa-microphone-slash", ctx_r1.FocusPillMuted);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional((tmp_14_0 = ctx_r1.StagePlugin) ? 10 : -1, tmp_14_0);
+} }
+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.ɵɵ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) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Camera", ctx)("AgentName", ctx_r1.AgentName)("Switch", ctx_r1.SwitchCheckedCamera);
 } }
 function RealtimeSessionOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "mj-realtime-agent-banner", 5);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "mj-realtime-agent-banner", 7);
     i0.ɵɵpipe(3, "async");
     i0.ɵɵlistener("OpenSessionRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_OpenSessionRequested_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenSessionRequested($event)); })("DevModeToggled", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_DevModeToggled_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDevModeToggled($event)); })("DensityChanged", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_DensityChanged_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDensityChanged($event)); })("MinimizeRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_MinimizeRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnMinimize()); })("StartLiveRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_StartLiveRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnStartLive()); })("CloseRequested", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_realtime_agent_banner_CloseRequested_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnReviewClose()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template, 3, 1, "div", 6);
-    i0.ɵɵelementStart(5, "div", 7);
-    i0.ɵɵconditionalCreate(6, RealtimeSessionOverlayComponent_Conditional_0_Conditional_6_Template, 2, 0, "div", 8)(7, RealtimeSessionOverlayComponent_Conditional_0_Conditional_7_Template, 23, 4, "div", 9)(8, RealtimeSessionOverlayComponent_Conditional_0_Conditional_8_Template, 1, 5, "mj-realtime-session-thread", 10);
+    i0.ɵɵconditionalCreate(4, RealtimeSessionOverlayComponent_Conditional_0_Conditional_4_Template, 1, 1, "mj-alert", 8);
+    i0.ɵɵconditionalCreate(5, RealtimeSessionOverlayComponent_Conditional_0_Conditional_5_Template, 1, 1, "mj-alert", 9);
+    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.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, RealtimeSessionOverlayComponent_Conditional_0_Conditional_9_Template, 2, 7);
+    i0.ɵɵelementStart(12, "div", 16, 2);
+    i0.ɵɵconditionalCreate(14, RealtimeSessionOverlayComponent_Conditional_0_Conditional_14_Template, 3, 16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(15, RealtimeSessionOverlayComponent_Conditional_0_Conditional_15_Template, 3, 12);
+    i0.ɵɵelementStart(16, "mj-media-stage", 17);
+    i0.ɵɵlistener("PipRectChange", function RealtimeSessionOverlayComponent_Conditional_0_Template_mj_media_stage_PipRectChange_16_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnPipRectChange($event)); });
+    i0.ɵɵtemplate(17, RealtimeSessionOverlayComponent_Conditional_0_ng_template_17_Template, 1, 1, "ng-template", 18)(18, RealtimeSessionOverlayComponent_Conditional_0_ng_template_18_Template, 1, 1, "ng-template", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, RealtimeSessionOverlayComponent_Conditional_0_Conditional_10_Template, 3, 10);
-    i0.ɵɵconditionalCreate(11, RealtimeSessionOverlayComponent_Conditional_0_Conditional_11_Template, 12, 11, "div", 11);
+    i0.ɵɵconditionalCreate(19, RealtimeSessionOverlayComponent_Conditional_0_Conditional_19_Template, 13, 12, "div", 20);
+    i0.ɵɵconditionalCreate(20, RealtimeSessionOverlayComponent_Conditional_0_Conditional_20_Template, 1, 3, "mj-realtime-camera-check-card", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r4 = ctx;
+    let tmp_25_0;
+    let tmp_40_0;
+    const state_r5 = 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_r4)("Compact", !ctx_r1.IsReviewing && ctx_r1.Ui.compact && ctx_r1.Ui.chrome === "orb")("AgentName", ctx_r1.AgentName)("ModelName", ctx_r1.IsReviewing ? null : i0.ɵɵpipeBind1(3, 28, 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)("Density", ctx_r1.Disclosure.Milestones.Density);
+    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.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.State.Narration && !ctx_r1.State.ActiveCallId && ctx_r1.Disclosure.ShowThread ? 4 : -1);
+    i0.ɵɵconditional((tmp_25_0 = ctx_r1.MicrophoneNotice) ? 4 : -1, tmp_25_0);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("call-body--hero", ctx_r1.ShowHero && state_r4 !== "connecting");
+    i0.ɵɵconditional(ctx_r1.AvatarNotice ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsReviewing && state_r4 === "connecting" ? 6 : ctx_r1.ShowHero ? 7 : 8);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(!ctx_r1.IsReviewing ? 9 : -1);
+    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.State.Narration && !ctx_r1.State.ActiveCallId && ctx_r1.Disclosure.ShowThread ? 6 : -1);
+    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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowConnectingScreen(state_r5) ? 9 : ctx_r1.ShowHero ? 10 : 11);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(!ctx_r1.IsReviewing ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowPanelArea ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.ShowPanelArea ? 10 : -1);
+    i0.ɵɵproperty("Surfaces", ctx_r1.SurfaceStage.Surfaces)("TabSlot", (ctx_r1.StageSlot == null ? null : ctx_r1.StageSlot.Element) ?? null)("StageSlot", ctx_r1.StageSurfaceSlot)("ActiveTabKey", (ctx_r1.StageSlot == null ? null : ctx_r1.StageSlot.Key) ?? null)("PipRects", ctx_r1.PipRects)("PipKeepClear", callControls_r23);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.ChannelFocusMode ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsReviewing && ctx_r1.ChannelFocusMode ? 11 : -1);
+    i0.ɵɵconditional((tmp_40_0 = ctx_r1.CameraCheck) ? 20 : -1, tmp_40_0);
 } }
 function RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "mj-realtime-whiteboard", 41);
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "mj-realtime-whiteboard", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -207,21 +396,31 @@ 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", 40);
+    i0.ɵɵconditionalCreate(0, RealtimeSessionOverlayComponent_ng_template_2_Conditional_0_Template, 2, 3, "div", 65);
 } 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", 42);
-    i0.ɵɵelement(1, "mj-storage-media-player", 43);
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵelement(1, "mj-storage-media-player", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("FileID", ctx_r1.ReviewRecordingFileID)("Transcript", ctx_r1.ReviewCues)("Provider", ctx_r1.Provider);
 } }
+/** How long the call's avatar notice stays before it hides itself (N5: it also has a dismiss button). */
+const AVATAR_NOTICE_VISIBLE_MS = 10_000;
+/**
+ * What the call says while no microphone works, by why: a microphone the browser blocked must be allowed before a pick
+ * can open it. `{Agent}` stands for the agent's name. The arrow is the device chevron on the microphone button.
+ */
+const MICROPHONE_NOTICE_TEXT = {
+    Blocked: "{Agent} can't hear you: the browser blocked the microphone. Allow it for this site, then choose it from the arrow next to the microphone button.",
+    Lost: "{Agent} can't hear you: no microphone is working. Connect one, or choose one from the arrow next to the microphone button.",
+};
 /**
  * The "call mode" overlay for a live real-time voice session. Hosted by the
  * conversation chat area (`<mj-conversation-chat-area>`) behind `Active$`, it fills the
@@ -242,11 +441,18 @@ function RealtimeSessionOverlayComponent_ng_template_4_Template(rf, ctx) { if (r
  *
  * INTERACTIVE CHANNELS ARE PLUGINS — this shell is channel-agnostic. It subscribes
  * {@link RealtimeSessionService.ActiveChannels$} and registers one surface tab per
- * {@link BaseRealtimeChannelClient} (key/title/icon from the plugin); the tab pane creates
- * the plugin's surface component dynamically and the PLUGIN wires its own inputs/outputs.
- * The only channel-generic affordance the shell owns is the FOCUS layout: any channel may
- * request it (via its context's `SetFocusMode` → {@link RealtimeSessionService.ChannelFocus$}),
- * which collapses the main call column (`.board-focus`) and shows the floating call pill.
+ * {@link BaseRealtimeChannelClient} (key/title/icon from the plugin). Every plugin's surface
+ * lives on ONE STAGE (`mj-media-stage`) over the whole overlay: created the first time it is
+ * seen, laid over its tab's pane while that tab is active, and kept until its channel leaves
+ * (see {@link RealtimeSurfaceStageModel}). The PLUGIN wires its own inputs/outputs.
+ * Each surface starts where its channel's registry row places it (its tab unless the row says
+ * otherwise). The user moves it with "Move to…" (beside its tab, in the call pill, or on a
+ * picture-in-picture box): to the STAGE, a picture-in-picture box, its tab, or out of sight,
+ * as far as its channel allows. The moves are saved per user and carry over to later
+ * sessions. A surface on the stage is the FOCUS layout: the main call column collapses
+ * (`.board-focus`), the surface fills the overlay and the floating call pill appears. A channel
+ * may ask for it too (via its context's `SetFocusMode` → {@link RealtimeSessionService.ChannelFocus$}),
+ * which moves its surface to the stage or back.
  *
  * Owns the shared {@link RealtimeSessionState} — the SINGLE merge of the service's
  * caption/delegation/narration streams — and passes it to both thread and rail via
@@ -290,6 +496,12 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     CurrentUser = null;
     /** The active environment id, threaded to the surface panel's artifact viewer. */
     EnvironmentID = '';
+    /**
+     * The host's own words for why the call shows no avatar, per reason (for example its product's name for "this app").
+     * A reason it leaves out keeps the stock line from `ng-realtime-media` (`AVATAR_NOTICE_TEXT`). `unknown` words a reason
+     * this version doesn't know, such as a newer server's, in place of `AVATAR_NOTICE_CALL_UNKNOWN_REASON_TEXT`.
+     */
+    AvatarNoticeLabels = null;
     // ── Declarative UI configuration (host controls every aspect of the surface) ──
     //
     // Each input is a thin, PascalCase setter over a private slot in {@link _uiInputs}.
@@ -406,6 +618,11 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     get ReviewData() {
         return this._reviewData;
     }
+    /**
+     * Review mode: whether the "Start live session" action is offered. A host turns it off where
+     * a voice session cannot start (the chat area does so while a draft fork is open).
+     */
+    AllowStartLive = true;
     /** Emitted after the call ends so the host can react (visibility is driven by Active$). */
     Ended = new EventEmitter();
     /**
@@ -568,6 +785,12 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
      * default OFF: voice-first, the orb owns the screen until the user opts into text.
      */
     ShowCaptions = false;
+    /**
+     * Whether the user asked for the conversation itself (the hero's "Show the conversation", {@link RevealText}), not only
+     * captions. While the agent's video presents in the hero, captions alone keep the hero and run over the video; this
+     * opens the thread. Cleared when captions turn off.
+     */
+    conversationShown = false;
     /** UserInfoEngine key for the persisted captions (text-vs-orb) preference. */
     static captionsPrefKey = 'mj.realtimeVoice.captions.v1';
     /**
@@ -588,7 +811,15 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     surfaceTabs;
     set surfaceTabsRef(ref) {
         this.surfaceTabs = ref;
-        if (ref) {
+        if (!ref) {
+            // The panel went away with its slots. StageSlot reads null while it is away, so the bindings don't change.
+            this.channelSlot = null;
+            this.SurfaceStage.SetActiveTab(null);
+            // The panel that comes back is a new one, which starts as PanelCollapsed says: expanded unless only the call's
+            // width hid this one (#5387, #5433).
+            this.resetPanelCollapseUnlessWaitingForRoom();
+        }
+        else {
             // A (re)created panel starts with a FRESH tab model. Re-register the live channel set
             // here (gated to whiteboard + already-used channels) so hiding the panel (pure-audio
             // return, Details off) never loses the Whiteboard or an already-used channel's tab.
@@ -610,6 +841,13 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
                     // lead the strip — NOT the Activity rail; agent-run plumbing is opt-in only.
                     // (Review channel tabs register a beat later and take focus themselves.)
                     ref.FocusFirstTab();
+                    // The panel reports its wide tier only when it flips, from a start that is not wide, so landing on Activity
+                    // reports nothing. PanelWide may still hold the tier of the panel before, whose focused channel left the call
+                    // while it was away, so it takes the tier of the tab this one landed on (#5433). Only a different tier moves
+                    // the width. A reveal always lands on a channel's tab, which the panel reports itself.
+                    if (ref.IsWide !== this.PanelWide) {
+                        this.OnPanelWideChanged(ref.IsWide);
+                    }
                 }
             });
         }
@@ -632,18 +870,82 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     viewReady = false;
     // ── Channel FOCUS layout (channel-generic — any plugin may request it) ─────
     /**
-     * True while a channel surface is in FOCUS mode: the main call column collapses
+     * True while a channel's surface is on the stage (FOCUS mode): the main call column collapses
      * (`.board-focus` on the overlay) and a compact floating call pill (orb + state +
-     * mute / show-thread / end) rides over the surface.
+     * mute / show-thread / move / end) rides over the surface. A surface that presents the agent
+     * ({@link PresenterOnStage}) takes the agent's place in the call instead, so it is not focus mode.
+     */
+    get ChannelFocusMode() {
+        return this.SurfaceStage.StageKey !== null && !this.PresenterOnStage;
+    }
+    /**
+     * Whether the surface on the stage presents the agent: its channel shows the agent's video (the Avatar). It lies over
+     * {@link PresenterSlot}, in the agent's place in the call (the hero, or above the thread in the console), rather than
+     * filling the overlay.
+     */
+    get PresenterOnStage() {
+        return this.StagePlugin?.ShowsAgentVideo ?? false;
+    }
+    /** Whether captions run over the agent's video: they are on, and the video presents in the hero. */
+    get ShowAvatarCaptions() {
+        return this.ShowCaptions && this.ShowHero && this.PresenterOnStage;
+    }
+    /**
+     * Whether the call body shows the connecting screen for `state`: while the call connects, outside review, unless the
+     * agent's video presents in the hero. The hero then stays, so a resume on a new connection keeps the video in its place
+     * with its last frame on screen, and the video's tile says the call is connecting. Taking the hero away would take the
+     * video's place with it, and the stage would lay the video over the whole call until the hero came back.
      */
-    ChannelFocusMode = false;
+    ShowConnectingScreen(state) {
+        return !this.IsReviewing && state === 'connecting' && !(this.ShowHero && this.PresenterOnStage);
+    }
+    /** The newest caption, as the captions over the agent's video show it: the user's is marked "You". `null` before any. */
+    get AvatarCaption() {
+        const items = this.State.Items;
+        for (let i = items.length - 1; i >= 0; i--) {
+            const item = items[i];
+            if (item.Kind === 'caption') {
+                return { Speaker: item.Role === 'User' ? 'You' : null, Text: item.Text };
+            }
+        }
+        return null;
+    }
+    /** The agent's place in the call, as last reported to the stage, or `null` while the call shows none. */
+    PresenterSlot = null;
+    /** The element the stage lays its stage surface over: the agent's place while it presents, else none (it fills the stage). */
+    get StageSurfaceSlot() {
+        return this.PresenterOnStage ? this.PresenterSlot : null;
+    }
+    /** The agent's place in the call: in the hero, or above the thread in the console. */
+    presenterSlotRef;
+    /** The presenter slot last reported through {@link PresenterSlot}. */
+    reportedPresenterSlot = null;
     /** Mic-muted state reflected on the focus pill's mute button. */
     FocusPillMuted = false;
-    /** The channel currently holding the focus layout (the pill's exit routes back to it). */
-    focusChannel = null;
+    /** The channel whose surface is on the stage (the pill's exit routes back to it), or `null`. */
+    get StagePlugin() {
+        const key = this.SurfaceStage.StageKey;
+        return key ? this.SurfaceStage.PluginFor(key) : null;
+    }
+    // ── The stage: every channel surface, in one layer over the overlay ─────────
+    /** Which channel surfaces the stage holds and where each shows. */
+    SurfaceStage = new RealtimeSurfaceStageModel();
+    /** The active channel tab's slot, as the panel last reported it. */
+    channelSlot = null;
+    /** The slot the stage lays the active channel tab's surface over: none while the panel is away. */
+    get StageSlot() {
+        return this.ShowPanelArea ? this.channelSlot : null;
+    }
+    /** The panel's active channel slot moved, or went away. */
+    OnChannelSlotChange(slot) {
+        this.channelSlot = slot;
+        this.SurfaceStage.SetActiveTab(slot?.Key ?? null);
+        this.cdr.markForCheck();
+    }
     subs = [];
     constructor() {
         super();
+        this.loadPlacementPref();
         this.loadPanelWidthPref();
         this.loadDisclosurePref();
         this.loadCaptionsPref();
@@ -654,15 +956,291 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         // Disclosure ratchet moved — re-resolve the view-model (thread/composer/gear gates).
         this.Disclosure.Changed$.subscribe(() => this.recomputeUi()), 
         // One surface tab per registry-resolved channel plugin (replays the current set).
-        this.realtime.ActiveChannels$.subscribe(channels => { this.registerChannelTabs(channels); this.recomputeUi(); }), 
+        this.realtime.ActiveChannels$.subscribe(channels => this.onActiveChannelsChanged(channels)), 
         // Any channel may request the focus layout through its host context.
         this.realtime.ChannelFocus$.subscribe(event => this.onChannelFocus(event.Channel, event.Focused)), 
         // The agent ACTED on a channel — auto-reveal its surface tab on first activity.
         this.realtime.ChannelActivity$.subscribe(plugin => this.onChannelActivity(plugin)), 
+        // What the agent can see (frames flowing from a whiteboard, browser, shared screen): feeds the
+        // "agent can see" chip. Not gated by disclosure level — it is a privacy indicator, never earned.
+        this.realtime.VideoSources$.subscribe(sources => { this.VideoSources = sources; this.cdr.markForCheck(); }), 
+        // The camera and screen share, and which of them the call offers: the composer's Camera and Share follow both.
+        this.realtime.Captures$.subscribe(states => this.onCapturesChanged(states)), this.realtime.CaptureOffers$.subscribe(offers => { this.CaptureOffers = offers; this.cdr.markForCheck(); }), 
+        // The call's microphone and the ones it can move to: the composer's device menu lists them.
+        this.realtime.Microphone$.subscribe(microphone => this.onMicrophoneChanged(microphone)), 
+        // The panels of the page on screen, which the Share menu offers under "This panel"; a shared one that goes away
+        // ends its share.
+        this.sharePanelRegistry.PanelsFor$(this.hostRef.nativeElement).subscribe(panels => {
+            this.SharePanels = panels;
+            this.cdr.markForCheck();
+        }), this.sharePanelRegistry.Removed$.subscribe(key => this.onSharePanelRemoved(key)), 
         // Live/idle flips: reset/ratchet disclosure + re-evaluate the review-vs-live branch.
         this.realtime.Active$.subscribe(active => this.onActiveChanged(active)), 
         // Connection lifecycle drives chrome (the `connecting` loader) + the public output.
-        this.realtime.ConnectionState$.subscribe(state => this.onConnectionStateChanged(state)));
+        this.realtime.ConnectionState$.subscribe(state => this.onConnectionStateChanged(state)), 
+        // Why the call shows no avatar its agent asked for: once per call, after it connects.
+        this.realtime.AvatarNotice$.subscribe(notice => this.onAvatarNotice(notice)));
+    }
+    /** The runtime's notice for this call (`null` when none). */
+    avatarNotice = null;
+    /** The notice the user dismissed or that hid itself; this call does not show it again. */
+    avatarNoticeDone = null;
+    /** Hides the notice {@link AVATAR_NOTICE_VISIBLE_MS} after it appears. */
+    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.
+     */
+    get AvatarNotice() {
+        const notice = this.avatarNotice;
+        return 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
+     * this version doesn't know) reads the call's line for it.
+     */
+    get AvatarNoticeMessage() {
+        const notice = this.AvatarNotice;
+        return notice ? AvatarNoticeText(notice.Reason ?? null, this.AvatarNoticeLabels, this.AgentName) : '';
+    }
+    /** The user dismissed the notice: it does not come back in this call. */
+    OnAvatarNoticeDismissed() {
+        this.finishAvatarNotice();
+    }
+    /** A new notice starts its timer; a call's end (`null`) takes it away. */
+    onAvatarNotice(notice) {
+        if (notice === this.avatarNotice) {
+            return;
+        }
+        this.clearAvatarNoticeTimer();
+        this.avatarNotice = notice;
+        if (notice && notice !== this.avatarNoticeDone) {
+            this.avatarNoticeTimer = setTimeout(() => this.ngZone.run(() => this.finishAvatarNotice()), AVATAR_NOTICE_VISIBLE_MS);
+        }
+        this.cdr.markForCheck();
+    }
+    /** Hides the current notice for the rest of its call. */
+    finishAvatarNotice() {
+        this.clearAvatarNoticeTimer();
+        this.avatarNoticeDone = this.avatarNotice;
+        this.cdr.markForCheck();
+    }
+    clearAvatarNoticeTimer() {
+        if (this.avatarNoticeTimer !== null) {
+            clearTimeout(this.avatarNoticeTimer);
+            this.avatarNoticeTimer = null;
+        }
+    }
+    /** The video sources the agent can or could see right now (see {@link RealtimeSessionService.VideoSources$}). */
+    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. */
+    CaptureOffers = REALTIME_CAPTURE_OFFERS_NONE;
+    /** Whether the camera is on or starting: the composer's Camera button reads as on. */
+    get CameraOn() {
+        return isCapturing(this.CaptureStates.Camera);
+    }
+    /** The camera while the user checks it, before the agent sees it; `null` otherwise. The camera check card shows it. */
+    get CameraCheck() {
+        return this.CaptureStates.Camera.Checking ? this.CaptureStates.Camera : null;
+    }
+    /** The camera check's "Turn on camera": the agent sees the camera from now on. */
+    OnCameraCheckConfirmed() {
+        this.realtime.ConfirmCamera();
+    }
+    /** The camera check's "Not now": the camera turns off. */
+    OnCameraCheckDeclined() {
+        this.realtime.StopCamera();
+    }
+    /** Moves the camera being checked to another device: the camera check's picker. */
+    SwitchCheckedCamera = (deviceId) => this.realtime.SwitchCamera(deviceId);
+    /** Whether a share is on or starting: the composer's Share button reads as sharing. */
+    get Sharing() {
+        return isCapturing(this.CaptureStates.Screen);
+    }
+    /**
+     * The composer's Camera button. The session starts or stops the camera; its channel's box shows it, or why it could not
+     * start.
+     */
+    OnCameraToggled(on) {
+        if (on) {
+            void this.realtime.StartCamera();
+        }
+        else {
+            this.realtime.StopCamera();
+        }
+        this.ControlInvoked.emit('camera');
+    }
+    /** The app's shareable panels: what the Share menu offers under "This panel", and the panel a pick names. */
+    sharePanelRegistry = inject(SharePanelRegistry);
+    /**
+     * The panels of the page the Share menu offers under "This panel": those on screen, in page order, leaving out any that
+     * holds this call. Empty where the browser cannot share a single panel.
+     */
+    SharePanels = [];
+    /** The key of the panel being shared, while a share of one panel starts or runs; `null` otherwise. */
+    sharedPanelKey = null;
+    /**
+     * The composer's Share button or menu: the session asks the browser's picker, offering the kind of surface picked first,
+     * or this tab, to share the picked panel alone.
+     */
+    OnShareRequested(request) {
+        if (request.Kind === 'display') {
+            void this.realtime.StartScreenShare(request.PreferredSurface ? { PreferredSurface: request.PreferredSurface } : undefined);
+        }
+        else {
+            this.startPanelShare(request.PanelKey);
+        }
+        this.ControlInvoked.emit('share');
+    }
+    /** The composer's Stop sharing. */
+    OnStopShareRequested() {
+        this.realtime.StopScreenShare();
+        this.ControlInvoked.emit('share');
+    }
+    /** Shares one panel of the page, named by its label. A panel that went away since the menu listed it shares nothing. */
+    startPanelShare(key) {
+        const panel = this.sharePanelRegistry.Get(key);
+        if (!panel) {
+            return;
+        }
+        this.sharedPanelKey = key;
+        void this.realtime.StartScreenShare({ Panel: panel.Element, PanelLabel: panel.Label });
+    }
+    /**
+     * A panel went away, such as the whiteboard when its channel leaves the call. When it is the one shared, the share ends:
+     * no frame comes from an element that is gone. A panel that is only out of sight keeps its share.
+     */
+    onSharePanelRemoved(key) {
+        if (key === this.sharedPanelKey) {
+            this.sharedPanelKey = null;
+            this.realtime.StopScreenShare();
+        }
+    }
+    /** The captures changed: the composer follows them, and a share that is over no longer holds its panel. */
+    onCapturesChanged(states) {
+        this.CaptureStates = states;
+        if (!isCapturing(states.Screen)) {
+            this.sharedPanelKey = null;
+        }
+        this.refreshCallDevices();
+        this.cdr.markForCheck();
+    }
+    /** The call's microphone (see {@link RealtimeSessionService.Microphone$}). */
+    microphone = REALTIME_MICROPHONE_NONE;
+    /** The microphone and the camera the user picked in the device menu, each while the call switches to it. */
+    switchingTo = { microphone: null, camera: null };
+    /**
+     * The microphones and cameras the composer's device menu offers: the call's microphones, and its cameras while the
+     * camera is open (a browser names cameras only once the user has allowed one).
+     */
+    CallDevices = [];
+    /** The microphone the device menu shows: the one being switched to, else the one in use. */
+    get SelectedMicrophoneID() {
+        return this.switchingTo.microphone ?? this.microphone.DeviceID ?? null;
+    }
+    /** The camera the device menu shows: the one being switched to, else the one in use. */
+    get SelectedCameraID() {
+        return this.switchingTo.camera ?? this.CaptureStates.Camera.DeviceID ?? null;
+    }
+    /**
+     * What the call says while no microphone works: the call lost its microphone (the one in use failed and so did the
+     * default, or the last one went away), so the agent hears nothing until the user picks one in the device menu. Shown
+     * under the banner for as long as that lasts. `null` while the microphone works, outside a call, and always in review.
+     */
+    get MicrophoneNotice() {
+        const failure = this.microphone.Failure;
+        if (!failure || this.IsReviewing) {
+            return null;
+        }
+        const line = failure === 'denied' ? MICROPHONE_NOTICE_TEXT.Blocked : MICROPHONE_NOTICE_TEXT.Lost;
+        return line.split('{Agent}').join(this.AgentName);
+    }
+    /**
+     * A microphone or camera picked in the composer's device menu: the session switches to it. The menu shows the pick
+     * while the switch runs, then the device in use: the new one, or the old one when the new one could not open. A pick of
+     * the device in use changes nothing. While no microphone works, the session opens the picked microphone, and the menu
+     * then shows it, or none when it could not open.
+     */
+    async OnDeviceSelected(selection) {
+        if (selection.Kind !== 'microphone' && selection.Kind !== 'camera') {
+            return;
+        }
+        const kind = selection.Kind;
+        const inUse = kind === 'microphone' ? this.microphone.DeviceID : this.CaptureStates.Camera.DeviceID;
+        if (selection.DeviceID === inUse && this.switchingTo[kind] === null) {
+            return;
+        }
+        this.ControlInvoked.emit('devices');
+        this.switchingTo = { ...this.switchingTo, [kind]: selection.DeviceID };
+        this.cdr.markForCheck();
+        try {
+            if (kind === 'microphone') {
+                await this.realtime.SwitchMicrophone(selection.DeviceID);
+            }
+            else {
+                await this.realtime.SwitchCamera(selection.DeviceID);
+            }
+        }
+        finally {
+            if (this.switchingTo[kind] === selection.DeviceID) {
+                this.switchingTo = { ...this.switchingTo, [kind]: null };
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    /** The microphone changed: the device menu follows it. */
+    onMicrophoneChanged(microphone) {
+        this.microphone = microphone;
+        this.refreshCallDevices();
+        this.cdr.markForCheck();
+    }
+    /** Lists the call's microphones and its cameras for the device menu, as a new list only when one of them changed. */
+    refreshCallDevices() {
+        const cameras = this.CaptureStates.Camera.Devices ?? [];
+        const devices = [...this.microphone.Devices, ...cameras];
+        const same = devices.length === this.CallDevices.length && devices.every((d, i) => d === this.CallDevices[i]);
+        if (!same) {
+            this.CallDevices = devices;
+        }
+    }
+    /**
+     * The user switched one of the agent's video sources on or off in the "agent can see" chip. The session
+     * applies it (and remembers it per channel) and tells the agent.
+     */
+    OnVideoSourceToggled(toggle) {
+        this.realtime.SetVideoSourceEnabled(toggle.SourceID, toggle.Enabled);
+    }
+    /**
+     * The user picked the video source the agent sees in the "agent can see" chip, or let the call choose again (`null`).
+     * The session's arbiter applies it and tells the agent.
+     */
+    OnVideoSourcePicked(sourceId) {
+        this.realtime.SelectVideoSource(sourceId);
+    }
+    /**
+     * The user moved to another channel's tab (or to a tab that is not a channel). When the model can watch only one
+     * video source, the channel the user is looking at is the one it sees.
+     */
+    OnActiveChannelChange(channelKey) {
+        this.realtime.SetFocusedChannel(channelKey);
+    }
+    ngAfterViewChecked() {
+        this.reportPresenterSlot();
+    }
+    /** Reports the agent's place in the call when the element changed (the chrome switched, or the call body changed). */
+    reportPresenterSlot() {
+        const element = this.presenterSlotRef?.nativeElement ?? null;
+        if (element === this.reportedPresenterSlot) {
+            return;
+        }
+        this.reportedPresenterSlot = element;
+        // The view was just checked and the stage binds the slot, so it hears about it in a fresh turn.
+        queueMicrotask(() => {
+            this.PresenterSlot = element;
+            this.cdr.markForCheck();
+        });
     }
     ngAfterViewInit() {
         this.viewReady = true;
@@ -728,7 +1306,9 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             // (the captions toggle, the hero's "Show the conversation", RevealText(), and SetCaptions()
             // all route through ShowCaptions). NOT the disclosure ratchet: a power user still opens to
             // the calm orb until they ask for text, matching the historical ShowHero = !ShowCaptions.
-            TextRevealed: this.ShowCaptions,
+            // While the agent's video presents, captions alone keep the hero (they run over the video);
+            // only asking for the conversation opens the thread.
+            TextRevealed: this.ShowCaptions && (this.conversationShown || !this.PresenterOnStage),
             DisclosureShowThread: disclosure.ShowThread,
             DisclosureShowComposer: disclosure.ShowComposer,
             DisclosureShowPanel: disclosure.ShowPanel,
@@ -756,6 +1336,8 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         if (next.chrome !== prevChrome) {
             this.ChromeChanged.emit(next.chrome);
         }
+        // The panel's area may have just hidden, or, while it waited for room, been hidden for another reason too.
+        this.resetPanelCollapseUnlessWaitingForRoom();
         this.cdr.markForCheck();
     }
     /** Connection lifecycle changed: store it, re-resolve chrome, and surface the public output. */
@@ -821,9 +1403,17 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     // adopt + persist on release. A bare CLICK cannot move the panel by construction
     // (width follows the pointer delta) and the click-vs-drag guard keeps it from being
     // adopted or persisted.
-    /** Whether the surface panel is collapsed to its slim strip (reported by the panel). */
+    /**
+     * Whether the surface panel is collapsed to its slim strip, as the panel reports it. A panel created again starts this
+     * way (the overlay binds the panel's `Collapsed`). Back to `false` while the panel's area is hidden for any reason but
+     * room, so the panel comes back expanded after Details, a channel on the stage or a review turning into a live call,
+     * and as the user left it when only the call's width hid it.
+     */
     PanelCollapsed = false;
-    /** Wide tier active (a content tab is focused) — drives the DEFAULT width only. */
+    /**
+     * Wide tier active (a content tab is focused) — drives the DEFAULT width only. The panel reports it when it flips; a
+     * panel created again also sets it from the tab it lands on.
+     */
     PanelWide = false;
     /** The user's explicit dragged width (persisted); null = follow the default tiers. */
     userPanelWidth = null;
@@ -856,6 +1446,19 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         this.PanelCollapsed = collapsed;
         this.cdr.markForCheck();
     }
+    /**
+     * Resets {@link PanelCollapsed} while the panel's area is hidden for any reason but room. Details, a channel taking the
+     * stage and a reviewed session turning into a live call hide the panel on purpose, and what brings it back asks to see
+     * it, so it comes back expanded (#5387). A call that only got too narrow asked for nothing, so the panel comes back as
+     * the user left it (#5433). Runs when the panel goes away and on every re-resolve, so a panel that waits for room and
+     * is then hidden on purpose (Details closed meanwhile) comes back expanded too. No binding reads PanelCollapsed while
+     * the area is hidden, so a change here trips no NG0100 check.
+     */
+    resetPanelCollapseUnlessWaitingForRoom() {
+        if (!this.ShowPanelArea && !this._ui.SurfacePanelWaitsForRoom) {
+            this.PanelCollapsed = false;
+        }
+    }
     /** Wide-tier flips only move the DEFAULT width — an explicit user width always wins. */
     OnPanelWideChanged(wide) {
         this.PanelWide = wide;
@@ -1083,6 +1686,10 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             return;
         }
         this.revealedChannelKeys.add(plugin.ChannelName);
+        if (plugin.ShowsAgentVideo) {
+            this.revealPresenter(plugin);
+            return;
+        }
         this.DetailsPeek = true; // the panel shows via the same on-demand mechanism Details uses
         // FIRST USE: a non-whiteboard channel was tab-less until now — register its tab
         // SYNCHRONOUSLY (before the reveal/focus below) so the channel exists to be revealed.
@@ -1104,6 +1711,16 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         // DetailsPeek flipped — surfacePanelEarned changed; re-resolve (marks for check).
         this.recomputeUi();
     }
+    /**
+     * The agent's video arrived: its channel's surface goes where its row places it (the stage is the agent's place in the
+     * call) and gets its tab, where it can be moved from, without opening the panel: the video shows in the call itself.
+     */
+    revealPresenter(plugin) {
+        if (plugin.HasSurface()) {
+            this.registerPluginChannelTab(plugin);
+        }
+        this.recomputeUi();
+    }
     /** Active$ edges: session start resets the volatile level; session end ratchets + persists. */
     onActiveChanged(active) {
         if (active && !this.prevActive) {
@@ -1224,8 +1841,9 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         // Density (and possibly DetailsPeek) changed — re-resolve (marks for check).
         this.recomputeUi();
     }
-    /** The hero's "Show the conversation" affordance — turns the text preference on. */
+    /** The hero's "Show the conversation" affordance — turns the text preference on, and opens the thread even over the agent's video. */
     OnTextReveal() {
+        this.conversationShown = true;
         this.OnCaptionsToggled(true);
         this.TextRevealed.emit();
         this.ControlInvoked.emit('reveal-text');
@@ -1244,11 +1862,14 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     }
     /** Maps the realtime state onto the hero orb's `data-state` (active turn-states only). */
     HeroOrbState(state) {
-        switch (state) {
-            case 'speaking': return 'speaking';
-            case 'thinking': return 'thinking';
-            default: return 'listening';
-        }
+        return AgentOrbStateFor(state);
+    }
+    /**
+     * Why the call ended, when its client said so (a relayed call that reached its time limit): the label the banner and the
+     * hero show in the `'error'` state in place of "Connection error"; `null` otherwise.
+     */
+    get CallEndLabel() {
+        return DescribeCallEnd(this.realtime.LastSessionError)?.Label ?? null;
     }
     /** Short first-person status line for the pure-audio hero. */
     HeroStateLabel(state) {
@@ -1257,7 +1878,7 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             case 'thinking': return `${this.AgentName} is working…`;
             case 'listening': return 'Listening';
             case 'connecting': return 'Connecting…';
-            case 'error': return 'Connection error';
+            case 'error': return this.CallEndLabel ?? 'Connection error';
             default: return 'On call';
         }
     }
@@ -1332,6 +1953,7 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     ngOnDestroy() {
         this.stopAudioVisualLoop();
         this.stopResizeObserver();
+        this.clearAvatarNoticeTimer();
         if (this.IsPanelResizing) {
             this.teardownPanelResize();
             this.IsPanelResizing = false;
@@ -1394,8 +2016,59 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         }
         this.cdr.markForCheck();
     }
-    /** Registers (or upgrades) one channel plugin's surface tab on the panel. */
+    /**
+     * The session's channel set changed: surfaces whose channel left are dropped (focus ends with a surface that leaves
+     * the stage this way, while the user's move stays saved) and the channels in play get their tabs.
+     */
+    onActiveChannelsChanged(channels) {
+        this.SurfaceStage.KeepOnly(channels);
+        this.registerChannelTabs(channels);
+        this.recomputeUi();
+    }
+    // ── Moving surfaces: "Move to…", saved per user ────────────────────────────
+    /** The user moved a channel's surface ("Move to…", "Bring it here"). */
+    OnMoveRequested(move) {
+        this.moveSurface(move);
+    }
+    /** The user put every surface back where its channel places it (and every picture-in-picture box back in its corner). */
+    OnResetLayout() {
+        this.SurfaceStage.ResetLayout();
+        this.PipRects = new Map();
+        this.layoutPrefs.SaveMoves(this.SurfaceStage.Moves);
+        this.layoutPrefs.SavePipRects(this.PipRects);
+        this.recomputeUi();
+    }
+    /** Where the user put each picture-in-picture box, by channel key, as fractions of the stage. */
+    PipRects = new Map();
+    /** The user's saved layout of the call's surfaces, per user, under the call's own keys. */
+    layoutPrefs = new MediaLayoutPrefs(() => UserInfoEngine.Instance, {
+        Moves: SURFACE_PLACEMENT_PREF_KEY,
+        PipRects: SURFACE_PIP_PREF_KEY,
+    });
+    /** The user moved or resized a picture-in-picture box: keep it and save it. */
+    OnPipRectChange(change) {
+        this.PipRects = RecordPipRect(this.PipRects, change.Key, change.Rect);
+        this.layoutPrefs.SavePipRects(this.PipRects);
+    }
+    /** Moves a surface, saves the layout, and re-resolves the UI (a surface on the stage is the focus layout). */
+    moveSurface(move) {
+        if (!this.SurfaceStage.Move(move.Key, move.Placement)) {
+            return;
+        }
+        this.layoutPrefs.SaveMoves(this.SurfaceStage.Moves);
+        this.recomputeUi();
+    }
+    /**
+     * Starts from the user's saved layout and picture-in-picture boxes. While `UserInfoEngine` is not configured (plain
+     * node tests, early bootstrap), nothing is saved and every surface starts where its channel places it.
+     */
+    loadPlacementPref() {
+        this.SurfaceStage.LoadMoves(this.layoutPrefs.LoadMoves());
+        this.PipRects = this.layoutPrefs.LoadPipRects();
+    }
+    /** Registers (or upgrades) one channel plugin's surface tab on the panel, and its surface on the stage. */
     registerPluginChannelTab(plugin) {
+        this.SurfaceStage.Register(plugin);
         this.RegisterChannelTab({
             Key: plugin.ChannelName,
             Title: plugin.TabTitle,
@@ -1445,6 +2118,9 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         if (on) {
             this.Disclosure.Raise('text'); // emits Changed$ → recomputeUi()
         }
+        else {
+            this.conversationShown = false;
+        }
         this.persistCaptionsPref();
         this.ControlInvoked.emit('captions');
         // ShowCaptions feeds the resolver's `textRevealed` signal (buildSignals), so BOTH directions must
@@ -1492,7 +2168,7 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
      */
     OnStartLive() {
         const review = this._reviewData;
-        if (!review) {
+        if (!review || !this.AllowStartLive) {
             return;
         }
         this.pendingLiveContinuation = true;
@@ -1679,25 +2355,33 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         this.NavigateRequest.emit({ EntityName: entityName, RecordID: recordId });
     }
     // ── Focus layout + pill ────────────────────────────────────────────────────
-    /** A channel requested (or released) the focus layout via its host context. */
+    /**
+     * A channel asked for the focus layout via its host context (the whiteboard's "Move to stage"): its surface moves to
+     * the stage, or, when released, back where its channel places it.
+     */
     onChannelFocus(channel, focused) {
-        this.ChannelFocusMode = focused;
-        this.focusChannel = focused ? channel : null;
-        // channelFocus drives the resolver (hides panel + strip) — re-resolve (marks for check).
-        this.recomputeUi();
+        const key = channel.ChannelName;
+        if (focused) {
+            this.moveSurface({ Key: key, Placement: 'stage' });
+        }
+        else if (this.SurfaceStage.StageKey === key) {
+            this.moveSurface({ Key: key, Placement: this.SurfaceStage.OffStagePlacement(key) });
+        }
     }
     /** Focus pill: toggle the mic mute (routes through the overlay's single mute path). */
     OnFocusPillMute() {
         this.ToggleMute();
     }
-    /** Focus pill: leave focus mode (show the thread column again). */
+    /** Focus pill: leave focus mode: the surface on the stage goes back where its channel places it (show the thread column again). */
     OnFocusPillExit() {
-        // Route through the focus-holding channel so ITS surface toggle stays in sync — it
-        // re-emits SetFocusMode(false) → onChannelFocus. Defensively clear the layout flag
-        // too (idempotent), covering channels whose surface isn't instantiated.
-        this.focusChannel?.RequestFocusExit();
-        this.ChannelFocusMode = false;
-        this.focusChannel = null;
+        const key = this.SurfaceStage.StageKey;
+        // Route through the channel on the stage so ITS surface toggle stays in sync — it may
+        // re-emit SetFocusMode(false) → onChannelFocus. Move it here too (idempotent), covering
+        // channels that don't.
+        this.StagePlugin?.RequestFocusExit();
+        if (key) {
+            this.moveSurface({ Key: key, Placement: this.SurfaceStage.OffStagePlacement(key) });
+        }
     }
     /** Focus pill: end the call (mirrors the controls row's End button). */
     async OnFocusPillEnd() {
@@ -1838,17 +2522,18 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
     }
     static ɵfac = function RealtimeSessionOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeSessionOverlayComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeSessionOverlayComponent, selectors: [["mj-realtime-session-overlay"]], viewQuery: function RealtimeSessionOverlayComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(RealtimeSurfaceTabsComponent, 5)(RealtimeComposerComponent, 5)(_c0, 5)(_c1, 5);
+            i0.ɵɵviewQuery(RealtimeSurfaceTabsComponent, 5)(RealtimeComposerComponent, 5)(_c0, 5)(_c1, 5)(_c2, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.surfaceTabsRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.composer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reviewBoardTpl = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.recordingTpl = _t.first);
+            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", 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" }, 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", ""], ["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", "ModelName", "DevMode", "SessionID", "ReviewMode", "ReviewStartedAt", "ReviewClosedAt", "ReviewCloseReason", "ShowGear", "ShowDensityPicker", "ShowMinimize", "Density"], ["role", "status", "aria-live", "polite", 1, "banner-live-note"], [1, "call-body"], [1, "call-connecting"], ["role", "status", "aria-live", "polite", 1, "hero"], [3, "State", "AgentName", "UserName", "ShowCaptions", "DevMode"], ["role", "status", "aria-label", "Live call (board focus)", 1, "board-focus-pill"], ["aria-hidden", "true", 1, "fa-solid", "fa-comment-dots"], ["text", "Connecting to the live session\u2026", "size", "medium"], [1, "hero__stage"], ["aria-hidden", "true", 1, "hero__ring"], ["aria-hidden", "true", 1, "hero__ring", "hero__ring--2"], ["aria-hidden", "true", 1, "hero__ring", "hero__ring--3"], ["aria-hidden", "true", 1, "hero__orb"], ["aria-hidden", "true", 1, "hero__eq"], [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, "OpenChanged", "CaptionsToggled", "DetailsToggled", "MuteChanged", "EndRequested", "Open", "Compact", "CaptionsOn", "IsMuted", "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", "State", "DevMode", "CurrentUser", "EnvironmentID", "ShowActivityTab", "ExtraArtifacts", "Fill"], ["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"], ["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"], ["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"], [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, 12, 30, "div", 2);
+        } }, 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);
             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) {
@@ -1856,12 +2541,22 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             i0.ɵɵconditional((tmp_2_0 = i0.ɵɵpipeBind1(1, 1, ctx.ConnectionState$)) ? 0 : -1, tmp_2_0);
         } }, dependencies: [CommonModule,
             SharedGenericModule, i1.LoadingComponent, RealtimeAgentBannerComponent,
+            RealtimeAgentOrbComponent,
+            RealtimeCameraCheckCardComponent,
             RealtimeSessionThreadComponent,
             RealtimeChannelStripComponent,
+            RealtimePerceptionChipComponent,
             RealtimeComposerComponent,
             RealtimeSurfaceTabsComponent,
+            RealtimeChannelPaneComponent,
+            MediaMoveMenuComponent,
+            MediaStageComponent,
+            MediaStageSurfaceDirective,
+            MediaStagePipActionsDirective,
+            SharePanelDirective,
             RealtimeWhiteboardBoardComponent,
-            MJStorageMediaPlayerComponent, i2.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: contents;\n}\n\n\n\n\n\n.call-overlay[_ngcontent-%COMP%] {\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\n\n.call-overlay--hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n\n.call-main[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.call-body[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n\n\n\n\n.call-body--hero[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n.hero__stage[_ngcontent-%COMP%] {\n  position: relative;\n  width: 220px;\n  height: 220px;\n  display: grid;\n  place-items: center;\n  margin-bottom: 4px;\n}\n\n.hero__orb[_ngcontent-%COMP%] {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  position: relative;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.hero__orb[data-state='speaking'][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_hero-orb-bob 0.9s ease-in-out infinite;\n}\n.hero__orb[data-state='listening'][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.hero__orb[data-state='thinking'][_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 40px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n@keyframes _ngcontent-%COMP%_hero-orb-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-4px); }\n}\n\n.hero__ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n  opacity: 0;\n  animation: _ngcontent-%COMP%_hero-wave 2.7s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;\n}\n.hero__ring--2[_ngcontent-%COMP%] { animation-delay: 0.9s; }\n.hero__ring--3[_ngcontent-%COMP%] { animation-delay: 1.8s; }\n@keyframes _ngcontent-%COMP%_hero-wave {\n  0% { transform: scale(1); opacity: 0.5; }\n  70% { opacity: 0.1; }\n  100% { transform: scale(1.85); opacity: 0; }\n}\n\n.hero__eq[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(1) { animation-delay: 0s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(9) { animation-delay: 0.03s; }\n@keyframes _ngcontent-%COMP%_hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n.hero__name[_ngcontent-%COMP%] {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__orb[_ngcontent-%COMP%] {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.18));\n  transition: transform 70ms linear;\n}\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__ring[_ngcontent-%COMP%] {\n  opacity: calc(var(--voice-out, 0) * 0.55);\n  animation-duration: 2.1s;\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_ngcontent-%COMP%]   .hero__orb[_ngcontent-%COMP%] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'][_ngcontent-%COMP%]   .hero__ring[_ngcontent-%COMP%] {\n  border-color: color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n}\n\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n\n.hero__reveal[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.banner-live-note[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.banner-live-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n.call-overlay.board-focus[_ngcontent-%COMP%]   .call-main[_ngcontent-%COMP%] {\n  display: none;\n}\n.call-overlay.board-focus[_ngcontent-%COMP%]   mj-realtime-surface-tabs[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n\n.board-focus-pill[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb[_ngcontent-%COMP%] {\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'][_ngcontent-%COMP%], \n.board-focus-pill__orb[data-state='listening'][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'][_ngcontent-%COMP%] {\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 _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n\n\n.call-overlay--review[_ngcontent-%COMP%] {\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\n\n.review-board-host[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n\n\n.review-recording-host[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host[_ngcontent-%COMP%]   mj-realtime-evidence-playback[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\n\n.call-resizer[_ngcontent-%COMP%] {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer[_ngcontent-%COMP%]:hover, \n.call-resizer--active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n\n\n\n\n.call-panel[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  \n\n  animation: _ngcontent-%COMP%_panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n\n.call-overlay.board-focus[_ngcontent-%COMP%]   .call-panel[_ngcontent-%COMP%] {\n  flex: 1;\n}"] });
+            MJStorageMediaPlayerComponent,
+            MJAlertComponent, i2.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: contents;\n}\n\n\n\n\n\n.call-overlay[_ngcontent-%COMP%] {\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\n\n.call-overlay--hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n\n.call-main[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 420px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.call-controls[_ngcontent-%COMP%] {\n  flex: none;\n}\n\n.call-body[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n.call-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 3px;\n}\n\n.call-connecting[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 160px;\n}\n\n\n\n\n\n.call-body--hero[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n.hero[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  animation: _ngcontent-%COMP%_hero-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_hero-in {\n  from { opacity: 0; transform: scale(0.94); }\n  to { opacity: 1; transform: scale(1); }\n}\n\n.hero__orb[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n}\n\n.hero__eq[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 30px;\n  margin-bottom: 6px;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_hero-eq 1.05s ease-in-out infinite;\n}\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(1) { animation-delay: 0s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(2) { animation-delay: 0.14s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(3) { animation-delay: 0.28s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(4) { animation-delay: 0.07s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(5) { animation-delay: 0.21s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(6) { animation-delay: 0.35s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(7) { animation-delay: 0.1s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(8) { animation-delay: 0.24s; }\n.hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:nth-child(9) { animation-delay: 0.03s; }\n@keyframes _ngcontent-%COMP%_hero-eq {\n  0%, 100% { height: 7px; opacity: 0.6; }\n  50% { height: 28px; opacity: 1; }\n}\n\n\n\n.hero--presenting[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n}\n.hero__presenter[_ngcontent-%COMP%], \n.call-presenter[_ngcontent-%COMP%] {\n  display: none;\n}\n.hero__presenter--on[_ngcontent-%COMP%] {\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\n\n.hero__caption[_ngcontent-%COMP%] {\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\n\n.hero__caption-window[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n@container (max-height: 240px) {\n  .hero__caption[_ngcontent-%COMP%] {\n    bottom: 22%;\n    padding: 3px 6px;\n    font-size: 0.75rem;\n  }\n  .hero__caption-window[_ngcontent-%COMP%] {\n    max-height: 1.4em;\n  }\n}\n\n\n.call-presenter--on[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 19px;\n  font-weight: 800;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n.hero__sub[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  color: var(--mj-text-muted);\n}\n\n.hero__sr[_ngcontent-%COMP%] {\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\n\n\n\n\n\n\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  animation: none;\n  transition: height 70ms linear, opacity 120ms linear;\n}\n.call-overlay[data-audio-live='true'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]: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'][_ngcontent-%COMP%]   .hero__eq[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n\n\n.hero__reveal[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.banner-live-note[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.banner-live-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 3px;\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_overlay-note-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n.call-microphone-notice[_ngcontent-%COMP%], \n.call-avatar-notice[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin: var(--mj-space-2) var(--mj-space-5) 0;\n}\n\n\n\n\n.call-overlay.board-focus[_ngcontent-%COMP%]   .call-main[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n\n\n\n.call-stage[_ngcontent-%COMP%] {\n  z-index: 1;\n}\n\n\n.stage-frame[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n\n.stage-presenter-move[_ngcontent-%COMP%] {\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\n.board-focus-pill[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_overlay-note-in 220ms ease;\n}\n.board-focus-pill__orb[_ngcontent-%COMP%] {\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'][_ngcontent-%COMP%], \n.board-focus-pill__orb[data-state='listening'][_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_board-pill-pulse 1.6s ease-in-out infinite;\n}\n.board-focus-pill__orb[data-state='error'][_ngcontent-%COMP%] {\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 _ngcontent-%COMP%_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[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.board-focus-pill__name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n.board-focus-pill__btn--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n}\n\n\n\n.call-overlay--review[_ngcontent-%COMP%] {\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\n\n.review-board-host[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n\n\n.review-recording-host[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.review-recording-host[_ngcontent-%COMP%]   mj-realtime-evidence-playback[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n}\n\n\n\n\n.call-resizer[_ngcontent-%COMP%] {\n  flex: 0 0 7px;\n  width: 7px;\n  cursor: col-resize;\n  background: transparent;\n  transition: background 140ms ease;\n}\n.call-resizer[_ngcontent-%COMP%]:hover, \n.call-resizer--active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 26%, transparent);\n}\n\n\n\n\n.call-panel[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  display: flex;\n  overflow: hidden;\n  \n\n  animation: _ngcontent-%COMP%_panel-in 420ms cubic-bezier(0.25, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_panel-in {\n  from { opacity: 0; transform: translateX(48px); }\n  to { opacity: 1; transform: translateX(0); }\n}\n.call-panel[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeSessionOverlayComponent, [{
         type: Component,
@@ -1869,13 +2564,23 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
                     CommonModule,
                     SharedGenericModule,
                     RealtimeAgentBannerComponent,
+                    RealtimeAgentOrbComponent,
+                    RealtimeCameraCheckCardComponent,
                     RealtimeSessionThreadComponent,
                     RealtimeChannelStripComponent,
+                    RealtimePerceptionChipComponent,
                     RealtimeComposerComponent,
                     RealtimeSurfaceTabsComponent,
+                    RealtimeChannelPaneComponent,
+                    MediaMoveMenuComponent,
+                    MediaStageComponent,
+                    MediaStageSurfaceDirective,
+                    MediaStagePipActionsDirective,
+                    SharePanelDirective,
                     RealtimeWhiteboardBoardComponent,
-                    MJStorageMediaPlayerComponent
-                ], 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        [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        [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      <!-- 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      <div class=\"call-body\" [class.call-body--hero]=\"ShowHero && state !== 'connecting'\">\n        @if (!IsReviewing && state === 'connecting') {\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\" [attr.data-state]=\"state\" role=\"status\" aria-live=\"polite\">\n            <div class=\"hero__stage\">\n              <span class=\"hero__ring\" aria-hidden=\"true\"></span>\n              <span class=\"hero__ring hero__ring--2\" aria-hidden=\"true\"></span>\n              <span class=\"hero__ring hero__ring--3\" aria-hidden=\"true\"></span>\n              <div class=\"hero__orb\" [attr.data-state]=\"HeroOrbState(state)\" aria-hidden=\"true\"></div>\n            </div>\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            <div class=\"hero__name\">{{ AgentName }}</div>\n            <div class=\"hero__sub\">{{ HeroStateLabel(state) }}</div>\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      @if (!IsReviewing) {\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          [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\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]=\"ChannelFocusMode ? null : 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          [Fill]=\"ChannelFocusMode\"\n          (OpenRunRequested)=\"OnOpenRunRequested($event)\"\n          (CollapsedChange)=\"OnPanelCollapsedChange($event)\"\n          (WideChanged)=\"OnPanelWideChanged($event)\">\n        </mj-realtime-surface-tabs>\n      </div>\n    }\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        <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  </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.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.hero__stage {\n  position: relative;\n  width: 220px;\n  height: 220px;\n  display: grid;\n  place-items: center;\n  margin-bottom: 4px;\n}\n/* The hero orb mirrors the app-bar orb's visual language at stage scale. */\n.hero__orb {\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  position: relative;\n  background: radial-gradient(circle at 35% 30%,\n    var(--mj-brand-accent, var(--mj-brand-primary)),\n    var(--mj-brand-primary) 60%,\n    var(--mj-brand-primary-active, var(--mj-brand-primary)));\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-brand-primary) 45%, transparent);\n}\n.hero__orb[data-state='speaking'] {\n  animation: hero-orb-bob 0.9s ease-in-out infinite;\n}\n.hero__orb[data-state='listening'] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.hero__orb[data-state='thinking'] {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-warning) 14%, transparent),\n    0 0 40px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n@keyframes hero-orb-bob {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-4px); }\n}\n/* Expanding sound-wave rings (staggered). */\n.hero__ring {\n  position: absolute;\n  width: 120px;\n  height: 120px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 55%, transparent);\n  opacity: 0;\n  animation: hero-wave 2.7s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;\n}\n.hero__ring--2 { animation-delay: 0.9s; }\n.hero__ring--3 { animation-delay: 1.8s; }\n@keyframes hero-wave {\n  0% { transform: scale(1); opacity: 0.5; }\n  70% { opacity: 0.1; }\n  100% { transform: scale(1.85); opacity: 0; }\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.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/* ---------- AUDIO-REACTIVE MODE (data-audio-live, set by the rAF meter loop) ----------\n   With real audio metering the orb stops acting and starts REACTING: scale + glow follow\n   the smoothed output envelope (--voice-out) like a speaker cone, the EQ renders the true\n   spectrum (--eq-1..9), and [data-voice-dir] colors the visuals by who is speaking\n   (agent = brand, user = green). Without metering (driver attached no meters) the\n   attribute stays 'false' and the turn-state keyframe animations above stay in charge. */\n.call-overlay[data-audio-live='true'] .hero__orb {\n  animation: none;\n  transform: scale(calc(1 + var(--voice-out, 0) * 0.18));\n  transition: transform 70ms linear;\n}\n.call-overlay[data-audio-live='true'] .hero__ring {\n  opacity: calc(var(--voice-out, 0) * 0.55);\n  animation-duration: 2.1s;\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__orb {\n  box-shadow:\n    0 0 0 8px color-mix(in srgb, var(--mj-status-success) 16%, transparent),\n    0 0 48px color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  background: radial-gradient(circle at 35% 30%,\n    color-mix(in srgb, var(--mj-status-success) 60%, white), var(--mj-brand-primary) 65%);\n}\n.call-overlay[data-audio-live='true'][data-voice-dir='user'] .hero__ring {\n  border-color: color-mix(in srgb, var(--mj-status-success) 55%, transparent);\n}\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/* ---------- FOCUS-BOARD mode (whiteboard \"Focus board\" toggle) ----------\n   The main call column collapses away entirely and the surface panel (whiteboard tab)\n   fills the overlay; a compact floating call pill keeps the live call reachable. */\n.call-overlay.board-focus .call-main {\n  display: none;\n}\n.call-overlay.board-focus mj-realtime-surface-tabs {\n  flex: 1;\n  min-width: 0;\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/* Board-focus fill: the panel owns the whole overlay (the main column is hidden). */\n.call-overlay.board-focus .call-panel {\n  flex: 1;\n}\n"] }]
+                    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"] }]
     }], () => [], { Hidden: [{
             type: Input
         }], AgentName: [{
@@ -1884,6 +2589,8 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             type: Input
         }], EnvironmentID: [{
             type: Input
+        }], AvatarNoticeLabels: [{
+            type: Input
         }], Chrome: [{
             type: Input
         }], ConsoleBreakpointPx: [{
@@ -1916,6 +2623,8 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
             type: Input
         }], ReviewData: [{
             type: Input
+        }], AllowStartLive: [{
+            type: Input
         }], Ended: [{
             type: Output
         }], NavigateRequest: [{
@@ -1952,9 +2661,16 @@ export class RealtimeSessionOverlayComponent extends BaseAngularComponent {
         }], recordingTpl: [{
             type: ViewChild,
             args: ['recordingTpl']
+        }], presenterSlotRef: [{
+            type: ViewChild,
+            args: ['presenterSlot']
         }], OnDocumentKeydown: [{
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionOverlayComponent, { className: "RealtimeSessionOverlayComponent", filePath: "src/lib/components/realtime/realtime-session-overlay.component.ts", lineNumber: 129 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeSessionOverlayComponent, { className: "RealtimeSessionOverlayComponent", filePath: "src/lib/components/realtime/realtime-session-overlay.component.ts", lineNumber: 189 }); })();
+/** Whether a capture is on or on its way, as the composer's buttons show it. */
+function isCapturing(capture) {
+    return capture.Status === 'on' || capture.Status === 'starting';
+}
 //# sourceMappingURL=realtime-session-overlay.component.js.map