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

package/dist/lib/components/realtime/realtime-call-failure-notice.d.ts

@@ -0,0 +1,13 @@
+import type { RealtimeClientError } from '@memberjunction/ai-realtime-client';
+/**
+ * The sentence a host shows when a voice call ends over a failure (`SessionEnded$` reason `'error'`).
+ *
+ * The runtime ends such a call itself, so the call surface closes with it; without this notice the user
+ * sees the call vanish with no word of why. A call that said why it ended (a time limit) gets its own
+ * words; a start that failed and a call that dropped get one sentence each.
+ *
+ * @param lastStartError The runtime's `LastStartError`: set only when the start itself failed.
+ * @param lastSessionError The runtime's `LastSessionError`: the client's fatal error, when it reported one.
+ */
+export declare function DescribeCallFailureNotice(lastStartError: Error | null, lastSessionError: RealtimeClientError | null): string;
+//# sourceMappingURL=realtime-call-failure-notice.d.ts.map

package/dist/lib/components/realtime/realtime-call-failure-notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-call-failure-notice.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-call-failure-notice.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAG9E;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,cAAc,EAAE,KAAK,GAAG,IAAI,EAAE,gBAAgB,EAAE,mBAAmB,GAAG,IAAI,GAAG,MAAM,CAQ5H"}

package/dist/lib/components/realtime/realtime-call-failure-notice.js

@@ -0,0 +1,21 @@
+import { DescribeCallEnd } from '@memberjunction/realtime-runtime';
+/**
+ * The sentence a host shows when a voice call ends over a failure (`SessionEnded$` reason `'error'`).
+ *
+ * The runtime ends such a call itself, so the call surface closes with it; without this notice the user
+ * sees the call vanish with no word of why. A call that said why it ended (a time limit) gets its own
+ * words; a start that failed and a call that dropped get one sentence each.
+ *
+ * @param lastStartError The runtime's `LastStartError`: set only when the start itself failed.
+ * @param lastSessionError The runtime's `LastSessionError`: the client's fatal error, when it reported one.
+ */
+export function DescribeCallFailureNotice(lastStartError, lastSessionError) {
+    const described = DescribeCallEnd(lastSessionError);
+    if (described) {
+        return described.Message;
+    }
+    return lastStartError
+        ? 'The voice call could not start. Please try again.'
+        : 'The voice call was disconnected. Start a new call to keep talking.';
+}
+//# sourceMappingURL=realtime-call-failure-notice.js.map

package/dist/lib/components/realtime/realtime-call-failure-notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-call-failure-notice.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-call-failure-notice.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEnE;;;;;;;;;GASG;AACH,MAAM,UAAU,yBAAyB,CAAC,cAA4B,EAAE,gBAA4C;IAChH,MAAM,SAAS,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACpD,IAAI,SAAS,EAAE,CAAC;QACZ,OAAO,SAAS,CAAC,OAAO,CAAC;IAC7B,CAAC;IACD,OAAO,cAAc;QACjB,CAAC,CAAC,mDAAmD;QACrD,CAAC,CAAC,oEAAoE,CAAC;AAC/E,CAAC","sourcesContent":["import type { RealtimeClientError } from '@memberjunction/ai-realtime-client';\nimport { DescribeCallEnd } from '@memberjunction/realtime-runtime';\n\n/**\n * The sentence a host shows when a voice call ends over a failure (`SessionEnded$` reason `'error'`).\n *\n * The runtime ends such a call itself, so the call surface closes with it; without this notice the user\n * sees the call vanish with no word of why. A call that said why it ended (a time limit) gets its own\n * words; a start that failed and a call that dropped get one sentence each.\n *\n * @param lastStartError The runtime's `LastStartError`: set only when the start itself failed.\n * @param lastSessionError The runtime's `LastSessionError`: the client's fatal error, when it reported one.\n */\nexport function DescribeCallFailureNotice(lastStartError: Error | null, lastSessionError: RealtimeClientError | null): string {\n    const described = DescribeCallEnd(lastSessionError);\n    if (described) {\n        return described.Message;\n    }\n    return lastStartError\n        ? 'The voice call could not start. Please try again.'\n        : 'The voice call was disconnected. Start a new call to keep talking.';\n}\n"]}

