@acorex/components 22.0.0-next.25 → 22.0.0-next.27

package/fesm2022/acorex-components-conversation.mjs

@@ -3,7 +3,7 @@ import { AXTabsComponent, AXTabItemComponent } from '@acorex/components/tabs';
 import * as i2 from '@angular/common';
 import { CommonModule, NgComponentOutlet, isPlatformBrowser, DOCUMENT, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, inject, Injectable, Injector, runInInjectionContext, PLATFORM_ID, DestroyRef, viewChild, ViewContainerRef, input, output, effect, ViewEncapsulation, Component, ElementRef, HostListener, Directive, EventEmitter, afterNextRender, untracked, model, viewChildren, SecurityContext, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, computed, Injector, runInInjectionContext, PLATFORM_ID, DestroyRef, viewChild, ViewContainerRef, input, output, effect, ViewEncapsulation, Component, ElementRef, HostListener, Directive, EventEmitter, afterNextRender, untracked, model, viewChildren, SecurityContext, NgModule } from '@angular/core';
 import { AXUploaderService, AXUploaderZoneDirective, AXUploaderBrowseDirective } from '@acorex/cdk/uploader';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXPopupService } from '@acorex/components/popup';
@@ -31,6 +31,7 @@ import { AXListComponent } from '@acorex/components/list';
 import * as i1$4 from '@acorex/components/search-box';
 import { AXSearchBoxComponent, AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXBadgeComponent } from '@acorex/components/badge';
+import { AXFabComponent } from '@acorex/components/fab';
 import { AXContextMenuComponent } from '@acorex/components/menu';
 import { AXDateTimeModule } from '@acorex/core/date-time';
 import * as i3$1 from '@acorex/core/format';
@@ -54,319 +55,6 @@ import { DomSanitizer } from '@angular/platform-browser';
  * Common types used across all API services
  */
 
-/**
- * Abstract Conversation Management API
- * Handle conversation CRUD operations, participants, and settings
- */
-/**
- * Abstract Conversation Management API
- *
- * Implement this abstract class to handle conversation operations.
- *
- * @example
- * ```typescript
- * @Injectable()
- * export class MyConversationApi extends AXConversationManagementApi {
- *   constructor(private http: HttpClient) {
- *     super();
- *   }
- *
- *   async createConversation(data: AXConversationCreateData): Promise<AXConversation> {
- *     const response = await this.http.post('/api/conversations', data).toPromise();
- *     return response;
- *   }
- *
- *   // ... implement other methods
- * }
- * ```
- */
-class AXConversationApi {
-    // =====================
-    // 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 Message Management API
- * Handle message CRUD operations, reactions, and interactions
- */
-/**
- * Abstract Message Management API
- *
- * Implement this abstract class to handle message operations.
- *
- * @example
- * ```typescript
- * @Injectable()
- * export class MyMessageApi extends AXConversationMessageApi {
- *   constructor(private http: HttpClient) {
- *     super();
- *   }
- *
- *   async sendMessage(command: AXConversationSendMessageCommand): Promise<AXConversationMessage> {
- *     const response = await this.http.post('/api/messages', command).toPromise();
- *     return response;
- *   }
- *
- *   // ... implement other methods
- * }
- * ```
- */
-class AXConversationMessageApi {
-    // =====================
-    // 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 Real-time Events API
- * Handle WebSocket/SSE connections and real-time event subscriptions
- */
-/**
- * Abstract Real-time Events API
- *
- * Implement this abstract class to handle real-time event subscriptions.
- * Supports WebSocket, SSE, or any other real-time protocol.
- *
- * @example
- * ```typescript
- * @Injectable()
- * export class MyRealtimeApi extends AXConversationRealtimeApi {
- *   private socket: WebSocket;
- *   private connectionStatus$ = new BehaviorSubject<AXConversationConnectionStatus>('disconnected');
- *
- *   async connect(options?: AXConversationConnectionOptions): Promise<void> {
- *     this.socket = new WebSocket(options?.url || 'ws://localhost:3000');
- *     this.socket.onopen = () => this.connectionStatus$.next('connected');
- *     // ... handle other events
- *   }
- *
- *   subscribeToMessages(conversationId: string): Observable<AXConversationMessage> {
- *     return new Observable(subscriber => {
- *       this.socket.addEventListener('message', (event) => {
- *         const data = JSON.parse(event.data);
- *         if (data.type === 'message' && data.conversationId === conversationId) {
- *           subscriber.next(data.message);
- *         }
- *       });
- *     });
- *   }
- *
- *   // ... implement other methods
- * }
- * ```
- */
-class AXConversationRealtimeApi {
-}
-
-/**
- * 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 AXConversationUserApi {
- *   constructor(private http: HttpClient) {
- *     super();
- *   }
- *
- *   async getCurrentUser(): Promise<AXConversationParticipant> {
- *     const response = await this.http.get('/api/users/me').toPromise();
- *     return response;
- *   }
- *
- *   // ... implement other methods
- * }
- * ```
- */
-class AXConversationUserApi {
-    // =====================
-    // 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
- */
-// Shared types
-
-/** Lightweight catalog ids — safe to import from plugin definitions without pulling pickers. */
-const AX_CONVERSATION_IMAGE_CATALOG = 'conversation-image';
-const AX_CONVERSATION_VIDEO_CATALOG = 'conversation-video';
-const AX_CONVERSATION_AUDIO_CATALOG = 'conversation-audio';
-const AX_CONVERSATION_FILE_CATALOG = 'conversation-file';
-const AX_CONVERSATION_VOICE_CATALOG = 'conversation-voice';
-/** Catalog names for conversation media message types (no picker module imports). */
-const AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE = {
-    image: AX_CONVERSATION_IMAGE_CATALOG,
-    video: AX_CONVERSATION_VIDEO_CATALOG,
-    audio: AX_CONVERSATION_AUDIO_CATALOG,
-    file: AX_CONVERSATION_FILE_CATALOG,
-    voice: AX_CONVERSATION_VOICE_CATALOG,
-    sticker: AX_CONVERSATION_IMAGE_CATALOG,
-};
-/** Resolves {@link AXConversationMessage.fileType} from command or message type. */
-function resolveConversationMessageFileType(type, fileType) {
-    return fileType ?? AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE[type];
-}
-
-let modulePromise = null;
-function loadSendMessageMedia() {
-    modulePromise ??= Promise.resolve().then(function () { return sendMessageMedia; });
-    return modulePromise;
-}
-async function applyLocalPreview$1(type, payload, localUrl, mimeType = 'application/octet-stream') {
-    const mod = await loadSendMessageMedia();
-    return mod.applyLocalPreview(type, payload, localUrl, mimeType);
-}
-async function createLocalPreviewUrl$1(fileService, platformId, source, messageType) {
-    const mod = await loadSendMessageMedia();
-    return mod.createLocalPreviewUrl(fileService, platformId, source, messageType);
-}
-async function mergeUploadResult$1(type, payload, result) {
-    const mod = await loadSendMessageMedia();
-    return mod.mergeUploadResult(type, payload, result);
-}
-async function revokeObjectUrl$1(platformId, url) {
-    const mod = await loadSendMessageMedia();
-    mod.revokeObjectUrl(platformId, url);
-}
-async function toUploaderReference$2(payload) {
-    const mod = await loadSendMessageMedia();
-    return mod.toUploaderReference(payload);
-}
-
-const AX_CONVERSATION_MEDIA_TYPES = new Set(['image', 'video', 'audio', 'file']);
-const normalizers = {};
-const loading = new Map();
-function isMediaPayloadType(type) {
-    return AX_CONVERSATION_MEDIA_TYPES.has(type);
-}
-async function loadNormalizer(type) {
-    if (normalizers[type]) {
-        return;
-    }
-    const pending = loading.get(type);
-    if (pending) {
-        await pending;
-        return;
-    }
-    const promise = (async () => {
-        switch (type) {
-            case 'image': {
-                const mod = await Promise.resolve().then(function () { return image_payload; });
-                normalizers.image = mod.normalizeImagePayload;
-                break;
-            }
-            case 'video': {
-                const mod = await Promise.resolve().then(function () { return video_payload; });
-                normalizers.video = mod.normalizeVideoPayload;
-                break;
-            }
-            case 'audio': {
-                const mod = await Promise.resolve().then(function () { return audio_payload; });
-                normalizers.audio = mod.normalizeAudioPayload;
-                break;
-            }
-            case 'file': {
-                const mod = await Promise.resolve().then(function () { return file_payload; });
-                normalizers.file = mod.normalizeFilePayload;
-                break;
-            }
-        }
-    })();
-    loading.set(type, promise);
-    await promise;
-}
-/** Normalize payload; loads media normalizers on demand. */
-async function normalizeMessagePayloadAsync(payload) {
-    if (!isMediaPayloadType(payload.type)) {
-        return payload;
-    }
-    await loadNormalizer(payload.type);
-    const normalize = normalizers[payload.type];
-    return normalize ? normalize(payload) : payload;
-}
-/**
- * Sync normalize — uses cached normalizers when available.
- * Media payloads pass through until a normalizer chunk has loaded (renderers normalize on display).
- */
-function normalizeMessagePayload(payload) {
-    if (!isMediaPayloadType(payload.type)) {
-        return payload;
-    }
-    const normalize = normalizers[payload.type];
-    if (normalize) {
-        return normalize(payload);
-    }
-    void loadNormalizer(payload.type);
-    return payload;
-}
-
 /**
  * Conversation Configuration Interface
  * Centralized configuration values to avoid magic numbers
@@ -430,12 +118,15 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     maxFilesPerMessage: 3,
     // Intersection Observer
     messageReadThreshold: 0.3,
+    messageReadDebounce: 400,
+    markConversationReadOnSelect: true,
     // Message list
     messageListBackground: '',
     features: {
         mediaPickers: [...AX_ALL_CONVERSATION_MEDIA_PICKERS],
         composerTabs: [...AX_ALL_CONVERSATION_COMPOSER_TABS],
     },
+    debugApiLogging: false,
 };
 /**
  * Helper function to merge user config with defaults
@@ -511,50 +202,292 @@ const AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS = new InjectionToken('AX_CONVERSAT
  * Default composer tabs configuration
  * Provide this token to override default composer tabs (emoji, stickers, etc.)
  */
-const AX_CONVERSATION_DEFAULT_COMPOSER_TABS = new InjectionToken('AX_CONVERSATION_DEFAULT_COMPOSER_TABS', {
-    providedIn: 'root',
-    factory: () => [],
-});
+const AX_CONVERSATION_DEFAULT_COMPOSER_TABS = new InjectionToken('AX_CONVERSATION_DEFAULT_COMPOSER_TABS', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Default composer actions configuration
+ * Provide this token to override default composer actions (attach, voice, etc.)
+ */
+const AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Default conversation tabs configuration
+ * Provide this token to override default conversation tabs (all, private, groups, etc.)
+ */
+const AX_CONVERSATION_DEFAULT_CONVERSATION_TABS = new InjectionToken('AX_CONVERSATION_DEFAULT_CONVERSATION_TABS', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Default info bar actions configuration
+ * Provide this token to override default info bar actions (mute, archive, block, etc.)
+ */
+const AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Default conversation item actions configuration
+ * Provide this token to override default conversation item actions (mute, delete, archive, etc.)
+ */
+const AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS', {
+    providedIn: 'root',
+    factory: () => [],
+});
+/**
+ * Complete registry configuration token
+ * Provide this for comprehensive registry configuration
+ */
+const AX_CONVERSATION_REGISTRY_CONFIG = new InjectionToken('AX_CONVERSATION_REGISTRY_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+
+/**
+ * API call logger for AXConversationService.
+ * Enabled via `debugApiLogging` in conversation config.
+ */
+const loggerFn = console.log;
+class AXConversationApiLoggerService {
+    constructor() {
+        this.config = inject(AX_CONVERSATION_CONFIG);
+    }
+    log(entry) {
+        if (!this.config.debugApiLogging) {
+            return;
+        }
+        loggerFn('[AXConversation API]', entry);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationApiLoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationApiLoggerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationApiLoggerService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Abstract Conversation Management API
+ * Handle conversation CRUD operations, participants, and settings
+ */
+/**
+ * Abstract Conversation Management API
+ *
+ * Implement this abstract class to handle conversation operations.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class MyConversationApi extends AXConversationManagementApi {
+ *   constructor(private http: HttpClient) {
+ *     super();
+ *   }
+ *
+ *   async createConversation(data: AXConversationCreateData): Promise<AXConversation> {
+ *     const response = await this.http.post('/api/conversations', data).toPromise();
+ *     return response;
+ *   }
+ *
+ *   // ... implement other methods
+ * }
+ * ```
+ */
+class AXConversationApi {
+    // =====================
+    // 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 Message Management API
+ * Handle message CRUD operations, reactions, and interactions
+ */
+/**
+ * Abstract Message Management API
+ *
+ * Implement this abstract class to handle message operations.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class MyMessageApi extends AXConversationMessageApi {
+ *   constructor(private http: HttpClient) {
+ *     super();
+ *   }
+ *
+ *   async sendMessage(command: AXConversationSendMessageCommand): Promise<AXConversationMessage> {
+ *     const response = await this.http.post('/api/messages', command).toPromise();
+ *     return response;
+ *   }
+ *
+ *   // ... implement other methods
+ * }
+ * ```
+ */
+class AXConversationMessageApi {
+    // =====================
+    // 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(),
+        };
+    }
+}
+
 /**
- * Default composer actions configuration
- * Provide this token to override default composer actions (attach, voice, etc.)
+ * Abstract Real-time Events API
+ * Handle WebSocket/SSE connections and real-time event subscriptions
  */
-const AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS', {
-    providedIn: 'root',
-    factory: () => [],
-});
 /**
- * Default conversation tabs configuration
- * Provide this token to override default conversation tabs (all, private, groups, etc.)
+ * Abstract Real-time Events API
+ *
+ * Implement this abstract class to handle real-time event subscriptions.
+ * Supports WebSocket, SSE, or any other real-time protocol.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class MyRealtimeApi extends AXConversationRealtimeApi {
+ *   private socket: WebSocket;
+ *   private connectionStatus$ = new BehaviorSubject<AXConversationConnectionStatus>('disconnected');
+ *
+ *   async connect(options?: AXConversationConnectionOptions): Promise<void> {
+ *     this.socket = new WebSocket(options?.url || 'ws://localhost:3000');
+ *     this.socket.onopen = () => this.connectionStatus$.next('connected');
+ *     // ... handle other events
+ *   }
+ *
+ *   subscribeToMessages(conversationId: string): Observable<AXConversationMessage> {
+ *     return new Observable(subscriber => {
+ *       this.socket.addEventListener('message', (event) => {
+ *         const data = JSON.parse(event.data);
+ *         if (data.type === 'message' && data.conversationId === conversationId) {
+ *           subscriber.next(data.message);
+ *         }
+ *       });
+ *     });
+ *   }
+ *
+ *   // ... implement other methods
+ * }
+ * ```
  */
-const AX_CONVERSATION_DEFAULT_CONVERSATION_TABS = new InjectionToken('AX_CONVERSATION_DEFAULT_CONVERSATION_TABS', {
-    providedIn: 'root',
-    factory: () => [],
-});
+class AXConversationRealtimeApi {
+}
+
 /**
- * Default info bar actions configuration
- * Provide this token to override default info bar actions (mute, archive, block, etc.)
+ * Abstract User Management API
+ * Handle user profile management and user operations for conversations
  */
-const AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS', {
-    providedIn: 'root',
-    factory: () => [],
-});
 /**
- * Default conversation item actions configuration
- * Provide this token to override default conversation item actions (mute, delete, archive, etc.)
+ * Abstract User Management API
+ *
+ * Implement this abstract class to handle user management for conversations.
+ *
+ * @example
+ * ```typescript
+ * @Injectable()
+ * export class MyUserApi extends AXConversationUserApi {
+ *   constructor(private http: HttpClient) {
+ *     super();
+ *   }
+ *
+ *   async getCurrentUser(): Promise<AXConversationParticipant> {
+ *     const response = await this.http.get('/api/users/me').toPromise();
+ *     return response;
+ *   }
+ *
+ *   // ... implement other methods
+ * }
+ * ```
  */
-const AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS = new InjectionToken('AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS', {
-    providedIn: 'root',
-    factory: () => [],
-});
+class AXConversationUserApi {
+    // =====================
+    // 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(),
+        };
+    }
+}
+
 /**
- * Complete registry configuration token
- * Provide this for comprehensive registry configuration
+ * API Services
+ * Export all abstract API classes and types
  */
