@memberjunction/ng-conversations 5.36.0 → 5.38.0

package/dist/lib/components/overlay/chat-overlay.component.js

@@ -22,8 +22,8 @@ import { AgentClientService } from '@memberjunction/ng-agent-client';
 import { ConversationBridgeService } from '../../services/conversation-bridge.service';
 import * as i0 from "@angular/core";
 import * as i1 from "../conversation/conversation-chat-area.component";
-function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,63 +33,90 @@ function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Conditional_2_Te
 } }
 function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Toggle()); });
-    i0.ɵɵelement(1, "i", 3);
-    i0.ɵɵconditionalCreate(2, ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Conditional_2_Template, 2, 1, "span", 4);
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵlistener("pointerdown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnBubblePointerDown($event)); });
+    i0.ɵɵelement(1, "i", 4)(2, "i", 5)(3, "i", 6);
+    i0.ɵɵconditionalCreate(4, ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Conditional_4_Template, 2, 1, "span", 7);
+    i0.ɵɵelementStart(5, "button", 8);
+    i0.ɵɵlistener("pointerdown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template_button_pointerdown_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Hide($event)); });
+    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("bottom", ctx_r1.BubbleBottomPx, "px");
+    i0.ɵɵclassProp("is-pressed", ctx_r1.IsBubblePressed)("is-dragging", ctx_r1.IsBubbleDragging);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.UnreadCount > 0 ? 4 : -1);
+} }
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.UnreadCount > 9 ? "9+" : ctx_r1.UnreadCount);
+} }
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Expand()); });
+    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵconditionalCreate(2, ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_2_Template, 2, 1, "span", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("bottom", ctx_r1.BubbleBottomPx, "px");
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.UnreadCount > 0 ? 2 : -1);
 } }
-function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "left")); });
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "left")); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 20);
-    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_1_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "top")); });
+    i0.ɵɵelementStart(1, "div", 28);
+    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_1_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "top")); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 21);
-    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_1_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "top-left")); });
+    i0.ɵɵelementStart(2, "div", 29);
+    i0.ɵɵlistener("mousedown", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_1_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResizeStart($event, "top-left")); });
     i0.ɵɵelementEnd();
 } }
-function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnOpenFullChatWorkspace()); });
-    i0.ɵɵelement(1, "i", 23);
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnOpenFullChatWorkspace()); });
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementEnd();
 } }
-function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5);
-    i0.ɵɵconditionalCreate(1, ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_1_Template, 3, 0);
-    i0.ɵɵelementStart(2, "div", 6)(3, "div", 7);
-    i0.ɵɵelement(4, "i", 8);
+function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵconditionalCreate(1, ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_1_Template, 3, 0);
+    i0.ɵɵelementStart(2, "div", 14)(3, "div", 15);
+    i0.ɵɵelement(4, "i", 16);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6, "AI Assistant");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 9)(8, "button", 10);
-    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StartNewConversation()); });
-    i0.ɵɵelement(9, "i", 11);
+    i0.ɵɵelementStart(7, "div", 17)(8, "button", 18);
+    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StartNewConversation()); });
+    i0.ɵɵelement(9, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Conditional_10_Template, 2, 0, "button", 12);
-    i0.ɵɵelementStart(11, "button", 13);
-    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleMaximize()); });
-    i0.ɵɵelement(12, "i", 14);
+    i0.ɵɵconditionalCreate(10, ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Conditional_10_Template, 2, 0, "button", 20);
+    i0.ɵɵelementStart(11, "button", 21);
+    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleMaximize()); });
+    i0.ɵɵelement(12, "i", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 15);
-    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Collapse()); });
-    i0.ɵɵelement(14, "i", 16);
+    i0.ɵɵelementStart(13, "button", 23);
+    i0.ɵɵlistener("click", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.Collapse()); });
+    i0.ɵɵelement(14, "i", 24);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 17)(16, "mj-conversation-chat-area", 18);
-    i0.ɵɵlistener("conversationCreated", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_conversationCreated_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConversationCreated($event)); })("conversationRenamed", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_conversationRenamed_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConversationRenamed($event)); })("pendingMessageConsumed", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_pendingMessageConsumed_16_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPendingMessageConsumed()); })("openEntityRecord", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_openEntityRecord_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenEntityRecord($event)); })("navigationRequest", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_navigationRequest_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnNavigationRequest($event)); })("taskClicked", function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template_mj_conversation_chat_area_taskClicked_16_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTaskClicked($event)); });
+    i0.ɵɵelementStart(15, "div", 25)(16, "mj-conversation-chat-area", 26);
+    i0.ɵɵlistener("conversationCreated", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_conversationCreated_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConversationCreated($event)); })("conversationRenamed", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_conversationRenamed_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnConversationRenamed($event)); })("pendingMessageConsumed", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_pendingMessageConsumed_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnPendingMessageConsumed()); })("openEntityRecord", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_openEntityRecord_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnOpenEntityRecord($event)); })("navigationRequest", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_navigationRequest_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnNavigationRequest($event)); })("taskClicked", function ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template_mj_conversation_chat_area_taskClicked_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTaskClicked($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("width", ctx_r1.State === "maximized" ? null : ctx_r1.PanelWidth, "px")("height", ctx_r1.State === "maximized" ? null : ctx_r1.PanelHeight, "px");
+    i0.ɵɵstyleProp("width", ctx_r1.State === "maximized" ? null : ctx_r1.PanelWidth, "px")("height", ctx_r1.State === "maximized" ? null : ctx_r1.PanelHeight, "px")("bottom", ctx_r1.State === "maximized" ? null : ctx_r1.PanelBottomPx, "px");
     i0.ɵɵclassProp("maximized", ctx_r1.State === "maximized");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.State === "expanded" ? 1 : -1);
@@ -103,13 +130,16 @@ function ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template(rf, ctx
     i0.ɵɵproperty("environmentId", ctx_r1.EnvironmentId)("currentUser", ctx_r1.CurrentUser)("conversationId", ctx_r1.ConversationId)("conversation", ctx_r1.Conversation)("isNewConversation", ctx_r1.IsNewConversation)("pendingMessage", ctx_r1.PendingMessage)("pendingAttachments", ctx_r1.PendingAttachments)("overlayMode", true)("showExportButton", false)("showShareButton", false)("showArtifactIndicator", false)("appContext", ctx_r1.AppContext)("emptyStateGreeting", ctx_r1.EmptyStateGreeting);
 } }
 function ChatAgentsOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template, 3, 1, "div", 0);
-    i0.ɵɵconditionalCreate(1, ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template, 17, 26, "div", 1);
+    i0.ɵɵconditionalCreate(0, ChatAgentsOverlayComponent_Conditional_0_Conditional_0_Template, 7, 7, "div", 0);
+    i0.ɵɵconditionalCreate(1, ChatAgentsOverlayComponent_Conditional_0_Conditional_1_Template, 3, 3, "button", 1);
+    i0.ɵɵconditionalCreate(2, ChatAgentsOverlayComponent_Conditional_0_Conditional_2_Template, 17, 28, "div", 2);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.State === "collapsed" ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.State === "collapsed" && !ctx_r1.IsHidden ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.State === "collapsed" && ctx_r1.IsHidden ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.State === "expanded" || ctx_r1.State === "maximized" ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.State === "expanded" || ctx_r1.State === "maximized" ? 2 : -1);
 } }
 export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     cdr = inject(ChangeDetectorRef);
@@ -124,6 +154,15 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     static MIN_HEIGHT = 350;
     static MAX_WIDTH = 900;
     static MAX_HEIGHT = 1000;
