@rt-tools/ui-kit-v2 0.35.0 → 0.35.1

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

@@ -1094,6 +1094,7 @@ var RtChatComponent = class RtChatComponent {
 		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.sign = input(null, ...ngDevMode ? [{ debugName: "sign" }] : /* istanbul ignore next */ []);
+		this.subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
 		this.emptyHint = input("", ...ngDevMode ? [{ debugName: "emptyHint" }] : /* istanbul ignore next */ []);
 		this.hasThread = input(false, {
 			...ngDevMode ? { debugName: "hasThread" } : /* istanbul ignore next */ {},
@@ -1305,6 +1306,13 @@ var RtChatComponent = class RtChatComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				subtitle: {
+					classPropertyName: "subtitle",
+					publicName: "subtitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				emptyHint: {
 					classPropertyName: "emptyHint",
 					publicName: "emptyHint",
@@ -1428,8 +1436,8 @@ var RtChatComponent = class RtChatComponent {
 				isSignal: true
 			}],
 			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                    <h3 rtElem=\"title\" qa-dataid=\"chat-title\">{{ title() }}</h3>\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\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()?.template; as actionsTpl) {\n                                    @if (m | rtChatMessageHasActions: messageHasActions()) {\n                                        <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                            <rt-menu>\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        </div>\n                                    }\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: '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=\"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 (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                                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{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)}.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"],
+			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\">{{ 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\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()?.template; as actionsTpl) {\n                                    @if (m | rtChatMessageHasActions: messageHasActions()) {\n                                        <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                            <rt-menu>\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        </div>\n                                    }\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: '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=\"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 (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                                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{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)}.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"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -1786,8 +1794,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-chat--expanded]": "expanded()",
 				"[class.rt-chat--fill]": "fill()"
 			},
-			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                    <h3 rtElem=\"title\" qa-dataid=\"chat-title\">{{ title() }}</h3>\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\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()?.template; as actionsTpl) {\n                                    @if (m | rtChatMessageHasActions: messageHasActions()) {\n                                        <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                            <rt-menu>\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        </div>\n                                    }\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: '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=\"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 (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                                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{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)}.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"]
+			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\">{{ 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\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()?.template; as actionsTpl) {\n                                    @if (m | rtChatMessageHasActions: messageHasActions()) {\n                                        <div rtElem=\"message-actions\" qa-dataid=\"chat-message-actions\">\n                                            <rt-menu>\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"actionsTpl\"\n                                                    [ngTemplateOutletContext]=\"{ $implicit: m }\" />\n                                            </rt-menu>\n                                        </div>\n                                    }\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: '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=\"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 (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                                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{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)}.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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1876,6 +1884,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
 		emptyHint: [{
 			type: i0.Input,
 			args: [{