-const AX_CONVERSATION_REGISTRY_CONFIG = new InjectionToken('AX_CONVERSATION_REGISTRY_CONFIG', {
-    providedIn: 'root',
-    factory: () => ({}),
-});
+// Shared types
+
+/** Lightweight catalog ids — safe to import from plugin definitions without pulling pickers. */
+const AX_CONVERSATION_IMAGE_CATALOG = 'conversation-image';
+const AX_CONVERSATION_VIDEO_CATALOG = 'conversation-video';
+const AX_CONVERSATION_AUDIO_CATALOG = 'conversation-audio';
+const AX_CONVERSATION_FILE_CATALOG = 'conversation-file';
+const AX_CONVERSATION_VOICE_CATALOG = 'conversation-voice';
+/** Catalog names for conversation media message types (no picker module imports). */
+const AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE = {
+    image: AX_CONVERSATION_IMAGE_CATALOG,
+    video: AX_CONVERSATION_VIDEO_CATALOG,
+    audio: AX_CONVERSATION_AUDIO_CATALOG,
+    file: AX_CONVERSATION_FILE_CATALOG,
+    voice: AX_CONVERSATION_VOICE_CATALOG,
+    sticker: AX_CONVERSATION_IMAGE_CATALOG,
+};
+/** Resolves {@link AXConversationMessage.fileType} from command or message type. */
+function resolveConversationMessageFileType(type, fileType) {
+    return fileType ?? AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE[type];
+}
 
 class AXConversationMessageUtilsService {
     /**
@@ -962,6 +895,73 @@ function resolveConversationForViewer(conversation, currentUserId) {
     };
 }
 
+const AX_CONVERSATION_MEDIA_TYPES = new Set(['image', 'video', 'audio', 'file']);
+const normalizers = {};
+const loading = new Map();
+function isMediaPayloadType(type) {
+    return AX_CONVERSATION_MEDIA_TYPES.has(type);
+}
+async function loadNormalizer(type) {
+    if (normalizers[type]) {
+        return;
+    }
+    const pending = loading.get(type);
+    if (pending) {
+        await pending;
+        return;
+    }
+    const promise = (async () => {
+        switch (type) {
+            case 'image': {
+                const mod = await Promise.resolve().then(function () { return image_payload; });
+                normalizers.image = mod.normalizeImagePayload;
+                break;
+            }
+            case 'video': {
+                const mod = await Promise.resolve().then(function () { return video_payload; });
+                normalizers.video = mod.normalizeVideoPayload;
+                break;
+            }
+            case 'audio': {
+                const mod = await Promise.resolve().then(function () { return audio_payload; });
+                normalizers.audio = mod.normalizeAudioPayload;
+                break;
+            }
+            case 'file': {
+                const mod = await Promise.resolve().then(function () { return file_payload; });
+                normalizers.file = mod.normalizeFilePayload;
+                break;
+            }
+        }
+    })();
+    loading.set(type, promise);
+    await promise;
+}
+/** Normalize payload; loads media normalizers on demand. */
+async function normalizeMessagePayloadAsync(payload) {
+    if (!isMediaPayloadType(payload.type)) {
+        return payload;
+    }
+    await loadNormalizer(payload.type);
+    const normalize = normalizers[payload.type];
+    return normalize ? normalize(payload) : payload;
+}
+/**
+ * Sync normalize — uses cached normalizers when available.
+ * Media payloads pass through until a normalizer chunk has loaded (renderers normalize on display).
+ */
+function normalizeMessagePayload(payload) {
+    if (!isMediaPayloadType(payload.type)) {
+        return payload;
+    }
+    const normalize = normalizers[payload.type];
+    if (normalize) {
+        return normalize(payload);
+    }
+    void loadNormalizer(payload.type);
+    return payload;
+}
+
 /**
  * Validation Utilities
  * Centralized validation functions for messages and user input
@@ -1331,6 +1331,32 @@ function validateLongitude(longitude) {
     return { valid: true };
 }
 
+let modulePromise = null;
+function loadSendMessageMedia() {
+    modulePromise ??= Promise.resolve().then(function () { return sendMessageMedia; });
+    return modulePromise;
+}
+async function applyLocalPreview$1(type, payload, localUrl, mimeType = 'application/octet-stream') {
+    const mod = await loadSendMessageMedia();
+    return mod.applyLocalPreview(type, payload, localUrl, mimeType);
+}
+async function createLocalPreviewUrl$1(fileService, platformId, source, messageType) {
+    const mod = await loadSendMessageMedia();
+    return mod.createLocalPreviewUrl(fileService, platformId, source, messageType);
+}
+async function mergeUploadResult$1(type, payload, result) {
+    const mod = await loadSendMessageMedia();
+    return mod.mergeUploadResult(type, payload, result);
+}
+async function revokeObjectUrl$1(platformId, url) {
+    const mod = await loadSendMessageMedia();
+    mod.revokeObjectUrl(platformId, url);
+}
+async function toUploaderReference$2(payload) {
+    const mod = await loadSendMessageMedia();
+    return mod.toUploaderReference(payload);
+}
+
 /**
  * In-memory conversation and message graph (signal-based).
  * Plain class — not DI-registered; instantiated by `AXConversationService`.
@@ -2960,6 +2986,7 @@ class AXConversationService {
         this.fileService = inject(AXFileService);
         this.platformId = inject(PLATFORM_ID);
         this.errorHandler = inject(AXConversationErrorHandlerService);
+        this.apiLogger = inject(AXConversationApiLoggerService);
         this.dialogService = inject(AXDialogService);
         this.popupService = inject(AXPopupService);
         this.translation = inject(AXTranslationService);
@@ -3040,19 +3067,48 @@ class AXConversationService {
         this.onTypingIndicator = this._typingIndicator$.asObservable();
         this.onPresenceChange = this._presenceUpdate$.asObservable();
         // Message count refresh event (emits messageId when counts need refresh)
-        this._messageCountRefresh$ = new Subject();
-        this.onMessageCountRefresh = this._messageCountRefresh$.asObservable();
         // Current user cache
         this._currentUser = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_currentUser" }] : /* istanbul ignore next */ []));
         this.currentUser = this._currentUser.asReadonly();
+        /** One-time async initialization (connect, user, conversations, realtime). */
+        this.initPromise = null;
+        /** Generation counter — stale page-0 loads are ignored after conversation switches. */
+        this.messageLoadGeneration = 0;
+        /** Batched read-receipt queue keyed by conversation ID. */
+        this.readQueue = new Map();
+        /** Session cache for available reaction emojis. */
+        this.availableReactionsCache = null;
+        this.availableReactionsPromise = null;
         this.destroyRef.onDestroy(() => {
             this._conversationSwitch$.next();
             this._conversationSwitch$.complete();
             this.destroy$.next();
             this.destroy$.complete();
+            if (this.readFlushHandle) {
+                clearTimeout(this.readFlushHandle);
+            }
+            void this.flushReadQueue();
         });