+    // --- Bubble drag constants ---
+    /** Default `bottom` for both bubble and panel (matches CSS 1.5rem). */
+    static BASE_BOTTOM_PX = 24;
+    /** Floating bubble diameter in pixels (matches CSS 3.5rem). */
+    static BUBBLE_SIZE_PX = 56;
+    /** Minimum gap to keep between the overlay and the viewport top edge. */
+    static VIEWPORT_TOP_PADDING_PX = 16;
+    /** Mousedown-to-mousemove distance that promotes a click into a drag. */
+    static BUBBLE_DRAG_THRESHOLD_PX = 5;
     // --- Inputs ---
     /** Controls external visibility (e.g., parent hides overlay on chat route) */
     _IsVisible = true;
@@ -146,6 +185,13 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     AppContext = null;
     /** Greeting message shown in the empty state when no conversation is active */
     EmptyStateGreeting = 'How can I help you?';
+    /**
+     * Pixels reserved at the top of the viewport that the bubble and panel must not
+     * cross. Set this from the host app to the height of any fixed top chrome (e.g.
+     * Explorer's shell-header). Defaults to 0 — generic apps without top chrome
+     * keep the full viewport available.
+     */
+    TopBoundaryPx = 0;
     // --- Outputs ---
     /** Emitted when the overlay visibility changes */
     VisibilityChanged = new EventEmitter();
@@ -167,6 +213,26 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     /** Panel dimensions (persisted via UserInfoEngine) */
     PanelWidth = ChatAgentsOverlayComponent.DEFAULT_WIDTH;
     PanelHeight = ChatAgentsOverlayComponent.DEFAULT_HEIGHT;
+    /**
+     * Pixels the floating bubble has been dragged up from its default
+     * bottom-right corner position. Always >= 0; clamping at render time
+     * keeps the bubble on-screen even after a viewport resize.
+     */
+    BubbleOffsetY = 0;
+    /** True while the user is actively dragging the bubble; used to swap cursor + suppress click. */
+    IsBubbleDragging = false;
+    /**
+     * True from mousedown until mouseup on the bubble, regardless of whether the
+     * gesture became a drag. Used to give immediate "I'm being held" feedback so
+     * the user can see drag is possible even before crossing the move threshold.
+     */
+    IsBubblePressed = false;
+    /**
+     * When true, the floating bubble is hidden and replaced by a thin sliver
+     * flush with the right edge of the viewport. Persisted across sessions via
+     * OverlayPrefs.bubbleHidden. Clicking the sliver restores the bubble.
+     */
+    IsHidden = false;
     /** Active conversation ID managed locally */
     _conversationId = null;
     get ConversationId() {
@@ -187,10 +253,19 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     resizeStartY = 0;
     resizeStartWidth = 0;
     resizeStartHeight = 0;
+    /** Bubble drag state */
+    bubbleDragStartMouseY = 0;
+    bubbleDragStartOffset = 0;
+    /** True once the pointer has moved past BUBBLE_DRAG_THRESHOLD_PX; suppresses the implicit click. */
+    bubbleDragMoved = false;
+    /** ID of the pointer currently driving the drag — guards against multi-touch confusion. */
+    activeBubblePointerId = null;
+    /** Element that captured the pointer; needed to release capture on end/cancel. */
+    bubbleCaptureTarget = null;
     // --- Lifecycle ---
     ngOnInit() {
         this.resolveDefaults();
-        this.loadSizePreferences();
+        this.loadPreferences();
         this.subscribeToBridgeEvents();
         this.subscribeToToolEvents();
     }
@@ -198,6 +273,7 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
         this.destroy$.next();
         this.destroy$.complete();
         this.removeResizeListeners();
+        this.removeBubbleDragListeners();
     }
     // --- Public Methods ---
     /** Toggle between collapsed and expanded states */
@@ -211,6 +287,12 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     }
     /** Expand the overlay to show the chat panel */
     Expand() {
+        // Expanding implies the user wants the chat visible — clear any hidden
+        // state so collapse returns to the bubble, not back to the sliver.
+        if (this.IsHidden) {
+            this.IsHidden = false;
+            this.savePreferences();
+        }
         this.State = 'expanded';
         this.UnreadCount = 0;
         this.bridge.NotifyOverlayActive(true);
@@ -290,6 +372,29 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
         this.emitConversationSwitched(prevId, null);
         this.cdr.detectChanges();
     }