package/dist/lib/components/realtime/realtime-composer.component.js

@@ -7,162 +7,174 @@ import { RealtimeSessionService } from '../../services/realtime-session.service'
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 const _c0 = ["dockInput"];
-function RealtimeComposerComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.DetailsToggled.emit(); return i0.ɵɵresetView(ctx_r2.MoreOpen = false); });
-    i0.ɵɵelement(1, "i", 17);
+function RealtimeComposerComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-media-controls", 17);
+    i0.ɵɵlistener("CameraToggled", function RealtimeComposerComponent_Conditional_0_Conditional_6_Template_mj_media_controls_CameraToggled_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.CameraToggled.emit($event); return i0.ɵɵresetView(ctx_r1.MoreOpen = false); })("ShareRequested", function RealtimeComposerComponent_Conditional_0_Conditional_6_Template_mj_media_controls_ShareRequested_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.ShareRequested.emit($event); return i0.ɵɵresetView(ctx_r1.MoreOpen = false); })("StopShareRequested", function RealtimeComposerComponent_Conditional_0_Conditional_6_Template_mj_media_controls_StopShareRequested_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StopShareRequested.emit()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ShowMicrophone", false)("ShowCamera", ctx_r1.ShowCamera && !ctx_r1.CameraOn)("ShowShare", ctx_r1.ShowShare && !ctx_r1.Sharing)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("SharePanels", ctx_r1.SharePanels)("CameraOptional", true);
+} }
+function RealtimeComposerComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.DetailsToggled.emit(); return i0.ɵɵresetView(ctx_r1.MoreOpen = false); });
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "small");
     i0.ɵɵtext(3, "Details");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("lean-sheet__btn--on", ctx_r2.DetailsOn);
-    i0.ɵɵproperty("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.DetailsOn);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("lean-sheet__btn--on", ctx_r1.DetailsOn);
+    i0.ɵɵproperty("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.DetailsOn);
 } }
 function RealtimeComposerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 4)(2, "div", 5);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_div_click_2_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵconditionalCreate(3, RealtimeComposerComponent_Conditional_0_Conditional_3_Template, 4, 4, "button", 6);
-    i0.ɵɵelementStart(4, "button", 7);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.OpenChanged.emit(true); return i0.ɵɵresetView(ctx_r2.MoreOpen = false); });
-    i0.ɵɵelement(5, "i", 8);
-    i0.ɵɵelementStart(6, "small");
-    i0.ɵɵtext(7, "Type");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "button", 9);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_8_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMore($event)); });
-    i0.ɵɵelement(9, "i", 10);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "button", 11);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
-    i0.ɵɵelement(11, "i", 12);
+    i0.ɵɵelementStart(0, "div", 1)(1, "mj-media-controls", 4);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_MicrophoneToggled_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_CameraToggled_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_ShareRequested_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_StopShareRequested_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_DeviceSelected_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DeviceSelected.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "mj-media-controls", 13);
-    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_MicrophoneToggled_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_CameraToggled_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_ShareRequested_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_StopShareRequested_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_DeviceSelected_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DeviceSelected.emit($event)); });
+    i0.ɵɵelementStart(2, "button", 5);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(3, "i", 6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 14);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(14, "i", 15);
+    i0.ɵɵelementStart(4, "div", 7)(5, "div", 8);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_div_click_5_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_0_Conditional_6_Template, 1, 7, "mj-media-controls", 9);
+    i0.ɵɵconditionalCreate(7, RealtimeComposerComponent_Conditional_0_Conditional_7_Template, 4, 4, "button", 10);
+    i0.ɵɵelementStart(8, "button", 11);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.OpenChanged.emit(true); return i0.ɵɵresetView(ctx_r1.MoreOpen = false); });
+    i0.ɵɵelement(9, "i", 12);
+    i0.ɵɵelementStart(10, "small");
+    i0.ɵɵtext(11, "Type");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "button", 13);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMore($event)); });
+    i0.ɵɵelement(13, "i", 14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "button", 15);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
+    i0.ɵɵelement(15, "i", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("lean-more--open", ctx_r2.MoreOpen);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.ShowDetails ? 3 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("Variant", ctx_r2.MoreOpen ? "primary" : "secondary");
-    i0.ɵɵattribute("aria-expanded", ctx_r2.MoreOpen);
+    i0.ɵɵproperty("MicrophoneOn", !ctx_r1.IsMuted)("ShowCamera", ctx_r1.ShowCamera && ctx_r1.CameraOn)("ShowShare", ctx_r1.ShowShare && ctx_r1.Sharing)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("SharePanels", ctx_r1.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r1.Devices)("SelectedMicrophoneID", ctx_r1.SelectedMicrophoneID)("SelectedCameraID", ctx_r1.SelectedCameraID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r1.CaptionsOn)("title", ctx_r1.CaptionsTitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
+    i0.ɵɵclassProp("lean-more--open", ctx_r1.MoreOpen);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("SharePanels", ctx_r2.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r2.Devices)("SelectedMicrophoneID", ctx_r2.SelectedMicrophoneID)("SelectedCameraID", ctx_r2.SelectedCameraID);
+    i0.ɵɵconditional(ctx_r1.ShowCamera && !ctx_r1.CameraOn || ctx_r1.ShowShare && !ctx_r1.Sharing ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowDetails ? 7 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("Variant", ctx_r1.MoreOpen ? "primary" : "secondary");
+    i0.ɵɵattribute("aria-expanded", ctx_r1.MoreOpen);
 } }
 function RealtimeComposerComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "button", 24);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
