@rt-tools/ui-kit-v2 0.40.0 → 0.41.0

package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs

@@ -248,6 +248,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const BEM_BLOCK$4 = "rt-message-composer";
+function rtComposerDeltaText(delta) {
+	return (delta?.ops ?? []).map((op) => op.insert).join("").replace(/\n$/, "");
+}
 function rtComposerWraps(node) {
 	const style = getComputedStyle(node);
 	const line = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
@@ -366,6 +369,9 @@ var RtMessageComposerComponent = class RtMessageComposerComponent {
 		const node = this.textInput()?.nativeElement;
 		if (node) rtCaretToEnd(node);
 	}
+	draftText() {
+		return this.formatting() ? rtComposerDeltaText(this.form.controls.delta.value) : this.form.controls.message.value;
+	}
 	onKeydown(event) {
 		if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
 			event.preventDefault();
@@ -1041,6 +1047,30 @@ function rtChatDayLabels(messages, now, locale) {
 	}
 	return labels;
 }
+function rtChatReadDraft(fields) {
+	if (fields.messenger) return fields.prompt?.text() ?? "";
+	if (fields.rich) return fields.composer?.draftText() ?? "";
+	return fields.message.value;
+}
+function rtChatWriteDraft(fields, text) {
+	if (fields.messenger) {
+		fields.prompt?.setDraft(text);
+		return;
+	}
+	if (fields.rich) {
+		fields.composer?.setDraft(text);
+		return;
+	}
+	fields.message.setValue(text);
+	if (fields.textarea) rtCaretToEnd(fields.textarea);
+}
+function rtChatSyncReplyDisabled(form, blocked) {
+	if (blocked && form.enabled) {
+		form.disable({ emitEvent: false });
+		return;
+	}
+	if (!blocked && form.disabled) form.enable({ emitEvent: false });
+}
 const RT_CHAT_PIN_RETRY_DELAYS_MS = [
 	50,
 	150,
@@ -1131,6 +1161,7 @@ var RtChatComponent = class RtChatComponent {
 	#follow;
 	#typingTracker;
 	#formValue;
+	#replyFields;
 	#defaultTitle;
 	#defaultPlaceholder;
 	#defaultEmptyHint;
@@ -1139,6 +1170,14 @@ var RtChatComponent = class RtChatComponent {
 		this.locale = inject(RT_KIT_LOCALE);
 		this.#follow = new RtChatThreadFollow();
 		this.#typingTracker = new RtChatTypingTracker((typing) => this.typing.emit(typing));
+		this.#replyFields = computed(() => ({
+			messenger: this.messenger(),
+			rich: this.richComposer(),
+			prompt: this.promptInput(),
+			composer: this.messageComposer(),
+			message: this.replyForm.controls.message,
+			textarea: this.composerInputEl()?.nativeElement
+		}), ...ngDevMode ? [{ debugName: "#replyFields" }] : /* istanbul ignore next */ []);
 		this.thread = viewChild("thread", ...ngDevMode ? [{ debugName: "thread" }] : /* istanbul ignore next */ []);
 		this.composerFileEl = viewChild("composerFileEl", ...ngDevMode ? [{ debugName: "composerFileEl" }] : /* istanbul ignore next */ []);
 		this.composerInputEl = viewChild("composerInputEl", ...ngDevMode ? [{ debugName: "composerInputEl" }] : /* istanbul ignore next */ []);
@@ -1247,28 +1286,13 @@ var RtChatComponent = class RtChatComponent {
 			this.expanded();
 			this.#follow.rendered(() => this.thread()?.nativeElement);
 		});
