@memberjunction/ng-conversations 5.43.0 → 5.44.0

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RealtimeSessionService } from '../../services/realtime-session.service';
@@ -6,135 +6,188 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 const _c0 = ["dockInput"];
-function RealtimeComposerComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "button", 4);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
-    i0.ɵɵelement(2, "i", 14);
+function RealtimeComposerComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    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", 18);
+    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);
+} }
+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) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($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.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 13);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
+    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_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(15, "i", 16);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = 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.ɵɵclassProp("lean-ctrl--on", ctx_r2.MoreOpen);
+    i0.ɵɵattribute("aria-expanded", ctx_r2.MoreOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("lean-ctrl--on", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("lean-ctrl--muted", ctx_r2.IsMuted);
+    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+} }
+function RealtimeComposerComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "button", 20);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_11_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", 18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 6);
+    i0.ɵɵelementStart(3, "span", 21);
     i0.ɵɵtext(4, "Details");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("ctrl--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);
+    i0.ɵɵclassProp("ctrl--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);
 } }
-function RealtimeComposerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 3)(2, "button", 4);
-    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.ToggleMute()); });
-    i0.ɵɵelement(3, "i", 5);
+function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 19)(2, "button", 20);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
+    i0.ɵɵelement(3, "i", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 6);
+    i0.ɵɵelementStart(4, "span", 21);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 3)(7, "button", 4);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
-    i0.ɵɵelement(8, "i", 7);
+    i0.ɵɵelementStart(6, "div", 19)(7, "button", 20);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
+    i0.ɵɵelement(8, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 6);
+    i0.ɵɵelementStart(9, "span", 21);
     i0.ɵɵtext(10, "Captions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, RealtimeComposerComponent_Conditional_0_Conditional_11_Template, 5, 4, "div", 3);
-    i0.ɵɵelementStart(12, "div", 3)(13, "button", 8);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(true)); });
-    i0.ɵɵelement(14, "i", 9);
+    i0.ɵɵconditionalCreate(11, RealtimeComposerComponent_Conditional_1_Conditional_11_Template, 5, 4, "div", 19);
+    i0.ɵɵelementStart(12, "div", 19)(13, "button", 22);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(true)); });
+    i0.ɵɵelement(14, "i", 8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 6);
+    i0.ɵɵelementStart(15, "span", 21);
     i0.ɵɵtext(16, "Type");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 3)(18, "button", 10);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
-    i0.ɵɵelement(19, "i", 11);
+    i0.ɵɵelementStart(17, "div", 19)(18, "button", 23);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(19, "i", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 12);
+    i0.ɵɵelementStart(20, "span", 24);
     i0.ɵɵtext(21, "End call");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "span", 13);
-    i0.ɵɵelement(23, "i", 9);
-    i0.ɵɵtext(24, " press ");
-    i0.ɵɵelementStart(25, "kbd");
-    i0.ɵɵtext(26, "T");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(27, " to type");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("ctrl--muted", ctx_r1.IsMuted);
-    i0.ɵɵproperty("title", ctx_r1.IsMuted ? "Unmute microphone" : "Mute microphone");
-    i0.ɵɵattribute("aria-pressed", ctx_r1.IsMuted);
+    i0.ɵɵclassProp("ctrl--muted", ctx_r2.IsMuted);
+    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.IsMuted ? "Unmute" : "Mute");
+    i0.ɵɵtextInterpolate(ctx_r2.IsMuted ? "Unmute" : "Mute");
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("ctrl--on", ctx_r1.CaptionsOn);
-    i0.ɵɵproperty("title", ctx_r1.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
-    i0.ɵɵattribute("aria-pressed", ctx_r1.CaptionsOn);
+    i0.ɵɵclassProp("ctrl--on", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.ShowDetails ? 11 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowDetails ? 11 : -1);
 } }
-function RealtimeComposerComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 16);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
-    i0.ɵɵelement(1, "i", 14);
+function RealtimeComposerComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Conditional_6_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", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("mini--on", ctx_r1.DetailsOn);
-    i0.ɵɵproperty("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Show the session panels");
-    i0.ɵɵattribute("aria-pressed", ctx_r1.DetailsOn);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mini--on", ctx_r2.DetailsOn);
+    i0.ɵɵproperty("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Show the session panels");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.DetailsOn);
 } }