-    i0.ɵɵelement(2, "i", 17);
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "button", 26);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
+    i0.ɵɵelement(2, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵelementStart(3, "span", 23);
     i0.ɵɵtext(4, "Details");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.DetailsOn)("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r1.DetailsOn)("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
 } }
 function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "mj-media-controls", 18);
-    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_MicrophoneToggled_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_CameraToggled_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_ShareRequested_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_StopShareRequested_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_DeviceSelected_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DeviceSelected.emit($event)); });
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "mj-media-controls", 20);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_MicrophoneToggled_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_CameraToggled_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_ShareRequested_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_StopShareRequested_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_DeviceSelected_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DeviceSelected.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 19)(3, "button", 20);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
-    i0.ɵɵelement(4, "i", 12);
+    i0.ɵɵelementStart(2, "div", 21)(3, "button", 22);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(4, "i", 6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 21);
+    i0.ɵɵelementStart(5, "span", 23);
     i0.ɵɵtext(6, "Captions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, RealtimeComposerComponent_Conditional_1_Conditional_7_Template, 5, 3, "div", 19);
-    i0.ɵɵelementStart(8, "div", 19)(9, "button", 22);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(true)); });
-    i0.ɵɵelement(10, "i", 8);
+    i0.ɵɵconditionalCreate(7, RealtimeComposerComponent_Conditional_1_Conditional_7_Template, 5, 3, "div", 21);
+    i0.ɵɵelementStart(8, "div", 21)(9, "button", 24);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(true)); });
+    i0.ɵɵelement(10, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 21);
+    i0.ɵɵelementStart(11, "span", 23);
     i0.ɵɵtext(12, "Type");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 19)(14, "button", 14);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(15, "i", 15);
+    i0.ɵɵelementStart(13, "div", 21)(14, "button", 15);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
+    i0.ɵɵelement(15, "i", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 23);
+    i0.ɵɵelementStart(16, "span", 25);
     i0.ɵɵtext(17, "End call");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ShowLabels", true)("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("SharePanels", ctx_r2.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r2.Devices)("SelectedMicrophoneID", ctx_r2.SelectedMicrophoneID)("SelectedCameraID", ctx_r2.SelectedCameraID);
+    i0.ɵɵproperty("ShowLabels", true)("MicrophoneOn", !ctx_r1.IsMuted)("ShowCamera", ctx_r1.ShowCamera)("ShowShare", ctx_r1.ShowShare)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("SharePanels", ctx_r1.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r1.Devices)("SelectedMicrophoneID", ctx_r1.SelectedMicrophoneID)("SelectedCameraID", ctx_r1.SelectedCameraID);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r1.CaptionsOn)("title", ctx_r1.CaptionsTitle);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.ShowDetails ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.ShowDetails ? 7 : -1);
 } }
 function RealtimeComposerComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
