@acorex/components 22.1.0-next.14 → 22.1.0-next.16

package/fesm2022/acorex-components-conversation.mjs

@@ -51,8 +51,11 @@ import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
 
 /**
+
  * Shared API Types
+
  * Common types used across all API services
+
  */
 
 /**
@@ -61,18 +64,12 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 
 /**
-
  * Default Configuration Values
-
  * Centralized defaults to avoid magic numbers throughout the codebase
-
  */
 /**
-
  * Default conversation configuration
-
  * All values are explicitly defined here for easy maintenance and documentation
-
  */
 const AX_DEFAULT_CONVERSATION_CONFIG = {
     // Pagination
@@ -83,7 +80,8 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     infiniteScrollThreshold: 200,
     // Timeout Durations (milliseconds)
     typingIndicatorTimeout: 3000,
-    typingIndicatorThrottle: 1000,
+    typingIndicatorThrottle: 3000,
+    typingDisplayDuration: 4000,
     messageHighlightDuration: 2000,
     debounceSearch: 300,
     // Message Storage Limits
@@ -102,7 +100,7 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     maxFilesPerMessage: 3,
     // Intersection Observer
     messageReadThreshold: 0.3,
-    messageReadDebounce: 400,
+    messageReadDebounce: 3000,
     markConversationReadOnSelect: true,
     // Message list
     messageListBackground: '',
@@ -112,15 +110,10 @@ const AX_DEFAULT_CONVERSATION_CONFIG = {
     debugApiLogging: false,
 };
 /**
-
  * Helper function to merge user config with defaults
-
  * Properly handles array merging to avoid reference issues
-
  * @param userConfig - User-provided configuration
-
  * @returns Merged configuration with all required fields
-
  */
 function mergeWithDefaults(userConfig) {
     if (!userConfig) {
@@ -525,220 +518,87 @@ function resolveConversationMessageFileType(type, fileType) {
     return fileType ?? AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE[type];
 }
 
+/**
+ * Message Utilities Service
+ * Helper functions for message formatting and display
+ */
 class AXConversationMessageUtilsService {
-    /**
-     * Normalize optional avatar/icon values so empty or whitespace-only strings
-     * are treated as missing data.
-     */
-    static normalizeOptionalMediaValue(value) {
-        if (typeof value !== 'string') {
-            return undefined;
-        }
-        const normalized = value.trim();
-        return normalized.length > 0 ? normalized : undefined;
-    }
-    /**
-     * Get conversation avatar image URL.
-     */
-    static getConversationAvatar(conversation) {
-        return AXConversationMessageUtilsService.normalizeOptionalMediaValue(conversation.avatar);
+    static getInitials(name) {
+        const parts = name.trim().split(/\s+/).filter(Boolean);
+        if (parts.length === 0)
+            return '?';
+        if (parts.length === 1)
+            return parts[0].charAt(0).toUpperCase();
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
     }
-    /**
-     * Font Awesome icon class(es) for a conversation when there is no avatar image.
-     */
-    static getConversationAvatarIcon(conversation) {
-        if (AXConversationMessageUtilsService.getConversationAvatar(conversation)) {
-            return undefined;
-        }
-        const explicit = AXConversationMessageUtilsService.normalizeOptionalMediaValue(conversation.icon);
-        if (explicit) {
-            return explicit;
-        }
-        if (conversation.type === 'group') {
-            return AX_CONVERSATION_DEFAULT_GROUP_ICON;
+    static getMessageText(message) {
+        const payload = message.payload;
+        if (!payload)
+            return '';
+        if (payload.type === 'text' && 'text' in payload && typeof payload.text === 'string') {
+            return payload.text;
         }
-        if (conversation.type === 'private' || conversation.type === 'bot') {
-            return AX_CONVERSATION_DEFAULT_USER_ICON;
+        if ('caption' in payload && typeof payload.caption === 'string') {
+            return payload.caption;
         }
-        return undefined;
+        return '';
     }
-    /**
-     * Font Awesome icon for a participant when there is no avatar image.
-     */
-    static getParticipantAvatarIcon(participant) {
-        if (AXConversationMessageUtilsService.normalizeOptionalMediaValue(participant?.avatar)) {
-            return undefined;
+    static getPreviewText(message, maxLength) {
+        const type = message.type;
+        let text = AXConversationMessageUtilsService.getMessageText(message);
+        if (maxLength && text.length > maxLength) {
+            text = text.substring(0, maxLength) + '...';
         }
-        const explicit = AXConversationMessageUtilsService.normalizeOptionalMediaValue(participant?.icon);
-        if (explicit) {
-            return explicit;
+        switch (type) {
+            case 'image':
+                return { value: text, type: 'image', icon: 'fa-light fa-image' };
+            case 'video':
+                return { value: text, type: 'video', icon: 'fa-light fa-video' };
+            case 'audio':
+            case 'voice':
+                return { value: text, type: type, icon: 'fa-light fa-microphone' };
+            case 'file':
+                return { value: text, type: 'file', icon: 'fa-light fa-file' };
+            case 'location':
+                return { value: text, type: 'location', icon: 'fa-light fa-location-dot' };
+            case 'sticker':
+                return { value: text, type: 'sticker', icon: 'fa-light fa-note-sticky' };
+            default:
+                return { value: text, type: 'text', icon: 'fa-light fa-message' };
         }
-        return AX_CONVERSATION_DEFAULT_USER_ICON;
     }
-    /**
-     * Get sender name from message
-     */
+    static isOwnMessage(message, currentUserId) {
+        return message.senderId === currentUserId;
+    }
     static getSenderName(message, conversation) {
         const participant = conversation.participants.find((p) => p.id === message.senderId);
-        return participant?.name || translateSync('@acorex:chat.fallbacks.unknown-user');
+        return participant?.name ?? translateSync('@acorex:chat.fallbacks.unknown-user');
     }
-    /**
-     * Get sender avatar image URL (takes precedence over {@link getSenderAvatarIcon}).
-     */
     static getSenderAvatar(message, conversation) {
-        const participant = conversation.participants.find((p) => p.id === message.senderId);
-        return AXConversationMessageUtilsService.normalizeOptionalMediaValue(participant?.avatar);
+        return conversation.participants.find((p) => p.id === message.senderId)?.avatar;
     }
-    /**
-     * Font Awesome icon class(es) for the sender when there is no avatar image:
-     * participant `icon` first, then conversation-level `icon`.
-     */
     static getSenderAvatarIcon(message, conversation) {
-        const participant = conversation.participants.find((p) => p.id === message.senderId);
-        if (AXConversationMessageUtilsService.normalizeOptionalMediaValue(participant?.avatar)) {
-            return undefined;
-        }
-        return (AXConversationMessageUtilsService.getParticipantAvatarIcon(participant) ??
-            AXConversationMessageUtilsService.getConversationAvatarIcon(conversation));
+        return conversation.participants.find((p) => p.id === message.senderId)?.icon;
     }
-    /**
-     * Get initials from name
-     */
-    static getInitials(name) {
-        if (!name)
-            return '?';
-        return name
-            .split(' ')
-            .map((n) => n[0])
-            .join('')
-            .toUpperCase()
-            .substring(0, 2);
+    static getConversationAvatar(conversation) {
+        const avatar = conversation.avatar?.trim();
+        return avatar && avatar.length > 0 ? avatar : undefined;
     }
-    /**
-     * Type guard for text payload
-     */
-    static isTextPayload(payload) {
-        return 'text' in payload && typeof payload.text === 'string';
+    static getConversationAvatarIcon(conversation) {
+        const icon = conversation.icon?.trim();
+        return icon && icon.length > 0 ? icon : undefined;
     }
-    /**
-     * Get message text content
-     */
-    static getMessageText(message) {
-        if (message.type === 'text' && AXConversationMessageUtilsService.isTextPayload(message.payload)) {
-            return message.payload.text;
-        }
-        return `[${message.type}]`;
+    static getStatusIcon(message) {
+        return AXConversationMessageUtilsService.getDeliveryStatusIcon(message.status);
     }
-    /**
-     * Format message preview text
-     */
-    static getPreviewText(message, maxLength = 50) {
-        // Handle different message types
-        switch (message.type) {
-            case 'text': {
-                const textPayload = message.payload;
-                const text = textPayload.text || '';
-                const truncatedText = text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
-                return {
-                    value: truncatedText,
-                    type: 'text',
-                    icon: 'fa-light fa-message',
-                };
-            }
-            case 'image': {
-                const imagePayload = message.payload;
-                const images = Array.isArray(imagePayload.images) ? imagePayload.images : [];
-                const first = images[0];
-                const label = imagePayload.caption?.trim() ||
-                    (images.length > 1 ? `${images.length} images` : '');
-                return {
-                    value: label || first?.thumbnailUrl || first?.url || '',
-                    type: 'image',
-                    icon: 'fa-light fa-image',
-                };
-            }
-            case 'video': {
-                const videoPayload = message.payload;
-                const videos = Array.isArray(videoPayload.videos) ? videoPayload.videos : [];
-                const first = videos[0];
-                const label = videoPayload.caption?.trim() ||
-                    (videos.length > 1 ? `${videos.length} videos` : '');
-                return {
-                    value: label || first?.url || '',
-                    type: 'video',
-                    icon: 'fa-light fa-video',
-                };
-            }
-            case 'audio': {
-                const audioPayload = message.payload;
-                const audios = Array.isArray(audioPayload.audios) ? audioPayload.audios : [];
-                const names = audios.map((a) => a.title).filter(Boolean).join(', ');
-                const first = audios[0];
-                const label = audioPayload.caption?.trim() ||
-                    (audios.length > 1 ? `${audios.length} audio files` : names);
-                return {
-                    value: label || first?.url || '',
-                    type: 'audio',
-                    icon: 'fa-light fa-music',
-                };
-            }
-            case 'voice': {
-                const voicePayload = message.payload;
-                return {
-                    value: voicePayload.url || '',
-                    type: 'voice',
-                    icon: 'fa-light fa-microphone',
-                };
-            }
-            case 'file': {
-                const filePayload = message.payload;
-                const files = Array.isArray(filePayload.files) ? filePayload.files : [];
-                const names = files.map((f) => f.name).join(', ');
-                const label = filePayload.caption?.trim() ||
-                    (files.length > 1 ? `${files.length} files` : names);
-                return {
-                    value: label || names,
-                    type: 'file',
-                    icon: 'fa-light fa-file',
-                };
-            }
-            case 'location': {
-                const locationPayload = message.payload;
-                return {
-                    value: locationPayload.latitude && locationPayload.longitude
-                        ? `${locationPayload.latitude},${locationPayload.longitude}`
-                        : '',
-                    type: 'location',
-                    icon: 'fa-light fa-location-dot',
-                };
-            }
-            case 'sticker': {
-                const stickerPayload = message.payload;
-                return {
-                    value: stickerPayload.url || '',
-                    type: 'sticker',
-                    icon: 'fa-light fa-face-smile',
-                };
-            }
-            default:
-                return {
-                    value: '',
-                    type: message.type,
-                    icon: 'fa-light fa-message',
-                };
+    static getConversationStatus(conversation, presence) {
+        if (conversation.type !== 'private') {
+            return undefined;
         }
+        return presence?.status;
     }
-    /**
-     * Check if message is from current user
-     */
-    static isOwnMessage(message, currentUserId) {
-        return message.senderId === currentUserId;
-    }
-    /**
-     * Get message status icon class (Font Awesome)
-     */
-    static getStatusIcon(message) {
-        switch (message.status) {
+    static getDeliveryStatusIcon(status) {
+        switch (status) {
             case 'sending':
                 return 'fa-light fa-clock';
             case 'sent':
@@ -750,67 +610,34 @@ class AXConversationMessageUtilsService {
             case 'failed':
                 return 'fa-light fa-circle-exclamation';
             default:
-                return 'fa-light fa-check';
-        }
-    }
-    /**
-     * Check if message should show avatar
-     */
-    static shouldShowAvatar(message, previousMessage, conversation) {
-        // Always show avatar for group conversations
-        if (conversation.type === 'group' || conversation.type === 'channel') {
-            // Don't show if same sender as previous message within 5 minutes
-            if (previousMessage && previousMessage.senderId === message.senderId) {
-                const timeDiff = message.timestamp.getTime() - previousMessage.timestamp.getTime();
-                return timeDiff > 5 * 60 * 1000; // 5 minutes
-            }
-            return true;
+                return '';
         }
-        return false;
     }
-    /**
-     * Group messages by sender for consecutive messages
-     */
-    static shouldGroupWithPrevious(message, previousMessage) {
+    static shouldGroupMessages(message, previousMessage) {
         if (!previousMessage)
             return false;
-        // Same sender
         if (message.senderId !== previousMessage.senderId)
             return false;
-        // Within 5 minutes
         const timeDiff = message.timestamp.getTime() - previousMessage.timestamp.getTime();
         return timeDiff < 5 * 60 * 1000;
     }
-    /**
-     * Get conversation status for avatar (private conversations only)
-     */
-    static getConversationStatus(conversation) {
-        if (conversation.type === 'private') {
-            return conversation.status.presence;
-        }
-        return undefined;
+    static getUserPresenceStatus(presence) {
+        return presence?.status;
     }
-    /**
-     * Get typing indicator text for conversation
-     */
-    static getTypingText(conversation) {
-        const typingUsers = conversation.status.typingUsers;
-        if (typingUsers.length === 0)
+    static getTypingText(conversation, typingUserIds) {
+        if (typingUserIds.length === 0)
             return '';
         if (conversation.type === 'private') {
             return translateSync('@acorex:chat.status.typing');
         }
-        const firstUser = conversation.participants.find((p) => p.id === typingUsers[0]);
-        if (typingUsers.length === 1) {
+        const firstUser = conversation.participants.find((p) => p.id === typingUserIds[0]);
+        if (typingUserIds.length === 1) {
             return translateSync('@acorex:chat.status.user-is-typing', {
                 params: { userName: firstUser?.name || translateSync('@acorex:chat.fallbacks.someone') },
             });
         }
-        return translateSync('@acorex:chat.status.people-typing', { params: { count: typingUsers.length } });
+        return translateSync('@acorex:chat.status.people-typing', { params: { count: typingUserIds.length } });
     }
-    /**
-     * Format last seen time
-     */
     static formatLastSeen(date) {
         const now = new Date();
         const diff = now.getTime() - date.getTime();
@@ -825,24 +652,26 @@ class AXConversationMessageUtilsService {
             return translateSync('@acorex:chat.time.days-ago', { params: { count: Math.floor(seconds / 86400) } });
         return date.toLocaleDateString();
     }
-    /**
-     * Get conversation subtitle (status or member count)
-     */
-    static getConversationSubtitle(conversation) {
-        if (conversation.status.isTyping) {
-            return AXConversationMessageUtilsService.getTypingText(conversation);
+    static getPrivateChatSubtitle(conversation, presence, currentUserId) {
+        const peerPresence = presence;
+        if (peerPresence?.status === 'online') {
+            return translateSync('@acorex:chat.status.online');
+        }
+        if (peerPresence?.lastSeen) {
+            return translateSync('@acorex:chat.status.last-seen', {
+                params: { value: AXConversationMessageUtilsService.formatLastSeen(peerPresence.lastSeen) },
+            });
+        }
+        return translateSync('@acorex:chat.status.offline');
+    }
+    static getConversationSubtitle(conversation, options) {
+        const typingUserIds = options?.typingUserIds ?? [];
+        if (typingUserIds.length > 0) {
+            return AXConversationMessageUtilsService.getTypingText(conversation, typingUserIds);
         }
         switch (conversation.type) {
             case 'private':
-                if (conversation.status.presence === 'online') {
-                    return translateSync('@acorex:chat.status.online');
-                }
-                if (conversation.status.lastSeen) {
-                    return translateSync('@acorex:chat.status.last-seen', {
-                        params: { value: AXConversationMessageUtilsService.formatLastSeen(conversation.status.lastSeen) },
-                    });
-                }
-                return translateSync('@acorex:chat.status.offline');
+                return AXConversationMessageUtilsService.getPrivateChatSubtitle(conversation, options?.peerPresence, options?.currentUserId);
             case 'group':
                 return translateSync('@acorex:chat.members.count', { params: { count: conversation.participants.length } });
             case 'channel':
@@ -1473,6 +1302,24 @@ async function toUploaderReference$2(payload) {
     return mod.toUploaderReference(payload);
 }
 
+/**
+ * Per-user preferences for a specific conversation (mute, notifications, etc.).
+ * Stored on the user account, keyed by conversation ID — not on the room entity.
+ */
+const AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES = {
+    notifications: true,
+    showPreview: true,
+};
+
+function mergeRoomPreferences(preferences) {
+    return {
+        ...AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES,
+        ...preferences,
+        notifications: preferences?.notifications ?? AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES.notifications,
+        showPreview: preferences?.showPreview ?? AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES.showPreview,
+    };
+}
+
 /**
  * In-memory conversation and message graph (signal-based).
  * Plain class — not DI-registered; instantiated by `AXConversationService`.
@@ -1485,6 +1332,9 @@ class AXConversationState {
     bumpInboxRevision() {
         this._inboxRevision.update((revision) => revision + 1);
     }
+    bumpTypingRevision() {
+        this._typingRevision.update((revision) => revision + 1);
+    }
     constructor(config) {
         this.config = config;
         this._conversations = signal(new Map(), /* @ts-ignore */
@@ -1493,15 +1343,34 @@ class AXConversationState {
         ...(ngDevMode ? [{ debugName: "_messages" }] : /* istanbul ignore next */ []));
         this._conversationMessages = signal(new Map(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_conversationMessages" }] : /* istanbul ignore next */ []));
-        /** Bumped on every inbox mutation so derived lists always recompute. */
+        this._userPresence = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_userPresence" }] : /* istanbul ignore next */ []));
+        this._typingExpiry = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_typingExpiry" }] : /* istanbul ignore next */ []));
+        this._roomPreferences = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_roomPreferences" }] : /* istanbul ignore next */ []));
+        this._presenceTimeTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_presenceTimeTick" }] : /* istanbul ignore next */ []));
+        this._typingRevision = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_typingRevision" }] : /* istanbul ignore next */ []));
         this._inboxRevision = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_inboxRevision" }] : /* istanbul ignore next */ []));
         this.conversations = computed(() => {
             this._inboxRevision();
-            const convMap = this._conversations();
-            return Array.from(convMap.values());
+            return Array.from(this._conversations().values());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "conversations" }] : /* istanbul ignore next */ []));
+        this.userPresenceMap = computed(() => this._userPresence(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "userPresenceMap" }] : /* istanbul ignore next */ []));
+        this.presenceTimeTick = this._presenceTimeTick.asReadonly();
+        this.typingRevision = computed(() => {
+            this._typingRevision();
+            return this._typingExpiry();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typingRevision" }] : /* istanbul ignore next */ []));
+    }
+    bumpPresenceTimeTick() {
+        this._presenceTimeTick.update((tick) => tick + 1);
     }
     setConversations(conversations) {
         const convMap = new Map();
@@ -1560,6 +1429,12 @@ class AXConversationState {
             newMap.delete(conversationId);
             return newMap;
         });
+        this._typingExpiry.update((map) => {
+            const next = new Map(map);
+            next.delete(conversationId);
+            return next;
+        });
+        this.bumpTypingRevision();
     }
     updateLastMessage(message) {
         this.updateConversation(message.conversationId, {
@@ -1577,15 +1452,6 @@ class AXConversationState {
     resetUnreadCount(conversationId) {
         this.updateConversation(conversationId, { unreadCount: 0 });
     }
-    updateSettings(conversationId, settings) {
-        const conversation = this._conversations().get(conversationId);
-        if (!conversation)
-            return;
-        this.updateConversation(conversationId, {
-            settings: { ...conversation.settings, ...settings },
-            updatedAt: new Date(),
-        });
-    }
     updateTitle(conversationId, title) {
         this.updateConversation(conversationId, { title, updatedAt: new Date() });
     }
@@ -1598,42 +1464,141 @@ class AXConversationState {
             updatedAt: new Date(),
         });
     }
-    updateTypingIndicator(conversationId, userId, isTyping) {
-        const conversation = this._conversations().get(conversationId);
-        if (!conversation)
-            return;
-        let typingUsers = [...conversation.status.typingUsers];
-        if (isTyping) {
-            if (!typingUsers.includes(userId)) {
-                typingUsers.push(userId);
+    updateUserPresence(update) {
+        const lastSeen = update.lastSeen instanceof Date
+            ? update.lastSeen
+            : update.lastSeen
+                ? new Date(update.lastSeen)
+                : undefined;
+        this._userPresence.update((map) => {
+            const next = new Map(map);
+            next.set(update.userId, {
+                userId: update.userId,
+                status: update.status,
+                lastSeen,
+                statusText: update.statusText,
+                updatedAt: new Date(),
+            });
+            return next;
+        });
+    }
+    bulkSetUserPresence(updates) {
+        if (updates.length === 0)
+            return;
+        this._userPresence.update((map) => {
+            const next = new Map(map);
+            for (const update of updates) {
+                const lastSeen = update.lastSeen instanceof Date
+                    ? update.lastSeen
+                    : update.lastSeen
+                        ? new Date(update.lastSeen)
+                        : undefined;
+                next.set(update.userId, {
+                    userId: update.userId,
+                    status: update.status,
+                    lastSeen,
+                    statusText: update.statusText,
+                    updatedAt: new Date(),
+                });
             }
-        }
-        else {
-            typingUsers = typingUsers.filter((id) => id !== userId);
-        }
-        this.updateConversation(conversationId, {
-            status: {
-                ...conversation.status,
-                isTyping: typingUsers.length > 0,
-                typingUsers,
-            },
+            return next;
         });
     }
-    updateParticipantPresence(userId, status, lastSeen) {
-        this._conversations.update((conversations) => {
-            const newConversations = new Map(conversations);
-            for (const [id, conv] of conversations) {
-                const participant = conv.participants.find((p) => p.id === userId);
-                if (participant) {
-                    const updatedConversation = {
-                        ...conv,
-                        participants: conv.participants.map((p) => (p.id === userId ? { ...p, status, lastSeen } : p)),
-                        status: conv.type === 'private' ? { ...conv.status, presence: status, lastSeen } : conv.status,
-                    };
-                    newConversations.set(id, updatedConversation);
+    getUserPresence(userId) {
+        return this._userPresence().get(userId);
+    }
+    setTypingActive(conversationId, userId, displayDurationMs) {
+        const expiresAt = Date.now() + displayDurationMs;
+        this._typingExpiry.update((map) => {
+            const next = new Map(map);
+            const room = new Map(next.get(conversationId) ?? []);
+            room.set(userId, expiresAt);
+            next.set(conversationId, room);
+            return next;
+        });
+        this.bumpTypingRevision();
+    }
+    clearTypingUser(conversationId, userId) {
+        this._typingExpiry.update((map) => {
+            const room = map.get(conversationId);
+            if (!room?.has(userId)) {
+                return map;
+            }
+            const next = new Map(map);
+            const nextRoom = new Map(room);
+            nextRoom.delete(userId);
+            if (nextRoom.size === 0) {
+                next.delete(conversationId);
+            }
+            else {
+                next.set(conversationId, nextRoom);
+            }
+            return next;
+        });
+        this.bumpTypingRevision();
+    }
+    getActiveTypingUserIds(conversationId) {
+        const now = Date.now();
+        const room = this._typingExpiry().get(conversationId);
+        if (!room)
+            return [];
+        const active = [];
+        for (const [userId, expiresAt] of room) {
+            if (expiresAt > now) {
+                active.push(userId);
+            }
+        }
+        return active;
+    }
+    isAnyoneTyping(conversationId) {
+        return this.getActiveTypingUserIds(conversationId).length > 0;
+    }
+    pruneExpiredTyping() {
+        const now = Date.now();
+        let changed = false;
+        this._typingExpiry.update((map) => {
+            const next = new Map();
+            for (const [conversationId, room] of map) {
+                const activeRoom = new Map();
+                for (const [userId, expiresAt] of room) {
+                    if (expiresAt > now) {
+                        activeRoom.set(userId, expiresAt);
+                    }
+                    else {
+                        changed = true;
+                    }
+                }
+                if (activeRoom.size > 0) {
+                    next.set(conversationId, activeRoom);
+                }
+                else if (room.size > 0) {
+                    changed = true;
                 }
             }
-            return newConversations;
+            return changed ? next : map;
+        });
+        if (changed) {
+            this.bumpTypingRevision();
+        }
+    }
+    setRoomPreferencesBulk(preferences) {
+        this._roomPreferences.update(() => {
+            const next = new Map();
+            for (const [conversationId, prefs] of Object.entries(preferences)) {
+                next.set(conversationId, mergeRoomPreferences(prefs));
+            }
+            return next;
+        });
+    }
+    getRoomPreferences(conversationId) {
+        return this._roomPreferences().get(conversationId) ?? { ...AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES };
+    }
+    updateRoomPreferences(conversationId, updates) {
+        this._roomPreferences.update((map) => {
+            const next = new Map(map);
+            const current = next.get(conversationId) ?? { ...AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES };
+            next.set(conversationId, mergeRoomPreferences({ ...current, ...updates }));
+            return next;
         });
     }
     addMessage(message) {
@@ -1660,9 +1625,6 @@ class AXConversationState {
             return newMap;
         });
     }
-    /**
-     * Replace all messages for a conversation (initial page load).
-     */
     setConversationMessages(conversationId, messages) {
         const sorted = [...messages]
             .map(withNormalizedPayload)
@@ -3213,6 +3175,8 @@ class AXConversationService {
         ...(ngDevMode ? [{ debugName: "_loading" }] : /* istanbul ignore next */ []));
         this._loadingActiveMessages = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_loadingActiveMessages" }] : /* istanbul ignore next */ []));
+        this._isForwardingMessage = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isForwardingMessage" }] : /* istanbul ignore next */ []));
         this._error = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_error" }] : /* istanbul ignore next */ []));
         this._conversationsPagination = signal({ page: 0, hasMore: true }, /* @ts-ignore */
@@ -3255,6 +3219,8 @@ class AXConversationService {
         this.loading = this._loading.asReadonly();
         /** Loading state for the active conversation's message history */
         this.loadingActiveMessages = this._loadingActiveMessages.asReadonly();
+        /** Whether a message forward operation is in progress. */
+        this.isForwardingMessage = this._isForwardingMessage.asReadonly();
         /** Sidebar conversation list pagination */
         this.conversationsPagination = this._conversationsPagination.asReadonly();
         /** Active conversation message pagination */
@@ -3283,6 +3249,15 @@ class AXConversationService {
         this._currentUser = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_currentUser" }] : /* istanbul ignore next */ []));
         this.currentUser = this._currentUser.asReadonly();
+        this.userPresenceMap = computed(() => this.state.userPresenceMap(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "userPresenceMap" }] : /* istanbul ignore next */ []));
+        this.presenceTimeTick = computed(() => {
+            this.state.presenceTimeTick();
+            return this.state.userPresenceMap();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presenceTimeTick" }] : /* istanbul ignore next */ []));
+        this.typingRevision = computed(() => this.state.typingRevision(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typingRevision" }] : /* istanbul ignore next */ []));
         /** One-time async initialization (connect, user, conversations, realtime). */
         this.initPromise = null;
         /** Generation counter — stale page-0 loads are ignored after conversation switches. */
@@ -3291,9 +3266,12 @@ class AXConversationService {
         this.conversationListLoadGeneration = 0;
         /** Batched read-receipt queue keyed by conversation ID. */
         this.readQueue = new Map();
+        this.isTypingActiveForConversation = false;
         /** Session cache for available reaction emojis. */
         this.availableReactionsCache = null;
         this.availableReactionsPromise = null;
+        this.presenceTickHandle = setInterval(() => this.state.bumpPresenceTimeTick(), 60_000);
+        this.typingPruneHandle = setInterval(() => this.state.pruneExpiredTyping(), 1_000);
         this.destroyRef.onDestroy(() => {
             this._conversationSwitch$.next();
             this._conversationSwitch$.complete();
@@ -3302,7 +3280,17 @@ class AXConversationService {
             if (this.readFlushHandle) {
                 clearTimeout(this.readFlushHandle);
             }
+            if (this.presenceTickHandle) {
+                clearInterval(this.presenceTickHandle);
+            }
+            if (this.typingPruneHandle) {
+                clearInterval(this.typingPruneHandle);
+            }
+            if (this.typingStopHandle) {
+                clearTimeout(this.typingStopHandle);
+            }
             void this.flushReadQueue();
+            void this.userApi.updatePresence('offline').catch(() => undefined);
         });
     }
     /** Log and invoke an async API method from AXConversationService. */
@@ -3337,10 +3325,16 @@ class AXConversationService {
             // Load current user
             const currentUser = await this.callApi('initializeService', 'userApi', 'getCurrentUser', () => this.userApi.getCurrentUser());
             this._currentUser.set(currentUser);
+            if (currentUser.conversationPreferences) {
+                this.state.setRoomPreferencesBulk(currentUser.conversationPreferences);
+            }
             // Subscribe to real-time events
             this.subscribeToEvents();
+            void this.userApi.updatePresence('online').catch(() => undefined);
             // Load initial data
             await this.loadConversations();
+            await this.hydrateUserPresence();
+            await this.loadRoomPreferences();
         }
         catch (error) {
             const handledError = this.errorHandler.handle(error, 'initializeService');
@@ -3428,6 +3422,113 @@ class AXConversationService {
             this.handleNewMessage(message);
             this._messageReceived$.next(message);
         });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToMessageReactions');
+        this.realtimeApi
+            .subscribeToMessageReactions()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToMessageReactions');
+            return EMPTY;
+        }))
+            .subscribe((message) => {
+            this.handleMessageUpdate(message);
+            this._messageUpdated$.next(message);
+        });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToConversationCreated');
+        this.realtimeApi
+            .subscribeToConversationCreated()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToConversationCreated');
+            return EMPTY;
+        }))
+            .subscribe((conversation) => {
+            this.handleConversationCreated(conversation);
+        });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToConversationDeleted');
+        this.realtimeApi
+            .subscribeToConversationDeleted()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToConversationDeleted');
+            return EMPTY;
+        }))
+            .subscribe((conversationId) => {
+            this.handleConversationDeleted(conversationId);
+        });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToReadReceipts');
+        this.realtimeApi
+            .subscribeToReadReceipts()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToReadReceipts');
+            return EMPTY;
+        }))
+            .subscribe((receipt) => {
+            this.handleReadReceipt(receipt);
+        });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToMessageStatusChanges');
+        this.realtimeApi
+            .subscribeToMessageStatusChanges()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToMessageStatusChanges');
+            return EMPTY;
+        }))
+            .subscribe((change) => {
+            this.handleMessageStatusChange(change);
+        });
+        this.logApi('subscribeToEvents', 'realtimeApi', 'subscribeToConversationSettingsChanges');
+        this.realtimeApi
+            .subscribeToConversationSettingsChanges()
+            .pipe(takeUntil(this.destroy$), catchError((error) => {
+            this.errorHandler.handle(error, 'subscribeToConversationSettingsChanges');
+            return EMPTY;
+        }))
+            .subscribe((change) => {
+            this.handleRoomPreferencesChange(change);
+        });
+    }
+    getUserPresence(userId) {
+        return this.state.getUserPresence(userId);
+    }
+    getRoomPreferences(conversationId) {
+        return this.state.getRoomPreferences(conversationId);
+    }
+    isAnyoneTyping(conversationId) {
+        return this.state.isAnyoneTyping(conversationId);
+    }
+    getActiveTypingUserIds(conversationId) {
+        return this.state.getActiveTypingUserIds(conversationId);
+    }
+    getPeerPresence(conversation) {
+        const peerId = resolveConversationPeerUserId(conversation, this._currentUser()?.id);
+        return peerId ? this.getUserPresence(peerId) : undefined;
+    }
+    async hydrateUserPresence() {
+        const currentUserId = this._currentUser()?.id;
+        const userIds = new Set();
+        for (const conversation of this.state.conversations()) {
+            for (const participant of conversation.participants) {
+                if (participant.id !== currentUserId) {
+                    userIds.add(participant.id);
+                }
+            }
+        }
+        if (userIds.size === 0) {
+            return;
+        }
+        try {
+            const updates = await this.callApi('hydrateUserPresence', 'userApi', 'getUsersPresence', () => this.userApi.getUsersPresence([...userIds]), [...userIds]);
+            this.state.bulkSetUserPresence(updates);
+        }
+        catch (error) {
+            this.errorHandler.handle(error, 'hydrateUserPresence');
+        }
+    }
+    async loadRoomPreferences() {
+        try {
+            const preferences = await this.callApi('loadRoomPreferences', 'userApi', 'getConversationPreferences', () => this.userApi.getConversationPreferences());
+            this.state.setRoomPreferencesBulk(preferences);
+        }
+        catch (error) {
+            this.errorHandler.handle(error, 'loadRoomPreferences');
+        }
     }
     /**
      * Load conversations from server
@@ -3455,6 +3556,7 @@ class AXConversationService {
                 hasMore: result.hasMore,
                 nextCursor: result.nextCursor,
             });
+            await this.hydrateUserPresence();
         }
         catch (error) {
             const handledError = this.errorHandler.handle(error, 'loadConversations');
@@ -3497,16 +3599,22 @@ class AXConversationService {
      */
     async selectConversation(conversationId) {
         await this.ensureInitialized();
+        const isAlreadyActive = this._activeConversationId() === conversationId;
+        const hasCachedMessages = this.state.getConversationMessages(conversationId).length > 0;
         try {
-            this._conversationSwitch$.next();
-            this.messageLoadGeneration++;
-            this._activeConversationId.set(conversationId);
-            this._loadingActiveMessages.set(true);
-            try {
-                await this.loadMessages(conversationId, 0);
-            }
-            finally {
-                this._loadingActiveMessages.set(false);
+            if (!isAlreadyActive) {
+                this._conversationSwitch$.next();
+                this.messageLoadGeneration++;
+                this._activeConversationId.set(conversationId);
+            }
+            if (!isAlreadyActive || !hasCachedMessages) {
+                this._loadingActiveMessages.set(true);
+                try {
+                    await this.loadMessages(conversationId, 0);
+                }
+                finally {
+                    this._loadingActiveMessages.set(false);
+                }
             }
             if (this.config.markConversationReadOnSelect) {
                 const conversation = this.state.getConversation(conversationId);
@@ -3545,7 +3653,12 @@ class AXConversationService {
                 return empty;
             }
             if (page === 0) {
-                this.state.setConversationMessages(conversationId, result.items);
+                const pendingLocal = this.state
+                    .getConversationMessages(conversationId)
+                    .filter((m) => m.isLocal || m.status === 'sending');
+                const serverIds = new Set(result.items.map((m) => m.id));
+                const localsToKeep = pendingLocal.filter((m) => !serverIds.has(m.id));
+                this.state.setConversationMessages(conversationId, [...result.items, ...localsToKeep]);
             }
             else if (result.items.length > 0) {
                 this.state.addMessages(result.items);
@@ -3657,9 +3770,7 @@ class AXConversationService {
                 };
                 this.state.updateMessage(tempMessageId, { payload: sendCommand.payload });
                 const sentMessage = await this.callApi('sendMessage', 'messageApi', 'sendMessage', () => this.messageApi.sendMessage(sendCommand), sendCommand);
-                this.state.deleteMessage(tempMessageId);
-                this.state.addMessage(sentMessage);
-                this.updateConversationLastMessage(sentMessage);
+                this.finalizeSentMessage(tempMessageId, sentMessage);
                 if (localPreviewUrl?.startsWith('blob:')) {
                     await revokeObjectUrl$1(this.platformId, localPreviewUrl);
                 }
@@ -3694,9 +3805,7 @@ class AXConversationService {
             };
             this.state.addMessage(tempMessage);
             const sentMessage = await this.callApi('sendMessage', 'messageApi', 'sendMessage', () => this.messageApi.sendMessage(sendCommand), sendCommand);
-            this.state.deleteMessage(tempMessageId);
-            this.state.addMessage(sentMessage);
-            this.updateConversationLastMessage(sentMessage);
+            this.finalizeSentMessage(tempMessageId, sentMessage);
         }
         catch (error) {
             this.state.updateMessage(tempMessageId, { status: 'failed' });
@@ -3731,11 +3840,8 @@ class AXConversationService {
             };
             // Send to server
             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);
-            // Update conversation's last message
-            this.updateConversationLastMessage(sentMessage);
+            // Replace with real message (keep same DOM row when server echoes tempId)
+            this.finalizeSentMessage(messageId, sentMessage);
         }
         catch (error) {
             // Mark as failed again
@@ -3758,7 +3864,8 @@ class AXConversationService {
                 editedAt: new Date(),
             });
             // Sync with server
-            await this.callApi('editMessage', 'messageApi', 'editMessage', () => this.messageApi.editMessage(messageId, payload), messageId, payload);
+            const updatedMessage = await this.callApi('editMessage', 'messageApi', 'editMessage', () => this.messageApi.editMessage(messageId, payload), messageId, payload);
+            this.state.updateMessage(messageId, updatedMessage);
         }
         catch (error) {
             // Rollback on failure
@@ -3807,11 +3914,22 @@ class AXConversationService {
      * Adds reaction optimistically, server update comes via subscription
      */
     async reactToMessage(messageId, emoji) {
+        const message = this.state.getMessage(messageId);
+        const currentUserId = this._currentUser()?.id;
+        if (!message || !currentUserId) {
+            return;
+        }
+        const originalReactions = [...message.reactions];
+        const hasReaction = message.reactions.some((r) => r.emoji === emoji && r.userId === currentUserId);
+        const optimisticReactions = hasReaction
+            ? message.reactions.filter((r) => !(r.emoji === emoji && r.userId === currentUserId))
+            : [...message.reactions, { emoji, userId: currentUserId, timestamp: new Date() }];
+        this.state.updateMessage(messageId, { reactions: optimisticReactions });
         try {
             await this.callApi('reactToMessage', 'messageApi', 'addReaction', () => this.messageApi.addReaction(messageId, emoji), messageId, emoji);
-            // Update will come through subscribeToMessageUpdates
         }
         catch (error) {
+            this.state.updateMessage(messageId, { reactions: originalReactions });
             this.errorHandler.handle(error, 'reactToMessage', { messageId, emoji });
             throw error;
         }
@@ -3850,8 +3968,12 @@ class AXConversationService {
         if (!message || message.status === 'read') {
             return;
         }
+        const existingQueue = this.readQueue.get(message.conversationId);
+        if (existingQueue?.has(messageId)) {
+            return;
+        }
         this.state.updateMessage(messageId, { status: 'read' });
-        let queue = this.readQueue.get(message.conversationId);
+        let queue = existingQueue;
         if (!queue) {
             queue = new Set();
             this.readQueue.set(message.conversationId, queue);
@@ -3969,10 +4091,17 @@ class AXConversationService {
             await this.callApi('sendTypingIndicator', 'messageApi', 'sendTypingIndicator', () => this.messageApi.sendTypingIndicator(conversationId), conversationId);
         }
         catch (error) {
-            // Log but don't throw - typing indicators are not critical
             this.errorHandler.handle(error, 'sendTypingIndicator', { conversationId });
         }
     }
+    async stopTypingIndicator(conversationId) {
+        try {
+            await this.callApi('stopTypingIndicator', 'messageApi', 'stopTypingIndicator', () => this.messageApi.stopTypingIndicator(conversationId), conversationId);
+        }
+        catch (error) {
+            this.errorHandler.handle(error, 'stopTypingIndicator', { conversationId });
+        }
+    }
     /**
      * Search conversations
      * Returns empty array on failure
@@ -3990,15 +4119,22 @@ class AXConversationService {
      * Handle new message received
      */
     handleNewMessage(message) {
+        if (message.status === 'read') {
+            return;
+        }
         if (this.state.getMessage(message.id)) {
             return;
         }
+        this.state.clearTypingUser(message.conversationId, message.senderId);
         this.state.addMessage(message);
         this.state.updateLastMessage(message);
         const currentId = this._currentUser()?.id ?? 'current-user';
         const isFromOtherUser = message.senderId !== currentId;
         const isActiveConversation = message.conversationId === this._activeConversationId();
-        if (isFromOtherUser && !isActiveConversation) {
+        if (isFromOtherUser && isActiveConversation) {
+            this.queueMessageAsRead(message.id);
+        }
+        else if (isFromOtherUser && !isActiveConversation) {
             this.state.incrementUnreadCount(message.conversationId);
         }
         this.syncMessageCountFromRealtime(message, isActiveConversation);
@@ -4046,22 +4182,21 @@ class AXConversationService {
      * Handle typing indicator
      */
     handleTypingIndicator(indicator) {
-        // Ignore typing indicators from the current user
         const currentUser = this._currentUser();
         if (currentUser && indicator.userId === currentUser.id) {
             return;
         }
-        this.state.updateTypingIndicator(indicator.conversationId, indicator.userId, true);
-        // Clear typing indicator after timeout
-        setTimeout(() => {
-            this.state.updateTypingIndicator(indicator.conversationId, indicator.userId, false);
-        }, this.config.typingIndicatorTimeout ?? 3000);
+        if (indicator.isTyping === false) {
+            this.state.clearTypingUser(indicator.conversationId, indicator.userId);
+            return;
+        }
+        this.state.setTypingActive(indicator.conversationId, indicator.userId, this.config.typingDisplayDuration ?? 4000);
     }
     /**
      * Handle presence update
      */
     handlePresenceUpdate(update) {
-        this.state.updateParticipantPresence(update.userId, update.status, update.lastSeen);
+        this.state.updateUserPresence(update);
     }
     /**
      * Handle conversation update
@@ -4070,6 +4205,43 @@ class AXConversationService {
     handleConversationUpdate(conversation) {
         this.syncConversationToInbox(conversation);
     }
+    handleConversationCreated(conversation) {
+        this.syncConversationToInbox(conversation, true);
+    }
+    handleConversationDeleted(conversationId) {
+        this.state.deleteConversation(conversationId);
+        this.readQueue.delete(conversationId);
+        if (this._activeConversationId() === conversationId) {
+            this._activeConversationId.set(undefined);
+        }
+    }
+    handleReadReceipt(receipt) {
+        const currentUserId = this._currentUser()?.id;
+        const message = this.state.getMessage(receipt.messageId);
+        if (!message || !currentUserId) {
+            return;
+        }
+        if (receipt.userId === currentUserId) {
+            return;
+        }
+        if (message.senderId === currentUserId && message.status !== 'read') {
+            this.state.updateMessage(receipt.messageId, { status: 'read' });
+        }
+    }
+    handleMessageStatusChange(change) {
+        const message = this.state.getMessage(change.messageId);
+        if (!message || message.status === change.status) {
+            return;
+        }
+        this.state.updateMessage(change.messageId, { status: change.status });
+    }
+    handleRoomPreferencesChange(change) {
+        const currentUserId = this._currentUser()?.id;
+        if (!currentUserId) {
+            return;
+        }
+        this.state.updateRoomPreferences(change.conversationId, change.settings);
+    }
     /**
      * Insert or refresh a conversation in the in-memory inbox.
      * @param promote When true, bumps activity so the chat sorts to the top (create / reopen).
@@ -4085,6 +4257,16 @@ class AXConversationService {
             updatedAt: conversation.updatedAt ?? now,
         });
     }
+    finalizeSentMessage(tempMessageId, sentMessage) {
+        if (sentMessage.id === tempMessageId) {
+            this.state.updateMessage(tempMessageId, { ...sentMessage, isLocal: false });
+        }
+        else {
+            this.state.deleteMessage(tempMessageId);
+            this.state.addMessage(sentMessage);
+        }
+        this.updateConversationLastMessage(sentMessage);
+    }
     /**
      * Update conversation's last message
      */
@@ -4138,8 +4320,8 @@ class AXConversationService {
      */
     async updateConversationSettings(conversationId, settings) {
         try {
-            await this.callApi('updateConversationSettings', 'conversationApi', 'updateConversationSettings', () => this.conversationApi.updateConversationSettings(conversationId, settings), conversationId, settings);
-            this.state.updateSettings(conversationId, settings);
+            const updated = await this.callApi('updateConversationSettings', 'userApi', 'updateConversationPreferences', () => this.userApi.updateConversationPreferences(conversationId, settings), conversationId, settings);
+            this.state.updateRoomPreferences(conversationId, updated);
         }
         catch (error) {
             this.errorHandler.handle(error, 'updateConversationSettings', { conversationId });
@@ -4420,9 +4602,8 @@ class AXConversationService {
      */
     async muteConversation(conversationId, duration) {
         try {
-            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 });
+            const mutedUntil = duration ? new Date(Date.now() + duration) : new Date('2099-12-31');
+            await this.updateConversationSettings(conversationId, { mutedUntil, notifications: false });
         }
         catch (error) {
             this.errorHandler.handle(error, 'muteConversation', { conversationId, duration });
@@ -4435,8 +4616,7 @@ class AXConversationService {
      */
     async unmuteConversation(conversationId) {
         try {
-            await this.callApi('unmuteConversation', 'conversationApi', 'unmuteConversation', () => this.conversationApi.unmuteConversation(conversationId), conversationId);
-            this.state.updateSettings(conversationId, { mutedUntil: undefined, notifications: true });
+            await this.updateConversationSettings(conversationId, { mutedUntil: undefined, notifications: true });
         }
         catch (error) {
             this.errorHandler.handle(error, 'unmuteConversation', { conversationId });
@@ -4498,7 +4678,6 @@ class AXConversationService {
     async saveDraft(conversationId, draft) {
         try {
             await this.callApi('saveDraft', 'conversationApi', 'saveDraft', () => this.conversationApi.saveDraft(conversationId, draft), conversationId, draft);
-            this.state.updateConversation(conversationId, { draft });
         }
         catch (error) {
             this.errorHandler.handle(error, 'saveDraft', { conversationId });
@@ -4512,7 +4691,6 @@ class AXConversationService {
     async clearDraft(conversationId) {
         try {
             await this.callApi('clearDraft', 'conversationApi', 'clearDraft', () => this.conversationApi.clearDraft(conversationId), conversationId);
-            this.state.updateConversation(conversationId, { draft: undefined });
         }
         catch (error) {
             this.errorHandler.handle(error, 'clearDraft', { conversationId });
@@ -4559,18 +4737,35 @@ class AXConversationService {
      * @param caption - Optional caption
      */
     async forwardMessage(messageId, conversationIds, caption) {
+        await this.runWithForwardingLock(async () => {
+            try {
+                const forwardCommand = {
+                    messageId,
+                    conversationIds,
+                    caption,
+                };
+                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 });
+                throw error;
+            }
+        });
+    }
+    /**
+     * Runs a forward operation while locking all forward actions until it completes.
+     */
+    async runWithForwardingLock(task) {
+        if (this._isForwardingMessage()) {
+            throw new Error('A message forward is already in progress.');
+        }
+        this._isForwardingMessage.set(true);
         try {
-            const forwardCommand = {
-                messageId,
-                conversationIds,
-                caption,
-            };
-            await this.callApi('forwardMessage', 'messageApi', 'forwardMessage', () => this.messageApi.forwardMessage(forwardCommand), forwardCommand);
-            this.bumpMessageCount(messageId, 'forwardCount', conversationIds.length);
+            return await task();
         }
-        catch (error) {
-            this.errorHandler.handle(error, 'forwardMessage', { messageId, conversationIds });
-            throw error;
+        finally {
+            this._isForwardingMessage.set(false);
         }
     }
     /**
@@ -5892,22 +6087,32 @@ class AXConversationRegistryComponentOutletComponent {
         ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : /* istanbul ignore next */ []));
         this.loading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Avoid re-loading when the parent re-binds the same lazy loader reference. */
+        this.activeLoader = null;
         effect(() => {
             const direct = this.component();
             const loader = this.componentLoader();
             if (direct) {
+                this.activeLoader = null;
                 this.resolvedComponent.set(direct);
                 this.loading.set(false);
                 return;
             }
             if (!loader) {
+                this.activeLoader = null;
                 this.resolvedComponent.set(null);
                 this.loading.set(false);
                 return;
             }
+            if (this.resolvedComponent() && this.activeLoader === loader) {
+                return;
+            }
+            this.activeLoader = loader;
             this.loading.set(true);
-            this.resolvedComponent.set(null);
             void loader().then((loaded) => {
+                if (this.activeLoader !== loader) {
+                    return;
+                }
                 this.resolvedComponent.set(loaded);
                 this.loading.set(false);
             });
@@ -6002,9 +6207,6 @@ class AXConversationComposerService {
         /** Attachments */
         this.attachments = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
-        /** Show typing indicator */
-        this.showTypingIndicator = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showTypingIndicator" }] : /* istanbul ignore next */ []));
         /** Incremented to request focus on the composer text area (handled by AXConversationComposerComponent). */
         this._focusRequest = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_focusRequest" }] : /* istanbul ignore next */ []));
@@ -6318,8 +6520,6 @@ class AXConversationComposerComponent {
         /** Replying to message */
         this.replyingToMessage = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "replyingToMessage" }] : /* istanbul ignore next */ []));
-        /** Show typing indicator - use service */
-        this.showTypingIndicator = this.composerService.showTypingIndicator;
         /** Message sent event */
         this.messageSent = output();
         /** Emitted when the user cancels an in-progress generation from the composer. */
@@ -6430,7 +6630,7 @@ class AXConversationComposerComponent {
         /** Default end action (voice/send morph) */
         this.defaultAction = this.composerService.defaultAction;
         this.typingSubject
-            .pipe(throttleTime(this.config.typingIndicatorThrottle ?? 2000), takeUntilDestroyed())
+            .pipe(throttleTime(this.config.typingIndicatorThrottle ?? 3000), takeUntilDestroyed())
             .subscribe((conversationId) => {
             this.conversationService.sendTypingIndicator(conversationId);
         });
@@ -6467,17 +6667,37 @@ class AXConversationComposerComponent {
         const conversation = this.activeConversation();
         if (!conversation)
             return;
-        // Emit to throttled subject
-        this.typingSubject.next(conversation.id);
+        const conversationId = conversation.id;
+        const draft = this.draftText().trim();
+        if (!draft) {
+            this.stopTypingIndicator(conversationId);
+            return;
+        }
+        this.typingSubject.next(conversationId);
+        if (this.typingStopHandle) {
+            clearTimeout(this.typingStopHandle);
+        }
+        this.typingStopHandle = window.setTimeout(() => {
+            this.stopTypingIndicator(conversationId);
+        }, this.config.typingIndicatorTimeout ?? 3000);
+    }
+    stopTypingIndicator(conversationId) {
+        if (this.typingStopHandle) {
+            clearTimeout(this.typingStopHandle);
+            this.typingStopHandle = undefined;
+        }
+        void this.conversationService.stopTypingIndicator(conversationId);
     }
     /** Cleanup on destroy */
     ngOnDestroy() {
-        this.typingSubject.complete();
-        // Save draft before destroying
         const conversation = this.activeConversation();
-        if (conversation?.id && !this.composerService.editMessage()) {
-            this.composerService.saveDraft(conversation.id, this.draftText());
+        if (conversation?.id) {
+            this.stopTypingIndicator(conversation.id);
+            if (!this.composerService.editMessage()) {
+                this.composerService.saveDraft(conversation.id, this.draftText());
+            }
         }
+        this.typingSubject.complete();
         // Clear timeout
         if (this.draftSaveTimeout) {
             clearTimeout(this.draftSaveTimeout);
@@ -6514,6 +6734,7 @@ class AXConversationComposerComponent {
         };
         this.editingMessage.set(null);
         this.replyingToMessage.set(null);
+        this.stopTypingIndicator(conversation.id);
         void this.composerService
             .sendMessage(command)
             .then(() => {
@@ -6851,7 +7072,7 @@ class AXConversationComposerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", generationCancelled: "generationCancelled", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }, { propertyName: "attachPopoverRef", first: true, predicate: ["attachPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onInput()\"\n          [placeholder]=\"placeholder()\"\n          (onKeyDown)=\"onEnter($event)\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Typing Indicator -->\n    @if (showTypingIndicator()) {\n      <div class=\"typing-indicator-container\">\n        <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--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-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close: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-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-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);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { 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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: AXConversationComposerComponent, isStandalone: true, selector: "ax-conversation-composer", outputs: { messageSent: "messageSent", generationCancelled: "generationCancelled", emojiClick: "emojiClick", attachClick: "attachClick", voiceClick: "voiceClick" }, viewQueries: [{ propertyName: "textAreaRef", first: true, predicate: ["inputElement"], descendants: true, read: AXTextAreaComponent, isSignal: true }, { propertyName: "emojiPopoverRef", first: true, predicate: ["emojiPopover"], descendants: true, isSignal: true }, { propertyName: "attachPopoverRef", first: true, predicate: ["attachPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onInput()\"\n          [placeholder]=\"placeholder()\"\n          (onKeyDown)=\"onEnter($event)\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--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-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close: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-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-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);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\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: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXCommonModule }, { 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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { 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: AXConversationComposerComponent, decorators: [{
             type: Component,
@@ -6867,7 +7088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXTranslationModule,
                         AXButtonItemComponent,
                         AXButtonItemListComponent,
-                    ], template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onInput()\"\n          [placeholder]=\"placeholder()\"\n          (onKeyDown)=\"onEnter($event)\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Typing Indicator -->\n    @if (showTypingIndicator()) {\n      <div class=\"typing-indicator-container\">\n        <span class=\"typing-indicator\">{{ '@acorex:chat.status.someone-typing' | translate | async }}</span>\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--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-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close: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-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-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);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .typing-indicator-container{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (activeConversation()) {\n  <div class=\"composer\">\n    <!-- Edit/Reply Banner -->\n    @if (editingMessage() || replyingToMessage()) {\n      <div\n        class=\"ax-conversation-composer-banner\"\n        [class.ax-conversation-composer-banner--edit]=\"!!editingMessage()\"\n        [class.ax-conversation-composer-banner--reply]=\"!!replyingToMessage()\"\n      >\n        <div class=\"ax-conversation-composer-banner__accent\" aria-hidden=\"true\"></div>\n        @if (editingMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-pen-to-square\"></i\n            ></span>\n            <div class=\"ax-conversation-composer-banner__body\">\n              <span class=\"ax-conversation-composer-banner__label\">{{\n                '@acorex:chat.composer.editing-message' | translate | async\n              }}</span>\n              @if (getEditingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        } @else if (replyingToMessage()) {\n          <div class=\"ax-conversation-composer-banner__content\">\n            <span class=\"ax-conversation-composer-banner__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-light fa-reply\"></i\n            ></span>\n            <div\n              class=\"ax-conversation-composer-banner__body ax-conversation-composer-banner__body--clickable\"\n              (click)=\"onReplyPreviewClick()\"\n            >\n              <span class=\"ax-conversation-composer-banner__label\">\n                {{ '@acorex:chat.composer.replying-to' | translate | async }} {{ getReplyingSenderName() }}\n              </span>\n              @if (getReplyingPreview(); as preview) {\n                <span class=\"ax-conversation-composer-banner__preview\">\n                  @if (preview.type !== 'text') {\n                    <i [class]=\"preview.icon\"></i>\n                  }\n                  {{ getComposerPreviewLabel(preview) }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n        <button\n          type=\"button\"\n          class=\"ax-conversation-composer-banner__close\"\n          (click)=\"cancelEditReply()\"\n          [attr.aria-label]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        >\n          <i class=\"fa-light fa-xmark\"></i>\n        </button>\n      </div>\n    }\n\n    <!-- Input Area -->\n    <div class=\"composer-input-container\">\n      <!-- Start actions -->\n      <div class=\"composer-actions-left\">\n        @if (startMenuActions().length > 0) {\n          <ax-button\n            class=\"rounded-full text-xl\"\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"('@acorex:chat.tooltips.attach-file' | translate | async) ?? ''\"\n            (onClick)=\"onAttachMenuClick($event)\"\n          >\n            <ax-prefix>\n              <i class=\"fa-light fa-paperclip\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        @for (action of startInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n      </div>\n\n      <!-- Text Input -->\n      <div class=\"composer-input-wrapper\">\n        <ax-text-area\n          #inputElement\n          [(ngModel)]=\"draftText\"\n          (onKeyDown)=\"onKeyDown($event)\"\n          (onValueChanged)=\"onInput()\"\n          [placeholder]=\"placeholder()\"\n          (onKeyDown)=\"onEnter($event)\"\n          [rows]=\"inputRows()\"\n        ></ax-text-area>\n      </div>\n\n      <!-- End actions -->\n      <div class=\"composer-actions-right\">\n        @for (action of endInlineActions(); track action.id) {\n          <ax-button\n            look=\"blank\"\n            [iconOnly]=\"true\"\n            [text]=\"getActionLabel(action)\"\n            [disabled]=\"!isActionEnabled(action)\"\n            [class]=\"getActionButtonClass(action)\"\n            (onClick)=\"onActionClick(action.id, $event)\"\n          >\n            <ax-prefix>\n              <i [class]=\"action.icon\"></i>\n            </ax-prefix>\n          </ax-button>\n        }\n\n        <ax-button\n          class=\"rounded-full text-xl\"\n          [class.ax-conversation-composer-primary--stopping]=\"primaryButtonMode() === 'stopping'\"\n          color=\"primary\"\n          look=\"solid\"\n          [iconOnly]=\"true\"\n          [text]=\"getPrimaryButtonLabel()\"\n          [disabled]=\"isPrimaryButtonDisabled()\"\n          (onClick)=\"onPrimaryButtonClick()\"\n        >\n          <ax-prefix>\n            <i [class]=\"getPrimaryButtonIcon()\"></i>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n\n    <!-- Attachments Preview -->\n    @if (attachments().length > 0) {\n      <div class=\"composer-attachments\">\n        @for (attachment of attachments(); track $index) {\n          <div class=\"attachment-item\">\n            <span class=\"attachment-icon\"><i class=\"fa-light fa-paperclip\"></i></span>\n            <span class=\"attachment-name\">{{ attachment.name }}</span>\n            <button\n              type=\"button\"\n              class=\"attachment-remove\"\n              (click)=\"removeAttachment($index)\"\n              [attr.aria-label]=\"'@acorex:chat.actions.remove-attachment' | translate | async\"\n            >\n              <i class=\"fa-light fa-xmark\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- Popover for attachment menu -->\n@if (attachPopoverTarget()) {\n  <ax-popover\n    #attachPopover\n    [target]=\"attachPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    (onClosed)=\"onAttachPopoverClosed()\"\n  >\n    <ax-button-item-list>\n      @for (action of startMenuActions(); track action.id) {\n        <ax-button-item\n          [text]=\"getActionLabel(action)\"\n          (click)=\"onAttachMenuAction(action.id)\"\n          [disabled]=\"!isActionEnabled(action)\"\n        >\n          <ax-prefix>\n            <i [class]=\"action.icon\"></i>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-popover>\n}\n\n<!-- Popover for emoji/sticker picker -->\n@if (emojiPopoverTarget()) {\n  <ax-popover\n    #emojiPopover\n    [target]=\"emojiPopoverTarget()\"\n    [openOn]=\"'manual'\"\n    [closeOn]=\"'clickOut'\"\n    [placement]=\"'top-start'\"\n    panelClass=\"composer-emoji-popover-panel\"\n    (onClosed)=\"onEmojiPopoverClosed()\"\n  >\n    <div class=\"composer-emoji-popover\">\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"composerPopupLoader\"\n        [inputs]=\"getEmojiPopupInputs()\"\n      />\n    </div>\n  </ax-popover>\n}\n", styles: ["@layer properties;@layer components{ax-conversation-composer{display:block;width:100%;@keyframes ax-conversation-composer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}ax-conversation-composer .ax-conversation-composer-banner{display:flex;min-height:2.75rem;align-items:stretch;gap:calc(var(--spacing, .25rem) * 0);border-block-style:var(--tw-border-style);border-block-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-composer .ax-conversation-composer-banner__accent{width:3px;flex-shrink:0;border-start-end-radius:var(--radius-sm, .25rem);border-end-end-radius:var(--radius-sm, .25rem);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__accent{background-color:rgba(var(--ax-sys-color-secondary-500))}ax-conversation-composer .ax-conversation-composer-banner__content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-composer .ax-conversation-composer-banner__icon{display:flex;height:calc(var(--spacing, .25rem) * 7);width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);font-size:.8125rem;color:rgba(var(--ax-sys-color-primary-600));background:rgba(var(--ax-sys-color-primary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__icon{color:rgba(var(--ax-sys-color-secondary-600));background:rgba(var(--ax-sys-color-secondary-500),.1)}ax-conversation-composer .ax-conversation-composer-banner__body{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}ax-conversation-composer .ax-conversation-composer-banner__body--clickable{cursor:pointer;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__body--clickable:hover{opacity:.85}}ax-conversation-composer .ax-conversation-composer-banner__label{font-size:.6875rem;--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-primary-600));text-transform:uppercase}ax-conversation-composer .ax-conversation-composer-banner--reply .ax-conversation-composer-banner__label{color:rgba(var(--ax-sys-color-secondary-600))}ax-conversation-composer .ax-conversation-composer-banner__preview{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);overflow:hidden;font-size:.8125rem;--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface));opacity:.88}ax-conversation-composer .ax-conversation-composer-banner__preview i{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}ax-conversation-composer .ax-conversation-composer-banner__close{margin-inline-end:calc(var(--spacing, .25rem) * 1.5);display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;align-self:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.55);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-composer .ax-conversation-composer-banner__close:hover{color:rgba(var(--ax-sys-color-on-surface));background:rgba(var(--ax-sys-color-on-surface),.06)}}ax-conversation-composer .ax-conversation-composer-banner__close: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-composer .emoji-icon{flex-shrink:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}ax-conversation-composer .composer-input-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 3)}ax-conversation-composer .composer-actions-left,ax-conversation-composer .composer-actions-right{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-composer .composer-input-wrapper{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-composer .composer-input-wrapper .ax-editor-container{padding:calc(var(--spacing, .25rem) * 0)}ax-conversation-composer .composer-input{max-height:120px;min-height:calc(var(--spacing, .25rem) * 10);width:100%;resize:none;border-radius:1.25rem;border-style:var(--tw-border-style);border-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);font-size:.9375rem;--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-outline-style: none;outline-style:none;transition:border-color .2s}ax-conversation-composer .composer-input:focus{border-color:rgba(var(--ax-sys-color-primary-surface))}ax-conversation-composer .composer-attachments{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}ax-conversation-composer .attachment-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);background-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-conversation-composer .attachment-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ))}ax-conversation-composer .attachment-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-composer .attachment-remove{display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition:background .2s}@media(hover:hover){ax-conversation-composer .attachment-remove:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}}ax-conversation-composer .composer-component-fullwidth{min-height:72px;width:100%;background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-conversation-composer .composer-emoji-popover{width:100%}ax-conversation-composer .ax-conversation-composer-primary--stopping .fa-spinner{animation:ax-conversation-composer-spin .75s linear infinite}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;--tw-tracking: initial;--tw-leading: initial;--tw-outline-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { textAreaRef: [{ type: i0.ViewChild, args: ['inputElement', { ...{ read: AXTextAreaComponent }, isSignal: true }] }], messageSent: [{ type: i0.Output, args: ["messageSent"] }], generationCancelled: [{ type: i0.Output, args: ["generationCancelled"] }], emojiClick: [{ type: i0.Output, args: ["emojiClick"] }], attachClick: [{ type: i0.Output, args: ["attachClick"] }], voiceClick: [{ type: i0.Output, args: ["voiceClick"] }], emojiPopoverRef: [{ type: i0.ViewChild, args: ['emojiPopover', { isSignal: true }] }], attachPopoverRef: [{ type: i0.ViewChild, args: ['attachPopover', { isSignal: true }] }] } });
 
 /**
@@ -7130,9 +7351,19 @@ class AXConversationAvatarComponent {
                     displayIcon: explicitIcon ?? resolved.icon,
                 };
             }
+            const conversation = this.conversation();
+            const explicitName = this.name();
+            const explicitAvatar = this.avatar();
+            const explicitIcon = this.icon();
+            const resolved = conversation
+                ? resolveConversationAvatarDisplay(conversation, this.currentUserId())
+                : { name: explicitName ?? '?', avatar: explicitAvatar, icon: explicitIcon };
             return {
-                conversationId: this.conversation()?.id ?? '',
+                conversationId: conversation?.id ?? '',
                 size: this.size(),
+                displayName: explicitName ?? resolved.name,
+                displayAvatar: explicitAvatar ?? resolved.avatar,
+                displayIcon: explicitIcon ?? resolved.icon,
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "customInputs" }] : /* istanbul ignore next */ []));
@@ -7175,14 +7406,14 @@ class AXConversationAvatarComponent {
         this.fallbackInitials = computed(() => AXConversationMessageUtilsService.getInitials(this.fallbackDisplay().name), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fallbackInitials" }] : /* istanbul ignore next */ []));
         this.resolvedStatus = computed(() => {
-            const conversation = this.conversation();
-            if (!conversation || !this.showStatus()) {
+            const userId = this.resolvedUserId();
+            if (!userId || !this.showStatus()) {
                 return undefined;
             }
-            return AXConversationMessageUtilsService.getConversationStatus(conversation);
+            const presence = this.conversationService?.getUserPresence(userId);
+            return AXConversationMessageUtilsService.getUserPresenceStatus(presence);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-        /** Hide presence badge when a registered custom avatar component is rendered. */
         this.statusBadgePresence = computed(() => {
             if (this.customComponent()) {
                 return undefined;
@@ -7192,13 +7423,13 @@ class AXConversationAvatarComponent {
         ...(ngDevMode ? [{ debugName: "statusBadgePresence" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationAvatarComponent, isStandalone: true, selector: "ax-conversation-avatar", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ax-conversation-avatar-size.px": "size()" } }, ngImport: i0, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: filteredCustomInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (statusBadgePresence(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationAvatarComponent, isStandalone: true, selector: "ax-conversation-avatar", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ax-conversation-avatar-size.px": "size()" } }, ngImport: i0, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: filteredCustomInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (statusBadgePresence(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n      [class.status-busy]=\"presence === 'busy'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-offline{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:var(--color-neutral-400, oklch(70.8% 0 0))}ax-conversation-avatar .ax-conversation-avatar-status.status-busy{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-danger-500))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-conversation-avatar', encapsulation: ViewEncapsulation.None, imports: [NgComponentOutlet, AXAvatarComponent, AXDecoratorModule, AXImageComponent, AXLabelComponent], host: {
                         '[style.--ax-conversation-avatar-size.px]': 'size()',
-                    }, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: filteredCustomInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (statusBadgePresence(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"ax-conversation-avatar\">\n  @if (customComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; inputs: filteredCustomInputs()\" />\n  } @else {\n    <ax-avatar [size]=\"size()\">\n      @if (fallbackDisplay().avatar; as avatarSrc) {\n        <ax-image [src]=\"avatarSrc\" [alt]=\"fallbackDisplay().name\"></ax-image>\n      } @else if (fallbackDisplay().icon; as iconClass) {\n        <ax-icon><i [class]=\"iconClass\" aria-hidden=\"true\"></i></ax-icon>\n      } @else {\n        <ax-label>{{ fallbackInitials() }}</ax-label>\n      }\n    </ax-avatar>\n  }\n\n  @if (statusBadgePresence(); as presence) {\n    <span\n      class=\"ax-conversation-avatar-status\"\n      [class.status-online]=\"presence === 'online'\"\n      [class.status-offline]=\"presence === 'offline'\"\n      [class.status-away]=\"presence === 'away'\"\n      [class.status-busy]=\"presence === 'busy'\"\n    ></span>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-avatar{display:inline-flex}ax-conversation-avatar .ax-conversation-avatar{position:relative;display:inline-flex}ax-conversation-avatar .ax-conversation-avatar-status{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * .5);bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 3);width:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px)}ax-conversation-avatar .ax-conversation-avatar-status.status-online{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-success-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-away{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-warning-500))}ax-conversation-avatar .ax-conversation-avatar-status.status-offline{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:var(--color-neutral-400, oklch(70.8% 0 0))}ax-conversation-avatar .ax-conversation-avatar-status.status-busy{border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-surface));background-color:rgba(var(--ax-sys-color-danger-500))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }], conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
@@ -7469,33 +7700,21 @@ class AXConversationInfoBarComponent {
         this.platform = inject(AXPlatform);
         this.destroyRef = inject(DestroyRef);
         this.customUserAvatarComponent = inject(AX_CONVERSATION_USER_AVATAR_COMPONENT, { optional: true });
-        /** Bumps when viewport changes so dynamic action locations re-resolve. */
         this.layoutTick = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layoutTick" }] : /* istanbul ignore next */ []));
-        /** Whether a custom user avatar component is registered via conversation config. */
         this.hasCustomUserAvatar = computed(() => !!this.customUserAvatarComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasCustomUserAvatar" }] : /* istanbul ignore next */ []));
-        /** Active conversation */
         this.activeConversation = this.infoBar.activeConversation;
-        /** Active component from service */
         this.activeComponent = this.infoBar.activeComponent;
-        /** Active banner from service */
         this.activeBanner = this.infoBar.activeBanner;
-        /** Members popover target element — retained for API compatibility */
         this.membersPopoverTarget = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "membersPopoverTarget" }] : /* istanbul ignore next */ []));
-        /** Loading state for async actions */
         this.actionLoading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionLoading" }] : /* istanbul ignore next */ []));
-        /** Info area clicked event — host apps can open a custom conversation details UI */
         this.infoClick = output();
-        /** Search clicked event */
         this.searchClick = output();
-        /** Search query changed event */
         this.searchQuery = output();
-        /** Menu item clicked event */
         this.menuItemAction = output();
-        /** Inline action buttons from registry */
         this.inlineActions = computed(() => {
             this.layoutTick();
             const conversation = this.activeConversation();
@@ -7504,24 +7723,25 @@ class AXConversationInfoBarComponent {
             return this.registry.infoBarActions.getInlineActions(conversation);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inlineActions" }] : /* istanbul ignore next */ []));
-        /** Dropdown menu items from registry */
         this.menuItems = computed(() => {
             this.layoutTick();
             const conversation = this.activeConversation();
             if (!conversation)
                 return [];
-            // Get menu actions from registry
             const actions = this.registry.infoBarActions.getMenuActions(conversation);
-            // Convert actions to dropdown menu items
-            const result = actions.map((action) => ({
-                id: action.id,
-                label: this.registry.infoBarActions.getActionLabel(action, conversation),
-                icon: this.registry.infoBarActions.getActionIcon(action, conversation),
-                divider: action.divider,
-                destructive: action.destructive,
-                disabled: !this.registry.infoBarActions.isActionEnabled(action, { conversation }),
-            }));
-            return result;
+            return actions.map((action) => {
+                const originalIndex = actions.findIndex((a) => a.id === action.id);
+                const nextAction = actions[originalIndex + 1];
+                const hasBreakAfter = nextAction?.divider === true;
+                return {
+                    id: action.id,
+                    label: this.registry.infoBarActions.getActionLabel(action, conversation),
+                    icon: this.registry.infoBarActions.getActionIcon(action, conversation),
+                    divider: action.divider,
+                    destructive: action.destructive,
+                    disabled: !this.registry.infoBarActions.isActionEnabled(action, { conversation }),
+                };
+            });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
         const resizeSub = this.platform.resize.subscribe(() => {
@@ -7529,23 +7749,24 @@ class AXConversationInfoBarComponent {
         });
         this.destroyRef.onDestroy(() => resizeSub.unsubscribe());
     }
-    // Access registry through conversation service
     get registry() {
         return this.conversationService.registry;
     }
-    /** Get conversation status - delegate to utils */
     getStatus(conversation) {
-        return AXConversationMessageUtilsService.getConversationStatus(conversation);
+        return AXConversationMessageUtilsService.getConversationStatus(conversation, this.conversationService.getPeerPresence(conversation));
     }
-    /** Get subtitle text - delegate to utils */
     getSubtitle(conversation) {
-        return AXConversationMessageUtilsService.getConversationSubtitle(conversation);
+        this.conversationService.presenceTimeTick();
+        this.conversationService.typingRevision();
+        return AXConversationMessageUtilsService.getConversationSubtitle(conversation, {
+            typingUserIds: this.conversationService.getActiveTypingUserIds(conversation.id),
+            peerPresence: this.conversationService.getPeerPresence(conversation),
+            currentUserId: this.conversationService.currentUser()?.id,
+        });
     }
-    /** Info area clicked — emits for host apps to open a custom conversation details UI */
     onInfoLeftClick() {
         this.infoClick.emit();
     }
-    /** Handle inline action click */
     async onInlineActionClick(actionId) {
         const conversation = this.activeConversation();
         if (!conversation)
@@ -7581,7 +7802,6 @@ class AXConversationInfoBarComponent {
             this.actionLoading.set(false);
         }
     }
-    /** Get inputs for dynamic component */
     getComponentInputs() {
         const activeComp = this.activeComponent();
         if (!activeComp)
@@ -7604,7 +7824,6 @@ class AXConversationInfoBarComponent {
             return false;
         return activeComp.action.fullWidthComponent !== false;
     }
-    /** Handle close component */
     onCloseComponent() {
         this.infoBar.hideComponent();
     }
@@ -7620,7 +7839,6 @@ class AXConversationInfoBarComponent {
     onCloseBanner() {
         this.infoBar.hideMessageBanner();
     }
-    /** Handle menu item click */
     async onMenuItemClick(item) {
         const conversation = this.activeConversation();
         if (!conversation)
@@ -7632,7 +7850,7 @@ class AXConversationInfoBarComponent {
         this.menuItemAction.emit(item.id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoBarComponent, isStandalone: true, selector: "ax-conversation-info-bar", outputs: { infoClick: "infoClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private'\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;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);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationInfoBarComponent, isStandalone: true, selector: "ax-conversation-info-bar", outputs: { infoClick: "infoClick", searchClick: "searchClick", searchQuery: "searchQuery", menuItemAction: "menuItemAction" }, ngImport: i0, template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;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);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.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: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationInfoBarComponent, decorators: [{
             type: Component,
@@ -7646,7 +7864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXLabelComponent,
                         AXConversationAvatarComponent,
                         AXConversationRegistryComponentOutletComponent,
-                    ], template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private'\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;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);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (activeConversation(); as conversation) {\n  <div class=\"info-bar\">\n    <!-- Left: Avatar and Info -->\n    <div class=\"info-prefix\" (click)=\"$event.stopPropagation()\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n    </div>\n    <div\n      class=\"info-left\"\n      role=\"button\"\n      tabindex=\"0\"\n      (click)=\"onInfoLeftClick()\"\n      (keydown.enter)=\"onInfoLeftClick()\"\n      (keydown.space)=\"$event.preventDefault(); onInfoLeftClick()\"\n    >\n      <div class=\"avatar-wrapper\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"conversation\"\n          [size]=\"48\"\n          [showStatus]=\"conversation.type === 'private' && !hasCustomUserAvatar()\"\n        />\n      </div>\n\n      <div class=\"info-details\">\n        <p class=\"info-title\">{{ conversation.title }}</p>\n        @if (conversation.type !== 'private') {\n          <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n        } @else {\n          <div class=\"info-subtitle-with-status\">\n            @if (getStatus(conversation) === 'online' && !hasCustomUserAvatar()) {\n              <span class=\"online-badge\">\u25CF</span>\n            }\n            <p class=\"info-subtitle\">{{ getSubtitle(conversation) }}</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right: Actions or Full-Width Component -->\n    @if (!activeComponent() || !isActiveComponentFullWidth()) {\n      <div class=\"info-actions\" (click)=\"$event.stopPropagation()\">\n        <!-- Inline action buttons from registry -->\n        @for (action of inlineActions(); track action.id) {\n          @if ((action.component || action.componentLoader) && action.fullWidthComponent === false) {\n            <ax-conversation-registry-component-outlet\n              [component]=\"action.component\"\n              [componentLoader]=\"action.componentLoader\"\n              [inputs]=\"getInlineComponentInputs()\"\n            />\n          } @else {\n            <ax-button class=\"action-button\" (onClick)=\"onInlineActionClick(action.id)\" look=\"ghost\">\n              <ax-icon [icon]=\"registry.infoBarActions.getActionIcon(action, activeConversation()!)\"></ax-icon>\n            </ax-button>\n          }\n        }\n\n        <ax-button look=\"blank\">\n          <ax-icon><i class=\"fa-light fa-ellipsis-vertical\"></i></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              @for (item of menuItems(); track item.id) {\n                @if (item.divider) {\n                  <ax-divider></ax-divider>\n                } @else {\n                  <ax-button-item\n                    [text]=\"item.label\"\n                    [disabled]=\"item.disabled\"\n                    [color]=\"item.destructive ? 'danger' : 'default'\"\n                    (onClick)=\"onMenuItemClick(item)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon [icon]=\"item.icon\"></ax-icon>\n                      </ax-prefix>\n                    }\n                    @if (item.shortcut) {\n                      <ax-suffix>\n                        <ax-label class=\"shortcut\">{{ item.shortcut }}</ax-label>\n                      </ax-suffix>\n                    }\n                  </ax-button-item>\n                }\n              }\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n    }\n\n    @if (activeComponent() && isActiveComponentFullWidth()) {\n      <!-- Full-width component mode (e.g., search) - takes entire info-bar -->\n      <div\n        class=\"info-component-fullwidth\"\n        animate.enter=\"slide-in\"\n        animate.leave=\"slide-out\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeComponent()!.component\"\n          [componentLoader]=\"activeComponent()!.componentLoader\"\n          [inputs]=\"getComponentInputs()\"\n        />\n        <ax-button class=\"action-button close-button\" (onClick)=\"onCloseComponent()\" [look]=\"'ghost'\">\n          <ax-icon><i class=\"fa-light fa-xmark\"></i></ax-icon>\n        </ax-button>\n      </div>\n    }\n  </div>\n\n  @if (activeBanner()) {\n    <div class=\"ax-conversation-info-banner\" (click)=\"$event.stopPropagation()\">\n      <div class=\"ax-conversation-info-banner__content\">\n        <ax-conversation-registry-component-outlet\n          [component]=\"activeBanner()!.component\"\n          [componentLoader]=\"activeBanner()!.componentLoader\"\n          [inputs]=\"getBannerInputs()\"\n        />\n      </div>\n      <button\n        type=\"button\"\n        class=\"ax-conversation-info-banner__close\"\n        (click)=\"onCloseBanner()\"\n        [attr.aria-label]=\"'Close'\"\n      >\n        <i class=\"fa-light fa-xmark\"></i>\n      </button>\n    </div>\n  }\n}\n", styles: ["@layer properties;@layer components{ax-conversation-info-bar{display:block;max-width:100%;@keyframes axInfoBarPulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes axInfoBarSlideIn{0%{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%))}to{opacity:1;transform:translate(0)}}}ax-conversation-info-bar .info-bar{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 16);align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);overflow:hidden;padding:calc(var(--spacing, .25rem) * 2);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-info-bar .ax-conversation-info-banner{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .ax-conversation-info-banner__content{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .ax-conversation-info-banner__close{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);flex-shrink:0;cursor:pointer;touch-action:manipulation;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-on-primary-lightest-surface),.65);transition:background-color .15s ease,color .15s ease}@media(hover:hover){ax-conversation-info-bar .ax-conversation-info-banner__close:hover{color:rgba(var(--ax-sys-color-on-primary-lightest-surface));background:rgba(var(--ax-sys-color-primary-500),.12)}}ax-conversation-info-bar .ax-conversation-info-banner__close:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-600))}ax-conversation-info-bar .info-bar-empty{justify-content:center;opacity:60%}ax-conversation-info-bar .info-prefix{flex-shrink:0}ax-conversation-info-bar .info-left{margin-inline:calc(var(--spacing, .25rem) * -1.5);margin-block:calc(var(--spacing, .25rem) * -1);display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1);transition:background-color .15s ease}ax-conversation-info-bar .info-left:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}ax-conversation-info-bar .avatar-wrapper{flex-shrink:0}ax-conversation-info-bar .info-details{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .info-title{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;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);text-overflow:ellipsis;white-space:nowrap}ax-conversation-info-bar .info-subtitle-with-status{margin-top:calc(var(--spacing, .25rem) * .5);margin-bottom:calc(var(--spacing, .25rem) * 0);display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}ax-conversation-info-bar .online-badge{font-size:.625rem;--tw-leading: 1;line-height:1;color:rgba(var(--ax-sys-color-success-500));animation:axInfoBarPulse 2s cubic-bezier(.4,0,.6,1) infinite}ax-conversation-info-bar .info-subtitle{margin:calc(var(--spacing, .25rem) * 0);overflow:hidden;font-size:.85rem;--tw-tracking: .02rem;letter-spacing:.02rem;text-overflow:ellipsis;white-space:nowrap;opacity:70%}ax-conversation-info-bar .info-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .info-component-fullwidth{position:absolute;inset-inline:calc(var(--spacing, .25rem) * 0);inset-block:calc(var(--spacing, .25rem) * 0);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-conversation-info-bar .slide-in{animation:axInfoBarSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-conversation-info-bar .slide-out{opacity:0;transform:translate(var(--ax-info-bar-slide-distance, 100%));transition:opacity .25s cubic-bezier(.4,0,1,1),transform .25s cubic-bezier(.4,0,1,1)}ax-conversation-info-bar .info-component-fullwidth>*:first-child{min-width:calc(var(--spacing, .25rem) * 0);flex:1}ax-conversation-info-bar .action-button{display:flex;height:calc(var(--spacing, .25rem) * 9);width:calc(var(--spacing, .25rem) * 9);cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);--tw-border-style: none;border-style:none;background-color:transparent;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));transition:background .2s}ax-conversation-info-bar .action-button:hover{background-color:rgba(var(--ax-sys-color-light-surface))}ax-conversation-info-bar .search-container{display:flex;width:100%;min-width:calc(var(--spacing, .25rem) * 48);align-items:center;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-info-bar .search-input{min-width:calc(var(--spacing, .25rem) * 0);flex:1}[dir=rtl] ax-conversation-info-bar{--ax-info-bar-slide-distance: -100%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-leading: initial;--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { infoClick: [{ type: i0.Output, args: ["infoClick"] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], searchQuery: [{ type: i0.Output, args: ["searchQuery"] }], menuItemAction: [{ type: i0.Output, args: ["menuItemAction"] }] } });
 
 class AXConversationForwardMessageDialogComponent {
@@ -7681,7 +7899,9 @@ class AXConversationForwardMessageDialogComponent {
             },
             byKey: (key) => Promise.resolve(this.allConversations().find((c) => c.id === key) ?? null),
         });
-        this.canForward = computed(() => this.selectedConversationIds().length > 0, /* @ts-ignore */
+        this.isForwarding = computed(() => this.conversationService?.isForwardingMessage() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isForwarding" }] : /* istanbul ignore next */ []));
+        this.canForward = computed(() => this.selectedConversationIds().length > 0 && !this.isForwarding(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "canForward" }] : /* istanbul ignore next */ []));
         this._syncPopupTitleEffect = effect(() => {
             const popupRef = this.__popup__();
@@ -7728,38 +7948,40 @@ class AXConversationForwardMessageDialogComponent {
         if (!this.conversationService || !this.message)
             return;
         const selectedIds = this.selectedConversationIds();
-        if (selectedIds.length === 0)
+        if (selectedIds.length === 0 || this.isForwarding())
             return;
         try {
-            const originalConversation = this.conversationService
-                .conversations()
-                .find((c) => c.id === this.message.conversationId);
-            const sender = originalConversation?.participants.find((p) => p.id === this.message.senderId);
-            const forwardPromises = selectedIds.map(async (conversationId) => {
-                const forwardCommand = {
-                    conversationId,
-                    type: this.message.type,
-                    payload: this.message.payload,
-                    forwarded: true,
-                    forwardedFrom: {
-                        messageId: this.message.id,
-                        senderId: this.message.senderId,
-                        senderName: sender?.name || this.translation.translateSync('@acorex:chat.fallbacks.unknown-user'),
-                        conversationId: this.message.conversationId,
-                        conversationTitle: originalConversation?.title,
-                    },
-                    originalSenderId: this.message.senderId,
-                    metadata: this.message.metadata,
-                };
-                return this.conversationService.sendMessage(forwardCommand);
+            await this.conversationService.runWithForwardingLock(async () => {
+                const originalConversation = this.conversationService
+                    .conversations()
+                    .find((c) => c.id === this.message.conversationId);
+                const sender = originalConversation?.participants.find((p) => p.id === this.message.senderId);
+                const forwardPromises = selectedIds.map(async (conversationId) => {
+                    const forwardCommand = {
+                        conversationId,
+                        type: this.message.type,
+                        payload: this.message.payload,
+                        forwarded: true,
+                        forwardedFrom: {
+                            messageId: this.message.id,
+                            senderId: this.message.senderId,
+                            senderName: sender?.name || this.translation.translateSync('@acorex:chat.fallbacks.unknown-user'),
+                            conversationId: this.message.conversationId,
+                            conversationTitle: originalConversation?.title,
+                        },
+                        originalSenderId: this.message.senderId,
+                        metadata: this.message.metadata,
+                    };
+                    return this.conversationService.sendMessage(forwardCommand);
+                });
+                await Promise.all(forwardPromises);
+                const count = selectedIds.length;
+                this.toastService.success(this.translation.translateSync('@acorex:chat.notifications.message-forwarded', { params: { count } }));
+                const event = new AXComponentCloseEvent();
+                event.component = this;
+                event.data = { success: true, count };
+                this.onClosed.emit(event);
             });
-            await Promise.all(forwardPromises);
-            const count = selectedIds.length;
-            this.toastService.success(this.translation.translateSync('@acorex:chat.notifications.message-forwarded', { params: { count } }));
-            const event = new AXComponentCloseEvent();
-            event.component = this;
-            event.data = { success: true, count };
-            this.onClosed.emit(event);
         }
         catch (error) {
             console.error('Failed to forward message:', error);
@@ -7773,7 +7995,7 @@ class AXConversationForwardMessageDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationForwardMessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationForwardMessageDialogComponent, isStandalone: true, selector: "ax-conversation-forward-message-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], viewQueries: [{ propertyName: "forwardListEmptyTpl", first: true, predicate: ["forwardListEmpty"], descendants: true, isSignal: true }, { propertyName: "forwardList", first: true, predicate: ["forwardList"], descendants: true, isSignal: true }], ngImport: i0, template: "    <div class=\"forward-message-dialog\">\n      <ng-template #forwardListEmpty>\n        <div class=\"forward-list-empty\">\n          @if (forwardSearchQuery()) {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n          } @else {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n          }\n        </div>\n      </ng-template>\n\n      <div class=\"dialog-content\">\n        <div class=\"forward-list-wrap\">\n          <ax-list\n            #forwardList\n            class=\"forward-list\"\n            [dataSource]=\"forwardListDataSource\"\n            [multiple]=\"true\"\n            [valueField]=\"'id'\"\n            [textField]=\"'title'\"\n            [checkbox]=\"false\"\n            [itemHeight]=\"52\"\n            [ngModel]=\"selectedConversationIds()\"\n            (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n            [emptyTemplate]=\"forwardListEmptyTpl()\"\n            [itemTemplate]=\"forwardItemTpl\"\n          >\n            <ax-header class=\"forward-list-header\">\n              <div class=\"forward-list-header-inner\">\n                <ax-search-box\n                  [value]=\"forwardSearchQuery()\"\n                  (valueChange)=\"onForwardSearchChange($event)\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n                ></ax-search-box>\n              </div>\n            </ax-header>\n          </ax-list>\n        </div>\n      </div>\n\n      <ng-template #forwardItemTpl let-item>\n        @if (conversationFromItem(item); as conversation) {\n          <div class=\"forward-item-content\">\n            <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n            <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n            <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n          </div>\n        }\n      </ng-template>\n\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n            [look]=\"'solid'\"\n            (onClick)=\"onCancel()\"\n          ></ax-button>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n            [look]=\"'solid'\"\n            [color]=\"'primary'\"\n            [disabled]=\"!canForward()\"\n            (onClick)=\"onForward()\"\n          ></ax-button>\n        </ax-suffix>\n      </ax-footer>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;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-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);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:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: 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: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationForwardMessageDialogComponent, isStandalone: true, selector: "ax-conversation-forward-message-dialog", inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], viewQueries: [{ propertyName: "forwardListEmptyTpl", first: true, predicate: ["forwardListEmpty"], descendants: true, isSignal: true }, { propertyName: "forwardList", first: true, predicate: ["forwardList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"forward-message-dialog\">\n  <ng-template #forwardListEmpty>\n    <div class=\"forward-list-empty\">\n      @if (forwardSearchQuery()) {\n        {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n      } @else {\n        {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n      }\n    </div>\n  </ng-template>\n\n  <div class=\"dialog-content\">\n    <div class=\"forward-list-wrap\">\n      <ax-list\n        #forwardList\n        class=\"forward-list\"\n        [dataSource]=\"forwardListDataSource\"\n        [multiple]=\"true\"\n        [valueField]=\"'id'\"\n        [textField]=\"'title'\"\n        [checkbox]=\"false\"\n        [itemHeight]=\"52\"\n        [ngModel]=\"selectedConversationIds()\"\n        (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n        [emptyTemplate]=\"forwardListEmptyTpl()\"\n        [itemTemplate]=\"forwardItemTpl\"\n      >\n        <ax-header class=\"forward-list-header\">\n          <div class=\"forward-list-header-inner\">\n            <ax-search-box\n              [value]=\"forwardSearchQuery()\"\n              (valueChange)=\"onForwardSearchChange($event)\"\n              [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n            ></ax-search-box>\n          </div>\n        </ax-header>\n      </ax-list>\n    </div>\n  </div>\n\n  <ng-template #forwardItemTpl let-item>\n    @if (conversationFromItem(item); as conversation) {\n      <div class=\"forward-item-content\">\n        <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n        <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n        <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <ax-footer class=\"dialog-footer\">\n    <ax-suffix>\n      <ax-button\n        [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        [look]=\"'solid'\"\n        [disabled]=\"isForwarding()\"\n        (onClick)=\"onCancel()\"\n      >\n      </ax-button>\n      <ax-button\n        [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n        [look]=\"'solid'\"\n        [color]=\"'primary'\"\n        [disabled]=\"!canForward()\"\n        (onClick)=\"onForward()\"\n      >\n        @if (isForwarding()) {\n          <ax-loading></ax-loading>\n        }\n      </ax-button>\n    </ax-suffix>\n  </ax-footer>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;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-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);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:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: 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: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: AXConversationForwardMessageDialogComponent, decorators: [{
             type: Component,
@@ -7785,8 +8007,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXButtonComponent,
                         AXDecoratorGenericComponent,
                         AXConversationAvatarComponent,
+                        AXLoadingComponent,
                         AXTranslationModule,
-                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], template: "    <div class=\"forward-message-dialog\">\n      <ng-template #forwardListEmpty>\n        <div class=\"forward-list-empty\">\n          @if (forwardSearchQuery()) {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n          } @else {\n            {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n          }\n        </div>\n      </ng-template>\n\n      <div class=\"dialog-content\">\n        <div class=\"forward-list-wrap\">\n          <ax-list\n            #forwardList\n            class=\"forward-list\"\n            [dataSource]=\"forwardListDataSource\"\n            [multiple]=\"true\"\n            [valueField]=\"'id'\"\n            [textField]=\"'title'\"\n            [checkbox]=\"false\"\n            [itemHeight]=\"52\"\n            [ngModel]=\"selectedConversationIds()\"\n            (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n            [emptyTemplate]=\"forwardListEmptyTpl()\"\n            [itemTemplate]=\"forwardItemTpl\"\n          >\n            <ax-header class=\"forward-list-header\">\n              <div class=\"forward-list-header-inner\">\n                <ax-search-box\n                  [value]=\"forwardSearchQuery()\"\n                  (valueChange)=\"onForwardSearchChange($event)\"\n                  [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n                ></ax-search-box>\n              </div>\n            </ax-header>\n          </ax-list>\n        </div>\n      </div>\n\n      <ng-template #forwardItemTpl let-item>\n        @if (conversationFromItem(item); as conversation) {\n          <div class=\"forward-item-content\">\n            <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n            <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n            <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n          </div>\n        }\n      </ng-template>\n\n      <ax-footer class=\"dialog-footer\">\n        <ax-suffix>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n            [look]=\"'solid'\"\n            (onClick)=\"onCancel()\"\n          ></ax-button>\n          <ax-button\n            [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n            [look]=\"'solid'\"\n            [color]=\"'primary'\"\n            [disabled]=\"!canForward()\"\n            (onClick)=\"onForward()\"\n          ></ax-button>\n        </ax-suffix>\n      </ax-footer>\n    </div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;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-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);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:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], providers: [{ provide: AXClosableComponent, useExisting: AXConversationForwardMessageDialogComponent }], template: "<div class=\"forward-message-dialog\">\n  <ng-template #forwardListEmpty>\n    <div class=\"forward-list-empty\">\n      @if (forwardSearchQuery()) {\n        {{ '@acorex:chat.dialog.forward-message.no-conversations-search' | translate | async }}\n      } @else {\n        {{ '@acorex:chat.dialog.forward-message.no-conversations-available' | translate | async }}\n      }\n    </div>\n  </ng-template>\n\n  <div class=\"dialog-content\">\n    <div class=\"forward-list-wrap\">\n      <ax-list\n        #forwardList\n        class=\"forward-list\"\n        [dataSource]=\"forwardListDataSource\"\n        [multiple]=\"true\"\n        [valueField]=\"'id'\"\n        [textField]=\"'title'\"\n        [checkbox]=\"false\"\n        [itemHeight]=\"52\"\n        [ngModel]=\"selectedConversationIds()\"\n        (ngModelChange)=\"selectedConversationIds.set($event ?? [])\"\n        [emptyTemplate]=\"forwardListEmptyTpl()\"\n        [itemTemplate]=\"forwardItemTpl\"\n      >\n        <ax-header class=\"forward-list-header\">\n          <div class=\"forward-list-header-inner\">\n            <ax-search-box\n              [value]=\"forwardSearchQuery()\"\n              (valueChange)=\"onForwardSearchChange($event)\"\n              [placeholder]=\"'@acorex:chat.placeholders.search-conversations' | translate | async\"\n            ></ax-search-box>\n          </div>\n        </ax-header>\n      </ax-list>\n    </div>\n  </div>\n\n  <ng-template #forwardItemTpl let-item>\n    @if (conversationFromItem(item); as conversation) {\n      <div class=\"forward-item-content\">\n        <input class=\"ax-checkbox\" type=\"checkbox\" [checked]=\"isSelected(conversation.id)\" tabindex=\"0\" />\n        <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"36\" />\n        <span class=\"forward-title-text ax-truncated\">{{ conversation.title }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <ax-footer class=\"dialog-footer\">\n    <ax-suffix>\n      <ax-button\n        [text]=\"'@acorex:chat.actions.cancel' | translate | async\"\n        [look]=\"'solid'\"\n        [disabled]=\"isForwarding()\"\n        (onClick)=\"onCancel()\"\n      >\n      </ax-button>\n      <ax-button\n        [text]=\"'@acorex:chat.actions.forward' | translate | async\"\n        [look]=\"'solid'\"\n        [color]=\"'primary'\"\n        [disabled]=\"!canForward()\"\n        (onClick)=\"onForward()\"\n      >\n        @if (isForwarding()) {\n          <ax-loading></ax-loading>\n        }\n      </ax-button>\n    </ax-suffix>\n  </ax-footer>\n</div>\n", styles: ["@layer properties;@layer components{ax-conversation-forward-message-dialog{display:block}ax-conversation-forward-message-dialog .forward-message-dialog{display:flex;width:100%;flex-direction:column;overflow:hidden}ax-conversation-forward-message-dialog .dialog-content{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden}ax-conversation-forward-message-dialog .forward-list-wrap{overflow:hidden;height:min(50vh,24rem)}ax-conversation-forward-message-dialog .forward-list{display:block;height:100%}ax-conversation-forward-message-dialog .forward-list-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:10;display:block;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-conversation-forward-message-dialog .forward-list-header-inner{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}ax-conversation-forward-message-dialog .forward-item-content{display:flex;height:100%;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 2);transition:background-color .2s ease}ax-conversation-forward-message-dialog .forward-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;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-forward-message-dialog .forward-list-empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 5);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:70%}ax-conversation-forward-message-dialog .dialog-footer{flex-shrink:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }], forwardListEmptyTpl: [{ type: i0.ViewChild, args: ['forwardListEmpty', { isSignal: true }] }], forwardList: [{ type: i0.ViewChild, args: ['forwardList', { isSignal: true }] }] } });
 
 var forwardMessageDialog_component = /*#__PURE__*/Object.freeze({
@@ -8365,13 +8588,14 @@ class AXConversationMessageListComponent {
         return renderer?.component;
     }
     /** Resolve lazy renderer loader for message */
+    static { this.fallbackRendererLoader = () => Promise.resolve().then(function () { return fallbackRenderer_component; }).then((m) => m.AXConversationFallbackRendererComponent); }
     getRendererComponentLoader(message) {
         const renderer = this.registry.messageRenderers.getRenderer(message);
         if (renderer?.componentLoader) {
             return renderer.componentLoader;
         }
         if (!renderer || !renderer.component) {
-            return () => Promise.resolve().then(function () { return fallbackRenderer_component; }).then((m) => m.AXConversationFallbackRendererComponent);
+            return AXConversationMessageListComponent.fallbackRendererLoader;
         }
         return undefined;
     }
@@ -8758,11 +8982,10 @@ class AXConversationMessageListComponent {
     }
     /**
      * TrackBy function for message groups.
-     * Include the latest message id so new messages in the same date group re-render.
+     * Track by date only — new messages in the same day are handled by the inner message @for.
      */
     trackMessageGroup(index, group) {
-        const lastId = group.messages.at(-1)?.id ?? `empty-${index}`;
-        return `${group.date}:${lastId}`;
+        return group.date;
     }
     /**
      * TrackBy function for messages
@@ -8772,7 +8995,7 @@ 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          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\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              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\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                  @if (messageSupportsReactions(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\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 (messageSupportsReactions(message) && 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 (reactionsEnabled() && 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 messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}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;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}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{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none;color:rgba(var(--ax-sys-color-on-lightest-surface));background:rgba(var(--ax-sys-color-lightest-surface));border:1px solid rgba(var(--ax-sys-color-on-lightest-surface),.25)}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:calc(var(--spacing, .25rem) * 2);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,ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;position:absolute;bottom:0;width:.8rem;height:.8rem;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha}ax-conversation-message-list .message-bubble-received:before{background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}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-bubble:focus-visible,ax-conversation-message-list .add-reaction-button: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 .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}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.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)}.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%}.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)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.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)}.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}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@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: 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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "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      [style.--ax-comp-message-list-surface-bg]=\"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          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\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              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\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                  @if (messageSupportsReactions(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\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 (messageSupportsReactions(message) && 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 (reactionsEnabled() && 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;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}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;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}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-y:auto;overflow-x:visible}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none;color:rgba(var(--ax-sys-color-on-lightest-surface));background:rgba(var(--ax-sys-color-lightest-surface));border:1px solid rgba(var(--ax-sys-color-on-lightest-surface),.25)}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-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);padding-inline:1.75rem;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{z-index:5;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);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 .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);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:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-bottom-left-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-bottom-right-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;bottom:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system){border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system){border-bottom-right-radius:1rem;border-bottom-left-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:auto;right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:auto;right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:auto;left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:auto;left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}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-own .message-bubble{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-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-bubble:focus-visible,ax-conversation-message-list .add-reaction-button: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 .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}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.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)}.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%}.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)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.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)}.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}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@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: 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.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "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,
@@ -8791,7 +9014,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          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\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              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\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                  @if (messageSupportsReactions(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\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 (messageSupportsReactions(message) && 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 (reactionsEnabled() && 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 messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}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;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}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{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none;color:rgba(var(--ax-sys-color-on-lightest-surface));background:rgba(var(--ax-sys-color-lightest-surface));border:1px solid rgba(var(--ax-sys-color-on-lightest-surface),.25)}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:calc(var(--spacing, .25rem) * 2);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,ax-conversation-message-list .message-bubble-sent:after{content:\"\";display:block;position:absolute;bottom:0;width:.8rem;height:.8rem;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-mode:alpha}ax-conversation-message-list .message-bubble-received:before{background-color:rgba(var(--ax-sys-color-lightest-surface));inset-inline-start:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list .message-bubble-sent{border-end-end-radius:.125rem}ax-conversation-message-list .message-bubble-sent:after{background:rgb(var(--ax-sys-color-primary-surface));inset-inline-end:-.7rem;-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}ax-conversation-message-list:dir(rtl) .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-received:before{-webkit-mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 0% 0%,transparent 99.5%,#fff 100%)}[dir=ltr] ax-conversation-message-list .message-bubble-sent:after{-webkit-mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%);mask-image:radial-gradient(circle .69rem at 100% 0%,transparent 99.5%,#fff 100%)}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-bubble:focus-visible,ax-conversation-message-list .add-reaction-button: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 .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}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.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)}.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%}.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)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.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)}.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}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@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      [style.--ax-comp-message-list-surface-bg]=\"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          aria-busy=\"true\"\n          [attr.aria-label]=\"'@acorex:chat.status.loading-messages' | translate | async\"\n        >\n          <div class=\"messages-skeleton\" aria-hidden=\"true\">\n            @for (item of loadingSkeletonItems; track item) {\n              <div class=\"message-skeleton\" [class.message-skeleton--own]=\"$odd\">\n                @if ($even && isGroupConversation()) {\n                  <ax-skeleton class=\"message-skeleton-avatar\" [animated]=\"true\"></ax-skeleton>\n                }\n                <ax-skeleton\n                  class=\"message-skeleton-bubble\"\n                  [class.message-skeleton-bubble--short]=\"$index % 3 === 1\"\n                  [class.message-skeleton-bubble--medium]=\"$index % 3 === 2\"\n                  [animated]=\"true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\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              <span class=\"date-separator__label\">{{ group.dateLabel }}</span>\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                  @if (messageSupportsReactions(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\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 (messageSupportsReactions(message) && 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 (reactionsEnabled() && 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;--ax-comp-message-bubble-tail-height: 1.5625rem;--ax-comp-message-bubble-tail-fill-width: 1.25rem;--ax-comp-message-bubble-tail-fill-offset: -.4375rem;--ax-comp-message-bubble-tail-cutout-width: 1.625rem;--ax-comp-message-bubble-tail-cutout-offset: -1.625rem;--ax-comp-message-bubble-tail-curve: 1rem 0rem;--ax-comp-message-bubble-tail-cutout-curve: .625rem;@keyframes axConversationSurfaceIn{0%{opacity:0}to{opacity:1}}@keyframes axConversationSurfaceInReduced{0%{opacity:.92}to{opacity:1}}@keyframes messagesSkeletonIn{0%{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:translateY(0)}}@keyframes messagesSkeletonInReduced{0%{opacity:.85}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;justify-content:flex-end;overflow:hidden}ax-conversation-message-list .messages-skeleton{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 6);animation:messagesSkeletonIn .42s cubic-bezier(.22,1,.36,1) both}ax-conversation-message-list .message-skeleton{display:flex;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-conversation-message-list .message-skeleton--own{flex-direction:row-reverse}ax-conversation-message-list .message-skeleton-avatar{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:calc(infinity * 1px)}ax-conversation-message-list .message-skeleton-bubble{height:calc(var(--spacing, .25rem) * 10);border-radius:var(--radius-2xl, 1rem);width:min(62%,17.5rem)}ax-conversation-message-list .message-skeleton-bubble--short{height:calc(var(--spacing, .25rem) * 8);width:min(36%,9.5rem)}ax-conversation-message-list .message-skeleton-bubble--medium{height:calc(var(--spacing, .25rem) * 9);width:min(48%,13rem)}@media(prefers-reduced-motion:reduce){ax-conversation-message-list .messages-skeleton{animation:messagesSkeletonInReduced .2s ease both}}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-y:auto;overflow-x:visible}ax-conversation-message-list .date-separator{pointer-events:none;position:sticky;z-index:150;display:flex;align-items:center;justify-content:center;top:.5rem;padding:.375rem 1rem .625rem;margin-block:.125rem .375rem}ax-conversation-message-list .date-separator__label{pointer-events:auto;display:inline-flex;width:calc(var(--spacing, .25rem) * 32);max-width:min(100%,18rem);align-items:center;justify-content:center;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);white-space:nowrap;-webkit-user-select:none;user-select:none;color:rgba(var(--ax-sys-color-on-lightest-surface));background:rgba(var(--ax-sys-color-lightest-surface));border:1px solid rgba(var(--ax-sys-color-on-lightest-surface),.25)}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-block:calc(var(--spacing, .25rem) * 2);--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);padding-inline:1.75rem;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{z-index:5;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);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 .message-bubble>*{position:relative;z-index:1}ax-conversation-message-list .reply-preview{margin-bottom:calc(var(--spacing, .25rem) * 2);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:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-lightest-surface));background-color:var(--ax-comp-message-bubble-bg);border-bottom-left-radius:.25rem}ax-conversation-message-list .message-bubble-sent:not(.message-system){--ax-comp-message-bubble-bg: rgb(var(--ax-sys-color-primary-surface));background-color:var(--ax-comp-message-bubble-bg);color:rgb(var(--ax-sys-color-on-primary-surface));border-bottom-right-radius:.25rem}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{content:\"\";position:absolute;bottom:0;height:var(--ax-comp-message-bubble-tail-height);pointer-events:none;z-index:0}ax-conversation-message-list .message-bubble-received:not(.message-system):before,ax-conversation-message-list .message-bubble-sent:not(.message-system):before{width:var(--ax-comp-message-bubble-tail-fill-width);background-color:var(--ax-comp-message-bubble-bg)}ax-conversation-message-list .message-bubble-received:not(.message-system):after,ax-conversation-message-list .message-bubble-sent:not(.message-system):after{width:var(--ax-comp-message-bubble-tail-cutout-width);background:var(--ax-comp-message-list-surface-bg, rgb(var(--ax-sys-color-primary-lightest-surface)))}ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system){border-bottom-left-radius:1rem;border-bottom-right-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system){border-bottom-right-radius:1rem;border-bottom-left-radius:.25rem}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):before{left:auto;right:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-received:not(.message-system):after{left:auto;right:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-right-radius:0;border-bottom-left-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):before{right:auto;left:var(--ax-comp-message-bubble-tail-fill-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-curve)}[dir=rtl] ax-conversation-message-list .message-bubble-sent:not(.message-system):after{right:auto;left:var(--ax-comp-message-bubble-tail-cutout-offset);border-bottom-left-radius:0;border-bottom-right-radius:var(--ax-comp-message-bubble-tail-cutout-curve)}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-own .message-bubble{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-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-bubble:focus-visible,ax-conversation-message-list .add-reaction-button: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 .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}}.reaction-picker-popup{width:max-content;min-width:calc(var(--spacing, .25rem) * 0);overflow:hidden;border-radius:.65rem;background-color:rgba(var(--ax-sys-color-lightest-surface));max-width:min(260px,92vw)}.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)}.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%}.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)}.picker-close:hover{background-color:rgba(var(--ax-sys-color-danger-lightest-surface));color:rgba(var(--ax-sys-color-danger-500))}.picker-close:focus-visible,.reaction-picker-emoji:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.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)}.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}.reaction-picker-emoji:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}.reaction-picker-emoji-active{background-color:rgba(var(--ax-sys-color-surface))}.reaction-picker-emoji-active:hover{background:rgba(var(--ax-sys-color-primary-500),.25)}}@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"] }] } });
 
 /**
@@ -8888,9 +9111,21 @@ class AXConversationItemComponent {
         ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
         /** Typing indicator text - delegate to utils */
         this.typingText = computed(() => {
-            return AXConversationMessageUtilsService.getTypingText(this.liveConversation());
+            this.conversationService.typingRevision();
+            const conv = this.liveConversation();
+            return AXConversationMessageUtilsService.getTypingText(conv, this.conversationService.getActiveTypingUserIds(conv.id));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "typingText" }] : /* istanbul ignore next */ []));
+        this.isTyping = computed(() => {
+            this.conversationService.typingRevision();
+            return this.conversationService.isAnyoneTyping(this.liveConversation().id);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTyping" }] : /* istanbul ignore next */ []));
+        this.roomPreferences = computed(() => {
+            const conv = this.liveConversation();
+            return this.conversationService.getRoomPreferences(conv.id);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "roomPreferences" }] : /* istanbul ignore next */ []));
         /** Last message preview - delegate to utils */
         this.lastMessagePreview = computed(() => {
             const lastMessage = this.liveConversation().lastMessage;
@@ -8966,7 +9201,7 @@ class AXConversationItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXConversationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXConversationItemComponent, isStandalone: true, selector: "ax-conversation-item", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "    <div\n      [class]=\"itemClasses()\"\n      [id]=\"'conversation-item-' + conversation().id\"\n      (click)=\"handleClick()\"\n      (keydown.enter)=\"handleClick()\"\n      (keydown.space)=\"handleClick()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"'Conversation with ' + conversation().title\"\n    >\n      <!-- Avatar -->\n      <div class=\"item-avatar\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"liveConversation()\"\n          [size]=\"48\"\n          [showStatus]=\"conversation().type === 'private'\"\n        />\n      </div>\n\n      <!-- Content -->\n      <div class=\"item-content\">\n        <div class=\"item-header\">\n          <span class=\"item-title\">\n            <p class=\"item-title-text\">{{ liveConversation().title }}</p>\n            @if (liveConversation().settings?.notifications === false) {\n              <i class=\"fa-light fa-bell-slash mute-icon\"></i>\n            }\n            @if (liveConversation()?.blocked) {\n              <i class=\"fa-ban fa-light block-icon\"></i>\n            }\n          </span>\n          @if (liveConversation().lastMessageAt) {\n            <span class=\"item-time\">{{ liveConversation().lastMessageAt | format: 'timeleft' | async }}</span>\n          }\n        </div>\n\n        <div class=\"item-description\">\n          @if (liveConversation().status.isTyping) {\n            <span class=\"typing-indicator\">{{ typingText() }}</span>\n          } @else if (liveConversation().lastMessage) {\n            @if (lastMessagePreview(); as preview) {\n              <span class=\"last-message\">\n                @if (preview.type !== 'text') {\n                  <i [class]=\"preview.icon\"></i>\n                }\n                @if (preview.type === 'text') {\n                  {{ preview.value }}\n                } @else {\n                  {{ getPreviewTypeKey(preview.type) | translate | async }}\n                }\n              </span>\n            }\n          } @else {\n            <span class=\"last-message no-message\">{{ '@acorex:chat.status.no-messages' | translate | async }}</span>\n          }\n          <!-- Badge -->\n          @if (liveConversation().unreadCount > 0) {\n            <div class=\"item-badge\">\n              <ax-badge [text]=\"liveConversation().unreadCount.toString()\" [color]=\"'primary'\" />\n            </div>\n          }\n          <!-- Pin Icon -->\n          @if (liveConversation().pinned) {\n            <i class=\"fa-light fa-thumbtack pin-icon\"></i>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Context Menu for Conversation Actions -->\n    <ax-context-menu\n      [target]=\"'#conversation-item-' + conversation().id\"\n      [openOn]=\"'click'\"\n      [closeOn]=\"'click'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onClose)=\"contextMenuOpen.set(false)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n", styles: ["@layer properties;@layer components{ax-conversation-item{display:block}ax-conversation-item .conversation-item{margin:calc(var(--spacing, .25rem) * 1.5);display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);transition:background .2s}ax-conversation-item .conversation-item:focus-visible,ax-conversation-item .conversation-item:hover{background-color:rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}ax-conversation-item .conversation-item-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-item .conversation-item-active:hover{background-color:rgba(var(--ax-sys-color-primary-lighter-surface))}ax-conversation-item .conversation-item-context-active{background-color:rgba(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}ax-conversation-item .conversation-item-active.conversation-item-context-active{background-color:rgba(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-item .item-avatar{flex-shrink:0}ax-conversation-item .item-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-item .item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-item .item-title{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-item .item-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-time{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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:70%}ax-conversation-item .item-description{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:.8125rem;opacity:70%}ax-conversation-item .typing-indicator{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));font-style:italic}ax-conversation-item .last-message{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-badge{flex-shrink:0}ax-conversation-item .mute-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-warning-500));opacity:60%}ax-conversation-item .block-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-danger-500));opacity:60%}ax-conversation-item .pin-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;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-primary-surface));opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@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-leading: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { 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: AXConversationItemComponent, isStandalone: true, selector: "ax-conversation-item", inputs: { conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "    <div\n      [class]=\"itemClasses()\"\n      [id]=\"'conversation-item-' + conversation().id\"\n      (click)=\"handleClick()\"\n      (keydown.enter)=\"handleClick()\"\n      (keydown.space)=\"handleClick()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"'Conversation with ' + conversation().title\"\n    >\n      <!-- Avatar -->\n      <div class=\"item-avatar\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"liveConversation()\"\n          [size]=\"48\"\n          [showStatus]=\"conversation().type === 'private'\"\n        />\n      </div>\n\n      <!-- Content -->\n      <div class=\"item-content\">\n        <div class=\"item-header\">\n          <span class=\"item-title\">\n            <p class=\"item-title-text\">{{ liveConversation().title }}</p>\n            @if (roomPreferences().notifications === false) {\n              <i class=\"fa-light fa-bell-slash mute-icon\"></i>\n            }\n            @if (liveConversation()?.blocked) {\n              <i class=\"fa-ban fa-light block-icon\"></i>\n            }\n          </span>\n          @if (liveConversation().lastMessageAt) {\n            <span class=\"item-time\">{{ liveConversation().lastMessageAt | format: 'timeleft' | async }}</span>\n          }\n        </div>\n\n        <div class=\"item-description\">\n          @if (isTyping()) {\n            <span class=\"typing-indicator\">{{ typingText() }}</span>\n          } @else if (liveConversation().lastMessage) {\n            @if (lastMessagePreview(); as preview) {\n              <span class=\"last-message\">\n                @if (preview.type !== 'text') {\n                  <i [class]=\"preview.icon\"></i>\n                }\n                @if (preview.type === 'text') {\n                  {{ preview.value }}\n                } @else {\n                  {{ getPreviewTypeKey(preview.type) | translate | async }}\n                }\n              </span>\n            }\n          } @else {\n            <span class=\"last-message no-message\">{{ '@acorex:chat.status.no-messages' | translate | async }}</span>\n          }\n          <!-- Badge -->\n          @if (liveConversation().unreadCount > 0) {\n            <div class=\"item-badge\">\n              <ax-badge [text]=\"liveConversation().unreadCount.toString()\" [color]=\"'primary'\" />\n            </div>\n          }\n          <!-- Pin Icon -->\n          @if (liveConversation().pinned) {\n            <i class=\"fa-light fa-thumbtack pin-icon\"></i>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Context Menu for Conversation Actions -->\n    <ax-context-menu\n      [target]=\"'#conversation-item-' + conversation().id\"\n      [openOn]=\"'click'\"\n      [closeOn]=\"'click'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onClose)=\"contextMenuOpen.set(false)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n", styles: ["@layer properties;@layer components{ax-conversation-item{display:block}ax-conversation-item .conversation-item{margin:calc(var(--spacing, .25rem) * 1.5);display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);transition:background .2s}ax-conversation-item .conversation-item:focus-visible,ax-conversation-item .conversation-item:hover{background-color:rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}ax-conversation-item .conversation-item-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-item .conversation-item-active:hover{background-color:rgba(var(--ax-sys-color-primary-lighter-surface))}ax-conversation-item .conversation-item-context-active{background-color:rgba(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}ax-conversation-item .conversation-item-active.conversation-item-context-active{background-color:rgba(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-item .item-avatar{flex-shrink:0}ax-conversation-item .item-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-item .item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-item .item-title{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-item .item-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-time{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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:70%}ax-conversation-item .item-description{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:.8125rem;opacity:70%}ax-conversation-item .typing-indicator{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));font-style:italic}ax-conversation-item .last-message{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-badge{flex-shrink:0}ax-conversation-item .mute-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-warning-500));opacity:60%}ax-conversation-item .block-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-danger-500));opacity:60%}ax-conversation-item .pin-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;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-primary-surface));opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@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-leading: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { 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: AXConversationItemComponent, decorators: [{
             type: Component,
@@ -8979,7 +9214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXDateTimeModule,
                         AXTranslationModule,
                         AXConversationAvatarComponent,
-                    ], template: "    <div\n      [class]=\"itemClasses()\"\n      [id]=\"'conversation-item-' + conversation().id\"\n      (click)=\"handleClick()\"\n      (keydown.enter)=\"handleClick()\"\n      (keydown.space)=\"handleClick()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"'Conversation with ' + conversation().title\"\n    >\n      <!-- Avatar -->\n      <div class=\"item-avatar\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"liveConversation()\"\n          [size]=\"48\"\n          [showStatus]=\"conversation().type === 'private'\"\n        />\n      </div>\n\n      <!-- Content -->\n      <div class=\"item-content\">\n        <div class=\"item-header\">\n          <span class=\"item-title\">\n            <p class=\"item-title-text\">{{ liveConversation().title }}</p>\n            @if (liveConversation().settings?.notifications === false) {\n              <i class=\"fa-light fa-bell-slash mute-icon\"></i>\n            }\n            @if (liveConversation()?.blocked) {\n              <i class=\"fa-ban fa-light block-icon\"></i>\n            }\n          </span>\n          @if (liveConversation().lastMessageAt) {\n            <span class=\"item-time\">{{ liveConversation().lastMessageAt | format: 'timeleft' | async }}</span>\n          }\n        </div>\n\n        <div class=\"item-description\">\n          @if (liveConversation().status.isTyping) {\n            <span class=\"typing-indicator\">{{ typingText() }}</span>\n          } @else if (liveConversation().lastMessage) {\n            @if (lastMessagePreview(); as preview) {\n              <span class=\"last-message\">\n                @if (preview.type !== 'text') {\n                  <i [class]=\"preview.icon\"></i>\n                }\n                @if (preview.type === 'text') {\n                  {{ preview.value }}\n                } @else {\n                  {{ getPreviewTypeKey(preview.type) | translate | async }}\n                }\n              </span>\n            }\n          } @else {\n            <span class=\"last-message no-message\">{{ '@acorex:chat.status.no-messages' | translate | async }}</span>\n          }\n          <!-- Badge -->\n          @if (liveConversation().unreadCount > 0) {\n            <div class=\"item-badge\">\n              <ax-badge [text]=\"liveConversation().unreadCount.toString()\" [color]=\"'primary'\" />\n            </div>\n          }\n          <!-- Pin Icon -->\n          @if (liveConversation().pinned) {\n            <i class=\"fa-light fa-thumbtack pin-icon\"></i>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Context Menu for Conversation Actions -->\n    <ax-context-menu\n      [target]=\"'#conversation-item-' + conversation().id\"\n      [openOn]=\"'click'\"\n      [closeOn]=\"'click'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onClose)=\"contextMenuOpen.set(false)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n", styles: ["@layer properties;@layer components{ax-conversation-item{display:block}ax-conversation-item .conversation-item{margin:calc(var(--spacing, .25rem) * 1.5);display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);transition:background .2s}ax-conversation-item .conversation-item:focus-visible,ax-conversation-item .conversation-item:hover{background-color:rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}ax-conversation-item .conversation-item-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-item .conversation-item-active:hover{background-color:rgba(var(--ax-sys-color-primary-lighter-surface))}ax-conversation-item .conversation-item-context-active{background-color:rgba(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}ax-conversation-item .conversation-item-active.conversation-item-context-active{background-color:rgba(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-item .item-avatar{flex-shrink:0}ax-conversation-item .item-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-item .item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-item .item-title{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-item .item-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-time{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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:70%}ax-conversation-item .item-description{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:.8125rem;opacity:70%}ax-conversation-item .typing-indicator{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));font-style:italic}ax-conversation-item .last-message{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-badge{flex-shrink:0}ax-conversation-item .mute-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-warning-500));opacity:60%}ax-conversation-item .block-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-danger-500));opacity:60%}ax-conversation-item .pin-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;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-primary-surface));opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@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-leading: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "    <div\n      [class]=\"itemClasses()\"\n      [id]=\"'conversation-item-' + conversation().id\"\n      (click)=\"handleClick()\"\n      (keydown.enter)=\"handleClick()\"\n      (keydown.space)=\"handleClick()\"\n      role=\"button\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"'Conversation with ' + conversation().title\"\n    >\n      <!-- Avatar -->\n      <div class=\"item-avatar\">\n        <ax-conversation-avatar\n          kind=\"auto\"\n          [conversation]=\"liveConversation()\"\n          [size]=\"48\"\n          [showStatus]=\"conversation().type === 'private'\"\n        />\n      </div>\n\n      <!-- Content -->\n      <div class=\"item-content\">\n        <div class=\"item-header\">\n          <span class=\"item-title\">\n            <p class=\"item-title-text\">{{ liveConversation().title }}</p>\n            @if (roomPreferences().notifications === false) {\n              <i class=\"fa-light fa-bell-slash mute-icon\"></i>\n            }\n            @if (liveConversation()?.blocked) {\n              <i class=\"fa-ban fa-light block-icon\"></i>\n            }\n          </span>\n          @if (liveConversation().lastMessageAt) {\n            <span class=\"item-time\">{{ liveConversation().lastMessageAt | format: 'timeleft' | async }}</span>\n          }\n        </div>\n\n        <div class=\"item-description\">\n          @if (isTyping()) {\n            <span class=\"typing-indicator\">{{ typingText() }}</span>\n          } @else if (liveConversation().lastMessage) {\n            @if (lastMessagePreview(); as preview) {\n              <span class=\"last-message\">\n                @if (preview.type !== 'text') {\n                  <i [class]=\"preview.icon\"></i>\n                }\n                @if (preview.type === 'text') {\n                  {{ preview.value }}\n                } @else {\n                  {{ getPreviewTypeKey(preview.type) | translate | async }}\n                }\n              </span>\n            }\n          } @else {\n            <span class=\"last-message no-message\">{{ '@acorex:chat.status.no-messages' | translate | async }}</span>\n          }\n          <!-- Badge -->\n          @if (liveConversation().unreadCount > 0) {\n            <div class=\"item-badge\">\n              <ax-badge [text]=\"liveConversation().unreadCount.toString()\" [color]=\"'primary'\" />\n            </div>\n          }\n          <!-- Pin Icon -->\n          @if (liveConversation().pinned) {\n            <i class=\"fa-light fa-thumbtack pin-icon\"></i>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Context Menu for Conversation Actions -->\n    <ax-context-menu\n      [target]=\"'#conversation-item-' + conversation().id\"\n      [openOn]=\"'click'\"\n      [closeOn]=\"'click'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onClose)=\"contextMenuOpen.set(false)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n", styles: ["@layer properties;@layer components{ax-conversation-item{display:block}ax-conversation-item .conversation-item{margin:calc(var(--spacing, .25rem) * 1.5);display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);transition:background .2s}ax-conversation-item .conversation-item:focus-visible,ax-conversation-item .conversation-item:hover{background-color:rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}ax-conversation-item .conversation-item-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-on-primary-lightest-surface))}ax-conversation-item .conversation-item-active:hover{background-color:rgba(var(--ax-sys-color-primary-lighter-surface))}ax-conversation-item .conversation-item-context-active{background-color:rgba(var(--ax-sys-color-light-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.35)}ax-conversation-item .conversation-item-active.conversation-item-context-active{background-color:rgba(var(--ax-sys-color-primary-lighter-surface));box-shadow:inset 0 0 0 1px rgba(var(--ax-sys-color-primary-500),.45)}ax-conversation-item .item-avatar{flex-shrink:0}ax-conversation-item .item-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1);--tw-leading: 1.1rem;line-height:1.1rem}ax-conversation-item .item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-conversation-item .item-title{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-conversation-item .item-title-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-time{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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:70%}ax-conversation-item .item-description{display:flex;min-width:calc(var(--spacing, .25rem) * 0);align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:.8125rem;opacity:70%}ax-conversation-item .typing-indicator{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-primary-surface));font-style:italic}ax-conversation-item .last-message{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-conversation-item .item-badge{flex-shrink:0}ax-conversation-item .mute-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-warning-500));opacity:60%}ax-conversation-item .block-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);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-danger-500));opacity:60%}ax-conversation-item .pin-icon{margin-inline-start:calc(var(--spacing, .25rem) * 1.5);flex-shrink:0;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-primary-surface));opacity:60%}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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;}@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-leading: initial;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: true }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
@@ -9464,7 +9699,11 @@ var newConversationDialog_component = /*#__PURE__*/Object.freeze({
 
 /**
  * Participant Model
- * Represents a user/member in a conversation
+ * Membership in a conversation (identity fields are snapshots; live presence is on the user store).
+ */
+
+/**
+ * User presence — global per-user live state (not room-scoped).
  */
 
 function formatFileSize(bytes) {
@@ -12629,13 +12868,21 @@ const AX_CONVERSATION_INFO_BAR_SEARCH_ACTION = {
  */
 const AX_CONVERSATION_INFO_BAR_MUTE_ACTION = {
     id: 'mute',
-    label: (context) => context.conversation.settings.notifications ? '@acorex:chat.actions.mute' : '@acorex:chat.actions.unmute',
-    icon: (context) => (context.conversation.settings.notifications ? 'fa-light fa-bell-slash' : 'fa-light fa-bell'),
+    label: (context) => {
+        const notifications = inject(AXConversationService).getRoomPreferences(context.conversation.id).notifications;
+        return notifications ? '@acorex:chat.actions.mute' : '@acorex:chat.actions.unmute';
+    },
+    icon: (context) => {
+        const notifications = inject(AXConversationService).getRoomPreferences(context.conversation.id).notifications;
+        return notifications ? 'fa-light fa-bell-slash' : 'fa-light fa-bell';
+    },
     location: 'menu',
     priority: 90,
     handler: async (context) => {
-        await inject(AXConversationService).updateConversationSettings(context.conversation.id, {
-            notifications: !context.conversation.settings.notifications,
+        const service = inject(AXConversationService);
+        const currentNotifications = service.getRoomPreferences(context.conversation.id).notifications;
+        await service.updateConversationSettings(context.conversation.id, {
+            notifications: !currentNotifications,
         });
     },
 };
@@ -12916,9 +13163,13 @@ class AXConversationImageAttachmentComponent {
         this.displayUrl = computed(() => pickDisplayMediaUrl(this.resolvedUrl(), this.item().thumbnailUrl, this.item().url), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayUrl" }] : /* istanbul ignore next */ []));
         effect(() => {
-            this.displayUrl();
-            this.item().mediaId;
-            untracked(() => this.ready.set(false));
+            const url = this.displayUrl();
+            const mediaId = this.item().mediaId;
+            untracked(() => {
+                if (!url) {
+                    this.ready.set(false);
+                }
+            });
         });
     }
     onImageLoad() {
@@ -14132,9 +14383,12 @@ const AX_CONVERSATION_MESSAGE_FORWARD_ACTION = {
     icon: 'fa-light fa-share',
     priority: 75,
     visible: () => true,
-    enabled: () => true,
+    enabled: () => !inject(AXConversationService).isForwardingMessage(),
     handler: async (context) => {
         const conversationService = inject(AXConversationService);
+        if (conversationService.isForwardingMessage()) {
+            return;
+        }
         const { AXConversationForwardMessageDialogComponent } = await Promise.resolve().then(function () { return forwardMessageDialog_component; });
         await conversationService.popupService.open(AXConversationForwardMessageDialogComponent, {
             title: translateSync('@acorex:chat.dialog.forward-message.title'),
@@ -14337,15 +14591,20 @@ var fallbackRenderer_plugin = /*#__PURE__*/Object.freeze({
  */
 const AX_CONVERSATION_ITEM_MUTE_ACTION = {
     id: 'mute',
-    label: (context) => context.conversation.settings?.notifications === false
-        ? '@acorex:chat.actions.unmute'
-        : '@acorex:chat.actions.mute',
-    icon: (context) => context.conversation.settings?.notifications === false ? 'fa-light fa-bell-slash' : 'fa-light fa-bell',
+    label: (context) => {
+        const notifications = inject(AXConversationService).getRoomPreferences(context.conversation.id).notifications;
+        return notifications === false ? '@acorex:chat.actions.unmute' : '@acorex:chat.actions.mute';
+    },
+    icon: (context) => {
+        const notifications = inject(AXConversationService).getRoomPreferences(context.conversation.id).notifications;
+        return notifications === false ? 'fa-light fa-bell-slash' : 'fa-light fa-bell';
+    },
     tooltip: '@acorex:chat.tooltips.toggle-notifications',
     priority: 100,
     handler: async (context) => {
-        const currentNotifications = context.conversation.settings?.notifications ?? true;
-        await inject(AXConversationService).updateConversationSettings(context.conversation.id, {
+        const service = inject(AXConversationService);
+        const currentNotifications = service.getRoomPreferences(context.conversation.id).notifications;
+        await service.updateConversationSettings(context.conversation.id, {
             notifications: !currentNotifications,
         });
     },
@@ -14546,16 +14805,17 @@ class AXConversationDefaultConversationAvatarComponent {
             return resolveConversationPeerUserId(conversation, this.currentUserId());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "peerUserId" }] : /* istanbul ignore next */ []));
-        this.useUserAvatar = computed(() => {
-            const component = this.userAvatarComponent;
-            const peerId = this.peerUserId();
-            return component && peerId ? component : null;
-        }, /* @ts-ignore */
+        this.useUserAvatar = computed(() => this.userAvatarComponent ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useUserAvatar" }] : /* istanbul ignore next */ []));
         this.userAvatarInputs = computed(() => {
-            const userId = this.peerUserId() ?? '';
             const conversation = this.conversation();
-            const resolved = resolveUserAvatarDisplay(userId, conversation);
+            const peerId = this.peerUserId();
+            const userId = peerId ?? conversation?.id ?? '';
+            const resolved = peerId && conversation
+                ? resolveUserAvatarDisplay(peerId, conversation)
+                : conversation
+                    ? resolveConversationAvatarDisplay(conversation, this.currentUserId())
+                    : { name: '?', avatar: undefined, icon: undefined };
             return {
                 userId,
                 size: this.size(),
@@ -15013,5 +15273,5 @@ function getErrorMessage(code, params) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXConversationApi, AXConversationApiLoggerService, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationAvatarComponent, AXConversationAvatarPickerComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerGenerationStateService, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryComponentOutletComponent, AXConversationRegistryService, AXConversationService, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_BUILTIN_COMPOSER_TABS, 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_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_GROUP_ICON, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_DEFAULT_USER_ICON, 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_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_PEER_AVATAR_TYPES, 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, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, ensureConversationFileCatalogRegistered, fetchConversationMediaPage, fileItemFromUpload, filterMessagesByMediaCategory, filterSupplementalInfoPanelMessages, findExistingPrivateConversation, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationMediaCategories, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, hasRegistryComponent, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isConversationReactionsEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMessageDeliveryPending, isMessageListThemeBackground, isNonPersistableMediaUrl, isPickerItemReadyToSend, isSameMessageListBackground, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeInfoPanelMessages, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessageListBackgroundValue, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMessageFileType, resolveConversationPeerParticipant, resolveConversationPeerUserId, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveMessageListBackgroundRaw, resolveMessageListBackgroundStyle, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, shouldUseUserAvatarForConversation, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
+export { AXConversationApi, AXConversationApiLoggerService, AXConversationAudioAttachmentComponent, AXConversationAudioFileTypeProvider, AXConversationAudioPickerComponent, AXConversationAudioRendererComponent, AXConversationAvatarComponent, AXConversationAvatarPickerComponent, AXConversationBaseRegistry, AXConversationComposerActionRegistry, AXConversationComposerComponent, AXConversationComposerFileTypesProvider, AXConversationComposerGenerationStateService, AXConversationComposerPopupComponent, AXConversationComposerService, AXConversationComposerTabRegistry, AXConversationContainerComponent, AXConversationContainerDirective, AXConversationDateUtilsService, AXConversationEmojiTabComponent, AXConversationErrorHandlerService, AXConversationFallbackRendererComponent, AXConversationFileAttachmentComponent, AXConversationFileFileTypeProvider, AXConversationFilePickerComponent, AXConversationFileRendererComponent, AXConversationForwardMessageDialogComponent, AXConversationImageAttachmentComponent, AXConversationImageFileTypeProvider, AXConversationImagePickerComponent, AXConversationImageRendererComponent, AXConversationInfiniteScrollDirective, AXConversationInfoBarActionRegistry, AXConversationInfoBarComponent, AXConversationInfoBarSearchComponent, AXConversationInfoBarService, AXConversationItemActionRegistry, AXConversationLocationPickerComponent, AXConversationLocationRendererComponent, AXConversationMediaPlaybackInfoBarBannerComponent, AXConversationMessageActionRegistry, AXConversationMessageApi, AXConversationMessageListComponent, AXConversationMessageListNoActiveDefaultComponent, AXConversationMessageListService, AXConversationMessageRendererCopyHostComponent, AXConversationMessageRendererRegistry, AXConversationMessageRendererStateComponent, AXConversationMessageUtilsService, AXConversationModule, AXConversationNewDialogComponent, AXConversationPickerCaptionComponent, AXConversationPickerEmptyComponent, AXConversationPickerFooterComponent, AXConversationPickerHeaderComponent, AXConversationPickerShellComponent, AXConversationPickerToolbarComponent, AXConversationRealtimeApi, AXConversationRegistryComponentOutletComponent, AXConversationRegistryService, AXConversationService, AXConversationSidebarComponent, AXConversationSidebarService, AXConversationStickerRendererComponent, AXConversationStickerTabComponent, AXConversationSystemRendererComponent, AXConversationTabRegistry, AXConversationTextRendererComponent, AXConversationUserApi, AXConversationVideoAttachmentComponent, AXConversationVideoFileTypeProvider, AXConversationVideoPickerComponent, AXConversationVideoRendererComponent, AXConversationVoiceFileTypeProvider, AXConversationVoiceRecorderComponent, AXConversationVoiceRendererComponent, AX_CONVERSATION_AUDIO_CATALOG, AX_CONVERSATION_AUDIO_PRESENTATION, AX_CONVERSATION_AUDIO_RENDERER, AX_CONVERSATION_BUILTIN_COMPOSER_TABS, 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_DEFAULT_COMPOSER_ACTIONS, AX_CONVERSATION_DEFAULT_COMPOSER_TABS, AX_CONVERSATION_DEFAULT_CONVERSATION_ITEM_ACTIONS, AX_CONVERSATION_DEFAULT_CONVERSATION_TABS, AX_CONVERSATION_DEFAULT_GROUP_ICON, AX_CONVERSATION_DEFAULT_INFO_BAR_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_ACTIONS, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_THEME_BACKGROUND, AX_CONVERSATION_DEFAULT_MESSAGE_RENDERERS, AX_CONVERSATION_DEFAULT_ROOM_PREFERENCES, AX_CONVERSATION_DEFAULT_USER_ICON, 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_DELETE_ACTION, AX_CONVERSATION_MESSAGE_EDIT_ACTION, AX_CONVERSATION_MESSAGE_ERRORS, AX_CONVERSATION_MESSAGE_FORWARD_ACTION, AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS, AX_CONVERSATION_MESSAGE_REPLY_ACTION, AX_CONVERSATION_MESSAGE_TYPE_FILE_TYPE, AX_CONVERSATION_PEER_AVATAR_TYPES, 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, applyFileLocalPreview, applyLocalPreview, applyVideoLocalPreview, applyVoiceLocalPreview, audioItemFromUpload, bindMediaRendererContentState, buildMediaGalleryTiles, canShowRendererContentError, cleanupPickerUploads, conversationAudioUtilities, conversationFileUtilities, conversationImageUtilities, conversationVideoUtilities, conversationVoiceUtilities, copyWithFileTypeFallback, createConversationAudioFileType, createConversationFileFileType, createConversationImageFileType, createConversationVideoFileType, createConversationVoiceFileType, createLocalPreviewUrl, createObjectUrl, createPickerDragHandlers, createResolvedMediaUrlSignal, deleteUploadedPickerMedia, dismissComposerPickerHost, ensureConversationFileCatalogRegistered, fetchConversationMediaPage, fileItemFromUpload, filterMessagesByMediaCategory, filterSupplementalInfoPanelMessages, findExistingPrivateConversation, formatDuration, formatErrorMessage, formatFileByteSize, formatFileSize, formatMediaDuration, formatPickerValidationMessage, getConversationMediaCategories, getConversationProfileFields, getErrorMessage, getMessageAudioItems, getMessageVideoItems, getPickerCancelUploadLabel, getPrivatePeerParticipant, hasRegistryComponent, inferFileExtensionHintFromMessage, isAttachmentListCategory, isComposerTabEnabled, isConversationReactionsEnabled, isGenericPrivateConversationTitle, isGridMediaCategory, isMessageDeliveryPending, isMessageListThemeBackground, isNonPersistableMediaUrl, isPickerItemReadyToSend, isSameMessageListBackground, isUploadAborted, limitFilesToCapacity, mediaCopyText, mergeAudioUploadResult, mergeFileUploadResult, mergeInfoPanelMessages, mergeUploadResult, mergeVideoUploadResult, mergeVoiceUploadResult, mergeWithDefaults, messageContainsLink, normalizeAudioPayload, normalizeFilePayload, normalizeImagePayload, normalizeMessageListBackgroundValue, normalizeVideoPayload, notifyMaxFilesCapacityExceeded, notifyPickerValidationErrors, openWithFileType, pickDisplayMediaUrl, pickerItemToMediaReference, pickerItemToUploadResult, provideConversation, provideConversationComposerFileTypes, provideConversationFileCatalog, reportMediaLoadError, resolveComposerMaxFiles, resolveConversationAvatarDisplay, resolveConversationComposerTabs, resolveConversationForViewer, resolveConversationMessageFileType, resolveConversationPeerParticipant, resolveConversationPeerUserId, resolveConversationTitleForViewer, resolveGalleryImageUrl, resolveImageDisplayUrl, resolveMessageListBackgroundRaw, resolveMessageListBackgroundStyle, resolveParticipantProfile, resolvePersistableMediaUrl, resolvePersistedThumbnailUrl, resolvePrivatePeerParticipant, resolvePrivatePeerUserId, resolveUserAvatarDisplay, resolveVideoThumbnailUrl, revokeObjectUrl, revokePickerBlobPreviews, sanitizeInput, shouldUseUserAvatarForConversation, syncPlaybackInfoBarBanner, toUploaderReference as toMediaItemUploaderReference, toUploaderReference$1 as toUploaderReference, uploadPickerFile, validateConversationId, validateEmail, validateLatitude, validateLongitude, validateMessagePayload, validateMessageText, validateMessageType, validateUrl, validateUserId, validateUserIds, videoItemFromUpload };
 //# sourceMappingURL=acorex-components-conversation.mjs.map