-function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 15)(2, "button", 16);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); });
-    i0.ɵɵelement(3, "i", 5);
+function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 25)(2, "button", 26);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
+    i0.ɵɵelement(3, "i", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 16);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
-    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelementStart(4, "button", 26);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
+    i0.ɵɵelement(5, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_1_Conditional_6_Template, 2, 4, "button", 17);
+    i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_2_Conditional_6_Template, 2, 4, "button", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 18)(8, "input", 19, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_1_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); 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_1_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnKeydown($event)); });
+    i0.ɵɵelementStart(7, "div", 28)(8, "input", 29, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_input_ngModelChange_8_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_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 20);
+    i0.ɵɵelementStart(10, "span", 30);
     i0.ɵɵtext(11, "\u21B5 send");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 21);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Send()); });
-    i0.ɵɵelement(13, "i", 22);
+    i0.ɵɵelementStart(12, "button", 31);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Send()); });
+    i0.ɵɵelement(13, "i", 32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 23);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(false)); });
-    i0.ɵɵelement(15, "i", 24);
+    i0.ɵɵelementStart(14, "button", 33);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(false)); });
+    i0.ɵɵelement(15, "i", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("mini--muted", ctx_r1.IsMuted);
-    i0.ɵɵproperty("title", ctx_r1.IsMuted ? "Unmute microphone" : "Mute microphone");
-    i0.ɵɵattribute("aria-pressed", ctx_r1.IsMuted);
+    i0.ɵɵclassProp("mini--muted", ctx_r2.IsMuted);
+    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("mini--on", ctx_r1.CaptionsOn);
-    i0.ɵɵproperty("title", ctx_r1.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
-    i0.ɵɵattribute("aria-pressed", ctx_r1.CaptionsOn);
+    i0.ɵɵclassProp("mini--on", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
+    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.ShowDetails ? 6 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowDetails ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Draft);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Draft);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", !ctx_r1.CanSend);
+    i0.ɵɵproperty("disabled", !ctx_r2.CanSend);
 } }
 /**
  * The call overlay's BOTTOM DOCK — the progressive-disclosure composer
@@ -144,8 +197,9 @@ function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
  *  - **Levels 0–1 (phone-call strip)** — big round call controls, centered: Mute, the
  *    Captions toggle (level 1+, arriving WITH the text it controls), the Details peek
  *    (level 0 paths where the surface panel isn't earned yet — lets the user look at the
- *    Activity/Whiteboard panels on demand), and End call. Level 1 adds the whispered
- *    "press T to type" hint — typing exists, but there's no visible composer yet.
+ *    Activity/Whiteboard panels on demand), the Type control, and End call. There's no visible
+ *    composer yet — the Type control opens it, and so does simply starting to type (the overlay
+ *    captures the first printable keystroke and seeds it via {@link AppendAndFocus}).
  *  - **Level 2+ (the dock)** — mute/captions shrink to compact minis and the in-call text
  *    input docks beside them (one bottom bar, per Redesign A's fused composer+controls).
  *    Submit calls {@link RealtimeSessionService.SendText}, which injects the text as a user
@@ -161,6 +215,14 @@ export class RealtimeComposerComponent {
      * never becomes permanent chrome. Default closed (voice-first), reset per session.
      */
     Open = false;
+    /**
+     * COMPACT (Calm Orb · overlay) presentation: collapse the phone-call strip to the
+     * mockup's lean dock — **Mute + End + a "•••"** overflow button. The "•••" blooms a small
+     * sheet hosting the secondary actions (Captions / Details / Type). The fused level-2 dock
+     * (minis + text input) is unchanged. Fed from the overlay's resolved `Ui.compact`.
+     * Default `false` (the full 5-button strip is unchanged).
+     */
+    Compact = false;
     /** Emitted when the user opens (Type control / typing) or closes (hide control) the dock. */
     OpenChanged = new EventEmitter();
     /** Whether captions are currently shown (drives the captions control's active state). */