-		effect(() => {
-			const blocked = this.composerDisabled();
-			if (blocked && this.replyForm.enabled) {
-				this.replyForm.disable({ emitEvent: false });
-				return;
-			}
-			if (!blocked && this.replyForm.disabled) this.replyForm.enable({ emitEvent: false });
-		});
+		effect(() => rtChatSyncReplyDisabled(this.replyForm, this.composerDisabled()));
 	}
 	setDraft(text) {
-		if (!this.hasThread() || !this.canReply() || this.composerDisabled()) return;
-		if (this.messenger()) {
-			this.promptInput()?.setDraft(text);
-			return;
-		}
-		if (this.richComposer()) {
-			this.messageComposer()?.setDraft(text);
-			return;
-		}
-		this.replyForm.controls.message.setValue(text);
-		const node = this.composerInputEl()?.nativeElement;
-		if (node) rtCaretToEnd(node);
+		if (this.hasThread() && this.canReply() && !this.composerDisabled()) rtChatWriteDraft(this.#replyFields(), text);
+	}
+	draftText() {
+		return this.hasThread() && this.canReply() ? rtChatReadDraft(this.#replyFields()) : "";
 	}
 	onSubmit() {
 		if (!this.canSend()) return;
@@ -1581,8 +1605,8 @@ var RtChatComponent = class RtChatComponent {
 				}
 			],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-chat\">\n    <rt-file-drop\n        [overlayLabel]=\"t().chatDropOverlay\"\n        [accept]=\"accept()\"\n        [disabled]=\"dropDisabled()\"\n        (filesDropped)=\"onFilesDropped($event)\">\n        @if (showHeader()) {\n            <rt-toolbar rtElem=\"header\" dense>\n                <ng-template rtToolbarLeft>\n                    @if (sign(); as channel) {\n                        <rt-service-logo rtElem=\"sign\" qa-dataid=\"chat-sign\" size=\"xs\" [logos]=\"[channel]\" />\n                    }\n                    <div rtElem=\"names\">\n                        <h3 rtElem=\"title\" qa-dataid=\"chat-title\" rtTooltipWhenTruncated [rtTooltip]=\"title()\">{{ title() }}</h3>\n                        <p rtElem=\"subtitle\" qa-dataid=\"chat-subtitle\" [hidden]=\"!subtitle()\">{{ subtitle() }}</p>\n                    </div>\n                </ng-template>\n                <ng-template rtToolbarRight>\n                    @if (showRefresh()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-refresh\"\n                            icon=\"sync\"\n                            variant=\"ghost\"\n                            [ariaLabel]=\"t().chatRefreshAria\"\n                            [tooltip]=\"t().chatRefreshTooltip\"\n                            [loading]=\"fetching()\"\n                            [disabled]=\"!hasThread()\"\n                            (clicked)=\"refresh.emit()\" />\n                    }\n                    @if (showExpand()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-expand\"\n                            variant=\"ghost\"\n                            [icon]=\"expanded() ? 'window-minimize' : 'window-maximize'\"\n                            [ariaLabel]=\"expandLabel()\"\n                            [tooltip]=\"expandLabel()\"\n                            (clicked)=\"toggleExpand()\" />\n                    }\n                    <ng-content select=\"[rtChatHeaderActions]\" />\n                </ng-template>\n            </rt-toolbar>\n        }\n\n        @if (!hasThread()) {\n            <rt-note qa-dataid=\"chat-empty-hint\">{{ emptyHint() }}</rt-note>\n        } @else {\n            <div rtElem=\"thread-viewport\" qa-dataid=\"chat-thread-viewport\">\n                @if (loading()) {\n                    <!-- Скелетон повторяет структуру сообщения (автор → текст → дата),\n                 чередуя выравнивание, чтобы тред не «прыгал» при подмене на реальные. -->\n                    <div rtElem=\"thread\" qa-dataid=\"chat-thread-skeleton\">\n                        @for (row of skeletonRows; track row; let even = $even) {\n                            <div rtElem=\"message-skeleton\" qa-dataid=\"chat-message-skeleton\" [rtMod]=\"{ own: even }\">\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"72px\" height=\"10px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"100%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"55%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"56px\" height=\"10px\" [isLoading]=\"true\" />\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <div\n                        #thread\n                        rtElem=\"thread\"\n                        qa-dataid=\"chat-thread\"\n                        [rtMod]=\"{ frozen: fetching() }\"\n                        [attr.aria-busy]=\"fetching() ? 'true' : null\"\n                        (scroll)=\"onThreadScroll()\">\n                        @for (m of messages(); track m.id) {\n                            <div rtElem=\"day\" qa-dataid=\"chat-day\" [hidden]=\"!dayLabels().has(m.id)\">\n                                <span rtElem=\"day-label\">{{ dayLabels().get(m.id) }}</span>\n                            </div>\n                            <div\n                                rtElem=\"message-row\"\n                                qa-dataid=\"chat-message\"\n                                [attr.data-own]=\"m.own\"\n                                [attr.data-status]=\"m.status || null\"\n                                [attr.data-deleted]=\"m.deleted || null\"\n                                [rtMod]=\"{ own: m.own }\">\n                                @if (m.canDelete && !m.deleted) {\n                                    @if (m.deleteConfirm) {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            [rtConfirm]=\"m.deleteConfirm\"\n                                            (confirmed)=\"deleteMessage.emit(m)\" />\n                                    } @else {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            (clicked)=\"deleteMessage.emit(m)\" />\n                                    }\n                                }\n                                @if ((messageActions() || messageButtons()) && (m | rtChatMessageHasActions: messageHasActions())) {\n                                    <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"messageButtons()?.template ?? null\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                        @if (messageActions()?.template; as actionsTpl) {\n                                            <rt-menu\n                                                [icon]=\"messenger() ? 'ellipsis-v' : 'ellipsis-h'\"\n                                                [triggerSize]=\"messenger() ? 'sm' : 'md'\">\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        }\n                                    </div>\n                                }\n                                <div rtElem=\"message\" [rtMod]=\"{ own: m.own, deleted: m.deleted }\">\n                                    <p rtElem=\"message-author\" qa-dataid=\"chat-message-author\">{{ m.author }}</p>\n                                    @if (m.deleted) {\n                                        <p rtElem=\"message-text\" qa-dataid=\"chat-message-deleted\" rtMod=\"deleted\">\n                                            {{ t().chatMessageDeleted }}\n                                        </p>\n                                    } @else {\n                                        @if (m.delta) {\n                                            <rt-delta-view rtElem=\"message-text\" qa-dataid=\"chat-message-text\" [delta]=\"m.delta\" />\n                                        } @else {\n                                            <p rtElem=\"message-text\" qa-dataid=\"chat-message-text\">{{ m.text }}</p>\n                                        }\n                                        @if (m.attachments?.length) {\n                                            @for (att of m.attachments; track att.id) {\n                                                <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                    <rt-file-card\n                                                        showDownload\n                                                        size=\"sm\"\n                                                        [name]=\"att.name || attachmentFallbackName()\"\n                                                        (download)=\"downloadAttachment.emit(att)\" />\n                                                </span>\n                                            }\n                                        } @else if (m.fileUrl) {\n                                            <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                <rt-file-card\n                                                    showDownload\n                                                    size=\"sm\"\n                                                    [name]=\"m.fileName || attachmentFallbackName()\"\n                                                    (download)=\"downloadFile.emit(m)\" />\n                                            </span>\n                                        }\n                                        @if (m.deepLink) {\n                                            <span rtElem=\"message-deeplink\">\n                                                <a\n                                                    rtButton\n                                                    qa-dataid=\"chat-message-deeplink\"\n                                                    appearance=\"outlined\"\n                                                    icon=\"send\"\n                                                    rel=\"noopener\"\n                                                    target=\"_blank\"\n                                                    [href]=\"m.deepLink\"\n                                                    [label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"\n                                                    [attr.aria-label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"></a>\n                                            </span>\n                                        }\n                                    }\n                                    <span rtElem=\"message-footer\">\n                                        <span rtElem=\"message-date\" qa-dataid=\"chat-message-date\">\n                                            {{ m.createdAt | date: (messenger() ? 'shortTime' : 'short') : undefined : locale() }}\n                                        </span>\n                                        @if (m.status) {\n                                            <span\n                                                rtElem=\"message-status\"\n                                                qa-dataid=\"chat-message-status\"\n                                                [attr.data-status]=\"m.status\"\n                                                [rtMod]=\"{ status: m.status }\"\n                                                [attr.aria-label]=\"m.status | rtChatStatusLabel\">\n                                                @if (m.status === MessageStatus.Failed) {\n                                                    <rt-icon rtElem=\"status-icon\" name=\"exclamation-circle\" size=\"sm\" />\n                                                    <rt-icon-button\n                                                        qa-dataid=\"chat-message-retry\"\n                                                        icon=\"sync\"\n                                                        variant=\"ghost\"\n                                                        [ariaLabel]=\"t().chatRetryAria\"\n                                                        [tooltip]=\"t().chatRetryTooltip\"\n                                                        (clicked)=\"retryMessage.emit(m)\" />\n                                                } @else if (m.status === MessageStatus.Undelivered) {\n                                                    <!-- Ответ записан, служба собеседника его не приняла: подпись видна глазом,\n                                                         повтора нет — он записал бы ответ второй раз. -->\n                                                    <rt-icon rtElem=\"status-icon\" name=\"warning\" size=\"sm\" />\n                                                    <span rtElem=\"status-caption\" qa-dataid=\"chat-message-undelivered\">\n                                                        {{ t().chatStatusUndelivered }}\n                                                    </span>\n                                                } @else {\n                                                    <!-- Часы, пока сообщение в пути; дальше двойной чек, цвет которого\n                                                         (серый/синий) различает доставлено и прочитано. -->\n                                                    <rt-icon\n                                                        rtElem=\"status-icon\"\n                                                        [size]=\"messenger() ? 'xs' : 'sm'\"\n                                                        [name]=\"m.status === MessageStatus.Sending ? 'clock' : 'check-double'\" />\n                                                }\n                                            </span>\n                                        }\n                                    </span>\n                                </div>\n                            </div>\n                        } @empty {\n                            <rt-note qa-dataid=\"chat-empty-thread\">{{ t().chatEmptyThread }}</rt-note>\n                        }\n                    </div>\n                }\n                @if (!loading() && fetching()) {\n                    <div rtElem=\"thread-overlay\" qa-dataid=\"chat-thread-overlay\" role=\"status\" [attr.aria-label]=\"t().chatRefreshAria\">\n                        <rt-spinner diameter=\"32\" />\n                    </div>\n                }\n                <div rtElem=\"typing\" qa-dataid=\"chat-typing\" aria-live=\"polite\" [rtMod]=\"{ shown: typingText() !== '' }\">\n                    {{ typingText() }}\n                </div>\n            </div>\n\n            @if (canReply()) {\n                @if (messenger()) {\n                    <!-- Поле ответа мессенджера: одна рамка, скрепка и кнопки потребителя внутри неё слева -->\n                    <input\n                        #composerFileEl\n                        qa-dataid=\"chat-composer-tools-file-input\"\n                        type=\"file\"\n                        hidden\n                        multiple\n                        [attr.accept]=\"accept() || null\"\n                        (change)=\"onFilesPicked($event)\" />\n                    <rt-ai-prompt-input\n                        rtElem=\"composer-prompt\"\n                        qa-dataid=\"chat-composer-prompt\"\n                        hint=\"\"\n                        [placeholder]=\"placeholder()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\">\n                        <rt-icon-button\n                            rtPromptInputStart\n                            qa-dataid=\"chat-composer-tools-attach\"\n                            icon=\"paperclip\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            iconColor=\"muted\"\n                            [hidden]=\"!attachments()\"\n                            [ariaLabel]=\"t().chatAttachAria\"\n                            [tooltip]=\"t().chatAttachTooltip\"\n                            [disabled]=\"composerDisabled()\"\n                            (clicked)=\"openFilePicker()\" />\n                        <ng-container ngProjectAs=\"[rtPromptInputStart]\">\n                            <ng-content select=\"[rtChatComposerTools]\" />\n                        </ng-container>\n                    </rt-ai-prompt-input>\n                } @else if (richComposer()) {\n                    <rt-message-composer\n                        rtElem=\"composer-rich\"\n                        qa-dataid=\"chat-composer-rich\"\n                        [placeholder]=\"placeholder()\"\n                        [accept]=\"accept()\"\n                        [attachments]=\"attachments()\"\n                        [formatting]=\"formatting()\"\n                        [toolbar]=\"formattingToolbar()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        [droppedFiles]=\"droppedFiles()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\" />\n                } @else {\n                    <form\n                        rtElem=\"composer\"\n                        qa-dataid=\"chat-composer\"\n                        [formGroup]=\"replyForm\"\n                        (ngSubmit)=\"onSubmit()\"\n                        (input)=\"onReplyInput($event)\">\n                        @if (attachments() && selectedFiles().length > 0) {\n                            <div rtElem=\"composer-files\" qa-dataid=\"chat-composer-files\">\n                                @for (file of selectedFiles(); track $index) {\n                                    <rt-file-card\n                                        showRemove\n                                        qa-dataid=\"chat-composer-file\"\n                                        size=\"sm\"\n                                        [name]=\"file.name\"\n                                        [sizeBytes]=\"file.size\"\n                                        [disabled]=\"composerDisabled()\"\n                                        (removed)=\"removeFile($index)\" />\n                                }\n                            </div>\n                        }\n                        <div rtElem=\"composer-field\" [rtMod]=\"{ attach: attachments() }\">\n                            @if (attachments()) {\n                                <input\n                                    #composerFileEl\n                                    qa-dataid=\"chat-composer-file-input\"\n                                    type=\"file\"\n                                    hidden\n                                    multiple\n                                    [attr.accept]=\"accept() || null\"\n                                    (change)=\"onFilesPicked($event)\" />\n                                <rt-icon-button\n                                    qa-dataid=\"chat-composer-attach\"\n                                    icon=\"paperclip\"\n                                    variant=\"ghost\"\n                                    [ariaLabel]=\"t().chatAttachAria\"\n                                    [tooltip]=\"t().chatAttachTooltip\"\n                                    [disabled]=\"composerDisabled()\"\n                                    (clicked)=\"openFilePicker()\" />\n                            }\n                            <textarea\n                                #composerInputEl\n                                rtElem=\"composer-input\"\n                                qa-dataid=\"chat-composer-input\"\n                                cdkTextareaAutosize\n                                formControlName=\"message\"\n                                cdkAutosizeMinRows=\"1\"\n                                cdkAutosizeMaxRows=\"4\"\n                                [attr.aria-label]=\"t().chatComposerAria\"\n                                [placeholder]=\"placeholder()\"\n                                (keydown)=\"onComposerKeydown($event)\"></textarea>\n                        </div>\n                        <button\n                            rtButton\n                            rtElem=\"composer-send\"\n                            qa-dataid=\"chat-composer-send\"\n                            type=\"submit\"\n                            theme=\"primary\"\n                            appearance=\"filled\"\n                            [label]=\"t().chatSendLabel\"\n                            [attr.aria-label]=\"t().chatSendAria\"\n                            [loading]=\"sending()\"\n                            [disabled]=\"!canSend()\"></button>\n                    </form>\n                }\n            } @else if (replyBlockReason()) {\n                <rt-note rtElem=\"reply-block\" qa-dataid=\"chat-reply-block\">{{ replyBlockReason() }}</rt-note>\n            }\n\n            <!-- Слот доменных действий потребителя под композером: в fullscreen\n                 попадает внутрь overlay, поэтому кнопки остаются видны. -->\n            <div rtElem=\"footer-slot\" qa-dataid=\"chat-footer\" [rtMod]=\"{ blocked: fetching() }\" [attr.inert]=\"fetching() ? '' : null\">\n                <ng-content select=\"[rtChatFooter]\" />\n            </div>\n        }\n    </rt-file-drop>\n</ng-container>\n",
-			styles: ["@layer rt-kit.components{.rt-chat{--rt-chat-bubble-radius: var(--rt-radius-lg);--rt-chat-message-border-width: var(--rt-border-width-thin);--rt-chat-transition-duration: var(--rt-duration-fast);--rt-chat-typing-radius: var(--rt-radius-full);--rt-chat-typing-shadow: var(--rt-shadow-sm);display:flex;flex-direction:column}.rt-chat>.rt-file-drop{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0}.rt-chat--expanded{position:fixed;z-index:var(--rt-z-modal);box-sizing:border-box;padding:var(--rt-space-md);background:var(--rt-color-bg-surface);inset:0}.rt-chat--expanded>.rt-file-drop{block-size:100%}@container rt-place (width > 1440px){.rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}@media(width>1440px){:where(html:not(:has(.rt-container))) .rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}.rt-chat--expanded .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--expanded .rt-chat__thread{max-height:none}.rt-chat--fill{block-size:100%}.rt-chat--fill .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--fill .rt-chat__thread{max-height:none}.rt-chat__sign{flex:none}.rt-chat__title{overflow:hidden;margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__names{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-chat__subtitle{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__subtitle[hidden]{display:none}.rt-chat__thread-viewport{position:relative;display:flex;flex-direction:column;contain:inline-size;min-block-size:0}.rt-chat__thread{display:flex;max-height:280px;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0;overflow-y:auto}.rt-chat__thread--frozen{overflow-y:hidden}.rt-chat__thread-overlay{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}.rt-chat__typing{position:absolute;z-index:1;bottom:var(--rt-space-1);left:var(--rt-space-2);box-sizing:border-box;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);max-inline-size:calc(100% - 2 * var(--rt-space-2));overflow-wrap:anywhere;pointer-events:none}.rt-chat__typing--shown{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-chat-typing-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-typing-shadow)}.rt-chat__footer-slot{display:flex;flex-direction:column}.rt-chat__footer-slot:empty{display:none}.rt-chat__footer-slot--blocked{opacity:.6;pointer-events:none}.rt-chat__message-row{display:flex;max-width:min(80%,480px);align-items:center;align-self:flex-start;gap:var(--rt-space-2)}.rt-chat__message-row--own{align-self:flex-end}.rt-chat__message-row:hover .rt-chat__message-delete,.rt-chat__message-row:focus-within .rt-chat__message-delete,.rt-chat__message-row:hover .rt-chat__message-actions,.rt-chat__message-row:focus-within .rt-chat__message-actions{opacity:1;pointer-events:auto}.rt-chat__message{display:flex;min-width:0;flex:0 1 auto;flex-direction:column;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-2)}.rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__message--deleted{border:var(--rt-chat-message-border-width) dashed var(--rt-color-border-default);background:transparent}.rt-chat__message-author{margin:0;color:var(--rt-chat-bubble-in-author);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-chat__message--own .rt-chat__message-author{color:var(--rt-chat-bubble-own-author)}.rt-chat__message-text{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-wrap}.rt-chat__message-text--deleted{color:var(--rt-color-text-muted);font-style:italic}.rt-chat__message-delete,.rt-chat__message-actions{flex:0 0 auto;opacity:0;pointer-events:none;transition:opacity var(--rt-chat-transition-duration) ease}.rt-chat__message-attachment{display:block}.rt-chat__message-footer{display:flex;align-items:center;gap:var(--rt-space-1)}.rt-chat__message-date{color:var(--rt-chat-bubble-date);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-status{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);gap:var(--rt-space-0-5)}.rt-chat__message-status--status--read{color:var(--rt-chat-status-read)}.rt-chat__message-status--status--failed{color:var(--rt-color-state-danger)}.rt-chat__message-status--status--undelivered{color:var(--rt-color-state-warning-text)}.rt-chat__status-icon{font-size:var(--rt-text-sm)}.rt-chat__status-caption{font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-skeleton{display:flex;max-width:min(80%,480px);flex-direction:column;align-self:flex-start;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-1)}.rt-chat__message-skeleton--own{align-self:flex-end;border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__skeleton-line{display:block}.rt-chat__message-deeplink{display:flex;justify-content:flex-start;margin-top:var(--rt-space-1)}.rt-chat__composer,.rt-chat__composer-rich,.rt-chat__reply-block{margin-top:var(--rt-space-4)}.rt-chat__composer{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-chat__composer-files{display:flex;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-chat__composer-field{display:flex;box-sizing:border-box;align-items:center;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);gap:var(--rt-space-1);min-block-size:var(--rt-input-height);padding-inline:var(--rt-input-padding-x);transition:var(--rt-input-transition)}.rt-chat__composer-field:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-chat__composer-field--attach{padding-inline-start:var(--rt-space-1)}.rt-chat__composer-input{box-sizing:content-box;flex:1 1 auto;border:0;background:transparent;color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-textarea-line-height);padding-block:var(--rt-space-2);resize:none}.rt-chat__composer-input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-chat__composer-input:focus-visible{outline:none}.rt-chat__composer-input:disabled{cursor:not-allowed}.rt-chat__composer-send{inline-size:100%}}\n", "@layer rt-kit.components{.rt-chat{--rt-chat-day-label-radius: var(--rt-radius-full)}.rt-chat__day[hidden]{display:none}.rt-chat__composer-prompt{flex:0 0 auto}.rt-chat__day{display:flex;justify-content:center;padding-block-end:var(--rt-space-2)}.rt-chat__day-label{padding:var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));border-radius:var(--rt-chat-day-label-radius);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-chat__day-label:first-letter{text-transform:uppercase}.rt-chat--messenger{--rt-chat-bubble-radius: var(--rt-radius-xl);--rt-chat-bubble-corner-radius: var(--rt-radius-sm);--rt-chat-messenger-border-width: var(--rt-border-width-thin);--rt-chat-messenger-panel-radius: var(--rt-radius-lg);--rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);--rt-chat-bubble-own-bg: var(--rt-color-action-primary);--rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);box-sizing:border-box;padding:var(--rt-space-4)}.rt-chat--messenger .rt-chat__header{--rt-toolbar-height: auto;--rt-toolbar-padding-top: 0;--rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));border-block-end:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle)}.rt-chat--messenger .rt-chat__header .rt-toolbar__bar--left{gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__thread{padding:var(--rt-space-5) var(--rt-space-6);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-1)}.rt-chat--messenger .rt-chat__thread>:first-child{margin-block-start:auto}.rt-chat--messenger .rt-chat__message{padding:var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row--own+.rt-chat__day[hidden]+.rt-chat__message-row:not(.rt-chat__message-row--own),.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own)+.rt-chat__day[hidden]+.rt-chat__message-row--own{margin-block-start:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius) var(--rt-chat-bubble-radius);box-shadow:none}.rt-chat--messenger .rt-chat__title{line-height:var(--rt-leading-normal)}.rt-chat--messenger .rt-chat__subtitle{line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-text{font-size:var(--rt-text-sm);line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-text,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{color:var(--rt-color-action-on-primary)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date{opacity:.75}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{opacity:.85}.rt-chat--messenger .rt-chat__message-footer{justify-content:flex-end}.rt-chat--messenger .rt-chat__message-actions{display:flex;align-items:center;padding:var(--rt-space-0-5);border:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-messenger-actions-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own) .rt-chat__message-actions{order:1}.rt-chat--messenger .rt-chat__message-date{font-size:var(--rt-text-2xs);line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-author{display:none}}\n"],
+			template: "<ng-container rtBlock=\"rt-chat\">\n    <rt-file-drop\n        [overlayLabel]=\"t().chatDropOverlay\"\n        [accept]=\"accept()\"\n        [disabled]=\"dropDisabled()\"\n        (filesDropped)=\"onFilesDropped($event)\">\n        @if (showHeader()) {\n            <rt-toolbar rtElem=\"header\" dense>\n                <ng-template rtToolbarLeft>\n                    @if (sign(); as channel) {\n                        <rt-service-logo rtElem=\"sign\" qa-dataid=\"chat-sign\" size=\"xs\" [logos]=\"[channel]\" />\n                    }\n                    <div rtElem=\"names\">\n                        <h3 rtElem=\"title\" qa-dataid=\"chat-title\" rtTooltipWhenTruncated [rtTooltip]=\"title()\">{{ title() }}</h3>\n                        <p rtElem=\"subtitle\" qa-dataid=\"chat-subtitle\" [hidden]=\"!subtitle()\">{{ subtitle() }}</p>\n                    </div>\n                </ng-template>\n                <ng-template rtToolbarRight>\n                    @if (showRefresh()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-refresh\"\n                            icon=\"sync\"\n                            variant=\"ghost\"\n                            [ariaLabel]=\"t().chatRefreshAria\"\n                            [tooltip]=\"t().chatRefreshTooltip\"\n                            [loading]=\"fetching()\"\n                            [disabled]=\"!hasThread()\"\n                            (clicked)=\"refresh.emit()\" />\n                    }\n                    @if (showExpand()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-expand\"\n                            variant=\"ghost\"\n                            [icon]=\"expanded() ? 'window-minimize' : 'window-maximize'\"\n                            [ariaLabel]=\"expandLabel()\"\n                            [tooltip]=\"expandLabel()\"\n                            (clicked)=\"toggleExpand()\" />\n                    }\n                    <ng-content select=\"[rtChatHeaderActions]\" />\n                </ng-template>\n            </rt-toolbar>\n        }\n\n        @if (!hasThread()) {\n            <rt-note qa-dataid=\"chat-empty-hint\">{{ emptyHint() }}</rt-note>\n        } @else {\n            <div rtElem=\"thread-viewport\" qa-dataid=\"chat-thread-viewport\">\n                @if (loading()) {\n                    <!-- Скелетон повторяет структуру сообщения (автор → текст → дата),\n                 чередуя выравнивание, чтобы тред не «прыгал» при подмене на реальные. -->\n                    <div rtElem=\"thread\" qa-dataid=\"chat-thread-skeleton\">\n                        @for (row of skeletonRows; track row; let even = $even) {\n                            <div rtElem=\"message-skeleton\" qa-dataid=\"chat-message-skeleton\" [rtMod]=\"{ own: even }\">\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"72px\" height=\"10px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"100%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"55%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"56px\" height=\"10px\" [isLoading]=\"true\" />\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <div\n                        #thread\n                        rtElem=\"thread\"\n                        qa-dataid=\"chat-thread\"\n                        [rtMod]=\"{ frozen: fetching() }\"\n                        [attr.aria-busy]=\"fetching() ? 'true' : null\"\n                        (scroll)=\"onThreadScroll()\">\n                        @for (m of messages(); track m.id) {\n                            <div rtElem=\"day\" qa-dataid=\"chat-day\" [hidden]=\"!dayLabels().has(m.id)\">\n                                <span rtElem=\"day-label\">{{ dayLabels().get(m.id) }}</span>\n                            </div>\n                            <div\n                                rtElem=\"message-row\"\n                                qa-dataid=\"chat-message\"\n                                [attr.data-own]=\"m.own\"\n                                [attr.data-status]=\"m.status || null\"\n                                [attr.data-deleted]=\"m.deleted || null\"\n                                [rtMod]=\"{ own: m.own }\">\n                                @if (m.canDelete && !m.deleted) {\n                                    @if (m.deleteConfirm) {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            [rtConfirm]=\"m.deleteConfirm\"\n                                            (confirmed)=\"deleteMessage.emit(m)\" />\n                                    } @else {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            (clicked)=\"deleteMessage.emit(m)\" />\n                                    }\n                                }\n                                @if ((messageActions() || messageButtons()) && (m | rtChatMessageHasActions: messageHasActions())) {\n                                    <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"messageButtons()?.template ?? null\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                        @if (messageActions()?.template; as actionsTpl) {\n                                            <rt-menu\n                                                [icon]=\"messenger() ? 'ellipsis-v' : 'ellipsis-h'\"\n                                                [triggerSize]=\"messenger() ? 'sm' : 'md'\">\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        }\n                                    </div>\n                                }\n                                <div rtElem=\"message\" [rtMod]=\"{ own: m.own, deleted: m.deleted }\">\n                                    <p rtElem=\"message-author\" qa-dataid=\"chat-message-author\">{{ m.author }}</p>\n                                    @if (m.deleted) {\n                                        <p rtElem=\"message-text\" qa-dataid=\"chat-message-deleted\" rtMod=\"deleted\">\n                                            {{ t().chatMessageDeleted }}\n                                        </p>\n                                    } @else {\n                                        @if (m.delta) {\n                                            <rt-delta-view rtElem=\"message-text\" qa-dataid=\"chat-message-text\" [delta]=\"m.delta\" />\n                                        } @else {\n                                            <p rtElem=\"message-text\" qa-dataid=\"chat-message-text\">{{ m.text }}</p>\n                                        }\n                                        @if (m.attachments?.length) {\n                                            @for (att of m.attachments; track att.id) {\n                                                <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                    <rt-file-card\n                                                        showDownload\n                                                        size=\"sm\"\n                                                        [name]=\"att.name || attachmentFallbackName()\"\n                                                        (download)=\"downloadAttachment.emit(att)\" />\n                                                </span>\n                                            }\n                                        } @else if (m.fileUrl) {\n                                            <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                <rt-file-card\n                                                    showDownload\n                                                    size=\"sm\"\n                                                    [name]=\"m.fileName || attachmentFallbackName()\"\n                                                    (download)=\"downloadFile.emit(m)\" />\n                                            </span>\n                                        }\n                                        @if (m.deepLink) {\n                                            <span rtElem=\"message-deeplink\">\n                                                <a\n                                                    rtButton\n                                                    qa-dataid=\"chat-message-deeplink\"\n                                                    appearance=\"outlined\"\n                                                    icon=\"send\"\n                                                    rel=\"noopener\"\n                                                    target=\"_blank\"\n                                                    [href]=\"m.deepLink\"\n                                                    [label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"\n                                                    [attr.aria-label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"></a>\n                                            </span>\n                                        }\n                                    }\n                                    <span rtElem=\"message-footer\">\n                                        <span rtElem=\"message-date\" qa-dataid=\"chat-message-date\">\n                                            {{\n                                                m.dateLabel ||\n                                                    (m.createdAt | date: (messenger() ? 'shortTime' : 'short') : undefined : locale())\n                                            }}\n                                        </span>\n                                        @if (m.status) {\n                                            <span\n                                                rtElem=\"message-status\"\n                                                qa-dataid=\"chat-message-status\"\n                                                [attr.data-status]=\"m.status\"\n                                                [rtMod]=\"{ status: m.status }\"\n                                                [attr.aria-label]=\"m.status | rtChatStatusLabel\">\n                                                @if (m.status === MessageStatus.Failed) {\n                                                    <rt-icon rtElem=\"status-icon\" name=\"exclamation-circle\" size=\"sm\" />\n                                                    <rt-icon-button\n                                                        qa-dataid=\"chat-message-retry\"\n                                                        icon=\"sync\"\n                                                        variant=\"ghost\"\n                                                        [ariaLabel]=\"t().chatRetryAria\"\n                                                        [tooltip]=\"t().chatRetryTooltip\"\n                                                        (clicked)=\"retryMessage.emit(m)\" />\n                                                } @else if (m.status === MessageStatus.Undelivered) {\n                                                    <!-- Ответ записан, служба собеседника его не приняла: подпись видна глазом,\n                                                         повтора нет — он записал бы ответ второй раз. -->\n                                                    <rt-icon rtElem=\"status-icon\" name=\"warning\" size=\"sm\" />\n                                                    <span rtElem=\"status-caption\" qa-dataid=\"chat-message-undelivered\">\n                                                        {{ t().chatStatusUndelivered }}\n                                                    </span>\n                                                } @else {\n                                                    <!-- Часы, пока сообщение в пути; дальше двойной чек, цвет которого\n                                                         (серый/синий) различает доставлено и прочитано. -->\n                                                    <rt-icon\n                                                        rtElem=\"status-icon\"\n                                                        size=\"sm\"\n                                                        [name]=\"\n                                                            m.dateIcon || (m.status === MessageStatus.Sending ? 'clock' : 'check-double')\n                                                        \" />\n                                                }\n                                            </span>\n                                        } @else if (m.dateIcon) {\n                                            <span rtElem=\"message-status\" qa-dataid=\"chat-message-date-icon\">\n                                                <rt-icon rtElem=\"status-icon\" size=\"sm\" [name]=\"m.dateIcon\" />\n                                            </span>\n                                        }\n                                    </span>\n                                </div>\n                            </div>\n                        } @empty {\n                            <rt-note qa-dataid=\"chat-empty-thread\">{{ t().chatEmptyThread }}</rt-note>\n                        }\n                    </div>\n                }\n                @if (!loading() && fetching()) {\n                    <div rtElem=\"thread-overlay\" qa-dataid=\"chat-thread-overlay\" role=\"status\" [attr.aria-label]=\"t().chatRefreshAria\">\n                        <rt-spinner diameter=\"32\" />\n                    </div>\n                }\n                <div rtElem=\"typing\" qa-dataid=\"chat-typing\" aria-live=\"polite\" [rtMod]=\"{ shown: typingText() !== '' }\">\n                    {{ typingText() }}\n                </div>\n            </div>\n\n            @if (canReply()) {\n                <!-- Содержимое потребителя над рамкой поля; пустой слот места не занимает -->\n                <div rtElem=\"composer-bar\" qa-dataid=\"chat-composer-bar\"><ng-content select=\"[rtChatComposerBar]\" /></div>\n                @if (messenger()) {\n                    <!-- Поле ответа мессенджера: одна рамка, скрепка и кнопки потребителя внутри неё слева -->\n                    <input\n                        #composerFileEl\n                        qa-dataid=\"chat-composer-tools-file-input\"\n                        type=\"file\"\n                        hidden\n                        multiple\n                        [attr.accept]=\"accept() || null\"\n                        (change)=\"onFilesPicked($event)\" />\n                    <rt-ai-prompt-input\n                        rtElem=\"composer-prompt\"\n                        qa-dataid=\"chat-composer-prompt\"\n                        hint=\"\"\n                        [placeholder]=\"placeholder()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\">\n                        <rt-icon-button\n                            rtPromptInputStart\n                            qa-dataid=\"chat-composer-tools-attach\"\n                            icon=\"paperclip\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            iconColor=\"muted\"\n                            [hidden]=\"!attachments()\"\n                            [ariaLabel]=\"t().chatAttachAria\"\n                            [tooltip]=\"t().chatAttachTooltip\"\n                            [disabled]=\"composerDisabled()\"\n                            (clicked)=\"openFilePicker()\" />\n                        <ng-container ngProjectAs=\"[rtPromptInputStart]\">\n                            <ng-content select=\"[rtChatComposerTools]\" />\n                        </ng-container>\n                    </rt-ai-prompt-input>\n                } @else if (richComposer()) {\n                    <rt-message-composer\n                        rtElem=\"composer-rich\"\n                        qa-dataid=\"chat-composer-rich\"\n                        [placeholder]=\"placeholder()\"\n                        [accept]=\"accept()\"\n                        [attachments]=\"attachments()\"\n                        [formatting]=\"formatting()\"\n                        [toolbar]=\"formattingToolbar()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        [droppedFiles]=\"droppedFiles()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\" />\n                } @else {\n                    <form\n                        rtElem=\"composer\"\n                        qa-dataid=\"chat-composer\"\n                        [formGroup]=\"replyForm\"\n                        (ngSubmit)=\"onSubmit()\"\n                        (input)=\"onReplyInput($event)\">\n                        @if (attachments() && selectedFiles().length > 0) {\n                            <div rtElem=\"composer-files\" qa-dataid=\"chat-composer-files\">\n                                @for (file of selectedFiles(); track $index) {\n                                    <rt-file-card\n                                        showRemove\n                                        qa-dataid=\"chat-composer-file\"\n                                        size=\"sm\"\n                                        [name]=\"file.name\"\n                                        [sizeBytes]=\"file.size\"\n                                        [disabled]=\"composerDisabled()\"\n                                        (removed)=\"removeFile($index)\" />\n                                }\n                            </div>\n                        }\n                        <div rtElem=\"composer-field\" [rtMod]=\"{ attach: attachments() }\">\n                            @if (attachments()) {\n                                <input\n                                    #composerFileEl\n                                    qa-dataid=\"chat-composer-file-input\"\n                                    type=\"file\"\n                                    hidden\n                                    multiple\n                                    [attr.accept]=\"accept() || null\"\n                                    (change)=\"onFilesPicked($event)\" />\n                                <rt-icon-button\n                                    qa-dataid=\"chat-composer-attach\"\n                                    icon=\"paperclip\"\n                                    variant=\"ghost\"\n                                    [ariaLabel]=\"t().chatAttachAria\"\n                                    [tooltip]=\"t().chatAttachTooltip\"\n                                    [disabled]=\"composerDisabled()\"\n                                    (clicked)=\"openFilePicker()\" />\n                            }\n                            <textarea\n                                #composerInputEl\n                                rtElem=\"composer-input\"\n                                qa-dataid=\"chat-composer-input\"\n                                cdkTextareaAutosize\n                                formControlName=\"message\"\n                                cdkAutosizeMinRows=\"1\"\n                                cdkAutosizeMaxRows=\"4\"\n                                [attr.aria-label]=\"t().chatComposerAria\"\n                                [placeholder]=\"placeholder()\"\n                                (keydown)=\"onComposerKeydown($event)\"></textarea>\n                        </div>\n                        <button\n                            rtButton\n                            rtElem=\"composer-send\"\n                            qa-dataid=\"chat-composer-send\"\n                            type=\"submit\"\n                            theme=\"primary\"\n                            appearance=\"filled\"\n                            [label]=\"t().chatSendLabel\"\n                            [attr.aria-label]=\"t().chatSendAria\"\n                            [loading]=\"sending()\"\n                            [disabled]=\"!canSend()\"></button>\n                    </form>\n                }\n            } @else if (replyBlockReason()) {\n                <rt-note rtElem=\"reply-block\" qa-dataid=\"chat-reply-block\">{{ replyBlockReason() }}</rt-note>\n            }\n\n            <!-- Слот доменных действий потребителя под композером: в fullscreen\n                 попадает внутрь overlay, поэтому кнопки остаются видны. -->\n            <div rtElem=\"footer-slot\" qa-dataid=\"chat-footer\" [rtMod]=\"{ blocked: fetching() }\" [attr.inert]=\"fetching() ? '' : null\">\n                <ng-content select=\"[rtChatFooter]\" />\n            </div>\n        }\n    </rt-file-drop>\n</ng-container>\n",
+			styles: ["@layer rt-kit.components{.rt-chat{--rt-chat-bubble-radius: var(--rt-radius-lg);--rt-chat-message-border-width: var(--rt-border-width-thin);--rt-chat-transition-duration: var(--rt-duration-fast);--rt-chat-typing-radius: var(--rt-radius-full);--rt-chat-typing-shadow: var(--rt-shadow-sm);display:flex;flex-direction:column}.rt-chat>.rt-file-drop{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0}.rt-chat--expanded{position:fixed;z-index:var(--rt-z-modal);box-sizing:border-box;padding:var(--rt-space-md);background:var(--rt-color-bg-surface);inset:0}.rt-chat--expanded>.rt-file-drop{block-size:100%}@container rt-place (width > 1440px){.rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}@media(width>1440px){:where(html:not(:has(.rt-container))) .rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}.rt-chat--expanded .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--expanded .rt-chat__thread{max-height:none}.rt-chat--fill{block-size:100%}.rt-chat--fill .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--fill .rt-chat__thread{max-height:none}.rt-chat__sign{flex:none}.rt-chat__title{overflow:hidden;margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__names{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-chat__subtitle{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__subtitle[hidden]{display:none}.rt-chat__thread-viewport{position:relative;display:flex;flex-direction:column;contain:inline-size;min-block-size:0}.rt-chat__thread{display:flex;max-height:280px;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0;overflow-y:auto}.rt-chat__thread--frozen{overflow-y:hidden}.rt-chat__thread-overlay{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}.rt-chat__typing{position:absolute;z-index:1;bottom:var(--rt-space-1);left:var(--rt-space-2);box-sizing:border-box;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);max-inline-size:calc(100% - 2 * var(--rt-space-2));overflow-wrap:anywhere;pointer-events:none}.rt-chat__typing--shown{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-chat-typing-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-typing-shadow)}.rt-chat__composer-bar{display:flex;flex:0 0 auto;flex-direction:column;margin-block-end:calc(var(--rt-space-2) - var(--rt-space-4))}.rt-chat__composer-bar:empty{display:none}.rt-chat__composer-bar:not(:empty)+.rt-chat__composer,.rt-chat__composer-bar:not(:empty)+.rt-chat__composer-rich{margin-top:0}.rt-chat__footer-slot{display:flex;flex-direction:column}.rt-chat__footer-slot:empty{display:none}.rt-chat__footer-slot--blocked{opacity:.6;pointer-events:none}.rt-chat__message-row{display:flex;max-width:min(80%,480px);align-items:center;align-self:flex-start;gap:var(--rt-space-2)}.rt-chat__message-row--own{align-self:flex-end}.rt-chat__message-row:hover .rt-chat__message-delete,.rt-chat__message-row:focus-within .rt-chat__message-delete,.rt-chat__message-row:hover .rt-chat__message-actions,.rt-chat__message-row:focus-within .rt-chat__message-actions{opacity:1;pointer-events:auto}.rt-chat__message{display:flex;min-width:0;flex:0 1 auto;flex-direction:column;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-2)}.rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__message--deleted{border:var(--rt-chat-message-border-width) dashed var(--rt-color-border-default);background:transparent}.rt-chat__message-author{margin:0;color:var(--rt-chat-bubble-in-author);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-chat__message--own .rt-chat__message-author{color:var(--rt-chat-bubble-own-author)}.rt-chat__message-text{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-wrap}.rt-chat__message-text--deleted{color:var(--rt-color-text-muted);font-style:italic}.rt-chat__message-delete,.rt-chat__message-actions{flex:0 0 auto;opacity:0;pointer-events:none;transition:opacity var(--rt-chat-transition-duration) ease}.rt-chat__message-attachment{display:block}.rt-chat__message-footer{display:flex;min-width:0;align-items:center;gap:var(--rt-space-1)}.rt-chat__message-date{min-width:0;color:var(--rt-chat-bubble-date);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none);overflow-wrap:anywhere}.rt-chat__message-status{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);gap:var(--rt-space-0-5)}.rt-chat__message-status--status--read{color:var(--rt-chat-status-read)}.rt-chat__message-status--status--failed{color:var(--rt-color-state-danger)}.rt-chat__message-status--status--undelivered{color:var(--rt-color-state-warning-text)}.rt-chat__status-icon{font-size:var(--rt-text-sm)}.rt-chat__status-caption{font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-skeleton{display:flex;max-width:min(80%,480px);flex-direction:column;align-self:flex-start;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-1)}.rt-chat__message-skeleton--own{align-self:flex-end;border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__skeleton-line{display:block}.rt-chat__message-deeplink{display:flex;justify-content:flex-start;margin-top:var(--rt-space-1)}.rt-chat__composer,.rt-chat__composer-rich,.rt-chat__reply-block{margin-top:var(--rt-space-4)}.rt-chat__composer{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-chat__composer-files{display:flex;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-chat__composer-field{display:flex;box-sizing:border-box;align-items:center;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);gap:var(--rt-space-1);min-block-size:var(--rt-input-height);padding-inline:var(--rt-input-padding-x);transition:var(--rt-input-transition)}.rt-chat__composer-field:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-chat__composer-field--attach{padding-inline-start:var(--rt-space-1)}.rt-chat__composer-input{box-sizing:content-box;flex:1 1 auto;border:0;background:transparent;color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-textarea-line-height);padding-block:var(--rt-space-2);resize:none}.rt-chat__composer-input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-chat__composer-input:focus-visible{outline:none}.rt-chat__composer-input:disabled{cursor:not-allowed}.rt-chat__composer-send{inline-size:100%}}\n", "@layer rt-kit.components{.rt-chat{--rt-chat-day-label-radius: var(--rt-radius-full)}.rt-chat__day[hidden]{display:none}.rt-chat__composer-prompt{flex:0 0 auto}.rt-chat__day{display:flex;justify-content:center;padding-block-end:var(--rt-space-2)}.rt-chat__day-label{padding:var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));border-radius:var(--rt-chat-day-label-radius);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-chat__day-label:first-letter{text-transform:uppercase}.rt-chat--messenger{--rt-chat-bubble-radius: var(--rt-radius-xl);--rt-chat-bubble-corner-radius: var(--rt-radius-sm);--rt-chat-messenger-border-width: var(--rt-border-width-thin);--rt-chat-messenger-panel-radius: var(--rt-radius-lg);--rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);--rt-chat-bubble-in-shadow: var(--rt-shadow-sm);--rt-chat-bubble-own-bg: var(--rt-color-action-primary);--rt-chat-bubble-in-bg: var(--rt-color-bg-surface);box-sizing:border-box;padding:var(--rt-space-4)}@container rt-place (width <= 768px){.rt-chat--messenger{padding:calc(var(--rt-space-2) + var(--rt-space-1))}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-chat--messenger{padding:calc(var(--rt-space-2) + var(--rt-space-1))}}.rt-chat--messenger .rt-chat__header{--rt-toolbar-height: auto;--rt-toolbar-padding-top: 0;--rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));border-block-end:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle)}.rt-chat--messenger .rt-chat__header .rt-toolbar__bar--left{gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__thread{padding:var(--rt-space-5) var(--rt-space-6);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-1)}.rt-chat--messenger .rt-chat__thread>:first-child{margin-block-start:auto}@container rt-place (width <= 480px){.rt-chat--messenger .rt-chat__thread{padding-inline:calc(var(--rt-space-2) + var(--rt-space-1))}}@media(width<=480px){:where(html:not(:has(.rt-container))) .rt-chat--messenger .rt-chat__thread{padding-inline:calc(var(--rt-space-2) + var(--rt-space-1))}}.rt-chat--messenger .rt-chat__message-row{width:100%;max-width:100%}.rt-chat--messenger .rt-chat__message-row--own{justify-content:flex-end}.rt-chat--messenger .rt-chat__message{max-width:round(min(85%,320px),1px);box-sizing:border-box;padding:var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius);box-shadow:var(--rt-chat-bubble-in-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row--own+.rt-chat__day[hidden]+.rt-chat__message-row:not(.rt-chat__message-row--own),.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own)+.rt-chat__day[hidden]+.rt-chat__message-row--own{margin-block-start:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius) var(--rt-chat-bubble-radius);box-shadow:none}.rt-chat--messenger .rt-chat__title{line-height:var(--rt-leading-normal)}.rt-chat--messenger .rt-chat__subtitle{line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-text{font-size:var(--rt-text-sm);line-height:round(1em * var(--rt-leading-snug),1px)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-text,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{color:var(--rt-color-action-on-primary)}.rt-chat--messenger .rt-chat__message-footer{justify-content:flex-end}.rt-chat--messenger .rt-chat__message-actions{display:flex;align-items:center;padding:var(--rt-space-0-5);border:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-messenger-actions-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own) .rt-chat__message-actions{order:1}.rt-chat--messenger .rt-chat__message-date{font-size:var(--rt-text-2xs)}.rt-chat--messenger .rt-chat__message-author{display:none}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -1987,8 +2011,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-chat--fill]": "fill()",
 				"[class.rt-chat--messenger]": "messenger()"
 			},
-			template: "<ng-container rtBlock=\"rt-chat\">\n    <rt-file-drop\n        [overlayLabel]=\"t().chatDropOverlay\"\n        [accept]=\"accept()\"\n        [disabled]=\"dropDisabled()\"\n        (filesDropped)=\"onFilesDropped($event)\">\n        @if (showHeader()) {\n            <rt-toolbar rtElem=\"header\" dense>\n                <ng-template rtToolbarLeft>\n                    @if (sign(); as channel) {\n                        <rt-service-logo rtElem=\"sign\" qa-dataid=\"chat-sign\" size=\"xs\" [logos]=\"[channel]\" />\n                    }\n                    <div rtElem=\"names\">\n                        <h3 rtElem=\"title\" qa-dataid=\"chat-title\" rtTooltipWhenTruncated [rtTooltip]=\"title()\">{{ title() }}</h3>\n                        <p rtElem=\"subtitle\" qa-dataid=\"chat-subtitle\" [hidden]=\"!subtitle()\">{{ subtitle() }}</p>\n                    </div>\n                </ng-template>\n                <ng-template rtToolbarRight>\n                    @if (showRefresh()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-refresh\"\n                            icon=\"sync\"\n                            variant=\"ghost\"\n                            [ariaLabel]=\"t().chatRefreshAria\"\n                            [tooltip]=\"t().chatRefreshTooltip\"\n                            [loading]=\"fetching()\"\n                            [disabled]=\"!hasThread()\"\n                            (clicked)=\"refresh.emit()\" />\n                    }\n                    @if (showExpand()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-expand\"\n                            variant=\"ghost\"\n                            [icon]=\"expanded() ? 'window-minimize' : 'window-maximize'\"\n                            [ariaLabel]=\"expandLabel()\"\n                            [tooltip]=\"expandLabel()\"\n                            (clicked)=\"toggleExpand()\" />\n                    }\n                    <ng-content select=\"[rtChatHeaderActions]\" />\n                </ng-template>\n            </rt-toolbar>\n        }\n\n        @if (!hasThread()) {\n            <rt-note qa-dataid=\"chat-empty-hint\">{{ emptyHint() }}</rt-note>\n        } @else {\n            <div rtElem=\"thread-viewport\" qa-dataid=\"chat-thread-viewport\">\n                @if (loading()) {\n                    <!-- Скелетон повторяет структуру сообщения (автор → текст → дата),\n                 чередуя выравнивание, чтобы тред не «прыгал» при подмене на реальные. -->\n                    <div rtElem=\"thread\" qa-dataid=\"chat-thread-skeleton\">\n                        @for (row of skeletonRows; track row; let even = $even) {\n                            <div rtElem=\"message-skeleton\" qa-dataid=\"chat-message-skeleton\" [rtMod]=\"{ own: even }\">\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"72px\" height=\"10px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"100%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"55%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"56px\" height=\"10px\" [isLoading]=\"true\" />\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <div\n                        #thread\n                        rtElem=\"thread\"\n                        qa-dataid=\"chat-thread\"\n                        [rtMod]=\"{ frozen: fetching() }\"\n                        [attr.aria-busy]=\"fetching() ? 'true' : null\"\n                        (scroll)=\"onThreadScroll()\">\n                        @for (m of messages(); track m.id) {\n                            <div rtElem=\"day\" qa-dataid=\"chat-day\" [hidden]=\"!dayLabels().has(m.id)\">\n                                <span rtElem=\"day-label\">{{ dayLabels().get(m.id) }}</span>\n                            </div>\n                            <div\n                                rtElem=\"message-row\"\n                                qa-dataid=\"chat-message\"\n                                [attr.data-own]=\"m.own\"\n                                [attr.data-status]=\"m.status || null\"\n                                [attr.data-deleted]=\"m.deleted || null\"\n                                [rtMod]=\"{ own: m.own }\">\n                                @if (m.canDelete && !m.deleted) {\n                                    @if (m.deleteConfirm) {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            [rtConfirm]=\"m.deleteConfirm\"\n                                            (confirmed)=\"deleteMessage.emit(m)\" />\n                                    } @else {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            (clicked)=\"deleteMessage.emit(m)\" />\n                                    }\n                                }\n                                @if ((messageActions() || messageButtons()) && (m | rtChatMessageHasActions: messageHasActions())) {\n                                    <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"messageButtons()?.template ?? null\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                        @if (messageActions()?.template; as actionsTpl) {\n                                            <rt-menu\n                                                [icon]=\"messenger() ? 'ellipsis-v' : 'ellipsis-h'\"\n                                                [triggerSize]=\"messenger() ? 'sm' : 'md'\">\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        }\n                                    </div>\n                                }\n                                <div rtElem=\"message\" [rtMod]=\"{ own: m.own, deleted: m.deleted }\">\n                                    <p rtElem=\"message-author\" qa-dataid=\"chat-message-author\">{{ m.author }}</p>\n                                    @if (m.deleted) {\n                                        <p rtElem=\"message-text\" qa-dataid=\"chat-message-deleted\" rtMod=\"deleted\">\n                                            {{ t().chatMessageDeleted }}\n                                        </p>\n                                    } @else {\n                                        @if (m.delta) {\n                                            <rt-delta-view rtElem=\"message-text\" qa-dataid=\"chat-message-text\" [delta]=\"m.delta\" />\n                                        } @else {\n                                            <p rtElem=\"message-text\" qa-dataid=\"chat-message-text\">{{ m.text }}</p>\n                                        }\n                                        @if (m.attachments?.length) {\n                                            @for (att of m.attachments; track att.id) {\n                                                <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                    <rt-file-card\n                                                        showDownload\n                                                        size=\"sm\"\n                                                        [name]=\"att.name || attachmentFallbackName()\"\n                                                        (download)=\"downloadAttachment.emit(att)\" />\n                                                </span>\n                                            }\n                                        } @else if (m.fileUrl) {\n                                            <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                <rt-file-card\n                                                    showDownload\n                                                    size=\"sm\"\n                                                    [name]=\"m.fileName || attachmentFallbackName()\"\n                                                    (download)=\"downloadFile.emit(m)\" />\n                                            </span>\n                                        }\n                                        @if (m.deepLink) {\n                                            <span rtElem=\"message-deeplink\">\n                                                <a\n                                                    rtButton\n                                                    qa-dataid=\"chat-message-deeplink\"\n                                                    appearance=\"outlined\"\n                                                    icon=\"send\"\n                                                    rel=\"noopener\"\n                                                    target=\"_blank\"\n                                                    [href]=\"m.deepLink\"\n                                                    [label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"\n                                                    [attr.aria-label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"></a>\n                                            </span>\n                                        }\n                                    }\n                                    <span rtElem=\"message-footer\">\n                                        <span rtElem=\"message-date\" qa-dataid=\"chat-message-date\">\n                                            {{ m.createdAt | date: (messenger() ? 'shortTime' : 'short') : undefined : locale() }}\n                                        </span>\n                                        @if (m.status) {\n                                            <span\n                                                rtElem=\"message-status\"\n                                                qa-dataid=\"chat-message-status\"\n                                                [attr.data-status]=\"m.status\"\n                                                [rtMod]=\"{ status: m.status }\"\n                                                [attr.aria-label]=\"m.status | rtChatStatusLabel\">\n                                                @if (m.status === MessageStatus.Failed) {\n                                                    <rt-icon rtElem=\"status-icon\" name=\"exclamation-circle\" size=\"sm\" />\n                                                    <rt-icon-button\n                                                        qa-dataid=\"chat-message-retry\"\n                                                        icon=\"sync\"\n                                                        variant=\"ghost\"\n                                                        [ariaLabel]=\"t().chatRetryAria\"\n                                                        [tooltip]=\"t().chatRetryTooltip\"\n                                                        (clicked)=\"retryMessage.emit(m)\" />\n                                                } @else if (m.status === MessageStatus.Undelivered) {\n                                                    <!-- Ответ записан, служба собеседника его не приняла: подпись видна глазом,\n                                                         повтора нет — он записал бы ответ второй раз. -->\n                                                    <rt-icon rtElem=\"status-icon\" name=\"warning\" size=\"sm\" />\n                                                    <span rtElem=\"status-caption\" qa-dataid=\"chat-message-undelivered\">\n                                                        {{ t().chatStatusUndelivered }}\n                                                    </span>\n                                                } @else {\n                                                    <!-- Часы, пока сообщение в пути; дальше двойной чек, цвет которого\n                                                         (серый/синий) различает доставлено и прочитано. -->\n                                                    <rt-icon\n                                                        rtElem=\"status-icon\"\n                                                        [size]=\"messenger() ? 'xs' : 'sm'\"\n                                                        [name]=\"m.status === MessageStatus.Sending ? 'clock' : 'check-double'\" />\n                                                }\n                                            </span>\n                                        }\n                                    </span>\n                                </div>\n                            </div>\n                        } @empty {\n                            <rt-note qa-dataid=\"chat-empty-thread\">{{ t().chatEmptyThread }}</rt-note>\n                        }\n                    </div>\n                }\n                @if (!loading() && fetching()) {\n                    <div rtElem=\"thread-overlay\" qa-dataid=\"chat-thread-overlay\" role=\"status\" [attr.aria-label]=\"t().chatRefreshAria\">\n                        <rt-spinner diameter=\"32\" />\n                    </div>\n                }\n                <div rtElem=\"typing\" qa-dataid=\"chat-typing\" aria-live=\"polite\" [rtMod]=\"{ shown: typingText() !== '' }\">\n                    {{ typingText() }}\n                </div>\n            </div>\n\n            @if (canReply()) {\n                @if (messenger()) {\n                    <!-- Поле ответа мессенджера: одна рамка, скрепка и кнопки потребителя внутри неё слева -->\n                    <input\n                        #composerFileEl\n                        qa-dataid=\"chat-composer-tools-file-input\"\n                        type=\"file\"\n                        hidden\n                        multiple\n                        [attr.accept]=\"accept() || null\"\n                        (change)=\"onFilesPicked($event)\" />\n                    <rt-ai-prompt-input\n                        rtElem=\"composer-prompt\"\n                        qa-dataid=\"chat-composer-prompt\"\n                        hint=\"\"\n                        [placeholder]=\"placeholder()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\">\n                        <rt-icon-button\n                            rtPromptInputStart\n                            qa-dataid=\"chat-composer-tools-attach\"\n                            icon=\"paperclip\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            iconColor=\"muted\"\n                            [hidden]=\"!attachments()\"\n                            [ariaLabel]=\"t().chatAttachAria\"\n                            [tooltip]=\"t().chatAttachTooltip\"\n                            [disabled]=\"composerDisabled()\"\n                            (clicked)=\"openFilePicker()\" />\n                        <ng-container ngProjectAs=\"[rtPromptInputStart]\">\n                            <ng-content select=\"[rtChatComposerTools]\" />\n                        </ng-container>\n                    </rt-ai-prompt-input>\n                } @else if (richComposer()) {\n                    <rt-message-composer\n                        rtElem=\"composer-rich\"\n                        qa-dataid=\"chat-composer-rich\"\n                        [placeholder]=\"placeholder()\"\n                        [accept]=\"accept()\"\n                        [attachments]=\"attachments()\"\n                        [formatting]=\"formatting()\"\n                        [toolbar]=\"formattingToolbar()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        [droppedFiles]=\"droppedFiles()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\" />\n                } @else {\n                    <form\n                        rtElem=\"composer\"\n                        qa-dataid=\"chat-composer\"\n                        [formGroup]=\"replyForm\"\n                        (ngSubmit)=\"onSubmit()\"\n                        (input)=\"onReplyInput($event)\">\n                        @if (attachments() && selectedFiles().length > 0) {\n                            <div rtElem=\"composer-files\" qa-dataid=\"chat-composer-files\">\n                                @for (file of selectedFiles(); track $index) {\n                                    <rt-file-card\n                                        showRemove\n                                        qa-dataid=\"chat-composer-file\"\n                                        size=\"sm\"\n                                        [name]=\"file.name\"\n                                        [sizeBytes]=\"file.size\"\n                                        [disabled]=\"composerDisabled()\"\n                                        (removed)=\"removeFile($index)\" />\n                                }\n                            </div>\n                        }\n                        <div rtElem=\"composer-field\" [rtMod]=\"{ attach: attachments() }\">\n                            @if (attachments()) {\n                                <input\n                                    #composerFileEl\n                                    qa-dataid=\"chat-composer-file-input\"\n                                    type=\"file\"\n                                    hidden\n                                    multiple\n                                    [attr.accept]=\"accept() || null\"\n                                    (change)=\"onFilesPicked($event)\" />\n                                <rt-icon-button\n                                    qa-dataid=\"chat-composer-attach\"\n                                    icon=\"paperclip\"\n                                    variant=\"ghost\"\n                                    [ariaLabel]=\"t().chatAttachAria\"\n                                    [tooltip]=\"t().chatAttachTooltip\"\n                                    [disabled]=\"composerDisabled()\"\n                                    (clicked)=\"openFilePicker()\" />\n                            }\n                            <textarea\n                                #composerInputEl\n                                rtElem=\"composer-input\"\n                                qa-dataid=\"chat-composer-input\"\n                                cdkTextareaAutosize\n                                formControlName=\"message\"\n                                cdkAutosizeMinRows=\"1\"\n                                cdkAutosizeMaxRows=\"4\"\n                                [attr.aria-label]=\"t().chatComposerAria\"\n                                [placeholder]=\"placeholder()\"\n                                (keydown)=\"onComposerKeydown($event)\"></textarea>\n                        </div>\n                        <button\n                            rtButton\n                            rtElem=\"composer-send\"\n                            qa-dataid=\"chat-composer-send\"\n                            type=\"submit\"\n                            theme=\"primary\"\n                            appearance=\"filled\"\n                            [label]=\"t().chatSendLabel\"\n                            [attr.aria-label]=\"t().chatSendAria\"\n                            [loading]=\"sending()\"\n                            [disabled]=\"!canSend()\"></button>\n                    </form>\n                }\n            } @else if (replyBlockReason()) {\n                <rt-note rtElem=\"reply-block\" qa-dataid=\"chat-reply-block\">{{ replyBlockReason() }}</rt-note>\n            }\n\n            <!-- Слот доменных действий потребителя под композером: в fullscreen\n                 попадает внутрь overlay, поэтому кнопки остаются видны. -->\n            <div rtElem=\"footer-slot\" qa-dataid=\"chat-footer\" [rtMod]=\"{ blocked: fetching() }\" [attr.inert]=\"fetching() ? '' : null\">\n                <ng-content select=\"[rtChatFooter]\" />\n            </div>\n        }\n    </rt-file-drop>\n</ng-container>\n",
-			styles: ["@layer rt-kit.components{.rt-chat{--rt-chat-bubble-radius: var(--rt-radius-lg);--rt-chat-message-border-width: var(--rt-border-width-thin);--rt-chat-transition-duration: var(--rt-duration-fast);--rt-chat-typing-radius: var(--rt-radius-full);--rt-chat-typing-shadow: var(--rt-shadow-sm);display:flex;flex-direction:column}.rt-chat>.rt-file-drop{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0}.rt-chat--expanded{position:fixed;z-index:var(--rt-z-modal);box-sizing:border-box;padding:var(--rt-space-md);background:var(--rt-color-bg-surface);inset:0}.rt-chat--expanded>.rt-file-drop{block-size:100%}@container rt-place (width > 1440px){.rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}@media(width>1440px){:where(html:not(:has(.rt-container))) .rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}.rt-chat--expanded .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--expanded .rt-chat__thread{max-height:none}.rt-chat--fill{block-size:100%}.rt-chat--fill .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--fill .rt-chat__thread{max-height:none}.rt-chat__sign{flex:none}.rt-chat__title{overflow:hidden;margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__names{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-chat__subtitle{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__subtitle[hidden]{display:none}.rt-chat__thread-viewport{position:relative;display:flex;flex-direction:column;contain:inline-size;min-block-size:0}.rt-chat__thread{display:flex;max-height:280px;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0;overflow-y:auto}.rt-chat__thread--frozen{overflow-y:hidden}.rt-chat__thread-overlay{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}.rt-chat__typing{position:absolute;z-index:1;bottom:var(--rt-space-1);left:var(--rt-space-2);box-sizing:border-box;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);max-inline-size:calc(100% - 2 * var(--rt-space-2));overflow-wrap:anywhere;pointer-events:none}.rt-chat__typing--shown{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-chat-typing-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-typing-shadow)}.rt-chat__footer-slot{display:flex;flex-direction:column}.rt-chat__footer-slot:empty{display:none}.rt-chat__footer-slot--blocked{opacity:.6;pointer-events:none}.rt-chat__message-row{display:flex;max-width:min(80%,480px);align-items:center;align-self:flex-start;gap:var(--rt-space-2)}.rt-chat__message-row--own{align-self:flex-end}.rt-chat__message-row:hover .rt-chat__message-delete,.rt-chat__message-row:focus-within .rt-chat__message-delete,.rt-chat__message-row:hover .rt-chat__message-actions,.rt-chat__message-row:focus-within .rt-chat__message-actions{opacity:1;pointer-events:auto}.rt-chat__message{display:flex;min-width:0;flex:0 1 auto;flex-direction:column;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-2)}.rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__message--deleted{border:var(--rt-chat-message-border-width) dashed var(--rt-color-border-default);background:transparent}.rt-chat__message-author{margin:0;color:var(--rt-chat-bubble-in-author);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-chat__message--own .rt-chat__message-author{color:var(--rt-chat-bubble-own-author)}.rt-chat__message-text{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-wrap}.rt-chat__message-text--deleted{color:var(--rt-color-text-muted);font-style:italic}.rt-chat__message-delete,.rt-chat__message-actions{flex:0 0 auto;opacity:0;pointer-events:none;transition:opacity var(--rt-chat-transition-duration) ease}.rt-chat__message-attachment{display:block}.rt-chat__message-footer{display:flex;align-items:center;gap:var(--rt-space-1)}.rt-chat__message-date{color:var(--rt-chat-bubble-date);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-status{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);gap:var(--rt-space-0-5)}.rt-chat__message-status--status--read{color:var(--rt-chat-status-read)}.rt-chat__message-status--status--failed{color:var(--rt-color-state-danger)}.rt-chat__message-status--status--undelivered{color:var(--rt-color-state-warning-text)}.rt-chat__status-icon{font-size:var(--rt-text-sm)}.rt-chat__status-caption{font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-skeleton{display:flex;max-width:min(80%,480px);flex-direction:column;align-self:flex-start;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-1)}.rt-chat__message-skeleton--own{align-self:flex-end;border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__skeleton-line{display:block}.rt-chat__message-deeplink{display:flex;justify-content:flex-start;margin-top:var(--rt-space-1)}.rt-chat__composer,.rt-chat__composer-rich,.rt-chat__reply-block{margin-top:var(--rt-space-4)}.rt-chat__composer{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-chat__composer-files{display:flex;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-chat__composer-field{display:flex;box-sizing:border-box;align-items:center;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);gap:var(--rt-space-1);min-block-size:var(--rt-input-height);padding-inline:var(--rt-input-padding-x);transition:var(--rt-input-transition)}.rt-chat__composer-field:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-chat__composer-field--attach{padding-inline-start:var(--rt-space-1)}.rt-chat__composer-input{box-sizing:content-box;flex:1 1 auto;border:0;background:transparent;color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-textarea-line-height);padding-block:var(--rt-space-2);resize:none}.rt-chat__composer-input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-chat__composer-input:focus-visible{outline:none}.rt-chat__composer-input:disabled{cursor:not-allowed}.rt-chat__composer-send{inline-size:100%}}\n", "@layer rt-kit.components{.rt-chat{--rt-chat-day-label-radius: var(--rt-radius-full)}.rt-chat__day[hidden]{display:none}.rt-chat__composer-prompt{flex:0 0 auto}.rt-chat__day{display:flex;justify-content:center;padding-block-end:var(--rt-space-2)}.rt-chat__day-label{padding:var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));border-radius:var(--rt-chat-day-label-radius);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-chat__day-label:first-letter{text-transform:uppercase}.rt-chat--messenger{--rt-chat-bubble-radius: var(--rt-radius-xl);--rt-chat-bubble-corner-radius: var(--rt-radius-sm);--rt-chat-messenger-border-width: var(--rt-border-width-thin);--rt-chat-messenger-panel-radius: var(--rt-radius-lg);--rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);--rt-chat-bubble-own-bg: var(--rt-color-action-primary);--rt-chat-bubble-in-bg: var(--rt-color-bg-subtle);box-sizing:border-box;padding:var(--rt-space-4)}.rt-chat--messenger .rt-chat__header{--rt-toolbar-height: auto;--rt-toolbar-padding-top: 0;--rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));border-block-end:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle)}.rt-chat--messenger .rt-chat__header .rt-toolbar__bar--left{gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__thread{padding:var(--rt-space-5) var(--rt-space-6);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-1)}.rt-chat--messenger .rt-chat__thread>:first-child{margin-block-start:auto}.rt-chat--messenger .rt-chat__message{padding:var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row--own+.rt-chat__day[hidden]+.rt-chat__message-row:not(.rt-chat__message-row--own),.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own)+.rt-chat__day[hidden]+.rt-chat__message-row--own{margin-block-start:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius) var(--rt-chat-bubble-radius);box-shadow:none}.rt-chat--messenger .rt-chat__title{line-height:var(--rt-leading-normal)}.rt-chat--messenger .rt-chat__subtitle{line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-text{font-size:var(--rt-text-sm);line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-text,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{color:var(--rt-color-action-on-primary)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date{opacity:.75}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{opacity:.85}.rt-chat--messenger .rt-chat__message-footer{justify-content:flex-end}.rt-chat--messenger .rt-chat__message-actions{display:flex;align-items:center;padding:var(--rt-space-0-5);border:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-messenger-actions-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own) .rt-chat__message-actions{order:1}.rt-chat--messenger .rt-chat__message-date{font-size:var(--rt-text-2xs);line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-author{display:none}}\n"]
+			template: "<ng-container rtBlock=\"rt-chat\">\n    <rt-file-drop\n        [overlayLabel]=\"t().chatDropOverlay\"\n        [accept]=\"accept()\"\n        [disabled]=\"dropDisabled()\"\n        (filesDropped)=\"onFilesDropped($event)\">\n        @if (showHeader()) {\n            <rt-toolbar rtElem=\"header\" dense>\n                <ng-template rtToolbarLeft>\n                    @if (sign(); as channel) {\n                        <rt-service-logo rtElem=\"sign\" qa-dataid=\"chat-sign\" size=\"xs\" [logos]=\"[channel]\" />\n                    }\n                    <div rtElem=\"names\">\n                        <h3 rtElem=\"title\" qa-dataid=\"chat-title\" rtTooltipWhenTruncated [rtTooltip]=\"title()\">{{ title() }}</h3>\n                        <p rtElem=\"subtitle\" qa-dataid=\"chat-subtitle\" [hidden]=\"!subtitle()\">{{ subtitle() }}</p>\n                    </div>\n                </ng-template>\n                <ng-template rtToolbarRight>\n                    @if (showRefresh()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-refresh\"\n                            icon=\"sync\"\n                            variant=\"ghost\"\n                            [ariaLabel]=\"t().chatRefreshAria\"\n                            [tooltip]=\"t().chatRefreshTooltip\"\n                            [loading]=\"fetching()\"\n                            [disabled]=\"!hasThread()\"\n                            (clicked)=\"refresh.emit()\" />\n                    }\n                    @if (showExpand()) {\n                        <rt-icon-button\n                            qa-dataid=\"chat-expand\"\n                            variant=\"ghost\"\n                            [icon]=\"expanded() ? 'window-minimize' : 'window-maximize'\"\n                            [ariaLabel]=\"expandLabel()\"\n                            [tooltip]=\"expandLabel()\"\n                            (clicked)=\"toggleExpand()\" />\n                    }\n                    <ng-content select=\"[rtChatHeaderActions]\" />\n                </ng-template>\n            </rt-toolbar>\n        }\n\n        @if (!hasThread()) {\n            <rt-note qa-dataid=\"chat-empty-hint\">{{ emptyHint() }}</rt-note>\n        } @else {\n            <div rtElem=\"thread-viewport\" qa-dataid=\"chat-thread-viewport\">\n                @if (loading()) {\n                    <!-- Скелетон повторяет структуру сообщения (автор → текст → дата),\n                 чередуя выравнивание, чтобы тред не «прыгал» при подмене на реальные. -->\n                    <div rtElem=\"thread\" qa-dataid=\"chat-thread-skeleton\">\n                        @for (row of skeletonRows; track row; let even = $even) {\n                            <div rtElem=\"message-skeleton\" qa-dataid=\"chat-message-skeleton\" [rtMod]=\"{ own: even }\">\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"72px\" height=\"10px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"100%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"55%\" height=\"13px\" [isLoading]=\"true\" />\n                                <rt-skeleton-wrapper rtElem=\"skeleton-line\" width=\"56px\" height=\"10px\" [isLoading]=\"true\" />\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <div\n                        #thread\n                        rtElem=\"thread\"\n                        qa-dataid=\"chat-thread\"\n                        [rtMod]=\"{ frozen: fetching() }\"\n                        [attr.aria-busy]=\"fetching() ? 'true' : null\"\n                        (scroll)=\"onThreadScroll()\">\n                        @for (m of messages(); track m.id) {\n                            <div rtElem=\"day\" qa-dataid=\"chat-day\" [hidden]=\"!dayLabels().has(m.id)\">\n                                <span rtElem=\"day-label\">{{ dayLabels().get(m.id) }}</span>\n                            </div>\n                            <div\n                                rtElem=\"message-row\"\n                                qa-dataid=\"chat-message\"\n                                [attr.data-own]=\"m.own\"\n                                [attr.data-status]=\"m.status || null\"\n                                [attr.data-deleted]=\"m.deleted || null\"\n                                [rtMod]=\"{ own: m.own }\">\n                                @if (m.canDelete && !m.deleted) {\n                                    @if (m.deleteConfirm) {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            [rtConfirm]=\"m.deleteConfirm\"\n                                            (confirmed)=\"deleteMessage.emit(m)\" />\n                                    } @else {\n                                        <rt-icon-button\n                                            rtElem=\"message-delete\"\n                                            qa-dataid=\"chat-message-delete\"\n                                            icon=\"trash\"\n                                            variant=\"ghost\"\n                                            [ariaLabel]=\"t().chatDeleteAria\"\n                                            [tooltip]=\"t().chatDeleteTooltip\"\n                                            (clicked)=\"deleteMessage.emit(m)\" />\n                                    }\n                                }\n                                @if ((messageActions() || messageButtons()) && (m | rtChatMessageHasActions: messageHasActions())) {\n                                    <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"messageButtons()?.template ?? null\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                        @if (messageActions()?.template; as actionsTpl) {\n                                            <rt-menu\n                                                [icon]=\"messenger() ? 'ellipsis-v' : 'ellipsis-h'\"\n                                                [triggerSize]=\"messenger() ? 'sm' : 'md'\">\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        }\n                                    </div>\n                                }\n                                <div rtElem=\"message\" [rtMod]=\"{ own: m.own, deleted: m.deleted }\">\n                                    <p rtElem=\"message-author\" qa-dataid=\"chat-message-author\">{{ m.author }}</p>\n                                    @if (m.deleted) {\n                                        <p rtElem=\"message-text\" qa-dataid=\"chat-message-deleted\" rtMod=\"deleted\">\n                                            {{ t().chatMessageDeleted }}\n                                        </p>\n                                    } @else {\n                                        @if (m.delta) {\n                                            <rt-delta-view rtElem=\"message-text\" qa-dataid=\"chat-message-text\" [delta]=\"m.delta\" />\n                                        } @else {\n                                            <p rtElem=\"message-text\" qa-dataid=\"chat-message-text\">{{ m.text }}</p>\n                                        }\n                                        @if (m.attachments?.length) {\n                                            @for (att of m.attachments; track att.id) {\n                                                <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                    <rt-file-card\n                                                        showDownload\n                                                        size=\"sm\"\n                                                        [name]=\"att.name || attachmentFallbackName()\"\n                                                        (download)=\"downloadAttachment.emit(att)\" />\n                                                </span>\n                                            }\n                                        } @else if (m.fileUrl) {\n                                            <span rtElem=\"message-attachment\" qa-dataid=\"chat-message-attachment\">\n                                                <rt-file-card\n                                                    showDownload\n                                                    size=\"sm\"\n                                                    [name]=\"m.fileName || attachmentFallbackName()\"\n                                                    (download)=\"downloadFile.emit(m)\" />\n                                            </span>\n                                        }\n                                        @if (m.deepLink) {\n                                            <span rtElem=\"message-deeplink\">\n                                                <a\n                                                    rtButton\n                                                    qa-dataid=\"chat-message-deeplink\"\n                                                    appearance=\"outlined\"\n                                                    icon=\"send\"\n                                                    rel=\"noopener\"\n                                                    target=\"_blank\"\n                                                    [href]=\"m.deepLink\"\n                                                    [label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"\n                                                    [attr.aria-label]=\"m.deepLinkLabel || t().uiSubscribeNotifications\"></a>\n                                            </span>\n                                        }\n                                    }\n                                    <span rtElem=\"message-footer\">\n                                        <span rtElem=\"message-date\" qa-dataid=\"chat-message-date\">\n                                            {{\n                                                m.dateLabel ||\n                                                    (m.createdAt | date: (messenger() ? 'shortTime' : 'short') : undefined : locale())\n                                            }}\n                                        </span>\n                                        @if (m.status) {\n                                            <span\n                                                rtElem=\"message-status\"\n                                                qa-dataid=\"chat-message-status\"\n                                                [attr.data-status]=\"m.status\"\n                                                [rtMod]=\"{ status: m.status }\"\n                                                [attr.aria-label]=\"m.status | rtChatStatusLabel\">\n                                                @if (m.status === MessageStatus.Failed) {\n                                                    <rt-icon rtElem=\"status-icon\" name=\"exclamation-circle\" size=\"sm\" />\n                                                    <rt-icon-button\n                                                        qa-dataid=\"chat-message-retry\"\n                                                        icon=\"sync\"\n                                                        variant=\"ghost\"\n                                                        [ariaLabel]=\"t().chatRetryAria\"\n                                                        [tooltip]=\"t().chatRetryTooltip\"\n                                                        (clicked)=\"retryMessage.emit(m)\" />\n                                                } @else if (m.status === MessageStatus.Undelivered) {\n                                                    <!-- Ответ записан, служба собеседника его не приняла: подпись видна глазом,\n                                                         повтора нет — он записал бы ответ второй раз. -->\n                                                    <rt-icon rtElem=\"status-icon\" name=\"warning\" size=\"sm\" />\n                                                    <span rtElem=\"status-caption\" qa-dataid=\"chat-message-undelivered\">\n                                                        {{ t().chatStatusUndelivered }}\n                                                    </span>\n                                                } @else {\n                                                    <!-- Часы, пока сообщение в пути; дальше двойной чек, цвет которого\n                                                         (серый/синий) различает доставлено и прочитано. -->\n                                                    <rt-icon\n                                                        rtElem=\"status-icon\"\n                                                        size=\"sm\"\n                                                        [name]=\"\n                                                            m.dateIcon || (m.status === MessageStatus.Sending ? 'clock' : 'check-double')\n                                                        \" />\n                                                }\n                                            </span>\n                                        } @else if (m.dateIcon) {\n                                            <span rtElem=\"message-status\" qa-dataid=\"chat-message-date-icon\">\n                                                <rt-icon rtElem=\"status-icon\" size=\"sm\" [name]=\"m.dateIcon\" />\n                                            </span>\n                                        }\n                                    </span>\n                                </div>\n                            </div>\n                        } @empty {\n                            <rt-note qa-dataid=\"chat-empty-thread\">{{ t().chatEmptyThread }}</rt-note>\n                        }\n                    </div>\n                }\n                @if (!loading() && fetching()) {\n                    <div rtElem=\"thread-overlay\" qa-dataid=\"chat-thread-overlay\" role=\"status\" [attr.aria-label]=\"t().chatRefreshAria\">\n                        <rt-spinner diameter=\"32\" />\n                    </div>\n                }\n                <div rtElem=\"typing\" qa-dataid=\"chat-typing\" aria-live=\"polite\" [rtMod]=\"{ shown: typingText() !== '' }\">\n                    {{ typingText() }}\n                </div>\n            </div>\n\n            @if (canReply()) {\n                <!-- Содержимое потребителя над рамкой поля; пустой слот места не занимает -->\n                <div rtElem=\"composer-bar\" qa-dataid=\"chat-composer-bar\"><ng-content select=\"[rtChatComposerBar]\" /></div>\n                @if (messenger()) {\n                    <!-- Поле ответа мессенджера: одна рамка, скрепка и кнопки потребителя внутри неё слева -->\n                    <input\n                        #composerFileEl\n                        qa-dataid=\"chat-composer-tools-file-input\"\n                        type=\"file\"\n                        hidden\n                        multiple\n                        [attr.accept]=\"accept() || null\"\n                        (change)=\"onFilesPicked($event)\" />\n                    <rt-ai-prompt-input\n                        rtElem=\"composer-prompt\"\n                        qa-dataid=\"chat-composer-prompt\"\n                        hint=\"\"\n                        [placeholder]=\"placeholder()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\">\n                        <rt-icon-button\n                            rtPromptInputStart\n                            qa-dataid=\"chat-composer-tools-attach\"\n                            icon=\"paperclip\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            iconColor=\"muted\"\n                            [hidden]=\"!attachments()\"\n                            [ariaLabel]=\"t().chatAttachAria\"\n                            [tooltip]=\"t().chatAttachTooltip\"\n                            [disabled]=\"composerDisabled()\"\n                            (clicked)=\"openFilePicker()\" />\n                        <ng-container ngProjectAs=\"[rtPromptInputStart]\">\n                            <ng-content select=\"[rtChatComposerTools]\" />\n                        </ng-container>\n                    </rt-ai-prompt-input>\n                } @else if (richComposer()) {\n                    <rt-message-composer\n                        rtElem=\"composer-rich\"\n                        qa-dataid=\"chat-composer-rich\"\n                        [placeholder]=\"placeholder()\"\n                        [accept]=\"accept()\"\n                        [attachments]=\"attachments()\"\n                        [formatting]=\"formatting()\"\n                        [toolbar]=\"formattingToolbar()\"\n                        [sending]=\"sending()\"\n                        [disabled]=\"loading() || fetching()\"\n                        [droppedFiles]=\"droppedFiles()\"\n                        (submitted)=\"onComposerSubmit($event)\"\n                        (input)=\"onReplyInput($event)\" />\n                } @else {\n                    <form\n                        rtElem=\"composer\"\n                        qa-dataid=\"chat-composer\"\n                        [formGroup]=\"replyForm\"\n                        (ngSubmit)=\"onSubmit()\"\n                        (input)=\"onReplyInput($event)\">\n                        @if (attachments() && selectedFiles().length > 0) {\n                            <div rtElem=\"composer-files\" qa-dataid=\"chat-composer-files\">\n                                @for (file of selectedFiles(); track $index) {\n                                    <rt-file-card\n                                        showRemove\n                                        qa-dataid=\"chat-composer-file\"\n                                        size=\"sm\"\n                                        [name]=\"file.name\"\n                                        [sizeBytes]=\"file.size\"\n                                        [disabled]=\"composerDisabled()\"\n                                        (removed)=\"removeFile($index)\" />\n                                }\n                            </div>\n                        }\n                        <div rtElem=\"composer-field\" [rtMod]=\"{ attach: attachments() }\">\n                            @if (attachments()) {\n                                <input\n                                    #composerFileEl\n                                    qa-dataid=\"chat-composer-file-input\"\n                                    type=\"file\"\n                                    hidden\n                                    multiple\n                                    [attr.accept]=\"accept() || null\"\n                                    (change)=\"onFilesPicked($event)\" />\n                                <rt-icon-button\n                                    qa-dataid=\"chat-composer-attach\"\n                                    icon=\"paperclip\"\n                                    variant=\"ghost\"\n                                    [ariaLabel]=\"t().chatAttachAria\"\n                                    [tooltip]=\"t().chatAttachTooltip\"\n                                    [disabled]=\"composerDisabled()\"\n                                    (clicked)=\"openFilePicker()\" />\n                            }\n                            <textarea\n                                #composerInputEl\n                                rtElem=\"composer-input\"\n                                qa-dataid=\"chat-composer-input\"\n                                cdkTextareaAutosize\n                                formControlName=\"message\"\n                                cdkAutosizeMinRows=\"1\"\n                                cdkAutosizeMaxRows=\"4\"\n                                [attr.aria-label]=\"t().chatComposerAria\"\n                                [placeholder]=\"placeholder()\"\n                                (keydown)=\"onComposerKeydown($event)\"></textarea>\n                        </div>\n                        <button\n                            rtButton\n                            rtElem=\"composer-send\"\n                            qa-dataid=\"chat-composer-send\"\n                            type=\"submit\"\n                            theme=\"primary\"\n                            appearance=\"filled\"\n                            [label]=\"t().chatSendLabel\"\n                            [attr.aria-label]=\"t().chatSendAria\"\n                            [loading]=\"sending()\"\n                            [disabled]=\"!canSend()\"></button>\n                    </form>\n                }\n            } @else if (replyBlockReason()) {\n                <rt-note rtElem=\"reply-block\" qa-dataid=\"chat-reply-block\">{{ replyBlockReason() }}</rt-note>\n            }\n\n            <!-- Слот доменных действий потребителя под композером: в fullscreen\n                 попадает внутрь overlay, поэтому кнопки остаются видны. -->\n            <div rtElem=\"footer-slot\" qa-dataid=\"chat-footer\" [rtMod]=\"{ blocked: fetching() }\" [attr.inert]=\"fetching() ? '' : null\">\n                <ng-content select=\"[rtChatFooter]\" />\n            </div>\n        }\n    </rt-file-drop>\n</ng-container>\n",
+			styles: ["@layer rt-kit.components{.rt-chat{--rt-chat-bubble-radius: var(--rt-radius-lg);--rt-chat-message-border-width: var(--rt-border-width-thin);--rt-chat-transition-duration: var(--rt-duration-fast);--rt-chat-typing-radius: var(--rt-radius-full);--rt-chat-typing-shadow: var(--rt-shadow-sm);display:flex;flex-direction:column}.rt-chat>.rt-file-drop{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0}.rt-chat--expanded{position:fixed;z-index:var(--rt-z-modal);box-sizing:border-box;padding:var(--rt-space-md);background:var(--rt-color-bg-surface);inset:0}.rt-chat--expanded>.rt-file-drop{block-size:100%}@container rt-place (width > 1440px){.rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}@media(width>1440px){:where(html:not(:has(.rt-container))) .rt-chat--expanded>.rt-file-drop{inline-size:1000px;margin-inline:auto;max-inline-size:100%}}.rt-chat--expanded .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--expanded .rt-chat__thread{max-height:none}.rt-chat--fill{block-size:100%}.rt-chat--fill .rt-chat__thread-viewport{flex:1 1 auto;min-block-size:0}.rt-chat--fill .rt-chat__thread{max-height:none}.rt-chat__sign{flex:none}.rt-chat__title{overflow:hidden;margin:0;color:var(--rt-color-text-primary);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__names{display:flex;flex-direction:column;gap:var(--rt-space-0-5);min-inline-size:0}.rt-chat__subtitle{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-chat__subtitle[hidden]{display:none}.rt-chat__thread-viewport{position:relative;display:flex;flex-direction:column;contain:inline-size;min-block-size:0}.rt-chat__thread{display:flex;max-height:280px;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-4);min-block-size:0;overflow-y:auto}.rt-chat__thread--frozen{overflow-y:hidden}.rt-chat__thread-overlay{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}.rt-chat__typing{position:absolute;z-index:1;bottom:var(--rt-space-1);left:var(--rt-space-2);box-sizing:border-box;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);max-inline-size:calc(100% - 2 * var(--rt-space-2));overflow-wrap:anywhere;pointer-events:none}.rt-chat__typing--shown{padding:var(--rt-space-0-5) var(--rt-space-2);border-radius:var(--rt-chat-typing-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-typing-shadow)}.rt-chat__composer-bar{display:flex;flex:0 0 auto;flex-direction:column;margin-block-end:calc(var(--rt-space-2) - var(--rt-space-4))}.rt-chat__composer-bar:empty{display:none}.rt-chat__composer-bar:not(:empty)+.rt-chat__composer,.rt-chat__composer-bar:not(:empty)+.rt-chat__composer-rich{margin-top:0}.rt-chat__footer-slot{display:flex;flex-direction:column}.rt-chat__footer-slot:empty{display:none}.rt-chat__footer-slot--blocked{opacity:.6;pointer-events:none}.rt-chat__message-row{display:flex;max-width:min(80%,480px);align-items:center;align-self:flex-start;gap:var(--rt-space-2)}.rt-chat__message-row--own{align-self:flex-end}.rt-chat__message-row:hover .rt-chat__message-delete,.rt-chat__message-row:focus-within .rt-chat__message-delete,.rt-chat__message-row:hover .rt-chat__message-actions,.rt-chat__message-row:focus-within .rt-chat__message-actions{opacity:1;pointer-events:auto}.rt-chat__message{display:flex;min-width:0;flex:0 1 auto;flex-direction:column;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-2)}.rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__message--deleted{border:var(--rt-chat-message-border-width) dashed var(--rt-color-border-default);background:transparent}.rt-chat__message-author{margin:0;color:var(--rt-chat-bubble-in-author);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-chat__message--own .rt-chat__message-author{color:var(--rt-chat-bubble-own-author)}.rt-chat__message-text{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular);line-height:var(--rt-leading-snug);white-space:pre-wrap}.rt-chat__message-text--deleted{color:var(--rt-color-text-muted);font-style:italic}.rt-chat__message-delete,.rt-chat__message-actions{flex:0 0 auto;opacity:0;pointer-events:none;transition:opacity var(--rt-chat-transition-duration) ease}.rt-chat__message-attachment{display:block}.rt-chat__message-footer{display:flex;min-width:0;align-items:center;gap:var(--rt-space-1)}.rt-chat__message-date{min-width:0;color:var(--rt-chat-bubble-date);font-size:var(--rt-text-xs);line-height:var(--rt-leading-none);overflow-wrap:anywhere}.rt-chat__message-status{display:inline-flex;align-items:center;color:var(--rt-color-text-muted);gap:var(--rt-space-0-5)}.rt-chat__message-status--status--read{color:var(--rt-chat-status-read)}.rt-chat__message-status--status--failed{color:var(--rt-color-state-danger)}.rt-chat__message-status--status--undelivered{color:var(--rt-color-state-warning-text)}.rt-chat__status-icon{font-size:var(--rt-text-sm)}.rt-chat__status-caption{font-size:var(--rt-text-xs);line-height:var(--rt-leading-none)}.rt-chat__message-skeleton{display:flex;max-width:min(80%,480px);flex-direction:column;align-self:flex-start;padding:var(--rt-space-2);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0;background:var(--rt-chat-bubble-in-bg);gap:var(--rt-space-1)}.rt-chat__message-skeleton--own{align-self:flex-end;border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) 0 var(--rt-chat-bubble-radius);background:var(--rt-chat-bubble-own-bg)}.rt-chat__skeleton-line{display:block}.rt-chat__message-deeplink{display:flex;justify-content:flex-start;margin-top:var(--rt-space-1)}.rt-chat__composer,.rt-chat__composer-rich,.rt-chat__reply-block{margin-top:var(--rt-space-4)}.rt-chat__composer{display:flex;flex-direction:column;gap:var(--rt-space-2)}.rt-chat__composer-files{display:flex;flex-wrap:wrap;gap:var(--rt-space-2)}.rt-chat__composer-field{display:flex;box-sizing:border-box;align-items:center;border:var(--rt-input-border-width) solid var(--rt-input-color-border);border-radius:var(--rt-input-radius);background-color:var(--rt-input-color-bg);gap:var(--rt-space-1);min-block-size:var(--rt-input-height);padding-inline:var(--rt-input-padding-x);transition:var(--rt-input-transition)}.rt-chat__composer-field:focus-within{border-color:var(--rt-input-color-border-focus);box-shadow:var(--rt-input-focus-shadow)}.rt-chat__composer-field--attach{padding-inline-start:var(--rt-space-1)}.rt-chat__composer-input{box-sizing:content-box;flex:1 1 auto;border:0;background:transparent;color:var(--rt-input-color-text);font-family:inherit;font-size:var(--rt-input-font-size);inline-size:100%;line-height:var(--rt-textarea-line-height);padding-block:var(--rt-space-2);resize:none}.rt-chat__composer-input::placeholder{color:var(--rt-input-color-text-placeholder);opacity:1}.rt-chat__composer-input:focus-visible{outline:none}.rt-chat__composer-input:disabled{cursor:not-allowed}.rt-chat__composer-send{inline-size:100%}}\n", "@layer rt-kit.components{.rt-chat{--rt-chat-day-label-radius: var(--rt-radius-full)}.rt-chat__day[hidden]{display:none}.rt-chat__composer-prompt{flex:0 0 auto}.rt-chat__day{display:flex;justify-content:center;padding-block-end:var(--rt-space-2)}.rt-chat__day-label{padding:var(--rt-space-1) calc(var(--rt-space-2) + var(--rt-space-1));border-radius:var(--rt-chat-day-label-radius);background:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium)}.rt-chat__day-label:first-letter{text-transform:uppercase}.rt-chat--messenger{--rt-chat-bubble-radius: var(--rt-radius-xl);--rt-chat-bubble-corner-radius: var(--rt-radius-sm);--rt-chat-messenger-border-width: var(--rt-border-width-thin);--rt-chat-messenger-panel-radius: var(--rt-radius-lg);--rt-chat-messenger-actions-shadow: var(--rt-shadow-sm);--rt-chat-bubble-in-shadow: var(--rt-shadow-sm);--rt-chat-bubble-own-bg: var(--rt-color-action-primary);--rt-chat-bubble-in-bg: var(--rt-color-bg-surface);box-sizing:border-box;padding:var(--rt-space-4)}@container rt-place (width <= 768px){.rt-chat--messenger{padding:calc(var(--rt-space-2) + var(--rt-space-1))}}@media(width<=768px){:where(html:not(:has(.rt-container))) .rt-chat--messenger{padding:calc(var(--rt-space-2) + var(--rt-space-1))}}.rt-chat--messenger .rt-chat__header{--rt-toolbar-height: auto;--rt-toolbar-padding-top: 0;--rt-toolbar-padding-bottom: calc(var(--rt-space-2) + var(--rt-space-1));border-block-end:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle)}.rt-chat--messenger .rt-chat__header .rt-toolbar__bar--left{gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__thread{padding:var(--rt-space-5) var(--rt-space-6);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);gap:var(--rt-space-1)}.rt-chat--messenger .rt-chat__thread>:first-child{margin-block-start:auto}@container rt-place (width <= 480px){.rt-chat--messenger .rt-chat__thread{padding-inline:calc(var(--rt-space-2) + var(--rt-space-1))}}@media(width<=480px){:where(html:not(:has(.rt-container))) .rt-chat--messenger .rt-chat__thread{padding-inline:calc(var(--rt-space-2) + var(--rt-space-1))}}.rt-chat--messenger .rt-chat__message-row{width:100%;max-width:100%}.rt-chat--messenger .rt-chat__message-row--own{justify-content:flex-end}.rt-chat--messenger .rt-chat__message{max-width:round(min(85%,320px),1px);box-sizing:border-box;padding:var(--rt-space-2) calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-1);border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius);box-shadow:var(--rt-chat-bubble-in-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row--own+.rt-chat__day[hidden]+.rt-chat__message-row:not(.rt-chat__message-row--own),.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own)+.rt-chat__day[hidden]+.rt-chat__message-row--own{margin-block-start:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-chat--messenger .rt-chat__message--own{border-radius:var(--rt-chat-bubble-radius) var(--rt-chat-bubble-radius) var(--rt-chat-bubble-corner-radius) var(--rt-chat-bubble-radius);box-shadow:none}.rt-chat--messenger .rt-chat__title{line-height:var(--rt-leading-normal)}.rt-chat--messenger .rt-chat__subtitle{line-height:round(1em * var(--rt-leading-tight),1px)}.rt-chat--messenger .rt-chat__message-text{font-size:var(--rt-text-sm);line-height:round(1em * var(--rt-leading-snug),1px)}.rt-chat--messenger .rt-chat__message--own .rt-chat__message-text,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-date,.rt-chat--messenger .rt-chat__message--own .rt-chat__message-status{color:var(--rt-color-action-on-primary)}.rt-chat--messenger .rt-chat__message-footer{justify-content:flex-end}.rt-chat--messenger .rt-chat__message-actions{display:flex;align-items:center;padding:var(--rt-space-0-5);border:var(--rt-chat-messenger-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-chat-messenger-panel-radius);background:var(--rt-color-bg-surface);box-shadow:var(--rt-chat-messenger-actions-shadow);gap:var(--rt-space-0-5)}.rt-chat--messenger .rt-chat__message-row:not(.rt-chat__message-row--own) .rt-chat__message-actions{order:1}.rt-chat--messenger .rt-chat__message-date{font-size:var(--rt-text-2xs)}.rt-chat--messenger .rt-chat__message-author{display:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],