-        this.initializeService();
+    }
+    /** Log and invoke an async API method from AXConversationService. */
+    callApi(serviceMethod, api, apiMethod, fn, ...context) {
+        this.apiLogger.log({ serviceMethod, api, apiMethod, context });
+        return fn();
+    }
+    /** Log a sync API invocation (e.g. realtime observable subscriptions). */
+    logApi(serviceMethod, api, apiMethod, ...context) {
+        this.apiLogger.log({ serviceMethod, api, apiMethod, context });
+    }
+    /**
+     * Ensures the service is initialized exactly once.
+     * Safe to call from container components or before any public API usage.
+     */
+    ensureInitialized() {
+        if (!this.initPromise) {
+            this.initPromise = this.initializeService();
+        }
+        return this.initPromise;
     }
     /**
      * Initialize the service
@@ -3062,10 +3118,10 @@ class AXConversationService {
         try {
             // Connect to real-time API (optional)
             if (this.realtimeApi) {
-                await this.realtimeApi.connect();
+                await this.callApi('initializeService', 'realtimeApi', 'connect', () => this.realtimeApi.connect());
             }
             // Load current user
-            const currentUser = await this.userApi.getCurrentUser();
+            const currentUser = await this.callApi('initializeService', 'userApi', 'getCurrentUser', () => this.userApi.getCurrentUser());
             this._currentUser.set(currentUser);
             // Subscribe to real-time events
             this.subscribeToEvents();
@@ -3087,6 +3143,7 @@ class AXConversationService {
             return;
         }
         // Subscribe to message updates
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToMessageUpdates');
         this.realtimeApi
             .subscribeToMessageUpdates()
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3096,10 +3153,9 @@ class AXConversationService {
             .subscribe((message) => {
             this.handleMessageUpdate(message);
             this._messageUpdated$.next(message);
-            // Check if this is a reply or forward and refresh counts
-            this.handleMessageCountUpdate(message);
         });
         // Subscribe to message deletions
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToMessageDeletions');
         this.realtimeApi
             .subscribeToMessageDeletions()
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3111,6 +3167,7 @@ class AXConversationService {
             this._messageDeleted$.next(messageId);
         });
         // Subscribe to typing indicators
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToTypingIndicators', '');
         this.realtimeApi
             .subscribeToTypingIndicators('')
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3122,6 +3179,7 @@ class AXConversationService {
             this._typingIndicator$.next(indicator);
         });
         // Subscribe to presence updates
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToPresenceUpdates');
         this.realtimeApi
             .subscribeToPresenceUpdates()
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3133,6 +3191,7 @@ class AXConversationService {
             this._presenceUpdate$.next(update);
         });
         // Subscribe to conversation updates (for badge updates, last message, etc.)
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToConversationUpdates');
         this.realtimeApi
             .subscribeToConversationUpdates()
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3144,6 +3203,7 @@ class AXConversationService {
         });
         // Global message stream — backs message list even when the backend only pushes
         // conversation.lastMessage updates or when per-conversation subscribe races loadMessages.
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToMessages', '');
         this.realtimeApi
             .subscribeToMessages('')
             .pipe(takeUntil(this.destroy$), catchError((error) => {
@@ -3163,10 +3223,11 @@ class AXConversationService {
         this._loading.set(true);
         this._error.set(null);
         try {
-            const result = await this.conversationApi.getConversations({
+            const pagination = {
                 page: 0,
                 pageSize: this.config.conversationPageSize,
-            }, undefined);
+            };
+            const result = await this.callApi('loadConversations', 'conversationApi', 'getConversations', () => this.conversationApi.getConversations(pagination, undefined), pagination, undefined);
             // Store conversations
             this.state.setConversations(result.items);
             this._conversationsPagination.set({
@@ -3188,11 +3249,13 @@ class AXConversationService {
      * Returns true if there are more pages available
      */
     async loadMoreConversations(page) {
+        await this.ensureInitialized();
         try {
-            const result = await this.conversationApi.getConversations({
+            const pagination = {
                 page,
                 pageSize: this.config.conversationPageSize,
-            }, undefined);
+            };
+            const result = await this.callApi('loadMoreConversations', 'conversationApi', 'getConversations', () => this.conversationApi.getConversations(pagination, undefined), pagination, undefined);
             // Append new conversations to existing ones
             if (result.items.length > 0) {
                 this.state.addConversations(result.items);
@@ -3210,16 +3273,14 @@ class AXConversationService {
         }
     }
     /**
-     * Select a conversation
-     * Loads messages and subscribes to real-time updates
-     * Note: Messages are now marked as read individually via intersection observer when viewed
+     * Select a conversation and load page 0 of its message history.
      */
     async selectConversation(conversationId) {
+        await this.ensureInitialized();
         try {
-            // Cancel previous per-conversation subscriptions before switching
             this._conversationSwitch$.next();
+            this.messageLoadGeneration++;
             this._activeConversationId.set(conversationId);
-            // Load messages for this conversation (page 0 replaces cached messages for this chat)
             this._loadingActiveMessages.set(true);
             try {
                 await this.loadMessages(conversationId, 0);
@@ -3227,6 +3288,12 @@ class AXConversationService {
             finally {
                 this._loadingActiveMessages.set(false);
             }
+            if (this.config.markConversationReadOnSelect) {
+                const conversation = this.state.getConversation(conversationId);
+                if (conversation && conversation.unreadCount > 0) {
+                    void this.markConversationAsRead(conversationId);
+                }
+            }
         }
         catch (error) {
             this.errorHandler.handle(error, 'selectConversation', { conversationId });
@@ -3244,14 +3311,19 @@ class AXConversationService {
      */
     async loadMessages(conversationId, page = 0) {
         const empty = { items: [], hasMore: false, page };
+        const loadGeneration = page === 0 ? this.messageLoadGeneration : null;
         try {
             const paginationState = this._messagesPaginationByConversation().get(conversationId);
             const cursor = page > 0 ? paginationState?.nextCursor : undefined;
-            const result = await this.messageApi.getMessages(conversationId, {
+            const messagePagination = {
                 page,
                 pageSize: this.config.messagePageSize,
                 cursor,
-            });
+            };
+            const result = await this.callApi('loadMessages', 'messageApi', 'getMessages', () => this.messageApi.getMessages(conversationId, messagePagination), conversationId, messagePagination);
+            if (page === 0 && loadGeneration !== null && loadGeneration !== this.messageLoadGeneration) {
+                return empty;
+            }
             if (page === 0) {
                 this.state.setConversationMessages(conversationId, result.items);
             }
@@ -3357,16 +3429,10 @@ class AXConversationService {
                     payload: await mergeUploadResult$1(command.type, sendCommand.payload, uploadResult),
                 };
                 this.state.updateMessage(tempMessageId, { payload: sendCommand.payload });
-                const sentMessage = await this.messageApi.sendMessage(sendCommand);
+                const sentMessage = await this.callApi('sendMessage', 'messageApi', 'sendMessage', () => this.messageApi.sendMessage(sendCommand), sendCommand);
                 this.state.deleteMessage(tempMessageId);
                 this.state.addMessage(sentMessage);
                 this.updateConversationLastMessage(sentMessage);
-                if (sentMessage.forwarded && sentMessage.forwardedFrom?.messageId) {
-                    this._messageCountRefresh$.next({
-                        messageId: sentMessage.forwardedFrom.messageId,
-                        type: 'forward',
-                    });
-                }
                 if (localPreviewUrl?.startsWith('blob:')) {
                     await revokeObjectUrl$1(this.platformId, localPreviewUrl);
                 }
@@ -3399,16 +3465,10 @@ class AXConversationService {
                 metadata: command.metadata,
             };
             this.state.addMessage(tempMessage);
-            const sentMessage = await this.messageApi.sendMessage(sendCommand);
+            const sentMessage = await this.callApi('sendMessage', 'messageApi', 'sendMessage', () => this.messageApi.sendMessage(sendCommand), sendCommand);
             this.state.deleteMessage(tempMessageId);
             this.state.addMessage(sentMessage);
             this.updateConversationLastMessage(sentMessage);
-            if (sentMessage.forwarded && sentMessage.forwardedFrom?.messageId) {
-                this._messageCountRefresh$.next({
-                    messageId: sentMessage.forwardedFrom.messageId,
-                    type: 'forward',
-                });
-            }
         }
         catch (error) {
             this.state.updateMessage(tempMessageId, { status: 'failed' });
@@ -3442,7 +3502,7 @@ class AXConversationService {
                 metadata: message.metadata,
             };
             // Send to server
-            const sentMessage = await this.messageApi.sendMessage(command);
+            const sentMessage = await this.callApi('retryFailedMessage', 'messageApi', 'sendMessage', () => this.messageApi.sendMessage(command), command);
             // Replace with real message
             this.state.deleteMessage(messageId);
             this.state.addMessage(sentMessage);
@@ -3470,7 +3530,7 @@ class AXConversationService {
                 editedAt: new Date(),
             });
             // Sync with server
-            await this.messageApi.editMessage(messageId, payload);
+            await this.callApi('editMessage', 'messageApi', 'editMessage', () => this.messageApi.editMessage(messageId, payload), messageId, payload);
         }
         catch (error) {
             // Rollback on failure
@@ -3503,7 +3563,7 @@ class AXConversationService {
             // Optimistic delete
             this.state.deleteMessage(messageId);
             // Sync with server
-            await this.messageApi.deleteMessage(messageId, forEveryone);
+            await this.callApi('deleteMessage', 'messageApi', 'deleteMessage', () => this.messageApi.deleteMessage(messageId, forEveryone), messageId, forEveryone);
         }
         catch (error) {
             // Rollback on failure
@@ -3520,7 +3580,7 @@ class AXConversationService {
      */
     async reactToMessage(messageId, emoji) {
         try {
-            await this.messageApi.addReaction(messageId, emoji);
+            await this.callApi('reactToMessage', 'messageApi', 'addReaction', () => this.messageApi.addReaction(messageId, emoji), messageId, emoji);
             // Update will come through subscribeToMessageUpdates
         }
         catch (error) {
@@ -3533,41 +3593,104 @@ class AXConversationService {
      * Returns default reactions on error
      */
     async getAvailableReactions() {
-        try {
-            return await this.messageApi.getAvailableReactions();
-        }
-        catch (error) {
-            this.errorHandler.handle(error, 'getAvailableReactions');
-            // Return default reactions on error (consistent with other methods)
-            return ['👍', '❤️', '😂', '😮', '😢', '🙏'];
+        if (this.availableReactionsCache) {
+            return this.availableReactionsCache;
+        }
+        if (!this.availableReactionsPromise) {
+            this.availableReactionsPromise = this.callApi('getAvailableReactions', 'messageApi', 'getAvailableReactions', () => this.messageApi.getAvailableReactions())
+                .then((reactions) => {
+                this.availableReactionsCache = reactions;
+                return reactions;
+            })
+                .catch((error) => {
+                this.errorHandler.handle(error, 'getAvailableReactions');
+                const fallback = ['👍', '❤️', '😂', '😮', '😢', '🙏'];
+                this.availableReactionsCache = fallback;
+                return fallback;
+            })
+                .finally(() => {
+                this.availableReactionsPromise = null;
+            });
         }
+        return this.availableReactionsPromise;
     }
     /**
-     * Mark a single message as read
-     * Updates message status locally and syncs with server
+     * Queue a message to be marked as read (batched/debounced API sync).
      */
-    async markMessageAsRead(messageId) {
+    queueMessageAsRead(messageId) {
         const message = this.state.getMessage(messageId);
-        if (!message || message.status === 'read')
+        if (!message || message.status === 'read') {
             return;
-        try {
-            // Optimistic update
-            this.state.updateMessage(messageId, { status: 'read' });
-            // Sync with server
-            await this.messageApi.markAsRead(message.conversationId, [messageId]);
-            // Update conversation unread count
-            const conversation = this.state.getConversation(message.conversationId);
-            if (conversation && conversation.unreadCount > 0) {
-                this.state.updateConversation(message.conversationId, {
-                    unreadCount: Math.max(0, conversation.unreadCount - 1),
-                });
-            }
         }
-        catch (error) {
-            // Rollback on failure
-            this.state.updateMessage(messageId, { status: message.status });
-            this.errorHandler.handle(error, 'markMessageAsRead', { messageId });
-            // Don't throw - marking as read failure shouldn't break the app
+        this.state.updateMessage(messageId, { status: 'read' });
+        let queue = this.readQueue.get(message.conversationId);
+        if (!queue) {
+            queue = new Set();
+            this.readQueue.set(message.conversationId, queue);
+        }
+        queue.add(messageId);
+        const conversation = this.state.getConversation(message.conversationId);
+        if (conversation && conversation.unreadCount > 0) {
+            this.state.updateConversation(message.conversationId, {
+                unreadCount: Math.max(0, conversation.unreadCount - 1),
+            });
+        }
+        this.scheduleReadFlush();
+    }
+    /**
+     * Mark a single message as read (queues for batched sync).
+     */
+    async markMessageAsRead(messageId) {
+        this.queueMessageAsRead(messageId);
+    }
+    scheduleReadFlush() {
+        if (this.readFlushHandle) {
+            clearTimeout(this.readFlushHandle);
+        }
+        this.readFlushHandle = setTimeout(() => {
+            this.readFlushHandle = undefined;
+            void this.flushReadQueue();
+        }, this.config.messageReadDebounce);
+    }
+    /**
+     * Drop queued per-message read receipts without syncing to the API.
+     * Used before conversation-level mark-as-read to avoid duplicate API calls.
+     */
+    discardReadQueue(conversationId) {
+        if (conversationId) {
+            this.readQueue.delete(conversationId);
+        }
+        else {
+            this.readQueue.clear();
+        }
+        if (this.readFlushHandle) {
+            clearTimeout(this.readFlushHandle);
+            this.readFlushHandle = undefined;
+        }
+        if (this.readQueue.size > 0) {
+            this.scheduleReadFlush();
+        }
+    }
+    async flushReadQueue() {
+        const snapshot = new Map(this.readQueue);
+        this.readQueue.clear();
+        for (const [conversationId, ids] of snapshot) {
+            const messageIds = [...ids];
+            if (messageIds.length === 0) {
+                continue;
+            }
+            try {
+                await this.callApi('flushReadQueue', 'messageApi', 'markAsRead', () => this.messageApi.markAsRead(conversationId, messageIds), conversationId, messageIds);
+            }
+            catch (error) {
+                for (const id of messageIds) {
+                    const msg = this.state.getMessage(id);
+                    if (msg?.status === 'read') {
+                        this.state.updateMessage(id, { status: 'delivered' });
+                    }
+                }
+                this.errorHandler.handle(error, 'flushReadQueue', { conversationId, count: messageIds.length });
+            }
         }
     }
     /**
@@ -3575,6 +3698,7 @@ class AXConversationService {
      * Marks messages locally and syncs with server
      */
     async markAsRead(conversationId) {
+        await this.flushReadQueue();
         const messages = this.state.getConversationMessages(conversationId);
         const currentId = this._currentUser()?.id ?? 'current-user';
         const unreadMessageIds = messages.filter((m) => m.status !== 'read' && m.senderId !== currentId).map((m) => m.id);
@@ -3584,7 +3708,7 @@ class AXConversationService {
             // Optimistic update
             this.state.resetUnreadCount(conversationId);
             // Sync with server
-            await this.messageApi.markAsRead(conversationId, unreadMessageIds);
+            await this.callApi('markAsRead', 'messageApi', 'markAsRead', () => this.messageApi.markAsRead(conversationId, unreadMessageIds), conversationId, unreadMessageIds);
         }
         catch (error) {
             // Rollback on failure
@@ -3601,7 +3725,7 @@ class AXConversationService {
      */
     async sendTypingIndicator(conversationId) {
         try {
-            await this.messageApi.sendTypingIndicator(conversationId);
+            await this.callApi('sendTypingIndicator', 'messageApi', 'sendTypingIndicator', () => this.messageApi.sendTypingIndicator(conversationId), conversationId);
         }
         catch (error) {
             // Log but don't throw - typing indicators are not critical
@@ -3614,7 +3738,7 @@ class AXConversationService {
      */
     async searchConversations(query) {
         try {
-            return await this.conversationApi.searchConversations(query);
+            return await this.callApi('searchConversations', 'conversationApi', 'searchConversations', () => this.conversationApi.searchConversations(query), query);
         }
         catch (error) {
             this.errorHandler.handle(error, 'searchConversations', { query });
@@ -3636,6 +3760,7 @@ class AXConversationService {
         if (isFromOtherUser && !isActiveConversation) {
             this.state.incrementUnreadCount(message.conversationId);
         }
+        this.syncMessageCountFromRealtime(message, isActiveConversation);
     }
     /**
      * Handle message update
@@ -3651,18 +3776,24 @@ class AXConversationService {
         this.state.updateMessage(message.id, message);
     }
     /**
-     * Handle message count update
-     * Emits events when a message is a reply or forward so components can refresh counts
+     * Bump reply/forward counts locally when realtime events arrive outside the active message list.
      */
-    handleMessageCountUpdate(message) {
-        // If this message is a reply, emit event to refresh the original message's reply count
-        if (message.replyTo?.id) {
-            this._messageCountRefresh$.next({ messageId: message.replyTo.id, type: 'reply' });
+    syncMessageCountFromRealtime(message, isActiveConversation) {
+        if (message.replyTo?.id && !isActiveConversation) {
+            this.bumpMessageCount(message.replyTo.id, 'replyCount');
         }
-        // If this message is a forward, emit event to refresh the original message's forward count
-        if (message.forwardedFrom?.messageId) {
-            this._messageCountRefresh$.next({ messageId: message.forwardedFrom.messageId, type: 'forward' });
+        if (message.forwardedFrom?.messageId && !isActiveConversation) {
+            this.bumpMessageCount(message.forwardedFrom.messageId, 'forwardCount');
+        }
+    }
+    bumpMessageCount(messageId, field, delta = 1) {
+        const message = this.state.getMessage(messageId);
+        if (!message) {
+            return;
         }
+        this.state.updateMessage(messageId, {
+            [field]: (message[field] ?? 0) + delta,
+        });
     }
     /**
      * Handle message deletion
@@ -3696,12 +3827,6 @@ class AXConversationService {
      * Updates conversation metadata including unread count, last message, etc.
      */
     handleConversationUpdate(conversation) {
-        const lastMessage = conversation.lastMessage;
-        if (lastMessage &&
-            conversation.id === this._activeConversationId() &&
-            !this.state.getMessage(lastMessage.id)) {
-            this.state.addMessage(lastMessage);
-        }
         this.state.setConversation(conversation);
     }
     /**
@@ -3733,14 +3858,14 @@ class AXConversationService {
             if (metadata !== undefined)
                 apiUpdates.metadata = metadata;
             if (Object.keys(apiUpdates).length > 0) {
-                await this.conversationApi.updateConversation(conversationId, apiUpdates);
+                await this.callApi('updateConversation', 'conversationApi', 'updateConversation', () => this.conversationApi.updateConversation(conversationId, apiUpdates), conversationId, apiUpdates);
             }
             if (archived !== undefined) {
                 if (archived) {
-                    await this.conversationApi.archiveConversation(conversationId);
+                    await this.callApi('updateConversation', 'conversationApi', 'archiveConversation', () => this.conversationApi.archiveConversation(conversationId), conversationId);
                 }
                 else {
-                    await this.conversationApi.unarchiveConversation(conversationId);
+                    await this.callApi('updateConversation', 'conversationApi', 'unarchiveConversation', () => this.conversationApi.unarchiveConversation(conversationId), conversationId);
                 }
             }
             this.state.updateConversation(conversationId, updates);
@@ -3757,7 +3882,7 @@ class AXConversationService {
      */
     async updateConversationSettings(conversationId, settings) {
         try {
-            await this.conversationApi.updateConversationSettings(conversationId, settings);
+            await this.callApi('updateConversationSettings', 'conversationApi', 'updateConversationSettings', () => this.conversationApi.updateConversationSettings(conversationId, settings), conversationId, settings);
             this.state.updateSettings(conversationId, settings);
         }
         catch (error) {
@@ -3772,7 +3897,7 @@ class AXConversationService {
      */
     async updateConversationTitle(conversationId, title) {
         try {
-            await this.conversationApi.updateConversation(conversationId, { title });
+            await this.callApi('updateConversationTitle', 'conversationApi', 'updateConversation', () => this.conversationApi.updateConversation(conversationId, { title }), conversationId, { title });
             this.state.updateTitle(conversationId, title);
         }
         catch (error) {
@@ -3789,7 +3914,8 @@ class AXConversationService {
         try {
             const current = this.state.getConversation(conversationId);
             const mergedMetadata = { ...current?.metadata, ...metadata };
-            await this.conversationApi.updateConversation(conversationId, { metadata: mergedMetadata });
+            const metadataUpdate = { metadata: mergedMetadata };
+            await this.callApi('updateConversationMetadata', 'conversationApi', 'updateConversation', () => this.conversationApi.updateConversation(conversationId, metadataUpdate), conversationId, metadataUpdate);
             this.state.updateMetadata(conversationId, metadata);
         }
         catch (error) {
@@ -3821,7 +3947,7 @@ class AXConversationService {
             if (creatorId && !scopedParticipantIds.includes(creatorId)) {
                 scopedParticipantIds.unshift(creatorId);
             }
-            const conversation = await this.conversationApi.createConversation({
+            const createData = {
                 type,
                 participantIds: scopedParticipantIds,
                 creatorId,
@@ -3830,7 +3956,8 @@ class AXConversationService {
                 avatar: isPrivate ? undefined : AXConversationService.normalizeOptionalString(metadata?.['avatar']),
                 icon: isPrivate ? undefined : AXConversationService.normalizeOptionalString(metadata?.['icon']),
                 metadata: isPrivate ? undefined : metadata,
-            });
+            };
+            const conversation = await this.callApi('createConversation', 'conversationApi', 'createConversation', () => this.conversationApi.createConversation(createData), createData);
             this.state.setConversation(conversation);
             return resolveConversationForViewer(conversation, creatorId);
         }
@@ -3847,7 +3974,7 @@ class AXConversationService {
      */
     async getUsers(filters, pagination = { page: 0, pageSize: 50 }) {
         try {
-            return await this.userApi.getUsers(pagination, filters);
+            return await this.callApi('getUsers', 'userApi', 'getUsers', () => this.userApi.getUsers(pagination, filters), pagination, filters);
         }
         catch (error) {
             this.errorHandler.handle(error, 'getUsers', { filters, pagination });
@@ -3859,8 +3986,15 @@ class AXConversationService {
      * @param conversationId - Conversation ID
      */
     async markConversationAsRead(conversationId) {
+        this.discardReadQueue(conversationId);
+        const currentId = this._currentUser()?.id;
+        for (const message of this.state.getConversationMessages(conversationId)) {
+            if (message.status !== 'read' && message.senderId !== currentId) {
+                this.state.updateMessage(message.id, { status: 'read' });
+            }
+        }
         try {
-            await this.conversationApi.markConversationAsRead(conversationId);
+            await this.callApi('markConversationAsRead', 'conversationApi', 'markConversationAsRead', () => this.conversationApi.markConversationAsRead(conversationId), conversationId);
             this.state.resetUnreadCount(conversationId);
         }
         catch (error) {
@@ -3887,7 +4021,7 @@ class AXConversationService {
         }
         try {
             // Delete from server
-            const result = await this.conversationApi.deleteConversation(conversationId);
+            const result = await this.callApi('deleteConversation', 'conversationApi', 'deleteConversation', () => this.conversationApi.deleteConversation(conversationId), conversationId);
             if (!result)
                 return false;
             // Delete from store
@@ -3910,7 +4044,7 @@ class AXConversationService {
      */
     async getReplyCount(messageId) {
         try {
-            return await this.messageApi.getReplyCount(messageId);
+            return await this.callApi('getReplyCount', 'messageApi', 'getReplyCount', () => this.messageApi.getReplyCount(messageId), messageId);
         }
         catch (error) {
             this.errorHandler.handle(error, 'getReplyCount', { messageId });
@@ -3924,7 +4058,7 @@ class AXConversationService {
      */
     async getForwardCount(messageId) {
         try {
-            return await this.messageApi.getForwardCount(messageId);
+            return await this.callApi('getForwardCount', 'messageApi', 'getForwardCount', () => this.messageApi.getForwardCount(messageId), messageId);
         }
         catch (error) {
             this.errorHandler.handle(error, 'getForwardCount', { messageId });
@@ -3938,7 +4072,7 @@ class AXConversationService {
     async disconnect() {
         try {
             if (this.realtimeApi) {
-                await this.realtimeApi.disconnect();
+                await this.callApi('disconnect', 'realtimeApi', 'disconnect', () => this.realtimeApi.disconnect());
             }
         }
         catch (error) {
@@ -3955,7 +4089,7 @@ class AXConversationService {
      */
     async archiveConversation(conversationId) {
         try {
-            await this.conversationApi.archiveConversation(conversationId);
+            await this.callApi('archiveConversation', 'conversationApi', 'archiveConversation', () => this.conversationApi.archiveConversation(conversationId), conversationId);
             this.state.updateConversation(conversationId, { archived: true });
         }
         catch (error) {
@@ -3969,7 +4103,7 @@ class AXConversationService {
      */
     async unarchiveConversation(conversationId) {
         try {
-            await this.conversationApi.unarchiveConversation(conversationId);
+            await this.callApi('unarchiveConversation', 'conversationApi', 'unarchiveConversation', () => this.conversationApi.unarchiveConversation(conversationId), conversationId);
             this.state.updateConversation(conversationId, { archived: false });
         }
         catch (error) {
@@ -3983,7 +4117,7 @@ class AXConversationService {
      */
     async pinConversation(conversationId) {
         try {
-            await this.conversationApi.pinConversation(conversationId);
+            await this.callApi('pinConversation', 'conversationApi', 'pinConversation', () => this.conversationApi.pinConversation(conversationId), conversationId);
             this.state.updateConversation(conversationId, { pinned: true });
         }
         catch (error) {
@@ -3997,7 +4131,7 @@ class AXConversationService {
      */
     async unpinConversation(conversationId) {
         try {
-            await this.conversationApi.unpinConversation(conversationId);
+            await this.callApi('unpinConversation', 'conversationApi', 'unpinConversation', () => this.conversationApi.unpinConversation(conversationId), conversationId);
             this.state.updateConversation(conversationId, { pinned: false });
         }
         catch (error) {
@@ -4012,7 +4146,7 @@ class AXConversationService {
      */
     async muteConversation(conversationId, duration) {
         try {
-            await this.conversationApi.muteConversation(conversationId, duration);
+            await this.callApi('muteConversation', 'conversationApi', 'muteConversation', () => this.conversationApi.muteConversation(conversationId, duration), conversationId, duration);
             const mutedUntil = duration ? new Date(Date.now() + duration) : undefined;
             this.state.updateSettings(conversationId, { mutedUntil, notifications: false });
         }
@@ -4027,7 +4161,7 @@ class AXConversationService {
      */
     async unmuteConversation(conversationId) {
         try {
-            await this.conversationApi.unmuteConversation(conversationId);
+            await this.callApi('unmuteConversation', 'conversationApi', 'unmuteConversation', () => this.conversationApi.unmuteConversation(conversationId), conversationId);
             this.state.updateSettings(conversationId, { mutedUntil: undefined, notifications: true });
         }
         catch (error) {
@@ -4042,7 +4176,7 @@ class AXConversationService {
      */
     async addParticipants(conversationId, userIds) {
         try {
-            const updatedConversation = await this.conversationApi.addParticipants(conversationId, userIds);
+            const updatedConversation = await this.callApi('addParticipants', 'conversationApi', 'addParticipants', () => this.conversationApi.addParticipants(conversationId, userIds), conversationId, userIds);
             this.state.setConversation(updatedConversation);
         }
         catch (error) {
@@ -4057,7 +4191,7 @@ class AXConversationService {
      */
     async removeParticipant(conversationId, userId) {
         try {
-            const updatedConversation = await this.conversationApi.removeParticipant(conversationId, userId);
+            const updatedConversation = await this.callApi('removeParticipant', 'conversationApi', 'removeParticipant', () => this.conversationApi.removeParticipant(conversationId, userId), conversationId, userId);
             this.state.setConversation(updatedConversation);
         }
         catch (error) {
@@ -4071,7 +4205,7 @@ class AXConversationService {
      */
     async leaveConversation(conversationId) {
         try {
-            await this.conversationApi.leaveConversation(conversationId);
+            await this.callApi('leaveConversation', 'conversationApi', 'leaveConversation', () => this.conversationApi.leaveConversation(conversationId), conversationId);
             this.state.deleteConversation(conversationId);
             if (this._activeConversationId() === conversationId) {
                 this._activeConversationId.set(null);
@@ -4089,7 +4223,7 @@ class AXConversationService {
      */
     async saveDraft(conversationId, draft) {
         try {
-            await this.conversationApi.saveDraft(conversationId, draft);
+            await this.callApi('saveDraft', 'conversationApi', 'saveDraft', () => this.conversationApi.saveDraft(conversationId, draft), conversationId, draft);
             this.state.updateConversation(conversationId, { draft });
         }
         catch (error) {
@@ -4103,7 +4237,7 @@ class AXConversationService {
      */
     async clearDraft(conversationId) {
         try {
-            await this.conversationApi.clearDraft(conversationId);
+            await this.callApi('clearDraft', 'conversationApi', 'clearDraft', () => this.conversationApi.clearDraft(conversationId), conversationId);
             this.state.updateConversation(conversationId, { draft: undefined });
         }
         catch (error) {
@@ -4121,7 +4255,7 @@ class AXConversationService {
      */
     async pinMessage(conversationId, messageId) {
         try {
-            await this.messageApi.pinMessage(conversationId, messageId);
+            await this.callApi('pinMessage', 'messageApi', 'pinMessage', () => this.messageApi.pinMessage(conversationId, messageId), conversationId, messageId);
             this.state.updateMessage(messageId, { pinned: true });
         }
         catch (error) {
@@ -4136,7 +4270,7 @@ class AXConversationService {
      */
     async unpinMessage(conversationId, messageId) {
         try {
-            await this.messageApi.unpinMessage(conversationId, messageId);
+            await this.callApi('unpinMessage', 'messageApi', 'unpinMessage', () => this.messageApi.unpinMessage(conversationId, messageId), conversationId, messageId);
             this.state.updateMessage(messageId, { pinned: false });
         }
         catch (error) {
@@ -4152,13 +4286,13 @@ class AXConversationService {
      */
     async forwardMessage(messageId, conversationIds, caption) {
         try {
-            await this.messageApi.forwardMessage({
+            const forwardCommand = {
                 messageId,
                 conversationIds,
                 caption,
-            });
-            // Emit forward count update
-            this._messageCountRefresh$.next({ messageId, type: 'forward' });
+            };
+            await this.callApi('forwardMessage', 'messageApi', 'forwardMessage', () => this.messageApi.forwardMessage(forwardCommand), forwardCommand);
+            this.bumpMessageCount(messageId, 'forwardCount', conversationIds.length);
         }
         catch (error) {
             this.errorHandler.handle(error, 'forwardMessage', { messageId, conversationIds });
@@ -4173,7 +4307,9 @@ class AXConversationService {
      */
     async searchMessages(conversationId, query) {
         try {
-            const result = await this.messageApi.searchMessages(conversationId, { query }, { page: 0, pageSize: 50 });
+            const searchFilters = { query };
+            const pagination = { page: 0, pageSize: 50 };
+            const result = await this.callApi('searchMessages', 'messageApi', 'searchMessages', () => this.messageApi.searchMessages(conversationId, searchFilters, pagination), conversationId, searchFilters, pagination);
             return result.items;
         }
         catch (error) {
@@ -4188,7 +4324,8 @@ class AXConversationService {
      */
     async getMessageReplies(messageId) {
         try {
-            const result = await this.messageApi.getMessageReplies(messageId, { page: 0, pageSize: 50 });
+            const pagination = { page: 0, pageSize: 50 };
+            const result = await this.callApi('getMessageReplies', 'messageApi', 'getMessageReplies', () => this.messageApi.getMessageReplies(messageId, pagination), messageId, pagination);
             return result.items;
         }
         catch (error) {
@@ -4204,7 +4341,7 @@ class AXConversationService {
      */
     async exportMessages(conversationId, format) {
         try {
-            return await this.messageApi.exportMessages(conversationId, format);
+            return await this.callApi('exportMessages', 'messageApi', 'exportMessages', () => this.messageApi.exportMessages(conversationId, format), conversationId, format);
         }
         catch (error) {
             this.errorHandler.handle(error, 'exportMessages', { conversationId, format });
@@ -4220,7 +4357,7 @@ class AXConversationService {
      */
     async getUserSettings() {
         try {
-            return await this.userApi.getUserSettings();
+            return await this.callApi('getUserSettings', 'userApi', 'getUserSettings', () => this.userApi.getUserSettings());
         }
         catch (error) {
             this.errorHandler.handle(error, 'getUserSettings');
@@ -4233,7 +4370,7 @@ class AXConversationService {
      */
     async updateUserSettings(settings) {
         try {
-            await this.userApi.updateUserSettings(settings);
+            await this.callApi('updateUserSettings', 'userApi', 'updateUserSettings', () => this.userApi.updateUserSettings(settings), settings);
         }
         catch (error) {
             this.errorHandler.handle(error, 'updateUserSettings', { settings });
@@ -4247,7 +4384,7 @@ class AXConversationService {
      */
     async blockUser(userId, reason) {
         try {
-            await this.userApi.blockUser(userId, reason);
+            await this.callApi('blockUser', 'userApi', 'blockUser', () => this.userApi.blockUser(userId, reason), userId, reason);
         }
         catch (error) {
             this.errorHandler.handle(error, 'blockUser', { userId });
@@ -4260,7 +4397,7 @@ class AXConversationService {
      */
     async unblockUser(userId) {
         try {
-            await this.userApi.unblockUser(userId);
+            await this.callApi('unblockUser', 'userApi', 'unblockUser', () => this.userApi.unblockUser(userId), userId);
         }
         catch (error) {
             this.errorHandler.handle(error, 'unblockUser', { userId });
@@ -4273,7 +4410,7 @@ class AXConversationService {
      */
     async getBlockedUsers() {
         try {
-            return await this.userApi.getBlockedUsers();
+            return await this.callApi('getBlockedUsers', 'userApi', 'getBlockedUsers', () => this.userApi.getBlockedUsers());
         }
         catch (error) {
             this.errorHandler.handle(error, 'getBlockedUsers');
@@ -4287,7 +4424,7 @@ class AXConversationService {
      */
     async updatePresence(status, statusText) {
         try {
-            await this.userApi.updatePresence(status, statusText);
+            await this.callApi('updatePresence', 'userApi', 'updatePresence', () => this.userApi.updatePresence(status, statusText), status, statusText);
         }
         catch (error) {
             this.errorHandler.handle(error, 'updatePresence', { status });
@@ -4646,7 +4783,6 @@ async function openWithFileType(message, registry, ctx) {
 class AXConversationMessageListService {
     constructor() {
         this.conversationService = inject(AXConversationService);
-        this.config = inject(AX_CONVERSATION_CONFIG);
         this.activeConversation = this.conversationService.activeConversation;
         this.activeMessages = this.conversationService.activeMessages;
         this.currentUser = this.conversationService.currentUser;
@@ -4666,6 +4802,16 @@ class AXConversationMessageListService {
         ...(ngDevMode ? [{ debugName: "scrollRequests" }] : /* istanbul ignore next */ []));
         /** Live renderer instances keyed by message id (for message actions). */
         this._rendererInstances = new Map();
+        /**
+         * Reply counts merged from API fields and loaded messages.
+         */
+        this.replyCounts = computed(() => this.buildCountMap('reply'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "replyCounts" }] : /* istanbul ignore next */ []));
+        /**
+         * Forward counts merged from API fields and loaded messages.
+         */
+        this.forwardCounts = computed(() => this.buildCountMap('forward'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "forwardCounts" }] : /* istanbul ignore next */ []));
         /** Message grouped by date */
         this.messageGroups = computed(() => {
             const messages = this.activeMessages();
@@ -4701,6 +4847,12 @@ class AXConversationMessageListService {
     getRendererInstance(messageId) {
         return this._rendererInstances.get(messageId);
     }
+    getReplyCount(messageId) {
+        return this.replyCounts().get(messageId) ?? 0;
+    }
+    getForwardCount(messageId) {
+        return this.forwardCounts().get(messageId) ?? 0;
+    }
     /**
      * Load older messages when the user scrolls near the top.
      */
@@ -4754,6 +4906,27 @@ class AXConversationMessageListService {
     requestScrollToBottom() {
         this.scrollRequests.update((n) => n + 1);
     }
+    buildCountMap(kind) {
+        const messages = this.activeMessages();
+        const counts = new Map();
+        for (const message of messages) {
+            const fromApi = kind === 'reply' ? message.replyCount : message.forwardCount;
+            if (fromApi != null) {
+                counts.set(message.id, fromApi);
+            }
+        }
+        for (const message of messages) {
+            if (kind === 'reply' && message.replyTo?.id) {
+                const targetId = message.replyTo.id;
+                counts.set(targetId, (counts.get(targetId) ?? 0) + 1);
+            }
+            if (kind === 'forward' && message.forwardedFrom?.messageId) {
+                const targetId = message.forwardedFrom.messageId;
+                counts.set(targetId, (counts.get(targetId) ?? 0) + 1);
+            }
+        }
+        return counts;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListService }); }
 }
@@ -5577,6 +5750,7 @@ class AXConversationContainerComponent {
             return classes.join(' ');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+        void this.conversationService.ensureInitialized();
     }
     get registry() {
         return this.conversationService.registry;
@@ -5613,7 +5787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.conversation-container-host]': 'true',
                         '[tabindex]': '"-1"',
                     }, template: "    <div\n      [class]=\"containerClasses()\"\n      role=\"main\"\n      [attr.aria-label]=\"'@acorex:chat.aria.conversation-interface' | translate | async\"\n    >\n      <!-- Sidebar -->\n      <div\n        class=\"conversation-sidebar-container\"\n        [axResizable]=\"true\"\n        [minWidth]=\"config.minSidebarWidth ?? 250\"\n        [maxWidth]=\"config.maxSidebarWidth ?? 500\"\n        [width]=\"config.defaultSidebarWidth ?? 300\"\n        role=\"navigation\"\n        [attr.aria-label]=\"'@acorex:chat.aria.conversation-list' | translate | async\"\n      >\n        <ng-content select=\"ax-conversation-sidebar, [ax-conversation-sidebar]\"></ng-content>\n      </div>\n\n      <!-- Main conversation view -->\n      <div\n        class=\"conversation-main-container\"\n        role=\"region\"\n        [attr.aria-label]=\"\n          activeConversation()\n            ? ('@acorex:chat.aria.active-conversation' | translate | async)\n            : ('@acorex:chat.status.no-conversation-selected' | translate | async)\n        \"\n      >\n        @if (activeConversation(); as conversation) {\n          <div class=\"conversation-view\">\n            <!-- Info Bar -->\n            <ng-content select=\"ax-conversation-info-bar, [ax-conversation-info-bar]\"></ng-content>\n\n            <!-- Messages -->\n            <div class=\"conversation-messages\">\n              <ng-content select=\"ax-conversation-message-list, [ax-conversation-message-list]\"></ng-content>\n            </div>\n\n            <!-- Composer -->\n            <ng-content select=\"ax-conversation-composer, [ax-conversation-composer]\"></ng-content>\n          </div>\n        } @else {\n          <div class=\"conversation-empty-state\">\n            <div class=\"empty-state-content\">\n              <ng-content select=\"ax-conversation-empty\">\n                <svg class=\"empty-state-icon\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\" fill=\"none\">\n                  <circle class=\"text-light\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" />\n                  <path\n                    class=\"text-on-surface/55\"\n                    d=\"M40 50h40M40 70h30\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"3\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n                <h3 class=\"empty-state-title\">\n                  {{ '@acorex:chat.empty.no-conversation-selected-title' | translate | async }}\n                </h3>\n                <p class=\"empty-state-description\">\n                  {{ '@acorex:chat.empty.select-conversation-description' | translate | async }}\n                </p>\n              </ng-content>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-container{display:block;height:100%;width:100%;--tw-outline-style: none;outline-style:none}ax-conversation-container .conversation-container{display:flex;height:100%;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-container .conversation-container-loading{display:flex;align-items:center;justify-content:center}ax-conversation-container .conversation-sidebar-container{display:none;height:100%;width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-container .conversation-sidebar-container:has(*){display:block;width:var(--ax-conversation-sidebar-width, 320px)}ax-conversation-container .conversation-main-container{display:flex;height:100%;flex:1;flex-direction:column;overflow:hidden;container-type:inline-size;container-name:conversation}ax-conversation-container .conversation-view{display:flex;height:100%;width:100%;flex-direction:column}ax-conversation-container .conversation-messages{flex:1;overflow:hidden}ax-conversation-container .conversation-empty-state{display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-container .empty-state-content{max-width:var(--container-md, 28rem);padding:calc(var(--spacing, .25rem) * 8);text-align:center}ax-conversation-container .empty-state-icon{margin-inline:auto;margin-bottom:calc(var(--spacing, .25rem) * 6);opacity:80%}ax-conversation-container .empty-state-title{margin:calc(var(--spacing, .25rem) * 0);margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-container .empty-state-description{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));opacity:70%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], onDocumentPaste: [{
+        }], ctorParameters: () => [], propDecorators: { customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], onDocumentPaste: [{
                 type: HostListener,
                 args: ['document:paste', ['$event']]
             }] } });
@@ -5638,6 +5812,7 @@ class AXConversationContainerDirective {
         this.loading = this.conversationService.loading;
         /** Error state */
         this.error = this.conversationService.error;
+        void this.conversationService.ensureInitialized();
     }
     get registry() {
         return this.conversationService.registry;
@@ -5674,7 +5849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[style.outline]': '"none"',
                     },
                 }]
-        }], propDecorators: { onDocumentPaste: [{
+        }], ctorParameters: () => [], propDecorators: { onDocumentPaste: [{
                 type: HostListener,
                 args: ['document:paste', ['$event']]
             }] } });
@@ -6684,11 +6859,6 @@ class AXConversationMessageListComponent {
         this.noActiveFallbackComponent = AXConversationMessageListNoActiveDefaultComponent;
         // Timeout cleanup to prevent memory leaks
         this.timeouts = new Set();
-        // Store reply and forward counts from API
-        this.replyCounts = signal(new Map(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "replyCounts" }] : /* istanbul ignore next */ []));
-        this.forwardCounts = signal(new Map(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "forwardCounts" }] : /* istanbul ignore next */ []));
         // Reaction picker state
         this.reactionPickerTarget = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "reactionPickerTarget" }] : /* istanbul ignore next */ []));
@@ -6706,9 +6876,10 @@ class AXConversationMessageListComponent {
         ...(ngDevMode ? [{ debugName: "messageListDragging" }] : /* istanbul ignore next */ []));
         /** While true, older history is being prepended — do not auto-scroll to the latest message. */
         this.restoringScrollAfterPrepend = false;
-        // Available reaction emojis from API
+        // Available reaction emojis from API (loaded lazily when picker opens)
         this.availableReactions = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "availableReactions" }] : /* istanbul ignore next */ []));
+        this.reactionsLoading = false;
         /** Message list element reference */
         this.messageListRef = viewChild('messageList', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "messageListRef" }] : /* istanbul ignore next */ []));
@@ -6733,6 +6904,7 @@ class AXConversationMessageListComponent {
         this.currentUser = this.conversationService.currentUser;
         /** Message grouped by date - use service */
         this.messageGroups = this.messageListService.messageGroups;
+        this.observedReadMessageIds = new Set();
         /** Get first unread message ID */
         this.firstUnreadMessageId = computed(() => {
             const messages = this.messages();
@@ -6744,8 +6916,7 @@ class AXConversationMessageListComponent {
             return firstUnread?.id ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstUnreadMessageId" }] : /* istanbul ignore next */ []));
-        // Load available reactions from API
-        this.loadAvailableReactions();
+        void this.conversationService.ensureInitialized();
         // Close reaction picker when clicking outside
         if (typeof document !== 'undefined') {
             document.addEventListener('click', (e) => {
@@ -6769,6 +6940,7 @@ class AXConversationMessageListComponent {
             untracked(() => {
                 if (currentConversationId !== previousConversationId) {
                     this.contextMenuMessageId.set(null);
+                    this.observedReadMessageIds.clear();
                     this.composerService.onConversationChanged(previousConversationId, currentConversationId);
                     this.infoBarService.onConversationChanged();
                 }
@@ -6784,10 +6956,6 @@ class AXConversationMessageListComponent {
                 previousConversationId = currentConversationId;
             });
         });
-        // Subscribe to global message count refresh events (works across all conversations)
-        this.conversationService.onMessageCountRefresh.pipe(takeUntilDestroyed()).subscribe(({ messageId, type }) => {
-            this.refreshCount(messageId, type);
-        });
         // Auto-scroll only when new messages are appended at the bottom (not when loading older history above).
         let previousMessageCount = 0;
         let previousLastMessageId = null;
@@ -6882,16 +7050,21 @@ class AXConversationMessageListComponent {
             const currentUser = this.currentUser();
             if (!this.intersectionObserver || !currentUser)
                 return;
-            // Find unread messages not sent by current user
+            const container = this.messagesContainerRef()?.nativeElement;
+            if (!container)
+                return;
             const unreadMessages = messages.filter((m) => m.status !== 'read' && m.senderId !== currentUser.id);
-            // Observe each unread message
             setTimeout(() => {
-                unreadMessages.forEach((msg) => {
-                    const element = document.querySelector(`[data-message-id="${msg.id}"]`);
+                for (const msg of unreadMessages) {
+                    if (this.observedReadMessageIds.has(msg.id)) {
+                        continue;
+                    }
+                    const element = container.querySelector(`[data-message-id="${msg.id}"]`);
                     if (element && this.intersectionObserver) {
                         this.intersectionObserver.observe(element);
+                        this.observedReadMessageIds.add(msg.id);
                     }
-                });
+                }
             }, 100);
         });
     }
@@ -6902,10 +7075,17 @@ class AXConversationMessageListComponent {
         const message = this.messages().find((m) => m.id === messageId);
         if (!message || message.status === 'read')
             return;
-        // Update message status
-        this.conversationService.markMessageAsRead(messageId);
-        // Unobserve the message
-        const element = document.querySelector(`[data-message-id="${messageId}"]`);
+        if (this.config.markConversationReadOnSelect) {
+            const conversation = this.activeConversation();
+            if (conversation && conversation.unreadCount > 0) {
+                return;
+            }
+        }
+        // Update message status (batched API sync via conversation service)
+        this.conversationService.queueMessageAsRead(messageId);
+        this.observedReadMessageIds.delete(messageId);
+        const container = this.messagesContainerRef()?.nativeElement;
+        const element = container?.querySelector(`[data-message-id="${messageId}"]`);
         if (element && this.intersectionObserver) {
             this.intersectionObserver.unobserve(element);
         }
@@ -7083,6 +7263,7 @@ class AXConversationMessageListComponent {
             this.closeReactionPicker();
             return;
         }
+        void this.ensureAvailableReactions();
         const isRtl = isRtlDocument(this.document);
         this.reactionPickerPlacement.set(resolveReactionPickerPlacement(this.isOwnMessage(message), isRtl));
         this.reactionPickerElement.set(button);
@@ -7123,16 +7304,22 @@ class AXConversationMessageListComponent {
         const messages = this.messages();
         return messages.find((m) => m.id === messageId);
     }
-    /** Load available reactions from API */
-    async loadAvailableReactions() {
+    /** Load available reactions when the picker is opened (session-cached in service). */
+    async ensureAvailableReactions() {
+        if (this.availableReactions().length > 0 || this.reactionsLoading) {
+            return;
+        }
+        this.reactionsLoading = true;
         try {
-            // Fetch reactions from conversation service
             const reactions = await this.conversationService.getAvailableReactions();
             this.availableReactions.set(reactions);
         }
         catch (error) {
             console.error('Failed to load available reactions:', error);
         }
+        finally {
+            this.reactionsLoading = false;
+        }
     }
     /** Get message actions from registry */
     getMessageActions(message) {
@@ -7305,55 +7492,11 @@ class AXConversationMessageListComponent {
             params: { date: dateLabel },
         });
     }
-    /** Get reply count for a message (fetches from API across all conversations) */
     getReplyCount(message) {
-        const counts = this.replyCounts();
-        if (!counts.has(message.id)) {
-            // Fetch from API asynchronously
-            this.conversationService.getReplyCount(message.id).then((count) => {
-                const newCounts = new Map(this.replyCounts());
-                newCounts.set(message.id, count);
-                this.replyCounts.set(newCounts);
-            });
-            return 0; // Return 0 while loading
-        }
-        return counts.get(message.id) || 0;
+        return this.messageListService.getReplyCount(message.id);
     }
-    /** Get forward count for a message (fetches from API across all conversations) */
     getForwardCount(message) {
-        const counts = this.forwardCounts();
-        if (!counts.has(message.id)) {
-            // Fetch from API asynchronously
-            this.conversationService.getForwardCount(message.id).then((count) => {
-                const newCounts = new Map(this.forwardCounts());
-                newCounts.set(message.id, count);
-                this.forwardCounts.set(newCounts);
-            });
-            return 0; // Return 0 while loading
-        }
-        return counts.get(message.id) || 0;
-    }
-    /**
-     * Refresh count for a specific message from API
-     * This is called when a new reply or forward is detected globally
-     */
-    refreshCount(messageId, type) {
-        if (type === 'reply') {
-            // Fetch updated reply count from API
-            this.conversationService.getReplyCount(messageId).then((count) => {
-                const newCounts = new Map(this.replyCounts());
-                newCounts.set(messageId, count);
-                this.replyCounts.set(newCounts);
-            });
-        }
-        else {
-            // Fetch updated forward count from API
-            this.conversationService.getForwardCount(messageId).then((count) => {
-                const newCounts = new Map(this.forwardCounts());
-                newCounts.set(messageId, count);
-                this.forwardCounts.set(newCounts);
-            });
-        }
+        return this.messageListService.getForwardCount(message.id);
     }
     onMessageListDragEnter() {
         this.messageListDragging.set(true);
@@ -7424,14 +7567,14 @@ class AXConversationMessageListComponent {
         return message.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", 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(); as conv) {\n      @for (cid of [conv.id]; track cid) {\n        <div\n          class=\"message-list message-list--conversation-surface\"\n          [class.message-list--drag]=\"messageListDragging()\"\n          #messageList\n          role=\"log\"\n          [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n          aria-live=\"polite\"\n          [style.background]=\"messageListBackgroundStyle()\"\n          axUploaderZone\n          [disableBrowse]=\"true\"\n          (dragEnter)=\"onMessageListDragEnter()\"\n          (dragLeave)=\"onMessageListDragLeave()\"\n          (fileChange)=\"onMessageListFilesDropped($event)\"\n        >\n          @if (loading()) {\n            <div\n              class=\"list-loading\"\n              role=\"status\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n            >\n              <ax-loading></ax-loading>\n              <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\n            </div>\n          } @else if (messages().length === 0) {\n            <div\n              class=\"list-empty\"\n              role=\"status\"\n              [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\"\n            >\n              <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n                <ng-container\n                  *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n                ></ng-container>\n              </ng-content>\n            </div>\n          } @else {\n            <div\n              class=\"messages-container\"\n              (scroll)=\"onScroll($event)\"\n              axInfiniteScroll\n              [threshold]=\"config.infiniteScrollThreshold\"\n              [edge]=\"'top'\"\n              [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n              (scrollThreshold)=\"onScrollThreshold($event)\"\n              #messagesContainer\n              role=\"feed\"\n              [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n            >\n              @if (loadingMore()) {\n                <div\n                  class=\"list-loading-more list-loading-more--prepend\"\n                  role=\"status\"\n                  animate.enter=\"load-more-enter\"\n                  animate.leave=\"load-more-leave\"\n                  [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n                >\n                  <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                    <span class=\"load-more-dot\"></span>\n                    <span class=\"load-more-dot\"></span>\n                    <span class=\"load-more-dot\"></span>\n                  </div>\n                  <ax-label class=\"load-more-label\">{{\n                    '@acorex:chat.status.loading-older-messages' | translate | async\n                  }}</ax-label>\n                </div>\n              }\n              @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n                <!-- Date Separator -->\n                <div\n                  class=\"date-separator\"\n                  role=\"separator\"\n                  [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\"\n                >\n                  <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n                </div>\n\n                <!-- Messages in this date group -->\n                @for (message of group.messages; track trackMessage($index, message)) {\n                  <div\n                    [class]=\"getMessageClasses(message)\"\n                    role=\"article\"\n                    [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                    [id]=\"'message-' + message.id\"\n                  >\n                    <!-- Avatar (only for group conversations and received messages) -->\n                    @if (shouldShowAvatar(message)) {\n                      <div class=\"message-avatar\">\n                        <ax-conversation-avatar\n                          kind=\"user\"\n                          [userId]=\"message.senderId\"\n                          [conversation]=\"activeConversation()\"\n                          [message]=\"message\"\n                          [size]=\"32\"\n                        />\n                      </div>\n                    }\n\n                    <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                      <button\n                        type=\"button\"\n                        class=\"add-reaction-button add-reaction-outside\"\n                        [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                        (click)=\"toggleReactionPicker(message, $event)\"\n                        [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                        #reactionButton\n                      >\n                        <i class=\"fa-light fa-face-smile\"></i>\n                      </button>\n\n                      <div\n                        class=\"message-bubble-container\"\n                        [id]=\"'message-bubble-' + message.id\"\n                        [attr.data-message-id]=\"message.id\"\n                      >\n                        <div\n                          [class]=\"getBubbleClasses(message)\"\n                          [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                          [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                        >\n                          <!-- Sender name (only for group conversations and received messages) -->\n                          @if (shouldShowSenderName(message)) {\n                            <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                          }\n\n                          <!-- Reply Preview -->\n                          @if (message.replyTo) {\n                            <div\n                              class=\"reply-preview\"\n                              (click)=\"scrollToMessage(message.replyTo.id)\"\n                              role=\"button\"\n                              [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                              (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                              (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                            >\n                              <div class=\"reply-preview-content\">\n                                <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                                <div class=\"reply-preview-text\">\n                                  @if (getMessagePreviewText(message.replyTo); as preview) {\n                                    <span class=\"last-message\">\n                                      @if (preview.type !== 'text') {\n                                        <i [class]=\"preview.icon\"></i\n                                        >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                      } @else {\n                                        {{ preview.value }}\n                                      }\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Forwarded Indicator -->\n                          @if (message.forwarded) {\n                            <div class=\"forwarded-preview\">\n                              <i class=\"fa-solid fa-share\"></i>\n                              <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                            </div>\n                          }\n\n                          <ax-conversation-registry-component-outlet\n                            [component]=\"getRendererComponent(message)\"\n                            [componentLoader]=\"getRendererComponentLoader(message)\"\n                            [inputs]=\"getRendererInputs(message)\"\n                          />\n\n                          @if (message.reactions.length > 0) {\n                            <div class=\"message-reactions-container\">\n                              <div class=\"message-reactions-bubbles\">\n                                @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"reaction-bubble\"\n                                    [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                    (click)=\"onReactionClick(message, reaction.emoji)\"\n                                    [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                                  >\n                                    <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                    @if (reaction.count > 1) {\n                                      <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                    }\n                                  </button>\n                                }\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Message Footer -->\n                          <div class=\"message-footer\">\n                            @if (getReplyCount(message) > 0) {\n                              <span\n                                class=\"message-footer-count\"\n                                [attr.aria-label]=\"getReplyCount(message) + ' replies'\"\n                              >\n                                <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                                <span class=\"message-footer-count-value\">{{ getReplyCount(message) }}</span>\n                              </span>\n                            }\n                            @if (getForwardCount(message) > 0) {\n                              <span\n                                class=\"message-footer-count\"\n                                [attr.aria-label]=\"getForwardCount(message) + ' forwards'\"\n                              >\n                                <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                                <span class=\"message-footer-count-value\">{{ getForwardCount(message) }}</span>\n                              </span>\n                            }\n                            @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {\n                              <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                            }\n                            <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                            @if (message.editedAt) {\n                              <span class=\"edited-indicator\">\n                                <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                              </span>\n                            }\n                            @if (isOwnMessage(message)) {\n                              <span [class]=\"getStatusIconClasses(message)\">\n                                <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Context Menu for Message Actions -->\n                    <ax-context-menu\n                      [target]=\"'#message-bubble-' + message.id\"\n                      [openOn]=\"'click'\"\n                      [closeOn]=\"'click'\"\n                      (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                      (onClose)=\"contextMenuMessageId.set(null)\"\n                      (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                    >\n                    </ax-context-menu>\n                  </div>\n                }\n              }\n            </div>\n\n            <!-- Scroll to Bottom Button -->\n            @if (showScrollButton()) {\n              <ax-button\n                class=\"scroll-to-bottom\"\n                (onClick)=\"scrollToBottom()\"\n                animate.enter=\"slide-in\"\n                animate.leave=\"slide-out\"\n                [text]=\"'\u2193'\"\n                [look]=\"'solid'\"\n                [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n              ></ax-button>\n            }\n          }\n        </div>\n      }\n\n      <!-- Reaction Picker Popover -->\n      @if (reactionPickerTarget()) {\n        <ax-popover\n          #reactionPopover\n          [target]=\"reactionPickerElement()\"\n          [openOn]=\"'manual'\"\n          [closeOn]=\"'clickOut'\"\n          [placement]=\"reactionPickerPlacement()\"\n          (onClose)=\"closeReactionPicker()\"\n        >\n          <div class=\"reaction-picker-popup\">\n            <div class=\"reaction-picker-header\">\n              <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n              <button\n                type=\"button\"\n                class=\"picker-close\"\n                (click)=\"closeReactionPicker()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n            <div\n              class=\"reaction-picker-emojis\"\n              role=\"listbox\"\n              [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n            >\n              @for (emoji of availableReactions(); track emoji) {\n                <button\n                  type=\"button\"\n                  class=\"reaction-picker-emoji\"\n                  [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n                  (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n                  [attr.aria-label]=\"emoji\"\n                >\n                  {{ emoji }}\n                </button>\n              }\n            </div>\n          </div>\n        </ax-popover>\n      }\n    } @else {\n      <div\n        class=\"message-list message-list--no-active\"\n        role=\"region\"\n        [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n      >\n        <div class=\"list-no-active\">\n          <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n            <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n          </ng-content>\n        </div>\n      </div>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);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}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-button.scroll-to-bottom:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list ax-button.scroll-to-bottom{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999;display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-primary-surface));font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgba(var(--ax-sys-color-on-primary-surface));transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .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)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { 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: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationMessageListComponent, isStandalone: true, selector: "ax-conversation-message-list", 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(); as conv) {\n  @for (cid of [conv.id]; track cid) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar (only for group conversations and received messages) -->\n                @if (shouldShowAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  <button\n                    type=\"button\"\n                    class=\"add-reaction-button add-reaction-outside\"\n                    [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                    (click)=\"toggleReactionPicker(message, $event)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                    #reactionButton\n                  >\n                    <i class=\"fa-light fa-face-smile\"></i>\n                  </button>\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div class=\"reaction-picker-header\">\n          <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n          <button\n            type=\"button\"\n            class=\"picker-close\"\n            (click)=\"closeReactionPicker()\"\n            [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n          >\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        </div>\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);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}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXFabComponent, selector: "ax-fab", inputs: ["label", "popupStyle", "popupPlacement", "size"], outputs: ["popupPlacementChange", "onClick", "onOpened", "onClosed"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "directive", type: AXUploaderZoneDirective, selector: "[axUploaderZone]", inputs: ["multiple", "accept", "fileType", "overlayTemplate", "disableBrowse", "disableDragDrop"], outputs: ["fileChange", "onChanged", "dragEnter", "dragLeave", "dragOver", "onFileUploadComplete", "onFilesUploadComplete"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationMessageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-conversation-message-list', encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         AXBadgeComponent,
-                        AXButtonComponent,
+                        AXFabComponent,
                         AXContextMenuComponent,
                         AXDecoratorModule,
                         AXLabelComponent,
@@ -7444,7 +7587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXUploaderZoneDirective,
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
-                    ], template: "    @if (activeConversation(); as conv) {\n      @for (cid of [conv.id]; track cid) {\n        <div\n          class=\"message-list message-list--conversation-surface\"\n          [class.message-list--drag]=\"messageListDragging()\"\n          #messageList\n          role=\"log\"\n          [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n          aria-live=\"polite\"\n          [style.background]=\"messageListBackgroundStyle()\"\n          axUploaderZone\n          [disableBrowse]=\"true\"\n          (dragEnter)=\"onMessageListDragEnter()\"\n          (dragLeave)=\"onMessageListDragLeave()\"\n          (fileChange)=\"onMessageListFilesDropped($event)\"\n        >\n          @if (loading()) {\n            <div\n              class=\"list-loading\"\n              role=\"status\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n            >\n              <ax-loading></ax-loading>\n              <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\n            </div>\n          } @else if (messages().length === 0) {\n            <div\n              class=\"list-empty\"\n              role=\"status\"\n              [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\"\n            >\n              <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n                <ng-container\n                  *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n                ></ng-container>\n              </ng-content>\n            </div>\n          } @else {\n            <div\n              class=\"messages-container\"\n              (scroll)=\"onScroll($event)\"\n              axInfiniteScroll\n              [threshold]=\"config.infiniteScrollThreshold\"\n              [edge]=\"'top'\"\n              [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n              (scrollThreshold)=\"onScrollThreshold($event)\"\n              #messagesContainer\n              role=\"feed\"\n              [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n            >\n              @if (loadingMore()) {\n                <div\n                  class=\"list-loading-more list-loading-more--prepend\"\n                  role=\"status\"\n                  animate.enter=\"load-more-enter\"\n                  animate.leave=\"load-more-leave\"\n                  [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n                >\n                  <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                    <span class=\"load-more-dot\"></span>\n                    <span class=\"load-more-dot\"></span>\n                    <span class=\"load-more-dot\"></span>\n                  </div>\n                  <ax-label class=\"load-more-label\">{{\n                    '@acorex:chat.status.loading-older-messages' | translate | async\n                  }}</ax-label>\n                </div>\n              }\n              @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n                <!-- Date Separator -->\n                <div\n                  class=\"date-separator\"\n                  role=\"separator\"\n                  [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\"\n                >\n                  <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n                </div>\n\n                <!-- Messages in this date group -->\n                @for (message of group.messages; track trackMessage($index, message)) {\n                  <div\n                    [class]=\"getMessageClasses(message)\"\n                    role=\"article\"\n                    [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                    [id]=\"'message-' + message.id\"\n                  >\n                    <!-- Avatar (only for group conversations and received messages) -->\n                    @if (shouldShowAvatar(message)) {\n                      <div class=\"message-avatar\">\n                        <ax-conversation-avatar\n                          kind=\"user\"\n                          [userId]=\"message.senderId\"\n                          [conversation]=\"activeConversation()\"\n                          [message]=\"message\"\n                          [size]=\"32\"\n                        />\n                      </div>\n                    }\n\n                    <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                      <button\n                        type=\"button\"\n                        class=\"add-reaction-button add-reaction-outside\"\n                        [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                        (click)=\"toggleReactionPicker(message, $event)\"\n                        [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                        #reactionButton\n                      >\n                        <i class=\"fa-light fa-face-smile\"></i>\n                      </button>\n\n                      <div\n                        class=\"message-bubble-container\"\n                        [id]=\"'message-bubble-' + message.id\"\n                        [attr.data-message-id]=\"message.id\"\n                      >\n                        <div\n                          [class]=\"getBubbleClasses(message)\"\n                          [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                          [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                        >\n                          <!-- Sender name (only for group conversations and received messages) -->\n                          @if (shouldShowSenderName(message)) {\n                            <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                          }\n\n                          <!-- Reply Preview -->\n                          @if (message.replyTo) {\n                            <div\n                              class=\"reply-preview\"\n                              (click)=\"scrollToMessage(message.replyTo.id)\"\n                              role=\"button\"\n                              [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                              (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                              (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                            >\n                              <div class=\"reply-preview-content\">\n                                <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                                <div class=\"reply-preview-text\">\n                                  @if (getMessagePreviewText(message.replyTo); as preview) {\n                                    <span class=\"last-message\">\n                                      @if (preview.type !== 'text') {\n                                        <i [class]=\"preview.icon\"></i\n                                        >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                      } @else {\n                                        {{ preview.value }}\n                                      }\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Forwarded Indicator -->\n                          @if (message.forwarded) {\n                            <div class=\"forwarded-preview\">\n                              <i class=\"fa-solid fa-share\"></i>\n                              <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                            </div>\n                          }\n\n                          <ax-conversation-registry-component-outlet\n                            [component]=\"getRendererComponent(message)\"\n                            [componentLoader]=\"getRendererComponentLoader(message)\"\n                            [inputs]=\"getRendererInputs(message)\"\n                          />\n\n                          @if (message.reactions.length > 0) {\n                            <div class=\"message-reactions-container\">\n                              <div class=\"message-reactions-bubbles\">\n                                @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                                  <button\n                                    type=\"button\"\n                                    class=\"reaction-bubble\"\n                                    [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                    (click)=\"onReactionClick(message, reaction.emoji)\"\n                                    [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                                  >\n                                    <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                    @if (reaction.count > 1) {\n                                      <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                    }\n                                  </button>\n                                }\n                              </div>\n                            </div>\n                          }\n\n                          <!-- Message Footer -->\n                          <div class=\"message-footer\">\n                            @if (getReplyCount(message) > 0) {\n                              <span\n                                class=\"message-footer-count\"\n                                [attr.aria-label]=\"getReplyCount(message) + ' replies'\"\n                              >\n                                <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                                <span class=\"message-footer-count-value\">{{ getReplyCount(message) }}</span>\n                              </span>\n                            }\n                            @if (getForwardCount(message) > 0) {\n                              <span\n                                class=\"message-footer-count\"\n                                [attr.aria-label]=\"getForwardCount(message) + ' forwards'\"\n                              >\n                                <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                                <span class=\"message-footer-count-value\">{{ getForwardCount(message) }}</span>\n                              </span>\n                            }\n                            @if (getReplyCount(message) > 0 || getForwardCount(message) > 0) {\n                              <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                            }\n                            <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                            @if (message.editedAt) {\n                              <span class=\"edited-indicator\">\n                                <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                              </span>\n                            }\n                            @if (isOwnMessage(message)) {\n                              <span [class]=\"getStatusIconClasses(message)\">\n                                <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Context Menu for Message Actions -->\n                    <ax-context-menu\n                      [target]=\"'#message-bubble-' + message.id\"\n                      [openOn]=\"'click'\"\n                      [closeOn]=\"'click'\"\n                      (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                      (onClose)=\"contextMenuMessageId.set(null)\"\n                      (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                    >\n                    </ax-context-menu>\n                  </div>\n                }\n              }\n            </div>\n\n            <!-- Scroll to Bottom Button -->\n            @if (showScrollButton()) {\n              <ax-button\n                class=\"scroll-to-bottom\"\n                (onClick)=\"scrollToBottom()\"\n                animate.enter=\"slide-in\"\n                animate.leave=\"slide-out\"\n                [text]=\"'\u2193'\"\n                [look]=\"'solid'\"\n                [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n              ></ax-button>\n            }\n          }\n        </div>\n      }\n\n      <!-- Reaction Picker Popover -->\n      @if (reactionPickerTarget()) {\n        <ax-popover\n          #reactionPopover\n          [target]=\"reactionPickerElement()\"\n          [openOn]=\"'manual'\"\n          [closeOn]=\"'clickOut'\"\n          [placement]=\"reactionPickerPlacement()\"\n          (onClose)=\"closeReactionPicker()\"\n        >\n          <div class=\"reaction-picker-popup\">\n            <div class=\"reaction-picker-header\">\n              <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n              <button\n                type=\"button\"\n                class=\"picker-close\"\n                (click)=\"closeReactionPicker()\"\n                [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n              >\n                <i class=\"fa-light fa-xmark\"></i>\n              </button>\n            </div>\n            <div\n              class=\"reaction-picker-emojis\"\n              role=\"listbox\"\n              [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n            >\n              @for (emoji of availableReactions(); track emoji) {\n                <button\n                  type=\"button\"\n                  class=\"reaction-picker-emoji\"\n                  [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n                  (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n                  [attr.aria-label]=\"emoji\"\n                >\n                  {{ emoji }}\n                </button>\n              }\n            </div>\n          </div>\n        </ax-popover>\n      }\n    } @else {\n      <div\n        class=\"message-list message-list--no-active\"\n        role=\"region\"\n        [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n      >\n        <div class=\"list-no-active\">\n          <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n            <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n          </ng-content>\n        </div>\n      </div>\n    }\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);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}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-button.scroll-to-bottom:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list ax-button.scroll-to-bottom{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999;display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-primary-surface));font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:rgba(var(--ax-sys-color-on-primary-surface));transition:transform var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .slide-in{animation:slideInFromBottom var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .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)}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (activeConversation(); as conv) {\n  @for (cid of [conv.id]; track cid) {\n    <div\n      class=\"message-list message-list--conversation-surface\"\n      [class.message-list--drag]=\"messageListDragging()\"\n      #messageList\n      role=\"log\"\n      [attr.aria-label]=\"'@acorex:chat.aria.message-list' | translate | async\"\n      aria-live=\"polite\"\n      [style.background]=\"messageListBackgroundStyle()\"\n      axUploaderZone\n      [disableBrowse]=\"true\"\n      (dragEnter)=\"onMessageListDragEnter()\"\n      (dragLeave)=\"onMessageListDragLeave()\"\n      (fileChange)=\"onMessageListFilesDropped($event)\"\n    >\n      @if (loading()) {\n        <div\n          class=\"list-loading\"\n          role=\"status\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <ax-loading></ax-loading>\n          <ax-label>{{ '@acorex:chat.status.loading-messages' | translate | async }}</ax-label>\n        </div>\n      } @else if (messages().length === 0) {\n        <div class=\"list-empty\" role=\"status\" [attr.aria-label]=\"'@acorex:chat.status.no-messages' | translate | async\">\n          <ng-content select=\"ax-conversation-message-list-empty, [ax-conversation-message-list-empty]\">\n            <ng-container\n              *ngComponentOutlet=\"resolvedEmptyStateComponent(); inputs: { conversation: activeConversation()! }\"\n            ></ng-container>\n          </ng-content>\n        </div>\n      } @else {\n        <div\n          class=\"messages-container\"\n          (scroll)=\"onScroll($event)\"\n          axInfiniteScroll\n          [threshold]=\"config.infiniteScrollThreshold\"\n          [edge]=\"'top'\"\n          [scrollDisabled]=\"loading() || loadingMore() || !hasMoreMessages()\"\n          (scrollThreshold)=\"onScrollThreshold($event)\"\n          #messagesContainer\n          role=\"feed\"\n          [attr.aria-label]=\"'@acorex:chat.aria.messages' | translate | async\"\n        >\n          @if (loadingMore()) {\n            <div\n              class=\"list-loading-more list-loading-more--prepend\"\n              role=\"status\"\n              animate.enter=\"load-more-enter\"\n              animate.leave=\"load-more-leave\"\n              [attr.aria-label]=\"'@acorex:chat.status.loading-older-messages' | translate | async\"\n            >\n              <div class=\"load-more-indicator\" aria-hidden=\"true\">\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n                <span class=\"load-more-dot\"></span>\n              </div>\n              <ax-label class=\"load-more-label\">{{\n                '@acorex:chat.status.loading-older-messages' | translate | async\n              }}</ax-label>\n            </div>\n          }\n          @for (group of messageGroups(); track trackMessageGroup($index, group)) {\n            <!-- Date Separator -->\n            <div class=\"date-separator\" role=\"separator\" [attr.aria-label]=\"getDateSeparatorAriaLabel(group.dateLabel)\">\n              <ax-badge [text]=\"group.dateLabel\" class=\"date-text\"></ax-badge>\n            </div>\n\n            <!-- Messages in this date group -->\n            @for (message of group.messages; track trackMessage($index, message)) {\n              <div\n                [class]=\"getMessageClasses(message)\"\n                role=\"article\"\n                [attr.aria-label]=\"getMessageAriaLabel(message)\"\n                [id]=\"'message-' + message.id\"\n              >\n                <!-- Avatar (only for group conversations and received messages) -->\n                @if (shouldShowAvatar(message)) {\n                  <div class=\"message-avatar\">\n                    <ax-conversation-avatar\n                      kind=\"user\"\n                      [userId]=\"message.senderId\"\n                      [conversation]=\"activeConversation()\"\n                      [message]=\"message\"\n                      [size]=\"32\"\n                    />\n                  </div>\n                }\n\n                <div class=\"message-content-row\" [class.message-content-row-own]=\"isOwnMessage(message)\">\n                  <button\n                    type=\"button\"\n                    class=\"add-reaction-button add-reaction-outside\"\n                    [class.add-reaction-visible]=\"reactionPickerTarget() === message.id\"\n                    (click)=\"toggleReactionPicker(message, $event)\"\n                    [attr.aria-label]=\"'@acorex:chat.actions.add-reaction' | translate | async\"\n                    #reactionButton\n                  >\n                    <i class=\"fa-light fa-face-smile\"></i>\n                  </button>\n\n                  <div\n                    class=\"message-bubble-container\"\n                    [id]=\"'message-bubble-' + message.id\"\n                    [attr.data-message-id]=\"message.id\"\n                  >\n                    <div\n                      [class]=\"getBubbleClasses(message)\"\n                      [class.message-bubble-sent]=\"message.senderId === currentUser()?.id\"\n                      [class.message-bubble-received]=\"message.senderId !== currentUser()?.id\"\n                    >\n                      <!-- Sender name (only for group conversations and received messages) -->\n                      @if (shouldShowSenderName(message)) {\n                        <div class=\"message-sender\">{{ getSenderName(message) }}:</div>\n                      }\n\n                      <!-- Reply Preview -->\n                      @if (message.replyTo) {\n                        <div\n                          class=\"reply-preview\"\n                          (click)=\"scrollToMessage(message.replyTo.id)\"\n                          role=\"button\"\n                          [attr.aria-label]=\"'Reply to ' + getSenderName(message.replyTo)\"\n                          (keydown.enter)=\"scrollToMessage(message.replyTo.id)\"\n                          (keydown.space)=\"scrollToMessage(message.replyTo.id)\"\n                        >\n                          <div class=\"reply-preview-content\">\n                            <div class=\"reply-preview-sender\">{{ getSenderName(message.replyTo) }}</div>\n                            <div class=\"reply-preview-text\">\n                              @if (getMessagePreviewText(message.replyTo); as preview) {\n                                <span class=\"last-message\">\n                                  @if (preview.type !== 'text') {\n                                    <i [class]=\"preview.icon\"></i\n                                    >{{ '@acorex:chat.' + preview.type | translate | async }}\n                                  } @else {\n                                    {{ preview.value }}\n                                  }\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Forwarded Indicator -->\n                      @if (message.forwarded) {\n                        <div class=\"forwarded-preview\">\n                          <i class=\"fa-solid fa-share\"></i>\n                          <span class=\"forwarded-text\">{{ getForwardedText(message) }}</span>\n                        </div>\n                      }\n\n                      <ax-conversation-registry-component-outlet\n                        [component]=\"getRendererComponent(message)\"\n                        [componentLoader]=\"getRendererComponentLoader(message)\"\n                        [inputs]=\"getRendererInputs(message)\"\n                      />\n\n                      @if (message.reactions.length > 0) {\n                        <div class=\"message-reactions-container\">\n                          <div class=\"message-reactions-bubbles\">\n                            @for (reaction of getGroupedReactions(message); track reaction.emoji) {\n                              <button\n                                type=\"button\"\n                                class=\"reaction-bubble\"\n                                [class.reaction-bubble-active]=\"reaction.hasReacted\"\n                                (click)=\"onReactionClick(message, reaction.emoji)\"\n                                [attr.aria-label]=\"reaction.emoji + ' ' + reaction.count\"\n                              >\n                                <span class=\"reaction-emoji\">{{ reaction.emoji }}</span>\n                                @if (reaction.count > 1) {\n                                  <span class=\"reaction-count\">{{ reaction.count }}</span>\n                                }\n                              </button>\n                            }\n                          </div>\n                        </div>\n                      }\n\n                      <!-- Message Footer -->\n                      <div class=\"message-footer\">\n                        @let replyCount = getReplyCount(message);\n                        @let forwardCount = getForwardCount(message);\n                        @if (replyCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"replyCount + ' replies'\">\n                            <i class=\"fa-solid fa-message\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ replyCount }}</span>\n                          </span>\n                        }\n                        @if (forwardCount > 0) {\n                          <span class=\"message-footer-count\" [attr.aria-label]=\"forwardCount + ' forwards'\">\n                            <i class=\"fa-solid fa-share\" aria-hidden=\"true\"></i>\n                            <span class=\"message-footer-count-value\">{{ forwardCount }}</span>\n                          </span>\n                        }\n                        @if (replyCount > 0 || forwardCount > 0) {\n                          <span class=\"message-footer-split\" aria-hidden=\"true\"></span>\n                        }\n                        <span class=\"message-time\">{{ message.timestamp | format: 'timeleft' | async }}</span>\n                        @if (message.editedAt) {\n                          <span class=\"edited-indicator\">\n                            <span>{{ '@acorex:chat.status.edited' | translate | async }}</span>\n                          </span>\n                        }\n                        @if (isOwnMessage(message)) {\n                          <span [class]=\"getStatusIconClasses(message)\">\n                            <ax-icon><i [class]=\"getStatusIcon(message)\"></i></ax-icon>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Context Menu for Message Actions -->\n                <ax-context-menu\n                  [target]=\"'#message-bubble-' + message.id\"\n                  [openOn]=\"'click'\"\n                  [closeOn]=\"'click'\"\n                  (onOpening)=\"handleMessageContextMenuOpening($event, message)\"\n                  (onClose)=\"contextMenuMessageId.set(null)\"\n                  (onItemClick)=\"handleMessageContextMenuItemClick($event, message)\"\n                >\n                </ax-context-menu>\n              </div>\n            }\n          }\n        </div>\n\n        <!-- Scroll to Bottom Button -->\n        @if (showScrollButton()) {\n          <div\n            class=\"scroll-to-bottom-wrapper\"\n            animate.enter=\"scroll-to-bottom-enter\"\n            animate.leave=\"scroll-to-bottom-leave\"\n          >\n            <ax-fab\n              class=\"scroll-to-bottom\"\n              (onClick)=\"scrollToBottom()\"\n              [attr.aria-label]=\"'@acorex:chat.actions.scroll-to-bottom' | translate | async\"\n            >\n              <ax-icon><i class=\"fa-light fa-arrow-down\" aria-hidden=\"true\"></i></ax-icon>\n            </ax-fab>\n          </div>\n        }\n      }\n    </div>\n  }\n\n  <!-- Reaction Picker Popover -->\n  @if (reactionPickerTarget()) {\n    <ax-popover\n      #reactionPopover\n      [target]=\"reactionPickerElement()\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"reactionPickerPlacement()\"\n      (onClose)=\"closeReactionPicker()\"\n    >\n      <div class=\"reaction-picker-popup\">\n        <div class=\"reaction-picker-header\">\n          <span class=\"picker-title\">{{ '@acorex:chat.actions.react' | translate | async }}</span>\n          <button\n            type=\"button\"\n            class=\"picker-close\"\n            (click)=\"closeReactionPicker()\"\n            [attr.aria-label]=\"'@acorex:chat.actions.close' | translate | async\"\n          >\n            <i class=\"fa-light fa-xmark\"></i>\n          </button>\n        </div>\n        <div\n          class=\"reaction-picker-emojis\"\n          role=\"listbox\"\n          [attr.aria-label]=\"'@acorex:chat.actions.choose-reaction' | translate | async\"\n        >\n          @for (emoji of availableReactions(); track emoji) {\n            <button\n              type=\"button\"\n              class=\"reaction-picker-emoji\"\n              [class.reaction-picker-emoji-active]=\"hasUserReactedById(reactionPickerTarget()!, emoji)\"\n              (click)=\"onReactionClickById(reactionPickerTarget()!, emoji); closeReactionPicker()\"\n              [attr.aria-label]=\"emoji\"\n            >\n              {{ emoji }}\n            </button>\n          }\n        </div>\n      </div>\n    </ax-popover>\n  }\n} @else {\n  <div\n    class=\"message-list message-list--no-active\"\n    role=\"region\"\n    [attr.aria-label]=\"'@acorex:chat.status.no-conversation-selected' | translate | async\"\n  >\n    <div class=\"list-no-active\">\n      <ng-content select=\"ax-conversation-message-list-no-active, [ax-conversation-message-list-no-active]\">\n        <ng-container *ngComponentOutlet=\"noActiveFallbackComponent\"></ng-container>\n      </ng-content>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-message-list{position:relative;display:block;height:100%;container-type:inline-size;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes axChatLoadMoreDot{0%,70%,to{transform:translateY(0) scale(1);opacity:.4}35%{transform:translateY(-.28rem) scale(1.08);opacity:1}}@keyframes axChatLoadMoreEnterPrepend{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes axChatLoadMoreLeavePrepend{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-.35rem)}}@keyframes axScrollToBottomEnter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes axScrollToBottomLeave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}}ax-conversation-message-list .message-list{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden}ax-conversation-message-list .message-list.ax-drop-zone>.ax-uploader-overlay-state{display:none!important}ax-conversation-message-list .message-list--drag{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: dashed;outline-style:dashed;outline-offset:-2px}ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceIn .36s cubic-bezier(.22,1,.36,1) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .message-list--conversation-surface{animation:axConversationSurfaceInReduced .18s ease both}}ax-conversation-message-list .list-loading{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center}ax-conversation-message-list .list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 5);padding-inline:calc(var(--spacing, .25rem) * 8);padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;animation:fadeInUp .5s ease-out}ax-conversation-message-list .message-list--no-active{height:100%}ax-conversation-message-list .list-no-active{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;align-items:center;justify-content:center}ax-conversation-message-list .empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:5.5rem;--tw-leading: 1;line-height:1;opacity:35%;filter:grayscale(.2)}ax-conversation-message-list .empty-title{margin:calc(var(--spacing, .25rem) * 0);font-size:1.625rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-tight, -.025em);letter-spacing:var(--tracking-tight, -.025em);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-message-list .empty-description{margin:calc(var(--spacing, .25rem) * 0);max-width:420px;font-size:1.0625rem;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-message-list .spinner{margin-bottom:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:3px;border-color:rgba(var(--ax-sys-color-border-light-surface));border-top-color:rgb(var(--ax-sys-color-primary-500));animation:spin .8s linear infinite}ax-conversation-message-list .list-loading-more{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 2);text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .load-more-indicator{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;gap:.3rem}ax-conversation-message-list .load-more-dot{height:.4rem;width:.4rem;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-500));animation:axChatLoadMoreDot 1s ease-in-out infinite}ax-conversation-message-list .load-more-dot:nth-child(2){animation-delay:.14s}ax-conversation-message-list .load-more-dot:nth-child(3){animation-delay:.28s}ax-conversation-message-list .load-more-label{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%}ax-conversation-message-list .load-more-enter{animation:axChatLoadMoreEnterPrepend .32s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .load-more-leave{animation:axChatLoadMoreLeavePrepend .22s ease both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .load-more-dot{animation:none;opacity:.65}ax-conversation-message-list .load-more-enter,ax-conversation-message-list .load-more-leave{animation:none}}ax-conversation-message-list .messages-container{position:relative;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1;overflow-x:hidden;overflow-y:auto}ax-conversation-message-list .date-separator{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:150;display:flex;align-items:center;justify-content:center;padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .date-text{display:flex;width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-conversation-message-list .unread-separator{margin-block:calc(var(--spacing, .25rem) * 6);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4)}ax-conversation-message-list .unread-separator-line{height:1px;flex:1;background-color:rgba(var(--ax-sys-color-primary-surface));opacity:30%}ax-conversation-message-list .unread-separator-text{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}ax-conversation-message-list .message-item{position:relative;display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);transition:background-color .3s ease}ax-conversation-message-list .message-item-context-active{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.09);box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.22)}ax-conversation-message-list .message-own.message-item-context-active{background-color:rgba(var(--ax-sys-color-primary-500),.12)}ax-conversation-message-list .message-highlight{border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-message-list .message-item.message-own{flex-direction:row-reverse}ax-conversation-message-list .message-avatar{flex-shrink:0}ax-conversation-message-list .message-avatar-icon{display:flex;height:100%;width:100%;align-items:center;justify-content:center;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-conversation-message-list .message-content-row{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:0 1 auto;flex-direction:row;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 1);max-width:min(95%,50rem)}@container (min-width: 768px){ax-conversation-message-list .message-content-row{max-width:min(70%,50rem)}}ax-conversation-message-list .message-content-row-own{justify-content:flex-end}ax-conversation-message-list .message-item:not(.message-own) .message-content-row{justify-content:flex-start}ax-conversation-message-list .message-bubble-container{position:relative;display:flex;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1 1 auto;flex-direction:column}ax-conversation-message-list .message-own .message-bubble-container{align-items:flex-end}ax-conversation-message-list .message-sender{margin-bottom:.1rem;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-bubble{position:relative;display:flex;max-width:100%;flex-direction:column;border-radius:var(--radius-2xl, 1rem);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2);padding-bottom:.1rem;overflow-wrap:break-word;transition:background-color .3s ease}ax-conversation-message-list .reply-preview{margin-bottom:.1rem;cursor:pointer;border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .reply-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .reply-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .reply-preview-line{width:3px;flex-shrink:0;border-radius:1.5px;background:currentColor;opacity:.5}ax-conversation-message-list .reply-preview-content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-message-list .reply-preview-sender{margin-bottom:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .reply-preview-text{overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .reply-preview-sender{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .reply-preview-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .last-message{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .forwarded-preview{margin-bottom:.1rem;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--ax-sys-border-radius);border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);background:rgba(var(--ax-sys-color-primary-500),.08);border-inline-start-color: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)}ax-conversation-message-list .forwarded-preview:hover{background:rgba(var(--ax-sys-color-primary-500),.14);border-inline-start-color:rgb(var(--ax-sys-color-primary-600))}ax-conversation-message-list .message-own .forwarded-preview{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px;background:rgba(var(--ax-sys-color-on-primary-surface),.14);border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.55)}ax-conversation-message-list .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)}ax-conversation-message-list .forwarded-preview i{flex-shrink:0;font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-message-list .forwarded-text{min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.8125rem;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-message-list .message-own .forwarded-preview i{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:95%}ax-conversation-message-list .message-own .forwarded-text{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:.78}ax-conversation-message-list .message-bubble-received{border-end-start-radius:.125rem}ax-conversation-message-list .message-bubble-received:before{content:\"\";display:block;position:absolute;bottom:calc(var(--spacing, .25rem) * 0);height:.8rem;width:.8rem;background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;border-start-start-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;width:.8rem;height:.8rem;position:absolute;bottom:0;background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;border-start-end-radius:86%;corner-shape:scoop}ax-conversation-message-list .message-own .message-bubble{background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}ax-conversation-message-list .message-bubble.message-system{background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);max-width:100%}ax-conversation-message-list .message-bubble.message-system:before,ax-conversation-message-list .message-bubble.message-system:after{display:none}ax-conversation-message-list .message-item:has(.message-system){justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1)}ax-conversation-message-list .message-item:has(.message-system) .message-content-row{max-width:100%;justify-content:center}ax-conversation-message-list .message-item:has(.message-system) .message-bubble-container{align-items:center}ax-conversation-message-list .message-content{font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);white-space:pre-wrap}ax-conversation-message-list ax-conversation-registry-component-outlet{display:block;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}ax-conversation-message-list .message-footer{margin-top:.1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);padding-inline-start:calc(var(--spacing, .25rem) * 1);font-size:.6875rem;--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);opacity:70%;-webkit-user-select:none;user-select:none}ax-conversation-message-list .message-footer-count{display:inline-flex;align-items:center;gap:.2rem;font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .message-footer-count i{font-size:.625rem;opacity:90%}ax-conversation-message-list .message-footer-count-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-message-list .message-footer-split{margin-inline:.2rem;height:.65rem;width:1px;flex-shrink:0;align-self:center;background-color:rgba(var(--ax-sys-color-border-light-surface));opacity:90%}ax-conversation-message-list .message-time{font-size:.675rem;--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}ax-conversation-message-list .edited-indicator{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline-start:.35rem;font-size:.675rem;opacity:75%}ax-conversation-message-list .status-icon{display:inline-flex;align-items:center}ax-conversation-message-list .status-icon i{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-conversation-message-list .status-read{color:rgba(var(--ax-sys-color-primary-200))}ax-conversation-message-list .status-failed{color:rgba(var(--ax-sys-color-danger-200))}ax-conversation-message-list .message-reactions-bubbles{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}ax-conversation-message-list .reaction-bubble{margin:calc(var(--spacing, .25rem) * 0);display:inline-flex;min-height:1.375rem;cursor:pointer;align-items:center;justify-content:center;gap:.15rem;border-radius:var(--radius-xl, .75rem);padding-inline:.35rem;padding-block:.1rem;color:rgba(var(--ax-sys-color-on-surface));--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background:rgba(var(--ax-sys-color-on-surface),.06);border:1px solid rgba(var(--ax-sys-color-on-surface),.1);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}ax-conversation-message-list .reaction-bubble:hover{background:rgba(var(--ax-sys-color-on-surface),.1);border-color:rgba(var(--ax-sys-color-on-surface),.18)}ax-conversation-message-list .reaction-bubble-active{background:rgba(var(--ax-sys-color-primary-500),.12);border-color:rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-message-list .reaction-bubble-active:hover{background:rgba(var(--ax-sys-color-primary-500),.18);border-color:rgba(var(--ax-sys-color-primary-500),.55)}ax-conversation-message-list .reaction-emoji{display:inline-block;font-size:.8125rem;--tw-leading: 1;line-height:1}ax-conversation-message-list .reaction-count{font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);opacity:.65}ax-conversation-message-list .reaction-bubble-active .reaction-count{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-600));opacity:95%}ax-conversation-message-list .message-own .reaction-bubble{color:rgba(var(--ax-sys-color-on-primary-surface));background:rgba(var(--ax-sys-color-on-primary-surface),.12);border-color:rgba(var(--ax-sys-color-on-primary-surface),.2)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .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)}ax-conversation-message-list .message-own .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:80%}ax-conversation-message-list .message-own .reaction-bubble-active .reaction-count{color:rgba(var(--ax-sys-color-on-primary-surface));opacity:100%}ax-conversation-message-list .message-reactions-container{margin-top:calc(var(--spacing, .25rem) * 1);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.2rem}ax-conversation-message-list .message-own .message-reactions-container{justify-content:flex-end}ax-conversation-message-list .message-own .message-footer .edited-indicator{border-inline-start-color:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .message-own .message-footer .message-footer-split{background:rgba(var(--ax-sys-color-on-primary-surface),.35)}ax-conversation-message-list .add-reaction-button.add-reaction-outside{position:absolute;top:50%;margin:calc(var(--spacing, .25rem) * 0);box-sizing:border-box;display:none;height:1.8rem;width:1.8rem;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 0);inset-inline-end:-2.25rem;box-shadow:0 1px 2px #0000000f}ax-conversation-message-list .add-reaction-button{padding-inline-start:.05rem}ax-conversation-message-list .message-content-row-own .add-reaction-button.add-reaction-outside{inset-inline-start:-2.25rem;inset-inline-end:auto}ax-conversation-message-list .message-item:hover .add-reaction-button.add-reaction-outside,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{display:inline-flex}ax-conversation-message-list .add-reaction-button.add-reaction-outside:hover,ax-conversation-message-list .add-reaction-button.add-reaction-outside.add-reaction-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .add-reaction-button.add-reaction-outside i{font-size:.9rem;color:rgba(var(--ax-sys-color-on-surface));opacity:80%}ax-conversation-message-list .reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw);box-shadow:0 4px 16px #0000001a}ax-conversation-message-list .reaction-picker-header{display:flex;min-height:calc(var(--spacing, .25rem) * 0);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:.45rem;padding-inline-start:.7rem;padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .picker-title{font-size:.8125rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}ax-conversation-message-list .picker-close{display:flex;height:1.6rem;width:1.6rem;cursor:pointer;align-items:center;justify-content:center;border-radius:.25rem;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);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)}ax-conversation-message-list .picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}ax-conversation-message-list .reaction-bubble:focus-visible,ax-conversation-message-list .add-reaction-button:focus-visible,ax-conversation-message-list .picker-close:focus-visible,ax-conversation-message-list .reaction-picker-emoji:focus-visible,ax-conversation-message-list .action-trigger:focus-visible,ax-conversation-message-list ax-fab.scroll-to-bottom ax-button:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-message-list .reaction-picker-emojis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.2rem;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:.45rem;padding-bottom:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .reaction-picker-emoji{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:.45rem;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:1.15rem;--tw-leading: 1;line-height:1;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}ax-conversation-message-list .reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-message-list .reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}ax-conversation-message-list .reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}ax-conversation-message-list .message-actions{z-index:10;padding-bottom:calc(var(--spacing, .25rem) * 6);opacity:0%;transition:opacity var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .message-item:hover .message-actions{opacity:100%}ax-conversation-message-list .action-trigger{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-surface));font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:all var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-message-list .action-trigger:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-message-list .shortcut{font-size:.6875rem;opacity:70%}ax-conversation-message-list .scroll-to-bottom-wrapper{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);bottom:calc(var(--spacing, .25rem) * 4);z-index:999}ax-conversation-message-list ax-fab.scroll-to-bottom ax-button{display:flex;height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 12);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none}ax-conversation-message-list .scroll-to-bottom-enter{animation:axScrollToBottomEnter var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}ax-conversation-message-list .scroll-to-bottom-leave{animation:axScrollToBottomLeave var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function) both}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .scroll-to-bottom-enter,ax-conversation-message-list .scroll-to-bottom-leave{animation:none}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { reactionPopover: [{ type: i0.ViewChild, args: ['reactionPopover', { isSignal: true }] }], messageListRef: [{ type: i0.ViewChild, args: ['messageList', { isSignal: true }] }], messagesContainerRef: [{ type: i0.ViewChild, args: ['messagesContainer', { isSignal: true }] }], messageAction: [{ type: i0.Output, args: ["messageAction"] }] } });
 
 /**
@@ -7657,6 +7800,7 @@ class AXConversationSidebarService {
             return result;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredConversations" }] : /* istanbul ignore next */ []));
+        void this.conversationService.ensureInitialized();
     }
     // Access registry through conversation service
     get registry() {
@@ -7753,7 +7897,7 @@ class AXConversationSidebarService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationSidebarService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Sidebar Component (moved under conversation-view)
@@ -7904,9 +8048,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class AXConversationNewDialogComponent extends AXBasePageComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.toastService = inject(AXToastService);
         this.translation = inject(AXTranslationService);
+        this.config = inject(AX_CONVERSATION_CONFIG);
+        this.destroyRef = inject(DestroyRef);
         /**
          * Injected by {@link AXPopupComponent} when this dialog is opened via {@link AXPopupService}.
          * Required for `setTitle` / dynamic header — {@link AXBasePageComponent#setTitle} is otherwise unset.
@@ -8009,6 +8155,11 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
             },
             byKey: (key) => Promise.resolve(this.availableUsers().find((u) => u.id === key) ?? null),
         });
+        this.destroyRef.onDestroy(() => {
+            if (this.searchDebounceTimer) {
+                clearTimeout(this.searchDebounceTimer);
+            }
+        });
     }
     onCancel() {
         const event = new AXComponentCloseEvent();
@@ -8029,7 +8180,13 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
     }
     onSearchChange(value) {
         this.searchQuery.set(value ?? '');
-        this.usersList()?.refresh(false);
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.searchDebounceTimer = setTimeout(() => {
+            this.searchDebounceTimer = undefined;
+            this.usersList()?.refresh(false);
+        }, this.config.debounceSearch ?? 300);
     }
     isUserSelected(id) {
         return this.selectedUserIds().includes(id);
@@ -8091,7 +8248,7 @@ class AXConversationNewDialogComponent extends AXBasePageComponent {
             this.creating.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationNewDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationNewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationNewDialogComponent, isStandalone: true, selector: "ax-conversation-new-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], viewQueries: [{ propertyName: "usersListEmptyTpl", first: true, predicate: ["usersListEmpty"], descendants: true, isSignal: true }, { propertyName: "usersList", first: true, predicate: ["usersList"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: 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: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationNewDialogComponent, decorators: [{
@@ -8107,7 +8264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXConversationAvatarComponent,
                         AXTranslationModule,
                     ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationNewDialogComponent }], template: "    <div class=\"new-conversation-panel\">\n      <div class=\"new-conversation-dialog-content\">\n        @if (showUserPickerStep()) {\n          <div class=\"form-field form-field--grow\">\n            <div class=\"users-list-wrap\">\n              <div class=\"users-list-search\">\n                <ax-search-box\n                  [value]=\"searchQuery()\"\n                  (valueChange)=\"onSearchChange($event)\"\n                  [disabled]=\"creating()\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-users' | translate | async\"\n                ></ax-search-box>\n              </div>\n              <ax-list\n                #usersList\n                class=\"users-list\"\n                [dataSource]=\"usersListDataSource\"\n                [multiple]=\"true\"\n                [checkbox]=\"false\"\n                [disabled]=\"creating()\"\n                [valueField]=\"'id'\"\n                [textField]=\"'name'\"\n                [itemHeight]=\"60\"\n                [ngModel]=\"selectedUserIds()\"\n                (ngModelChange)=\"onSelectedUsersChange($event ?? [])\"\n                [emptyTemplate]=\"usersListEmptyTpl()\"\n                [itemTemplate]=\"userItemTpl\"\n              ></ax-list>\n            </div>\n          </div>\n        }\n\n        @if (showGroupDetailsStep()) {\n          <div class=\"group-details-step\">\n            <div class=\"form-field\">\n              <input\n                class=\"title-input\"\n                [ngModel]=\"groupTitle()\"\n                (ngModelChange)=\"groupTitle.set($event ?? '')\"\n                [disabled]=\"creating()\"\n                [placeholder]=\"'@acorex:chat.placeholders.group-title-required' | translate | async\"\n              />\n            </div>\n            <div class=\"form-field\">\n              <ax-conversation-avatar-picker [(avatarUrl)]=\"groupAvatar\"></ax-conversation-avatar-picker>\n            </div>\n          </div>\n        }\n      </div>\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          @if (showGroupBackButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.back' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onBackFromGroupDetails()\"\n            ></ax-button>\n          } @else {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n              [look]=\"'solid'\"\n              [disabled]=\"creating()\"\n              (onClick)=\"onCancel()\"\n            ></ax-button>\n          }\n          @if (showNextButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.next' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canGoNextToGroupDetails() || creating()\"\n              (onClick)=\"onNextToGroupDetails()\"\n            ></ax-button>\n          }\n          @if (showCreateButton()) {\n            <ax-button\n              [text]=\"'@acorex:chat.actions.create' | translate | async\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n              [disabled]=\"!canCreate() || creating()\"\n              (onClick)=\"onCreateConversation()\"\n            ></ax-button>\n          }\n        </ax-suffix>\n      </ax-footer>\n    </div>\n\n    <ng-template #usersListEmpty>\n      <div class=\"users-list-empty\">\n        @if (searchQuery()) {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-search' | translate | async }}\n        } @else {\n          {{ '@acorex:chat.dialog.new-conversation.no-users-available' | translate | async }}\n        }\n      </div>\n    </ng-template>\n\n    <ng-template #userItemTpl let-item>\n      @if (userFromItem(item); as user) {\n        <div class=\"user-item-content\">\n          <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isUserSelected(user.id)\" tabindex=\"0\" />\n          <ax-conversation-avatar\n            kind=\"user\"\n            [userId]=\"user.id\"\n            [size]=\"48\"\n            [name]=\"user.name\"\n            [avatar]=\"user.avatar\"\n            [icon]=\"user.icon\"\n          />\n          <div class=\"user-item-text\">\n            <span class=\"truncated user-name-text\">{{ user.name }}</span>\n            @if (user.description) {\n              <span class=\"user-description-text truncated\">{{ user.description }}</span>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n", styles: ["@layer properties;@layer components{ax-conversation-new-dialog{display:block}ax-conversation-new-dialog .new-conversation-panel{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-new-dialog .new-conversation-dialog-content{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden}ax-conversation-new-dialog .form-field--grow{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column}ax-conversation-new-dialog .group-details-step{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .form-field{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-new-dialog .field-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface),.6)}ax-conversation-new-dialog .title-input{height:calc(var(--spacing, .25rem) * 9);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .title-input:focus{outline:2px solid rgba(var(--ax-sys-color-primary-500),.25);outline-offset:0}ax-conversation-new-dialog .users-list-wrap{display:flex;flex-direction:column;overflow:hidden;height:min(50vh,36rem)}ax-conversation-new-dialog .users-list-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .users-list{display:block;min-height:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-new-dialog .user-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-new-dialog .user-item-text{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;justify-content:center;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-new-dialog .user-name-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-new-dialog .user-description-text{overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:70%}ax-conversation-new-dialog .users-list-empty{padding:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.85rem;opacity:70%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], usersListEmptyTpl: [{ type: i0.ViewChild, args: ['usersListEmpty', { isSignal: true }] }], usersList: [{ type: i0.ViewChild, args: ['usersList', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], usersListEmptyTpl: [{ type: i0.ViewChild, args: ['usersListEmpty', { isSignal: true }] }], usersList: [{ type: i0.ViewChild, args: ['usersList', { isSignal: true }] }] } });
 
 var newConversationDialog_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -8773,9 +8930,12 @@ var sharedStorage = /*#__PURE__*/Object.freeze({
 /**
  * Extra seed data so sidebar, message-list, and user-picker pagination can be exercised in the demo.
  */
+/** Dedicated chat for message-list infinite-scroll / page loading tests. */
+const AX_MESSAGE_PAGINATION_CONVERSATION_ID = 'conv-pag-msgs';
 const AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION = 200;
-const AX_CONVERSATION_MIN_MESSAGES_CONV_1 = 500;
+const AX_CONVERSATION_MESSAGE_PAGINATION_COUNT = 500;
 const AX_CONVERSATION_MIN_USERS_FOR_PAGINATION = 50;
+const AX_PAGINATION_DB_BATCH_SIZE = 50;
 /**
  * Append demo users when the participant list is too small for the new-conversation picker (page size 10).
  */
@@ -8807,14 +8967,88 @@ async function ensureUsersPaginationDemoData() {
         await axConversationIndexedDbStorage.putParticipant(participant);
     }
 }
+/**
+ * Create a pinned private chat with {@link AX_CONVERSATION_MESSAGE_PAGINATION_COUNT} text messages.
+ */
+async function ensureMessagePaginationConversation(currentUser, peer, now) {
+    const existingCount = axConversationSharedStorage.messagesByConversation.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID)?.length ?? 0;
+    if (existingCount >= AX_CONVERSATION_MESSAGE_PAGINATION_COUNT) {
+        return;
+    }
+    if (!axConversationSharedStorage.conversations.has(AX_MESSAGE_PAGINATION_CONVERSATION_ID)) {
+        const conversation = {
+            id: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
+            type: 'private',
+            title: `Message Pagination (${AX_CONVERSATION_MESSAGE_PAGINATION_COUNT})`,
+            participants: [currentUser, { ...peer, role: 'member' }],
+            lastMessageAt: new Date(now),
+            unreadCount: 0,
+            pinned: true,
+            status: { isTyping: false, typingUsers: [] },
+            settings: { notifications: true, showPreview: true },
+            archived: false,
+            metadata: {
+                profile: {
+                    description: 'Mock chat with 500 messages for testing message-list pagination',
+                    tags: ['demo', 'pagination', 'messages'],
+                    favorite: true,
+                },
+            },
+            createdAt: new Date(now - AX_CONVERSATION_MESSAGE_PAGINATION_COUNT * 60_000),
+            updatedAt: new Date(now),
+        };
+        axConversationSharedStorage.conversations.set(conversation.id, conversation);
+        await axConversationIndexedDbStorage.putConversation(conversation);
+    }
+    const toCreate = AX_CONVERSATION_MESSAGE_PAGINATION_COUNT - existingCount;
+    const pendingDbWrites = [];
+    let lastMessage;
+    for (let i = 0; i < toCreate; i++) {
+        const messageNumber = existingCount + i + 1;
+        const isOwn = messageNumber % 2 === 0;
+        const message = {
+            id: `msg-pag-test-${messageNumber}`,
+            conversationId: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
+            senderId: isOwn ? currentUser.id : peer.id,
+            type: 'text',
+            timestamp: new Date(now - (AX_CONVERSATION_MESSAGE_PAGINATION_COUNT - messageNumber) * 60_000),
+            payload: {
+                type: 'text',
+                text: `Pagination test message #${messageNumber} of ${AX_CONVERSATION_MESSAGE_PAGINATION_COUNT} — scroll up to load older history.`,
+            },
+            status: 'read',
+            reactions: [],
+            metadata: {},
+        };
+        registerChatMessage(message);
+        pendingDbWrites.push(axConversationIndexedDbStorage.putMessage(message));
+        lastMessage = message;
+        if (pendingDbWrites.length >= AX_PAGINATION_DB_BATCH_SIZE) {
+            await Promise.all(pendingDbWrites);
+            pendingDbWrites.length = 0;
+        }
+    }
+    if (pendingDbWrites.length > 0) {
+        await Promise.all(pendingDbWrites);
+    }
+    const conv = axConversationSharedStorage.conversations.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID);
+    if (conv && lastMessage) {
+        conv.lastMessage = lastMessage;
+        conv.lastMessageAt = lastMessage.timestamp;
+        conv.updatedAt = lastMessage.timestamp;
+        axConversationSharedStorage.conversations.set(conv.id, conv);
+        await axConversationIndexedDbStorage.putConversation(conv);
+    }
+}
 /**
  * Append demo chats/messages when the DB is too small for default page sizes (30 / 50).
  */
 async function ensurePaginationDemoData() {
     await ensureUsersPaginationDemoData();
     const conversationCount = axConversationSharedStorage.conversations.size;
-    const conv1Messages = axConversationSharedStorage.messagesByConversation.get('conv-1')?.length ?? 0;
-    if (conversationCount >= AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION && conv1Messages >= AX_CONVERSATION_MIN_MESSAGES_CONV_1) {
+    const pagTestMessages = axConversationSharedStorage.messagesByConversation.get(AX_MESSAGE_PAGINATION_CONVERSATION_ID)?.length ?? 0;
+    if (conversationCount >= AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION &&
+        pagTestMessages >= AX_CONVERSATION_MESSAGE_PAGINATION_COUNT) {
         return;
     }
     const participants = Array.from(axConversationSharedStorage.participants.values());
@@ -8822,16 +9056,19 @@ async function ensurePaginationDemoData() {
     if (!currentUser || participants.length < 2) {
         return;
     }
+    const peer = axConversationSharedStorage.participants.get('user-2') ??
+        participants.find((p) => p.id !== currentUser.id) ??
+        participants[1];
     const now = Date.now();
     if (conversationCount < AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION) {
         const toCreate = AX_CONVERSATION_MIN_CONVERSATIONS_FOR_PAGINATION - conversationCount;
         for (let i = 0; i < toCreate; i++) {
-            const peer = participants[(i % (participants.length - 1)) + 1];
+            const chatPeer = participants[(i % (participants.length - 1)) + 1];
             const conversation = {
                 id: `conv-pag-${i}`,
                 type: 'private',
-                title: `Demo Chat ${i + 1} — ${peer.name}`,
-                participants: [currentUser, { ...peer, role: 'member' }],
+                title: `Demo Chat ${i + 1} — ${chatPeer.name}`,
+                participants: [currentUser, { ...chatPeer, role: 'member' }],
                 lastMessageAt: new Date(now - i * 60_000),
                 unreadCount: 0,
                 pinned: i === 0,
@@ -8846,42 +9083,12 @@ async function ensurePaginationDemoData() {
             await axConversationIndexedDbStorage.putConversation(conversation);
         }
     }
-    if (conv1Messages < AX_CONVERSATION_MIN_MESSAGES_CONV_1) {
-        const existing = conv1Messages;
-        const toCreate = AX_CONVERSATION_MIN_MESSAGES_CONV_1 - existing;
-        let lastMessage;
-        for (let i = 0; i < toCreate; i++) {
-            const isOwn = i % 2 === 0;
-            const message = {
-                id: `msg-1-pag-${existing + i}`,
-                conversationId: 'conv-1',
-                senderId: isOwn ? 'current-user' : 'user-2',
-                type: 'text',
-                timestamp: new Date(now - (existing + i + 1) * 45_000),
-                payload: {
-                    type: 'text',
-                    text: `Pagination demo message #${existing + i + 1} — scroll up to load older history.`,
-                },
-                status: 'read',
-                reactions: [],
-                metadata: {},
-            };
-            registerChatMessage(message);
-            await axConversationIndexedDbStorage.putMessage(message);
-            lastMessage = message;
-        }
-        const conv = axConversationSharedStorage.conversations.get('conv-1');
-        if (conv && lastMessage) {
-            conv.lastMessage = lastMessage;
-            conv.lastMessageAt = lastMessage.timestamp;
-            axConversationSharedStorage.conversations.set(conv.id, conv);
-            await axConversationIndexedDbStorage.putConversation(conv);
-        }
-    }
+    await ensureMessagePaginationConversation(currentUser, peer, now);
 }
 
 var paginationDemoData = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    AX_MESSAGE_PAGINATION_CONVERSATION_ID: AX_MESSAGE_PAGINATION_CONVERSATION_ID,
     ensurePaginationDemoData: ensurePaginationDemoData
 });
 
@@ -10044,7 +10251,7 @@ class AXConversationIndexedDbConversationApi extends AXConversationApi {
         });
     }
     async getConversationMedia(conversationId, pagination = { page: 0, pageSize: 30 }) {
-        const media = getConversationMessagesNewestFirst(conversationId).filter((m) => ['image', 'video', 'file', 'audio'].includes(m.type));
+        const media = getConversationMessagesNewestFirst(conversationId).filter((m) => ['image', 'video', 'file', 'audio', 'voice', 'sticker', 'location'].includes(m.type));
         const result = paginateChatNewestFirst(media, pagination, 'message');
         return { ...result, items: result.items };
     }
@@ -14388,26 +14595,52 @@ function getMessageAudioItems(message) {
     }
     return normalizeAudioPayload(message.payload).audios;
 }
-async function fetchAllConversationMessages(messageApi, conversationId, pageSize) {
-    const collected = [];
-    let page = 0;
-    let hasMore = true;
-    let cursor;
-    while (hasMore) {
-        const result = await messageApi.getMessages(conversationId, {
-            page,
-            pageSize,
-            cursor,
-        });
-        collected.push(...result.items);
-        hasMore = result.hasMore;
-        cursor = result.nextCursor;
-        page += 1;
-        if (!result.items.length) {
-            break;
+const AX_INFO_PANEL_MEDIA_PAGE_SIZE = 50;
+async function fetchConversationMediaPage(conversationApi, conversationId, page, pageSize = AX_INFO_PANEL_MEDIA_PAGE_SIZE, cursor) {
+    const result = await conversationApi.getConversationMedia(conversationId, {
+        page,
+        pageSize,
+        cursor,
+    });
+    const items = [];
+    const seenIds = new Set();
+    for (const item of result.items) {
+        const message = item;
+        if (message?.id && !seenIds.has(message.id)) {
+            seenIds.add(message.id);
+            items.push(message);
+        }
+    }
+    return {
+        items,
+        hasMore: result.hasMore,
+        nextCursor: result.nextCursor,
+        page,
+    };
+}
+/** @deprecated Use {@link fetchConversationMediaPage} — loads only the first page. */
+async function fetchConversationMediaMessages(conversationApi, conversationId, pageSize) {
+    const page = await fetchConversationMediaPage(conversationApi, conversationId, 0, pageSize);
+    return page.items.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+}
+/** Merge media API results with in-memory messages needed for link/sticker/voice/location tabs. */
+function mergeInfoPanelMessages(mediaMessages, supplemental) {
+    const byId = new Map();
+    for (const message of mediaMessages) {
+        byId.set(message.id, message);
+    }
+    for (const message of supplemental) {
+        if (!byId.has(message.id)) {
+            byId.set(message.id, message);
         }
     }
-    return collected.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+    return Array.from(byId.values()).sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+}
+function filterSupplementalInfoPanelMessages(messages) {
+    return messages.filter((message) => message.type === 'voice' ||
+        message.type === 'sticker' ||
+        message.type === 'location' ||
+        (message.type === 'text' && messageContainsLink(message)));
 }
 
 /**
@@ -14433,6 +14666,11 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
         ...(ngDevMode ? [{ debugName: "conversationMessages" }] : /* istanbul ignore next */ []));
         this.loadingMessages = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loadingMessages" }] : /* istanbul ignore next */ []));
+        this.loadingMoreMedia = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingMoreMedia" }] : /* istanbul ignore next */ []));
+        this.mediaHasMore = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaHasMore" }] : /* istanbul ignore next */ []));
+        this.mediaNextPage = 1;
         this.memberSearchQuery = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "memberSearchQuery" }] : /* istanbul ignore next */ []));
         this.archived = false;
@@ -14566,15 +14804,17 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
     }
     async loadConversationMessages() {
         this.loadingMessages.set(true);
+        this.mediaNextPage = 1;
+        this.mediaNextCursor = undefined;
+        this.mediaHasMore.set(false);
         try {
-            if (this.conversationService.activeConversationId() === this.conversation.id) {
-                const activeMessages = this.conversationService.activeMessages();
-                if (activeMessages.length > 0) {
-                    this.conversationMessages.set(activeMessages);
-                }
-            }
-            const messages = await fetchAllConversationMessages(this.conversationService.messageApi, this.conversation.id, 30);
-            this.conversationMessages.set(messages);
+            const page = await fetchConversationMediaPage(this.conversationService.conversationApi, this.conversation.id, 0);
+            this.mediaHasMore.set(page.hasMore);
+            this.mediaNextCursor = page.nextCursor;
+            const supplemental = this.conversationService.activeConversationId() === this.conversation.id
+                ? filterSupplementalInfoPanelMessages(this.conversationService.activeMessages())
+                : [];
+            this.conversationMessages.set(mergeInfoPanelMessages(page.items, supplemental));
         }
         catch (error) {
             console.error('Failed to load conversation media messages:', error);
@@ -14583,6 +14823,25 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
             this.loadingMessages.set(false);
         }
     }
+    async loadMoreMedia() {
+        if (!this.mediaHasMore() || this.loadingMoreMedia() || this.loadingMessages()) {
+            return;
+        }
+        this.loadingMoreMedia.set(true);
+        try {
+            const page = await fetchConversationMediaPage(this.conversationService.conversationApi, this.conversation.id, this.mediaNextPage, undefined, this.mediaNextCursor);
+            this.mediaHasMore.set(page.hasMore);
+            this.mediaNextCursor = page.nextCursor;
+            this.mediaNextPage += 1;
+            this.conversationMessages.set(mergeInfoPanelMessages(page.items, this.conversationMessages()));
+        }
+        catch (error) {
+            console.error('Failed to load more conversation media:', error);
+        }
+        finally {
+            this.loadingMoreMedia.set(false);
+        }
+    }
     isPrivateConversation() {
         return this.conversation.type === 'private';
     }
@@ -14630,6 +14889,9 @@ class AXConversationInfoPanelComponent extends AXClosableComponent {
             messages: this.conversationMessages(),
             conversation: this.conversation,
             conversationService: this.conversationService,
+            hasMoreMedia: this.mediaHasMore(),
+            loadingMoreMedia: this.loadingMoreMedia(),
+            onLoadMoreMedia: () => this.loadMoreMedia(),
             onBack: () => this.closeMediaView(),
         };
     }
@@ -15086,6 +15348,12 @@ class AXConversationInfoMediaViewComponent {
         this.conversation = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "conversation" }] : /* istanbul ignore next */ []));
         this.conversationServiceInput = input.required({ ...(ngDevMode ? { debugName: "conversationServiceInput" } : /* istanbul ignore next */ {}), alias: 'conversationService' });
+        this.hasMoreMedia = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMoreMedia" }] : /* istanbul ignore next */ []));
+        this.loadingMoreMedia = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingMoreMedia" }] : /* istanbul ignore next */ []));
+        this.onLoadMoreMedia = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "onLoadMoreMedia" }] : /* istanbul ignore next */ []));
         /** Callback for lazy outlet wiring (alternative to the `back` output). */
         this.onBack = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "onBack" }] : /* istanbul ignore next */ []));
@@ -15137,21 +15405,27 @@ class AXConversationInfoMediaViewComponent {
         this.onBack()?.();
         this.back.emit();
     }
+    onScrollThreshold(edge) {
+        if (edge === 'bottom' && this.hasMoreMedia() && !this.loadingMoreMedia()) {
+            void this.onLoadMoreMedia()?.();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoMediaViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoMediaViewComponent, isStandalone: true, selector: "ax-conversation-info-media-view", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, conversationServiceInput: { classPropertyName: "conversationServiceInput", publicName: "conversationService", isSignal: true, isRequired: true, transformFunction: null }, onBack: { classPropertyName: "onBack", publicName: "onBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, ngImport: i0, template: "<div class=\"tg-media-view\">\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"getRendererComponent(message)\"\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-info-media-view{display:block;width:100%}ax-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;overflow-y:auto;overscroll-behavior:contain;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;border-radius:0}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}ax-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}ax-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}ax-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}ax-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationImageAttachmentComponent, selector: "ax-conversation-image-attachment", inputs: ["item", "alt"] }, { kind: "component", type: AXConversationVideoAttachmentComponent, selector: "ax-conversation-video-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationAudioAttachmentComponent, selector: "ax-conversation-audio-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoMediaViewComponent, isStandalone: true, selector: "ax-conversation-info-media-view", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, conversationServiceInput: { classPropertyName: "conversationServiceInput", publicName: "conversationService", isSignal: true, isRequired: true, transformFunction: null }, hasMoreMedia: { classPropertyName: "hasMoreMedia", publicName: "hasMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreMedia: { classPropertyName: "loadingMoreMedia", publicName: "loadingMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onLoadMoreMedia: { classPropertyName: "onLoadMoreMedia", publicName: "onLoadMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onBack: { classPropertyName: "onBack", publicName: "onBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, ngImport: i0, template: "<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"getRendererComponent(message)\"\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-info-media-view{display:block;width:100%}ax-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;overflow-y:auto;overscroll-behavior:contain;max-height:min(85vh,40rem)}ax-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;border-radius:0}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}ax-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}ax-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column}ax-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}ax-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}ax-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}ax-conversation-info-media-view .tg-media-view__loading-more{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationImageAttachmentComponent, selector: "ax-conversation-image-attachment", inputs: ["item", "alt"] }, { kind: "component", type: AXConversationVideoAttachmentComponent, selector: "ax-conversation-video-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationAudioAttachmentComponent, selector: "ax-conversation-audio-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoMediaViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-conversation-info-media-view', encapsulation: ViewEncapsulation.None, imports: [
                         CommonModule,
                         AXConversationRegistryComponentOutletComponent,
+                        AXConversationInfiniteScrollDirective,
                         AXDecoratorModule,
                         AXTranslationModule,
                         AXConversationImageAttachmentComponent,
                         AXConversationVideoAttachmentComponent,
                         AXConversationAudioAttachmentComponent,
-                    ], template: "<div class=\"tg-media-view\">\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"getRendererComponent(message)\"\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-info-media-view{display:block;width:100%}ax-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;max-height:min(85vh,40rem)}ax-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;overflow-y:auto;overscroll-behavior:contain;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;border-radius:0}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}ax-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}ax-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}ax-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}ax-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}ax-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: true }] }], conversationServiceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversationService", required: true }] }], onBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }] } });
+                    ], template: "<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [component]=\"getRendererComponent(message)\"\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-info-media-view{display:block;width:100%}ax-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;overflow-y:auto;overscroll-behavior:contain;max-height:min(85vh,40rem)}ax-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}ax-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__title{margin:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}ax-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}ax-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}ax-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;border-radius:0}ax-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}ax-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}ax-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column}ax-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}ax-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}ax-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}ax-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}ax-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}ax-conversation-info-media-view .tg-media-view__loading-more{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: true }] }], conversationServiceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversationService", required: true }] }], hasMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMoreMedia", required: false }] }], loadingMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMoreMedia", required: false }] }], onLoadMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMoreMedia", required: false }] }], onBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 var conversationInfoMediaView_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -15168,6 +15442,7 @@ class AXConversationInfoBarSearchComponent {
         this.destroyRef = inject(DestroyRef);
         this.infoBarService = inject(AXConversationInfoBarService);
         this.conversationService = inject(AXConversationService);
+        this.config = inject(AX_CONVERSATION_CONFIG);
         /** Conversation input */
         this.conversation = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "conversation" }] : /* istanbul ignore next */ []));
@@ -15180,49 +15455,53 @@ class AXConversationInfoBarSearchComponent {
         this.resultsCount = this.infoBarService.searchResultsCount;
         /** Current index from service */
         this.currentIndex = this.infoBarService.currentSearchIndex;
-        /** Messages from conversation */
-        this.messages = computed(() => {
-            // Get messages from active conversation
-            const activeConv = this.conversationService.activeConversation();
-            if (activeConv?.id === this.conversation().id) {
-                return this.conversationService.activeMessages();
-            }
-            return [];
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const query = this.searchQuery();
-            if (query) {
-                this.performSearch(query);
-            }
-            else {
-                this.infoBarService.setSearchResults(0, 0);
-            }
-        });
+        this.searchResults = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
+        this.searchRequestId = 0;
         this.destroyRef.onDestroy(() => {
             if (this.scrollTimer)
                 clearTimeout(this.scrollTimer);
+            if (this.searchDebounceTimer)
+                clearTimeout(this.searchDebounceTimer);
         });
     }
     /** Handle search input change */
     onSearchChange(value) {
         this.infoBarService.setSearchQuery(value);
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        const trimmed = value.trim();
+        if (!trimmed) {
+            this.searchResults.set([]);
+            this.infoBarService.setSearchResults(0, 0);
+            return;
+        }
+        this.searchDebounceTimer = setTimeout(() => {
+            this.searchDebounceTimer = undefined;
+            void this.performSearch(trimmed);
+        }, this.config.debounceSearch ?? 300);
     }
-    /** Perform search in messages */
-    performSearch(query) {
-        const messages = this.messages();
-        const lowerQuery = query.toLowerCase();
-        const results = messages.filter((msg) => {
-            if (msg.type === 'text') {
-                const text = msg.payload?.text || '';
-                return text.toLowerCase().includes(lowerQuery);
+    /** Perform server-side search in messages */
+    async performSearch(query) {
+        const requestId = ++this.searchRequestId;
+        try {
+            const results = await this.conversationService.searchMessages(this.conversation().id, query);
+            if (requestId !== this.searchRequestId) {
+                return;
+            }
+            this.searchResults.set(results);
+            this.infoBarService.setSearchResults(results.length, 0);
+            if (results.length > 0) {
+                this.scrollToResult(results[0].id);
+            }
+        }
+        catch (error) {
+            console.error('Failed to search messages:', error);
+            if (requestId === this.searchRequestId) {
+                this.searchResults.set([]);
+                this.infoBarService.setSearchResults(0, 0);
             }
-            return false;
-        });
-        this.infoBarService.setSearchResults(results.length, 0);
-        // Scroll to first result if exists
-        if (results.length > 0) {
-            this.scrollToResult(results[0].id);
         }
     }
     /** Navigate to next result */
@@ -15237,23 +15516,11 @@ class AXConversationInfoBarSearchComponent {
     }
     /** Scroll to current search result */
     scrollToCurrentResult() {
-        const query = this.searchQuery();
+        const results = this.searchResults();
         const currentIdx = this.currentIndex();
-        const messages = this.messages();
-        const lowerQuery = query.toLowerCase();
-        // Find the nth matching message
-        let matchCount = 0;
-        for (const msg of messages) {
-            if (msg.type === 'text') {
-                const text = msg.payload?.text || '';
-                if (text.toLowerCase().includes(lowerQuery)) {
-                    if (matchCount === currentIdx) {
-                        this.scrollToResult(msg.id);
-                        break;
-                    }
-                    matchCount++;
-                }
-            }
+        const message = results[currentIdx];
+        if (message) {
+            this.scrollToResult(message.id);
         }
     }
     scrollToResult(messageId) {
@@ -16969,7 +17236,7 @@ function createProviders(options, includeServices) {
         if (realtimeApi) {
             providers.push({ provide: AXConversationRealtimeApi, useClass: realtimeApi });
         }
-        providers.push(AXConversationService, AXConversationComposerService, AXConversationInfoBarService, AXConversationMessageListService, AXConversationSidebarService);
+        providers.push(AXConversationService, AXConversationApiLoggerService, AXConversationComposerService, AXConversationInfoBarService, AXConversationMessageListService, AXConversationSidebarService);
     }
     if (registry) {
         providers.push({ provide: AX_CONVERSATION_REGISTRY_CONFIG, useValue: registry });
@@ -17343,5 +17610,5 @@ function getErrorMessage(code, params) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXConversationAiResponderService, AXConversationApi, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationInfoMediaViewComponent, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryService, AXConversationService, AXConversationSharedStorage, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_ALL_CONVERSATION_COMPOSER_TABS, AX_ALL_CONVERSATION_MEDIA_PICKERS, AX_CONVERSATION_AI_API_KEY, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, 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_CONFIG, AX_CONVERSATION_CONNECTION_ERRORS, AX_CONVERSATION_CONVERSATION_AVATAR_COMPONENT, AX_CONVERSATION_CURSOR_PREFIX, AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_ERRORS, AX_CONVERSATION_ERROR_HANDLER_CONFIG, AX_CONVERSATION_ERROR_MESSAGES, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_CATALOG, AX_CONVERSATION_FILE_ERRORS, AX_CONVERSATION_FILE_PRESENTATION, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_FILE_TYPES_READY, AX_CONVERSATION_IMAGE_CATALOG, AX_CONVERSATION_IMAGE_PRESENTATION, 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_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_ERRORS, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_CURSOR_PREFIX, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_REGISTRY_CONFIG, AX_CONVERSATION_STICKER_API_KEY, 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_URL_ERRORS, AX_CONVERSATION_USER_AVATAR_COMPONENT, AX_CONVERSATION_USER_ERRORS, AX_CONVERSATION_VIDEO_CATALOG, AX_CONVERSATION_VIDEO_PRESENTATION, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_CATALOG, AX_CONVERSATION_VOICE_PRESENTATION, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, abortPickerUploads, applyAudioLocalPreview, applyConversationFilters, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, axConversationIndexedDbStorage, axConversationSharedStorage, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, encodeConversationCursor, encodeMessageCursor, ensurePaginationDemoData, fetchAllConversationMessages, fileItemFromUpload, filterMessagesByMediaCategory, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationLastActivity, getConversationMediaCategories, getConversationMessagesNewestFirst, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, getSortedConversationsForInbox, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMediaPickerEnabled, isMessageDeliveryPending, isNonPersistableMediaUrl, isPickerItemReadyToSend, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAllConversationMessageIndexes, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessagePayload, normalizeMessagePayloadAsync, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, paginateChatNewestFirst, paginateChatOldestFirst, parseChatCursor, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, registerChatMessage, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMediaPickers, resolveConversationMessageFileType, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, seedPickerInitialFiles, seedSharedStorageInitialData, shouldUseUserAvatarForConversation, sortConversationMessageIds, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, unregisterChatMessage, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
+export { AXConversationAiResponderService, AXConversationApi, AXConversationApiLoggerService, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationIndexedDbConversationApi, AXConversationIndexedDbMessageAiApi, AXConversationIndexedDbMessageApi, AXConversationIndexedDbRealtimeApi, AXConversationIndexedDbStorage, AXConversationIndexedDbStores, AXConversationIndexedDbUserApi, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationInfoMediaViewComponent, AXConversationInfoPanelComponent, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryService, AXConversationService, AXConversationSharedStorage, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_ALL_CONVERSATION_COMPOSER_TABS, AX_ALL_CONVERSATION_MEDIA_PICKERS, AX_CONVERSATION_AI_API_KEY, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, 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_CONFIG, AX_CONVERSATION_CONNECTION_ERRORS, AX_CONVERSATION_CONVERSATION_AVATAR_COMPONENT, AX_CONVERSATION_CURSOR_PREFIX, AX_CONVERSATION_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_ERRORS, AX_CONVERSATION_ERROR_HANDLER_CONFIG, AX_CONVERSATION_ERROR_MESSAGES, AX_CONVERSATION_FALLBACK_RENDERER, AX_CONVERSATION_FILE_CATALOG, AX_CONVERSATION_FILE_ERRORS, AX_CONVERSATION_FILE_PRESENTATION, AX_CONVERSATION_FILE_RENDERER, AX_CONVERSATION_FILE_TYPES_READY, AX_CONVERSATION_IMAGE_CATALOG, AX_CONVERSATION_IMAGE_PRESENTATION, 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_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_ERRORS, AX_CONVERSATION_LOCATION_RENDERER, AX_CONVERSATION_MESSAGE_CURSOR_PREFIX, AX_CONVERSATION_MESSAGE_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_REGISTRY_CONFIG, AX_CONVERSATION_STICKER_API_KEY, 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_URL_ERRORS, AX_CONVERSATION_USER_AVATAR_COMPONENT, AX_CONVERSATION_USER_ERRORS, AX_CONVERSATION_VIDEO_CATALOG, AX_CONVERSATION_VIDEO_PRESENTATION, AX_CONVERSATION_VIDEO_RENDERER, AX_CONVERSATION_VOICE_CATALOG, AX_CONVERSATION_VOICE_PRESENTATION, AX_CONVERSATION_VOICE_RENDERER, AX_DEFAULT_CONVERSATION_CONFIG, AX_MESSAGE_PAGINATION_CONVERSATION_ID, abortPickerUploads, applyAudioLocalPreview, applyConversationFilters, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, axConversationIndexedDbStorage, axConversationSharedStorage, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, encodeConversationCursor, encodeMessageCursor, ensurePaginationDemoData, fetchConversationMediaMessages, fetchConversationMediaPage, fileItemFromUpload, filterMessagesByMediaCategory, filterSupplementalInfoPanelMessages, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationLastActivity, getConversationMediaCategories, getConversationMessagesNewestFirst, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, getSortedConversationsForInbox, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMediaPickerEnabled, isMessageDeliveryPending, isNonPersistableMediaUrl, isPickerItemReadyToSend, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeInfoPanelMessages, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAllConversationMessageIndexes, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessagePayload, normalizeMessagePayloadAsync, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, paginateChatNewestFirst, paginateChatOldestFirst, parseChatCursor, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, registerChatMessage, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMediaPickers, resolveConversationMessageFileType, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, seedPickerInitialFiles, seedSharedStorageInitialData, shouldUseUserAvatarForConversation, sortConversationMessageIds, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, unregisterChatMessage, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
 //# sourceMappingURL=acorex-components-conversation.mjs.map