+    /**
+     * Hide the floating bubble — leaves a thin sliver on the right edge as the
+     * only affordance to bring it back. Invoked from the small "×" pill that
+     * appears on hover. Stops propagation so the bubble's own click handler
+     * doesn't fire and toggle the panel open.
+     */
+    Hide(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (this.IsHidden)
+            return;
+        this.IsHidden = true;
+        this.savePreferences();
+        this.cdr.detectChanges();
+    }
+    /** Restore the floating bubble after it was hidden. Triggered by clicking the sliver. */
+    Show() {
+        if (!this.IsHidden)
+            return;
+        this.IsHidden = false;
+        this.savePreferences();
+        this.cdr.detectChanges();
+    }
     /** Increment unread badge (called externally when messages arrive while collapsed) */
     IncrementUnread() {
         if (this.State === 'collapsed') {
@@ -330,7 +435,7 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
         this.isResizing = false;
         this.resizeEdge = null;
         this.removeResizeListeners();
-        this.saveSizePreferences();
+        this.savePreferences();
     };
     removeResizeListeners() {
         document.removeEventListener('mousemove', this.onResizeMove);
@@ -342,6 +447,123 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
     clampHeight(value) {
         return Math.max(ChatAgentsOverlayComponent.MIN_HEIGHT, Math.min(ChatAgentsOverlayComponent.MAX_HEIGHT, value));
     }
+    // --- Bubble Drag Methods (Pointer Events — unified mouse / touch / pen) ---
+    /**
+     * Start tracking a potential bubble drag. We don't enter drag mode until
+     * the pointer moves past BUBBLE_DRAG_THRESHOLD_PX — releasing before that
+     * threshold is treated as a normal click/tap and opens the chat (via Toggle()).
+     *
+     * Pointer Events (not mousedown) so the same code path serves desktop mouse,
+     * touch on phones/tablets, and pen input. setPointerCapture keeps the gesture
+     * tied to this element even if the finger or cursor strays off the bubble.
+     */
+    OnBubblePointerDown(event) {
+        // Mouse: respect primary-button only. Touch/pen: button is always 0, so this passes naturally.
+        if (event.pointerType === 'mouse' && event.button !== 0)
+            return;
+        // Don't start a second drag while one is in flight (e.g. second finger on touch).
+        if (this.activeBubblePointerId !== null)
+            return;
+        event.preventDefault();
+        const target = event.currentTarget;
+        target.setPointerCapture(event.pointerId);
+        this.bubbleCaptureTarget = target;
+        this.activeBubblePointerId = event.pointerId;
+        this.bubbleDragStartMouseY = event.clientY;
+        this.bubbleDragStartOffset = this.BubbleOffsetY;
+        this.bubbleDragMoved = false;
+        this.IsBubblePressed = true;
+        this.cdr.detectChanges();
+        document.addEventListener('pointermove', this.onBubbleDragMove);
+        document.addEventListener('pointerup', this.onBubbleDragEnd);
+        document.addEventListener('pointercancel', this.onBubbleDragEnd);
+    }
+    onBubbleDragMove = (event) => {
+        if (event.pointerId !== this.activeBubblePointerId)
+            return;
+        const deltaY = this.bubbleDragStartMouseY - event.clientY; // dragging up = positive
+        if (!this.bubbleDragMoved) {
+            if (Math.abs(deltaY) < ChatAgentsOverlayComponent.BUBBLE_DRAG_THRESHOLD_PX)
+                return;
+            this.bubbleDragMoved = true;
+            this.IsBubbleDragging = true;
+        }
+        this.BubbleOffsetY = this.clampBubbleOffsetY(this.bubbleDragStartOffset + deltaY);
+        this.cdr.detectChanges();
+    };
+    onBubbleDragEnd = (event) => {
+        if (event.pointerId !== this.activeBubblePointerId)
+            return;
+        this.removeBubbleDragListeners();
+        if (this.bubbleCaptureTarget) {
+            // Browser may have implicitly released capture on pointerup already (per the
+            // Pointer Events spec). releasePointerCapture throws in that race; safe to ignore.
+            try {
+                this.bubbleCaptureTarget.releasePointerCapture(event.pointerId);
+            }
+            catch { /* noop */ }
+        }
+        this.bubbleCaptureTarget = null;
+        this.activeBubblePointerId = null;
+        const wasDragged = this.bubbleDragMoved;
+        const wasCancelled = event.type === 'pointercancel';
+        this.bubbleDragMoved = false;
+        this.IsBubbleDragging = false;
+        this.IsBubblePressed = false;
+        if (wasDragged) {
+            this.savePreferences();
+            this.cdr.detectChanges();
+        }
+        else if (!wasCancelled) {
+            this.Toggle();
+        }
+        else {
+            this.cdr.detectChanges();
+        }
+    };
+    removeBubbleDragListeners() {
+        document.removeEventListener('pointermove', this.onBubbleDragMove);
+        document.removeEventListener('pointerup', this.onBubbleDragEnd);
+        document.removeEventListener('pointercancel', this.onBubbleDragEnd);
+    }
+    /**
+     * Reserved space at the top of the viewport — host-supplied chrome plus
+     * the padding gap we always keep above the bubble/panel.
+     */
+    get topReservedPx() {
+        return Math.max(0, this.TopBoundaryPx) + ChatAgentsOverlayComponent.VIEWPORT_TOP_PADDING_PX;
+    }
+    /** Clamp the offset so the bubble stays fully visible below the top boundary. */
+    clampBubbleOffsetY(value) {
+        const maxOffset = window.innerHeight
+            - ChatAgentsOverlayComponent.BUBBLE_SIZE_PX
+            - ChatAgentsOverlayComponent.BASE_BOTTOM_PX
+            - this.topReservedPx;
+        return Math.max(0, Math.min(Math.max(0, maxOffset), value));
+    }
+    // --- Render Position Getters ---
+    /** Effective `bottom` (px) for the floating bubble, clamped to the current viewport. */
+    get BubbleBottomPx() {
+        const ideal = ChatAgentsOverlayComponent.BASE_BOTTOM_PX + this.BubbleOffsetY;
+        const max = window.innerHeight
+            - ChatAgentsOverlayComponent.BUBBLE_SIZE_PX
+            - this.topReservedPx;
+        return Math.max(ChatAgentsOverlayComponent.BASE_BOTTOM_PX, Math.min(ideal, Math.max(ChatAgentsOverlayComponent.BASE_BOTTOM_PX, max)));
+    }
+    /**
+     * Effective `bottom` (px) for the expanded panel. Anchors to the bubble's
+     * current bottom edge so the panel grows up from where the user parked the
+     * bubble, but clamps downward whenever the panel would otherwise extend
+     * past the viewport's top boundary — that's the "reposition lower so the
+     * chat interface stays visible" behavior.
+     */
+    get PanelBottomPx() {
+        const ideal = ChatAgentsOverlayComponent.BASE_BOTTOM_PX + this.BubbleOffsetY;
+        const maxBottomForVisibility = window.innerHeight
+            - this.PanelHeight
+            - this.topReservedPx;
+        return Math.max(ChatAgentsOverlayComponent.BASE_BOTTOM_PX, Math.min(ideal, maxBottomForVisibility));
+    }
     // --- Private Methods ---
     /** Auto-resolve CurrentUser and EnvironmentId from Metadata when not provided as inputs */
     resolveDefaults() {
@@ -353,8 +575,8 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
             this.EnvironmentId = MJEnvironmentEntityExtended.DefaultEnvironmentID;
         }
     }
-    /** Load saved panel size from UserInfoEngine */
-    loadSizePreferences() {
+    /** Load saved panel size and bubble position from UserInfoEngine */
+    loadPreferences() {
         try {
             const engine = UserInfoEngine.Instance;
             const raw = engine.GetSetting(ChatAgentsOverlayComponent.SIZE_SETTING_KEY);
@@ -362,17 +584,25 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
                 const prefs = JSON.parse(raw);
                 this.PanelWidth = this.clampWidth(prefs.width);
                 this.PanelHeight = this.clampHeight(prefs.height);
+                if (typeof prefs.bubbleOffsetY === 'number') {
+                    this.BubbleOffsetY = Math.max(0, prefs.bubbleOffsetY);
+                }
+                if (typeof prefs.bubbleHidden === 'boolean') {
+                    this.IsHidden = prefs.bubbleHidden;
+                }
             }
         }
         catch {
             // Use defaults on error
         }
     }
-    /** Persist panel size to UserInfoEngine (debounced) */
-    saveSizePreferences() {
+    /** Persist panel size and bubble position to UserInfoEngine (debounced) */
+    savePreferences() {
         const prefs = {
             width: this.PanelWidth,
-            height: this.PanelHeight
+            height: this.PanelHeight,
+            bubbleOffsetY: this.BubbleOffsetY,
+            bubbleHidden: this.IsHidden
         };
         UserInfoEngine.Instance.SetSettingDebounced(ChatAgentsOverlayComponent.SIZE_SETTING_KEY, JSON.stringify(prefs));
     }
@@ -385,6 +615,16 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
                 this.handleSwitchToOverlay(event);
             }
         });