-    i0.ɵɵelement(1, "i", 17);
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.DetailsOn)("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Show the session panels");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r1.DetailsOn)("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Show the session panels");
 } }
 function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 25)(2, "mj-media-controls", 26);
-    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_MicrophoneToggled_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_CameraToggled_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_ShareRequested_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_StopShareRequested_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); });
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 27)(2, "mj-media-controls", 28);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_MicrophoneToggled_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_CameraToggled_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_ShareRequested_2_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_StopShareRequested_2_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StopShareRequested.emit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 27);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
-    i0.ɵɵelement(4, "i", 12);
+    i0.ɵɵelementStart(3, "button", 29);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(4, "i", 6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, RealtimeComposerComponent_Conditional_2_Conditional_5_Template, 2, 3, "button", 28);
+    i0.ɵɵconditionalCreate(5, RealtimeComposerComponent_Conditional_2_Conditional_5_Template, 2, 3, "button", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 29)(7, "textarea", 30, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_textarea_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Draft, $event) || (ctx_r2.Draft = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_textarea_keydown_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); })("input", function RealtimeComposerComponent_Conditional_2_Template_textarea_input_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoResize()); });
+    i0.ɵɵelementStart(6, "div", 31)(7, "textarea", 32, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_textarea_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Draft, $event) || (ctx_r1.Draft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_textarea_keydown_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnKeydown($event)); })("input", function RealtimeComposerComponent_Conditional_2_Template_textarea_input_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.AutoResize()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 31);
+    i0.ɵɵelementStart(9, "span", 33);
     i0.ɵɵtext(10, "\u21B5 send");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 32);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Send()); });
