valtech-components 4.0.238 → 4.0.239

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.238';
+const VERSION = '4.0.239';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -73003,20 +73003,23 @@ const CHAT_COMPOSER_I18N = {
     },
 };
 /**
- * val-chat-composer — barra de redacción de chat moderna (signal inputs).
+ * val-chat-composer — barra de redacción estilo Notion/Claude (full custom).
  *
- * Pill con: adjuntar (+), textarea auto-grow, y mic/enviar (mic cuando está vacío,
- * enviar cuando hay texto o adjuntos). Los adjuntos (botón + / pegar imagen) se
- * acumulan como PREVIEW (miniaturas) y se emiten por `(attach)` recién al ENVIAR
- * — no se van solos al chat. Audio grabado se emite directo al parar.
- * No incluye picker de emoji: el teclado del sistema ya lo trae.
+ * El editor es un `contenteditable` (NO ion-textarea): crece hasta un max-height,
+ * soporta pegar texto plano e imágenes del portapapeles, Enter envía / Shift+Enter
+ * salta línea. Debajo, una fila de acciones propias: adjuntar (+), mic/enviar.
+ * Los adjuntos (botón / pegar / audio grabado) se acumulan como miniaturas de
+ * PREVIEW y se mandan en UN solo evento `send {text, files}` (caption + adjuntos).
+ *
+ * Pensado para vivir en un contenedor fijo al fondo del viewport (el consumer
+ * ancla la posición). No incluye emoji picker (el teclado del sistema lo trae).
  */
 class ChatComposerComponent {
     constructor() {
         this.i18n = inject(I18nService);
         this.placeholder = input('');
         this.disabled = input(false);
-        this.maxLength = input(2000);
+        this.maxLength = input(4000);
         this.replyingTo = input(null);
         this.showAttach = input(true);
         this.showMic = input(true);
@@ -73024,6 +73027,7 @@ class ChatComposerComponent {
         this.typing = output();
         this.voice = output();
         this.cancelReply = output();
+        this.editableRef = viewChild('editable');
         this.body = signal('');
         this.pending = signal([]);
         this.pendingId = 0;
@@ -73039,9 +73043,9 @@ class ChatComposerComponent {
         });
         this.lastTypingEmit = 0;
         this.canSend = computed(() => {
-            const t = this.body().trim();
             if (this.disabled())
                 return false;
+            const t = this.body().trim();
             return (t.length > 0 && t.length <= this.maxLength()) || this.pending().length > 0;
         });
         this.placeholderText = computed(() => {
@@ -73050,9 +73054,12 @@ class ChatComposerComponent {
         });
         this.i18n.registerDefaults('ChatComposer', CHAT_COMPOSER_I18N);
     }
-    onInput(event) {
-        const target = event.target;
-        this.body.set(target.value ?? '');
+    /** Lee el texto del contenteditable a la signal `body`. */
+    syncBody() {
+        const el = this.editableRef()?.nativeElement;
+        // innerText conserva los saltos de línea; quita el \n final que el navegador agrega.
+        const text = (el?.innerText ?? '').replace(/\n$/, '');
+        this.body.set(text);
         this.emitTypingDebounced();
     }
     onKeydown(event) {
@@ -73061,11 +73068,30 @@ class ChatComposerComponent {
             this.onSend();
         }
     }
+    /** Pegar: texto plano (sin formato) + imágenes del portapapeles. */
+    onPaste(event) {
+        event.preventDefault();
+        const data = event.clipboardData;
+        if (!data)
+            return;
+        // Imágenes (capturas / copiar imagen).
+        for (const item of Array.from(data.items)) {
+            if (item.type.startsWith('image/')) {
+                const file = item.getAsFile();
+                if (file)
+                    this.addPending(file);
+            }
+        }
+        // Texto plano insertado en el caret (evita pegar HTML con estilos).
+        const text = data.getData('text/plain');
+        if (text) {
+            document.execCommand('insertText', false, text);
+        }
+        this.syncBody();
+    }
     onSend() {
         if (!this.canSend())
             return;
-        // Un solo evento: texto (caption) + todos los adjuntos staged. El consumer
-        // los sube y manda como UN mensaje con body + attachments.
         const files = this.pending().map(p => p.file);
         const text = this.body().trim();
         this.send.emit({ text, files });
@@ -73074,6 +73100,12 @@ class ChatComposerComponent {
                 URL.revokeObjectURL(att.url);
         }
         this.pending.set([]);
+        this.clearEditable();
+    }
+    clearEditable() {
+        const el = this.editableRef()?.nativeElement;
+        if (el)
+            el.innerText = '';
         this.body.set('');
     }
     onFile(event) {
@@ -73083,22 +73115,6 @@ class ChatComposerComponent {
             this.addPending(file);
         input.value = '';
     }
-    /** Pegar imagen desde el portapapeles (captura de pantalla, copiar imagen). */
-    onPaste(event) {
-        const items = event.clipboardData?.items;
-        if (!items)
-            return;
-        for (const item of Array.from(items)) {
-            if (item.type.startsWith('image/')) {
-                const file = item.getAsFile();
-                if (file) {
-                    event.preventDefault();
-                    this.addPending(file);
-                }
-                return;
-            }
-        }
-    }
     addPending(file) {
         const kind = file.type.startsWith('image/')
             ? 'image'
@@ -73116,9 +73132,6 @@ class ChatComposerComponent {
             return arr.filter(a => a.id !== id);
         });
     }
-    /**
-     * Emite typing como máximo 1 vez cada 2s. performance.now es seguro en runtime.
-     */
     emitTypingDebounced() {
         const now = performance.now();
         if (now - this.lastTypingEmit > 2000) {
@@ -73127,7 +73140,6 @@ class ChatComposerComponent {
         }
     }
     // ─── Grabación de audio ───────────────────────────────────────────────────
-    /** Selecciona un mimeType de audio soportado por el navegador. */
     pickAudioMime() {
         const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4'];
         const MR = window.MediaRecorder;
@@ -73139,7 +73151,7 @@ class ChatComposerComponent {
         if (this.recording())
             return;
         if (!navigator.mediaDevices?.getUserMedia || !('MediaRecorder' in window)) {
-            this.voice.emit(); // sin soporte: deja que el consumer decida (fallback)
+            this.voice.emit();
             return;
         }
         try {
@@ -73214,7 +73226,7 @@ class ChatComposerComponent {
         return this.i18n.t(key, 'ChatComposer');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComposerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComposerComponent, isStandalone: true, selector: "val-chat-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, replyingTo: { classPropertyName: "replyingTo", publicName: "replyingTo", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showMic: { classPropertyName: "showMic", publicName: "showMic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { send: "send", typing: "typing", voice: "voice", cancelReply: "cancelReply" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComposerComponent, isStandalone: true, selector: "val-chat-composer", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, replyingTo: { classPropertyName: "replyingTo", publicName: "replyingTo", isSignal: true, isRequired: false, transformFunction: null }, showAttach: { classPropertyName: "showAttach", publicName: "showAttach", isSignal: true, isRequired: false, transformFunction: null }, showMic: { classPropertyName: "showMic", publicName: "showMic", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { send: "send", typing: "typing", voice: "voice", cancelReply: "cancelReply" }, viewQueries: [{ propertyName: "editableRef", first: true, predicate: ["editable"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="composer">
       @if (replyingTo()) {
         <div class="reply-bar">
@@ -73268,48 +73280,47 @@ class ChatComposerComponent {
           </button>
         </div>
       } @else {
-        <div class="pill">
-          @if (showAttach()) {
-            <label class="icon-btn" [attr.aria-label]="t('attach')">
-              <ion-icon name="add-outline" aria-hidden="true" />
-              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
-            </label>
-          }
-
-          <ion-textarea
-            class="field"
-            [placeholder]="placeholderText()"
-            [disabled]="disabled()"
-            [maxlength]="maxLength()"
-            [autoGrow]="true"
-            [rows]="1"
-            [value]="body()"
-            [spellcheck]="false"
-            autocapitalize="sentences"
-            autocorrect="off"
-            enterkeyhint="enter"
-            (ionInput)="onInput($event)"
+        <div class="shell">
+          <div
+            #editable
+            class="editable"
+            [class.is-empty]="!body()"
+            contenteditable="true"
+            role="textbox"
+            aria-multiline="true"
+            [attr.data-placeholder]="placeholderText()"
+            [attr.aria-label]="placeholderText()"
+            (input)="syncBody()"
             (keydown)="onKeydown($event)"
             (paste)="onPaste($event)"
-          ></ion-textarea>
+          ></div>
 
-          @if (canSend()) {
-            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
-              <ion-icon name="arrow-up-outline" aria-hidden="true" />
-            </button>
-          } @else if (showMic()) {
-            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-              <ion-icon name="mic-outline" aria-hidden="true" />
-            </button>
-          }
+          <div class="actions">
+            @if (showAttach()) {
+              <label class="icon-btn" [attr.aria-label]="t('attach')">
+                <ion-icon name="add-outline" aria-hidden="true" />
+                <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
+              </label>
+            }
+            <span class="actions-spacer"></span>
+            @if (canSend()) {
+              <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+                <ion-icon name="arrow-up-outline" aria-hidden="true" />
+              </button>
+            } @else if (showMic()) {
+              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+                <ion-icon name="mic-outline" aria-hidden="true" />
+              </button>
+            }
+          </div>
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.audio-chip{display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.audio-chip audio{flex:1;height:36px;min-width:0}.thumb-remove.inline{position:static;flex-shrink:0;background:var(--ion-color-medium, #92949c)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.shell{display:flex;flex-direction:column;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:20px;padding:8px 12px}.editable{min-height:24px;max-height:160px;overflow-y:auto;outline:none;font-size:.9375rem;line-height:1.4;color:var(--ion-text-color, #000);white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text}.editable.is-empty:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);pointer-events:none}.actions{display:flex;align-items:center;gap:4px}.actions-spacer{flex:1}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.25rem}.icon-btn:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.125rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.audio-chip{display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.audio-chip audio{flex:1;height:36px;min-width:0}.thumb-remove.inline{position:static;flex-shrink:0;background:var(--ion-color-medium, #92949c)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:20px;padding:4px 8px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-chat-composer', standalone: true, imports: [CommonModule, IonTextarea, IonIcon], template: `
+            args: [{ selector: 'val-chat-composer', standalone: true, imports: [CommonModule, IonIcon], template: `
     <div class="composer">
       @if (replyingTo()) {
         <div class="reply-bar">
@@ -73363,44 +73374,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </button>
         </div>
       } @else {
-        <div class="pill">
-          @if (showAttach()) {
-            <label class="icon-btn" [attr.aria-label]="t('attach')">
-              <ion-icon name="add-outline" aria-hidden="true" />
-              <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
-            </label>
-          }
-
-          <ion-textarea
-            class="field"
-            [placeholder]="placeholderText()"
-            [disabled]="disabled()"
-            [maxlength]="maxLength()"
-            [autoGrow]="true"
-            [rows]="1"
-            [value]="body()"
-            [spellcheck]="false"
-            autocapitalize="sentences"
-            autocorrect="off"
-            enterkeyhint="enter"
-            (ionInput)="onInput($event)"
+        <div class="shell">
+          <div
+            #editable
+            class="editable"
+            [class.is-empty]="!body()"
+            contenteditable="true"
+            role="textbox"
+            aria-multiline="true"
+            [attr.data-placeholder]="placeholderText()"
+            [attr.aria-label]="placeholderText()"
+            (input)="syncBody()"
             (keydown)="onKeydown($event)"
             (paste)="onPaste($event)"
-          ></ion-textarea>
+          ></div>
 
-          @if (canSend()) {
-            <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
-              <ion-icon name="arrow-up-outline" aria-hidden="true" />
-            </button>
-          } @else if (showMic()) {
-            <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
-              <ion-icon name="mic-outline" aria-hidden="true" />
-            </button>
-          }
+          <div class="actions">
+            @if (showAttach()) {
+              <label class="icon-btn" [attr.aria-label]="t('attach')">
+                <ion-icon name="add-outline" aria-hidden="true" />
+                <input type="file" hidden (change)="onFile($event)" accept="image/*,application/pdf" />
+              </label>
+            }
+            <span class="actions-spacer"></span>
+            @if (canSend()) {
+              <button class="send-btn" [attr.aria-label]="t('send')" (click)="onSend()">
+                <ion-icon name="arrow-up-outline" aria-hidden="true" />
+              </button>
+            } @else if (showMic()) {
+              <button class="icon-btn mic" [attr.aria-label]="t('voice')" (click)="startRecording()">
+                <ion-icon name="mic-outline" aria-hidden="true" />
+              </button>
+            }
+          </div>
         </div>
       }
     </div>
-  `, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.pill{display:flex;align-items:flex-end;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.field{flex:1;--background: transparent;--padding-start: 6px;--padding-end: 6px;--padding-top: 8px;--padding-bottom: 8px;margin:0;max-height:120px;font-size:.9375rem}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.375rem}.icon-btn:hover,.icon-btn.active{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.25rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.audio-chip{display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.audio-chip audio{flex:1;height:36px;min-width:0}.thumb-remove.inline{position:static;flex-shrink:0;background:var(--ion-color-medium, #92949c)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:24px;padding:2px 6px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"] }]
+  `, styles: [":host{display:block}.composer{display:flex;flex-direction:column;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .08))}.reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-left:3px solid var(--ion-color-primary);border-radius:8px;background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.reply-content{display:flex;flex-direction:column;flex:1;min-width:0;font-size:.8125rem}.reply-name{font-weight:700;color:var(--ion-color-primary)}.reply-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ion-color-medium, #92949c)}.pending-row{display:flex;gap:8px;flex-wrap:wrap;padding:2px 4px}.thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;color:var(--ion-color-medium, #92949c);font-size:1.5rem}.thumb-name{font-size:.5625rem;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-text-color, #000)}.thumb-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:#0000008c;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.875rem}.shell{display:flex;flex-direction:column;gap:4px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:20px;padding:8px 12px}.editable{min-height:24px;max-height:160px;overflow-y:auto;outline:none;font-size:.9375rem;line-height:1.4;color:var(--ion-text-color, #000);white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text}.editable.is-empty:before{content:attr(data-placeholder);color:var(--ion-color-medium, #92949c);pointer-events:none}.actions{display:flex;align-items:center;gap:4px}.actions-spacer{flex:1}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--ion-color-medium, #92949c);cursor:pointer;font-size:1.25rem}.icon-btn:hover{color:var(--ion-color-primary)}.send-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:var(--ion-color-primary);color:var(--ion-color-primary-contrast, #fff);cursor:pointer;font-size:1.125rem;transition:transform .1s ease}.send-btn:active{transform:scale(.92)}.icon-btn.danger{color:var(--ion-color-danger, #eb445a)}.audio-chip{display:flex;align-items:center;gap:6px;width:100%;padding:4px 6px;border-radius:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-color-step-100, rgba(127, 127, 127, .1))}.audio-chip audio{flex:1;height:36px;min-width:0}.thumb-remove.inline{position:static;flex-shrink:0;background:var(--ion-color-medium, #92949c)}.rec-bar{display:flex;align-items:center;gap:10px;background:var(--ion-color-light, #f4f5f8);border:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));border-radius:20px;padding:4px 8px}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--ion-color-danger, #eb445a);animation:rec-pulse 1.2s ease-in-out infinite}.rec-time{font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--ion-text-color, #000)}.rec-spacer{flex:1}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.3}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**