@acorex/components 20.6.7 → 20.6.9

package/fesm2022/acorex-components-conversation2.mjs

@@ -58,57 +58,6 @@ import { AXBasePageComponent } from '@acorex/components/page';
  * Common types used across all API services
  */
 
-/**
- * Abstract User Management API
- * Handle user profile management and user operations for conversations
- */
-/**
- * Abstract User Management API
- *
- * Implement this abstract class to handle user management for conversations.
- *
- * @example
- * ```typescript
- * @Injectable()
- * export class MyUserApi extends AXUserApi {
- *   constructor(private http: HttpClient) {
- *     super();
- *   }
- *
- *   async getCurrentUser(): Promise<AXParticipant> {
- *     const response = await this.http.get('/api/users/me').toPromise();
- *     return response;
- *   }
- *
- *   // ... implement other methods
- * }
- * ```
- */
-class AXUserApi {
-    // =====================
-    // Error Handling Helper
-    // =====================
-    /**
-     * Create an API error
-     * Helper method for consistent error creation
-     *
-     * @param code - Error code
-     * @param message - Error message
-     * @param statusCode - HTTP status code
-     * @param details - Additional details
-     * @returns API error object
-     */
-    createError(code, message, statusCode, details) {
-        return {
-            code,
-            message,
-            statusCode,
-            details,
-            timestamp: new Date(),
-        };
-    }
-}
-
 /**
  * Abstract Conversation Management API
  * Handle conversation CRUD operations, participants, and settings
@@ -252,6 +201,57 @@ class AXMessageApi {
 class AXRealtimeApi {
 }
 
+/**
+ * Abstract User Management API
+ * Handle user profile management and user operations for conversations
+ */
+/**
+ * Abstract User Management API
+ *
+ * Implement this abstract class to handle user management for conversations.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class MyUserApi extends AXUserApi {
+ *   constructor(private http: HttpClient) {
+ *     super();
+ *   }
+ *
+ *   async getCurrentUser(): Promise<AXParticipant> {
+ *     const response = await this.http.get('/api/users/me').toPromise();
+ *     return response;
+ *   }
+ *
+ *   // ... implement other methods
+ * }
+ * ```
+ */
+class AXUserApi {
+    // =====================
+    // Error Handling Helper
+    // =====================
+    /**
+     * Create an API error
+     * Helper method for consistent error creation
+     *
+     * @param code - Error code
+     * @param message - Error message
+     * @param statusCode - HTTP status code
+     * @param details - Additional details
+     * @returns API error object
+     */
+    createError(code, message, statusCode, details) {
+        return {
+            code,
+            message,
+            statusCode,
+            details,
+            timestamp: new Date(),
+        };
+    }
+}
+
 /**
  * API Services
  * Export all abstract API classes and types
@@ -11129,58 +11129,71 @@ function getDefaultConversationItemActions() {
  * Default Conversation Tabs Plugin
  * Provides sidebar conversation filter tabs (all, private, groups, etc.)
  */
+function conversationHasUnread(c) {
+    return (c.unreadCount ?? 0) > 0;
+}
+/** Number of conversations (in the same scope as each tab's `filter`) that have any unread messages — not sum of unread counts. */
+function countConversationsWithUnreadInScope(conversations, scope) {
+    const n = scope(conversations).filter(conversationHasUnread).length;
+    return n || undefined;
+}
 // Individual conversation tab constants (no aggregate arrays)
 const AX_CONVERSATION_TAB_ALL = {
     id: 'all',
     label: 'All',
-    icon: 'chat',
+    icon: 'fa-light fa-comments',
     priority: 100,
     filter: (conversations) => conversations,
-    badge: (conversations) => conversations.length || undefined,
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c),
     default: true,
 };
 const AX_CONVERSATION_TAB_PRIVATE = {
     id: 'private',
     label: 'Private',
-    icon: 'person',
+    icon: 'fa-light fa-user',
     priority: 90,
     filter: (conversations) => conversations.filter((c) => c.type === 'private'),
-    badge: (conversations) => conversations.filter((c) => c.type === 'private').length || undefined,
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.type === 'private')),
 };
 const AX_CONVERSATION_TAB_GROUPS = {
     id: 'groups',
     label: 'Groups',
-    icon: 'group',
+    icon: 'fa-light fa-users',
     priority: 80,
     filter: (conversations) => conversations.filter((c) => c.type === 'group'),
-    badge: (conversations) => conversations.filter((c) => c.type === 'group').length || undefined,
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.type === 'group')),
 };
 const AX_CONVERSATION_TAB_CHANNELS = {
     id: 'channels',
     label: 'Channels',
-    icon: 'campaign',
+    icon: 'fa-light fa-hashtag',
     priority: 70,
     filter: (conversations) => conversations.filter((c) => c.type === 'channel'),
-    badge: (conversations) => conversations.filter((c) => c.type === 'channel').length || undefined,
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.type === 'channel')),
+};
+const AX_CONVERSATION_TAB_BOT = {
+    id: 'bot',
+    label: 'Bots',
+    icon: 'fa-light fa-robot',
+    priority: 65,
+    filter: (conversations) => conversations.filter((c) => c.type === 'bot'),
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.type === 'bot')),
 };
 const AX_CONVERSATION_TAB_UNREAD = {
     id: 'unread',
     label: 'Unread',
-    icon: 'mark_chat_unread',
+    icon: 'fa-light fa-envelope',
     priority: 60,
     filter: (conversations) => conversations.filter((c) => c.unreadCount > 0),
-    badge: (conversations) => {
-        const unreadCount = conversations.reduce((sum, c) => sum + c.unreadCount, 0);
-        return unreadCount || undefined;
-    },
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.unreadCount > 0)),
 };
 const AX_CONVERSATION_TAB_ARCHIVED = {
     id: 'archived',
     label: 'Archived',
-    icon: 'archive',
+    icon: 'fa-light fa-archive',
     priority: 50,
     filter: (conversations) => conversations.filter((c) => c.archived),
-    badge: (conversations) => conversations.filter((c) => c.archived).length || undefined,
+    badge: (conversations) => countConversationsWithUnreadInScope(conversations, (c) => c.filter((x) => x.archived)),
     enabled: false, // Disabled by default
 };
 
@@ -14717,6 +14730,10 @@ class AXInfoBarComponent {
             <ax-avatar [size]="48">
               @if (conversation.avatar) {
                 <ax-image [src]="conversation.avatar" alt="{{ conversation.title }}"></ax-image>
+              } @else if (conversation.icon) {
+                <ax-icon
+                  ><i [class]="'info-bar-avatar-icon ' + conversation.icon" aria-hidden="true"></i
+                ></ax-icon>
               } @else {
                 <ax-label>{{ getInitials(conversation.title) }}</ax-label>
               }
@@ -14833,7 +14850,7 @@ class AXInfoBarComponent {
         </div>
       }
     }
-  `, isInline: true, styles: [":host{display:block}.info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:.5rem;line-height:1.1rem;min-height:64px;gap:.75rem}.info-banner{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface),.5);border-bottom:1px solid rgba(var(--ax-sys-color-border-surface),.25);background:rgb(var(--ax-sys-color-primary-lightest-surface));box-shadow:0 6px 16px rgb(var(--ax-sys-color-on-surface),.08),0 2px 6px rgb(var(--ax-sys-color-on-surface),.05)}.info-banner__content{flex:1;min-width:0}.info-banner__close{flex-shrink:0}.info-bar-empty{justify-content:center;opacity:.6}.info-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.info-details{flex:1;min-width:0}.info-title{margin:0;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-subtitle-with-status{display:flex;align-items:center;gap:.375rem;margin:.125rem 0 0}.online-badge{color:#22c55e;font-size:.625rem;line-height:1;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.info-subtitle{margin:0;font-size:.85rem;letter-spacing:.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.info-subtitle.clickable{cursor:pointer;transition:opacity .2s}.info-subtitle.clickable:hover{opacity:1;text-decoration:underline}.info-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.info-component-fullwidth{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;background:rgb(var(--ax-sys-color-lightest-surface));z-index:10}.slide-in{animation:slideInFromRight var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.slide-out{opacity:0;transform:translate(100%);transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}.info-component-fullwidth>*:first-child{flex:1;min-width:0}.action-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:.5rem;font-size:1.25rem;cursor:pointer;transition:background .2s}.action-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.search-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:200px}.search-input{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMembersPopoverComponent, selector: "ax-conversation-members-popover", inputs: ["conversation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:.5rem;line-height:1.1rem;min-height:64px;gap:.75rem}.info-banner{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface),.5);border-bottom:1px solid rgba(var(--ax-sys-color-border-surface),.25);background:rgb(var(--ax-sys-color-primary-lightest-surface));box-shadow:0 6px 16px rgb(var(--ax-sys-color-on-surface),.08),0 2px 6px rgb(var(--ax-sys-color-on-surface),.05)}.info-banner__content{flex:1;min-width:0}.info-banner__close{flex-shrink:0}.info-bar-empty{justify-content:center;opacity:.6}.info-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.avatar-wrapper ax-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.info-bar-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.info-details{flex:1;min-width:0}.info-title{margin:0;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-subtitle-with-status{display:flex;align-items:center;gap:.375rem;margin:.125rem 0 0}.online-badge{color:#22c55e;font-size:.625rem;line-height:1;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.info-subtitle{margin:0;font-size:.85rem;letter-spacing:.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.info-subtitle.clickable{cursor:pointer;transition:opacity .2s}.info-subtitle.clickable:hover{opacity:1;text-decoration:underline}.info-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.info-component-fullwidth{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;background:rgb(var(--ax-sys-color-lightest-surface));z-index:10}.slide-in{animation:slideInFromRight var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.slide-out{opacity:0;transform:translate(100%);transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}.info-component-fullwidth>*:first-child{flex:1;min-width:0}.action-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:.5rem;font-size:1.25rem;cursor:pointer;transition:background .2s}.action-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.search-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:200px}.search-input{flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMembersPopoverComponent, selector: "ax-conversation-members-popover", inputs: ["conversation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfoBarComponent, decorators: [{
             type: Component,
@@ -14864,6 +14881,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             <ax-avatar [size]="48">
               @if (conversation.avatar) {
                 <ax-image [src]="conversation.avatar" alt="{{ conversation.title }}"></ax-image>
+              } @else if (conversation.icon) {
+                <ax-icon
+                  ><i [class]="'info-bar-avatar-icon ' + conversation.icon" aria-hidden="true"></i
+                ></ax-icon>
               } @else {
                 <ax-label>{{ getInitials(conversation.title) }}</ax-label>
               }
@@ -14980,7 +15001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         </div>
       }
     }
-  `, styles: [":host{display:block}.info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:.5rem;line-height:1.1rem;min-height:64px;gap:.75rem}.info-banner{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface),.5);border-bottom:1px solid rgba(var(--ax-sys-color-border-surface),.25);background:rgb(var(--ax-sys-color-primary-lightest-surface));box-shadow:0 6px 16px rgb(var(--ax-sys-color-on-surface),.08),0 2px 6px rgb(var(--ax-sys-color-on-surface),.05)}.info-banner__content{flex:1;min-width:0}.info-banner__close{flex-shrink:0}.info-bar-empty{justify-content:center;opacity:.6}.info-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.info-details{flex:1;min-width:0}.info-title{margin:0;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-subtitle-with-status{display:flex;align-items:center;gap:.375rem;margin:.125rem 0 0}.online-badge{color:#22c55e;font-size:.625rem;line-height:1;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.info-subtitle{margin:0;font-size:.85rem;letter-spacing:.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.info-subtitle.clickable{cursor:pointer;transition:opacity .2s}.info-subtitle.clickable:hover{opacity:1;text-decoration:underline}.info-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.info-component-fullwidth{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;background:rgb(var(--ax-sys-color-lightest-surface));z-index:10}.slide-in{animation:slideInFromRight var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.slide-out{opacity:0;transform:translate(100%);transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}.info-component-fullwidth>*:first-child{flex:1;min-width:0}.action-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:.5rem;font-size:1.25rem;cursor:pointer;transition:background .2s}.action-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.search-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:200px}.search-input{flex:1;min-width:0}\n"] }]
+  `, styles: [":host{display:block}.info-bar{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;padding:.5rem;line-height:1.1rem;min-height:64px;gap:.75rem}.info-banner{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface),.5);border-bottom:1px solid rgba(var(--ax-sys-color-border-surface),.25);background:rgb(var(--ax-sys-color-primary-lightest-surface));box-shadow:0 6px 16px rgb(var(--ax-sys-color-on-surface),.08),0 2px 6px rgb(var(--ax-sys-color-on-surface),.05)}.info-banner__content{flex:1;min-width:0}.info-banner__close{flex-shrink:0}.info-bar-empty{justify-content:center;opacity:.6}.info-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.avatar-wrapper ax-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.info-bar-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.info-details{flex:1;min-width:0}.info-title{margin:0;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-subtitle-with-status{display:flex;align-items:center;gap:.375rem;margin:.125rem 0 0}.online-badge{color:#22c55e;font-size:.625rem;line-height:1;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.info-subtitle{margin:0;font-size:.85rem;letter-spacing:.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}.info-subtitle.clickable{cursor:pointer;transition:opacity .2s}.info-subtitle.clickable:hover{opacity:1;text-decoration:underline}.info-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.info-component-fullwidth{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;background:rgb(var(--ax-sys-color-lightest-surface));z-index:10}.slide-in{animation:slideInFromRight var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.slide-out{opacity:0;transform:translate(100%);transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}.info-component-fullwidth>*:first-child{flex:1;min-width:0}.action-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:.5rem;font-size:1.25rem;cursor:pointer;transition:background .2s}.action-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.search-container{display:flex;align-items:center;gap:.5rem;width:100%;min-width:200px}.search-input{flex:1;min-width:0}\n"] }]
         }] });
 
 class AXForwardMessageDialogComponent {
@@ -15370,14 +15391,12 @@ class AXMessageListEmptyDefaultComponent {
                     return 'conversation';
             }
         }, ...(ngDevMode ? [{ debugName: "conversationKindLabel" }] : []));
-        this.conversationPreposition = computed(() => this.conversation().type === 'private' ? 'with' : 'in', ...(ngDevMode ? [{ debugName: "conversationPreposition" }] : []));
+        this.conversationPreposition = computed(() => (this.conversation().type === 'private' ? 'with' : 'in'), ...(ngDevMode ? [{ debugName: "conversationPreposition" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListEmptyDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXMessageListEmptyDefaultComponent, isStandalone: true, selector: "ax-conversation-message-list-empty-default", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ax-message-empty-host" }, ngImport: i0, template: `
     <div class="ax-message-empty" role="status" aria-label="No messages in this conversation">
       <div class="ax-message-empty__ambient" aria-hidden="true">
