@naniteninja/profile-comparison-lib 1.0.4 → 1.0.7

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

@@ -6,6 +6,8 @@ import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i2 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. */
@@ -202,10 +204,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.16", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CachePersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CachePersistenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -251,10 +253,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.16", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileConversionService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FileConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -370,10 +372,10 @@ class ImageCompressionService {
             return `${base}.webp`;
         return `${base}.jpg`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCompressionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ImageCompressionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1152,10 +1154,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.16", 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.16", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1187,10 +1189,10 @@ class ProfileComparisonLibService {
     getVersion() {
         return '0.0.0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1444,10 +1446,10 @@ class ProfileService {
         this.compareInterestsCache.clear();
         this.persistence.clear(CachePersistenceService.STORE_PROFILE_COMPARE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", ngImport: i0, type: ProfileService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
@@ -1503,10 +1505,10 @@ class ProfileComparisonBackendService {
             return throwError(() => err);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1532,6 +1534,7 @@ 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;
@@ -1556,6 +1559,8 @@ class ProfileComparisonLibComponent {
         person3Interests: [],
         user1Image: '',
         user2Image: '',
+        edgeShading: true,
+        shadingColor: 'rgba(44, 40, 47, 0.7)'
     };
     backendMode = BackendMode.Real;
     backendUrl = null;
@@ -1603,6 +1608,8 @@ class ProfileComparisonLibComponent {
     alignedPerson2Interests = [];
     leftProfileClicked = false;
     rightProfileClicked = false;
+    leftShapeAnimating = false;
+    rightShapeAnimating = false;
     sortedA = [];
     sortedB = [];
     sortedC = [];
@@ -1630,15 +1637,11 @@ class ProfileComparisonLibComponent {
     fetchRequestId = 0;
     leftContainer;
     rightContainer;
-    profileFlex;
-    profileImgLeft;
-    profileImgRight;
+    leftFrame;
+    rightFrame;
+    leftBgFrame;
+    rightBgFrame;
     shapeContainer;
-    shapeBg;
-    shapeBg1;
-    shapeBg2;
-    shapeTextLeft;
-    shapeTextRight;
     shapeTextCenter;
     constructor(backendService, renderer, fileConversionService, imageCompressionService, cdr, getVerboseLogging) {
         this.backendService = backendService;
@@ -1701,9 +1704,16 @@ 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');
@@ -1733,7 +1743,87 @@ class ProfileComparisonLibComponent {
         if (!interest || !this.centerItem?.length)
             return false;
         const n = String(interest).trim().toLowerCase();
-        return this.centerItem.some((c) => String(c).trim().toLowerCase() === n);
+        // Placeholders are NEVER 'in center' - they stay on their respective sides
+        if (this.isPlaceholder(n))
+            return false;
+        return this.centerItem.some((c) => {
+            if (!c || this.isPlaceholder(c))
+                return false;
+            const nc = String(c).trim().toLowerCase();
+            // Handle consolidated items (e.g. "Football × Soccer" or "Football / Soccer")
+            return nc === n || nc.split(' × ').includes(n) || nc.split(' / ').includes(n);
+        });
+    }
+    /**
+     * Returns true if the value is a placeholder string consisting only of one or more dashes.
+     * Handles variations like "-", "---", "----", etc.
+     */
+    /**
+     * Returns true if we should show a dash on the side instead of the text.
+     * This happens if:
+     * 1. The interest is a placeholder (----).
+     * 2. The interest exactly matches the center label at that index (to avoid redundancy).
+     */
+    shouldShowDash(interest, index) {
+        if (!interest || this.isPlaceholder(interest))
+            return true;
+        if (!this.centerItem || !this.centerItem[index])
+            return false;
+        const n = String(interest).trim().toLowerCase();
+        const c = String(this.centerItem[index]).trim().toLowerCase();
+        if (this.isPlaceholder(c))
+            return false;
+        // Show dash if the side interest is exactly represented in the center
+        return n === c || c.split(' × ').includes(n) || c.split(' / ').includes(n);
+    }
+    /**
+     * Returns true if the center label at the current index is a repeat of the one above it.
+     * This is used to "collapse" repeating categories into dashes.
+     */
+    isCenterRedundant(index) {
+        if (index === 0 || !this.centerItem || !this.centerItem[index])
+            return false;
+        const current = String(this.centerItem[index]).trim().toLowerCase();
+        const previous = String(this.centerItem[index - 1]).trim().toLowerCase();
+        if (this.isPlaceholder(current))
+            return false;
+        return current === previous;
+    }
+    /**
+     * Reorders the aligned results so that items with identical center labels follow each other.
+     */
+    regroupByCenterLabel() {
+        if (!this.centerItem?.length)
+            return;
+        // We need to keep all three lists in sync while sorting
+        const combined = this.centerItem.map((label, idx) => ({
+            label,
+            p1: this.alignedPerson1Interests[idx] || ProfileComparisonLibComponent.PLACEHOLDER,
+            p2: this.alignedPerson2Interests[idx] || ProfileComparisonLibComponent.PLACEHOLDER
+        }));
+        // Sort by label, keeping placeholders (-) at the bottom
+        combined.sort((a, b) => {
+            const aPlace = this.isPlaceholder(a.label);
+            const bPlace = this.isPlaceholder(b.label);
+            if (aPlace && !bPlace)
+                return 1;
+            if (!aPlace && bPlace)
+                return -1;
+            return String(a.label).localeCompare(String(b.label));
+        });
+        // Write back to the arrays
+        this.centerItem = combined.map(c => c.label);
+        this.alignedPerson1Interests = combined.map(c => c.p1);
+        this.alignedPerson2Interests = combined.map(c => c.p2);
+    }
+    isPlaceholder(val) {
+        if (typeof val !== 'string')
+            return false;
+        const trimmed = val.trim();
+        if (!trimmed)
+            return false;
+        // Standard dash characters include hyphen (-), en-dash (–), em-dash (—)
+        return /^[-–—]+$/.test(trimmed);
     }
     fetchComparison() {
         this.log('fetchComparison', 'start');
@@ -1773,22 +1863,13 @@ class ProfileComparisonLibComponent {
                 this.backendError = null;
                 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 {
-                    this.alignedPerson1Interests = a1;
-                    this.alignedPerson2Interests = a2;
-                    this.centerItem = payload.centerItem ?? [];
-                    this.displayPerson1Interests = a1.length ? a1 : this.person1Interests;
-                    this.displayPerson2Interests = a2.length ? a2 : this.person2Interests;
-                }
+                this.alignedPerson1Interests = a1;
+                this.alignedPerson2Interests = a2;
+                this.centerItem = payload.centerItem ?? [];
+                // Regroup items so redundant center labels flow together
+                this.regroupByCenterLabel();
+                this.displayPerson1Interests = this.alignedPerson1Interests;
+                this.displayPerson2Interests = this.alignedPerson2Interests;
                 this.matrixData = payload.matrixData ?? null;
                 if (this.matrixData)
                     this.matrixDataChange.emit(this.matrixData);
@@ -1854,6 +1935,8 @@ class ProfileComparisonLibComponent {
             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) {
@@ -1981,7 +2064,7 @@ class ProfileComparisonLibComponent {
     }
     getProfileContainerSize(which) {
         try {
-            const el = (which === 1 ? this.profileImgLeft : this.profileImgRight)?.nativeElement || null;
+            const el = (which === 1 ? this.leftFrame : this.rightFrame)?.nativeElement || null;
             if (!el)
                 return { width: 0, height: 0 };
             const rect = el.getBoundingClientRect();
@@ -1992,156 +2075,135 @@ class ProfileComparisonLibComponent {
         }
     }
     getOverlapSizeCssPx() {
-        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;
-        }
+        return 40;
     }
     setOverlapSizeCssPx(px) {
-        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 { }
+        // deprecated
     }
     waitForImagesAndInitDrag() {
-        const shapeBg1 = this.shapeBg1?.nativeElement;
-        const shapeBg2 = this.shapeBg2?.nativeElement;
-        if (!shapeBg1 || !shapeBg2) {
+        const leftFrame = this.leftFrame?.nativeElement;
+        const rightFrame = this.rightFrame?.nativeElement;
+        if (!leftFrame || !rightFrame) {
             setTimeout(() => this.waitForImagesAndInitDrag(), 100);
             return;
         }
-        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();
+        setTimeout(() => this.initDrag(), 100);
     }
     initDrag() {
-        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)
+        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)
             return;
-        // 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 initialWidth1 = 0;
-        let initialWidth2 = 0;
-        let activeImg = null;
-        // Use ViewChild for center text
-        const shapeTextCenter = this.shapeTextCenter?.nativeElement || null;
+        let activeFrame = null;
+        const initialTranslateXLeft = -24; // starting CSS value percent
+        const initialTranslateXRight = 24;
         const onMouseMove = (e) => {
-            if (!isDragging || !activeImg)
+            if (!isDragging || !activeFrame)
                 return;
             const deltaX = e.clientX - dragStartX;
-            const containerWidth = this.shapeContainer?.nativeElement?.clientWidth || 0;
-            let newWidth1 = initialWidth1;
-            let newWidth2 = initialWidth2;
-            if (activeImg === shapeBg1) {
-                newWidth1 = initialWidth1 + deltaX;
-                newWidth2 = initialWidth2 - deltaX;
+            const containerWidth = leftFrame.parentElement?.clientWidth || 360;
+            const deltaPercent = (deltaX / containerWidth) * 100;
+            let newLeftTranslate = initialTranslateXLeft;
+            let newRightTranslate = initialTranslateXRight;
+            if (activeFrame === leftFrame) {
+                // Dragging left frame rightwards (deltaX > 0) increases its translateX
+                newLeftTranslate = Math.max(-50, Math.min(0, initialTranslateXLeft + deltaPercent));
+                // Counter-balance right frame moving outward
+                newRightTranslate = Math.max(0, Math.min(50, initialTranslateXRight - deltaPercent));
             }
-            else if (activeImg === shapeBg2) {
-                newWidth1 = initialWidth1 - deltaX;
-                newWidth2 = initialWidth2 + deltaX;
+            else {
+                // Dragging right frame leftwards (deltaX < 0) decreases its translateX
+                newRightTranslate = Math.max(0, Math.min(50, initialTranslateXRight + deltaPercent));
+                // Counter-balance left frame moving outward
+                newLeftTranslate = Math.max(-50, Math.min(0, initialTranslateXLeft - deltaPercent));
             }
-            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)`;
+            leftFrame.style.transform = `translateX(${newLeftTranslate}%) scale(0.86)`;
+            rightFrame.style.transform = `translateX(${newRightTranslate}%) scale(0.86)`;
+            if (leftBgFrame)
+                leftBgFrame.style.transform = `translateX(${newLeftTranslate}%) scale(0.86)`;
+            if (rightBgFrame)
+                rightBgFrame.style.transform = `translateX(${newRightTranslate}%) scale(0.86)`;
             if (shapeTextCenter) {
-                shapeTextCenter.style.transform = `translateX(${centerMoveDistance * ProfileComparisonLibComponent.TEXT_MOVE_MULTIPLIER}px)`;
+                // Just fade out center text slightly when pulling apart
+                const pullDistanceFactor = Math.abs(newLeftTranslate - initialTranslateXLeft) / 24;
+                shapeTextCenter.style.opacity = `${Math.max(0, 1 - pullDistanceFactor * 1.5)}`;
             }
         };
-        const resetWidths = () => {
+        const resetDrag = () => {
             isDragging = false;
-            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;
-            }
+            activeFrame = null;
+            leftFrame.style.transition = 'transform 0.3s ease-out';
+            rightFrame.style.transition = 'transform 0.3s ease-out';
+            if (leftBgFrame)
+                leftBgFrame.style.transition = 'transform 0.3s ease-out';
+            if (rightBgFrame)
+                rightBgFrame.style.transition = 'transform 0.3s ease-out';
+            if (shapeTextCenter)
+                shapeTextCenter.style.transition = 'opacity 0.3s ease-out';
+            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)`;
+            if (rightBgFrame)
+                rightBgFrame.style.transform = `translateX(24%) scale(0.86)`;
+            if (shapeTextCenter)
+                shapeTextCenter.style.opacity = '1';
             document.removeEventListener('mousemove', onMouseMove);
-            document.removeEventListener('mouseup', resetWidths);
-            document.removeEventListener('mouseleave', resetWidths);
+            document.removeEventListener('mouseup', resetDrag);
+            document.removeEventListener('mouseleave', resetDrag);
             setTimeout(() => {
-                shapeBg1El.style.transition = '';
-                shapeBg2El.style.transition = '';
-                shapeTextLeft.style.transition = '';
-                shapeTextRight.style.transition = '';
-                if (shapeTextCenter) {
+                leftFrame.style.transition = '';
+                rightFrame.style.transition = '';
+                if (leftBgFrame)
+                    leftBgFrame.style.transition = '';
+                if (rightBgFrame)
+                    rightBgFrame.style.transition = '';
+                if (shapeTextCenter)
                     shapeTextCenter.style.transition = '';
-                }
-            }, ProfileComparisonLibComponent.TRANSITION_RESET_DELAY_MS);
+            }, 300);
         };
-        [shapeBg1, shapeBg2].forEach((img) => {
-            img.addEventListener('mousedown', (e) => {
+        [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
                 e.preventDefault();
                 isDragging = true;
-                activeImg = img;
+                activeFrame = frame;
                 dragStartX = e.clientX;
-                initialWidth1 = shapeBg1.getBoundingClientRect().width;
-                initialWidth2 = shapeBg2.getBoundingClientRect().width;
                 document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', resetWidths);
-                document.addEventListener('mouseleave', resetWidths);
+                document.addEventListener('mouseup', resetDrag);
+                document.addEventListener('mouseleave', resetDrag);
             });
         });
     }
     onViewProfile(side) {
+        if (side === 'left') {
+            this.leftProfileClicked = true;
+            setTimeout(() => this.leftProfileClicked = false, 650);
+        }
+        else {
+            this.rightProfileClicked = true;
+            setTimeout(() => this.rightProfileClicked = false, 650);
+        }
         this.viewProfileClick.emit({ side });
     }
+    onShapeClick(side) {
+        if (side === 'left') {
+            this.leftShapeAnimating = true;
+            setTimeout(() => this.leftShapeAnimating = false, 550);
+        }
+        else {
+            this.rightShapeAnimating = true;
+            setTimeout(() => this.rightShapeAnimating = false, 550);
+        }
+    }
     compressConfigImagesIfNeeded() {
         const tasks = [];
         if (this.user1Image) {
@@ -2239,8 +2301,8 @@ class ProfileComparisonLibComponent {
         const user2FaceCoords = this.getFaceCoordinatesFromBBox(face2);
         const user1Eyes = this.getEyeCoordinatesFromFace(face1);
         const user2Eyes = this.getEyeCoordinatesFromFace(face2);
-        const leftContainerEl = this.profileImgLeft?.nativeElement || null;
-        const rightContainerEl = this.profileImgRight?.nativeElement || null;
+        const leftContainerEl = this.leftFrame?.nativeElement || null;
+        const rightContainerEl = this.rightFrame?.nativeElement || null;
         const containerWidth1 = leftContainerEl?.clientWidth || 160;
         const containerHeight1 = leftContainerEl?.clientHeight || 550;
         const containerWidth2 = rightContainerEl?.clientWidth || 160;
@@ -2277,12 +2339,12 @@ class ProfileComparisonLibComponent {
     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.16", 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.16", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges" }, 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\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div #shapeContainer class=\"shape\">\r\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\r\n<g filter=\"url(#filter0_i_4_4137)\">\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4137)\">\r\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\r\n<g filter=\"url(#filter0_i_4_4141)\">\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4141)\">\r\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div #shapeTextLeft class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\r\n      </div>\r\n\r\n      <div #shapeTextCenter class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div #shapeTextRight class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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}.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:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;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-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{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:-75px;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:.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:40px;width:100%}.shape-bg{position:relative}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3)}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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}#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: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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    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" }, 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     [style.--edge-shading-color]=\"config.shadingColor || 'rgba(44, 40, 47, 0.0)'\"\n     [style.--edge-shading-width]=\"'28px'\"\n     [style.--edge-shading-display]=\"config.edgeShading !== false ? 'block' : 'none'\"\n     [style.--edge-mask-left]=\"config.edgeShading !== false ? 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 14px, black 20px)' : 'none'\"\n     [style.--edge-mask-right]=\"config.edgeShading !== false ? 'linear-gradient(to left, transparent 0%, rgba(0,0,0,0.4) 14px, black 20px)' : 'none'\">\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\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, 'object-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, 'object-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\"\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        width=\"256\"\n        height=\"275\"\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 L0 0 M0 278 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          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-left\" x=\"-20\" y=\"-20\" width=\"300\" height=\"320\" 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 127 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\"/>\n            <feGaussianBlur in=\"effect1\" stdDeviation=\"6.3562\" result=\"effect2\"/>\n            <feGaussianBlur in=\"effect2\" stdDeviation=\"6.3562\" result=\"effect3\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect3\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        width=\"256\"\n        height=\"275\"\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(#filter0_i_2126_3746)\">\n          <path\n            d=\"M245.538 25.2463 L-0.638672 -1.2459 V276.7542 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          />\n        </g>\n        <defs>\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 127 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      </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 L0 0 V278 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        />\n        <!-- Stroke Layer (Left outer border skipped) -->\n        <path\n          d=\"M246.177 26.4924 L0 0 M0 278 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        />\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 x=\"0\" y=\"240\" width=\"100\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            x=\"15\" y=\"260\"\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 4px rgba(0,0,0,0.8);\"\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          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <div class=\"profile-comparison__item profile-comparison__item--left\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                *ngIf=\"!shouldShowDash(interest, i)\"\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              <svg *ngIf=\"shouldShowDash(interest, i)\" class=\"profile-comparison__dash\" 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\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"profile-comparison__frame profile-comparison__frame--right\"\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        width=\"257\"\n        height=\"275\"\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 277.5 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 L256.24 0\"\n            stroke=\"#AB4AFF\"\n            stroke-opacity=\"0.3\"\n            stroke-width=\"0.809707\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-right\" x=\"-20\" y=\"-20\" width=\"300\" height=\"320\" 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 127 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\"/>\n            <feGaussianBlur in=\"effect1\" stdDeviation=\"6.3562\" result=\"effect2\"/>\n            <feGaussianBlur in=\"effect2\" stdDeviation=\"6.3562\" result=\"effect3\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect3\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        width=\"257\"\n        height=\"275\"\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(#filter0_i_2126_3750)\">\n          <path\n            d=\"M9.82611 25.203 L244.066 0.0640762 L256.24 -1.2424 V276.258 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          />\n        </g>\n        <defs>\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 127 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      </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 L256.24 0 V277.5 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        />\n        <!-- Stroke Layer (Right outer border skipped) -->\n        <path\n          d=\"M256.24 277.5 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 L256.24 0\"\n          fill=\"none\"\n          stroke=\"url(#profile-right-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n        />\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('right'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect x=\"156\" y=\"240\" width=\"100\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            x=\"241\" y=\"260\"\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 4px rgba(0,0,0,0.8);\"\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          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <div class=\"profile-comparison__item profile-comparison__item--right\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                *ngIf=\"!shouldShowDash(interest, i)\"\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              <svg *ngIf=\"shouldShowDash(interest, i)\" class=\"profile-comparison__dash\" 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\" stroke-linejoin=\"round\"/>\n              </svg>\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        <ng-container *ngFor=\"let item of centerItem; let idx = index\">\n          <div class=\"profile-comparison__center-item\">\n            <!-- Show the label for the first occurrence -->\n            <lib-marquee\n              *ngIf=\"!isPlaceholder(item) && !isCenterRedundant(idx)\"\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\n            <!-- Show a dash for redundant/collapsed categories -->\n            <svg *ngIf=\"isCenterRedundant(idx)\" class=\"profile-comparison__dash\" 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-opacity=\"0.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n\n            <!-- Spacers/Placeholders result in empty divs (no dash) by default -->\n          </div>\n        </ng-container>\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}.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%;min-width:300px;max-width:600px;margin:0 auto;overflow:visible;position:relative}.profile-flex{display:flex;width:100%;height:414px;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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3)}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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;padding:0 var(--profile-comparison-bleed, 20px);overflow:visible}.profile-comparison__inner{position:relative;width:100%;max-width:100%;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%;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%;overflow:hidden;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame.bg-frame.profile-comparison__frame--left{clip-path:polygon(0% 0%,96.2% 9.5%,100% 13.5%,100% 82.4%,96.4% 86.3%,0% 100%);-webkit-mask-image:var(--v-mask),linear-gradient(to right,black 40%,transparent 100%);mask-image:var(--v-mask),linear-gradient(to right,black 40%,transparent 100%)}.profile-comparison__frame.bg-frame.profile-comparison__frame--right{clip-path:polygon(100% 0%,100% 100%,94.7% 99.3%,3.6% 86.3%,0% 82.4%,0% 13.5%,3.8% 9.5%,95.3% .5%);-webkit-mask-image:var(--v-mask),linear-gradient(to left,black 40%,transparent 100%);mask-image:var(--v-mask),linear-gradient(to left,black 40%,transparent 100%)}.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:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--edge-shading-color, rgba(44, 40, 47, .7)) 0%,rgba(44,40,47,.3) 14px,transparent var(--edge-shading-width, 28px));z-index:5;display:var(--edge-shading-display, block)}.profile-comparison__frame--left .profile-comparison__frame-svg--glass{transform:scale(1.02) translate(1px);transform-origin:center}.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:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,var(--edge-shading-color, rgba(44, 40, 47, .7)) 0%,rgba(44,40,47,.3) 14px,transparent var(--edge-shading-width, 28px));z-index:5;display:var(--edge-shading-display, block)}.profile-comparison__frame--right .profile-comparison__frame-svg--glass{transform:scale(1.02) translate(-1px);transform-origin:center}.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}.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;inset:0;background-size:360px auto;background-repeat:no-repeat;filter:blur(2px);pointer-events:auto;transition:filter .6s ease;--vignette-mask: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent)}.profile-comparison__bg--left{background-position:left center;margin-right:20%;-webkit-mask-image:var(--vignette-mask),linear-gradient(to right,black 50%,transparent 100%);mask-image:var(--vignette-mask),linear-gradient(to right,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__bg--right{background-position:right center;margin-left:20%;-webkit-mask-image:var(--vignette-mask),linear-gradient(to left,black 50%,transparent 100%);mask-image:var(--vignette-mask),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:30%}.profile-comparison__content--right{align-items:flex-start;text-align:left;padding-left:30%}.profile-comparison__list{display:flex;flex-direction:column;gap:10px;width:100%;pointer-events:auto}.profile-comparison__list--left{align-items:flex-end;text-align:right;padding-right:30%}.profile-comparison__list--right{align-items:flex-start;text-align:left;padding-left:30%}.profile-comparison__item{display:flex;align-items:center;height:22px;width:170px;flex-shrink:0;animation:textDropIn .4s ease-out backwards}.profile-comparison__item--left{justify-content:flex-end}.profile-comparison__item--left .profile-comparison__dash{margin-right:12px;flex-shrink:0}.profile-comparison__item--right{justify-content:flex-start}.profile-comparison__item--right .profile-comparison__dash{margin-left:12px;flex-shrink:0}.profile-comparison__text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:100!important;color:#fff;width:100%;display:block}.profile-comparison__text ::ng-deep *{font-weight:400!important}.profile-comparison__dash{display:block}.profile-comparison__item-text{display:none}.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:10px;width:100%}.profile-comparison__center-item{height:22px;display:flex;align-items:center;justify-content:center;width:140px;flex-shrink:0;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}.profile-comparison__center-text--empty{color:#ecf0f180}@media(max-width:480px){.profile-comparison{padding:12px}.profile-comparison__inner{max-width:100%;width:100%;transform:none;transform-origin:center;overflow:visible}.profile-comparison__frame{width:70%!important}.profile-comparison__frame--left{transform:translate(-5%) scale(.86)!important}.profile-comparison__frame--right{transform:translate(5%) scale(.86)!important}.profile-comparison__center{transform:none!important}.profile-comparison__name{font-size:11px}.profile-comparison__list{font-size:9px}.profile-comparison__center-text{font-size:10px}}.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: "component", type: i3.MarqueeComponent, selector: "lib-marquee", inputs: ["title", "searchText", "padding", "onlyMarqueeOnHover"], outputs: ["marquee"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div #shapeContainer class=\"shape\">\r\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\r\n<g filter=\"url(#filter0_i_4_4137)\">\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4137)\">\r\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\r\n<g filter=\"url(#filter0_i_4_4141)\">\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4141)\">\r\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\r\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 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\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\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div #shapeTextLeft class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\r\n      </div>\r\n\r\n      <div #shapeTextCenter class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div #shapeTextRight class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),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}.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:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;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-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{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:-75px;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:.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:40px;width:100%}.shape-bg{position:relative}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3)}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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}#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: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 profile-comparison\" *ngIf=\"backendConfigured\"\n     [style.--edge-shading-color]=\"config.shadingColor || 'rgba(44, 40, 47, 0.0)'\"\n     [style.--edge-shading-width]=\"'28px'\"\n     [style.--edge-shading-display]=\"config.edgeShading !== false ? 'block' : 'none'\"\n     [style.--edge-mask-left]=\"config.edgeShading !== false ? 'linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 14px, black 20px)' : 'none'\"\n     [style.--edge-mask-right]=\"config.edgeShading !== false ? 'linear-gradient(to left, transparent 0%, rgba(0,0,0,0.4) 14px, black 20px)' : 'none'\">\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\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, 'object-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, 'object-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\"\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        width=\"256\"\n        height=\"275\"\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 L0 0 M0 278 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          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-left\" x=\"-20\" y=\"-20\" width=\"300\" height=\"320\" 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 127 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\"/>\n            <feGaussianBlur in=\"effect1\" stdDeviation=\"6.3562\" result=\"effect2\"/>\n            <feGaussianBlur in=\"effect2\" stdDeviation=\"6.3562\" result=\"effect3\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect3\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        width=\"256\"\n        height=\"275\"\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(#filter0_i_2126_3746)\">\n          <path\n            d=\"M245.538 25.2463 L-0.638672 -1.2459 V276.7542 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          />\n        </g>\n        <defs>\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 127 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      </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 L0 0 V278 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        />\n        <!-- Stroke Layer (Left outer border skipped) -->\n        <path\n          d=\"M246.177 26.4924 L0 0 M0 278 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        />\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 x=\"0\" y=\"240\" width=\"100\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            x=\"15\" y=\"260\"\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 4px rgba(0,0,0,0.8);\"\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          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <div class=\"profile-comparison__item profile-comparison__item--left\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                *ngIf=\"!shouldShowDash(interest, i)\"\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              <svg *ngIf=\"shouldShowDash(interest, i)\" class=\"profile-comparison__dash\" 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\" stroke-linejoin=\"round\"/>\n              </svg>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"profile-comparison__frame profile-comparison__frame--right\"\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        width=\"257\"\n        height=\"275\"\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 277.5 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 L256.24 0\"\n            stroke=\"#AB4AFF\"\n            stroke-opacity=\"0.3\"\n            stroke-width=\"0.809707\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n        <defs>\n          <filter id=\"filter-glass-right\" x=\"-20\" y=\"-20\" width=\"300\" height=\"320\" 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 127 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\"/>\n            <feGaussianBlur in=\"effect1\" stdDeviation=\"6.3562\" result=\"effect2\"/>\n            <feGaussianBlur in=\"effect2\" stdDeviation=\"6.3562\" result=\"effect3\"/>\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect3\" result=\"shape\"/>\n          </filter>\n        </defs>\n      </svg>\n      <svg\n        class=\"profile-comparison__frame-svg profile-comparison__frame-svg--middle\"\n        width=\"257\"\n        height=\"275\"\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(#filter0_i_2126_3750)\">\n          <path\n            d=\"M9.82611 25.203 L244.066 0.0640762 L256.24 -1.2424 V276.258 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          />\n        </g>\n        <defs>\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 127 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      </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 L256.24 0 V277.5 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        />\n        <!-- Stroke Layer (Right outer border skipped) -->\n        <path\n          d=\"M256.24 277.5 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 L256.24 0\"\n          fill=\"none\"\n          stroke=\"url(#profile-right-stroke)\"\n          stroke-width=\"2\"\n          stroke-miterlimit=\"3.99393\"\n          stroke-linejoin=\"round\"\n        />\n        <g\n          style=\"cursor: pointer !important;\"\n          (click)=\"onViewProfile('right'); $event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\"\n        >\n          <rect x=\"156\" y=\"240\" width=\"100\" height=\"40\" fill=\"transparent\" pointer-events=\"auto\" />\n          <text\n            x=\"241\" y=\"260\"\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 4px rgba(0,0,0,0.8);\"\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          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <div class=\"profile-comparison__item profile-comparison__item--right\">\n              <lib-marquee\n                class=\"profile-comparison__text\"\n                *ngIf=\"!shouldShowDash(interest, i)\"\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              <svg *ngIf=\"shouldShowDash(interest, i)\" class=\"profile-comparison__dash\" 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\" stroke-linejoin=\"round\"/>\n              </svg>\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        <ng-container *ngFor=\"let item of centerItem; let idx = index\">\n          <div class=\"profile-comparison__center-item\">\n            <!-- Show the label for the first occurrence -->\n            <lib-marquee\n              *ngIf=\"!isPlaceholder(item) && !isCenterRedundant(idx)\"\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\n            <!-- Show a dash for redundant/collapsed categories -->\n            <svg *ngIf=\"isCenterRedundant(idx)\" class=\"profile-comparison__dash\" 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-opacity=\"0.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n\n            <!-- Spacers/Placeholders result in empty divs (no dash) by default -->\n          </div>\n        </ng-container>\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}.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%;min-width:300px;max-width:600px;margin:0 auto;overflow:visible;position:relative}.profile-flex{display:flex;width:100%;height:414px;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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3)}.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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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:2px 2px 4px rgba(0,0,0,.3);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;padding:0 var(--profile-comparison-bleed, 20px);overflow:visible}.profile-comparison__inner{position:relative;width:100%;max-width:100%;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%;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%;overflow:hidden;-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__frame.bg-frame.profile-comparison__frame--left{clip-path:polygon(0% 0%,96.2% 9.5%,100% 13.5%,100% 82.4%,96.4% 86.3%,0% 100%);-webkit-mask-image:var(--v-mask),linear-gradient(to right,black 40%,transparent 100%);mask-image:var(--v-mask),linear-gradient(to right,black 40%,transparent 100%)}.profile-comparison__frame.bg-frame.profile-comparison__frame--right{clip-path:polygon(100% 0%,100% 100%,94.7% 99.3%,3.6% 86.3%,0% 82.4%,0% 13.5%,3.8% 9.5%,95.3% .5%);-webkit-mask-image:var(--v-mask),linear-gradient(to left,black 40%,transparent 100%);mask-image:var(--v-mask),linear-gradient(to left,black 40%,transparent 100%)}.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:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--edge-shading-color, rgba(44, 40, 47, .7)) 0%,rgba(44,40,47,.3) 14px,transparent var(--edge-shading-width, 28px));z-index:5;display:var(--edge-shading-display, block)}.profile-comparison__frame--left .profile-comparison__frame-svg--glass{transform:scale(1.02) translate(1px);transform-origin:center}.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:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,var(--edge-shading-color, rgba(44, 40, 47, .7)) 0%,rgba(44,40,47,.3) 14px,transparent var(--edge-shading-width, 28px));z-index:5;display:var(--edge-shading-display, block)}.profile-comparison__frame--right .profile-comparison__frame-svg--glass{transform:scale(1.02) translate(-1px);transform-origin:center}.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}.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;inset:0;background-size:360px auto;background-repeat:no-repeat;filter:blur(2px);pointer-events:auto;transition:filter .6s ease;--vignette-mask: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent)}.profile-comparison__bg--left{background-position:left center;margin-right:20%;-webkit-mask-image:var(--vignette-mask),linear-gradient(to right,black 50%,transparent 100%);mask-image:var(--vignette-mask),linear-gradient(to right,black 50%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.profile-comparison__bg--right{background-position:right center;margin-left:20%;-webkit-mask-image:var(--vignette-mask),linear-gradient(to left,black 50%,transparent 100%);mask-image:var(--vignette-mask),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:30%}.profile-comparison__content--right{align-items:flex-start;text-align:left;padding-left:30%}.profile-comparison__list{display:flex;flex-direction:column;gap:10px;width:100%;pointer-events:auto}.profile-comparison__list--left{align-items:flex-end;text-align:right;padding-right:30%}.profile-comparison__list--right{align-items:flex-start;text-align:left;padding-left:30%}.profile-comparison__item{display:flex;align-items:center;height:22px;width:170px;flex-shrink:0;animation:textDropIn .4s ease-out backwards}.profile-comparison__item--left{justify-content:flex-end}.profile-comparison__item--left .profile-comparison__dash{margin-right:12px;flex-shrink:0}.profile-comparison__item--right{justify-content:flex-start}.profile-comparison__item--right .profile-comparison__dash{margin-left:12px;flex-shrink:0}.profile-comparison__text{font-family:Gilroy,sans-serif;font-size:15px;font-weight:100!important;color:#fff;width:100%;display:block}.profile-comparison__text ::ng-deep *{font-weight:400!important}.profile-comparison__dash{display:block}.profile-comparison__item-text{display:none}.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:10px;width:100%}.profile-comparison__center-item{height:22px;display:flex;align-items:center;justify-content:center;width:140px;flex-shrink:0;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}.profile-comparison__center-text--empty{color:#ecf0f180}@media(max-width:480px){.profile-comparison{padding:12px}.profile-comparison__inner{max-width:100%;width:100%;transform:none;transform-origin:center;overflow:visible}.profile-comparison__frame{width:70%!important}.profile-comparison__frame--left{transform:translate(-5%) scale(.86)!important}.profile-comparison__frame--right{transform:translate(5%) scale(.86)!important}.profile-comparison__center{transform:none!important}.profile-comparison__name{font-size:11px}.profile-comparison__list{font-size:9px}.profile-comparison__center-text{font-size:10px}}.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"] }]
         }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2308,52 +2370,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], rightContainer: [{
                 type: ViewChild,
                 args: ['rightContainer']
-            }], profileFlex: [{
+            }], leftFrame: [{
+                type: ViewChild,
+                args: ['leftFrame']
+            }], rightFrame: [{
                 type: ViewChild,
-                args: ['profileFlex']
-            }], profileImgLeft: [{
+                args: ['rightFrame']
+            }], leftBgFrame: [{
                 type: ViewChild,
-                args: ['profileImgLeft']
-            }], profileImgRight: [{
+                args: ['leftBgFrame']
+            }], rightBgFrame: [{
                 type: ViewChild,
-                args: ['profileImgRight']
+                args: ['rightBgFrame']
             }], 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.16", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
+    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,
             HttpClientModule,
             FormsModule,
-            ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, providers: [
+            ReactiveFormsModule,
+            LibMarqueeModule], exports: [ProfileComparisonLibComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, providers: [
             ProfileComparisonBackendService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
-            ReactiveFormsModule] });
+            ReactiveFormsModule,
+            LibMarqueeModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2363,7 +2415,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         HttpClientModule,
                         FormsModule,
-                        ReactiveFormsModule
+                        ReactiveFormsModule,
+                        LibMarqueeModule
                     ],
                     exports: [
                         ProfileComparisonLibComponent