-    i0.ɵɵelement(12, "i", 33);
+    i0.ɵɵelementStart(11, "button", 34);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Send()); });
+    i0.ɵɵelement(12, "i", 35);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "button", 34);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(false)); });
-    i0.ɵɵelement(14, "i", 35);
+    i0.ɵɵelementStart(13, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(false)); });
+    i0.ɵɵelement(14, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "button", 36);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(16, "i", 15);
+    i0.ɵɵelementStart(15, "button", 38);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
+    i0.ɵɵelement(16, "i", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("ShowShareMenu", false)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("CameraOptional", true);
+    i0.ɵɵproperty("MicrophoneOn", !ctx_r1.IsMuted)("ShowCamera", ctx_r1.ShowCamera)("ShowShare", ctx_r1.ShowShare)("ShowShareMenu", false)("CameraOn", ctx_r1.CameraOn)("Sharing", ctx_r1.Sharing)("CameraOptional", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r1.CaptionsOn)("title", ctx_r1.CaptionsTitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.ShowDetails ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.ShowDetails ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Draft);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Draft);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", !ctx_r2.CanSend);
+    i0.ɵɵproperty("disabled", !ctx_r1.CanSend);
 } }
 /**
  * The call overlay's BOTTOM DOCK — the progressive-disclosure composer
@@ -357,15 +369,15 @@ export class RealtimeComposerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dockInput = _t.first);
         } }, hostBindings: function RealtimeComposerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function RealtimeComposerComponent_click_HostBindingHandler() { return ctx.OnDocumentClick(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", ShowCamera: "ShowCamera", ShowShare: "ShowShare", CameraOn: "CameraOn", Sharing: "Sharing", SharePanels: "SharePanels", Devices: "Devices", SelectedMicrophoneID: "SelectedMicrophoneID", SelectedCameraID: "SelectedCameraID", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged", CameraToggled: "CameraToggled", ShareRequested: "ShareRequested", StopShareRequested: "StopShareRequested", DeviceSelected: "DeviceSelected" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "lean-more"], ["role", "menu", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "More call controls", "title", "More controls", 3, "click", "Variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["Size", "lg", 1, "lean__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["Size", "lg", 1, "strip__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "ShowLabels", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], [1, "ctrl-group"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "ctrl-label"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Open the typed-input composer", "title", "Type into the live session", 3, "click"], ["aria-hidden", "true", 1, "ctrl-label", "ctrl-label--end"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"], [1, "dock__minis"], ["Size", "sm", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "MicrophoneOn", "ShowCamera", "ShowShare", "ShowShareMenu", "CameraOn", "Sharing", "CameraOptional"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "Toggleable", "Selected", "title"], [1, "dock__box"], ["rows", "1", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "input", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Close the typed-input composer", "title", "Hide typing \u2014 back to the voice controls", 1, "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 15, 19, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 18, 16, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 17, 13, "div", 3);
+        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", ShowCamera: "ShowCamera", ShowShare: "ShowShare", CameraOn: "CameraOn", Sharing: "Sharing", SharePanels: "SharePanels", Devices: "Devices", SelectedMicrophoneID: "SelectedMicrophoneID", SelectedCameraID: "SelectedCameraID", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged", CameraToggled: "CameraToggled", ShareRequested: "ShareRequested", StopShareRequested: "StopShareRequested", DeviceSelected: "DeviceSelected" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], ["Size", "lg", 1, "lean__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], [1, "lean-more"], ["role", "group", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["Size", "md", 1, "lean-sheet__media", 3, "ShowMicrophone", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "More call controls", "title", "More controls", 3, "click", "Variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["Size", "md", 1, "lean-sheet__media", 3, "CameraToggled", "ShareRequested", "StopShareRequested", "ShowMicrophone", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["Size", "lg", 1, "strip__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "ShowLabels", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], [1, "ctrl-group"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "ctrl-label"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Open the typed-input composer", "title", "Type into the live session", 3, "click"], ["aria-hidden", "true", 1, "ctrl-label", "ctrl-label--end"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"], [1, "dock__minis"], ["Size", "sm", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "MicrophoneOn", "ShowCamera", "ShowShare", "ShowShareMenu", "CameraOn", "Sharing", "CameraOptional"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "Toggleable", "Selected", "title"], [1, "dock__box"], ["rows", "1", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "input", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Close the typed-input composer", "title", "Hide typing \u2014 back to the voice controls", 1, "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 16, 20, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 18, 16, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 17, 13, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.StripMode && ctx.Compact ? 0 : ctx.StripMode ? 1 : 2);
-        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, MJButtonDirective, MediaControlsComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  \n  container-type: inline-size;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n\n.strip__media[_ngcontent-%COMP%] {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n\n@container (max-width: 600px) {\n  .strip[_ngcontent-%COMP%], \n   .strip__media[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n\n@container (max-width: 520px) {\n  .dock[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box[_ngcontent-%COMP%] {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n\n\n\n@container (max-width: 490px) {\n  .dock-lean[_ngcontent-%COMP%] {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media[_ngcontent-%COMP%] {\n    gap: 4px;\n  }\n}\n\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
+        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, MJButtonDirective, MediaControlsComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  \n  container-type: inline-size;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n\n.strip__media[_ngcontent-%COMP%] {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n\n@container (max-width: 600px) {\n  .strip[_ngcontent-%COMP%], \n   .strip__media[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n\n@container (max-width: 520px) {\n  .dock[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box[_ngcontent-%COMP%] {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n\n\n\n@container (max-width: 490px) {\n  .dock-lean[_ngcontent-%COMP%] {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media[_ngcontent-%COMP%] {\n    gap: 4px;\n  }\n}\n\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-sheet__media[_ngcontent-%COMP%] {\n  align-items: center;\n  gap: 8px;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeComposerComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule, MJButtonDirective, MediaControlsComponent], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 a \"\u2022\u2022\u2022\" that blooms a small sheet with the secondary actions\n       (Details / Type), a first-class Captions toggle (text stays ONE TAP in the overlay), the call's media controls\n       (the microphone with its device chevron, and the camera and Share when offered) and a red End. Circles from the\n       design system. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"More call controls\">\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" mjButton Shape=\"circle\" [Variant]=\"MoreOpen ? 'primary' : 'secondary'\"\n              AriaLabel=\"More call controls\" title=\"More controls\"\n              [attr.aria-expanded]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" mjButton Shape=\"circle\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n            AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n            (click)=\"ToggleCaptions()\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <mj-media-controls class=\"lean__media\"\n                       Size=\"lg\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera\"\n                       [ShowShare]=\"ShowShare\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big labelled circles: the call's media controls (the microphone with its device\n       chevron, and the camera and Share when the call offers them), Captions (level 1+, arriving WITH the text it\n       controls), the Details peek at the surface panels, Type, and End call, the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <mj-media-controls class=\"strip__media\"\n                       Size=\"lg\"\n                       [ShowLabels]=\"true\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera\"\n                       [ShowShare]=\"ShowShare\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\" aria-hidden=\"true\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\"\n              AriaLabel=\"Open the typed-input composer\" title=\"Type into the live session\"\n              (click)=\"OpenChanged.emit(true)\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n              AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\" aria-hidden=\"true\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 small circles and the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <!-- No Share arrow and no device chevron in the dock, which is short of room: the browser's picker still offers\n           every kind of surface, and Hide brings back the strip, which has the device menu. -->\n      <mj-media-controls Size=\"sm\"\n                         [MicrophoneOn]=\"!IsMuted\"\n                         [ShowCamera]=\"ShowCamera\"\n                         [ShowShare]=\"ShowShare\"\n                         [ShowShareMenu]=\"false\"\n                         [CameraOn]=\"CameraOn\"\n                         [Sharing]=\"Sharing\"\n                         [CameraOptional]=\"true\"\n                         (MicrophoneToggled)=\"ToggleMute()\"\n                         (CameraToggled)=\"CameraToggled.emit($event)\"\n                         (ShareRequested)=\"ShareRequested.emit($event)\"\n                         (StopShareRequested)=\"StopShareRequested.emit()\"></mj-media-controls>\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <textarea\n        #dockInput\n        class=\"dock__input\"\n        rows=\"1\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        (input)=\"AutoResize()\"\n        aria-label=\"Type a message into the live voice session\"></textarea>\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" class=\"dock__hide\"\n            AriaLabel=\"Close the typed-input composer\" title=\"Hide typing \u2014 back to the voice controls\"\n            (click)=\"OpenChanged.emit(false)\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  /* The fused dock reflows by its own width, not the window's (the call column narrows when the panel opens). */\n  container-type: inline-size;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n/* Matches mj-media-controls' own labels, so every control in the strip is named alike. */\n.ctrl-label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n/* The call's media controls sit in the strip like its other groups. */\n.strip__media {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n/* A narrow strip tightens its gaps, then wraps onto a second row, rather than cutting off its first and last controls. */\n@container (max-width: 600px) {\n  .strip,\n  .strip__media {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n/* min-width: 0 lets the box (and its text) give way to the controls on a narrow dock instead of pushing End out. */\n.dock__box {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n/* On a narrow dock the text box takes a row of its own under the controls, so neither is squeezed. */\n@container (max-width: 520px) {\n  .dock {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 a \"\u2022\u2022\u2022\" that blooms a small sheet (Details / Type), Captions, the microphone and a red End.\n   Design-system circles. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n/* A narrow lean dock (the call column is at least 420px wide) tightens its gaps, so the microphone's device chevron and\n   the Share arrow fit beside the other controls; where even that is not enough (larger touch targets), it wraps onto a\n   second row rather than cutting off its first and last controls. */\n@container (max-width: 490px) {\n  .dock-lean {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media {\n    gap: 4px;\n  }\n}\n\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule, MJButtonDirective, MediaControlsComponent], template: "@if (StripMode && Compact) {\n  <!-- COMPACT / ORB (Calm Orb \u00B7 overlay): the lean dock \u2014 primary bar keeps only the microphone,\n       Captions, active Camera/Share (while on), a \"\u2022\u2022\u2022\" that blooms a small sheet with secondary\n       actions (inactive Camera/Share, Details, Type), and a red End. Circles from the design system. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <mj-media-controls class=\"lean__media\"\n                       Size=\"lg\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera && CameraOn\"\n                       [ShowShare]=\"ShowShare && Sharing\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" mjButton Shape=\"circle\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n            AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n            (click)=\"ToggleCaptions()\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"group\" aria-label=\"More call controls\">\n        @if ((ShowCamera && !CameraOn) || (ShowShare && !Sharing)) {\n          <mj-media-controls class=\"lean-sheet__media\"\n                             Size=\"md\"\n                             [ShowMicrophone]=\"false\"\n                             [ShowCamera]=\"ShowCamera && !CameraOn\"\n                             [ShowShare]=\"ShowShare && !Sharing\"\n                             [CameraOn]=\"CameraOn\"\n                             [Sharing]=\"Sharing\"\n                             [SharePanels]=\"SharePanels\"\n                             [CameraOptional]=\"true\"\n                             (CameraToggled)=\"CameraToggled.emit($event); MoreOpen = false\"\n                             (ShareRequested)=\"ShareRequested.emit($event); MoreOpen = false\"\n                             (StopShareRequested)=\"StopShareRequested.emit()\"></mj-media-controls>\n        }\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" mjButton Shape=\"circle\" [Variant]=\"MoreOpen ? 'primary' : 'secondary'\"\n              AriaLabel=\"More call controls\" title=\"More controls\"\n              [attr.aria-expanded]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big labelled circles: the call's media controls (the microphone with its device\n       chevron, and the camera and Share when the call offers them), Captions (level 1+, arriving WITH the text it\n       controls), the Details peek at the surface panels, Type, and End call, the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <mj-media-controls class=\"strip__media\"\n                       Size=\"lg\"\n                       [ShowLabels]=\"true\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera\"\n                       [ShowShare]=\"ShowShare\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\" aria-hidden=\"true\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\"\n              AriaLabel=\"Open the typed-input composer\" title=\"Type into the live session\"\n              (click)=\"OpenChanged.emit(true)\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n              AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\" aria-hidden=\"true\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 small circles and the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <!-- No Share arrow and no device chevron in the dock, which is short of room: the browser's picker still offers\n           every kind of surface, and Hide brings back the strip, which has the device menu. -->\n      <mj-media-controls Size=\"sm\"\n                         [MicrophoneOn]=\"!IsMuted\"\n                         [ShowCamera]=\"ShowCamera\"\n                         [ShowShare]=\"ShowShare\"\n                         [ShowShareMenu]=\"false\"\n                         [CameraOn]=\"CameraOn\"\n                         [Sharing]=\"Sharing\"\n                         [CameraOptional]=\"true\"\n                         (MicrophoneToggled)=\"ToggleMute()\"\n                         (CameraToggled)=\"CameraToggled.emit($event)\"\n                         (ShareRequested)=\"ShareRequested.emit($event)\"\n                         (StopShareRequested)=\"StopShareRequested.emit()\"></mj-media-controls>\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <textarea\n        #dockInput\n        class=\"dock__input\"\n        rows=\"1\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        (input)=\"AutoResize()\"\n        aria-label=\"Type a message into the live voice session\"></textarea>\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" class=\"dock__hide\"\n            AriaLabel=\"Close the typed-input composer\" title=\"Hide typing \u2014 back to the voice controls\"\n            (click)=\"OpenChanged.emit(false)\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  /* The fused dock reflows by its own width, not the window's (the call column narrows when the panel opens). */\n  container-type: inline-size;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n/* Matches mj-media-controls' own labels, so every control in the strip is named alike. */\n.ctrl-label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n/* The call's media controls sit in the strip like its other groups. */\n.strip__media {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n/* A narrow strip tightens its gaps, then wraps onto a second row, rather than cutting off its first and last controls. */\n@container (max-width: 600px) {\n  .strip,\n  .strip__media {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n/* min-width: 0 lets the box (and its text) give way to the controls on a narrow dock instead of pushing End out. */\n.dock__box {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n/* On a narrow dock the text box takes a row of its own under the controls, so neither is squeezed. */\n@container (max-width: 520px) {\n  .dock {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 a \"\u2022\u2022\u2022\" that blooms a small sheet (Details / Type), Captions, the microphone and a red End.\n   Design-system circles. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n/* A narrow lean dock (the call column is at least 420px wide) tightens its gaps, so the microphone's device chevron and\n   the Share arrow fit beside the other controls; where even that is not enough (larger touch targets), it wraps onto a\n   second row rather than cutting off its first and last controls. */\n@container (max-width: 490px) {\n  .dock-lean {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media {\n    gap: 4px;\n  }\n}\n\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-sheet__media {\n  align-items: center;\n  gap: 8px;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
     }], null, { Open: [{
             type: Input
         }], Compact: [{