@naniteninja/profile-comparison-lib 1.0.18 → 1.0.20

package/fesm2022/naniteninja-profile-comparison-lib.mjs

@@ -1,13 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, ViewChild, HostListener, Output, Input, Component, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
 import { switchMap as switchMap$1, map as map$1, catchError, tap as tap$1 } from 'rxjs/operators';
 import { from, switchMap, map, of, Observable, BehaviorSubject, throwError, tap, retryWhen, concatMap, timer, forkJoin, catchError as catchError$1 } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
-import * as i2 from '@angular/common';
+import * as i2_1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@naniteninja/ionic-lib';
-import { LibMarqueeModule } from '@naniteninja/ionic-lib';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /** Backend mode for the profile comparison component. */
@@ -204,10 +202,10 @@ class CachePersistenceService {
     static STORE_OPENAI_EMBEDDINGS = STORE_OPENAI_EMBEDDINGS;
     static STORE_PROFILE_FACE = STORE_PROFILE_FACE;
     static STORE_PROFILE_COMPARE = STORE_PROFILE_COMPARE;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CachePersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CachePersistenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -253,10 +251,10 @@ class FileConversionService {
         const mime = this.getMimeFromFilename(imageStr);
         return this.urlToFile(imageStr, fileBaseName, mime);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileConversionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileConversionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -372,10 +370,10 @@ class ImageCompressionService {
             return `${base}.webp`;
         return `${base}.jpg`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ImageCompressionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1154,10 +1152,10 @@ class OpenAIEmbeddingService {
         this.persistence.clear(CachePersistenceService.STORE_OPENAI_SIMILARITY);
         this.persistence.clear(CachePersistenceService.STORE_OPENAI_EMBEDDINGS);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1189,10 +1187,10 @@ class ProfileComparisonLibService {
     getVersion() {
         return '0.0.0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1446,10 +1444,10 @@ class ProfileService {
         this.compareInterestsCache.clear();
         this.persistence.clear(CachePersistenceService.STORE_PROFILE_COMPARE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
@@ -1505,10 +1503,10 @@ class ProfileComparisonBackendService {
             return throwError(() => err);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1520,6 +1518,7 @@ class ProfileComparisonLibComponent {
     imageCompressionService;
     cdr;
     getVerboseLogging;
+    static DEFAULT_OBJECT_POSITION = '50% 50%';
     static DEFAULT_EYE_ALIGNMENT_BIAS_PX = 50;
     static DEFAULT_IMAGE_FORMAT = 'image/jpeg';
     static DEFAULT_IMAGE_QUALITY_START = 0.85;
@@ -1533,7 +1532,6 @@ class ProfileComparisonLibComponent {
     static DEFAULT_MAX_HEIGHT = 1600;
     static SPACER_SMALL = '-';
     static SPACER_LARGE = '----';
-    static PLACEHOLDER = '--';
     static CONSOLIDATION_SEPARATOR_X = '×';
     static CONSOLIDATION_SEPARATOR_SLASH = '/';
     static FACEPP_RATE_LIMIT_DELAY_MS = 5000;
@@ -1541,8 +1539,8 @@ class ProfileComparisonLibComponent {
     // Drag and shape constants
     static SHAPE_BG_HEIGHT = '350px';
     static SHAPE_BG_OBJECT_FIT = 'cover';
-    static SHAPE_BG1_BACK_POSITION = 'right center';
-    static SHAPE_BG2_BACK_POSITION = 'left center';
+    static SHAPE_BG1_OBJECT_POSITION = 'right';
+    static SHAPE_BG2_OBJECT_POSITION = 'left';
     static DRAG_MIN_WIDTH = 200;
     static DRAG_MAX_WIDTH = 400;
     static MAX_DRAG_DISTANCE = 100;
@@ -1558,28 +1556,30 @@ class ProfileComparisonLibComponent {
         person3Interests: [],
         user1Image: '',
         user2Image: '',
-        edgeShading: true,
-        shadingColor: 'rgba(44, 40, 47, 0.7)'
     };
     backendMode = BackendMode.Real;
     backendUrl = null;
     fadeAllEdges = true;
+    person1Name = 'Josh';
+    person2Name = 'Amy';
     matrixDataChange = new EventEmitter();
     rawLLMOutputChange = new EventEmitter();
     viewProfileClick = new EventEmitter();
-    /** Fires when the user drags a frame to its maximum displacement and
-     *  continues pulling past the edge. The parent can use this to swipe to
-     *  the next/previous prospect in its own swiper. */
-    edgeDrag = new EventEmitter();
     selectedFile = null;
     firstImageData = null;
     secondImageData = null;
     user1Transform = '';
     user2Transform = '';
+    user1Top = '0px';
+    user1Height = '100%';
+    user2Top = '0px';
+    user2Height = '100%';
     alignmentCalculated = false;
     isAligning = false;
-    user1ObjectPosition = ProfileComparisonLibComponent.SHAPE_BG1_BACK_POSITION;
-    user2ObjectPosition = ProfileComparisonLibComponent.SHAPE_BG2_BACK_POSITION;
+    /** Set when backend returns an error (e.g. 503 API keys not configured). */
+    backendError = null;
+    user1ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
+    user2ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
     user1NaturalWidth = 0;
     user1NaturalHeight = 0;
     user2NaturalWidth = 0;
@@ -1609,34 +1609,6 @@ class ProfileComparisonLibComponent {
     alignedPerson2Interests = [];
     leftProfileClicked = false;
     rightProfileClicked = false;
-    leftShapeAnimating = false;
-    rightShapeAnimating = false;
-    similarities = [];
-    // ── Small-screen responsive helpers ──────────────────────────────────────
-    get viewProfileLeftX() {
-        const w = window.innerWidth;
-        if (w <= 360)
-            return 65;
-        if (w <= 400)
-            return 52;
-        if (w <= 600)
-            return 48;
-        return 15;
-    }
-    get viewProfileRightX() {
-        const w = window.innerWidth;
-        if (w <= 360)
-            return 191;
-        if (w <= 400)
-            return 204;
-        if (w <= 600)
-            return 208;
-        return 241;
-    }
-    onResize() {
-        this.cdr.detectChanges();
-    }
-    // ─────────────────────────────────────────────────────────────────────────
     sortedA = [];
     sortedB = [];
     sortedC = [];
@@ -1647,8 +1619,6 @@ class ProfileComparisonLibComponent {
     backendConfigured = false;
     /** The resolved backend URL computed from inputs and legacy token. */
     resolvedBackendUrl = null;
-    /** Flag to prevent click animations after a drag. */
-    wasDragging = false;
     compressionConfig = {
         maxWidth: ProfileComparisonLibComponent.DEFAULT_MAX_WIDTH,
         maxHeight: ProfileComparisonLibComponent.DEFAULT_MAX_HEIGHT,
@@ -1666,11 +1636,15 @@ class ProfileComparisonLibComponent {
     fetchRequestId = 0;
     leftContainer;
     rightContainer;
-    leftFrame;
-    rightFrame;
-    leftBgFrame;
-    rightBgFrame;
+    profileFlex;
+    profileImgLeft;
+    profileImgRight;
     shapeContainer;
+    shapeBg;
+    shapeBg1;
+    shapeBg2;
+    shapeTextLeft;
+    shapeTextRight;
     shapeTextCenter;
     constructor(backendService, renderer, fileConversionService, imageCompressionService, cdr, getVerboseLogging) {
         this.backendService = backendService;
@@ -1711,15 +1685,19 @@ class ProfileComparisonLibComponent {
         this.user1Transform = 'translateY(0px)';
         this.user2Transform = 'translateY(0px)';
         this.alignmentCalculated = false;
+        this.isAligning = true;
+        this.cdr.detectChanges();
         this.log('ngOnInit', 'starting compressConfigImagesIfNeeded then fetchComparison');
         this.compressConfigImagesIfNeeded().subscribe({
             next: () => {
                 this.log('ngOnInit', 'compressConfigImagesIfNeeded done, calling fetchComparison');
+                this.isAligning = false;
                 this.fetchComparison();
             },
             error: (e) => {
                 console.warn('Config image compression failed, continuing:', e);
                 this.log('ngOnInit', 'compressConfigImagesIfNeeded error, calling fetchComparison anyway');
+                this.isAligning = false;
                 this.fetchComparison();
             }
         });
@@ -1733,16 +1711,9 @@ class ProfileComparisonLibComponent {
             this.backendConfigured = !!this.resolvedBackendUrl;
             this.log('ngOnChanges', 'backend inputs changed', 'resolvedUrl', this.resolvedBackendUrl ?? '(null)');
         }
-        if (changes['fadeAllEdges']) {
-            this.config.edgeShading = this.fadeAllEdges;
-        }
         if (changes['config']) {
             const first = changes['config'].firstChange;
             this.log('ngOnChanges', 'config changed', 'firstChange', first, 'backendConfigured', this.backendConfigured);
-            // Sync fadeAllEdges if it was explicitly changed via Input but not in config
-            if (this.config.edgeShading === undefined) {
-                this.config.edgeShading = this.fadeAllEdges;
-            }
             this.updateConfigProperties();
             if (!this.backendConfigured) {
                 this.log('ngOnChanges', 'skipping fetch: backend not configured');
@@ -1767,19 +1738,12 @@ class ProfileComparisonLibComponent {
             }
         }
     }
-    /**
-     * Returns the type of dash based on similarity score:
-     * - 'high': Very similar (Short single dash, 0.5 opacity)
-     * - 'medium': Almost similar (Standard 1 dash)
-     * - 'low': Very dissimilar (4 small dashes)
-     */
-    getDashType(index) {
-        const score = this.similarities[index] ?? 0;
-        if (score > 0.8)
-            return 'high';
-        if (score > 0.4)
-            return 'medium';
-        return 'low';
+    /** Use for template: hide left/right item when it's a shared (center) item. Compares case-insensitively. */
+    isInCenter(interest) {
+        if (!interest || !this.centerItem?.length)
+            return false;
+        const n = String(interest).trim().toLowerCase();
+        return this.centerItem.some((c) => String(c).trim().toLowerCase() === n);
     }
     fetchComparison() {
         this.log('fetchComparison', 'start');
@@ -1793,6 +1757,8 @@ class ProfileComparisonLibComponent {
         }
         const requestId = ++this.fetchRequestId;
         this.isAligning = true;
+        this.backendError = null;
+        this.cdr.detectChanges();
         const normalized = this.buildConfigWithDefaults(this.config, this.baseConfig);
         const configToSend = {
             person1Interests: normalized.person1Interests,
@@ -1815,17 +1781,32 @@ class ProfileComparisonLibComponent {
                 }
                 this.log('fetchComparison', 'backend response received', { aligned1: payload?.alignedPerson1Interests?.length, aligned2: payload?.alignedPerson2Interests?.length });
                 this.isAligning = false;
-                const a1 = payload.alignedPerson1Interests ?? [];
-                const a2 = payload.alignedPerson2Interests ?? [];
-                this.alignedPerson1Interests = a1;
-                this.alignedPerson2Interests = a2;
-                this.centerItem = payload.centerItem ?? [];
-                this.similarities = payload.similarities ?? [];
-                this.displayPerson1Interests = this.alignedPerson1Interests;
-                this.displayPerson2Interests = this.alignedPerson2Interests;
+                this.backendError = null;
                 this.matrixData = payload.matrixData ?? null;
                 if (this.matrixData)
                     this.matrixDataChange.emit(this.matrixData);
+                const a1 = payload.alignedPerson1Interests ?? [];
+                const a2 = payload.alignedPerson2Interests ?? [];
+                const sameLists = a1.length === a2.length && a1.every((v, i) => String(v).trim().toLowerCase() === String(a2[i]).trim().toLowerCase());
+                if (sameLists && a1.length > 0) {
+                    this.log('fetchComparison', 'backend returned identical aligned lists; using raw lists to keep sides distinct', { len: a1.length });
+                    this.alignedPerson1Interests = [];
+                    this.alignedPerson2Interests = [];
+                    this.displayPerson1Interests = this.person1Interests;
+                    this.displayPerson2Interests = this.person2Interests;
+                    this.centerItem = payload.centerItem ?? [];
+                }
+                else {
+                    const rawCenter = payload.centerItem ?? [];
+                    const list1ToUse = this.person1Interests?.length ? this.person1Interests : a1;
+                    const list2ToUse = this.person2Interests?.length ? this.person2Interests : a2;
+                    const reordered = this.reorderInterestsByMatrix(list1ToUse, list2ToUse, rawCenter);
+                    this.alignedPerson1Interests = reordered.p1;
+                    this.alignedPerson2Interests = reordered.p2;
+                    this.displayPerson1Interests = reordered.p1;
+                    this.displayPerson2Interests = reordered.p2;
+                    this.centerItem = reordered.center;
+                }
                 if (payload.rawLLMOutput != null) {
                     this.rawLLMOutput = payload.rawLLMOutput;
                     this.rawLLMOutputChange.emit(payload.rawLLMOutput);
@@ -1851,6 +1832,7 @@ class ProfileComparisonLibComponent {
                 }
                 this.log('fetchComparison', 'backend error', err);
                 const msg = err?.error?.message ?? err?.message ?? err?.statusText ?? (typeof err?.error === 'string' ? err.error : null) ?? 'Request failed';
+                this.backendError = msg;
                 console.error('[ProfileComparisonLib] fetchComparison error', err?.status ?? '', msg);
                 this.isAligning = false;
                 this.cdr.detectChanges();
@@ -1864,6 +1846,10 @@ class ProfileComparisonLibComponent {
         this.person2Interests = [...normalized.person2Interests];
         this.user1Image = normalized.user1Image;
         this.user2Image = normalized.user2Image;
+        if (normalized.person1Name)
+            this.person1Name = normalized.person1Name;
+        if (normalized.person2Name)
+            this.person2Name = normalized.person2Name;
     }
     buildConfigWithDefaults(cfg, base) {
         const list = (val, fb) => {
@@ -1882,13 +1868,13 @@ class ProfileComparisonLibComponent {
         };
         const safe = cfg || {};
         return {
+            person1Name: safe.person1Name ? str(safe.person1Name, '') : undefined,
+            person2Name: safe.person2Name ? str(safe.person2Name, '') : undefined,
             person1Interests: list(safe.person1Interests, base.person1Interests),
             person2Interests: list(safe.person2Interests, base.person2Interests),
             person3Interests: list(safe.person3Interests, base.person3Interests),
             user1Image: str(safe.user1Image, base.user1Image),
             user2Image: str(safe.user2Image, base.user2Image),
-            edgeShading: safe.edgeShading ?? base.edgeShading ?? true,
-            shadingColor: safe.shadingColor ?? base.shadingColor ?? 'rgba(44, 40, 47, 0.7)',
         };
     }
     onUserImageLoad(which, event) {
@@ -1918,9 +1904,9 @@ class ProfileComparisonLibComponent {
         const natH = which === 1 ? this.user1NaturalHeight : this.user2NaturalHeight;
         if (!face || !natW || !natH) {
             if (which === 1)
-                this.user1ObjectPosition = ProfileComparisonLibComponent.SHAPE_BG1_BACK_POSITION;
+                this.user1ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
             else
-                this.user2ObjectPosition = ProfileComparisonLibComponent.SHAPE_BG2_BACK_POSITION;
+                this.user2ObjectPosition = ProfileComparisonLibComponent.DEFAULT_OBJECT_POSITION;
             return;
         }
         const eyes = this.getEyeCoordinatesFromFace(face);
@@ -2016,7 +2002,7 @@ class ProfileComparisonLibComponent {
     }
     getProfileContainerSize(which) {
         try {
-            const el = (which === 1 ? this.leftFrame : this.rightFrame)?.nativeElement || null;
+            const el = (which === 1 ? this.profileImgLeft : this.profileImgRight)?.nativeElement || null;
             if (!el)
                 return { width: 0, height: 0 };
             const rect = el.getBoundingClientRect();
@@ -2027,384 +2013,297 @@ class ProfileComparisonLibComponent {
         }
     }
     getOverlapSizeCssPx() {
-        return 40;
+        try {
+            const root = this.profileFlex?.nativeElement || null;
+            const fallback = 40;
+            if (!root)
+                return fallback;
+            const val = getComputedStyle(root).getPropertyValue('--overlap-size').trim();
+            const parsed = parseFloat(val);
+            return isNaN(parsed) ? fallback : parsed;
+        }
+        catch {
+            return 40;
+        }
     }
     setOverlapSizeCssPx(px) {
-        // deprecated
+        try {
+            const root = this.profileFlex?.nativeElement || null;
+            if (!root)
+                return;
+            const clamped = Math.max(8, Math.min(80, Math.round(px)));
+            root.style.setProperty('--overlap-size', `${clamped}px`);
+        }
+        catch { }
     }
     waitForImagesAndInitDrag() {
-        const leftFrame = this.leftFrame?.nativeElement;
-        const rightFrame = this.rightFrame?.nativeElement;
-        if (!leftFrame || !rightFrame) {
-            setTimeout(() => this.waitForImagesAndInitDrag(), 100);
+        const shapeBg1 = this.shapeBg1?.nativeElement;
+        const shapeBg2 = this.shapeBg2?.nativeElement;
+        if (!shapeBg1 || !shapeBg2) {
             return;
         }
-        setTimeout(() => {
-            this.initDrag();
-            // Apply initial edge mask state
-            setTimeout(() => this.updateEdgeMasks(), 50);
-        }, 100);
-    }
-    /**
-     * Toggles .edge-at-left-border / .edge-at-right-border classes on both
-     * interactive and background frames based on their outer edge position
-     * relative to the container boundary.
-     */
-    updateEdgeMasks() {
-        const container = this.shapeContainer?.nativeElement;
-        if (!container)
-            return;
-        const containerRect = container.getBoundingClientRect();
-        const frames = [
-            { side: 'left', el: this.leftFrame?.nativeElement, bg: this.leftBgFrame?.nativeElement },
-            { side: 'right', el: this.rightFrame?.nativeElement, bg: this.rightBgFrame?.nativeElement }
-        ];
-        frames.forEach(f => {
-            if (!f.el)
-                return;
-            const rect = f.el.getBoundingClientRect();
-            const className = `edge-at-${f.side}-border`;
-            const touches = f.side === 'left'
-                ? rect.left <= containerRect.left + 1
-                : rect.right >= containerRect.right - 1;
-            f.el.classList.toggle(className, touches);
-            if (f.bg)
-                f.bg.classList.toggle(className, touches);
-        });
+        const checkImagesLoaded = () => {
+            // For SVG elements, check if they're rendered instead of naturalWidth
+            const img1Loaded = shapeBg1 && shapeBg1.getBoundingClientRect().width > 0;
+            const img2Loaded = shapeBg2 && shapeBg2.getBoundingClientRect().width > 0;
+            if (img1Loaded && img2Loaded) {
+                setTimeout(() => this.initDrag(), 50);
+            }
+            else {
+                setTimeout(checkImagesLoaded, 100);
+            }
+        };
+        checkImagesLoaded();
     }
     initDrag() {
-        const leftFrame = this.leftFrame?.nativeElement;
-        const rightFrame = this.rightFrame?.nativeElement;
-        const leftBgFrame = this.leftBgFrame?.nativeElement;
-        const rightBgFrame = this.rightBgFrame?.nativeElement;
-        const shapeTextCenter = this.shapeTextCenter?.nativeElement;
-        if (!leftFrame || !rightFrame)
+        const shapeBg1 = this.shapeBg1?.nativeElement;
+        const shapeBg2 = this.shapeBg2?.nativeElement;
+        const shapeTextLeft = this.shapeTextLeft?.nativeElement || null;
+        const shapeTextRight = this.shapeTextRight?.nativeElement || null;
+        if (!shapeBg1 || !shapeBg2 || !shapeTextLeft || !shapeTextRight)
             return;
-        // Glass SVG references for shadow fade-on-drag behaviour
-        const leftGlass = leftFrame.querySelector('.profile-comparison__frame-svg--glass');
-        const rightGlass = rightFrame.querySelector('.profile-comparison__frame-svg--glass');
+        // Cast to HTMLElement to access style properties conveniently, as SVGElement style handling can be similar in this context
+        const shapeBg1El = shapeBg1;
+        const shapeBg2El = shapeBg2;
+        shapeBg1El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+        // shapeBg1El.style.objectFit = ProfileComparisonLibComponent.SHAPE_BG_OBJECT_FIT;
+        // shapeBg1El.style.objectPosition = ProfileComparisonLibComponent.SHAPE_BG1_OBJECT_POSITION;
+        shapeBg2El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+        // shapeBg2El.style.objectFit = ProfileComparisonLibComponent.SHAPE_BG_OBJECT_FIT;
+        // shapeBg2El.style.objectPosition = ProfileComparisonLibComponent.SHAPE_BG2_OBJECT_POSITION;
+        const originalWidth1 = shapeBg1.getBoundingClientRect().width;
+        const originalWidth2 = shapeBg2.getBoundingClientRect().width;
+        const minWidth = ProfileComparisonLibComponent.DRAG_MIN_WIDTH;
+        const maxWidth = ProfileComparisonLibComponent.DRAG_MAX_WIDTH;
         let isDragging = false;
         let dragStartX = 0;
-        let activeFrame = null;
-        let edgeDragEmitted = false; // Track whether we have emitted edgeDrag for the current gesture
-        const initialTranslateXLeft = -24; // starting CSS value percent
-        const initialTranslateXRight = 24;
+        let initialWidth1 = 0;
+        let initialWidth2 = 0;
+        let activeImg = null;
+        // Use ViewChild for center text
+        const shapeTextCenter = this.shapeTextCenter?.nativeElement || null;
         const onMouseMove = (e) => {
-            if (!isDragging)
+            if (!isDragging || !activeImg)
                 return;
             const deltaX = e.clientX - dragStartX;
-            const containerWidth = leftFrame.parentElement?.clientWidth || 360;
-            // Current drag delta in container-relative percentage
-            let deltaPercent = (deltaX / containerWidth) * 100;
-            if (Math.abs(deltaX) > 5) {
-                this.wasDragging = true;
-            }
-            // Check for edge drag swiping (both mouse and touch support!)
-            const leftRect = leftFrame.getBoundingClientRect();
-            const rightRect = rightFrame.getBoundingClientRect();
-            const overlapPx = Math.max(0, leftRect.right - leftRect.left); // Frame width
-            const maxDisplacementPx = overlapPx / 3;
-            if (!edgeDragEmitted && Math.abs(deltaX) > maxDisplacementPx * 1.05) {
-                // Only trigger swipe outward:
-                // Left frame dragged further left (deltaX < 0) or Right frame dragged further right (deltaX > 0)
-                if ((activeFrame === leftFrame && deltaX < 0) || (activeFrame === rightFrame && deltaX > 0)) {
-                    edgeDragEmitted = true;
-                    this.edgeDrag.emit(deltaX < 0 ? 'left' : 'right');
-                }
+            const containerWidth = this.shapeContainer?.nativeElement?.clientWidth || 0;
+            let newWidth1 = initialWidth1;
+            let newWidth2 = initialWidth2;
+            if (activeImg === shapeBg1) {
+                newWidth1 = initialWidth1 + deltaX;
+                newWidth2 = initialWidth2 - deltaX;
             }
-            // Clamp delta to the pre-calculated displacement limit
-            deltaPercent = Math.max(-initialMaxDisplacementPercent, Math.min(initialMaxDisplacementPercent, deltaPercent));
-            // Calculate actual frame displacement in pixels for text coordination
-            // Frame width is 75% of container width
-            const frameMovePx = (deltaPercent / 100) * (containerWidth * 0.75);
-            let newLeftTranslate = initialTranslateXLeft;
-            let newRightTranslate = initialTranslateXRight;
-            // Staggered text movement references
-            const leftContent = leftFrame.querySelector('.profile-comparison__content--left');
-            const rightContent = rightFrame.querySelector('.profile-comparison__content--right');
-            // Mouse-controlled sequential staged text movement (no auto-animations)
-            const maxStageMove = Math.abs(initialMaxDisplacementPercent * 0.75 * containerWidth / 100);
-            const getStagedX = (current, startPct, endPct, totalDisplacementPx) => {
-                const absD = Math.abs(current);
-                const startPx = maxStageMove * startPct;
-                const endPx = maxStageMove * endPct;
-                if (absD <= startPx)
-                    return 0;
-                // Linear progress [0, 1]
-                let progress = Math.min(1, (absD - startPx) / (endPx - startPx));
-                // Apply smoothstep easing (3x^2 - 2x^3) for soft start/end
-                progress = progress * progress * (3 - 2 * progress);
-                return progress * totalDisplacementPx * Math.sign(current);
-            };
-            const leadTarget = 35;
-            const followTarget = 40;
-            const centerTarget = 15;
-            // Use a moderate transition to smooth out mouse jitter while maintaining control
-            const textSmoothing = 'transform 0.4s cubic-bezier(0.2, 0, 0.2, 1)';
-            if (leftContent)
-                leftContent.style.transition = textSmoothing;
-            if (rightContent)
-                rightContent.style.transition = textSmoothing;
-            if (shapeTextCenter)
-                shapeTextCenter.style.transition = textSmoothing;
-            if (deltaPercent < 0) {
-                // Dragging left: only left shape moves further left
-                newLeftTranslate = initialTranslateXLeft + deltaPercent;
-                leftFrame.style.transform = `translateX(${newLeftTranslate}%) scale(0.86)`;
-                if (leftBgFrame) {
-                    leftBgFrame.style.transform = `translateX(${newLeftTranslate}%) scale(0.86)`;
-                    const bg = leftBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.position = 'absolute';
-                        bg.style.left = '0%';
-                        bg.style.right = `${deltaPercent}%`; // Expand right when dragging left
-                    }
-                }
-                // Ensure right frame is at rest
-                rightFrame.style.transform = `translateX(${initialTranslateXRight}%) scale(0.86)`;
-                if (rightBgFrame) {
-                    rightBgFrame.style.transform = `translateX(${initialTranslateXRight}%) scale(0.86)`;
-                    const bg = rightBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.position = 'absolute';
-                        bg.style.left = '0%';
-                        bg.style.right = '0%';
-                        bg.style.backgroundPositionX = ''; // restore CSS default (right)
-                    }
-                }
-                // Lead = Left, Follow = Right
-                if (leftContent)
-                    leftContent.style.transform = `translateX(${getStagedX(frameMovePx, 0, 0.4, -leadTarget)}px)`;
-                if (rightContent)
-                    rightContent.style.transform = `translateX(${getStagedX(frameMovePx, 0.4, 0.8, followTarget)}px)`;
-                if (shapeTextCenter)
-                    shapeTextCenter.style.transform = `translateX(${getStagedX(frameMovePx, 0.8, 1.0, centerTarget)}px) scale(0.86)`;
+            else if (activeImg === shapeBg2) {
+                newWidth1 = initialWidth1 - deltaX;
+                newWidth2 = initialWidth2 + deltaX;
             }
-            else if (deltaPercent > 0) {
-                // Dragging right: only right shape moves further right
-                newRightTranslate = initialTranslateXRight + deltaPercent;
-                rightFrame.style.transform = `translateX(${newRightTranslate}%) scale(0.86)`;
-                if (rightBgFrame) {
-                    rightBgFrame.style.transform = `translateX(${newRightTranslate}%) scale(0.86)`;
-                    // Same formula as left bg: left:-deltaPercent% keeps image stationary.
-                    // For right drag deltaPercent>0, so left is negative — div extends
-                    // left of frame (clipped by overflow:hidden) while image anchor stays put.
-                    const bg = rightBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.position = 'absolute';
-                        bg.style.left = `${-deltaPercent}%`;
-                        bg.style.right = '0%';
-                    }
-                }
-                // Ensure left frame is at rest
-                leftFrame.style.transform = `translateX(${initialTranslateXLeft}%) scale(0.86)`;
-                if (leftBgFrame) {
-                    leftBgFrame.style.transform = `translateX(${initialTranslateXLeft}%) scale(0.86)`;
-                    const bg = leftBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.position = 'absolute';
-                        bg.style.left = '0%';
-                        bg.style.right = '0%';
-                    }
-                }
-                // Lead = Right, Follow = Left
-                if (rightContent)
-                    rightContent.style.transform = `translateX(${getStagedX(frameMovePx, 0, 0.4, -leadTarget)}px)`;
-                if (leftContent)
-                    leftContent.style.transform = `translateX(${getStagedX(frameMovePx, 0.4, 0.8, followTarget)}px)`;
-                if (shapeTextCenter)
-                    shapeTextCenter.style.transform = `translateX(${getStagedX(frameMovePx, 0.8, 1.0, centerTarget)}px) scale(0.86)`;
+            newWidth1 = Math.max(minWidth, Math.min(maxWidth, newWidth1));
+            newWidth2 = Math.max(minWidth, Math.min(maxWidth, newWidth2));
+            shapeBg1El.style.width = newWidth1 + 'px';
+            shapeBg1El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+            shapeBg2El.style.width = newWidth2 + 'px';
+            shapeBg2El.style.height = ProfileComparisonLibComponent.SHAPE_BG_HEIGHT;
+            const widthChange1 = newWidth1 - originalWidth1;
+            const widthChange2 = newWidth2 - originalWidth2;
+            const dragDirection = deltaX > 0 ? 1 : -1;
+            const dragDistance = Math.abs(deltaX);
+            const maxDragDistance = ProfileComparisonLibComponent.MAX_DRAG_DISTANCE;
+            const centerMoveDistance = Math.min(dragDistance, maxDragDistance) * dragDirection * ProfileComparisonLibComponent.CENTER_MOVE_MULTIPLIER;
+            shapeTextLeft.style.transform = `translateX(${widthChange1 * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
+            shapeTextRight.style.transform = `translateX(${-widthChange2 * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transform = `translateX(${centerMoveDistance * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
             }
-            // Update edge masks during drag
-            this.updateEdgeMasks();
         };
-        const resetDrag = () => {
+        const resetWidths = () => {
             isDragging = false;
-            activeFrame = null;
-            edgeDragEmitted = false; // Reset edge drag flag on release
-            const leftContent = leftFrame.querySelector('.profile-comparison__content--left');
-            const rightContent = rightFrame.querySelector('.profile-comparison__content--right');
-            // Smoother rebound transition
-            const reboundTransition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
-            [leftFrame, rightFrame, leftBgFrame, rightBgFrame, leftContent, rightContent, shapeTextCenter].forEach(el => {
-                if (el) {
-                    el.style.transition = reboundTransition;
-                    el.style.transitionDelay = '0s'; // Reset delay for simultaneous rebound
-                }
-            });
-            // On release: instantly flash glass to near-zero, then spring back inside the rAF
-            [leftGlass, rightGlass].forEach(gl => {
-                if (gl) {
-                    gl.style.transition = 'none';
-                    gl.style.opacity = '0.03';
-                }
-            });
-            // Use requestAnimationFrame to ensure transition is applied before position reset
-            requestAnimationFrame(() => {
-                leftFrame.style.transform = `translateX(-24%) scale(0.86)`;
-                rightFrame.style.transform = `translateX(24%) scale(0.86)`;
-                if (leftBgFrame) {
-                    leftBgFrame.style.transform = `translateX(-24%) scale(0.86)`;
-                    const bg = leftBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.transition = `left 0.6s cubic-bezier(0.16, 1, 0.3, 1), right 0.6s cubic-bezier(0.16, 1, 0.3, 1), ${reboundTransition}`;
-                        bg.style.left = '0%';
-                        bg.style.right = '0%';
-                    }
-                }
-                if (rightBgFrame) {
-                    rightBgFrame.style.transform = `translateX(24%) scale(0.86)`;
-                    const bg = rightBgFrame.querySelector('.profile-comparison__bg');
-                    if (bg) {
-                        bg.style.transition = `left 0.6s cubic-bezier(0.16, 1, 0.3, 1), right 0.6s cubic-bezier(0.16, 1, 0.3, 1), ${reboundTransition}`;
-                        bg.style.left = '0%';
-                        bg.style.right = '0%';
-                    }
-                }
-                // Force reset all transforms and clear inline styles
-                [leftContent, rightContent].forEach(el => {
-                    if (el) {
-                        el.style.transform = 'translateX(0px)';
-                        el.style.transition = reboundTransition;
-                    }
-                });
-                if (shapeTextCenter) {
-                    shapeTextCenter.style.transform = 'translateX(0px) scale(0.86)';
-                    shapeTextCenter.style.transition = reboundTransition;
-                }
-                // Restore glass shadow opacity with spring rebound
-                [leftGlass, rightGlass].forEach(gl => {
-                    if (gl) {
-                        gl.style.transition = 'opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
-                        gl.style.opacity = '1';
-                    }
-                });
-            });
+            activeImg = null;
+            shapeBg1El.style.transition = ProfileComparisonLibComponent.TRANSITION_WIDTH;
+            shapeBg2El.style.transition = ProfileComparisonLibComponent.TRANSITION_WIDTH;
+            shapeTextLeft.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            shapeTextRight.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transition = ProfileComparisonLibComponent.TRANSITION_TRANSFORM;
+            }
+            shapeBg1El.style.width = originalWidth1 + 'px';
+            shapeBg2El.style.width = originalWidth2 + 'px';
+            shapeTextLeft.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            shapeTextRight.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            if (shapeTextCenter) {
+                shapeTextCenter.style.transform = ProfileComparisonLibComponent.TRANSFORM_RESET;
+            }
             document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', resetDrag);
-            document.removeEventListener('mouseleave', resetDrag);
-            // Re-evaluate edge masks after rebound animation completes
-            setTimeout(() => this.updateEdgeMasks(), 650);
+            document.removeEventListener('mouseup', resetWidths);
+            document.removeEventListener('mouseleave', resetWidths);
             setTimeout(() => {
-                [leftFrame, rightFrame, leftBgFrame, rightBgFrame, leftContent, rightContent, shapeTextCenter].forEach(el => {
-                    if (el)
-                        el.style.transition = '';
-                    // Also clear image transitions and positions
-                    if (el === leftBgFrame || el === rightBgFrame) {
-                        const bg = el.querySelector('.profile-comparison__bg');
-                        if (bg) {
-                            bg.style.transition = '';
-                            bg.style.left = '';
-                            bg.style.right = '';
-                            bg.style.backgroundPositionX = '';
-                        }
-                    }
-                });
-                // Clear glass opacity inline style after transition completes
-                [leftGlass, rightGlass].forEach(gl => {
-                    if (gl) {
-                        gl.style.transition = '';
-                        gl.style.opacity = '';
-                    }
-                });
-            }, 600);
+                shapeBg1El.style.transition = '';
+                shapeBg2El.style.transition = '';
+                shapeTextLeft.style.transition = '';
+                shapeTextRight.style.transition = '';
+                if (shapeTextCenter) {
+                    shapeTextCenter.style.transition = '';
+                }
+            }, ProfileComparisonLibComponent.TRANSITION_RESET_DELAY_MS);
         };
-        let initialMaxDisplacementPercent = 0;
-        [leftFrame, rightFrame].forEach((frame) => {
-            // Ensure cursor visually indicates grab on the svg images inside the frame
-            const svgs = frame.querySelectorAll('svg');
-            svgs.forEach(s => s.style.cursor = 'grab');
-            frame.addEventListener('mousedown', (e) => {
-                // Prevent default text selection during drag
+        [shapeBg1, shapeBg2].forEach((img) => {
+            img.addEventListener('mousedown', (e) => {
                 e.preventDefault();
                 isDragging = true;
-                this.wasDragging = false;
-                activeFrame = frame; // Track which frame is active
+                activeImg = img;
                 dragStartX = e.clientX;
-                // Lighten shadow on grab, then slowly return to normal while holding
-                const activeGlass = frame === leftFrame ? leftGlass : rightGlass;
-                if (activeGlass) {
-                    // Instant drop on grab
-                    activeGlass.style.transition = 'none';
-                    activeGlass.style.opacity = '0.15';
-                    // Next frame: begin slow return to normal while user holds
-                    requestAnimationFrame(() => {
-                        if (activeGlass) {
-                            activeGlass.style.transition = 'opacity 1.5s ease-in';
-                            activeGlass.style.opacity = '1';
-                        }
-                    });
-                }
-                // Calculate initial max displacement once at the start of drag
-                const containerWidth = leftFrame.parentElement?.clientWidth || 360;
-                const leftRect = leftFrame.getBoundingClientRect();
-                const rightRect = rightFrame.getBoundingClientRect();
-                const overlapPx = Math.max(0, leftRect.right - rightRect.left);
-                const maxDisplacementPx = overlapPx / 3;
-                initialMaxDisplacementPercent = (maxDisplacementPx / containerWidth) * 100;
+                initialWidth1 = shapeBg1.getBoundingClientRect().width;
+                initialWidth2 = shapeBg2.getBoundingClientRect().width;
                 document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', resetDrag);
-                document.addEventListener('mouseleave', resetDrag);
+                document.addEventListener('mouseup', resetWidths);
+                document.addEventListener('mouseleave', resetWidths);
             });
-            frame.addEventListener('touchstart', (e) => {
-                // Prevent default to avoid scrolling/swiping
-                if (e.cancelable)
-                    e.preventDefault();
-                // Stop propagation to prevent swiper from seeing this touch
-                e.stopPropagation();
-                isDragging = true;
-                this.wasDragging = false;
-                activeFrame = frame; // Track which frame is active
-                dragStartX = e.touches[0].clientX;
-                const activeGlass = frame === leftFrame ? leftGlass : rightGlass;
-                if (activeGlass) {
-                    activeGlass.style.transition = 'none';
-                    activeGlass.style.opacity = '0.15';
-                    requestAnimationFrame(() => {
-                        if (activeGlass) {
-                            activeGlass.style.transition = 'opacity 1.5s ease-in';
-                            activeGlass.style.opacity = '1';
-                        }
-                    });
-                }
-                const onTouchMove = (ev) => {
-                    onMouseMove({ clientX: ev.touches[0].clientX });
-                };
-                const onTouchEnd = () => {
-                    resetDrag();
-                    document.removeEventListener('touchmove', onTouchMove);
-                    document.removeEventListener('touchend', onTouchEnd);
-                };
-                document.addEventListener('touchmove', onTouchMove, { passive: false });
-                document.addEventListener('touchend', onTouchEnd);
-                document.addEventListener('touchcancel', onTouchEnd);
-            }, { passive: false });
         });
     }
-    onViewProfile(side) {
-        if (side === 'left') {
-            this.leftProfileClicked = true;
-            setTimeout(() => this.leftProfileClicked = false, 650);
+    getSimilarity(item1, item2) {
+        if (!this.matrixData || !item1 || !item2)
+            return 0;
+        const n1 = String(item1).trim().toLowerCase();
+        const n2 = String(item2).trim().toLowerCase();
+        if (n1 === n2)
+            return 1.0;
+        const leg1 = this.matrixData.legend?.find(l => l.full.trim().toLowerCase() === n1);
+        const leg2 = this.matrixData.legend?.find(l => l.full.trim().toLowerCase() === n2);
+        if (!leg1 || !leg2)
+            return 0;
+        const colIdx = this.matrixData.headers?.indexOf(leg2.abbr);
+        if (colIdx === -1 || colIdx === undefined)
+            return 0;
+        const row = this.matrixData.rows?.find(r => r.label === leg1.abbr);
+        if (!row || !row.values || colIdx >= row.values.length)
+            return 0;
+        const val = parseFloat(row.values[colIdx]);
+        return isNaN(val) ? 0 : val;
+    }
+    reorderInterestsByMatrix(p1List, p2List, centerList) {
+        if (!this.matrixData)
+            return { p1: p1List, p2: p2List, center: centerList };
+        const cleanCenter = (centerList || []).filter(c => c && c !== '-' && c !== '----');
+        const list1 = (p1List || []).filter(item => item && item !== '-' && item !== '----');
+        const list2 = (p2List || []).filter(item => item && item !== '-' && item !== '----');
+        const ordered1 = [];
+        const ordered2 = [];
+        const used1 = new Set();
+        const used2 = new Set();
+        // 1. PRIORITIZE LEFT AND RIGHT SIMILARITY (Pair ordering from top to bottom)
+        const remaining1 = [...list1];
+        const remaining2 = [...list2];
+        while (remaining1.length > 0 && remaining2.length > 0) {
+            let bestPair = { i1: -1, i2: -1, score: -1 };
+            for (let i = 0; i < remaining1.length; i++) {
+                for (let j = 0; j < remaining2.length; j++) {
+                    const score = this.getSimilarity(remaining1[i], remaining2[j]);
+                    if (score > bestPair.score) {
+                        bestPair = { i1: i, i2: j, score };
+                    }
+                }
+            }
+            if (bestPair.score >= 0.15 && bestPair.i1 !== -1 && bestPair.i2 !== -1) {
+                const item1 = remaining1[bestPair.i1];
+                const item2 = remaining2[bestPair.i2];
+                ordered1.push(item1);
+                ordered2.push(item2);
+                used1.add(item1);
+                used2.add(item2);
+                remaining1.splice(bestPair.i1, 1);
+                remaining2.splice(bestPair.i2, 1);
+            }
+            else {
+                break;
+            }
         }
-        else {
-            this.rightProfileClicked = true;
-            setTimeout(() => this.rightProfileClicked = false, 650);
+        // 2. FOR REMAINING UNMATCHED LEFT & RIGHT, ORDER BY RELEVANCE TO ALREADY PLACED ITEMS
+        const unplaced1 = list1.filter(item => !used1.has(item));
+        const unplaced2 = list2.filter(item => !used2.has(item));
+        const rankUnplaced = (items, placedContext) => {
+            return items.map(item => {
+                let maxSim = 0;
+                placedContext.forEach(placed => {
+                    const s = this.getSimilarity(item, placed);
+                    if (s > maxSim)
+                        maxSim = s;
+                });
+                return { item, maxSim };
+            }).sort((a, b) => b.maxSim - a.maxSim).map(x => x.item);
+        };
+        const allPlaced = [...ordered1, ...ordered2];
+        const sortedUnplaced1 = rankUnplaced(unplaced1, allPlaced);
+        const sortedUnplaced2 = rankUnplaced(unplaced2, allPlaced);
+        sortedUnplaced1.forEach(item => {
+            ordered1.push(item);
+            used1.add(item);
+        });
+        sortedUnplaced2.forEach(item => {
+            ordered2.push(item);
+            used2.add(item);
+        });
+        // 3. REARRANGE MIDDLE (CENTER) HIERARCHY TO MATCH EXACT ROW POSITIONS OF LEFT AND RIGHT
+        const orderedCenter = [];
+        const usedCenter = new Set();
+        const maxRows = Math.max(ordered1.length, ordered2.length);
+        for (let k = 0; k < maxRows; k++) {
+            const item1 = ordered1[k];
+            const item2 = ordered2[k];
+            let bestCenterMatch = { item: '', score: -1 };
+            cleanCenter.forEach(cItem => {
+                if (usedCenter.has(cItem))
+                    return;
+                const score1 = item1 ? this.getSimilarity(cItem, item1) : 0;
+                const score2 = item2 ? this.getSimilarity(cItem, item2) : 0;
+                const maxScore = Math.max(score1, score2);
+                if (maxScore > bestCenterMatch.score) {
+                    bestCenterMatch = { item: cItem, score: maxScore };
+                }
+            });
+            if (bestCenterMatch.score >= 0.45 && bestCenterMatch.item) {
+                orderedCenter.push(bestCenterMatch.item);
+                usedCenter.add(bestCenterMatch.item);
+            }
+            else {
+                orderedCenter.push('-'); // Insert slot spacer so center item pairs directly with its row
+            }
         }
+        // Append any remaining center items not yet matched to a row
+        cleanCenter.forEach(cItem => {
+            if (!usedCenter.has(cItem)) {
+                orderedCenter.push(cItem);
+                usedCenter.add(cItem);
+            }
+        });
+        return { p1: ordered1, p2: ordered2, center: orderedCenter };
+    }
+    onViewProfile(side) {
         this.viewProfileClick.emit({ side });
     }
-    onShapeClick(side) {
-        if (this.wasDragging) {
-            this.wasDragging = false;
-            return;
-        }
-        if (side === 'left') {
-            this.leftShapeAnimating = true;
-            setTimeout(() => this.leftShapeAnimating = false, 550);
-        }
-        else {
-            this.rightShapeAnimating = true;
-            setTimeout(() => this.rightShapeAnimating = false, 550);
-        }
+    getPerson1UniqueInterests() {
+        const raw = this.alignedPerson1Interests.length > 0
+            ? this.alignedPerson1Interests
+            : this.displayPerson1Interests.length > 0
+                ? this.displayPerson1Interests
+                : this.person1Interests;
+        return raw.filter(item => item && item !== '-' && item !== '----' && !this.isInCenter(item));
+    }
+    getPerson2UniqueInterests() {
+        const raw = this.alignedPerson2Interests.length > 0
+            ? this.alignedPerson2Interests
+            : this.displayPerson2Interests.length > 0
+                ? this.displayPerson2Interests
+                : this.person2Interests;
+        return raw.filter(item => item && item !== '-' && item !== '----' && !this.isInCenter(item));
+    }
+    getChipOffset(index, column) {
+        const leftOffsets = [0, 20, 6, 26, 12, 30, 4, 18];
+        const rightOffsets = [0, 20, 6, 26, 12, 30, 4, 18];
+        const centerOffsets = [0, -14, 12, -6, 16, -10, 8, -4];
+        if (column === 'left')
+            return leftOffsets[index % leftOffsets.length];
+        if (column === 'right')
+            return rightOffsets[index % rightOffsets.length];
+        return centerOffsets[index % centerOffsets.length];
     }
     compressConfigImagesIfNeeded() {
         const tasks = [];
@@ -2503,50 +2402,62 @@ class ProfileComparisonLibComponent {
         const user2FaceCoords = this.getFaceCoordinatesFromBBox(face2);
         const user1Eyes = this.getEyeCoordinatesFromFace(face1);
         const user2Eyes = this.getEyeCoordinatesFromFace(face2);
-        const leftContainerEl = this.leftFrame?.nativeElement || null;
-        const rightContainerEl = this.rightFrame?.nativeElement || null;
+        const leftContainerEl = this.profileImgLeft?.nativeElement || null;
+        const rightContainerEl = this.profileImgRight?.nativeElement || null;
         const containerWidth1 = leftContainerEl?.clientWidth || 160;
         const containerHeight1 = leftContainerEl?.clientHeight || 550;
         const containerWidth2 = rightContainerEl?.clientWidth || 160;
         const containerHeight2 = rightContainerEl?.clientHeight || 550;
         const scale1 = this.user1NaturalWidth ? Math.max(containerWidth1 / this.user1NaturalWidth, containerHeight1 / this.user1NaturalHeight) : 1;
         const scale2 = this.user2NaturalWidth ? Math.max(containerWidth2 / this.user2NaturalWidth, containerHeight2 / this.user2NaturalHeight) : 1;
-        const displayedFaceHeight1 = face1.height * scale1;
-        const displayedFaceHeight2 = face2.height * scale2;
-        const ratio1 = containerHeight1 ? displayedFaceHeight1 / containerHeight1 : 0;
-        const ratio2 = containerHeight2 ? displayedFaceHeight2 / containerHeight2 : 0;
-        let finalScale1 = ratio1 > 0 && ratio1 < 0.22 ? Math.min(3, 0.32 / ratio1) : 1;
-        let finalScale2 = ratio2 > 0 && ratio2 < 0.22 ? Math.min(3, 0.32 / ratio2) : 1;
-        const effRatio1 = ratio1 * finalScale1;
-        const effRatio2 = ratio2 * finalScale2;
-        if (effRatio1 > effRatio2 * 1.35)
-            finalScale1 = Math.max(0.95, finalScale1 * (effRatio2 / effRatio1));
-        else if (effRatio2 > effRatio1 * 1.35)
-            finalScale2 = Math.max(0.95, finalScale2 * (effRatio1 / effRatio2));
         const nose1 = this.getNoseCoordinateFromFace(face1);
         const nose2 = this.getNoseCoordinateFromFace(face2);
         const anchor1Y = (Math.min(user1Eyes.leftEye.y, user1Eyes.rightEye.y) + nose1.y) / 2;
         const anchor2Y = (Math.min(user2Eyes.leftEye.y, user2Eyes.rightEye.y) + nose2.y) / 2;
-        const tCenter1 = this.user1NaturalHeight ? -((anchor1Y - this.user1NaturalHeight / 2) * scale1 * finalScale1) : 0;
-        const tCenter2 = this.user2NaturalHeight ? -((anchor2Y - this.user2NaturalHeight / 2) * scale2 * finalScale2) : 0;
-        this.user1Transform = `translateY(${tCenter1 - this.eyeAlignmentBiasPx}px) scale(${finalScale1})`;
-        this.user2Transform = `translateY(${tCenter2 - this.eyeAlignmentBiasPx}px) scale(${finalScale2})`;
+        const tCenter1 = this.user1NaturalHeight ? -((anchor1Y - this.user1NaturalHeight / 2) * scale1) : 0;
+        const tCenter2 = this.user2NaturalHeight ? -((anchor2Y - this.user2NaturalHeight / 2) * scale2) : 0;
+        const shiftY1 = tCenter1 - this.eyeAlignmentBiasPx;
+        const shiftY2 = tCenter2 - this.eyeAlignmentBiasPx;
+        // Apply eye-to-eye vertical repositioning transforms without any scaling
+        this.user1Transform = `translateY(${shiftY1}px)`;
+        this.user2Transform = `translateY(${shiftY2}px)`;
+        // Extend image dimensions into the adjusted area without applying any uniform zoom/scaling
+        if (shiftY1 > 0) {
+            this.user1Top = `-${shiftY1}px`;
+            this.user1Height = `calc(100% + ${shiftY1}px)`;
+        }
+        else {
+            this.user1Top = '0px';
+            this.user1Height = `calc(100% + ${Math.abs(shiftY1)}px)`;
+        }
+        if (shiftY2 > 0) {
+            this.user2Top = `-${shiftY2}px`;
+            this.user2Height = `calc(100% + ${shiftY2}px)`;
+        }
+        else {
+            this.user2Top = '0px';
+            this.user2Height = `calc(100% + ${Math.abs(shiftY2)}px)`;
+        }
         this.alignmentCalculated = true;
     }
     applyDefaultAlignment() {
         this.user1Transform = 'translateY(0px)';
         this.user2Transform = 'translateY(0px)';
+        this.user1Top = '0px';
+        this.user1Height = '100%';
+        this.user2Top = '0px';
+        this.user2Height = '100%';
         this.alignmentCalculated = true;
     }
     isValidFaceData(face) {
         return !!face && typeof face.x === 'number' && face.width > 0 && face.height > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick", edgeDrag: "edgeDrag" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "leftFrame", first: true, predicate: ["leftFrame"], descendants: true }, { propertyName: "rightFrame", first: true, predicate: ["rightFrame"], descendants: true }, { propertyName: "leftBgFrame", first: true, predicate: ["leftBgFrame"], descendants: true }, { propertyName: "rightBgFrame", first: true, predicate: ["rightBgFrame"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen profile-comparison\" *ngIf=\"backendConfigured\"\n     [class.fade-all-edges]=\"config.edgeShading !== false\"\n     [style.--edge-shading-color]=\"config.shadingColor || 'rgba(44, 40, 47, 0.0)'\"\n     [style.--edge-shading-display]=\"config.edgeShading !== false ? 'block' : 'none'\">\n\n    <div class=\"profile-comparison__inner\" #shapeContainer>\n      <!-- Backgrounds layer: structurally below everything else to fix stacking -->\n      <div class=\"profile-comparison__bg-layer\">\n      <div class=\"profile-comparison__frame profile-comparison__frame--left bg-frame\"\n           [class.is-animating-nudge]=\"leftShapeAnimating\"\n           #leftBgFrame>\n          <div\n            class=\"profile-comparison__bg profile-comparison__bg--left\"\n            [ngStyle]=\"{ 'background-image': 'url(' + user1Image + ')', 'transform': user1Transform, 'background-position': user1ObjectPosition }\"\n          ></div>\n        </div>\n      <div class=\"profile-comparison__frame profile-comparison__frame--right bg-frame\"\n           [class.is-animating-nudge]=\"rightShapeAnimating\"\n           #rightBgFrame>\n          <div\n            class=\"profile-comparison__bg profile-comparison__bg--right\"\n            [ngStyle]=\"{ 'background-image': 'url(' + user2Image + ')', 'transform': user2Transform, 'background-position': user2ObjectPosition }\"\n          ></div>\n        </div>\n      </div>\n\n      <!-- Active interactive shapes and content layer -->\n      <div class=\"profile-comparison__frame profile-comparison__frame--left swiper-no-swiping\"\n           [class.is-animating-nudge]=\"leftShapeAnimating\"\n           (click)=\"onShapeClick('left')\"\n           #leftFrame>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--glass\"\n        viewBox=\"0 0 256 275\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n      <g filter=\"url(#filter-glass-left)\">\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 L0 268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924\"\n          stroke=\"#61C2AB\"\n          stroke-opacity=\"0.3\"\n          stroke-width=\"0.809707\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n      </g>\n      <defs>\n        <filter id=\"filter-glass-left\" x=\"-40\" y=\"-40\" width=\"336\" height=\"355\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect1_dropShadow\" result=\"effect2_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect3_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect3_dropShadow\" result=\"effect4_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect4_dropShadow\" result=\"effect5_dropShadow\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow\" result=\"shape\"/>\n        </filter>\n      </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        viewBox=\"0 0 256 276\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <clipPath id=\"clip-middle-left\">\n            <path d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z\"/>\n          </clipPath>\n          <filter id=\"filter0_i_2126_3746\" x=\"-0.638672\" y=\"-2\" width=\"256\" height=\"279\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14.2857 0\" result=\"hardAlpha\" />\n            <feOffset />\n            <feGaussianBlur stdDeviation=\"7.95\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0\" />\n            <feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_2126_3746\" />\n          </filter>\n        </defs>\n        <g clip-path=\"url(#clip-middle-left)\" filter=\"url(#filter0_i_2126_3746)\">\n          <path\n            d=\"M245.538 25.2463 L9.36 -1.2459 Q-0.638672 -2.5 -0.638672 7.5 V266.75 Q-0.638672 276.75 9.16 275.25 L246.042 238.623 C251.404 237.794 255.361 233.161 255.361 227.735 V36.2037 C255.361 30.5841 251.126 25.8476 245.538 25.2463 Z\"\n            fill=\"#00CFE6\"\n            fill-opacity=\"0.07\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--left\"\n        viewBox=\"0 0 256 278\"\n        preserveAspectRatio=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <radialGradient id=\"profile-left-fill\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 128 139)\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#0051E6\" stop-opacity=\"0\" />\n            <stop offset=\"0.5\" stop-color=\"#0051E6\" stop-opacity=\"0.035\" />\n            <stop offset=\"1\" stop-color=\"white\" />\n          </radialGradient>\n          <linearGradient id=\"profile-left-stroke\" x1=\"128\" y1=\"0\" x2=\"128\" y2=\"278\" gradientUnits=\"userSpaceOnUse\">\n            <stop offset=\"0\" stop-color=\"#52FFEB\" />\n            <stop offset=\"0.5\" stop-color=\"#41CFA1\" />\n            <stop offset=\"1\" stop-color=\"#319990\" />\n          </linearGradient>\n        </defs>\n        <!-- Fill Layer -->\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z\"\n          fill=\"url(#profile-left-fill)\"\n          fill-opacity=\"0.07\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Stroke Layer (Left outer border skipped) -->\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 L0 268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924\"\n          fill=\"none\"\n          stroke=\"url(#profile-left-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Added explicit embedded SVG text anchoring tightly inside the graphical shape bounds instead of pure flexbox logic padding. -->\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('left'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect [attr.x]=\"viewProfileLeftX - 15\" y=\"240\" width=\"115\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            [attr.x]=\"viewProfileLeftX\" y=\"256\"\n            fill=\"rgba(255, 255, 255, 0.60)\"\n            font-family=\"'Calistoga', serif\"\n            font-size=\"9\"\n            text-anchor=\"start\"\n            [class.is-animating-bob]=\"leftProfileClicked\"\n            style=\"text-shadow: 0 2px 4.2px #000;\"\n            pointer-events=\"none\"\n          >View Profile</text>\n        </g>\n      </svg>\n      <div class=\"profile-comparison__content profile-comparison__content--left\">\n        <div class=\"profile-comparison__list profile-comparison__list--left\">\n          <!-- Semantic Items only -->\n          <ng-container *ngFor=\"let interest of alignedPerson1Interests; let i = index\">\n            <div class=\"profile-comparison__item profile-comparison__item--left\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                [title]=\"interest\"\n                [onlyMarqueeOnHover]=\"false\"\n                style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 100; --marquee-animation-duration: 8s;\"\n              ></lib-marquee>\n\n              <!-- Dash beneath each interest -->\n              <div class=\"profile-comparison__dash-container\" [ngSwitch]=\"getDashType(i)\">\n                <!-- High Similarity: Short single dash, 0.3 opacity -->\n                <svg *ngSwitchCase=\"'high'\" class=\"profile-comparison__dash profile-comparison__dash--high\" width=\"15\" height=\"4\" viewBox=\"0 0 15 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H13\" stroke=\"white\" stroke-width=\"4\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Medium Similarity: Standard 1 dash -->\n                <svg *ngSwitchCase=\"'medium'\" class=\"profile-comparison__dash profile-comparison__dash--medium\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Low Similarity: 4 small dashes -->\n                <svg *ngSwitchCase=\"'low'\" class=\"profile-comparison__dash profile-comparison__dash--low\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-dasharray=\"2,5\" stroke-linecap=\"round\"/>\n                </svg>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"profile-comparison__frame profile-comparison__frame--right swiper-no-swiping\"\n         [class.is-animating-nudge]=\"rightShapeAnimating\"\n         (click)=\"onShapeClick('right')\"\n         #rightFrame>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--glass\"\n        viewBox=\"0 0 257 275\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n      <g filter=\"url(#filter-glass-right)\">\n          <path\n            d=\"M256.24 267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 L256.24 267.5\"\n            stroke=\"#AB4AFF\"\n            stroke-opacity=\"0.3\"\n            stroke-width=\"0.809707\"\n            stroke-linejoin=\"round\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-right\" x=\"-40\" y=\"-40\" width=\"337\" height=\"355\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect1_dropShadow\" result=\"effect2_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect3_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect3_dropShadow\" result=\"effect4_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect4_dropShadow\" result=\"effect5_dropShadow\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        viewBox=\"0 0 257 276\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <clipPath id=\"clip-middle-right\">\n            <path d=\"M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95935 237.368 -9.15527e-05 232.733 -9.15527e-05 227.305 V36.1607 C-9.15527e-05 30.5399 4.23741 25.8028 9.8262 26.4454 Z\"/>\n          </clipPath>\n          <filter id=\"filter0_i_2126_3750\" x=\"0\" y=\"-2\" width=\"256.24\" height=\"279\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14.2857 0\" result=\"hardAlpha\" />\n            <feOffset />\n            <feGaussianBlur stdDeviation=\"7.95\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\" />\n            <feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_2126_3750\" />\n          </filter>\n        </defs>\n        <g clip-path=\"url(#clip-middle-right)\" filter=\"url(#filter0_i_2126_3750)\">\n          <path\n            d=\"M9.82611 25.203 L244.066 0.0640762 L246.24 -0.05 Q256.24 -1.2424 256.24 8.75 V266.25 Q256.24 276.258 246.24 274.75 L243.564 274.304 L9.32402 238.195 C3.95935 237.368 -9.15527e-05 232.733 -9.15527e-05 227.305 V36.1607 C-9.15527e-05 30.5399 4.23741 25.8028 9.82611 25.203 Z\"\n            fill=\"#7B00E6\"\n            fill-opacity=\"0.07\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--right\"\n        viewBox=\"0 0 257 278\"\n        preserveAspectRatio=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <radialGradient id=\"profile-right-fill\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(-65.1644 -81.25 -75.0252 49.3261 128.12 138.75)\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#0051E6\" stop-opacity=\"0\" />\n            <stop offset=\"0.5\" stop-color=\"#0051E6\" stop-opacity=\"0.035\" />\n            <stop offset=\"1\" stop-color=\"white\" />\n          </radialGradient>\n          <linearGradient id=\"profile-right-stroke\" x1=\"128.12\" y1=\"277.5\" x2=\"128.12\" y2=\"8.50002\" gradientUnits=\"userSpaceOnUse\">\n            <stop offset=\"0\" stop-color=\"#662C99\" />\n            <stop offset=\"0.5\" stop-color=\"#893BD3\" />\n            <stop offset=\"1\" stop-color=\"#AB4AFF\" />\n          </linearGradient>\n        </defs>\n        <!-- Fill Layer -->\n        <path\n          d=\"M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z\"\n          fill=\"url(#profile-right-fill)\"\n          fill-opacity=\"0.07\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Stroke Layer (Right outer border skipped) -->\n        <path\n          d=\"M256.24 267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 L256.24 267.5\"\n          fill=\"none\"\n          stroke=\"url(#profile-right-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('right'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect [attr.x]=\"viewProfileRightX - 100\" y=\"240\" width=\"115\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            [attr.x]=\"viewProfileRightX\" y=\"256\"\n            fill=\"rgba(255, 255, 255, 0.60)\"\n            font-family=\"'Calistoga', serif\"\n            font-size=\"9\"\n            text-anchor=\"end\"\n            [class.is-animating-bob]=\"rightProfileClicked\"\n            style=\"text-shadow: 0 2px 4.2px #000;\"\n            pointer-events=\"auto\"\n          >View Profile</text>\n        </g>\n      </svg>\n      <div class=\"profile-comparison__content profile-comparison__content--right\">\n        <div class=\"profile-comparison__list profile-comparison__list--right\">\n          <!-- Semantic Items only -->\n          <ng-container *ngFor=\"let interest of alignedPerson2Interests; let i = index\">\n            <div class=\"profile-comparison__item profile-comparison__item--right\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                [title]=\"interest\"\n                [onlyMarqueeOnHover]=\"false\"\n                style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 100; --marquee-animation-duration: 8s;\"\n              ></lib-marquee>\n\n              <!-- Dash beneath each interest -->\n              <div class=\"profile-comparison__dash-container\" [ngSwitch]=\"getDashType(i)\">\n                <!-- High Similarity: Short single dash, 0.5 opacity -->\n                <svg *ngSwitchCase=\"'high'\" class=\"profile-comparison__dash profile-comparison__dash--high\" width=\"15\" height=\"4\" viewBox=\"0 0 15 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H13\" stroke=\"white\" stroke-width=\"4\" stroke-opacity=\"0.5\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Medium Similarity: Standard 1 dash -->\n                <svg *ngSwitchCase=\"'medium'\" class=\"profile-comparison__dash profile-comparison__dash--medium\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Low Similarity: 4 small dashes -->\n                <svg *ngSwitchCase=\"'low'\" class=\"profile-comparison__dash profile-comparison__dash--low\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-dasharray=\"2,5\" stroke-linecap=\"round\"/>\n                </svg>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Center text section -->\n    <div class=\"profile-comparison__center\" #shapeTextCenter>\n      <div class=\"profile-comparison__center-inner\">\n        <!-- Exact Items only -->\n        <div *ngFor=\"let item of centerItem\" class=\"profile-comparison__center-item\">\n          <lib-marquee\n            class=\"profile-comparison__center-text\"\n            [title]=\"item\"\n            [onlyMarqueeOnHover]=\"false\"\n            style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 700; --marquee-animation-duration: 8s;\"\n          ></lib-marquee>\n          <!-- Invisible dash as requested -->\n          <div class=\"profile-comparison__center-dash-placeholder\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: ["@keyframes textDropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes nudgeLeft{0%,to{transform:translate(-24%) scale(.86)}50%{transform:translate(-26%) scale(.86)}}@keyframes nudgeRight{0%,to{transform:translate(24%) scale(.86)}50%{transform:translate(26%) scale(.86)}}.profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.profile-screen{width:100%;max-width:460px;margin:0 auto;overflow:visible;position:relative}.profile-flex{display:flex;width:100%;height:auto;align-items:center;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg{position:relative;pointer-events:auto;width:100%;height:100%}.shape-bg1,.shape-bg2{position:absolute;width:75%;max-width:none;height:350px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab;overflow:visible!important}.shape-bg svg:active{cursor:grabbing}.profile-img{width:50%;height:350px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center 30%;opacity:.75;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:32px;width:100%;left:0;z-index:2;pointer-events:none}.shape-bg{position:relative;pointer-events:auto}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:0 2px 4.2px #000;z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:0 2px 4.2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:0 2px 4.2px #000}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:0 2px 4.2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:0 2px 4.2px #000;cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:0 2px 4.2px #000;cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}:host{display:block}.profile-comparison{width:100%;padding:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible}.profile-comparison__inner{position:relative;width:100%;min-width:25.75rem;max-width:100%;min-height:500px;display:grid;grid-template-columns:1fr;grid-template-rows:auto;background:transparent;overflow:visible}.profile-comparison__bg-layer{grid-area:1/1;position:relative;width:100%;height:100%;min-height:inherit;pointer-events:none;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.profile-comparison__frame{grid-area:1/1;position:relative;pointer-events:none}.profile-comparison__frame.bg-frame{width:100%;height:100%;min-height:inherit;overflow:hidden;border-radius:10px;-webkit-mask-composite:source-in;mask-composite:intersect;will-change:auto}.profile-comparison__frame.bg-frame.profile-comparison__frame--left{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.fade-all-edges .profile-comparison__frame.bg-frame.profile-comparison__frame--left.edge-at-left-border{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to right,transparent 0%,black 20px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to right,transparent 0%,black 20px,black 100%);-webkit-mask-size:100% 100%,100% 100%,100% 100%;mask-size:100% 100%,100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame.bg-frame.profile-comparison__frame--right{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.fade-all-edges .profile-comparison__frame.bg-frame.profile-comparison__frame--right.edge-at-right-border{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to left,transparent 0%,black 20px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to left,transparent 0%,black 20px,black 100%);-webkit-mask-size:100% 100%,100% 100%,100% 100%;mask-size:100% 100%,100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame--left{transform:translate(-24%) scale(.86)}.profile-comparison__frame--left.is-animating-nudge{animation:nudgeLeft .5s ease-out}.profile-comparison__frame--left .profile-comparison__frame-svg{-webkit-mask-image:var(--edge-mask-left, linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)));mask-image:var(--edge-mask-left, linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)))}.profile-comparison__frame--left .profile-comparison__frame-svg--glass{transform:scale(1.01) translateY(-2px);transform-origin:center;-webkit-mask-image:none;mask-image:none}.profile-comparison__frame--right{transform:translate(24%) scale(.86)}.profile-comparison__frame--right.is-animating-nudge{animation:nudgeRight .5s ease-out}.profile-comparison__frame--right .profile-comparison__frame-svg{-webkit-mask-image:var(--edge-mask-right, linear-gradient(to left, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)));mask-image:var(--edge-mask-right, linear-gradient(to left, transparent, black var(--edge-shading-width, 28px)))}.profile-comparison__frame--right .profile-comparison__frame-svg--glass{transform:scale(1.01) translate(-1px,-2px);transform-origin:center;-webkit-mask-image:none;mask-image:none}.profile-comparison__frame--right .profile-comparison__frame-svg--bottom{width:113.2%}.profile-comparison__frame-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;overflow:visible}.profile-comparison__frame-svg--glass{z-index:1}.profile-comparison__frame-svg--middle{z-index:2;mix-blend-mode:screen}.profile-comparison__frame-svg--left,.profile-comparison__frame-svg--right{z-index:3}.profile-comparison__frame-svg--bottom{width:113.7%;height:112.6%;inset:51% auto auto 50%;transform:translate(-50%,-51%)}.profile-comparison__bg{position:absolute;top:0;left:0;right:0;height:130%;background-size:cover;background-repeat:no-repeat;background-position:center 30%;pointer-events:auto;opacity:.8;transition:filter .6s ease,opacity .6s ease}.profile-comparison__bg--left{background-position:right center;margin-right:0%;-webkit-mask-image:linear-gradient(to right,black 50%,transparent 100%);mask-image:linear-gradient(to right,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__bg--right{background-position:left center;margin-left:0%;-webkit-mask-image:linear-gradient(to left,black 50%,transparent 100%);mask-image:linear-gradient(to left,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}@keyframes viewProfileBob{0%{transform:translateY(0)}50%{transform:translateY(-3px)}to{transform:translateY(0)}}.profile-comparison svg text{transition:opacity .3s ease}.profile-comparison svg text.is-animating-bob{animation:viewProfileBob .6s ease-in-out;fill:#fff!important}.profile-comparison__content{position:relative;z-index:20;padding:50px 12% 75px;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:#ecf0f1;font-family:Gilroy,serif;pointer-events:none}.profile-comparison__content--left{align-items:flex-end;text-align:right;padding-right:29%}.profile-comparison__content--right{align-items:flex-start;text-align:left;padding-left:29%}.profile-comparison__list{display:flex;flex-direction:column;gap:2px;width:100%;pointer-events:auto}.profile-comparison__list--left{align-items:flex-end;text-align:right;padding-right:29%}.profile-comparison__list--right{align-items:flex-start;text-align:left;padding-left:29%}.profile-comparison__item{display:flex;flex-direction:column;height:auto;width:11rem;flex-shrink:0;gap:6px;margin-bottom:6px;animation:textDropIn .4s ease-out backwards}.profile-comparison__item--left{align-items:flex-end;text-align:right}.profile-comparison__item--right{align-items:flex-start;text-align:left}.profile-comparison__text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:100!important;color:#fff;width:100%;display:block;text-shadow:0 2px 4.2px #000}.profile-comparison__text ::ng-deep *{font-weight:400!important;text-shadow:0 2px 4.2px #000}.profile-comparison__dash-container{display:flex;width:100%;height:8px;align-items:center}.profile-comparison__item--left .profile-comparison__dash-container{justify-content:flex-end}.profile-comparison__item--right .profile-comparison__dash-container{justify-content:flex-start}.profile-comparison__dash{display:block}.profile-comparison__center-empty,.profile-comparison__center-dash-placeholder{height:8px;width:100%}.profile-comparison__center{grid-area:1/1;display:flex;align-items:flex-start;justify-content:center;z-index:15;pointer-events:none;transform:scale(.86)}.profile-comparison__center-inner{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;padding:50px 0 75px;gap:6px;width:100%}.profile-comparison__center-item{height:auto;min-height:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:9rem;flex-shrink:0;gap:6px;margin-bottom:6px;animation:textDropIn .4s ease-out backwards}.profile-comparison__center-text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:700;color:#fff;width:100%;display:block;text-shadow:0 2px 4.2px #000}.profile-comparison__center-text--empty{color:#ecf0f180}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MarqueeComponent, selector: "lib-marquee", inputs: ["title", "searchText", "padding", "onlyMarqueeOnHover"], outputs: ["marquee"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges", person1Name: "person1Name", person2Name: "person2Name" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\n      <g filter=\"url(#filter0_n_1_1753)\">\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\n      </g>\n      <defs>\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\n          </feComponentTransfer>\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\n          <feMerge result=\"effect1_noise_1_1753\">\n            <feMergeNode in=\"shape\"/>\n            <feMergeNode in=\"color1\"/>\n          </feMerge>\n        </filter>\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\n        </radialGradient>\n      </defs>\n    </svg>\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.top]=\"user1Top\"\n        [style.height]=\"user1Height\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.top]=\"user2Top\"\n        [style.height]=\"user2Height\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n    </div>\n    <div class=\"image-shade-overlay\"></div>\n\n  <!-- Frosted Glass Overlay Layer -->\n  <div class=\"overlay-container\">\n    <!-- Top Headers -->\n    <div class=\"header-label left\">{{ person1Name }}</div>\n    <div class=\"header-label center\">Shared</div>\n    <div class=\"header-label right\">{{ person2Name }}</div>\n\n    <!-- Chips Columns Grid -->\n    <div class=\"chips-grid\">\n      <!-- Person 1 Unique Interests -->\n      <div class=\"chips-column left\">\n        <ng-container *ngFor=\"let interest of getPerson1UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-a\" [style.margin-right.px]=\"getChipOffset(i, 'left')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Shared Interests (Center Column) -->\n      <div class=\"chips-column center\">\n        <ng-container *ngFor=\"let interest of centerItem; let i = index\">\n          <div class=\"frosted-chip shared\" *ngIf=\"interest && interest !== '-' && interest !== '----'\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Person 2 Unique Interests -->\n      <div class=\"chips-column right\">\n        <ng-container *ngFor=\"let interest of getPerson2UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-b\" [style.margin-left.px]=\"getChipOffset(i, 'right')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Bottom Actions -->\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:5%;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{right:5%;left:auto;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.chips-grid{position:absolute;inset:45px 0;display:grid;grid-template-columns:repeat(3,1fr);padding:0;pointer-events:none;box-sizing:border-box}.chips-column{display:flex;flex-direction:column;gap:8px;max-height:100%;overflow-y:auto;padding:4px 10px;box-sizing:border-box;width:100%;scrollbar-width:none}.chips-column::-webkit-scrollbar{display:none}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{position:relative;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:scale(1.04);background:#ffffff29}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.view-profile{position:absolute;bottom:40px!important;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:18px;font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:5%;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:5%;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0 4px;top:50px;bottom:50px;box-sizing:border-box}.chips-column{padding:2px}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:14px}}@media(max-width:480px){.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label{font-size:10px}.header-label{top:14px}.header-label.left{font-size:12px}.header-label.center{font-size:10px}.header-label.right{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i2_1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2_1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen profile-comparison\" *ngIf=\"backendConfigured\"\n     [class.fade-all-edges]=\"config.edgeShading !== false\"\n     [style.--edge-shading-color]=\"config.shadingColor || 'rgba(44, 40, 47, 0.0)'\"\n     [style.--edge-shading-display]=\"config.edgeShading !== false ? 'block' : 'none'\">\n\n    <div class=\"profile-comparison__inner\" #shapeContainer>\n      <!-- Backgrounds layer: structurally below everything else to fix stacking -->\n      <div class=\"profile-comparison__bg-layer\">\n      <div class=\"profile-comparison__frame profile-comparison__frame--left bg-frame\"\n           [class.is-animating-nudge]=\"leftShapeAnimating\"\n           #leftBgFrame>\n          <div\n            class=\"profile-comparison__bg profile-comparison__bg--left\"\n            [ngStyle]=\"{ 'background-image': 'url(' + user1Image + ')', 'transform': user1Transform, 'background-position': user1ObjectPosition }\"\n          ></div>\n        </div>\n      <div class=\"profile-comparison__frame profile-comparison__frame--right bg-frame\"\n           [class.is-animating-nudge]=\"rightShapeAnimating\"\n           #rightBgFrame>\n          <div\n            class=\"profile-comparison__bg profile-comparison__bg--right\"\n            [ngStyle]=\"{ 'background-image': 'url(' + user2Image + ')', 'transform': user2Transform, 'background-position': user2ObjectPosition }\"\n          ></div>\n        </div>\n      </div>\n\n      <!-- Active interactive shapes and content layer -->\n      <div class=\"profile-comparison__frame profile-comparison__frame--left swiper-no-swiping\"\n           [class.is-animating-nudge]=\"leftShapeAnimating\"\n           (click)=\"onShapeClick('left')\"\n           #leftFrame>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--glass\"\n        viewBox=\"0 0 256 275\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n      <g filter=\"url(#filter-glass-left)\">\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 L0 268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924\"\n          stroke=\"#61C2AB\"\n          stroke-opacity=\"0.3\"\n          stroke-width=\"0.809707\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n      </g>\n      <defs>\n        <filter id=\"filter-glass-left\" x=\"-40\" y=\"-40\" width=\"336\" height=\"355\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect1_dropShadow\" result=\"effect2_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect3_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect3_dropShadow\" result=\"effect4_dropShadow\"/>\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n          <feOffset/>\n          <feGaussianBlur stdDeviation=\"6.3562\"/>\n          <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n          <feBlend mode=\"normal\" in2=\"effect4_dropShadow\" result=\"effect5_dropShadow\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow\" result=\"shape\"/>\n        </filter>\n      </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        viewBox=\"0 0 256 276\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <clipPath id=\"clip-middle-left\">\n            <path d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z\"/>\n          </clipPath>\n          <filter id=\"filter0_i_2126_3746\" x=\"-0.638672\" y=\"-2\" width=\"256\" height=\"279\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14.2857 0\" result=\"hardAlpha\" />\n            <feOffset />\n            <feGaussianBlur stdDeviation=\"7.95\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0\" />\n            <feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_2126_3746\" />\n          </filter>\n        </defs>\n        <g clip-path=\"url(#clip-middle-left)\" filter=\"url(#filter0_i_2126_3746)\">\n          <path\n            d=\"M245.538 25.2463 L9.36 -1.2459 Q-0.638672 -2.5 -0.638672 7.5 V266.75 Q-0.638672 276.75 9.16 275.25 L246.042 238.623 C251.404 237.794 255.361 233.161 255.361 227.735 V36.2037 C255.361 30.5841 251.126 25.8476 245.538 25.2463 Z\"\n            fill=\"#00CFE6\"\n            fill-opacity=\"0.07\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--left\"\n        viewBox=\"0 0 256 278\"\n        preserveAspectRatio=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <radialGradient id=\"profile-left-fill\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 128 139)\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#0051E6\" stop-opacity=\"0\" />\n            <stop offset=\"0.5\" stop-color=\"#0051E6\" stop-opacity=\"0.035\" />\n            <stop offset=\"1\" stop-color=\"white\" />\n          </radialGradient>\n          <linearGradient id=\"profile-left-stroke\" x1=\"128\" y1=\"0\" x2=\"128\" y2=\"278\" gradientUnits=\"userSpaceOnUse\">\n            <stop offset=\"0\" stop-color=\"#52FFEB\" />\n            <stop offset=\"0.5\" stop-color=\"#41CFA1\" />\n            <stop offset=\"1\" stop-color=\"#319990\" />\n          </linearGradient>\n        </defs>\n        <!-- Fill Layer -->\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z\"\n          fill=\"url(#profile-left-fill)\"\n          fill-opacity=\"0.07\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Stroke Layer (Left outer border skipped) -->\n        <path\n          d=\"M246.177 26.4924 L10 1.07 Q0 0 0 10 L0 268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924\"\n          fill=\"none\"\n          stroke=\"url(#profile-left-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Added explicit embedded SVG text anchoring tightly inside the graphical shape bounds instead of pure flexbox logic padding. -->\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('left'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect [attr.x]=\"viewProfileLeftX - 15\" y=\"240\" width=\"115\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            [attr.x]=\"viewProfileLeftX\" y=\"256\"\n            fill=\"rgba(255, 255, 255, 0.60)\"\n            font-family=\"'Calistoga', serif\"\n            font-size=\"9\"\n            text-anchor=\"start\"\n            [class.is-animating-bob]=\"leftProfileClicked\"\n            style=\"text-shadow: 0 2px 4.2px #000;\"\n            pointer-events=\"none\"\n          >View Profile</text>\n        </g>\n      </svg>\n      <div class=\"profile-comparison__content profile-comparison__content--left\">\n        <div class=\"profile-comparison__list profile-comparison__list--left\">\n          <!-- Semantic Items only -->\n          <ng-container *ngFor=\"let interest of alignedPerson1Interests; let i = index\">\n            <div class=\"profile-comparison__item profile-comparison__item--left\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                [title]=\"interest\"\n                [onlyMarqueeOnHover]=\"false\"\n                style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 100; --marquee-animation-duration: 8s;\"\n              ></lib-marquee>\n\n              <!-- Dash beneath each interest -->\n              <div class=\"profile-comparison__dash-container\" [ngSwitch]=\"getDashType(i)\">\n                <!-- High Similarity: Short single dash, 0.3 opacity -->\n                <svg *ngSwitchCase=\"'high'\" class=\"profile-comparison__dash profile-comparison__dash--high\" width=\"15\" height=\"4\" viewBox=\"0 0 15 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H13\" stroke=\"white\" stroke-width=\"4\" stroke-opacity=\"0.3\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Medium Similarity: Standard 1 dash -->\n                <svg *ngSwitchCase=\"'medium'\" class=\"profile-comparison__dash profile-comparison__dash--medium\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Low Similarity: 4 small dashes -->\n                <svg *ngSwitchCase=\"'low'\" class=\"profile-comparison__dash profile-comparison__dash--low\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-dasharray=\"2,5\" stroke-linecap=\"round\"/>\n                </svg>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"profile-comparison__frame profile-comparison__frame--right swiper-no-swiping\"\n         [class.is-animating-nudge]=\"rightShapeAnimating\"\n         (click)=\"onShapeClick('right')\"\n         #rightFrame>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--glass\"\n        viewBox=\"0 0 257 275\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n      <g filter=\"url(#filter-glass-right)\">\n          <path\n            d=\"M256.24 267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 L256.24 267.5\"\n            stroke=\"#AB4AFF\"\n            stroke-opacity=\"0.3\"\n            stroke-width=\"0.809707\"\n            stroke-linejoin=\"round\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-right\" x=\"-40\" y=\"-40\" width=\"337\" height=\"355\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect1_dropShadow\" result=\"effect2_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect3_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect3_dropShadow\" result=\"effect4_dropShadow\"/>\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.3333 0\" result=\"hardAlpha\"/>\n            <feOffset/>\n            <feGaussianBlur stdDeviation=\"6.3562\"/>\n            <feComposite in2=\"hardAlpha\" operator=\"out\"/>\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n            <feBlend mode=\"normal\" in2=\"effect4_dropShadow\" result=\"effect5_dropShadow\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        viewBox=\"0 0 257 276\"\n        preserveAspectRatio=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <clipPath id=\"clip-middle-right\">\n            <path d=\"M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95935 237.368 -9.15527e-05 232.733 -9.15527e-05 227.305 V36.1607 C-9.15527e-05 30.5399 4.23741 25.8028 9.8262 26.4454 Z\"/>\n          </clipPath>\n          <filter id=\"filter0_i_2126_3750\" x=\"0\" y=\"-2\" width=\"256.24\" height=\"279\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n            <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />\n            <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14.2857 0\" result=\"hardAlpha\" />\n            <feOffset />\n            <feGaussianBlur stdDeviation=\"7.95\" />\n            <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n            <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\" />\n            <feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_2126_3750\" />\n          </filter>\n        </defs>\n        <g clip-path=\"url(#clip-middle-right)\" filter=\"url(#filter0_i_2126_3750)\">\n          <path\n            d=\"M9.82611 25.203 L244.066 0.0640762 L246.24 -0.05 Q256.24 -1.2424 256.24 8.75 V266.25 Q256.24 276.258 246.24 274.75 L243.564 274.304 L9.32402 238.195 C3.95935 237.368 -9.15527e-05 232.733 -9.15527e-05 227.305 V36.1607 C-9.15527e-05 30.5399 4.23741 25.8028 9.82611 25.203 Z\"\n            fill=\"#7B00E6\"\n            fill-opacity=\"0.07\"\n            shape-rendering=\"geometricPrecision\"\n          />\n        </g>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--right\"\n        viewBox=\"0 0 257 278\"\n        preserveAspectRatio=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <radialGradient id=\"profile-right-fill\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(-65.1644 -81.25 -75.0252 49.3261 128.12 138.75)\" gradientUnits=\"userSpaceOnUse\">\n            <stop stop-color=\"#0051E6\" stop-opacity=\"0\" />\n            <stop offset=\"0.5\" stop-color=\"#0051E6\" stop-opacity=\"0.035\" />\n            <stop offset=\"1\" stop-color=\"white\" />\n          </radialGradient>\n          <linearGradient id=\"profile-right-stroke\" x1=\"128.12\" y1=\"277.5\" x2=\"128.12\" y2=\"8.50002\" gradientUnits=\"userSpaceOnUse\">\n            <stop offset=\"0\" stop-color=\"#662C99\" />\n            <stop offset=\"0.5\" stop-color=\"#893BD3\" />\n            <stop offset=\"1\" stop-color=\"#AB4AFF\" />\n          </linearGradient>\n        </defs>\n        <!-- Fill Layer -->\n        <path\n          d=\"M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z\"\n          fill=\"url(#profile-right-fill)\"\n          fill-opacity=\"0.07\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <!-- Stroke Layer (Right outer border skipped) -->\n        <path\n          d=\"M256.24 267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 L256.24 267.5\"\n          fill=\"none\"\n          stroke=\"url(#profile-right-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n          shape-rendering=\"geometricPrecision\"\n        />\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('right'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect [attr.x]=\"viewProfileRightX - 100\" y=\"240\" width=\"115\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            [attr.x]=\"viewProfileRightX\" y=\"256\"\n            fill=\"rgba(255, 255, 255, 0.60)\"\n            font-family=\"'Calistoga', serif\"\n            font-size=\"9\"\n            text-anchor=\"end\"\n            [class.is-animating-bob]=\"rightProfileClicked\"\n            style=\"text-shadow: 0 2px 4.2px #000;\"\n            pointer-events=\"auto\"\n          >View Profile</text>\n        </g>\n      </svg>\n      <div class=\"profile-comparison__content profile-comparison__content--right\">\n        <div class=\"profile-comparison__list profile-comparison__list--right\">\n          <!-- Semantic Items only -->\n          <ng-container *ngFor=\"let interest of alignedPerson2Interests; let i = index\">\n            <div class=\"profile-comparison__item profile-comparison__item--right\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                [title]=\"interest\"\n                [onlyMarqueeOnHover]=\"false\"\n                style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 100; --marquee-animation-duration: 8s;\"\n              ></lib-marquee>\n\n              <!-- Dash beneath each interest -->\n              <div class=\"profile-comparison__dash-container\" [ngSwitch]=\"getDashType(i)\">\n                <!-- High Similarity: Short single dash, 0.5 opacity -->\n                <svg *ngSwitchCase=\"'high'\" class=\"profile-comparison__dash profile-comparison__dash--high\" width=\"15\" height=\"4\" viewBox=\"0 0 15 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H13\" stroke=\"white\" stroke-width=\"4\" stroke-opacity=\"0.5\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Medium Similarity: Standard 1 dash -->\n                <svg *ngSwitchCase=\"'medium'\" class=\"profile-comparison__dash profile-comparison__dash--medium\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n                </svg>\n                <!-- Low Similarity: 4 small dashes -->\n                <svg *ngSwitchCase=\"'low'\" class=\"profile-comparison__dash profile-comparison__dash--low\" width=\"30\" height=\"4\" viewBox=\"0 0 30 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M2 2H28\" stroke=\"white\" stroke-width=\"4\" stroke-dasharray=\"2,5\" stroke-linecap=\"round\"/>\n                </svg>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <!-- Center text section -->\n    <div class=\"profile-comparison__center\" #shapeTextCenter>\n      <div class=\"profile-comparison__center-inner\">\n        <!-- Exact Items only -->\n        <div *ngFor=\"let item of centerItem\" class=\"profile-comparison__center-item\">\n          <lib-marquee\n            class=\"profile-comparison__center-text\"\n            [title]=\"item\"\n            [onlyMarqueeOnHover]=\"false\"\n            style=\"--marquee-font-size: 15px; --marquee-font-family: 'Gilroy', sans-serif; --marquee-font-color: white; --marquee-font-weight: 700; --marquee-animation-duration: 8s;\"\n          ></lib-marquee>\n          <!-- Invisible dash as requested -->\n          <div class=\"profile-comparison__center-dash-placeholder\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: ["@keyframes textDropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes nudgeLeft{0%,to{transform:translate(-24%) scale(.86)}50%{transform:translate(-26%) scale(.86)}}@keyframes nudgeRight{0%,to{transform:translate(24%) scale(.86)}50%{transform:translate(26%) scale(.86)}}.profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.profile-screen{width:100%;max-width:460px;margin:0 auto;overflow:visible;position:relative}.profile-flex{display:flex;width:100%;height:auto;align-items:center;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg{position:relative;pointer-events:auto;width:100%;height:100%}.shape-bg1,.shape-bg2{position:absolute;width:75%;max-width:none;height:350px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab;overflow:visible!important}.shape-bg svg:active{cursor:grabbing}.profile-img{width:50%;height:350px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center 30%;opacity:.75;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:32px;width:100%;left:0;z-index:2;pointer-events:none}.shape-bg{position:relative;pointer-events:auto}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:0 2px 4.2px #000;z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:0 2px 4.2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:0 2px 4.2px #000}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:0 2px 4.2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:0 2px 4.2px #000;cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:0 2px 4.2px #000;cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}:host{display:block}.profile-comparison{width:100%;padding:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible}.profile-comparison__inner{position:relative;width:100%;min-width:25.75rem;max-width:100%;min-height:500px;display:grid;grid-template-columns:1fr;grid-template-rows:auto;background:transparent;overflow:visible}.profile-comparison__bg-layer{grid-area:1/1;position:relative;width:100%;height:100%;min-height:inherit;pointer-events:none;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}.profile-comparison__frame{grid-area:1/1;position:relative;pointer-events:none}.profile-comparison__frame.bg-frame{width:100%;height:100%;min-height:inherit;overflow:hidden;border-radius:10px;-webkit-mask-composite:source-in;mask-composite:intersect;will-change:auto}.profile-comparison__frame.bg-frame.profile-comparison__frame--left{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.fade-all-edges .profile-comparison__frame.bg-frame.profile-comparison__frame--left.edge-at-left-border{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to right,transparent 0%,black 20px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 278'%3E%3Cpath d='M246.177 26.4924 L10 1.07 Q0 0 0 10 V268 Q0 278 9.8 276.5 L246.68 239.869 C252.043 239.04 256 234.407 256 228.981 V37.4497 C256 31.8302 251.764 27.0937 246.177 26.4924 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to right,transparent 0%,black 20px,black 100%);-webkit-mask-size:100% 100%,100% 100%,100% 100%;mask-size:100% 100%,100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame.bg-frame.profile-comparison__frame--right{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%);-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.fade-all-edges .profile-comparison__frame.bg-frame.profile-comparison__frame--right.edge-at-right-border{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to left,transparent 0%,black 20px,black 100%);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 257 278'%3E%3Cpath d='M9.8262 26.4454 L244.066 1.30651 L246.24 1.1 Q256.24 0 256.24 10 V267.5 Q256.24 277.5 246.24 275.9 L243.564 275.546 L9.32411 239.437 C3.95944 238.61 0 233.976 0 228.548 V37.4032 C0 31.7824 4.2375 27.0452 9.8262 26.4454 Z' fill='white'/%3E%3C/svg%3E\"),linear-gradient(to top,transparent 0%,black 15px,black 100%),linear-gradient(to left,transparent 0%,black 20px,black 100%);-webkit-mask-size:100% 100%,100% 100%,100% 100%;mask-size:100% 100%,100% 100%,100% 100%;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame--left{transform:translate(-24%) scale(.86)}.profile-comparison__frame--left.is-animating-nudge{animation:nudgeLeft .5s ease-out}.profile-comparison__frame--left .profile-comparison__frame-svg{-webkit-mask-image:var(--edge-mask-left, linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)));mask-image:var(--edge-mask-left, linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)))}.profile-comparison__frame--left .profile-comparison__frame-svg--glass{transform:scale(1.01) translateY(-2px);transform-origin:center;-webkit-mask-image:none;mask-image:none}.profile-comparison__frame--right{transform:translate(24%) scale(.86)}.profile-comparison__frame--right.is-animating-nudge{animation:nudgeRight .5s ease-out}.profile-comparison__frame--right .profile-comparison__frame-svg{-webkit-mask-image:var(--edge-mask-right, linear-gradient(to left, transparent 0%, rgba(0, 0, 0, .4) 14px, black var(--edge-shading-width, 28px)));mask-image:var(--edge-mask-right, linear-gradient(to left, transparent, black var(--edge-shading-width, 28px)))}.profile-comparison__frame--right .profile-comparison__frame-svg--glass{transform:scale(1.01) translate(-1px,-2px);transform-origin:center;-webkit-mask-image:none;mask-image:none}.profile-comparison__frame--right .profile-comparison__frame-svg--bottom{width:113.2%}.profile-comparison__frame-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;overflow:visible}.profile-comparison__frame-svg--glass{z-index:1}.profile-comparison__frame-svg--middle{z-index:2;mix-blend-mode:screen}.profile-comparison__frame-svg--left,.profile-comparison__frame-svg--right{z-index:3}.profile-comparison__frame-svg--bottom{width:113.7%;height:112.6%;inset:51% auto auto 50%;transform:translate(-50%,-51%)}.profile-comparison__bg{position:absolute;top:0;left:0;right:0;height:130%;background-size:cover;background-repeat:no-repeat;background-position:center 30%;pointer-events:auto;opacity:.8;transition:filter .6s ease,opacity .6s ease}.profile-comparison__bg--left{background-position:right center;margin-right:0%;-webkit-mask-image:linear-gradient(to right,black 50%,transparent 100%);mask-image:linear-gradient(to right,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__bg--right{background-position:left center;margin-left:0%;-webkit-mask-image:linear-gradient(to left,black 50%,transparent 100%);mask-image:linear-gradient(to left,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}@keyframes viewProfileBob{0%{transform:translateY(0)}50%{transform:translateY(-3px)}to{transform:translateY(0)}}.profile-comparison svg text{transition:opacity .3s ease}.profile-comparison svg text.is-animating-bob{animation:viewProfileBob .6s ease-in-out;fill:#fff!important}.profile-comparison__content{position:relative;z-index:20;padding:50px 12% 75px;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:#ecf0f1;font-family:Gilroy,serif;pointer-events:none}.profile-comparison__content--left{align-items:flex-end;text-align:right;padding-right:29%}.profile-comparison__content--right{align-items:flex-start;text-align:left;padding-left:29%}.profile-comparison__list{display:flex;flex-direction:column;gap:2px;width:100%;pointer-events:auto}.profile-comparison__list--left{align-items:flex-end;text-align:right;padding-right:29%}.profile-comparison__list--right{align-items:flex-start;text-align:left;padding-left:29%}.profile-comparison__item{display:flex;flex-direction:column;height:auto;width:11rem;flex-shrink:0;gap:6px;margin-bottom:6px;animation:textDropIn .4s ease-out backwards}.profile-comparison__item--left{align-items:flex-end;text-align:right}.profile-comparison__item--right{align-items:flex-start;text-align:left}.profile-comparison__text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:100!important;color:#fff;width:100%;display:block;text-shadow:0 2px 4.2px #000}.profile-comparison__text ::ng-deep *{font-weight:400!important;text-shadow:0 2px 4.2px #000}.profile-comparison__dash-container{display:flex;width:100%;height:8px;align-items:center}.profile-comparison__item--left .profile-comparison__dash-container{justify-content:flex-end}.profile-comparison__item--right .profile-comparison__dash-container{justify-content:flex-start}.profile-comparison__dash{display:block}.profile-comparison__center-empty,.profile-comparison__center-dash-placeholder{height:8px;width:100%}.profile-comparison__center{grid-area:1/1;display:flex;align-items:flex-start;justify-content:center;z-index:15;pointer-events:none;transform:scale(.86)}.profile-comparison__center-inner{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;padding:50px 0 75px;gap:6px;width:100%}.profile-comparison__center-item{height:auto;min-height:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:9rem;flex-shrink:0;gap:6px;margin-bottom:6px;animation:textDropIn .4s ease-out backwards}.profile-comparison__center-text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:700;color:#fff;width:100%;display:block;text-shadow:0 2px 4.2px #000}.profile-comparison__center-text--empty{color:#ecf0f180}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"] }]
+            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\n      <g filter=\"url(#filter0_n_1_1753)\">\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\n      </g>\n      <defs>\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\n          </feComponentTransfer>\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\n          <feMerge result=\"effect1_noise_1_1753\">\n            <feMergeNode in=\"shape\"/>\n            <feMergeNode in=\"color1\"/>\n          </feMerge>\n        </filter>\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\n        </radialGradient>\n      </defs>\n    </svg>\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.top]=\"user1Top\"\n        [style.height]=\"user1Height\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.top]=\"user2Top\"\n        [style.height]=\"user2Height\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n    </div>\n    <div class=\"image-shade-overlay\"></div>\n\n  <!-- Frosted Glass Overlay Layer -->\n  <div class=\"overlay-container\">\n    <!-- Top Headers -->\n    <div class=\"header-label left\">{{ person1Name }}</div>\n    <div class=\"header-label center\">Shared</div>\n    <div class=\"header-label right\">{{ person2Name }}</div>\n\n    <!-- Chips Columns Grid -->\n    <div class=\"chips-grid\">\n      <!-- Person 1 Unique Interests -->\n      <div class=\"chips-column left\">\n        <ng-container *ngFor=\"let interest of getPerson1UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-a\" [style.margin-right.px]=\"getChipOffset(i, 'left')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Shared Interests (Center Column) -->\n      <div class=\"chips-column center\">\n        <ng-container *ngFor=\"let interest of centerItem; let i = index\">\n          <div class=\"frosted-chip shared\" *ngIf=\"interest && interest !== '-' && interest !== '----'\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Person 2 Unique Interests -->\n      <div class=\"chips-column right\">\n        <ng-container *ngFor=\"let interest of getPerson2UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-b\" [style.margin-left.px]=\"getChipOffset(i, 'right')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Bottom Actions -->\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:5%;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{right:5%;left:auto;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.chips-grid{position:absolute;inset:45px 0;display:grid;grid-template-columns:repeat(3,1fr);padding:0;pointer-events:none;box-sizing:border-box}.chips-column{display:flex;flex-direction:column;gap:8px;max-height:100%;overflow-y:auto;padding:4px 10px;box-sizing:border-box;width:100%;scrollbar-width:none}.chips-column::-webkit-scrollbar{display:none}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{position:relative;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:scale(1.04);background:#ffffff29}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.view-profile{position:absolute;bottom:40px!important;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:18px;font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:5%;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:5%;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0 4px;top:50px;bottom:50px;box-sizing:border-box}.chips-column{padding:2px}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:14px}}@media(max-width:480px){.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label{font-size:10px}.header-label{top:14px}.header-label.left{font-size:12px}.header-label.center{font-size:10px}.header-label.right{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2560,59 +2471,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], fadeAllEdges: [{
                 type: Input
+            }], person1Name: [{
+                type: Input
+            }], person2Name: [{
+                type: Input
             }], matrixDataChange: [{
                 type: Output
             }], rawLLMOutputChange: [{
                 type: Output
             }], viewProfileClick: [{
                 type: Output
-            }], edgeDrag: [{
-                type: Output
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
             }], leftContainer: [{
                 type: ViewChild,
                 args: ['leftContainer']
             }], rightContainer: [{
                 type: ViewChild,
                 args: ['rightContainer']
-            }], leftFrame: [{
-                type: ViewChild,
-                args: ['leftFrame']
-            }], rightFrame: [{
+            }], profileFlex: [{
                 type: ViewChild,
-                args: ['rightFrame']
-            }], leftBgFrame: [{
+                args: ['profileFlex']
+            }], profileImgLeft: [{
                 type: ViewChild,
-                args: ['leftBgFrame']
-            }], rightBgFrame: [{
+                args: ['profileImgLeft']
+            }], profileImgRight: [{
                 type: ViewChild,
-                args: ['rightBgFrame']
+                args: ['profileImgRight']
             }], shapeContainer: [{
                 type: ViewChild,
                 args: ['shapeContainer']
+            }], shapeBg: [{
+                type: ViewChild,
+                args: ['shapeBg']
+            }], shapeBg1: [{
+                type: ViewChild,
+                args: ['shapeBg1']
+            }], shapeBg2: [{
+                type: ViewChild,
+                args: ['shapeBg2']
+            }], shapeTextLeft: [{
+                type: ViewChild,
+                args: ['shapeTextLeft']
+            }], shapeTextRight: [{
+                type: ViewChild,
+                args: ['shapeTextRight']
             }], shapeTextCenter: [{
                 type: ViewChild,
                 args: ['shapeTextCenter']
             }] } });
 
 class ProfileComparisonLibModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
-            ReactiveFormsModule,
-            LibMarqueeModule], exports: [ProfileComparisonLibComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, providers: [
+            ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, providers: [
             ProfileComparisonBackendService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
-            ReactiveFormsModule,
-            LibMarqueeModule] });
+            ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2622,8 +2542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CommonModule,
                         HttpClientModule,
                         FormsModule,
-                        ReactiveFormsModule,
-                        LibMarqueeModule
+                        ReactiveFormsModule
                     ],
                     exports: [
                         ProfileComparisonLibComponent