@@ -175,12 +237,18 @@ export class RealtimeComposerComponent {
     DetailsToggled = new EventEmitter();
     /** Emitted when the user ends the call from the strip's End control. */
     EndRequested = new EventEmitter();
+    /** Emitted with the new muted state whenever the user toggles the mic from the dock. */
+    MuteChanged = new EventEmitter();
     /** Current draft text in the dock's composer input. */
     Draft = '';
-    /** Local mic mute state, reflected from the service. */
+    /**
+     * The mic mute state. A two-way reflection: the overlay may push it down (e.g. its
+     * `SetMuted()` / focus-pill toggle) so all mute affordances stay in sync, and this
+     * component updates it locally + emits {@link MuteChanged} when its own button is used.
+     */
     IsMuted = false;
     dockInput;
-    voice = inject(RealtimeSessionService);
+    realtime = inject(RealtimeSessionService);
     /** True when there's non-whitespace text to send. */
     get CanSend() {
         return this.Draft.trim().length > 0;
@@ -189,25 +257,60 @@ export class RealtimeComposerComponent {
     get StripMode() {
         return !this.Open;
     }
-    /** Toggle the local microphone mute. */
+    /**
+     * Whether the compact "•••" overflow sheet (Captions / Details / Type) is open. Only used
+     * in {@link Compact} strip mode; any outside click or action selection closes it.
+     */
+    MoreOpen = false;
+    /** Open/close the compact overflow sheet (stops propagation so the outside-click close skips it). */
+    ToggleMore(event) {
+        event.stopPropagation();
+        this.MoreOpen = !this.MoreOpen;
+    }
+    /** Any outside click closes the compact overflow sheet. */
+    OnDocumentClick() {
+        if (this.MoreOpen) {
+            this.MoreOpen = false;
+        }
+    }
+    /** Toggle the local microphone mute and surface the new state to the overlay. */
     ToggleMute() {
-        this.IsMuted = this.voice.ToggleMute();
+        this.IsMuted = this.realtime.ToggleMute();
+        this.MuteChanged.emit(this.IsMuted);
     }
     /** Toggle captions visibility and notify the overlay. */
     ToggleCaptions() {
         this.CaptionsOn = !this.CaptionsOn;
         this.CaptionsToggled.emit(this.CaptionsOn);
     }
-    /** Focuses the dock's text input (the overlay's T-to-type hotkey lands here). */
+    /** Focuses the dock's text input (the overlay's Type control lands here). */
     FocusInput() {
         this.dockInput?.nativeElement.focus();
     }
+    /**
+     * TYPE-TO-COMPOSE: the overlay captured a printable keystroke while nothing was focused, so seed
+     * the draft with that character, focus the input, and put the caret at the end — the user just
+     * keeps typing and their first key isn't lost. Appends (rather than replaces) so a leftover draft
+     * is preserved. The native value is synced inline so the caret math is correct before Angular's
+     * next change-detection pass reconciles ngModel.
+     *
+     * @param text the character(s) to seed (typically the single key that opened the composer).
+     */
+    AppendAndFocus(text) {
+        this.Draft = (this.Draft ?? '') + text;
+        const el = this.dockInput?.nativeElement;
+        if (el) {
+            el.value = this.Draft;
+            el.focus();
+            el.setSelectionRange(this.Draft.length, this.Draft.length);
+        }
+    }
     /** Send the typed text into the live session, then clear the input. */
     Send() {
         if (!this.CanSend) {
             return;
         }
-        this.voice.SendText(this.Draft);
+        this.realtime.SendText(this.Draft);
         this.Draft = '';
     }
     /** Enter sends (Shift+Enter is free for future multiline if the input becomes a textarea). */
@@ -223,17 +326,21 @@ export class RealtimeComposerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dockInput = _t.first);
-        } }, inputs: { Open: "Open", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested" }, decls: 2, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], [1, "ctrl-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], [1, "ctrl-label", "ctrl-label--end"], [1, "thint"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["type", "text", "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", "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", "title", "Hide typing \u2014 back to the voice controls", "aria-label", "Close the typed-input composer", 1, "mini", "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 28, 11, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 16, 12, "div", 2);
+        } }, 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", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged" }, 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", "title", "More controls", "aria-label", "More call controls", 1, "lean-ctrl", "lean-ctrl--more", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--more", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--lg", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "lean-ctrl", "lean-ctrl--lg", "lean-ctrl--end", 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"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], [1, "ctrl-label"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], [1, "ctrl-label", "ctrl-label--end"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["type", "text", "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", "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", "title", "Hide typing \u2014 back to the voice controls", "aria-label", "Close the typed-input composer", 1, "mini", "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 16, 15, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 22, 11, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 16, 12, "div", 3);
         } if (rf & 2) {
-            i0.ɵɵconditional(ctx.StripMode ? 0 : 1);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\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: 16px 22px 20px;\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.ctrl[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.thint[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 22px;\n  bottom: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n}\n.thint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\nkbd[_ngcontent-%COMP%] {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  padding: 0 5px;\n  background: var(--mj-bg-surface-sunken);\n}\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.mini[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\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}\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.dock__hide[_ngcontent-%COMP%] {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}"] });
+            i0.ɵɵconditional(ctx.StripMode && ctx.Compact ? 0 : ctx.StripMode ? 1 : 2);
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\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.ctrl[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\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.mini[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\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}\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.dock__hide[_ngcontent-%COMP%] {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg[_ngcontent-%COMP%] {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more[_ngcontent-%COMP%] {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeComposerComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big round controls, nothing to configure.\n       Captions arrives at level 1 WITH the text it controls; Details peeks at the\n       surface panels on demand; End stays the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">{{ IsMuted ? 'Unmute' : 'Mute' }}</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\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        </button>\n        <span class=\"ctrl-label\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" (click)=\"OpenChanged.emit(true)\"\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      </button>\n      <span class=\"ctrl-label\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl ctrl--end\" (click)=\"EndRequested.emit()\"\n              title=\"End call\" aria-label=\"End call\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\">End call</span>\n    </div>\n\n    <span class=\"thint\"><i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i> press <kbd>T</kbd> to type</span>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 compact minis + the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <button type=\"button\" class=\"mini\" [class.mini--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <button type=\"button\" class=\"mini\" [class.mini--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" class=\"mini\" [class.mini--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <input\n        #dockInput\n        type=\"text\"\n        class=\"dock__input\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        aria-label=\"Type a message into the live voice session\" />\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\" class=\"mini dock__hide\" (click)=\"OpenChanged.emit(false)\"\n            title=\"Hide typing \u2014 back to the voice controls\"\n            aria-label=\"Close the typed-input composer\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\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: 16px 22px 20px;\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.ctrl {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* The whispered type-to-text hint (level 1: typing exists, no visible composer yet). */\n.thint {\n  position: absolute;\n  right: 22px;\n  bottom: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n}\n.thint i {\n  font-size: 12px;\n}\nkbd {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  padding: 0 5px;\n  background: var(--mj-bg-surface-sunken);\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.mini {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\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}\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/* The dock's hide control \u2014 typing is a two-way door, never permanent chrome. */\n.dock__hide {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide:hover {\n  color: var(--mj-text-primary);\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 Mute + End + a first-class Captions toggle\n       (kept out of the \"\u2022\u2022\u2022\" so text stays ONE TAP in the overlay, where the banner no longer\n       carries a duplicate CC) + a \"\u2022\u2022\u2022\" that blooms a small sheet with the remaining secondary\n       actions (Details / Type). Round controls, red End \u2014 matches the mockup. -->\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\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\"\n              title=\"More controls\" aria-label=\"More call controls\"\n              [attr.aria-expanded]=\"MoreOpen\">\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\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"CaptionsOn\"\n            (click)=\"ToggleCaptions()\"\n            [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n            [attr.aria-pressed]=\"CaptionsOn\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg\" [class.lean-ctrl--muted]=\"IsMuted\"\n            (click)=\"ToggleMute()\"\n            [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n            [attr.aria-pressed]=\"IsMuted\">\n      <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg lean-ctrl--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\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 round controls, nothing to configure.\n       Captions arrives at level 1 WITH the text it controls; Details peeks at the\n       surface panels on demand; End stays the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">{{ IsMuted ? 'Unmute' : 'Mute' }}</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\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        </button>\n        <span class=\"ctrl-label\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" (click)=\"OpenChanged.emit(true)\"\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      </button>\n      <span class=\"ctrl-label\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl ctrl--end\" (click)=\"EndRequested.emit()\"\n              title=\"End call\" aria-label=\"End call\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 compact minis + the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <button type=\"button\" class=\"mini\" [class.mini--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <button type=\"button\" class=\"mini\" [class.mini--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" class=\"mini\" [class.mini--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <input\n        #dockInput\n        type=\"text\"\n        class=\"dock__input\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        aria-label=\"Type a message into the live voice session\" />\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\" class=\"mini dock__hide\" (click)=\"OpenChanged.emit(false)\"\n            title=\"Hide typing \u2014 back to the voice controls\"\n            aria-label=\"Close the typed-input composer\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\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.ctrl {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\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.mini {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--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.mini--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease;\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}\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/* The dock's hide control \u2014 typing is a two-way door, never permanent chrome. */\n.dock__hide {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide:hover {\n  color: var(--mj-text-primary);\n}\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 Mute + End + a \"\u2022\u2022\u2022\" that blooms a small sheet (Captions / Details / Type).\n   Round controls, red End \u2014 matches the mockup. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\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"] }]
     }], null, { Open: [{
             type: Input
+        }], Compact: [{
+            type: Input
         }], OpenChanged: [{
             type: Output
         }], CaptionsOn: [{
@@ -248,9 +355,16 @@ export class RealtimeComposerComponent {
             type: Output
         }], EndRequested: [{
             type: Output
+        }], MuteChanged: [{
+            type: Output
+        }], IsMuted: [{
+            type: Input
         }], dockInput: [{
             type: ViewChild,
             args: ['dockInput']
+        }], OnDocumentClick: [{
+            type: HostListener,
+            args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeComposerComponent, { className: "RealtimeComposerComponent", filePath: "src/lib/components/realtime/realtime-composer.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeComposerComponent, { className: "RealtimeComposerComponent", filePath: "src/lib/components/realtime/realtime-composer.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=realtime-composer.component.js.map