-        <span class="ax-message-empty__orb ax-message-empty__orb--a"></span>
-        <span class="ax-message-empty__orb ax-message-empty__orb--b"></span>
         <span class="ax-message-empty__grid"></span>
       </div>
 
@@ -15393,11 +15412,12 @@ class AXMessageListEmptyDefaultComponent {
         <h3 class="ax-message-empty__title">No messages yet</h3>
         <p class="ax-message-empty__desc">
           Start the {{ conversationKindLabel() }} {{ conversationPreposition() }}
-          <span class="ax-message-empty__name">{{ conversation().title }}</span>.
+          <span class="ax-message-empty__name">{{ conversation().title }}</span
+          >.
         </p>
       </div>
     </div>
-  `, isInline: true, styles: [":host.ax-message-empty-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-empty{position:relative;isolation:isolate;padding:.25rem}.ax-message-empty__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-empty__orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.45;animation:ax-empty-float 14s ease-in-out infinite}.ax-message-empty__orb--a{width:min(14rem,55vw);height:min(14rem,55vw);top:-5%;left:50%;translate:-50% 0;background:radial-gradient(circle at 30% 30%,rgba(var(--ax-sys-color-primary-400),.55),rgba(var(--ax-sys-color-primary-600),.12) 55%,transparent 70%)}.ax-message-empty__orb--b{width:min(11rem,45vw);height:min(11rem,45vw);bottom:-10%;right:-5%;background:radial-gradient(circle at 70% 60%,rgba(var(--ax-sys-color-primary-300),.35),rgba(var(--ax-sys-color-primary-500),.08) 50%,transparent 68%);animation-delay:-7s}.ax-message-empty__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-empty__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));box-shadow:0 0 0 1px rgba(var(--ax-sys-color-on-surface),.03) inset,0 24px 48px -28px rgba(var(--ax-sys-color-on-surface),.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-empty-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-empty__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-empty__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-empty-pulse 3.2s ease-in-out infinite}.ax-message-empty__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22);box-shadow:0 1px rgba(var(--ax-sys-color-on-primary-surface),.06) inset,0 12px 28px -16px rgba(var(--ax-sys-color-primary-600),.45)}.ax-message-empty__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-empty__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-empty__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-empty__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}.ax-message-empty__name{font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.88}@keyframes ax-empty-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-empty-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-empty-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-empty__orb,.ax-message-empty__pulse,.ax-message-empty__card{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host.ax-message-empty-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-empty{position:relative;isolation:isolate;padding:.25rem}.ax-message-empty__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-empty__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-empty__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));box-shadow:0 0 0 1px rgba(var(--ax-sys-color-on-surface),.03) inset,0 24px 48px -28px rgba(var(--ax-sys-color-on-surface),.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-empty-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-empty__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-empty__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-empty-pulse 3.2s ease-in-out infinite}.ax-message-empty__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22);box-shadow:0 1px rgba(var(--ax-sys-color-on-primary-surface),.06) inset,0 12px 28px -16px rgba(var(--ax-sys-color-primary-600),.45)}.ax-message-empty__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-empty__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-empty__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-empty__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}.ax-message-empty__name{font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.88}@keyframes ax-empty-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-empty-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-empty-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-empty__pulse,.ax-message-empty__card{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListEmptyDefaultComponent, decorators: [{
             type: Component,
@@ -15406,8 +15426,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     }, template: `
     <div class="ax-message-empty" role="status" aria-label="No messages in this conversation">
       <div class="ax-message-empty__ambient" aria-hidden="true">
-        <span class="ax-message-empty__orb ax-message-empty__orb--a"></span>
-        <span class="ax-message-empty__orb ax-message-empty__orb--b"></span>
         <span class="ax-message-empty__grid"></span>
       </div>
 
@@ -15423,11 +15441,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         <h3 class="ax-message-empty__title">No messages yet</h3>
         <p class="ax-message-empty__desc">
           Start the {{ conversationKindLabel() }} {{ conversationPreposition() }}
-          <span class="ax-message-empty__name">{{ conversation().title }}</span>.
+          <span class="ax-message-empty__name">{{ conversation().title }}</span
+          >.
         </p>
       </div>
     </div>
-  `, styles: [":host.ax-message-empty-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-empty{position:relative;isolation:isolate;padding:.25rem}.ax-message-empty__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-empty__orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.45;animation:ax-empty-float 14s ease-in-out infinite}.ax-message-empty__orb--a{width:min(14rem,55vw);height:min(14rem,55vw);top:-5%;left:50%;translate:-50% 0;background:radial-gradient(circle at 30% 30%,rgba(var(--ax-sys-color-primary-400),.55),rgba(var(--ax-sys-color-primary-600),.12) 55%,transparent 70%)}.ax-message-empty__orb--b{width:min(11rem,45vw);height:min(11rem,45vw);bottom:-10%;right:-5%;background:radial-gradient(circle at 70% 60%,rgba(var(--ax-sys-color-primary-300),.35),rgba(var(--ax-sys-color-primary-500),.08) 50%,transparent 68%);animation-delay:-7s}.ax-message-empty__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-empty__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));box-shadow:0 0 0 1px rgba(var(--ax-sys-color-on-surface),.03) inset,0 24px 48px -28px rgba(var(--ax-sys-color-on-surface),.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-empty-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-empty__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-empty__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-empty-pulse 3.2s ease-in-out infinite}.ax-message-empty__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22);box-shadow:0 1px rgba(var(--ax-sys-color-on-primary-surface),.06) inset,0 12px 28px -16px rgba(var(--ax-sys-color-primary-600),.45)}.ax-message-empty__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-empty__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-empty__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-empty__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}.ax-message-empty__name{font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.88}@keyframes ax-empty-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-empty-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-empty-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-empty__orb,.ax-message-empty__pulse,.ax-message-empty__card{animation:none}}\n"] }]
+  `, styles: [":host.ax-message-empty-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-empty{position:relative;isolation:isolate;padding:.25rem}.ax-message-empty__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-empty__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-empty__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));box-shadow:0 0 0 1px rgba(var(--ax-sys-color-on-surface),.03) inset,0 24px 48px -28px rgba(var(--ax-sys-color-on-surface),.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-empty-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-empty__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-empty__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-empty-pulse 3.2s ease-in-out infinite}.ax-message-empty__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22);box-shadow:0 1px rgba(var(--ax-sys-color-on-primary-surface),.06) inset,0 12px 28px -16px rgba(var(--ax-sys-color-primary-600),.45)}.ax-message-empty__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-empty__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-empty__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-empty__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}.ax-message-empty__name{font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.88}@keyframes ax-empty-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-empty-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-empty-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-empty__pulse,.ax-message-empty__card{animation:none}}\n"] }]
+        }] });
+
+/** Default message list surface when no conversation is selected and no `ax-conversation-message-list-no-active` content is projected. */
+class AXMessageListNoActiveDefaultComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListNoActiveDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXMessageListNoActiveDefaultComponent, isStandalone: true, selector: "ax-conversation-message-list-no-active-default", host: { classAttribute: "ax-message-no-active-host" }, ngImport: i0, template: `
+    <div class="ax-message-no-active" role="status" aria-label="No conversation selected">
+      <div class="ax-message-no-active__ambient" aria-hidden="true">
+        <span class="ax-message-no-active__grid"></span>
+      </div>
+
+      <div class="ax-message-no-active__card">
+        <div class="ax-message-no-active__icon-stack">
+          <span class="ax-message-no-active__pulse" aria-hidden="true"></span>
+          <div class="ax-message-no-active__icon-bg">
+            <i class="fa-light fa-comments" aria-hidden="true"></i>
+          </div>
+        </div>
+
+        <p class="ax-message-no-active__eyebrow">Your inbox</p>
+        <h3 class="ax-message-no-active__title">No conversation open</h3>
+        <p class="ax-message-no-active__desc">
+          Select a chat from the list to read and send messages, or start a new one when you are ready.
+        </p>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host.ax-message-no-active-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-no-active{position:relative;isolation:isolate;padding:.25rem}.ax-message-no-active__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-no-active__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-no-active__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-no-active-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-no-active__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-no-active__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-no-active-pulse 3.2s ease-in-out infinite}.ax-message-no-active__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22)}.ax-message-no-active__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-no-active__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-no-active__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-no-active__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}@keyframes ax-no-active-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-no-active-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-no-active-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-no-active__pulse,.ax-message-no-active__card{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListNoActiveDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-message-list-no-active-default', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], host: {
+                        class: 'ax-message-no-active-host',
+                    }, template: `
+    <div class="ax-message-no-active" role="status" aria-label="No conversation selected">
+      <div class="ax-message-no-active__ambient" aria-hidden="true">
+        <span class="ax-message-no-active__grid"></span>
+      </div>
+
+      <div class="ax-message-no-active__card">
+        <div class="ax-message-no-active__icon-stack">
+          <span class="ax-message-no-active__pulse" aria-hidden="true"></span>
+          <div class="ax-message-no-active__icon-bg">
+            <i class="fa-light fa-comments" aria-hidden="true"></i>
+          </div>
+        </div>
+
+        <p class="ax-message-no-active__eyebrow">Your inbox</p>
+        <h3 class="ax-message-no-active__title">No conversation open</h3>
+        <p class="ax-message-no-active__desc">
+          Select a chat from the list to read and send messages, or start a new one when you are ready.
+        </p>
+      </div>
+    </div>
+  `, styles: [":host.ax-message-no-active-host{display:block;width:100%;max-width:min(24rem,100%);margin-inline:auto}.ax-message-no-active{position:relative;isolation:isolate;padding:.25rem}.ax-message-no-active__ambient{position:absolute;top:-2rem;right:-1rem;bottom:-1rem;left:-1rem;z-index:0;pointer-events:none;overflow:hidden;border-radius:2rem}.ax-message-no-active__grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ax-sys-color-on-surface),.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black 20%,transparent 75%);opacity:.5}.ax-message-no-active__card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.75rem 2.125rem;border-radius:1.25rem;border:1px solid rgba(var(--ax-sys-color-border-light-surface),.85);background:linear-gradient(165deg,rgba(var(--ax-sys-color-lightest-surface),.72),rgba(var(--ax-sys-color-surface),.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:ax-no-active-card-in .65s cubic-bezier(.22,1,.36,1) both}.ax-message-no-active__icon-stack{position:relative;display:grid;place-items:center;margin-bottom:1.25rem}.ax-message-no-active__pulse{position:absolute;width:5.5rem;height:5.5rem;border-radius:50%;background:radial-gradient(circle,rgba(var(--ax-sys-color-primary-500),.22),rgba(var(--ax-sys-color-primary-500),0) 70%);animation:ax-no-active-pulse 3.2s ease-in-out infinite}.ax-message-no-active__icon-bg{position:relative;display:grid;place-items:center;width:4.25rem;height:4.25rem;border-radius:1.125rem;background:linear-gradient(145deg,rgba(var(--ax-sys-color-primary-500),.16),rgba(var(--ax-sys-color-primary-600),.06));border:1px solid rgba(var(--ax-sys-color-primary-500),.22)}.ax-message-no-active__icon-bg i{font-size:1.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-600));opacity:.92}.ax-message-no-active__eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ax-sys-color-primary-600));opacity:.85}.ax-message-no-active__title{margin:0 0 .65rem;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:rgb(var(--ax-sys-color-on-surface))}.ax-message-no-active__desc{margin:0;font-size:.9375rem;line-height:1.65;color:rgb(var(--ax-sys-color-on-surface));opacity:.62;max-width:20rem}@keyframes ax-no-active-card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ax-no-active-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4%,6%) scale(1.05)}}@keyframes ax-no-active-pulse{0%,to{transform:scale(.92);opacity:.55}50%{transform:scale(1.06);opacity:.85}}@media (prefers-reduced-motion: reduce){.ax-message-no-active__pulse,.ax-message-no-active__card{animation:none}}\n"] }]
         }] });
 
 /**
@@ -15489,6 +15562,8 @@ class AXMessageListComponent {
         this.conversationService = inject(AXConversationService);
         this.messageListService = inject(AXMessageListService);
         this.config = inject(CONVERSATION_CONFIG);
+        /** Fallback when no conversation is active and no `ax-conversation-message-list-no-active` content is projected. */
+        this.noActiveFallbackComponent = AXMessageListNoActiveDefaultComponent;
         /** Custom avatar template for message list items */
         this.avatarTemplate = input(null, ...(ngDevMode ? [{ debugName: "avatarTemplate" }] : []));
         // Timeout cleanup to prevent memory leaks
@@ -15500,6 +15575,8 @@ class AXMessageListComponent {
         this.reactionPickerTarget = signal(null, ...(ngDevMode ? [{ debugName: "reactionPickerTarget" }] : []));
         this.reactionPickerElement = signal(null, ...(ngDevMode ? [{ debugName: "reactionPickerElement" }] : []));
         this.reactionPopover = viewChild('reactionPopover', ...(ngDevMode ? [{ debugName: "reactionPopover" }] : []));
+        /** Message id whose context menu is open (for active row styling). */
+        this.contextMenuMessageId = signal(null, ...(ngDevMode ? [{ debugName: "contextMenuMessageId" }] : []));
         // Available reaction emojis from API
         this.availableReactions = signal([], ...(ngDevMode ? [{ debugName: "availableReactions" }] : []));
         /** Message list element reference */
@@ -15555,14 +15632,16 @@ class AXMessageListComponent {
             const currentConversationId = conversation?.id || null;
             // Use untracked to get previous ID without creating dependency
             untracked(() => {
+                if (currentConversationId !== previousConversationId) {
+                    this.contextMenuMessageId.set(null);
+                }
                 // Only scroll if the conversation ID actually changed (not just updated)
                 if (currentConversationId && currentConversationId !== previousConversationId) {
                     // Reset pagination state for new conversation
                     this.messageListService.resetPagination();
-                    // Scroll to bottom when opening a conversation
-                    setTimeout(() => {
-                        this.scrollToBottom(false); // Instant scroll, no smooth animation
-                    }, 100);
+                    // Wait until the messages branch mounts (#messagesContainer) after loading, then scroll
+                    // after layout — avoids no-op scroll during loading and jitter vs the surface enter animation.
+                    queueMicrotask(() => this.scrollToBottomWhenContainerReady());
                 }
                 // Update previous ID
                 previousConversationId = currentConversationId;
@@ -15689,6 +15768,9 @@ class AXMessageListComponent {
         if (this.isOwnMessage(message)) {
             classes.push('message-own');
         }
+        if (this.contextMenuMessageId() === message.id) {
+            classes.push('message-item-context-active');
+        }
         return classes.join(' ');
     }
     /** Get bubble CSS classes */
@@ -15961,6 +16043,29 @@ class AXMessageListComponent {
         const isNearBottom = scrollHeight - scrollTop - clientHeight < this.config.scrollThreshold;
         return isNearBottom;
     }
+    /**
+     * After switching chats, the template may still show loading (no #messagesContainer).
+     * Poll with rAF until the feed exists, then scroll after double rAF so scrollHeight is stable.
+     */
+    scrollToBottomWhenContainerReady() {
+        const maxAttempts = 120;
+        let attempts = 0;
+        const tick = () => {
+            const el = this.messagesContainerRef()?.nativeElement;
+            if (el) {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        this.scrollToBottom(false);
+                    });
+                });
+                return;
+            }
+            if (++attempts < maxAttempts) {
+                requestAnimationFrame(tick);
+            }
+        };
+        requestAnimationFrame(tick);
+    }
     /** Scroll to bottom */
     scrollToBottom(smooth = true) {
         const element = this.messagesContainerRef()?.nativeElement;
@@ -16065,6 +16170,7 @@ class AXMessageListComponent {
     }
     /** Handle context menu opening for messages */
     handleMessageContextMenuOpening(event, message) {
+        this.contextMenuMessageId.set(message.id);
         const actions = this.getMessageActions(message);
         const currentUser = this.currentUser();
         if (!currentUser)
@@ -16082,6 +16188,7 @@ class AXMessageListComponent {
     }
     /** Handle context menu item click for messages */
     handleMessageContextMenuItemClick(event, message) {
+        this.contextMenuMessageId.set(null);
         const action = event.item.data;
         if (action) {
             // Execute the action using message list service
@@ -16106,248 +16213,253 @@ class AXMessageListComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", inputs: { avatarTemplate: { classPropertyName: "avatarTemplate", publicName: "avatarTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageAction: "messageAction" }, viewQueries: [{ propertyName: "reactionPopover", first: true, predicate: ["reactionPopover"], descendants: true, isSignal: true }, { propertyName: "messageListRef", first: true, predicate: ["messageList"], descendants: true, isSignal: true }, { propertyName: "messagesContainerRef", first: true, predicate: ["messagesContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (activeConversation()) {
-      <div
-        class="message-list"
-        #messageList
-        role="log"
-        aria-label="Message list"
-        aria-live="polite"
-        [style.background]="messageListBackgroundStyle()"
-      >
-        @if (loading()) {
-          <div class="list-loading" role="status" aria-label="Loading messages">
-            <ax-loading></ax-loading>
-            <ax-label>Loading messages...</ax-label>
-          </div>
-        } @else if (messages().length === 0) {
-          <div class="list-empty" role="status" aria-label="No messages">
-            <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
-              <ng-container
-                *ngComponentOutlet="resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }"
-              ></ng-container>
-            </ng-content>
-          </div>
-        } @else {
-          <div
-            class="messages-container"
-            (scroll)="onScroll($event)"
-            axInfiniteScroll
-            [threshold]="config.infiniteScrollThreshold"
-            [edge]="'top'"
-            (scrollThreshold)="onScrollThreshold($event)"
-            #messagesContainer
-            role="feed"
-            aria-label="Messages"
-          >
-            @if (loadingMore()) {
-              <div class="list-loading-more" role="status" aria-label="Loading older messages">
-                <ax-loading></ax-loading>
-                <ax-label>Loading older messages...</ax-label>
-              </div>
-            }
-            @for (group of messageGroups(); track trackMessageGroup($index, group)) {
-              <!-- Date Separator -->
-              <div class="date-separator" role="separator" [attr.aria-label]="'Messages from ' + group.dateLabel">
-                <ax-badge [text]="group.dateLabel" class="date-text"></ax-badge>
-              </div>
+    @if (activeConversation(); as conv) {
+      @for (cid of [conv.id]; track cid) {
+        <div
+          class="message-list message-list--conversation-surface"
+          #messageList
+          role="log"
+          aria-label="Message list"
+          aria-live="polite"
+          [style.background]="messageListBackgroundStyle()"
+        >
+          @if (loading()) {
+            <div class="list-loading" role="status" aria-label="Loading messages">
+              <ax-loading></ax-loading>
+              <ax-label>Loading messages...</ax-label>
+            </div>
+          } @else if (messages().length === 0) {
+            <div class="list-empty" role="status" aria-label="No messages">
+              <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
+                <ng-container
+                  *ngComponentOutlet="resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }"
+                ></ng-container>
+              </ng-content>
+            </div>
+          } @else {
+            <div
+              class="messages-container"
+              (scroll)="onScroll($event)"
+              axInfiniteScroll
+              [threshold]="config.infiniteScrollThreshold"
+              [edge]="'top'"
+              (scrollThreshold)="onScrollThreshold($event)"
+              #messagesContainer
+              role="feed"
+              aria-label="Messages"
+            >
+              @if (loadingMore()) {
+                <div class="list-loading-more" role="status" aria-label="Loading older messages">
+                  <ax-loading></ax-loading>
+                  <ax-label>Loading older messages...</ax-label>
+                </div>
+              }
+              @for (group of messageGroups(); track trackMessageGroup($index, group)) {
+                <!-- Date Separator -->
+                <div class="date-separator" role="separator" [attr.aria-label]="'Messages from ' + group.dateLabel">
+                  <ax-badge [text]="group.dateLabel" class="date-text"></ax-badge>
+                </div>
 
-              <!-- Messages in this date group -->
-              @for (message of group.messages; track trackMessage($index, message)) {
-                <div
-                  [class]="getMessageClasses(message)"
-                  role="article"
-                  [attr.aria-label]="getMessageAriaLabel(message)"
-                  [id]="'message-' + message.id"
-                  animate.enter="fade-slide-in"
-                >
-                  <!-- Avatar (only for group conversations and received messages) -->
-                  @if (shouldShowAvatar(message)) {
-                    <div class="message-avatar">
-                      @if (avatarTemplate()) {
-                        <ng-container
-                          *ngTemplateOutlet="
-                            avatarTemplate();
-                            context: {
-                              $implicit: message,
-                              size: 32,
-                              senderName: getSenderName(message),
-                              senderAvatar: getSenderAvatar(message),
-                              senderIcon: getSenderAvatarIcon(message),
+                <!-- Messages in this date group -->
+                @for (message of group.messages; track trackMessage($index, message)) {
+                  <div
+                    [class]="getMessageClasses(message)"
+                    role="article"
+                    [attr.aria-label]="getMessageAriaLabel(message)"
+                    [id]="'message-' + message.id"
+                  >
+                    <!-- Avatar (only for group conversations and received messages) -->
+                    @if (shouldShowAvatar(message)) {
+                      <div class="message-avatar">
+                        @if (avatarTemplate()) {
+                          <ng-container
+                            *ngTemplateOutlet="
+                              avatarTemplate();
+                              context: {
+                                $implicit: message,
+                                size: 32,
+                                senderName: getSenderName(message),
+                                senderAvatar: getSenderAvatar(message),
+                                senderIcon: getSenderAvatarIcon(message),
+                              }
+                            "
+                          ></ng-container>
+                        } @else {
+                          <ax-avatar [size]="32">
+                            @if (getSenderAvatar(message)) {
+                              <ax-image [src]="getSenderAvatar(message)!" [alt]="getSenderName(message)"></ax-image>
+                            } @else if (getSenderAvatarIcon(message)) {
+                              <ax-icon
+                                ><i
+                                  [class]="'message-avatar-icon ' + getSenderAvatarIcon(message)!"
+                                  aria-hidden="true"
+                                ></i
+                              ></ax-icon>
+                            } @else {
+                              <ax-label>{{ getInitials(getSenderName(message)) }}</ax-label>
                             }
-                          "
-                        ></ng-container>
-                      } @else {
-                        <ax-avatar [size]="32" [color]="'primary'">
-                          @if (getSenderAvatar(message)) {
-                            <ax-image [src]="getSenderAvatar(message)!" [alt]="getSenderName(message)"></ax-image>
-                          } @else if (getSenderAvatarIcon(message)) {
-                            <ax-icon
-                              ><i
-                                [class]="'message-avatar-icon ' + getSenderAvatarIcon(message)!"
-                                aria-hidden="true"
-                              ></i
-                            ></ax-icon>
-                          } @else {
-                            <ax-label>{{ getInitials(getSenderName(message)) }}</ax-label>
-                          }
-                        </ax-avatar>
-                      }
-                    </div>
-                  }
+                          </ax-avatar>
+                        }
+                      </div>
+                    }
 
-                  <div class="message-content-row" [class.message-content-row-own]="isOwnMessage(message)">
-                    <button
-                      type="button"
-                      class="add-reaction-button add-reaction-outside"
-                      [class.add-reaction-visible]="reactionPickerTarget() === message.id"
-                      (click)="toggleReactionPicker(message.id, $event)"
-                      [attr.aria-label]="'Add reaction to message'"
-                      #reactionButton
-                    >
-                      <i class="fa-light fa-face-smile"></i>
-                    </button>
+                    <div class="message-content-row" [class.message-content-row-own]="isOwnMessage(message)">
+                      <button
+                        type="button"
+                        class="add-reaction-button add-reaction-outside"
+                        [class.add-reaction-visible]="reactionPickerTarget() === message.id"
+                        (click)="toggleReactionPicker(message.id, $event)"
+                        [attr.aria-label]="'Add reaction to message'"
+                        #reactionButton
+                      >
+                        <i class="fa-light fa-face-smile"></i>
+                      </button>
 
-                    <div
-                      class="message-bubble-container"
-                      [id]="'message-bubble-' + message.id"
-                      [attr.data-message-id]="message.id"
-                    >
                       <div
-                        [class]="getBubbleClasses(message)"
-                        [class.message-bubble-sent]="message.senderId === currentUser()?.id"
-                        [class.message-bubble-received]="message.senderId !== currentUser()?.id"
+                        class="message-bubble-container"
+                        [id]="'message-bubble-' + message.id"
+                        [attr.data-message-id]="message.id"
                       >
-                        <!-- Sender name (only for group conversations and received messages) -->
-                        @if (shouldShowSenderName(message)) {
-                          <div class="message-sender">{{ getSenderName(message) }}:</div>
-                        }
+                        <div
+                          [class]="getBubbleClasses(message)"
+                          [class.message-bubble-sent]="message.senderId === currentUser()?.id"
+                          [class.message-bubble-received]="message.senderId !== currentUser()?.id"
+                        >
+                          <!-- Sender name (only for group conversations and received messages) -->
+                          @if (shouldShowSenderName(message)) {
+                            <div class="message-sender">{{ getSenderName(message) }}:</div>
+                          }
 
-                        <!-- Reply Preview -->
-                        @if (message.replyTo) {
-                          <div
-                            class="reply-preview"
-                            (click)="scrollToMessage(message.replyTo.id)"
-                            role="button"
-                            [attr.aria-label]="'Reply to ' + getSenderName(message.replyTo)"
-                            (keydown.enter)="scrollToMessage(message.replyTo.id)"
-                            (keydown.space)="scrollToMessage(message.replyTo.id)"
-                          >
-                            <div class="reply-preview-content">
-                              <div class="reply-preview-sender">{{ getSenderName(message.replyTo) }}</div>
-                              <div class="reply-preview-text">
-                                @if (getMessagePreviewText(message.replyTo); as preview) {
-                                  <span class="last-message">
-                                    @if (preview.type !== 'text') {
-                                      <i [class]="preview.icon"></i
-                                      >{{ '@acorex:chat.' + preview.type | translate | async }}
-                                    } @else {
-                                      {{ preview.value }}
-                                    }
-                                  </span>
-                                }
+                          <!-- Reply Preview -->
+                          @if (message.replyTo) {
+                            <div
+                              class="reply-preview"
+                              (click)="scrollToMessage(message.replyTo.id)"
+                              role="button"
+                              [attr.aria-label]="'Reply to ' + getSenderName(message.replyTo)"
+                              (keydown.enter)="scrollToMessage(message.replyTo.id)"
+                              (keydown.space)="scrollToMessage(message.replyTo.id)"
+                            >
+                              <div class="reply-preview-content">
+                                <div class="reply-preview-sender">{{ getSenderName(message.replyTo) }}</div>
+                                <div class="reply-preview-text">
+                                  @if (getMessagePreviewText(message.replyTo); as preview) {
+                                    <span class="last-message">
+                                      @if (preview.type !== 'text') {
+                                        <i [class]="preview.icon"></i
+                                        >{{ '@acorex:chat.' + preview.type | translate | async }}
+                                      } @else {
+                                        {{ preview.value }}
+                                      }
+                                    </span>
+                                  }
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        }
-
-                        <!-- Forwarded Indicator -->
-                        @if (message.forwarded) {
-                          <div class="forwarded-preview">
-                            <i class="fa-solid fa-share"></i>
-                            <span class="forwarded-text">{{ getForwardedText(message) }}</span>
-                          </div>
-                        }
+                          }
 
-                        <ng-container
-                          *ngComponentOutlet="getRendererComponent(message); inputs: getRendererInputs(message)"
-                        ></ng-container>
-
-                        @if (message.reactions.length > 0) {
-                          <div class="message-reactions-container">
-                            <div class="message-reactions-bubbles">
-                              @for (reaction of getGroupedReactions(message); track reaction.emoji) {
-                                <button
-                                  type="button"
-                                  class="reaction-bubble"
-                                  [class.reaction-bubble-active]="reaction.hasReacted"
-                                  (click)="onReactionClick(message, reaction.emoji)"
-                                  [attr.aria-label]="reaction.emoji + ' ' + reaction.count"
-                                >
-                                  <span class="reaction-emoji">{{ reaction.emoji }}</span>
-                                  @if (reaction.count > 1) {
-                                    <span class="reaction-count">{{ reaction.count }}</span>
-                                  }
-                                </button>
-                              }
+                          <!-- Forwarded Indicator -->
+                          @if (message.forwarded) {
+                            <div class="forwarded-preview">
+                              <i class="fa-solid fa-share"></i>
+                              <span class="forwarded-text">{{ getForwardedText(message) }}</span>
                             </div>
-                          </div>
-                        }
-
-                        <!-- Message Footer -->
-                        <div class="message-footer">
-                          @if (getReplyCount(message) > 0) {
-                            <span class="message-footer-count" [attr.aria-label]="getReplyCount(message) + ' replies'">
-                              <i class="fa-solid fa-message" aria-hidden="true"></i>
-                              <span class="message-footer-count-value">{{ getReplyCount(message) }}</span>
-                            </span>
-                          }
-                          @if (getForwardCount(message) > 0) {
-                            <span
-                              class="message-footer-count"
-                              [attr.aria-label]="getForwardCount(message) + ' forwards'"
-                            >
-                              <i class="fa-solid fa-share" aria-hidden="true"></i>
-                              <span class="message-footer-count-value">{{ getForwardCount(message) }}</span>
-                            </span>
-                          }
-                          @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {
-                            <span class="message-footer-split" aria-hidden="true"></span>
-                          }
-                          <span class="message-time">{{ message.timestamp | format: 'timeleft' | async }}</span>
-                          @if (message.editedAt) {
-                            <span class="edited-indicator">
-                              <span>Edited</span>
-                            </span>
                           }
-                          @if (isOwnMessage(message)) {
-                            <span [class]="getStatusIconClasses(message)">
-                              <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
-                            </span>
+
+                          <ng-container
+                            *ngComponentOutlet="getRendererComponent(message); inputs: getRendererInputs(message)"
+                          ></ng-container>
+
+                          @if (message.reactions.length > 0) {
+                            <div class="message-reactions-container">
+                              <div class="message-reactions-bubbles">
+                                @for (reaction of getGroupedReactions(message); track reaction.emoji) {
+                                  <button
+                                    type="button"
+                                    class="reaction-bubble"
+                                    [class.reaction-bubble-active]="reaction.hasReacted"
+                                    (click)="onReactionClick(message, reaction.emoji)"
+                                    [attr.aria-label]="reaction.emoji + ' ' + reaction.count"
+                                  >
+                                    <span class="reaction-emoji">{{ reaction.emoji }}</span>
+                                    @if (reaction.count > 1) {
+                                      <span class="reaction-count">{{ reaction.count }}</span>
+                                    }
+                                  </button>
+                                }
+                              </div>
+                            </div>
                           }
+
+                          <!-- Message Footer -->
+                          <div class="message-footer">
+                            @if (getReplyCount(message) > 0) {
+                              <span
+                                class="message-footer-count"
+                                [attr.aria-label]="getReplyCount(message) + ' replies'"
+                              >
+                                <i class="fa-solid fa-message" aria-hidden="true"></i>
+                                <span class="message-footer-count-value">{{ getReplyCount(message) }}</span>
+                              </span>
+                            }
+                            @if (getForwardCount(message) > 0) {
+                              <span
+                                class="message-footer-count"
+                                [attr.aria-label]="getForwardCount(message) + ' forwards'"
+                              >
+                                <i class="fa-solid fa-share" aria-hidden="true"></i>
+                                <span class="message-footer-count-value">{{ getForwardCount(message) }}</span>
+                              </span>
+                            }
+                            @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {
+                              <span class="message-footer-split" aria-hidden="true"></span>
+                            }
+                            <span class="message-time">{{ message.timestamp | format: 'timeleft' | async }}</span>
+                            @if (message.editedAt) {
+                              <span class="edited-indicator">
+                                <span>Edited</span>
+                              </span>
+                            }
+                            @if (isOwnMessage(message)) {
+                              <span [class]="getStatusIconClasses(message)">
+                                <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
+                              </span>
+                            }
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  <!-- Context Menu for Message Actions -->
-                  <ax-context-menu
-                    [target]="'#message-bubble-' + message.id"
-                    [openOn]="'click'"
-                    [closeOn]="'click'"
-                    (onOpening)="handleMessageContextMenuOpening($event, message)"
-                    (onItemClick)="handleMessageContextMenuItemClick($event, message)"
-                  >
-                  </ax-context-menu>
-                </div>
+                    <!-- Context Menu for Message Actions -->
+                    <ax-context-menu
+                      [target]="'#message-bubble-' + message.id"
+                      [openOn]="'click'"
+                      [closeOn]="'click'"
+                      (onOpening)="handleMessageContextMenuOpening($event, message)"
+                      (onClose)="contextMenuMessageId.set(null)"
+                      (onItemClick)="handleMessageContextMenuItemClick($event, message)"
+                    >
+                    </ax-context-menu>
+                  </div>
+                }
               }
-            }
-          </div>
+            </div>
 
-          <!-- Scroll to Bottom Button -->
-          @if (showScrollButton()) {
-            <ax-button
-              class="scroll-to-bottom"
-              (onClick)="scrollToBottom()"
-              animate.enter="slide-in"
-              animate.leave="slide-out"
-              [text]="'↓'"
-              [look]="'solid'"
-              aria-label="Scroll to bottom of messages"
-            ></ax-button>
+            <!-- Scroll to Bottom Button -->
+            @if (showScrollButton()) {
+              <ax-button
+                class="scroll-to-bottom"
+                (onClick)="scrollToBottom()"
+                animate.enter="slide-in"
+                animate.leave="slide-out"
+                [text]="'↓'"
+                [look]="'solid'"
+                aria-label="Scroll to bottom of messages"
+              ></ax-button>
+            }
           }
-        }
-      </div>
+        </div>
+      }
 
       <!-- Reaction Picker Popover -->
       @if (reactionPickerTarget()) {
@@ -16382,8 +16494,16 @@ class AXMessageListComponent {
           </div>
         </ax-popover>
       }
+    } @else {
+      <div class="message-list message-list--no-active" role="region" aria-label="No conversation selected">
+        <div class="list-no-active">
+          <ng-content select="ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]">
+            <ng-container *ngComponentOutlet="noActiveFallbackComponent"></ng-container>
+          </ng-content>
+        </div>
+      </div>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-avatar-icon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.last-message{display:flex;align-items:center;gap:.25rem}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i6$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}.message-list--no-active{height:100%}.list-no-active{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:12rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.09);border-radius:.5rem;box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}.message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-avatar-icon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.last-message{display:flex;align-items:center;gap:.25rem}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}// .message-own .message-reactions-container{// justify-content: flex-end;//}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }, { kind: "pipe", type: i6$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMessageListComponent, decorators: [{
             type: Component,
@@ -16403,248 +16523,253 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXTranslationModule,
                         AXInfiniteScrollDirective,
                     ], template: `