+        // Allow arbitrary callers (Form Builder cockpit, etc.) to ask the
+        // overlay to expand. Idempotent if we're already expanded —
+        // Expand() is safe to call in any state.
+        this.bridge.ExpandOverlayRequested$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            if (this.State === 'collapsed') {
+                this.Expand();
+            }
+        });
         this.bridge.ActiveConversationID$
             .pipe(takeUntil(this.destroy$))
             .subscribe((id) => {
@@ -424,15 +664,15 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
         });
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵChatAgentsOverlayComponent_BaseFactory; return function ChatAgentsOverlayComponent_Factory(__ngFactoryType__) { return (ɵChatAgentsOverlayComponent_BaseFactory || (ɵChatAgentsOverlayComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ChatAgentsOverlayComponent)))(__ngFactoryType__ || ChatAgentsOverlayComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatAgentsOverlayComponent, selectors: [["mj-chat-agents-overlay"]], inputs: { IsVisible: "IsVisible", CurrentUser: "CurrentUser", EnvironmentId: "EnvironmentId", AppContext: "AppContext", EmptyStateGreeting: "EmptyStateGreeting" }, outputs: { VisibilityChanged: "VisibilityChanged", ToolExecuted: "ToolExecuted", ConversationSwitched: "ConversationSwitched", OpenFullChatWorkspace: "OpenFullChatWorkspace", NavigationRequested: "NavigationRequested", OpenEntityRecord: "OpenEntityRecord", TaskClicked: "TaskClicked" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["title", "Open Chat", 1, "chat-overlay-bubble"], [1, "chat-overlay-panel", 3, "maximized", "width", "height"], ["title", "Open Chat", 1, "chat-overlay-bubble", 3, "click"], [1, "fa-solid", "fa-comments", "chat-overlay-bubble-icon"], [1, "chat-overlay-badge"], [1, "chat-overlay-panel"], [1, "chat-overlay-header"], [1, "chat-overlay-title"], [1, "fa-solid", "fa-robot"], [1, "chat-overlay-header-actions"], ["title", "New conversation", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Open in full chat workspace", 1, "chat-overlay-header-btn"], [1, "chat-overlay-header-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Minimize", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-minus"], [1, "chat-overlay-body"], [3, "conversationCreated", "conversationRenamed", "pendingMessageConsumed", "openEntityRecord", "navigationRequest", "taskClicked", "environmentId", "currentUser", "conversationId", "conversation", "isNewConversation", "pendingMessage", "pendingAttachments", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "appContext", "emptyStateGreeting"], [1, "resize-handle", "resize-left", 3, "mousedown"], [1, "resize-handle", "resize-top", 3, "mousedown"], [1, "resize-handle", "resize-top-left", 3, "mousedown"], ["title", "Open in full chat workspace", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"]], template: function ChatAgentsOverlayComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, ChatAgentsOverlayComponent_Conditional_0_Template, 2, 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ChatAgentsOverlayComponent, selectors: [["mj-chat-agents-overlay"]], inputs: { IsVisible: "IsVisible", CurrentUser: "CurrentUser", EnvironmentId: "EnvironmentId", AppContext: "AppContext", EmptyStateGreeting: "EmptyStateGreeting", TopBoundaryPx: "TopBoundaryPx" }, outputs: { VisibilityChanged: "VisibilityChanged", ToolExecuted: "ToolExecuted", ConversationSwitched: "ConversationSwitched", OpenFullChatWorkspace: "OpenFullChatWorkspace", NavigationRequested: "NavigationRequested", OpenEntityRecord: "OpenEntityRecord", TaskClicked: "TaskClicked" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "chat-overlay-bubble", 3, "is-pressed", "is-dragging", "bottom"], ["type", "button", "title", "Open chat", "aria-label", "Open chat", 1, "chat-overlay-sliver", 3, "bottom"], [1, "chat-overlay-panel", 3, "maximized", "width", "height", "bottom"], [1, "chat-overlay-bubble", 3, "pointerdown"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-up", "chat-overlay-bubble-arrow", "chat-overlay-bubble-arrow-up"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down", "chat-overlay-bubble-arrow", "chat-overlay-bubble-arrow-down"], [1, "fa-solid", "fa-comments", "chat-overlay-bubble-icon"], [1, "chat-overlay-badge"], ["type", "button", "title", "Hide chat \u2014 a thin sliver will remain on the right edge", "aria-label", "Hide chat overlay", 1, "chat-overlay-bubble-close", 3, "pointerdown", "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["type", "button", "title", "Open chat", "aria-label", "Open chat", 1, "chat-overlay-sliver", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-comments", "chat-overlay-sliver-icon"], [1, "chat-overlay-badge", "chat-overlay-sliver-badge"], [1, "chat-overlay-panel"], [1, "chat-overlay-header"], [1, "chat-overlay-title"], [1, "fa-solid", "fa-robot"], [1, "chat-overlay-header-actions"], ["title", "New conversation", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Open in full chat workspace", 1, "chat-overlay-header-btn"], [1, "chat-overlay-header-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Minimize", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-minus"], [1, "chat-overlay-body"], [3, "conversationCreated", "conversationRenamed", "pendingMessageConsumed", "openEntityRecord", "navigationRequest", "taskClicked", "environmentId", "currentUser", "conversationId", "conversation", "isNewConversation", "pendingMessage", "pendingAttachments", "overlayMode", "showExportButton", "showShareButton", "showArtifactIndicator", "appContext", "emptyStateGreeting"], [1, "resize-handle", "resize-left", 3, "mousedown"], [1, "resize-handle", "resize-top", 3, "mousedown"], [1, "resize-handle", "resize-top-left", 3, "mousedown"], ["title", "Open in full chat workspace", 1, "chat-overlay-header-btn", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"]], template: function ChatAgentsOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ChatAgentsOverlayComponent_Conditional_0_Template, 3, 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.IsVisible ? 0 : -1);
-        } }, dependencies: [i1.ConversationChatAreaComponent], styles: ["\n\n\n\n\n\n\n\n\n.chat-overlay-bubble[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    width: 3.5rem;\n    height: 3.5rem;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n    z-index: 999;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    animation: _ngcontent-%COMP%_overlayBubbleIn 0.3s ease;\n}\n\n.chat-overlay-bubble[_ngcontent-%COMP%]:hover {\n    transform: scale(1.08);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes _ngcontent-%COMP%_overlayBubbleIn {\n    from {\n        transform: scale(0);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.chat-overlay-bubble-icon[_ngcontent-%COMP%] {\n    font-size: 1.3rem;\n}\n\n.chat-overlay-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    min-width: 1.2rem;\n    height: 1.2rem;\n    border-radius: 9999px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    font-size: 0.65rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.25rem;\n    border: 2px solid var(--mj-bg-page);\n}\n\n\n\n\n.chat-overlay-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-border-strong));\n    box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 2px 8px rgba(0, 0, 0, 0.15);\n    z-index: 999;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_overlayPanelIn 0.25s ease;\n    max-height: calc(100vh - 3rem);\n    max-width: calc(100vw - 3rem);\n}\n\n.chat-overlay-panel.maximized[_ngcontent-%COMP%] {\n    bottom: 1rem;\n    right: 1rem;\n    width: calc(100vw - 2rem) !important;\n    height: calc(100vh - 2rem) !important;\n    max-height: none;\n    max-width: none;\n    border-radius: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_overlayPanelIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9) translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n    }\n}\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    z-index: 2;\n}\n\n.resize-left[_ngcontent-%COMP%] {\n    left: -3px;\n    top: 20px;\n    bottom: 20px;\n    width: 6px;\n    cursor: ew-resize;\n}\n\n.resize-top[_ngcontent-%COMP%] {\n    top: -3px;\n    left: 20px;\n    right: 20px;\n    height: 6px;\n    cursor: ns-resize;\n}\n\n.resize-top-left[_ngcontent-%COMP%] {\n    top: -4px;\n    left: -4px;\n    width: 16px;\n    height: 16px;\n    cursor: nwse-resize;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    border-radius: 3px;\n}\n\n\n\n\n.chat-overlay-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.6rem 0.75rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n\n.chat-overlay-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n}\n\n.chat-overlay-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.chat-overlay-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.25rem;\n}\n\n.chat-overlay-header-btn[_ngcontent-%COMP%] {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.75rem;\n    transition: all 0.15s ease;\n}\n\n.chat-overlay-header-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n.chat-overlay-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.chat-overlay-body[_ngcontent-%COMP%]   mj-conversation-chat-area[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n\n\n\n@media (max-width: 480px) {\n    .chat-overlay-panel[_ngcontent-%COMP%] {\n        bottom: 0;\n        right: 0;\n        width: 100% !important;\n        height: 100vh !important;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .chat-overlay-bubble[_ngcontent-%COMP%] {\n        bottom: 1rem;\n        right: 1rem;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"] });
+        } }, dependencies: [i1.ConversationChatAreaComponent], styles: ["\n\n\n\n\n\n\n\n\n.chat-overlay-bubble[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    width: 3.5rem;\n    height: 3.5rem;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n    z-index: 2147483647;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    animation: _ngcontent-%COMP%_overlayBubbleIn 0.3s ease;\n    \n\n\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n\n\n\n\n\n\n.chat-overlay-bubble-arrow[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    color: var(--mj-text-muted);\n    font-size: 0.65rem;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.18s ease;\n}\n\n.chat-overlay-bubble-arrow-up[_ngcontent-%COMP%] {\n    top: -0.85rem;\n}\n\n.chat-overlay-bubble-arrow-down[_ngcontent-%COMP%] {\n    bottom: -0.85rem;\n}\n\n\n\n.chat-overlay-bubble[_ngcontent-%COMP%]:hover   .chat-overlay-bubble-arrow[_ngcontent-%COMP%], \n.chat-overlay-bubble.is-pressed[_ngcontent-%COMP%]   .chat-overlay-bubble-arrow[_ngcontent-%COMP%], \n.chat-overlay-bubble.is-dragging[_ngcontent-%COMP%]   .chat-overlay-bubble-arrow[_ngcontent-%COMP%] {\n    opacity: 0.85;\n}\n\n\n\n\n\n@media (hover: none) {\n    .chat-overlay-bubble-arrow[_ngcontent-%COMP%] {\n        opacity: 0.5;\n    }\n}\n\n.chat-overlay-bubble[_ngcontent-%COMP%]:hover {\n    transform: scale(1.08);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);\n}\n\n\n\n\n.chat-overlay-bubble.is-pressed[_ngcontent-%COMP%] {\n    cursor: grabbing;\n    transform: scale(0.94);\n    transition: transform 0.08s ease;\n    box-shadow:\n        0 2px 6px rgba(0, 0, 0, 0.25),\n        0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n\n\n.chat-overlay-bubble.is-dragging[_ngcontent-%COMP%] {\n    cursor: grabbing;\n    transform: scale(1.04);\n    transition: none;\n    box-shadow:\n        0 8px 28px rgba(0, 0, 0, 0.35),\n        0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_overlayBubbleIn {\n    from {\n        transform: scale(0);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.chat-overlay-bubble-icon[_ngcontent-%COMP%] {\n    font-size: 1.3rem;\n}\n\n.chat-overlay-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    min-width: 1.2rem;\n    height: 1.2rem;\n    border-radius: 9999px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    font-size: 0.65rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.25rem;\n    border: 2px solid var(--mj-bg-page);\n}\n\n\n\n\n\n.chat-overlay-bubble-close[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    \n\n\n\n    right: 100%;\n    transform: translateY(-50%);\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border-radius: 9999px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-strong);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.65rem;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n}\n\n.chat-overlay-bubble[_ngcontent-%COMP%]:hover   .chat-overlay-bubble-close[_ngcontent-%COMP%] {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n.chat-overlay-bubble-close[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-50%) scale(1.08);\n}\n\n\n\n@media (hover: none) {\n    .chat-overlay-bubble-close[_ngcontent-%COMP%] {\n        opacity: 0.7;\n        pointer-events: auto;\n    }\n}\n\n\n\n.chat-overlay-bubble.is-dragging[_ngcontent-%COMP%]   .chat-overlay-bubble-close[_ngcontent-%COMP%], \n.chat-overlay-bubble.is-pressed[_ngcontent-%COMP%]   .chat-overlay-bubble-close[_ngcontent-%COMP%] {\n    opacity: 0;\n    pointer-events: none;\n}\n\n\n\n\n.chat-overlay-sliver[_ngcontent-%COMP%] {\n    position: fixed;\n    right: 0;\n    width: 0.875rem;        \n\n    height: 5rem;           \n\n    padding: 0;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px 0 0 8px;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    z-index: 2147483647;\n    transition: width 0.18s ease, background 0.15s ease;\n    animation: _ngcontent-%COMP%_overlayBubbleIn 0.25s ease;\n}\n\n.chat-overlay-sliver[_ngcontent-%COMP%]:hover {\n    width: 1.5rem;          \n\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, white);\n}\n\n.chat-overlay-sliver-icon[_ngcontent-%COMP%] {\n    font-size: 0.55rem;\n    opacity: 0.95;\n}\n\n.chat-overlay-sliver[_ngcontent-%COMP%]:hover   .chat-overlay-sliver-icon[_ngcontent-%COMP%] {\n    font-size: 0.7rem;\n}\n\n.chat-overlay-sliver-badge[_ngcontent-%COMP%] {\n    \n\n    top: -6px;\n    right: -6px;\n}\n\n\n\n\n.chat-overlay-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-border-strong));\n    box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 2px 8px rgba(0, 0, 0, 0.15);\n    z-index: 2147483647;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_overlayPanelIn 0.25s ease;\n    max-height: calc(100vh - 3rem);\n    max-width: calc(100vw - 3rem);\n}\n\n.chat-overlay-panel.maximized[_ngcontent-%COMP%] {\n    bottom: 1rem;\n    right: 1rem;\n    width: calc(100vw - 2rem) !important;\n    height: calc(100vh - 2rem) !important;\n    max-height: none;\n    max-width: none;\n    border-radius: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_overlayPanelIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9) translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n    }\n}\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    z-index: 2;\n}\n\n.resize-left[_ngcontent-%COMP%] {\n    left: -3px;\n    top: 20px;\n    bottom: 20px;\n    width: 6px;\n    cursor: ew-resize;\n}\n\n.resize-top[_ngcontent-%COMP%] {\n    top: -3px;\n    left: 20px;\n    right: 20px;\n    height: 6px;\n    cursor: ns-resize;\n}\n\n.resize-top-left[_ngcontent-%COMP%] {\n    top: -4px;\n    left: -4px;\n    width: 16px;\n    height: 16px;\n    cursor: nwse-resize;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    border-radius: 3px;\n}\n\n\n\n\n.chat-overlay-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.6rem 0.75rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n\n.chat-overlay-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n}\n\n.chat-overlay-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.chat-overlay-header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.25rem;\n}\n\n.chat-overlay-header-btn[_ngcontent-%COMP%] {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.75rem;\n    transition: all 0.15s ease;\n}\n\n.chat-overlay-header-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n\n\n\n.chat-overlay-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.chat-overlay-body[_ngcontent-%COMP%]   mj-conversation-chat-area[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n\n\n\n\n\n\n@media (max-width: 640px) {\n    .chat-overlay-panel[_ngcontent-%COMP%] {\n        bottom: 0 !important;\n        right: 0;\n        width: 100% !important;\n        height: 100vh !important;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .chat-overlay-bubble[_ngcontent-%COMP%] {\n        \n\n\n\n\n        width: 2.75rem;\n        height: 2.75rem;\n        right: 1rem;\n    }\n\n    .chat-overlay-bubble-icon[_ngcontent-%COMP%] {\n        font-size: 1.1rem;\n    }\n\n    .chat-overlay-badge[_ngcontent-%COMP%] {\n        min-width: 1rem;\n        height: 1rem;\n        font-size: 0.6rem;\n        top: -3px;\n        right: -3px;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    \n\n    .chat-overlay-sliver[_ngcontent-%COMP%] {\n        width: 1.25rem;\n        height: 4.5rem;\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ChatAgentsOverlayComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-chat-agents-overlay', template: "@if (IsVisible) {\n    <!-- Floating Button (collapsed state) -->\n    @if (State === 'collapsed') {\n        <div class=\"chat-overlay-bubble\" (click)=\"Toggle()\" title=\"Open Chat\">\n            <i class=\"fa-solid fa-comments chat-overlay-bubble-icon\"></i>\n            @if (UnreadCount > 0) {\n                <span class=\"chat-overlay-badge\">{{ UnreadCount > 9 ? '9+' : UnreadCount }}</span>\n            }\n        </div>\n    }\n\n    <!-- Expanded / Maximized Chat Panel -->\n    @if (State === 'expanded' || State === 'maximized') {\n        <div class=\"chat-overlay-panel\"\n             [class.maximized]=\"State === 'maximized'\"\n             [style.width.px]=\"State === 'maximized' ? null : PanelWidth\"\n             [style.height.px]=\"State === 'maximized' ? null : PanelHeight\">\n\n            <!-- Resize handles (only in expanded, not maximized) -->\n            @if (State === 'expanded') {\n                <div class=\"resize-handle resize-left\"\n                     (mousedown)=\"OnResizeStart($event, 'left')\"></div>\n                <div class=\"resize-handle resize-top\"\n                     (mousedown)=\"OnResizeStart($event, 'top')\"></div>\n                <div class=\"resize-handle resize-top-left\"\n                     (mousedown)=\"OnResizeStart($event, 'top-left')\"></div>\n            }\n\n            <!-- Panel Header -->\n            <div class=\"chat-overlay-header\">\n                <div class=\"chat-overlay-title\">\n                    <i class=\"fa-solid fa-robot\"></i>\n                    <span>AI Assistant</span>\n                </div>\n                <div class=\"chat-overlay-header-actions\">\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        title=\"New conversation\"\n                        (click)=\"StartNewConversation()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                    </button>\n                    @if (ConversationId) {\n                        <button\n                            class=\"chat-overlay-header-btn\"\n                            title=\"Open in full chat workspace\"\n                            (click)=\"OnOpenFullChatWorkspace()\">\n                            <i class=\"fa-solid fa-up-right-from-square\"></i>\n                        </button>\n                    }\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        [title]=\"State === 'maximized' ? 'Restore size' : 'Maximize'\"\n                        (click)=\"ToggleMaximize()\">\n                        <i class=\"fa-solid\" [class.fa-expand]=\"State !== 'maximized'\" [class.fa-compress]=\"State === 'maximized'\"></i>\n                    </button>\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        title=\"Minimize\"\n                        (click)=\"Collapse()\">\n                        <i class=\"fa-solid fa-minus\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Chat Content \u2014 wraps conversation-chat-area -->\n            <div class=\"chat-overlay-body\">\n                <mj-conversation-chat-area\n                    [environmentId]=\"EnvironmentId\"\n                    [currentUser]=\"CurrentUser\"\n                    [conversationId]=\"ConversationId\"\n                    [conversation]=\"Conversation\"\n                    [isNewConversation]=\"IsNewConversation\"\n                    [pendingMessage]=\"PendingMessage\"\n                    [pendingAttachments]=\"PendingAttachments\"\n                    [overlayMode]=\"true\"\n                    [showExportButton]=\"false\"\n                    [showShareButton]=\"false\"\n                    [showArtifactIndicator]=\"false\"\n                    [appContext]=\"AppContext\"\n                    [emptyStateGreeting]=\"EmptyStateGreeting\"\n                    (conversationCreated)=\"OnConversationCreated($event)\"\n                    (conversationRenamed)=\"OnConversationRenamed($event)\"\n                    (pendingMessageConsumed)=\"OnPendingMessageConsumed()\"\n                    (openEntityRecord)=\"OnOpenEntityRecord($event)\"\n                    (navigationRequest)=\"OnNavigationRequest($event)\"\n                    (taskClicked)=\"OnTaskClicked($event)\"\n                ></mj-conversation-chat-area>\n            </div>\n        </div>\n    }\n}\n", styles: ["/* ============================================================\n   Chat Overlay \u2014 Floating Bubble + Expanding Panel\n   All colors use MJ design tokens (--mj-* CSS variables).\n   ============================================================ */\n\n/* --- Floating Bubble (collapsed state) --- */\n\n.chat-overlay-bubble {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    width: 3.5rem;\n    height: 3.5rem;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n    z-index: 999;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    animation: overlayBubbleIn 0.3s ease;\n}\n\n.chat-overlay-bubble:hover {\n    transform: scale(1.08);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes overlayBubbleIn {\n    from {\n        transform: scale(0);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.chat-overlay-bubble-icon {\n    font-size: 1.3rem;\n}\n\n.chat-overlay-badge {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    min-width: 1.2rem;\n    height: 1.2rem;\n    border-radius: 9999px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    font-size: 0.65rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.25rem;\n    border: 2px solid var(--mj-bg-page);\n}\n\n/* --- Expanded Panel --- */\n\n.chat-overlay-panel {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-border-strong));\n    box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 2px 8px rgba(0, 0, 0, 0.15);\n    z-index: 999;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: overlayPanelIn 0.25s ease;\n    max-height: calc(100vh - 3rem);\n    max-width: calc(100vw - 3rem);\n}\n\n.chat-overlay-panel.maximized {\n    bottom: 1rem;\n    right: 1rem;\n    width: calc(100vw - 2rem) !important;\n    height: calc(100vh - 2rem) !important;\n    max-height: none;\n    max-width: none;\n    border-radius: 12px;\n}\n\n@keyframes overlayPanelIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9) translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n    }\n}\n\n/* --- Resize Handles --- */\n\n.resize-handle {\n    position: absolute;\n    z-index: 2;\n}\n\n.resize-left {\n    left: -3px;\n    top: 20px;\n    bottom: 20px;\n    width: 6px;\n    cursor: ew-resize;\n}\n\n.resize-top {\n    top: -3px;\n    left: 20px;\n    right: 20px;\n    height: 6px;\n    cursor: ns-resize;\n}\n\n.resize-top-left {\n    top: -4px;\n    left: -4px;\n    width: 16px;\n    height: 16px;\n    cursor: nwse-resize;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    border-radius: 3px;\n}\n\n/* --- Panel Header --- */\n\n.chat-overlay-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.6rem 0.75rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n\n.chat-overlay-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n}\n\n.chat-overlay-title i {\n    color: var(--mj-brand-primary);\n}\n\n.chat-overlay-header-actions {\n    display: flex;\n    gap: 0.25rem;\n}\n\n.chat-overlay-header-btn {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.75rem;\n    transition: all 0.15s ease;\n}\n\n.chat-overlay-header-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* --- Panel Body --- */\n\n.chat-overlay-body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.chat-overlay-body mj-conversation-chat-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n/* --- Mobile Responsive --- */\n\n@media (max-width: 480px) {\n    .chat-overlay-panel {\n        bottom: 0;\n        right: 0;\n        width: 100% !important;\n        height: 100vh !important;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .chat-overlay-bubble {\n        bottom: 1rem;\n        right: 1rem;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-chat-agents-overlay', template: "@if (IsVisible) {\n    <!-- Floating Button (collapsed state, not hidden) -->\n    @if (State === 'collapsed' && !IsHidden) {\n        <div class=\"chat-overlay-bubble\"\n             [class.is-pressed]=\"IsBubblePressed\"\n             [class.is-dragging]=\"IsBubbleDragging\"\n             [style.bottom.px]=\"BubbleBottomPx\"\n             (pointerdown)=\"OnBubblePointerDown($event)\">\n            <i class=\"fa-solid fa-chevron-up chat-overlay-bubble-arrow chat-overlay-bubble-arrow-up\" aria-hidden=\"true\"></i>\n            <i class=\"fa-solid fa-chevron-down chat-overlay-bubble-arrow chat-overlay-bubble-arrow-down\" aria-hidden=\"true\"></i>\n            <i class=\"fa-solid fa-comments chat-overlay-bubble-icon\"></i>\n            @if (UnreadCount > 0) {\n                <span class=\"chat-overlay-badge\">{{ UnreadCount > 9 ? '9+' : UnreadCount }}</span>\n            }\n            <!-- Hide affordance: revealed on hover. pointerdown stops drag from starting; click hides the bubble. -->\n            <button type=\"button\"\n                    class=\"chat-overlay-bubble-close\"\n                    title=\"Hide chat \u2014 a thin sliver will remain on the right edge\"\n                    aria-label=\"Hide chat overlay\"\n                    (pointerdown)=\"$event.stopPropagation()\"\n                    (click)=\"Hide($event)\">\n                <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n    }\n\n    <!-- Collapsed sliver \u2014 flush with the right edge when the bubble is hidden.\n         Click opens the chat directly; closing returns to the bubble (not the\n         sliver). To re-enter hidden mode the user clicks the \u00D7 pill again. -->\n    @if (State === 'collapsed' && IsHidden) {\n        <button type=\"button\"\n                class=\"chat-overlay-sliver\"\n                title=\"Open chat\"\n                aria-label=\"Open chat\"\n                [style.bottom.px]=\"BubbleBottomPx\"\n                (click)=\"Expand()\">\n            <i class=\"fa-solid fa-comments chat-overlay-sliver-icon\" aria-hidden=\"true\"></i>\n            @if (UnreadCount > 0) {\n                <span class=\"chat-overlay-badge chat-overlay-sliver-badge\">{{ UnreadCount > 9 ? '9+' : UnreadCount }}</span>\n            }\n        </button>\n    }\n\n    <!-- Expanded / Maximized Chat Panel -->\n    @if (State === 'expanded' || State === 'maximized') {\n        <div class=\"chat-overlay-panel\"\n             [class.maximized]=\"State === 'maximized'\"\n             [style.width.px]=\"State === 'maximized' ? null : PanelWidth\"\n             [style.height.px]=\"State === 'maximized' ? null : PanelHeight\"\n             [style.bottom.px]=\"State === 'maximized' ? null : PanelBottomPx\">\n\n            <!-- Resize handles (only in expanded, not maximized) -->\n            @if (State === 'expanded') {\n                <div class=\"resize-handle resize-left\"\n                     (mousedown)=\"OnResizeStart($event, 'left')\"></div>\n                <div class=\"resize-handle resize-top\"\n                     (mousedown)=\"OnResizeStart($event, 'top')\"></div>\n                <div class=\"resize-handle resize-top-left\"\n                     (mousedown)=\"OnResizeStart($event, 'top-left')\"></div>\n            }\n\n            <!-- Panel Header -->\n            <div class=\"chat-overlay-header\">\n                <div class=\"chat-overlay-title\">\n                    <i class=\"fa-solid fa-robot\"></i>\n                    <span>AI Assistant</span>\n                </div>\n                <div class=\"chat-overlay-header-actions\">\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        title=\"New conversation\"\n                        (click)=\"StartNewConversation()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                    </button>\n                    @if (ConversationId) {\n                        <button\n                            class=\"chat-overlay-header-btn\"\n                            title=\"Open in full chat workspace\"\n                            (click)=\"OnOpenFullChatWorkspace()\">\n                            <i class=\"fa-solid fa-up-right-from-square\"></i>\n                        </button>\n                    }\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        [title]=\"State === 'maximized' ? 'Restore size' : 'Maximize'\"\n                        (click)=\"ToggleMaximize()\">\n                        <i class=\"fa-solid\" [class.fa-expand]=\"State !== 'maximized'\" [class.fa-compress]=\"State === 'maximized'\"></i>\n                    </button>\n                    <button\n                        class=\"chat-overlay-header-btn\"\n                        title=\"Minimize\"\n                        (click)=\"Collapse()\">\n                        <i class=\"fa-solid fa-minus\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Chat Content \u2014 wraps conversation-chat-area -->\n            <div class=\"chat-overlay-body\">\n                <mj-conversation-chat-area\n                    [environmentId]=\"EnvironmentId\"\n                    [currentUser]=\"CurrentUser\"\n                    [conversationId]=\"ConversationId\"\n                    [conversation]=\"Conversation\"\n                    [isNewConversation]=\"IsNewConversation\"\n                    [pendingMessage]=\"PendingMessage\"\n                    [pendingAttachments]=\"PendingAttachments\"\n                    [overlayMode]=\"true\"\n                    [showExportButton]=\"false\"\n                    [showShareButton]=\"false\"\n                    [showArtifactIndicator]=\"false\"\n                    [appContext]=\"AppContext\"\n                    [emptyStateGreeting]=\"EmptyStateGreeting\"\n                    (conversationCreated)=\"OnConversationCreated($event)\"\n                    (conversationRenamed)=\"OnConversationRenamed($event)\"\n                    (pendingMessageConsumed)=\"OnPendingMessageConsumed()\"\n                    (openEntityRecord)=\"OnOpenEntityRecord($event)\"\n                    (navigationRequest)=\"OnNavigationRequest($event)\"\n                    (taskClicked)=\"OnTaskClicked($event)\"\n                ></mj-conversation-chat-area>\n            </div>\n        </div>\n    }\n}\n", styles: ["/* ============================================================\n   Chat Overlay \u2014 Floating Bubble + Expanding Panel\n   All colors use MJ design tokens (--mj-* CSS variables).\n   ============================================================ */\n\n/* --- Floating Bubble (collapsed state) --- */\n\n.chat-overlay-bubble {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    width: 3.5rem;\n    height: 3.5rem;\n    border-radius: 50%;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n    z-index: 2147483647;\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n    animation: overlayBubbleIn 0.3s ease;\n    /* Required for touch drag: blocks browser pan/zoom so pointermove fires\n       continuously instead of being swallowed by scroll-handling. */\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n}\n\n/* Subtle up/down chevrons just outside the bubble, hinting that it can be\n   dragged vertically. On hover-capable devices (mouse/pen) they stay hidden\n   in the resting state and reveal on hover/press/drag \u2014 keeps the corner\n   visually clean. On touch-only devices (no hover) they're always visible at\n   low opacity so the affordance is discoverable without needing a hover. */\n.chat-overlay-bubble-arrow {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    color: var(--mj-text-muted);\n    font-size: 0.65rem;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.18s ease;\n}\n\n.chat-overlay-bubble-arrow-up {\n    top: -0.85rem;\n}\n\n.chat-overlay-bubble-arrow-down {\n    bottom: -0.85rem;\n}\n\n/* Hover-capable devices: reveal on hover, press, or active drag. */\n.chat-overlay-bubble:hover .chat-overlay-bubble-arrow,\n.chat-overlay-bubble.is-pressed .chat-overlay-bubble-arrow,\n.chat-overlay-bubble.is-dragging .chat-overlay-bubble-arrow {\n    opacity: 0.85;\n}\n\n/* Touch-only devices (no hover): always show at subtle opacity. The\n   :hover/.is-pressed/.is-dragging rules above still apply via higher\n   specificity, so touching the bubble briefly bumps them to 0.85. */\n@media (hover: none) {\n    .chat-overlay-bubble-arrow {\n        opacity: 0.5;\n    }\n}\n\n.chat-overlay-bubble:hover {\n    transform: scale(1.08);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);\n}\n\n/* Immediate press feedback \u2014 fires on mousedown before the drag threshold is crossed,\n   so the user sees \"I'm being held\" right away and learns the bubble is draggable. */\n.chat-overlay-bubble.is-pressed {\n    cursor: grabbing;\n    transform: scale(0.94);\n    transition: transform 0.08s ease;\n    box-shadow:\n        0 2px 6px rgba(0, 0, 0, 0.25),\n        0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n/* Active drag \u2014 overrides the press state once movement passes the threshold. */\n.chat-overlay-bubble.is-dragging {\n    cursor: grabbing;\n    transform: scale(1.04);\n    transition: none;\n    box-shadow:\n        0 8px 28px rgba(0, 0, 0, 0.35),\n        0 0 0 4px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n@keyframes overlayBubbleIn {\n    from {\n        transform: scale(0);\n        opacity: 0;\n    }\n    to {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n.chat-overlay-bubble-icon {\n    font-size: 1.3rem;\n}\n\n.chat-overlay-badge {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    min-width: 1.2rem;\n    height: 1.2rem;\n    border-radius: 9999px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    font-size: 0.65rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.25rem;\n    border: 2px solid var(--mj-bg-page);\n}\n\n/* --- Hide-bubble affordance (\"\u00D7\" pill on the outer-left edge of the bubble) ---\n   Revealed on hover. Touch-only devices (no hover) get a permanent low-opacity\n   render so the affordance is reachable without a hover gesture. */\n.chat-overlay-bubble-close {\n    position: absolute;\n    top: 50%;\n    /* Sits flush with the bubble's left bounding-box edge \u2014 no dead-zone gap that\n       would drop the :hover state mid-reach. The bubble's circular shape means the\n       visible space between the circle and the pill still reads as a gap. */\n    right: 100%;\n    transform: translateY(-50%);\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border-radius: 9999px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-strong);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.65rem;\n    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;\n}\n\n.chat-overlay-bubble:hover .chat-overlay-bubble-close {\n    opacity: 1;\n    pointer-events: auto;\n}\n\n.chat-overlay-bubble-close:hover {\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-50%) scale(1.08);\n}\n\n/* Touch devices: keep the pill reachable without a hover gesture. */\n@media (hover: none) {\n    .chat-overlay-bubble-close {\n        opacity: 0.7;\n        pointer-events: auto;\n    }\n}\n\n/* While actively dragging, suppress the close pill \u2014 it shouldn't compete with the drag affordance. */\n.chat-overlay-bubble.is-dragging .chat-overlay-bubble-close,\n.chat-overlay-bubble.is-pressed .chat-overlay-bubble-close {\n    opacity: 0;\n    pointer-events: none;\n}\n\n/* --- Collapsed sliver (right edge, replaces bubble when hidden) --- */\n\n.chat-overlay-sliver {\n    position: fixed;\n    right: 0;\n    width: 0.875rem;        /* 14px sliver */\n    height: 5rem;           /* 80px tall */\n    padding: 0;\n    background: var(--mj-brand-primary);\n    border: none;\n    border-radius: 8px 0 0 8px;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n    z-index: 2147483647;\n    transition: width 0.18s ease, background 0.15s ease;\n    animation: overlayBubbleIn 0.25s ease;\n}\n\n.chat-overlay-sliver:hover {\n    width: 1.5rem;          /* widens slightly to invite the click */\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, white);\n}\n\n.chat-overlay-sliver-icon {\n    font-size: 0.55rem;\n    opacity: 0.95;\n}\n\n.chat-overlay-sliver:hover .chat-overlay-sliver-icon {\n    font-size: 0.7rem;\n}\n\n.chat-overlay-sliver-badge {\n    /* Pull the badge a hair outside the sliver so it isn't clipped by the narrow width. */\n    top: -6px;\n    right: -6px;\n}\n\n/* --- Expanded Panel --- */\n\n.chat-overlay-panel {\n    position: fixed;\n    bottom: 1.5rem;\n    right: 1.5rem;\n    border-radius: 12px;\n    background: var(--mj-bg-surface);\n    border: 2px solid color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-border-strong));\n    box-shadow:\n        0 8px 32px rgba(0, 0, 0, 0.3),\n        0 2px 8px rgba(0, 0, 0, 0.15);\n    z-index: 2147483647;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: overlayPanelIn 0.25s ease;\n    max-height: calc(100vh - 3rem);\n    max-width: calc(100vw - 3rem);\n}\n\n.chat-overlay-panel.maximized {\n    bottom: 1rem;\n    right: 1rem;\n    width: calc(100vw - 2rem) !important;\n    height: calc(100vh - 2rem) !important;\n    max-height: none;\n    max-width: none;\n    border-radius: 12px;\n}\n\n@keyframes overlayPanelIn {\n    from {\n        opacity: 0;\n        transform: scale(0.9) translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n    }\n}\n\n/* --- Resize Handles --- */\n\n.resize-handle {\n    position: absolute;\n    z-index: 2;\n}\n\n.resize-left {\n    left: -3px;\n    top: 20px;\n    bottom: 20px;\n    width: 6px;\n    cursor: ew-resize;\n}\n\n.resize-top {\n    top: -3px;\n    left: 20px;\n    right: 20px;\n    height: 6px;\n    cursor: ns-resize;\n}\n\n.resize-top-left {\n    top: -4px;\n    left: -4px;\n    width: 16px;\n    height: 16px;\n    cursor: nwse-resize;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    border-radius: 3px;\n}\n\n/* --- Panel Header --- */\n\n.chat-overlay-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.6rem 0.75rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n\n.chat-overlay-title {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-weight: 600;\n    font-size: 0.9rem;\n    color: var(--mj-text-primary);\n}\n\n.chat-overlay-title i {\n    color: var(--mj-brand-primary);\n}\n\n.chat-overlay-header-actions {\n    display: flex;\n    gap: 0.25rem;\n}\n\n.chat-overlay-header-btn {\n    width: 1.75rem;\n    height: 1.75rem;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.75rem;\n    transition: all 0.15s ease;\n}\n\n.chat-overlay-header-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n\n/* --- Panel Body --- */\n\n.chat-overlay-body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.chat-overlay-body mj-conversation-chat-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n/* --- Mobile / Small-Screen Responsive ---\n   640px = small-screen cutoff (covers all phones in both orientations). Tablets\n   in portrait (\u2265768px) keep the floating-panel treatment because they have the\n   real estate for it. */\n\n@media (max-width: 640px) {\n    .chat-overlay-panel {\n        bottom: 0 !important;\n        right: 0;\n        width: 100% !important;\n        height: 100vh !important;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .chat-overlay-bubble {\n        /* No !important on `bottom` \u2014 the inline [style.bottom.px] binding owns it\n           so users can drag the bubble out of the way of underlying app buttons.\n           Smaller diameter on small screens: 2.75rem (44px) hits the WCAG minimum\n           touch target while ~38% less occluding than the desktop 3.5rem. */\n        width: 2.75rem;\n        height: 2.75rem;\n        right: 1rem;\n    }\n\n    .chat-overlay-bubble-icon {\n        font-size: 1.1rem;\n    }\n\n    .chat-overlay-badge {\n        min-width: 1rem;\n        height: 1rem;\n        font-size: 0.6rem;\n        top: -3px;\n        right: -3px;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    /* Slightly wider sliver on touch so it meets the WCAG minimum touch target. */\n    .chat-overlay-sliver {\n        width: 1.25rem;\n        height: 4.5rem;\n    }\n}\n"] }]
     }], null, { IsVisible: [{
             type: Input
         }], CurrentUser: [{
@@ -443,6 +683,8 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
             type: Input
         }], EmptyStateGreeting: [{
             type: Input
+        }], TopBoundaryPx: [{
+            type: Input
         }], VisibilityChanged: [{
             type: Output
         }], ToolExecuted: [{
@@ -458,5 +700,5 @@ export class ChatAgentsOverlayComponent extends BaseAngularComponent {
         }], TaskClicked: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChatAgentsOverlayComponent, { className: "ChatAgentsOverlayComponent", filePath: "src/lib/components/overlay/chat-overlay.component.ts", lineNumber: 59 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChatAgentsOverlayComponent, { className: "ChatAgentsOverlayComponent", filePath: "src/lib/components/overlay/chat-overlay.component.ts", lineNumber: 63 }); })();
 //# sourceMappingURL=chat-overlay.component.js.map