-    @if (activeConversation()) {
-      <div
-        class="message-list"
-        #messageList
-        role="log"
-        aria-label="Message list"
-        aria-live="polite"
-        [style.background]="messageListBackgroundStyle()"
-      >
-        @if (loading()) {
-          <div class="list-loading" role="status" aria-label="Loading messages">
-            <ax-loading></ax-loading>
-            <ax-label>Loading messages...</ax-label>
-          </div>
-        } @else if (messages().length === 0) {
-          <div class="list-empty" role="status" aria-label="No messages">
-            <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
-              <ng-container
-                *ngComponentOutlet="resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }"
-              ></ng-container>
-            </ng-content>
-          </div>
-        } @else {
-          <div
-            class="messages-container"
-            (scroll)="onScroll($event)"
-            axInfiniteScroll
-            [threshold]="config.infiniteScrollThreshold"
-            [edge]="'top'"
-            (scrollThreshold)="onScrollThreshold($event)"
-            #messagesContainer
-            role="feed"
-            aria-label="Messages"
-          >
-            @if (loadingMore()) {
-              <div class="list-loading-more" role="status" aria-label="Loading older messages">
-                <ax-loading></ax-loading>
-                <ax-label>Loading older messages...</ax-label>
-              </div>
-            }
-            @for (group of messageGroups(); track trackMessageGroup($index, group)) {
-              <!-- Date Separator -->
-              <div class="date-separator" role="separator" [attr.aria-label]="'Messages from ' + group.dateLabel">
-                <ax-badge [text]="group.dateLabel" class="date-text"></ax-badge>
-              </div>
+    @if (activeConversation(); as conv) {
+      @for (cid of [conv.id]; track cid) {
+        <div
+          class="message-list message-list--conversation-surface"
+          #messageList
+          role="log"
+          aria-label="Message list"
+          aria-live="polite"
+          [style.background]="messageListBackgroundStyle()"
+        >
+          @if (loading()) {
+            <div class="list-loading" role="status" aria-label="Loading messages">
+              <ax-loading></ax-loading>
+              <ax-label>Loading messages...</ax-label>
+            </div>
+          } @else if (messages().length === 0) {
+            <div class="list-empty" role="status" aria-label="No messages">
+              <ng-content select="ax-conversation-message-list-empty, [ax-conversation-message-list-empty]">
+                <ng-container
+                  *ngComponentOutlet="resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }"
+                ></ng-container>
+              </ng-content>
+            </div>
+          } @else {
+            <div
+              class="messages-container"
+              (scroll)="onScroll($event)"
+              axInfiniteScroll
+              [threshold]="config.infiniteScrollThreshold"
+              [edge]="'top'"
+              (scrollThreshold)="onScrollThreshold($event)"
+              #messagesContainer
+              role="feed"
+              aria-label="Messages"
+            >
+              @if (loadingMore()) {
+                <div class="list-loading-more" role="status" aria-label="Loading older messages">
+                  <ax-loading></ax-loading>
+                  <ax-label>Loading older messages...</ax-label>
+                </div>
+              }
+              @for (group of messageGroups(); track trackMessageGroup($index, group)) {
+                <!-- Date Separator -->
+                <div class="date-separator" role="separator" [attr.aria-label]="'Messages from ' + group.dateLabel">
+                  <ax-badge [text]="group.dateLabel" class="date-text"></ax-badge>
+                </div>
 
-              <!-- Messages in this date group -->
-              @for (message of group.messages; track trackMessage($index, message)) {
-                <div
-                  [class]="getMessageClasses(message)"
-                  role="article"
-                  [attr.aria-label]="getMessageAriaLabel(message)"
-                  [id]="'message-' + message.id"
-                  animate.enter="fade-slide-in"
-                >
-                  <!-- Avatar (only for group conversations and received messages) -->
-                  @if (shouldShowAvatar(message)) {
-                    <div class="message-avatar">
-                      @if (avatarTemplate()) {
-                        <ng-container
-                          *ngTemplateOutlet="
-                            avatarTemplate();
-                            context: {
-                              $implicit: message,
-                              size: 32,
-                              senderName: getSenderName(message),
-                              senderAvatar: getSenderAvatar(message),
-                              senderIcon: getSenderAvatarIcon(message),
+                <!-- Messages in this date group -->
+                @for (message of group.messages; track trackMessage($index, message)) {
+                  <div
+                    [class]="getMessageClasses(message)"
+                    role="article"
+                    [attr.aria-label]="getMessageAriaLabel(message)"
+                    [id]="'message-' + message.id"
+                  >
+                    <!-- Avatar (only for group conversations and received messages) -->
+                    @if (shouldShowAvatar(message)) {
+                      <div class="message-avatar">
+                        @if (avatarTemplate()) {
+                          <ng-container
+                            *ngTemplateOutlet="
+                              avatarTemplate();
+                              context: {
+                                $implicit: message,
+                                size: 32,
+                                senderName: getSenderName(message),
+                                senderAvatar: getSenderAvatar(message),
+                                senderIcon: getSenderAvatarIcon(message),
+                              }
+                            "
+                          ></ng-container>
+                        } @else {
+                          <ax-avatar [size]="32">
+                            @if (getSenderAvatar(message)) {
+                              <ax-image [src]="getSenderAvatar(message)!" [alt]="getSenderName(message)"></ax-image>
+                            } @else if (getSenderAvatarIcon(message)) {
+                              <ax-icon
+                                ><i
+                                  [class]="'message-avatar-icon ' + getSenderAvatarIcon(message)!"
+                                  aria-hidden="true"
+                                ></i
+                              ></ax-icon>
+                            } @else {
+                              <ax-label>{{ getInitials(getSenderName(message)) }}</ax-label>
                             }
-                          "
-                        ></ng-container>
-                      } @else {
-                        <ax-avatar [size]="32" [color]="'primary'">
-                          @if (getSenderAvatar(message)) {
-                            <ax-image [src]="getSenderAvatar(message)!" [alt]="getSenderName(message)"></ax-image>
-                          } @else if (getSenderAvatarIcon(message)) {
-                            <ax-icon
-                              ><i
-                                [class]="'message-avatar-icon ' + getSenderAvatarIcon(message)!"
-                                aria-hidden="true"
-                              ></i
-                            ></ax-icon>
-                          } @else {
-                            <ax-label>{{ getInitials(getSenderName(message)) }}</ax-label>
-                          }
-                        </ax-avatar>
-                      }
-                    </div>
-                  }
+                          </ax-avatar>
+                        }
+                      </div>
+                    }
 
-                  <div class="message-content-row" [class.message-content-row-own]="isOwnMessage(message)">
-                    <button
-                      type="button"
-                      class="add-reaction-button add-reaction-outside"
-                      [class.add-reaction-visible]="reactionPickerTarget() === message.id"
-                      (click)="toggleReactionPicker(message.id, $event)"
-                      [attr.aria-label]="'Add reaction to message'"
-                      #reactionButton
-                    >
-                      <i class="fa-light fa-face-smile"></i>
-                    </button>
+                    <div class="message-content-row" [class.message-content-row-own]="isOwnMessage(message)">
+                      <button
+                        type="button"
+                        class="add-reaction-button add-reaction-outside"
+                        [class.add-reaction-visible]="reactionPickerTarget() === message.id"
+                        (click)="toggleReactionPicker(message.id, $event)"
+                        [attr.aria-label]="'Add reaction to message'"
+                        #reactionButton
+                      >
+                        <i class="fa-light fa-face-smile"></i>
+                      </button>
 
-                    <div
-                      class="message-bubble-container"
-                      [id]="'message-bubble-' + message.id"
-                      [attr.data-message-id]="message.id"
-                    >
                       <div
-                        [class]="getBubbleClasses(message)"
-                        [class.message-bubble-sent]="message.senderId === currentUser()?.id"
-                        [class.message-bubble-received]="message.senderId !== currentUser()?.id"
+                        class="message-bubble-container"
+                        [id]="'message-bubble-' + message.id"
+                        [attr.data-message-id]="message.id"
                       >
-                        <!-- Sender name (only for group conversations and received messages) -->
-                        @if (shouldShowSenderName(message)) {
-                          <div class="message-sender">{{ getSenderName(message) }}:</div>
-                        }
+                        <div
+                          [class]="getBubbleClasses(message)"
+                          [class.message-bubble-sent]="message.senderId === currentUser()?.id"
+                          [class.message-bubble-received]="message.senderId !== currentUser()?.id"
+                        >
+                          <!-- Sender name (only for group conversations and received messages) -->
+                          @if (shouldShowSenderName(message)) {
+                            <div class="message-sender">{{ getSenderName(message) }}:</div>
+                          }
 
-                        <!-- Reply Preview -->
-                        @if (message.replyTo) {
-                          <div
-                            class="reply-preview"
-                            (click)="scrollToMessage(message.replyTo.id)"
-                            role="button"
-                            [attr.aria-label]="'Reply to ' + getSenderName(message.replyTo)"
-                            (keydown.enter)="scrollToMessage(message.replyTo.id)"
-                            (keydown.space)="scrollToMessage(message.replyTo.id)"
-                          >
-                            <div class="reply-preview-content">
-                              <div class="reply-preview-sender">{{ getSenderName(message.replyTo) }}</div>
-                              <div class="reply-preview-text">
-                                @if (getMessagePreviewText(message.replyTo); as preview) {
-                                  <span class="last-message">
-                                    @if (preview.type !== 'text') {
-                                      <i [class]="preview.icon"></i
-                                      >{{ '@acorex:chat.' + preview.type | translate | async }}
-                                    } @else {
-                                      {{ preview.value }}
-                                    }
-                                  </span>
-                                }
+                          <!-- Reply Preview -->
+                          @if (message.replyTo) {
+                            <div
+                              class="reply-preview"
+                              (click)="scrollToMessage(message.replyTo.id)"
+                              role="button"
+                              [attr.aria-label]="'Reply to ' + getSenderName(message.replyTo)"
+                              (keydown.enter)="scrollToMessage(message.replyTo.id)"
+                              (keydown.space)="scrollToMessage(message.replyTo.id)"
+                            >
+                              <div class="reply-preview-content">
+                                <div class="reply-preview-sender">{{ getSenderName(message.replyTo) }}</div>
+                                <div class="reply-preview-text">
+                                  @if (getMessagePreviewText(message.replyTo); as preview) {
+                                    <span class="last-message">
+                                      @if (preview.type !== 'text') {
+                                        <i [class]="preview.icon"></i
+                                        >{{ '@acorex:chat.' + preview.type | translate | async }}
+                                      } @else {
+                                        {{ preview.value }}
+                                      }
+                                    </span>
+                                  }
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        }
-
-                        <!-- Forwarded Indicator -->
-                        @if (message.forwarded) {
-                          <div class="forwarded-preview">
-                            <i class="fa-solid fa-share"></i>
-                            <span class="forwarded-text">{{ getForwardedText(message) }}</span>
-                          </div>
-                        }
+                          }
 
-                        <ng-container
-                          *ngComponentOutlet="getRendererComponent(message); inputs: getRendererInputs(message)"
-                        ></ng-container>
-
-                        @if (message.reactions.length > 0) {
-                          <div class="message-reactions-container">
-                            <div class="message-reactions-bubbles">
-                              @for (reaction of getGroupedReactions(message); track reaction.emoji) {
-                                <button
-                                  type="button"
-                                  class="reaction-bubble"
-                                  [class.reaction-bubble-active]="reaction.hasReacted"
-                                  (click)="onReactionClick(message, reaction.emoji)"
-                                  [attr.aria-label]="reaction.emoji + ' ' + reaction.count"
-                                >
-                                  <span class="reaction-emoji">{{ reaction.emoji }}</span>
-                                  @if (reaction.count > 1) {
-                                    <span class="reaction-count">{{ reaction.count }}</span>
-                                  }
-                                </button>
-                              }
+                          <!-- Forwarded Indicator -->
+                          @if (message.forwarded) {
+                            <div class="forwarded-preview">
+                              <i class="fa-solid fa-share"></i>
+                              <span class="forwarded-text">{{ getForwardedText(message) }}</span>
                             </div>
-                          </div>
-                        }
-
-                        <!-- Message Footer -->
-                        <div class="message-footer">
-                          @if (getReplyCount(message) > 0) {
-                            <span class="message-footer-count" [attr.aria-label]="getReplyCount(message) + ' replies'">
-                              <i class="fa-solid fa-message" aria-hidden="true"></i>
-                              <span class="message-footer-count-value">{{ getReplyCount(message) }}</span>
-                            </span>
-                          }
-                          @if (getForwardCount(message) > 0) {
-                            <span
-                              class="message-footer-count"
-                              [attr.aria-label]="getForwardCount(message) + ' forwards'"
-                            >
-                              <i class="fa-solid fa-share" aria-hidden="true"></i>
-                              <span class="message-footer-count-value">{{ getForwardCount(message) }}</span>
-                            </span>
                           }
-                          @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {
-                            <span class="message-footer-split" aria-hidden="true"></span>
-                          }
-                          <span class="message-time">{{ message.timestamp | format: 'timeleft' | async }}</span>
-                          @if (message.editedAt) {
-                            <span class="edited-indicator">
-                              <span>Edited</span>
-                            </span>
-                          }
-                          @if (isOwnMessage(message)) {
-                            <span [class]="getStatusIconClasses(message)">
-                              <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
-                            </span>
+
+                          <ng-container
+                            *ngComponentOutlet="getRendererComponent(message); inputs: getRendererInputs(message)"
+                          ></ng-container>
+
+                          @if (message.reactions.length > 0) {
+                            <div class="message-reactions-container">
+                              <div class="message-reactions-bubbles">
+                                @for (reaction of getGroupedReactions(message); track reaction.emoji) {
+                                  <button
+                                    type="button"
+                                    class="reaction-bubble"
+                                    [class.reaction-bubble-active]="reaction.hasReacted"
+                                    (click)="onReactionClick(message, reaction.emoji)"
+                                    [attr.aria-label]="reaction.emoji + ' ' + reaction.count"
+                                  >
+                                    <span class="reaction-emoji">{{ reaction.emoji }}</span>
+                                    @if (reaction.count > 1) {
+                                      <span class="reaction-count">{{ reaction.count }}</span>
+                                    }
+                                  </button>
+                                }
+                              </div>
+                            </div>
                           }
+
+                          <!-- Message Footer -->
+                          <div class="message-footer">
+                            @if (getReplyCount(message) > 0) {
+                              <span
+                                class="message-footer-count"
+                                [attr.aria-label]="getReplyCount(message) + ' replies'"
+                              >
+                                <i class="fa-solid fa-message" aria-hidden="true"></i>
+                                <span class="message-footer-count-value">{{ getReplyCount(message) }}</span>
+                              </span>
+                            }
+                            @if (getForwardCount(message) > 0) {
+                              <span
+                                class="message-footer-count"
+                                [attr.aria-label]="getForwardCount(message) + ' forwards'"
+                              >
+                                <i class="fa-solid fa-share" aria-hidden="true"></i>
+                                <span class="message-footer-count-value">{{ getForwardCount(message) }}</span>
+                              </span>
+                            }
+                            @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {
+                              <span class="message-footer-split" aria-hidden="true"></span>
+                            }
+                            <span class="message-time">{{ message.timestamp | format: 'timeleft' | async }}</span>
+                            @if (message.editedAt) {
+                              <span class="edited-indicator">
+                                <span>Edited</span>
+                              </span>
+                            }
+                            @if (isOwnMessage(message)) {
+                              <span [class]="getStatusIconClasses(message)">
+                                <ax-icon><i [class]="getStatusIcon(message)"></i></ax-icon>
+                              </span>
+                            }
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  <!-- Context Menu for Message Actions -->
-                  <ax-context-menu
-                    [target]="'#message-bubble-' + message.id"
-                    [openOn]="'click'"
-                    [closeOn]="'click'"
-                    (onOpening)="handleMessageContextMenuOpening($event, message)"
-                    (onItemClick)="handleMessageContextMenuItemClick($event, message)"
-                  >
-                  </ax-context-menu>
-                </div>
+                    <!-- Context Menu for Message Actions -->
+                    <ax-context-menu
+                      [target]="'#message-bubble-' + message.id"
+                      [openOn]="'click'"
+                      [closeOn]="'click'"
+                      (onOpening)="handleMessageContextMenuOpening($event, message)"
+                      (onClose)="contextMenuMessageId.set(null)"
+                      (onItemClick)="handleMessageContextMenuItemClick($event, message)"
+                    >
+                    </ax-context-menu>
+                  </div>
+                }
               }
-            }
-          </div>
+            </div>
 
-          <!-- Scroll to Bottom Button -->
-          @if (showScrollButton()) {
-            <ax-button
-              class="scroll-to-bottom"
-              (onClick)="scrollToBottom()"
-              animate.enter="slide-in"
-              animate.leave="slide-out"
-              [text]="'↓'"
-              [look]="'solid'"
-              aria-label="Scroll to bottom of messages"
-            ></ax-button>
+            <!-- Scroll to Bottom Button -->
+            @if (showScrollButton()) {
+              <ax-button
+                class="scroll-to-bottom"
+                (onClick)="scrollToBottom()"
+                animate.enter="slide-in"
+                animate.leave="slide-out"
+                [text]="'↓'"
+                [look]="'solid'"
+                aria-label="Scroll to bottom of messages"
+              ></ax-button>
+            }
           }
-        }
-      </div>
+        </div>
+      }
 
       <!-- Reaction Picker Popover -->
       @if (reactionPickerTarget()) {
@@ -16679,8 +16804,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
           </div>
         </ax-popover>
       }
+    } @else {
+      <div class="message-list message-list--no-active" role="region" aria-label="No conversation selected">
+        <div class="list-no-active">
+          <ng-content select="ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]">
+            <ng-container *ngComponentOutlet="noActiveFallbackComponent"></ng-container>
+          </ng-content>
+        </div>
+      </div>
     }
-  `, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes fadeSlideIn{0%{opacity:0;// transform: translateX(20%)}to{opacity:1;// transform: translateX(0)}}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-avatar-icon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.last-message{display:flex;align-items:center;gap:.25rem}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}.message-own .message-reactions-container{justify-content:flex-end}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
+  `, styles: [":host{display:block;height:100%;position:relative}.message-list{height:100%}.message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:3rem 2rem;gap:1.25rem;animation:fadeInUp .5s ease-out}.message-list--no-active{height:100%}.list-no-active{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:12rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-icon{font-size:5.5rem;line-height:1;opacity:.35;margin-bottom:.5rem;filter:grayscale(.2)}.empty-title{font-size:1.625rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface));letter-spacing:-.02em}.empty-description{font-size:1.0625rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;max-width:420px;line-height:1.7}.spinner{width:32px;height:32px;border:3px solid rgb(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}.messages-container{width:100%;height:100%;overflow-y:auto;overflow-x:hidden}.date-separator{position:sticky;z-index:150;top:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0}.date-text{padding:.25rem .75rem;background:rgb(var(--ax-sys-color-lighter-surface));font-size:.75rem;font-weight:500;border-radius:1rem;width:7rem;display:flex;justify-content:center;align-items:center}.unread-separator{display:flex;align-items:center;gap:.75rem;margin:1.5rem 0;padding:0 1rem}.unread-separator-line{flex:1;height:1px;background:rgb(var(--ax-sys-color-primary-500));opacity:.3}.unread-separator-text{font-size:.75rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.message-item{position:relative;display:flex;padding:.5rem 1rem;gap:.5rem;line-height:1rem;align-items:end;transition:background-color .3s ease}.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.09);border-radius:.5rem;box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}.message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}.message-highlight{background-color:rgba(var(--ax-sys-color-primary-500),.1);border-radius:.5rem}.message-own{flex-direction:row-reverse}.message-avatar{flex-shrink:0}.message-avatar-icon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.message-content-row{display:flex;flex-direction:row;align-items:flex-end;max-width:70%;min-width:0;flex:0 1 auto;position:relative;column-gap:.25rem}.message-content-row-own{justify-content:flex-end}.message-item:not(.message-own) .message-content-row{justify-content:flex-start}.message-bubble-container{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;max-width:100%;position:relative}.message-own .message-bubble-container{align-items:flex-end}.message-sender{font-size:.75rem;font-weight:600;margin-bottom:.1rem}.message-bubble{position:relative;display:flex;flex-direction:column;padding:.5rem .5rem .1rem;border-radius:1rem;background:rgb(var(--ax-sys-color-lightest-surface));word-wrap:break-word;transition:background-color .3s ease}.reply-preview{padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .reply-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .reply-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.reply-preview-line{width:3px;background:currentColor;opacity:.5;border-radius:1.5px;flex-shrink:0}.reply-preview-content{flex:1;min-width:0}.reply-preview-sender{font-size:.75rem;font-weight:600;margin-bottom:.125rem;color:rgb(var(--ax-sys-color-primary-600))}.reply-preview-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-own .reply-preview-sender{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .reply-preview-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.last-message{display:flex;align-items:center;gap:.25rem}.forwarded-preview{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;margin-bottom:.1rem;background:rgba(var(--ax-sys-color-primary-500),.08);border-radius:var(--ax-sys-border-radius);border-inline-start:3px solid rgb(var(--ax-sys-color-primary-500));transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}.message-own .forwarded-preview{background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start:3px solid rgba(var(--ax-sys-color-on-primary-surface),.55)}.message-own .forwarded-preview:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.22);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.75)}.forwarded-preview i{font-size:.8125rem;flex-shrink:0;color:rgb(var(--ax-sys-color-primary-600))}.forwarded-text{font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.message-own .forwarded-preview i{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.95}.message-own .forwarded-text{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.78}.message-bubble-received{border-bottom-left-radius:.125rem}.message-bubble-received:before{content:\"\";display:block;background:rgb(var(--ax-sys-color-lightest-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;left:-.7rem;border-top-left-radius:86%;corner-shape:scoop}.message-bubble-sent{border-bottom-right-radius:.125rem}.message-bubble-sent:after{content:\"\";display:block;background:rgb(var(--ax-sys-color-primary-surface));width:.8rem;height:.8rem;position:absolute;bottom:0;right:-.7rem;border-top-right-radius:86%;corner-shape:scoop}.message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.message-content{font-size:.9375rem;line-height:1.5;white-space:pre-wrap}.message-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-inline-start:.25rem;margin-top:.1rem;gap:.25rem;font-size:.6875rem;opacity:.7;letter-spacing:.05rem;-webkit-user-select:none;user-select:none}.message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-variant-numeric:tabular-nums;font-size:.675rem}.message-footer-count i{font-size:.625rem;opacity:.9}.message-footer-count-value{font-weight:600}.message-footer-split{flex-shrink:0;align-self:center;width:1px;height:.65rem;background:rgb(var(--ax-sys-color-border-light-surface));opacity:.9;margin-inline:.2rem}.message-time{font-variant-numeric:tabular-nums;font-size:.675rem}.edited-indicator{display:inline-flex;align-items:center;gap:.25rem;font-size:.675rem;opacity:.75;padding-inline-start:.35rem;border-inline-start:1px solid rgb(var(--ax-sys-color-border-light-surface))}.status-icon{display:inline-flex;align-items:center}.status-icon i{font-size:.75rem}.status-read{color:rgb(var(--ax-sys-color-primary-200))}.status-failed{color:rgb(var(--ax-sys-color-danger-200))}.message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}.reaction-bubble{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;min-height:1.375rem;padding:.1rem .35rem;margin:0;background:rgba(var(--ax-sys-color-on-surface),.06);color:rgb(var(--ax-sys-color-on-surface));border:1px solid rgba(var(--ax-sys-color-on-surface),.1);border-radius:.75rem;box-shadow:none;cursor:pointer;transition:background-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),border-color var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}.reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}.reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}.reaction-emoji{font-size:.8125rem;line-height:1;display:inline-block}.reaction-count{font-size:.6875rem;font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--ax-sys-color-on-surface));opacity:.65;line-height:1}.reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-primary-600));opacity:.95;font-weight:600}.message-own .reaction-bubble{background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2);color:rgb(var(--ax-sys-color-on-primary-surface))}.message-own .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.2);border-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}.message-own .reaction-bubble-active{background:rgba(var(--ax-sys-color-on-primary-surface),.28);border-color:rgba(var(--ax-sys-color-on-primary-surface),.5)}.message-own .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-on-primary-surface),.34);border-color:rgba(var(--ax-sys-color-on-primary-surface),.6)}.message-own .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:.8}.message-own .reaction-bubble-active .reaction-count{color:rgb(var(--ax-sys-color-on-primary-surface));opacity:1}.message-reactions-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;margin-top:.25rem;justify-content:flex-start}// .message-own .message-reactions-container{// justify-content: flex-end;//}.add-reaction-button.add-reaction-outside{display:none;position:absolute;top:50%;inset-inline-end:-2.25rem;transform:translateY(-50%);align-items:center;justify-content:center;box-sizing:border-box;width:1.8rem;height:1.8rem;padding:0;margin:0;border-radius:50%;cursor:pointer;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));box-shadow:0 1px 2px #0000000f}.add-reaction-button{padding-inline-start:.05rem}.message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}.message-item:hover .add-reaction-button.add-reaction-outside,.add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}.add-reaction-button.add-reaction-outside:hover,.add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgb(var(--ax-sys-color-primary-500))}.add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.8}.reaction-picker-popup{position:fixed;background:rgb(var(--ax-sys-color-lightest-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:.65rem;z-index:100;min-width:auto;width:max-content;max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a;transform:translateY(-100%);margin-top:-.35rem;overflow:hidden}.reaction-picker-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .5rem .45rem .7rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface));min-height:0}.picker-title{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:rgb(var(--ax-sys-color-on-surface));opacity:.85}.picker-close{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;padding:0;background:transparent;border:none;border-radius:.25rem;cursor:pointer;font-size:.95rem;color:rgba(var(--ax-sys-color-on-surface),.55);transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.picker-close:hover{background:rgba(var(--ax-sys-color-danger-500),.1);color:rgb(var(--ax-sys-color-danger-500))}.reaction-bubble:focus-visible,.add-reaction-button:focus-visible,.picker-close:focus-visible,.reaction-picker-emoji:focus-visible,.action-trigger:focus-visible,.scroll-to-bottom:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:2px}.reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;padding:.45rem .5rem .5rem}.reaction-picker-emoji{width:2rem;height:2rem;padding:0;background:transparent;border:1px solid transparent;border-radius:.45rem;font-size:1.15rem;line-height:1;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reaction-picker-emoji:hover{// transform: scale(1.15);background:rgb(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background:rgb(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}.message-actions{padding-bottom:1.5rem;opacity:0;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:10}.message-item:hover .message-actions{opacity:1}.action-trigger{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-surface));border:1px solid rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius);font-size:.875rem;cursor:pointer;transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}.action-trigger:hover{background:rgb(var(--ax-sys-color-light-surface));// transform: scale(1.05)}.shortcut{font-size:.6875rem;opacity:.7}.scroll-to-bottom{position:absolute;bottom:1rem;right:1rem;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgb(var(--ax-sys-color-primary-500));color:rgb(var(--ax-sys-color-on-primary-surface));border:none;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function);z-index:999}.scroll-to-bottom:hover{// transform: scale(1.1)}.slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.slide-out{opacity:0;transform:translateY(100%);transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function),transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -16707,12 +16840,17 @@ class AXConversationItemComponent {
             const activeConv = this.conversationService.activeConversation();
             return activeConv?.id === this.conversation().id;
         }, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        /** True while this row's context menu is open */
+        this.contextMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "contextMenuOpen" }] : []));
         /** Item CSS classes - delegate to component logic */
         this.itemClasses = computed(() => {
             const classes = ['conversation-item'];
             if (this.isActive()) {
                 classes.push('conversation-item-active');
             }
+            if (this.contextMenuOpen()) {
+                classes.push('conversation-item-context-active');
+            }
             return classes.join(' ');
         }, ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
         /** Conversation status for avatar - delegate to utils */
@@ -16745,6 +16883,7 @@ class AXConversationItemComponent {
     }
     /** Handle context menu opening for conversations */
     handleContextMenuOpening(event) {
+        this.contextMenuOpen.set(true);
         const conversation = this.liveConversation();
         const actions = this.registry.conversationItemActions.getActionsForConversation(conversation);
         // Convert conversation item actions to context menu items
@@ -16768,6 +16907,7 @@ class AXConversationItemComponent {
     }
     /** Handle context menu item click for conversations */
     async handleContextMenuItemClick(event) {
+        this.contextMenuOpen.set(false);
         const action = event.item.data;
         const conversation = this.liveConversation();
         if (action && conversation && action.handler) {
@@ -16896,10 +17036,11 @@ class AXConversationItemComponent {
       [openOn]="'click'"
       [closeOn]="'click'"
       (onOpening)="handleContextMenuOpening($event)"
+      (onClose)="contextMenuOpen.set(false)"
       (onItemClick)="handleContextMenuItemClick($event)"
     >
     </ax-context-menu>
-  `, isInline: true, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.conversation-item-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.conversation-item-context-active{background:rgb(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}.conversation-item-active.conversation-item-context-active{background:rgb(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.conversation-item-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationItemComponent, decorators: [{
             type: Component,
@@ -17026,10 +17167,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       [openOn]="'click'"
       [closeOn]="'click'"
       (onOpening)="handleContextMenuOpening($event)"
+      (onClose)="contextMenuOpen.set(false)"
       (onItemClick)="handleContextMenuItemClick($event)"
     >
     </ax-context-menu>
-  `, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.conversation-item-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"] }]
+  `, styles: [":host{display:block}.conversation-item{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;margin:.375rem;border-radius:.5rem;cursor:pointer;transition:background .2s}.conversation-item:focus-visible,.conversation-item:hover{background:rgb(var(--ax-sys-color-light-surface));outline:none}.conversation-item-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.conversation-item-active:hover{background:rgb(var(--ax-sys-color-primary-lighter-surface))}.conversation-item-context-active{background:rgb(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}.conversation-item-active.conversation-item-context-active{background:rgb(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}.item-avatar{flex-shrink:0}.avatar-wrapper{position:relative}.conversation-item-avatar-icon{font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%}.avatar-status.status-online{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-success-500))}// .avatar-status.status-offline{// border: 2px solid rgb(var(--ax-sys-color-surface));// background: rgb(var(--ax-sys-color-neutral));//}.avatar-status.status-away{border:2px solid rgb(var(--ax-sys-color-surface));background-color:rgb(var(--ax-sys-color-warning-500))}.item-content{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1.1rem}.item-header{display:flex;align-items:center;justify-content:space-between;gap:.25rem}.item-title{display:flex;align-items:center;// gap: .25rem;font-weight:600;font-size:.875rem;flex:1;min-width:0}.item-title-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-time{font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.75rem;opacity:.7}.item-description{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;opacity:.7;min-width:0}.typing-indicator{color:rgb(var(--ax-sys-color-primary-500));font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.last-message{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-message{// font-weight: 600}.item-badge{flex-shrink:0}.mute-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-warning-500))}.block-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-danger-500))}.pin-icon{font-size:.75rem;margin-left:.375rem;opacity:.6;color:rgb(var(--ax-sys-color-primary-500));flex-shrink:0}\n"] }]
         }] });
 
 class AXNewConversationDialogComponent extends AXBasePageComponent {
@@ -17474,7 +17616,9 @@ class AXSidebarService {
                 return `${c.id}:${time}`;
             })
                 .join('|');
-            const cacheKey = `${conversations.length}-${query}-${tabId}-${pinnedIds}-${timestampsHash}`;
+            // Unread counts affect tab badges and list relevance — include so cache invalidates when only reads change
+            const unreadHash = conversations.map((c) => `${c.id}:${c.unreadCount ?? 0}`).join('|');
+            const cacheKey = `${conversations.length}-${query}-${tabId}-${pinnedIds}-${timestampsHash}-${unreadHash}`;
             // Return cached result if available
             if (this.filterCache.has(cacheKey)) {
                 const cached = this.filterCache.get(cacheKey);
@@ -17686,16 +17830,18 @@ class AXSidebarComponent {
       <ax-tabs (onActiveTabChanged)="onTabChange($event)" [look]="'with-line'" [style.overflow]="'hidden'">
         @for (tab of enabledTabs(); track tab.id) {
           <ax-tab-item [text]="tab.label" [key]="tab.id">
-            <ng-template #prefix>
-              @if (tab.icon) {
-                <ax-label class="tab-icon">{{ tab.icon }}</ax-label>
-              }
-            </ng-template>
-            <ng-template #suffix>
-              @if (tab.badge && getBadgeValue(tab.id)) {
-                <ax-badge [text]="getBadgeValue(tab.id)" [color]="'primary'" />
-              }
-            </ng-template>
+            @if (tab.icon) {
+              <ax-prefix>
+                <ax-icon>
+                  <i [class]="'tab-icon ' + tab.icon" aria-hidden="true"></i>
+                </ax-icon>
+              </ax-prefix>
+            }
+            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {
+              <ax-suffix>
+                <ax-badge [text]="badgeText" [color]="'primary'" />
+              </ax-suffix>
+            }
           </ax-tab-item>
         }
       </ax-tabs>
@@ -17760,12 +17906,13 @@ class AXSidebarComponent {
         </ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.sidebar{display:flex;flex-direction:column;height:100%;//background: rgb(var(--ax-sys-color-lightest-surface));// border-inline-end: 1px solid rgb(var(--ax-sys-color-border-light-surface));position:relative}.sidebar-header{min-height:64px;display:flex;align-items:center;gap:.25rem;padding:.75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.menu-button{flex-shrink:0}.sidebar-search{flex:1}.sidebar-list{flex:1;overflow-y:auto;position:relative;padding-bottom:4rem}.new-conversation-button-container{position:absolute;bottom:0;left:0;right:.25rem;padding:1rem .5rem;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.new-conversation-button-container-inner{display:flex;justify-content:center;align-items:center}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface))}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));gap:1rem}.empty-icon{font-size:4rem;line-height:1;opacity:.5;margin-bottom:.5rem}.empty-title{font-size:1.25rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface))}.empty-description{font-size:.875rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.7;max-width:300px;line-height:1.5}.empty-action{margin-top:.5rem}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}// ax-conversation-item:not(:last-child){// border-bottom: 1px solid rgb(var(--ax-sys-color-border-light-surface));//}.tab-icon{font-size:1rem}.conversation-skeleton{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.skeleton-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%}.skeleton-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}.skeleton-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.skeleton-title{flex:1;height:1rem;border-radius:.25rem}.skeleton-time{font-variant-numeric:tabular-nums;width:3rem;height:.75rem;border-radius:.25rem}.skeleton-message{height:.75rem;width:80%;border-radius:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXConversationItemComponent, selector: "ax-conversation-item", inputs: ["avatarTemplate", "conversation"], outputs: ["clicked"] }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.sidebar{display:flex;flex-direction:column;height:100%;//background: rgb(var(--ax-sys-color-lightest-surface));// border-inline-end: 1px solid rgb(var(--ax-sys-color-border-light-surface));position:relative}.sidebar-header{min-height:64px;display:flex;align-items:center;gap:.25rem;padding:.75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.menu-button{flex-shrink:0}.sidebar-search{flex:1}.sidebar-list{flex:1;overflow-y:auto;position:relative;padding-bottom:4rem}.new-conversation-button-container{position:absolute;bottom:0;left:0;right:.25rem;padding:1rem .5rem;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.new-conversation-button-container-inner{display:flex;justify-content:center;align-items:center}.list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface))}.list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));gap:1rem}.empty-icon{font-size:4rem;line-height:1;opacity:.5;margin-bottom:.5rem}.empty-title{font-size:1.25rem;font-weight:600;margin:0;color:rgb(var(--ax-sys-color-on-surface))}.empty-description{font-size:.875rem;margin:0;color:rgb(var(--ax-sys-color-on-surface));opacity:.7;max-width:300px;line-height:1.5}.empty-action{margin-top:.5rem}.list-loading-more{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.7}// ax-conversation-item:not(:last-child){// border-bottom: 1px solid rgb(var(--ax-sys-color-border-light-surface));//}.tab-icon{font-size:1rem}.conversation-skeleton{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.skeleton-avatar{flex-shrink:0;width:48px;height:48px;border-radius:50%}.skeleton-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}.skeleton-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.skeleton-title{flex:1;height:1rem;border-radius:.25rem}.skeleton-time{font-variant-numeric:tabular-nums;width:3rem;height:.75rem;border-radius:.25rem}.skeleton-message{height:.75rem;width:80%;border-radius:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXConversationItemComponent, selector: "ax-conversation-item", inputs: ["avatarTemplate", "conversation"], outputs: ["clicked"] }, { kind: "directive", type: AXInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge"], outputs: ["scrollThreshold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-conversation-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
+                        AXDecoratorModule,
                         AXTabsComponent,
                         AXTabItemComponent,
                         AXBadgeComponent,
@@ -17796,16 +17943,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
       <ax-tabs (onActiveTabChanged)="onTabChange($event)" [look]="'with-line'" [style.overflow]="'hidden'">
         @for (tab of enabledTabs(); track tab.id) {
           <ax-tab-item [text]="tab.label" [key]="tab.id">
-            <ng-template #prefix>
-              @if (tab.icon) {
-                <ax-label class="tab-icon">{{ tab.icon }}</ax-label>
-              }
-            </ng-template>
-            <ng-template #suffix>
-              @if (tab.badge && getBadgeValue(tab.id)) {
-                <ax-badge [text]="getBadgeValue(tab.id)" [color]="'primary'" />
-              }
-            </ng-template>
+            @if (tab.icon) {
+              <ax-prefix>
+                <ax-icon>
+                  <i [class]="'tab-icon ' + tab.icon" aria-hidden="true"></i>
+                </ax-icon>
+              </ax-prefix>
+            }
+            @if (tab.badge && getBadgeValue(tab.id); as badgeText) {
+              <ax-suffix>
+                <ax-badge [text]="badgeText" [color]="'primary'" />
+              </ax-suffix>
+            }
           </ax-tab-item>
         }
       </ax-tabs>
@@ -18357,5 +18506,5 @@ function getErrorMessage(code, params) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXAudioInfoBarBannerComponent, AXAudioPickerComponent, AXAudioRendererComponent, AXBaseRegistry, AXComposerActionRegistry, AXComposerComponent, AXComposerPopupComponent, AXComposerService, AXComposerTabRegistry, AXConversation2Module, AXConversationAiApiKey, AXConversationAiResponderService, AXConversationApi, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationService, AXConversationSharedStorage, AXConversationStoreService, AXConversationTabRegistry, AXEmojiTabComponent, AXErrorHandlerService, AXFallbackRendererComponent, AXFilePickerComponent, AXFileRendererComponent, AXFileUploadService, AXForwardMessageDialogComponent, AXImagePickerComponent, AXImageRendererComponent, AXInfiniteScrollDirective, AXInfoBarActionRegistry, AXInfoBarComponent, AXInfoBarSearchComponent, AXInfoBarService, AXLocationPickerComponent, AXLocationRendererComponent, AXMessageActionRegistry, AXMessageApi, AXMessageListComponent, AXMessageListService, AXMessageRendererRegistry, AXNewConversationDialogComponent, AXPickerFooterComponent, AXPickerHeaderComponent, AXRealtimeApi, AXRegistryService, AXSidebarComponent, AXSidebarService, AXStickerRendererComponent, AXStickerTabComponent, AXSystemRendererComponent, AXTextRendererComponent, AXUserApi, AXVideoInfoBarBannerComponent, AXVideoPickerComponent, AXVideoRendererComponent, AXVoiceInfoBarBannerComponent, AXVoiceRecorderComponent, AXVoiceRendererComponent, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_INFO_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_COPY_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_STICKER_API_KEY, CONNECTION_ERRORS, CONVERSATION_CONFIG, CONVERSATION_ERRORS, DEFAULT_COMPOSER_ACTIONS, DEFAULT_COMPOSER_TABS, DEFAULT_CONVERSATION_ITEM_ACTIONS, DEFAULT_CONVERSATION_TABS, DEFAULT_INFO_BAR_ACTIONS, DEFAULT_MESSAGE_ACTIONS, DEFAULT_MESSAGE_RENDERERS, ERROR_HANDLER_CONFIG, ERROR_MESSAGES, FILE_ERRORS, LOCATION_ERRORS, MESSAGE_ERRORS, PERMISSION_ERRORS, REGISTRY_CONFIG, URL_ERRORS, USER_ERRORS, axConversationIndexedDbStorage, conversationSharedStorage, formatErrorMessage, getDefaultConversationItemActions, getErrorMessage, mergeWithDefaults, provideConversation, sanitizeInput, validateConversationId, validateEmail, validateFile, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds };
+export { AXAudioInfoBarBannerComponent, AXAudioPickerComponent, AXAudioRendererComponent, AXBaseRegistry, AXComposerActionRegistry, AXComposerComponent, AXComposerPopupComponent, AXComposerService, AXComposerTabRegistry, AXConversation2Module, AXConversationAiApiKey, AXConversationAiResponderService, AXConversationApi, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationService, AXConversationSharedStorage, AXConversationStoreService, AXConversationTabRegistry, AXEmojiTabComponent, AXErrorHandlerService, AXFallbackRendererComponent, AXFilePickerComponent, AXFileRendererComponent, AXFileUploadService, AXForwardMessageDialogComponent, AXImagePickerComponent, AXImageRendererComponent, AXInfiniteScrollDirective, AXInfoBarActionRegistry, AXInfoBarComponent, AXInfoBarSearchComponent, AXInfoBarService, AXLocationPickerComponent, AXLocationRendererComponent, AXMessageActionRegistry, AXMessageApi, AXMessageListComponent, AXMessageListNoActiveDefaultComponent, AXMessageListService, AXMessageRendererRegistry, AXNewConversationDialogComponent, AXPickerFooterComponent, AXPickerHeaderComponent, AXRealtimeApi, AXRegistryService, AXSidebarComponent, AXSidebarService, AXStickerRendererComponent, AXStickerTabComponent, AXSystemRendererComponent, AXTextRendererComponent, AXUserApi, AXVideoInfoBarBannerComponent, AXVideoPickerComponent, AXVideoRendererComponent, AXVoiceInfoBarBannerComponent, AXVoiceRecorderComponent, AXVoiceRendererComponent, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_COMPOSER_AUDIO_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_ACTION, AX_CONVERSATION_COMPOSER_EMOJI_TAB, AX_CONVERSATION_COMPOSER_FILE_ACTION, AX_CONVERSATION_COMPOSER_IMAGE_ACTION, AX_CONVERSATION_COMPOSER_LOCATION_ACTION, AX_CONVERSATION_COMPOSER_STICKER_TAB, AX_CONVERSATION_COMPOSER_VIDEO_ACTION, AX_CONVERSATION_COMPOSER_VOICE_RECORDING_ACTION, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_IMAGE_RENDERER, AX_CONVERSATION_INFO_BAR_ARCHIVE_ACTION, AX_CONVERSATION_INFO_BAR_BLOCK_ACTION, AX_CONVERSATION_INFO_BAR_DELETE_ACTION, AX_CONVERSATION_INFO_BAR_DIVIDER, AX_CONVERSATION_INFO_BAR_INFO_ACTION, AX_CONVERSATION_INFO_BAR_MUTE_ACTION, AX_CONVERSATION_INFO_BAR_SEARCH_ACTION, AX_CONVERSATION_ITEM_BLOCK_ACTION, AX_CONVERSATION_ITEM_DELETE_ACTION, AX_CONVERSATION_ITEM_DIVIDER, AX_CONVERSATION_ITEM_MARK_READ_ACTION, AX_CONVERSATION_ITEM_MUTE_ACTION, AX_CONVERSATION_ITEM_PIN_ACTION, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_COPY_ACTION, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_STICKER_RENDERER, AX_CONVERSATION_SYSTEM_RENDERER, AX_CONVERSATION_TAB_ALL, AX_CONVERSATION_TAB_ARCHIVED, AX_CONVERSATION_TAB_BOT, AX_CONVERSATION_TAB_CHANNELS, AX_CONVERSATION_TAB_GROUPS, AX_CONVERSATION_TAB_PRIVATE, AX_CONVERSATION_TAB_UNREAD, AX_CONVERSATION_TEXT_RENDERER, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_STICKER_API_KEY, CONNECTION_ERRORS, CONVERSATION_CONFIG, CONVERSATION_ERRORS, DEFAULT_COMPOSER_ACTIONS, DEFAULT_COMPOSER_TABS, DEFAULT_CONVERSATION_ITEM_ACTIONS, DEFAULT_CONVERSATION_TABS, DEFAULT_INFO_BAR_ACTIONS, DEFAULT_MESSAGE_ACTIONS, DEFAULT_MESSAGE_RENDERERS, ERROR_HANDLER_CONFIG, ERROR_MESSAGES, FILE_ERRORS, LOCATION_ERRORS, MESSAGE_ERRORS, PERMISSION_ERRORS, REGISTRY_CONFIG, URL_ERRORS, USER_ERRORS, axConversationIndexedDbStorage, conversationSharedStorage, formatErrorMessage, getDefaultConversationItemActions, getErrorMessage, mergeWithDefaults, provideConversation, sanitizeInput, validateConversationId, validateEmail, validateFile, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds };
 //# sourceMappingURL=acorex-components-conversation2.mjs.map