@naniteninja/profile-comparison-lib 1.0.22 → 1.0.24

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, HostListener, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { forceSimulation, forceLink, forceCollide, forceX, forceY } from 'd3-force';
 import { switchMap as switchMap$1, map as map$1, catchError, tap as tap$1 } from 'rxjs/operators';
 import { from, switchMap, map, Observable, of, BehaviorSubject, throwError, tap, retryWhen, concatMap, timer, catchError as catchError$1, forkJoin } from 'rxjs';
 import * as i1 from '@angular/common/http';
@@ -13,12 +14,12 @@ var BackendMode;
 (function (BackendMode) {
     /** Use the real deployed backend (default). */
     BackendMode[BackendMode["Real"] = 0] = "Real";
-    /** Use a local mock server at localhost:3000. */
+    /** Use a local mock server at localhost:44101. */
     BackendMode[BackendMode["Mock"] = 1] = "Mock";
 })(BackendMode || (BackendMode = {}));
 const BACKEND_MODE_URLS = {
     [BackendMode.Real]: 'https://api.test.thecyrano.app/api/profile-comparison/api',
-    [BackendMode.Mock]: 'http://localhost:3000/api',
+    [BackendMode.Mock]: 'http://localhost:44101/api',
 };
 /**
  * Legacy injection token for the backend base URL.
@@ -202,10 +203,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.25", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CachePersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CachePersistenceService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -313,10 +314,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.25", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileConversionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FileConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FileConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -432,10 +433,10 @@ class ImageCompressionService {
             return `${base}.webp`;
         return `${base}.jpg`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ImageCompressionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ImageCompressionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1214,10 +1215,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.25", ngImport: i0, type: OpenAIEmbeddingService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", 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.24", ngImport: i0, type: OpenAIEmbeddingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: OpenAIEmbeddingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1249,10 +1250,10 @@ class ProfileComparisonLibService {
     getVersion() {
         return '0.0.0';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1506,10 +1507,10 @@ class ProfileService {
         this.compareInterestsCache.clear();
         this.persistence.clear(CachePersistenceService.STORE_PROFILE_COMPARE);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: CachePersistenceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", 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.24", ngImport: i0, type: ProfileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
@@ -1565,10 +1566,10 @@ class ProfileComparisonBackendService {
             return throwError(() => err);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1579,6 +1580,8 @@ class ProfileComparisonLibComponent {
     fileConversionService;
     imageCompressionService;
     cdr;
+    ngZone;
+    hostRef;
     getVerboseLogging;
     static DEFAULT_OBJECT_POSITION = '50% 50%';
     static DEFAULT_EYE_ALIGNMENT_BIAS_PX = 50;
@@ -1706,6 +1709,36 @@ class ProfileComparisonLibComponent {
     similarity = 0;
     similarityMatrixCsv = '';
     matrixData = null;
+    // ── Force-directed chip layout ──────────────────────────────────────────
+    static SPRING_THRESHOLD = 0.32;
+    static CROSS_LINK_MIN_SIMILARITY = 0.5;
+    static INTRA_GROUP_THRESHOLD = 0.5;
+    static SHARED_PROMOTION_THRESHOLD = 0.75;
+    static MAX_CROSS_LINKS_PER_NODE = 4;
+    static MIN_CROSS_LINKS_PER_NODE = 0;
+    static MAX_INTRA_LINKS_PER_NODE = 2;
+    static MAX_RELEVANT_INTERESTS_PER_SIDE = 6;
+    static CHIP_RADIUS = 18; // half chip height for collision
+    static CHIP_COLLISION_BORDER_PADDING = 6;
+    static MAX_LINK_DISTANCE = 120;
+    static CANVAS_PADDING = 40; // px below lowest node
+    forceNodes = [];
+    forceLinks = [];
+    forceCanvasHeight = 300;
+    chipFontSizePx = 14;
+    chipPaddingXPx = 18;
+    chipPaddingYPx = 6;
+    chipLineHeight = 1.4;
+    hoveredNode = null;
+    clickedNode = null;
+    draggedNode = null;
+    isDragging = false;
+    simulation;
+    layoutRebuildRaf = null;
+    nodeDragBounds = new Map();
+    get activeNode() {
+        return this.hoveredNode || this.clickedNode;
+    }
     /** When false, backend URL is not provided — show "Configure backend". */
     backendConfigured = false;
     /** The resolved backend URL computed from inputs and legacy token. */
@@ -1737,12 +1770,15 @@ class ProfileComparisonLibComponent {
     shapeTextLeft;
     shapeTextRight;
     shapeTextCenter;
-    constructor(backendService, renderer, fileConversionService, imageCompressionService, cdr, getVerboseLogging) {
+    chipsGrid;
+    constructor(backendService, renderer, fileConversionService, imageCompressionService, cdr, ngZone, hostRef, getVerboseLogging) {
         this.backendService = backendService;
         this.renderer = renderer;
         this.fileConversionService = fileConversionService;
         this.imageCompressionService = imageCompressionService;
         this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.hostRef = hostRef;
         this.getVerboseLogging = getVerboseLogging;
     }
     log(...args) {
@@ -1793,6 +1829,15 @@ class ProfileComparisonLibComponent {
             }
         });
     }
+    ngOnDestroy() {
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+        if (this.layoutRebuildRaf !== null) {
+            cancelAnimationFrame(this.layoutRebuildRaf);
+            this.layoutRebuildRaf = null;
+        }
+    }
     ngAfterViewInit() {
         this.waitForImagesAndInitDrag();
     }
@@ -1885,13 +1930,14 @@ class ProfileComparisonLibComponent {
                     this.alignedPerson2Interests = [];
                     this.displayPerson1Interests = this.person1Interests;
                     this.displayPerson2Interests = this.person2Interests;
-                    this.centerItem = payload.centerItem ?? [];
+                    this.centerItem = this.filterCenterItemsByThreshold(payload.centerItem ?? [], this.person1Interests ?? [], this.person2Interests ?? []);
                 }
                 else {
                     const rawCenter = payload.centerItem ?? [];
                     const list1ToUse = this.person1Interests?.length ? this.person1Interests : a1;
                     const list2ToUse = this.person2Interests?.length ? this.person2Interests : a2;
-                    const reordered = this.reorderInterestsByMatrix(list1ToUse, list2ToUse, rawCenter);
+                    const filteredCenter = this.filterCenterItemsByThreshold(rawCenter, list1ToUse, list2ToUse);
+                    const reordered = this.reorderInterestsByMatrix(list1ToUse, list2ToUse, filteredCenter);
                     this.alignedPerson1Interests = reordered.p1;
                     this.alignedPerson2Interests = reordered.p2;
                     this.displayPerson1Interests = reordered.p1;
@@ -1914,6 +1960,7 @@ class ProfileComparisonLibComponent {
                     this.updateObjectPositionForFace(2);
                 if (this.firstImageData && this.secondImageData)
                     this.calculateFaceAlignment(this.firstImageData, this.secondImageData);
+                this.buildForceGraph();
                 this.cdr.detectChanges();
             },
             error: (err) => {
@@ -2250,25 +2297,841 @@ class ProfileComparisonLibComponent {
             });
         });
     }
+    normalizeSimilarityToken(value) {
+        return String(value ?? '')
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '');
+    }
+    findLegendEntry(label) {
+        const legend = this.matrixData?.legend ?? [];
+        if (!legend.length)
+            return undefined;
+        const exact = String(label).trim().toLowerCase();
+        const exactMatch = legend.find(l => String(l.full).trim().toLowerCase() === exact);
+        if (exactMatch)
+            return exactMatch;
+        const normalized = this.normalizeSimilarityToken(label);
+        if (!normalized)
+            return undefined;
+        return legend.find(l => {
+            const full = this.normalizeSimilarityToken(l.full);
+            const abbr = this.normalizeSimilarityToken(l.abbr);
+            return full === normalized || abbr === normalized;
+        });
+    }
+    lookupSimilarity(rowAbbr, colAbbr) {
+        if (!this.matrixData)
+            return null;
+        const colIdx = this.matrixData.headers?.indexOf(colAbbr);
+        if (colIdx === -1 || colIdx === undefined)
+            return null;
+        const row = this.matrixData.rows?.find(r => r.label === rowAbbr);
+        if (!row || !row.values || colIdx >= row.values.length)
+            return null;
+        const val = parseFloat(row.values[colIdx]);
+        return isNaN(val) ? null : val;
+    }
     getSimilarity(item1, item2) {
         if (!this.matrixData || !item1 || !item2)
             return 0;
-        const n1 = String(item1).trim().toLowerCase();
-        const n2 = String(item2).trim().toLowerCase();
+        const n1 = this.normalizeSimilarityToken(item1);
+        const n2 = this.normalizeSimilarityToken(item2);
+        if (!n1 || !n2)
+            return 0;
         if (n1 === n2)
             return 1.0;
-        const leg1 = this.matrixData.legend?.find(l => l.full.trim().toLowerCase() === n1);
-        const leg2 = this.matrixData.legend?.find(l => l.full.trim().toLowerCase() === n2);
+        const leg1 = this.findLegendEntry(item1);
+        const leg2 = this.findLegendEntry(item2);
         if (!leg1 || !leg2)
             return 0;
-        const colIdx = this.matrixData.headers?.indexOf(leg2.abbr);
-        if (colIdx === -1 || colIdx === undefined)
-            return 0;
-        const row = this.matrixData.rows?.find(r => r.label === leg1.abbr);
-        if (!row || !row.values || colIdx >= row.values.length)
-            return 0;
-        const val = parseFloat(row.values[colIdx]);
-        return isNaN(val) ? 0 : val;
+        const direct = this.lookupSimilarity(leg1.abbr, leg2.abbr);
+        if (direct != null)
+            return direct;
+        const reverse = this.lookupSimilarity(leg2.abbr, leg1.abbr);
+        if (reverse != null)
+            return reverse;
+        return 0;
+    }
+    // ── Force-directed chip layout ──────────────────────────────────────────
+    orderBySemanticBarycenter(sourceItems, targetItems) {
+        const source = [...sourceItems];
+        if (source.length <= 1 || targetItems.length === 0)
+            return source;
+        const ranked = source.map((label, index) => {
+            let weightedTargetIndex = 0;
+            let totalWeight = 0;
+            for (let i = 0; i < targetItems.length; i++) {
+                const sim = Math.max(0, this.getSimilarity(label, targetItems[i]));
+                if (sim <= 0)
+                    continue;
+                weightedTargetIndex += i * sim;
+                totalWeight += sim;
+            }
+            return {
+                label,
+                index,
+                barycenter: totalWeight > 0 ? weightedTargetIndex / totalWeight : index,
+                totalWeight,
+            };
+        });
+        ranked.sort((a, b) => (a.barycenter - b.barycenter) ||
+            (b.totalWeight - a.totalWeight) ||
+            (a.index - b.index));
+        return ranked.map(item => item.label);
+    }
+    orderSharedBySemanticPull(sharedItems, p1Items, p2Items) {
+        const shared = [...sharedItems];
+        if (shared.length <= 1)
+            return shared;
+        const context = [...p1Items, ...p2Items];
+        if (context.length === 0)
+            return shared;
+        const ranked = shared.map((label, index) => {
+            let weightedIndex = 0;
+            let totalWeight = 0;
+            let strongest = 0;
+            for (let i = 0; i < context.length; i++) {
+                const sim = Math.max(0, this.getSimilarity(label, context[i]));
+                if (sim <= 0)
+                    continue;
+                weightedIndex += i * sim;
+                totalWeight += sim;
+                strongest = Math.max(strongest, sim);
+            }
+            return {
+                label,
+                index,
+                barycenter: totalWeight > 0 ? weightedIndex / totalWeight : index,
+                strongest,
+            };
+        });
+        ranked.sort((a, b) => (b.strongest - a.strongest) ||
+            (a.barycenter - b.barycenter) ||
+            (a.index - b.index));
+        return ranked.map(item => item.label);
+    }
+    canLinkNodes(a, b) {
+        if (a.group === 'shared' && b.group === 'shared')
+            return true;
+        if (a.group === b.group)
+            return false;
+        if (a.group === 'shared' || b.group === 'shared')
+            return true;
+        return (a.group === 'p1' && b.group === 'p2') || (a.group === 'p2' && b.group === 'p1');
+    }
+    getLinkNodeId(ref) {
+        return typeof ref === 'object' ? ref.id : String(ref);
+    }
+    getLinkPairKey(a, b) {
+        const idA = this.getLinkNodeId(a);
+        const idB = this.getLinkNodeId(b);
+        return idA < idB ? `${idA}|${idB}` : `${idB}|${idA}`;
+    }
+    selectLinksWithCaps(candidates, maxPerNode, minPerNode = 0) {
+        if (!candidates.length || maxPerNode <= 0)
+            return [];
+        const sorted = [...candidates].sort((a, b) => (b.similarity - a.similarity) ||
+            (b.strength - a.strength));
+        const counts = new Map();
+        const selected = [];
+        const selectedKeys = new Set();
+        const getCount = (id) => counts.get(id) ?? 0;
+        const increment = (id) => {
+            counts.set(id, getCount(id) + 1);
+        };
+        const canAdd = (link) => {
+            const sourceId = this.getLinkNodeId(link.source);
+            const targetId = this.getLinkNodeId(link.target);
+            if (getCount(sourceId) >= maxPerNode)
+                return false;
+            if (getCount(targetId) >= maxPerNode)
+                return false;
+            return true;
+        };
+        const add = (link) => {
+            const key = this.getLinkPairKey(link.source, link.target);
+            if (selectedKeys.has(key) || !canAdd(link))
+                return false;
+            selectedKeys.add(key);
+            selected.push(link);
+            const sourceId = this.getLinkNodeId(link.source);
+            const targetId = this.getLinkNodeId(link.target);
+            increment(sourceId);
+            increment(targetId);
+            return true;
+        };
+        const nodeIds = new Set();
+        const perNodeCandidates = new Map();
+        sorted.forEach(link => {
+            const sourceId = this.getLinkNodeId(link.source);
+            const targetId = this.getLinkNodeId(link.target);
+            nodeIds.add(sourceId);
+            nodeIds.add(targetId);
+            const sourceBucket = perNodeCandidates.get(sourceId) ?? [];
+            sourceBucket.push(link);
+            perNodeCandidates.set(sourceId, sourceBucket);
+            const targetBucket = perNodeCandidates.get(targetId) ?? [];
+            targetBucket.push(link);
+            perNodeCandidates.set(targetId, targetBucket);
+        });
+        // Phase 1: satisfy minimum significant relationships before dense global fill.
+        if (minPerNode > 0) {
+            let progressed = true;
+            while (progressed) {
+                progressed = false;
+                nodeIds.forEach(nodeId => {
+                    while (getCount(nodeId) < minPerNode) {
+                        const next = (perNodeCandidates.get(nodeId) ?? []).find(link => {
+                            const key = this.getLinkPairKey(link.source, link.target);
+                            return !selectedKeys.has(key) && canAdd(link);
+                        });
+                        if (!next)
+                            break;
+                        if (!add(next))
+                            break;
+                        progressed = true;
+                    }
+                });
+            }
+        }
+        // Phase 2: fill remaining slots globally by strongest links.
+        sorted.forEach(link => {
+            add(link);
+        });
+        if (minPerNode > 0) {
+            // Best-effort soft fallback for low-degree nodes if they were blocked by caps.
+            nodeIds.forEach(nodeId => {
+                if (getCount(nodeId) >= minPerNode)
+                    return;
+                (perNodeCandidates.get(nodeId) ?? []).forEach(link => {
+                    if (getCount(nodeId) >= minPerNode)
+                        return;
+                    const key = this.getLinkPairKey(link.source, link.target);
+                    if (selectedKeys.has(key))
+                        return;
+                    const sourceId = this.getLinkNodeId(link.source);
+                    const targetId = this.getLinkNodeId(link.target);
+                    // Allow a slight overflow (+1) only to prevent isolated visual outliers.
+                    if ((getCount(sourceId) >= maxPerNode + 1) || (getCount(targetId) >= maxPerNode + 1))
+                        return;
+                    add(link);
+                });
+            });
+        }
+        return selected;
+    }
+    filterCenterItemsByThreshold(centerItems, p1Items, p2Items) {
+        if (!centerItems?.length)
+            return [];
+        const threshold = ProfileComparisonLibComponent.SHARED_PROMOTION_THRESHOLD;
+        const uniq = new Set();
+        const selected = [];
+        const normalize = (s) => this.normalizeSimilarityToken(s);
+        const p1Norm = new Set((p1Items ?? []).map(normalize));
+        const p2Norm = new Set((p2Items ?? []).map(normalize));
+        for (const raw of centerItems) {
+            const item = String(raw ?? '').trim();
+            if (!item)
+                continue;
+            const key = normalize(item);
+            if (!key || uniq.has(key))
+                continue;
+            const existsInP1 = p1Norm.has(key);
+            const existsInP2 = p2Norm.has(key);
+            let maxCrossSim = 0;
+            // If the value exists on the left, compare against right-side terms.
+            if (existsInP1 || (!existsInP1 && !existsInP2)) {
+                for (const right of p2Items ?? []) {
+                    maxCrossSim = Math.max(maxCrossSim, this.getSimilarity(item, right));
+                }
+            }
+            // If the value exists on the right, compare against left-side terms.
+            if (existsInP2 || (!existsInP1 && !existsInP2)) {
+                for (const left of p1Items ?? []) {
+                    maxCrossSim = Math.max(maxCrossSim, this.getSimilarity(item, left));
+                }
+            }
+            if (maxCrossSim >= threshold) {
+                selected.push(item);
+                uniq.add(key);
+            }
+        }
+        return selected;
+    }
+    scheduleForceGraphRebuild() {
+        if (this.layoutRebuildRaf !== null) {
+            cancelAnimationFrame(this.layoutRebuildRaf);
+            this.layoutRebuildRaf = null;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.layoutRebuildRaf = requestAnimationFrame(() => {
+                this.layoutRebuildRaf = null;
+                this.ngZone.run(() => {
+                    if (!this.backendConfigured || !this.forceNodes.length)
+                        return;
+                    this.buildForceGraph();
+                });
+            });
+        });
+    }
+    onWindowResize() {
+        this.scheduleForceGraphRebuild();
+    }
+    buildForceGraph() {
+        const rawP1 = this.getPerson1UniqueInterests();
+        const rawShared = (this.centerItem || []).filter(c => c && c !== 'empty' && c !== '-' && c !== '----');
+        const rawP2 = this.getPerson2UniqueInterests();
+        const capped = this.selectTopSharedInterestsPerSide(rawP1, rawP2);
+        const cappedRawP1 = capped.p1;
+        const cappedRawP2 = capped.p2;
+        if (cappedRawP1.length === 0 && rawShared.length === 0 && cappedRawP2.length === 0) {
+            this.forceNodes = [];
+            this.forceLinks = [];
+            this.forceCanvasHeight = 180;
+            if (this.simulation)
+                this.simulation.stop();
+            return;
+        }
+        const p1Items = this.orderBySemanticBarycenter(cappedRawP1, cappedRawP2);
+        const p2Items = this.orderBySemanticBarycenter(cappedRawP2, cappedRawP1);
+        const shared = this.orderSharedBySemanticPull(rawShared, p1Items, p2Items);
+        // --- Read container width robustly ---
+        let containerWidth = 0;
+        try {
+            containerWidth = this.chipsGrid?.nativeElement?.clientWidth ?? 0;
+        }
+        catch { /* */ }
+        if (!containerWidth) {
+            try {
+                containerWidth = this.hostRef.nativeElement.getBoundingClientRect().width;
+            }
+            catch { /* */ }
+        }
+        if (!containerWidth) {
+            try {
+                const el = this.profileFlex?.nativeElement;
+                containerWidth = el ? (el.clientWidth || el.getBoundingClientRect().width || 0) : 0;
+            }
+            catch { /* */ }
+        }
+        if (!containerWidth || containerWidth < 100) {
+            this.ngZone.runOutsideAngular(() => {
+                requestAnimationFrame(() => {
+                    this.ngZone.run(() => this.buildForceGraph());
+                });
+            });
+            return;
+        }
+        const maxRows = Math.max(p1Items.length, shared.length, p2Items.length, 1);
+        let availableHeight = 0;
+        try {
+            availableHeight = this.chipsGrid?.nativeElement?.clientHeight ?? 0;
+        }
+        catch { /* */ }
+        if (!availableHeight) {
+            try {
+                const el = this.profileFlex?.nativeElement;
+                const h = el ? (el.clientHeight || el.getBoundingClientRect().height || 0) : 0;
+                availableHeight = Math.max(120, h - 90);
+            }
+            catch { /* */ }
+        }
+        if (!availableHeight || availableHeight < 120)
+            availableHeight = 320;
+        const baseChipH = ProfileComparisonLibComponent.CHIP_RADIUS * 2;
+        const baseStartY = 34;
+        const baseRowGapExtra = 14;
+        const baseBottomPad = 30;
+        const requiredBaseHeight = baseStartY + baseBottomPad + maxRows * baseChipH + Math.max(0, maxRows - 1) * baseRowGapExtra;
+        const fitScale = Math.min(1, Math.max(0.35, availableHeight / Math.max(requiredBaseHeight, 1)));
+        const chipH = Math.max(14, Math.round(baseChipH * fitScale));
+        const chipHalfH = chipH / 2;
+        const startY = Math.max(12, Math.round(baseStartY * fitScale));
+        const rowGap = chipH + Math.max(5, Math.round(baseRowGapExtra * fitScale));
+        const bottomPad = Math.max(10, Math.round(baseBottomPad * fitScale));
+        const canvasPad = Math.max(8, Math.round(ProfileComparisonLibComponent.CANVAS_PADDING * fitScale * 0.75));
+        // Keep rendered chip dimensions in sync with force-layout math.
+        this.chipFontSizePx = Math.max(9.5, Number((14 * Math.max(fitScale, 0.68)).toFixed(2)));
+        this.chipPaddingXPx = Math.max(8, Math.round(18 * Math.max(fitScale, 0.58)));
+        this.chipPaddingYPx = Math.max(2, Math.round(6 * Math.max(fitScale, 0.5)));
+        this.chipLineHeight = fitScale < 0.55 ? 1.15 : (fitScale < 0.8 ? 1.22 : 1.3);
+        const approxCharWidth = this.chipFontSizePx * 0.53;
+        const horizontalPadding = this.chipPaddingXPx * 2;
+        const getHalfWidth = (label) => (label.length * approxCharWidth + horizontalPadding) / 2;
+        const EDGE_PADDING = 20;
+        const getNodeMinX = (label) => getHalfWidth(label) + EDGE_PADDING;
+        const getNodeMaxX = (label) => containerWidth - getHalfWidth(label) - EDGE_PADDING;
+        const maxHalfP1 = p1Items.length ? Math.max(...p1Items.map(getHalfWidth)) : chipHalfH;
+        const maxHalfShared = shared.length ? Math.max(...shared.map(getHalfWidth)) : chipHalfH;
+        const maxHalfP2 = p2Items.length ? Math.max(...p2Items.map(getHalfWidth)) : chipHalfH;
+        let zoneP1 = maxHalfP1 + EDGE_PADDING;
+        let zoneP2 = containerWidth - maxHalfP2 - EDGE_PADDING;
+        if (zoneP2 - zoneP1 < 140) {
+            const center = containerWidth / 2;
+            zoneP1 = Math.max(maxHalfP1 + EDGE_PADDING, center - 70);
+            zoneP2 = Math.min(containerWidth - maxHalfP2 - EDGE_PADDING, center + 70);
+        }
+        const minShared = Math.max(zoneP1 + Math.max(maxHalfP1, maxHalfShared) * 0.6, maxHalfShared + EDGE_PADDING);
+        const maxShared = Math.min(zoneP2 - Math.max(maxHalfP2, maxHalfShared) * 0.6, containerWidth - maxHalfShared - EDGE_PADDING);
+        const zoneShared = Math.max(minShared, Math.min(maxShared, containerWidth * 0.5));
+        const computedMaxY = startY + chipHalfH + (maxRows - 1) * rowGap + chipHalfH + bottomPad;
+        const safeMaxY = Math.max(startY + chipHalfH, availableHeight - chipHalfH - 8);
+        const maxY = Math.min(computedMaxY, safeMaxY);
+        const minCenterY = startY + chipHalfH;
+        const verticalSpan = Math.max(0, maxY - minCenterY);
+        const centerGuard = Math.max(12, Math.min(26, (zoneP2 - zoneP1) * 0.12));
+        // --- Scan matrix for max similarity to normalize spring distances ---
+        let matrixMax = 0;
+        if (this.matrixData?.rows) {
+            for (const row of this.matrixData.rows) {
+                for (const v of row.values) {
+                    const n = parseFloat(v);
+                    if (!isNaN(n) && n > matrixMax)
+                        matrixMax = n;
+                }
+            }
+        }
+        const springThreshold = ProfileComparisonLibComponent.SPRING_THRESHOLD;
+        const crossLinkThreshold = ProfileComparisonLibComponent.CROSS_LINK_MIN_SIMILARITY;
+        if (matrixMax <= springThreshold)
+            matrixMax = 1.0;
+        const simRange = matrixMax - springThreshold;
+        const distributedYForIndex = (index, total) => {
+            if (total <= 1)
+                return minCenterY + verticalSpan * 0.5;
+            const t = index / Math.max(1, total - 1);
+            return minCenterY + verticalSpan * t;
+        };
+        const nodes = [];
+        const addNodes = (items, group, zoneX) => {
+            const total = items.length;
+            items.forEach((label, i) => {
+                const targetY = distributedYForIndex(i, total);
+                nodes.push({
+                    id: `${group}-${i}-${label}`,
+                    label,
+                    group,
+                    x: zoneX,
+                    y: targetY,
+                    targetX: zoneX,
+                    targetY,
+                });
+            });
+        };
+        addNodes(p1Items, 'p1', zoneP1);
+        addNodes(shared, 'shared', zoneShared);
+        addNodes(p2Items, 'p2', zoneP2);
+        // Pull very high-similarity opposite-side chips toward the shared lane.
+        const sharedThreshold = ProfileComparisonLibComponent.SHARED_PROMOTION_THRESHOLD;
+        const sharedRange = Math.max(0.001, 1 - sharedThreshold);
+        const oppositePool = (node) => {
+            if (node.group === 'p1')
+                return nodes.filter(n => n.group === 'p2' || n.group === 'shared');
+            if (node.group === 'p2')
+                return nodes.filter(n => n.group === 'p1' || n.group === 'shared');
+            return [];
+        };
+        nodes.forEach(node => {
+            if (node.group === 'shared') {
+                node.targetX = zoneShared;
+                return;
+            }
+            let maxCross = 0;
+            oppositePool(node).forEach(other => {
+                maxCross = Math.max(maxCross, this.getSimilarity(node.label, other.label));
+            });
+            if (maxCross >= sharedThreshold) {
+                const centerPull = 0.55 + Math.min(0.4, ((maxCross - sharedThreshold) / sharedRange) * 0.4);
+                node.targetX = node.group === 'p1'
+                    ? zoneP1 + (zoneShared - zoneP1) * centerPull
+                    : zoneP2 + (zoneShared - zoneP2) * centerPull;
+            }
+        });
+        // Vertical placement should be driven by cross-list similarity, not by
+        // whichever list happens to have fewer items.
+        const semanticPool = (node) => {
+            if (node.group === 'p1')
+                return nodes.filter(n => n.group === 'p2' || n.group === 'shared');
+            if (node.group === 'p2')
+                return nodes.filter(n => n.group === 'p1' || n.group === 'shared');
+            return nodes.filter(n => n.group === 'p1' || n.group === 'p2');
+        };
+        const ySimilarityFloor = Math.max(0.18, springThreshold - 0.06);
+        for (let pass = 0; pass < 3; pass++) {
+            const snapshotY = new Map();
+            nodes.forEach(node => {
+                snapshotY.set(node.id, node.targetY ?? (minCenterY + verticalSpan * 0.5));
+            });
+            nodes.forEach(node => {
+                const pool = semanticPool(node);
+                if (!pool.length)
+                    return;
+                let weightedY = 0;
+                let totalWeight = 0;
+                pool.forEach(other => {
+                    const similarity = this.getSimilarity(node.label, other.label);
+                    if (similarity < ySimilarityFloor)
+                        return;
+                    const weight = Math.pow(Math.max(0.001, similarity - ySimilarityFloor + 0.05), 2);
+                    const otherY = snapshotY.get(other.id) ?? (other.targetY ?? minCenterY);
+                    weightedY += otherY * weight;
+                    totalWeight += weight;
+                });
+                if (totalWeight <= 0)
+                    return;
+                const semanticY = weightedY / totalWeight;
+                const currentY = snapshotY.get(node.id) ?? semanticY;
+                const blend = node.group === 'shared' ? 0.72 : 0.62;
+                node.targetY = Math.max(minCenterY, Math.min(maxY, currentY + (semanticY - currentY) * blend));
+            });
+        }
+        const groupCounts = {
+            p1: p1Items.length,
+            shared: shared.length,
+            p2: p2Items.length,
+        };
+        const fullVerticalSpan = Math.max(rowGap, maxY - minCenterY);
+        const buildNodeBounds = (node) => {
+            const halfW = getHalfWidth(node.label);
+            const globalMinX = getNodeMinX(node.label);
+            const globalMaxX = getNodeMaxX(node.label);
+            const leftLimit = zoneShared - halfW - centerGuard;
+            const rightLimit = zoneShared + halfW + centerGuard;
+            let minX = globalMinX;
+            let maxX = globalMaxX;
+            if (node.group === 'p1') {
+                maxX = Math.min(globalMaxX, leftLimit);
+                if (maxX < minX)
+                    maxX = minX;
+            }
+            else if (node.group === 'p2') {
+                minX = Math.max(globalMinX, rightLimit);
+                if (minX > maxX)
+                    minX = maxX;
+            }
+            else {
+                // Shared chips should align directly under the centered Shared title.
+                const centerX = Math.max(globalMinX, Math.min(globalMaxX, zoneShared));
+                minX = centerX;
+                maxX = centerX;
+            }
+            const baseY = node.targetY ?? (minCenterY + fullVerticalSpan * 0.5);
+            const groupCount = groupCounts[node.group];
+            let ySlack = rowGap * 2.2;
+            if (node.group === 'shared') {
+                ySlack = Math.max(rowGap * 4.2, fullVerticalSpan * 0.58);
+            }
+            else {
+                const laneSpan = groupCount > 1 ? fullVerticalSpan / (groupCount - 1) : fullVerticalSpan;
+                ySlack = Math.min(fullVerticalSpan, Math.max(rowGap * 2.4, laneSpan * 0.95));
+            }
+            let minY = Math.max(minCenterY, baseY - ySlack);
+            let maxYForNode = Math.min(maxY, baseY + ySlack);
+            if (minY > maxYForNode) {
+                minY = minCenterY;
+                maxYForNode = maxY;
+            }
+            return { minX, maxX, minY, maxY: maxYForNode };
+        };
+        const nodeBounds = new Map();
+        nodes.forEach(node => nodeBounds.set(node.id, buildNodeBounds(node)));
+        this.nodeDragBounds = new Map(nodeBounds);
+        const clampNodeToBounds = (node) => {
+            const bounds = nodeBounds.get(node.id) ?? buildNodeBounds(node);
+            node.x = Math.max(bounds.minX, Math.min(bounds.maxX, node.x ?? (node.targetX ?? zoneShared)));
+            node.y = Math.max(bounds.minY, Math.min(bounds.maxY, node.y ?? (node.targetY ?? minCenterY)));
+        };
+        const crossCandidates = [];
+        const intraCandidates = [];
+        const MIN_DIST = 62;
+        const SPAN = 92;
+        for (let i = 0; i < nodes.length; i++) {
+            for (let j = i + 1; j < nodes.length; j++) {
+                if (!this.canLinkNodes(nodes[i], nodes[j]))
+                    continue;
+                const similarity = this.getSimilarity(nodes[i].label, nodes[j].label);
+                if (similarity < crossLinkThreshold)
+                    continue;
+                const normSim = Math.min(1, (similarity - springThreshold) / simRange);
+                const distance = MIN_DIST + (1 - normSim) * SPAN;
+                crossCandidates.push({
+                    kind: 'cross',
+                    source: nodes[i],
+                    target: nodes[j],
+                    strength: 0.32 + normSim * 0.68,
+                    similarity,
+                    distance,
+                });
+            }
+        }
+        const intraThreshold = ProfileComparisonLibComponent.INTRA_GROUP_THRESHOLD;
+        const intraRange = Math.max(0.001, matrixMax - intraThreshold);
+        ['p1', 'p2'].forEach(group => {
+            const groupNodes = nodes.filter(n => n.group === group);
+            for (let i = 0; i < groupNodes.length; i++) {
+                for (let j = i + 1; j < groupNodes.length; j++) {
+                    const similarity = this.getSimilarity(groupNodes[i].label, groupNodes[j].label);
+                    if (similarity <= intraThreshold)
+                        continue;
+                    const normSim = Math.min(1, (similarity - intraThreshold) / intraRange);
+                    intraCandidates.push({
+                        kind: 'intra',
+                        source: groupNodes[i],
+                        target: groupNodes[j],
+                        strength: 0.08 + normSim * 0.2,
+                        similarity,
+                        distance: 50 + (1 - normSim) * 42,
+                    });
+                }
+            }
+        });
+        const crossLinks = this.selectLinksWithCaps(crossCandidates, ProfileComparisonLibComponent.MAX_CROSS_LINKS_PER_NODE, ProfileComparisonLibComponent.MIN_CROSS_LINKS_PER_NODE);
+        // Shared chips can otherwise become vertical outliers if greedy caps saturate
+        // their best opposite-side neighbors too early. Ensure a minimum local anchor set.
+        const crossCounts = new Map();
+        const crossKeys = new Set();
+        const countCross = (id) => crossCounts.get(id) ?? 0;
+        const bumpCross = (id) => {
+            crossCounts.set(id, countCross(id) + 1);
+        };
+        const recordCross = (link) => {
+            const sourceId = this.getLinkNodeId(link.source);
+            const targetId = this.getLinkNodeId(link.target);
+            const key = this.getLinkPairKey(sourceId, targetId);
+            if (crossKeys.has(key))
+                return;
+            crossKeys.add(key);
+            crossLinks.push(link);
+            bumpCross(sourceId);
+            bumpCross(targetId);
+        };
+        crossLinks.forEach(link => {
+            const sourceId = this.getLinkNodeId(link.source);
+            const targetId = this.getLinkNodeId(link.target);
+            const key = this.getLinkPairKey(sourceId, targetId);
+            crossKeys.add(key);
+            bumpCross(sourceId);
+            bumpCross(targetId);
+        });
+        if (ProfileComparisonLibComponent.MIN_CROSS_LINKS_PER_NODE > 0) {
+            const sharedNodesForAnchors = nodes.filter(n => n.group === 'shared');
+            sharedNodesForAnchors.forEach(sharedNode => {
+                const sharedId = sharedNode.id;
+                const incidentCandidates = crossCandidates
+                    .filter(link => {
+                    const sourceId = this.getLinkNodeId(link.source);
+                    const targetId = this.getLinkNodeId(link.target);
+                    return sourceId === sharedId || targetId === sharedId;
+                })
+                    .sort((a, b) => (b.similarity - a.similarity) || (b.strength - a.strength));
+                const requiredAnchors = Math.min(3, incidentCandidates.length);
+                for (const candidate of incidentCandidates) {
+                    if (countCross(sharedId) >= requiredAnchors)
+                        break;
+                    const sourceId = this.getLinkNodeId(candidate.source);
+                    const targetId = this.getLinkNodeId(candidate.target);
+                    const key = this.getLinkPairKey(sourceId, targetId);
+                    if (crossKeys.has(key))
+                        continue;
+                    const otherId = sourceId === sharedId ? targetId : sourceId;
+                    if (countCross(otherId) > ProfileComparisonLibComponent.MAX_CROSS_LINKS_PER_NODE + 1)
+                        continue;
+                    recordCross(candidate);
+                }
+            });
+        }
+        const intraLinks = this.selectLinksWithCaps(intraCandidates, ProfileComparisonLibComponent.MAX_INTRA_LINKS_PER_NODE);
+        const links = [...crossLinks, ...intraLinks];
+        const nodeById = new Map(nodes.map(n => [n.id, n]));
+        const crossAdjacency = new Map();
+        const addAdjacency = (source, target, similarity) => {
+            const bucket = crossAdjacency.get(source.id) ?? [];
+            bucket.push({ node: target, similarity });
+            crossAdjacency.set(source.id, bucket);
+        };
+        crossLinks.forEach(link => {
+            const source = typeof link.source === 'object' ? link.source : nodeById.get(String(link.source));
+            const target = typeof link.target === 'object' ? link.target : nodeById.get(String(link.target));
+            if (!source || !target)
+                return;
+            addAdjacency(source, target, link.similarity);
+            addAdjacency(target, source, link.similarity);
+        });
+        const crossAlignForce = (alpha) => {
+            crossAdjacency.forEach((neighbors, nodeId) => {
+                const node = nodeById.get(nodeId);
+                if (!node || !neighbors.length)
+                    return;
+                let weightedY = 0;
+                let totalWeight = 0;
+                neighbors.forEach(({ node: other, similarity }) => {
+                    const weight = Math.max(0.05, similarity);
+                    weightedY += (other.y ?? node.y ?? 0) * weight;
+                    totalWeight += weight;
+                });
+                if (totalWeight <= 0)
+                    return;
+                const targetY = weightedY / totalWeight;
+                const dy = targetY - (node.y ?? targetY);
+                const alignStrength = node.group === 'shared'
+                    ? (neighbors.length <= 2 ? 0.62 : 0.52)
+                    : 0.36;
+                node.vy = (node.vy ?? 0) + dy * alignStrength * alpha;
+            });
+        };
+        this.ngZone.runOutsideAngular(() => {
+            const sim = forceSimulation(nodes)
+                .alphaDecay(0.02)
+                .stop()
+                .force('link', forceLink(links)
+                .id(d => d.id)
+                .distance(d => d.distance)
+                .strength(d => d.kind === 'cross' ? d.strength * 0.9 : d.strength * 0.65))
+                .force('collide', forceCollide((d) => {
+                const baseRadius = getHalfWidth(d.label) * 0.55 + ProfileComparisonLibComponent.CHIP_COLLISION_BORDER_PADDING;
+                return Math.min(58, Math.max(ProfileComparisonLibComponent.CHIP_RADIUS + 8, baseRadius));
+            })
+                .strength(1)
+                .iterations(2))
+                .force('xBound', forceX(d => d.targetX ?? zoneShared)
+                .strength(d => d.group === 'shared' ? 1.15 : 0.85))
+                .force('yTargetSeed', forceY(d => d.targetY ?? minCenterY).strength(0.34))
+                .force('crossAlign', crossAlignForce);
+            for (let i = 0; i < 420 && sim.alpha() > 0.0035; i++) {
+                sim.tick();
+                nodes.forEach(n => {
+                    clampNodeToBounds(n);
+                });
+            }
+            const enforceGroupStack = (group) => {
+                const groupNodes = nodes
+                    .filter(n => n.group === group)
+                    .sort((a, b) => (a.y ?? minCenterY) - (b.y ?? minCenterY));
+                for (let i = 1; i < groupNodes.length; i++) {
+                    const prevY = groupNodes[i - 1].y ?? minCenterY;
+                    const minAllowed = prevY + rowGap * 0.92;
+                    if ((groupNodes[i].y ?? minCenterY) < minAllowed) {
+                        groupNodes[i].y = minAllowed;
+                    }
+                }
+            };
+            enforceGroupStack('p1');
+            enforceGroupStack('shared');
+            enforceGroupStack('p2');
+            nodes.forEach(n => {
+                clampNodeToBounds(n);
+                n.originalFx = n.x;
+                n.originalFy = n.y;
+            });
+            sim.force('xBound', null);
+            sim.force('yTargetSeed', null);
+            sim.force('crossAlign', null);
+            sim.force('xTarget', forceX(d => d.originalFx ?? d.x ?? 0)
+                .strength(d => d.group === 'shared' ? 0.16 : 0.075));
+            sim.force('yTarget', forceY(d => d.originalFy ?? d.y ?? 0).strength(0.085));
+            this.simulation = sim;
+            this.ngZone.run(() => {
+                this.forceNodes = [...nodes];
+                this.forceLinks = links;
+                const maxBottom = Math.max(...nodes.map(n => (n.y ?? 0) + chipHalfH));
+                this.forceCanvasHeight = Math.ceil(Math.min(maxBottom + canvasPad, availableHeight));
+                this.cdr.detectChanges();
+            });
+            sim.on('tick', () => {
+                this.ngZone.run(() => {
+                    nodes.forEach(n => {
+                        clampNodeToBounds(n);
+                    });
+                    this.forceNodes = [...nodes];
+                    const maxBottom = Math.max(...nodes.map(n => (n.y ?? 0) + chipHalfH));
+                    this.forceCanvasHeight = Math.ceil(Math.min(maxBottom + canvasPad, availableHeight));
+                    this.cdr.detectChanges();
+                });
+            });
+        });
+    }
+    selectTopSharedInterestsPerSide(person1Items, person2Items) {
+        const limit = ProfileComparisonLibComponent.MAX_RELEVANT_INTERESTS_PER_SIDE;
+        const sanitize = (items) => {
+            const seen = new Set();
+            const cleaned = [];
+            (items || []).forEach(item => {
+                const value = String(item ?? '').trim();
+                if (!value)
+                    return;
+                const key = value.toLowerCase();
+                if (seen.has(key))
+                    return;
+                seen.add(key);
+                cleaned.push(value);
+            });
+            return cleaned;
+        };
+        const p1 = sanitize(person1Items);
+        const p2 = sanitize(person2Items);
+        if (limit <= 0)
+            return { p1: [], p2: [] };
+        if (!p1.length || !p2.length) {
+            return {
+                p1: p1.slice(0, limit),
+                p2: p2.slice(0, limit),
+            };
+        }
+        const pairs = [];
+        p1.forEach(item1 => {
+            p2.forEach(item2 => {
+                pairs.push({ p1: item1, p2: item2, similarity: this.getSimilarity(item1, item2) });
+            });
+        });
+        pairs.sort((a, b) => b.similarity - a.similarity);
+        const pickedP1 = new Set();
+        const pickedP2 = new Set();
+        const orderedP1 = [];
+        const orderedP2 = [];
+        for (const pair of pairs) {
+            if (orderedP1.length >= limit && orderedP2.length >= limit)
+                break;
+            const canAddP1 = !pickedP1.has(pair.p1) && orderedP1.length < limit;
+            const canAddP2 = !pickedP2.has(pair.p2) && orderedP2.length < limit;
+            if (!canAddP1 && !canAddP2)
+                continue;
+            if (canAddP1) {
+                pickedP1.add(pair.p1);
+                orderedP1.push(pair.p1);
+            }
+            if (canAddP2) {
+                pickedP2.add(pair.p2);
+                orderedP2.push(pair.p2);
+            }
+        }
+        const rankRemaining = (items, opposite, selected) => {
+            return items
+                .filter(item => !selected.has(item))
+                .map((item, index) => ({
+                item,
+                index,
+                score: Math.max(...opposite.map(other => this.getSimilarity(item, other)), 0),
+            }))
+                .sort((a, b) => (b.score - a.score) || (a.index - b.index))
+                .map(entry => entry.item);
+        };
+        rankRemaining(p1, p2, pickedP1).forEach(item => {
+            if (orderedP1.length >= limit)
+                return;
+            pickedP1.add(item);
+            orderedP1.push(item);
+        });
+        rankRemaining(p2, p1, pickedP2).forEach(item => {
+            if (orderedP2.length >= limit)
+                return;
+            pickedP2.add(item);
+            orderedP2.push(item);
+        });
+        return {
+            p1: orderedP1.slice(0, limit),
+            p2: orderedP2.slice(0, limit),
+        };
     }
     reorderInterestsByMatrix(p1List, p2List, centerList) {
         if (!this.matrixData)
@@ -2572,13 +3435,292 @@ 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.25", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", user1File: "user1File", user2File: "user2File", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges", person1Name: "person1Name", person2Name: "person2Name", imageProxyPath: "imageProxyPath" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\n      <g filter=\"url(#filter0_n_1_1753)\">\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\n      </g>\n      <defs>\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\n          </feComponentTransfer>\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\n          <feMerge result=\"effect1_noise_1_1753\">\n            <feMergeNode in=\"shape\"/>\n            <feMergeNode in=\"color1\"/>\n          </feMerge>\n        </filter>\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\n        </radialGradient>\n      </defs>\n    </svg>\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.top]=\"user1Top\"\n        [style.height]=\"user1Height\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.top]=\"user2Top\"\n        [style.height]=\"user2Height\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n    </div>\n    <div class=\"image-shade-overlay\"></div>\n\n  <!-- Frosted Glass Overlay Layer -->\n  <div class=\"overlay-container\">\n    <!-- Top Headers -->\n    <div class=\"header-label left\">{{ person1Name }}</div>\n    <div class=\"header-label center\">Shared</div>\n    <div class=\"header-label right\">{{ person2Name }}</div>\n\n    <!-- Chips Columns Grid -->\n    <div class=\"chips-grid\">\n      <!-- Person 1 Unique Interests -->\n      <div class=\"chips-column left\">\n        <ng-container *ngFor=\"let interest of getPerson1UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-a\" [style.margin-right.px]=\"getChipOffset(i, 'left')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Shared Interests (Center Column) -->\n      <div class=\"chips-column center\">\n        <ng-container *ngFor=\"let interest of centerItem; let i = index\">\n          <div *ngIf=\"interest !== 'empty'\" class=\"frosted-chip shared\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n          <div *ngIf=\"interest === 'empty'\" class=\"frosted-chip ghost-chip shared\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">&nbsp;</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Person 2 Unique Interests -->\n      <div class=\"chips-column right\">\n        <ng-container *ngFor=\"let interest of getPerson2UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-b\" [style.margin-left.px]=\"getChipOffset(i, 'right')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Bottom Actions -->\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:5%;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{right:5%;left:auto;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.chips-grid{position:absolute;inset:45px 0;display:flex;padding:0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.chips-column{flex:1;display:flex;flex-direction:column;gap:8px;padding:4px 10px;box-sizing:border-box}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{position:relative;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:scale(1.04);background:#ffffff29}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:20px!important;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:18px;font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:5%;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:5%;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0 4px;top:50px;bottom:50px;box-sizing:border-box}.chips-column{padding:2px}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:14px}}@media(max-width:480px){.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label{font-size:10px}.header-label{top:14px}.header-label.left{font-size:12px}.header-label.center{font-size:10px}.header-label.right{font-size:12px}}\n"], dependencies: [{ kind: "directive", type: i2_1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2_1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    onNodeMouseEnter(node) {
+        this.hoveredNode = node;
+    }
+    onNodeMouseLeave(node) {
+        this.hoveredNode = null;
+    }
+    onNodeClick(node, event) {
+        event.stopPropagation();
+        if (this.clickedNode === node) {
+            this.clickedNode = null;
+            this.updateAttractionForce(null);
+        }
+        else {
+            this.clickedNode = node;
+            this.updateAttractionForce(node);
+        }
+    }
+    onDocumentClick() {
+        this.clickedNode = null;
+        if (!this.isDragging) {
+            this.updateAttractionForce(null);
+        }
+    }
+    /**
+     * Installs (or removes) a custom d3 force that pulls every linked node toward
+     * the anchor, stopping at an orbit radius scaled by similarity:
+     *   highest-sim → MIN_ORBIT (touches anchor), lowest-sim → MAX_ORBIT.
+     *
+     * While active, the xTarget/yTarget restoring forces are muted so they don't
+     * fight the attraction. They are restored the moment attraction is cleared.
+     */
+    updateAttractionForce(anchorNode) {
+        if (!this.simulation)
+            return;
+        if (!anchorNode) {
+            this.simulation.force('attraction', null);
+            // Restore restoring forces so nodes spring back home
+            const xT = this.simulation.force('xTarget');
+            if (xT)
+                xT.strength(0.1);
+            const yT = this.simulation.force('yTarget');
+            if (yT)
+                yT.strength(0.1);
+            const col = this.simulation.force('collide');
+            if (col)
+                col.strength(1.0);
+            this.simulation.alphaTarget(0);
+            this.simulation.alpha(0.6).restart();
+            return;
+        }
+        // Collect connected node IDs and their similarity values
+        const linkSim = new Map();
+        this.forceLinks.forEach(link => {
+            const srcId = typeof link.source === 'object' ? link.source.id : link.source;
+            const tgtId = typeof link.target === 'object' ? link.target.id : link.target;
+            const sim = Number(link.similarity ?? link.strength ?? 0.5);
+            if (srcId === anchorNode.id)
+                linkSim.set(String(tgtId), sim);
+            if (tgtId === anchorNode.id)
+                linkSim.set(String(srcId), sim);
+        });
+        const simValues = Array.from(linkSim.values());
+        const maxSim = simValues.length ? Math.max(...simValues) : 1;
+        // Closest chip (highest sim) touches the anchor (36px ≈ one chip height).
+        // Others are spread tightly between 36–80px.
+        const MIN_ORBIT = 36; // px — highest-sim chip: touching
+        const MAX_ORBIT = 80; // px — lowest-sim chip: still very close
+        const PULL = 0.5; // strong pull — overcomes any residual forces
+        // Mute the forces that would fight the pull while attraction is active
+        const xT = this.simulation.force('xTarget');
+        if (xT)
+            xT.strength(0);
+        const yT = this.simulation.force('yTarget');
+        if (yT)
+            yT.strength(0);
+        const col = this.simulation.force('collide');
+        if (col)
+            col.strength(0.35); // keep slight chip separation while still allowing orbiting
+        const attractionForce = (alpha) => {
+            const ax = anchorNode.x ?? 0;
+            const ay = anchorNode.y ?? 0;
+            this.forceNodes.forEach(n => {
+                if (n.id === anchorNode.id)
+                    return;
+                const sim = linkSim.get(n.id);
+                if (sim === undefined)
+                    return; // not connected — leave untouched
+                const normalizedSim = maxSim > 0 ? sim / maxSim : 0;
+                const orbitDist = MIN_ORBIT + (MAX_ORBIT - MIN_ORBIT) * (1 - normalizedSim);
+                const dx = ax - (n.x ?? 0);
+                const dy = ay - (n.y ?? 0);
+                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                if (dist > orbitDist) {
+                    // Pull toward orbit boundary — proportional to gap remaining
+                    const factor = PULL * alpha * (dist - orbitDist) / dist;
+                    n.vx = (n.vx ?? 0) + dx * factor;
+                    n.vy = (n.vy ?? 0) + dy * factor;
+                }
+            });
+        };
+        this.simulation.force('attraction', attractionForce);
+        // alphaTarget 0.3 keeps alpha high so attraction stays strong indefinitely
+        this.simulation.alphaTarget(0.3).restart();
+    }
+    isNodeConnected(node) {
+        if (!this.activeNode)
+            return true;
+        if (this.activeNode === node)
+            return true;
+        return this.forceLinks.some(link => {
+            const srcId = (link.source && typeof link.source === 'object') ? link.source.id : link.source;
+            const tgtId = (link.target && typeof link.target === 'object') ? link.target.id : link.target;
+            return (srcId === this.activeNode.id && tgtId === node.id) ||
+                (tgtId === this.activeNode.id && srcId === node.id);
+        });
+    }
+    isLinkConnectedToActive(link) {
+        if (!this.activeNode)
+            return false;
+        const srcId = (link.source && typeof link.source === 'object') ? link.source.id : link.source;
+        const tgtId = (link.target && typeof link.target === 'object') ? link.target.id : link.target;
+        return srcId === this.activeNode.id || tgtId === this.activeNode.id;
+    }
+    /**
+     * Returns true if the link connects a p1 node to a p2 node (a direct left↔right match),
+     * as opposed to a connection involving a shared-pool chip.
+     */
+    isCrossGroupLink(link) {
+        const src = this.findNode(link.source);
+        const tgt = this.findNode(link.target);
+        if (!src || !tgt)
+            return false;
+        return (src.group === 'p1' && tgt.group === 'p2') ||
+            (src.group === 'p2' && tgt.group === 'p1');
+    }
+    /**
+     * All force links sorted so secondary (shared-chip) links render first and
+     * primary (p1↔p2 direct match) links render last — SVG paints last-child on top.
+     */
+    get sortedForceLinks() {
+        return [...this.forceLinks].sort((a, b) => (this.isCrossGroupLink(a) ? 1 : 0) - (this.isCrossGroupLink(b) ? 1 : 0));
+    }
+    getLinkSourceX(link) {
+        const node = this.findNode(link.source);
+        return node ? (node.x ?? 0) : 0;
+    }
+    getLinkSourceY(link) {
+        const node = this.findNode(link.source);
+        return node ? (node.y ?? 0) : 0;
+    }
+    getLinkTargetX(link) {
+        const node = this.findNode(link.target);
+        return node ? (node.x ?? 0) : 0;
+    }
+    getLinkTargetY(link) {
+        const node = this.findNode(link.target);
+        return node ? (node.y ?? 0) : 0;
+    }
+    findNode(ref) {
+        if (!ref)
+            return undefined;
+        const id = typeof ref === 'object' ? ref.id : ref;
+        return this.forceNodes.find(n => n.id === id);
+    }
+    onNodeDragStart(node, event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        event.stopPropagation();
+        this.draggedNode = node;
+        this.isDragging = true;
+        this.clickedNode = node;
+        const touchEvent = event;
+        const mouseEvent = event;
+        const isTouch = !!(touchEvent.touches && touchEvent.touches.length);
+        const clientX = isTouch ? touchEvent.touches[0].clientX : mouseEvent.clientX;
+        const clientY = isTouch ? touchEvent.touches[0].clientY : mouseEvent.clientY;
+        const rect = this.chipsGrid.nativeElement.getBoundingClientRect();
+        const scrollTop = this.chipsGrid.nativeElement.scrollTop;
+        const relX = clientX - rect.left;
+        const relY = clientY - rect.top + scrollTop;
+        const bounds = this.nodeDragBounds.get(node.id);
+        if (bounds) {
+            node.fx = Math.max(bounds.minX, Math.min(bounds.maxX, relX));
+            node.fy = Math.max(bounds.minY, Math.min(bounds.maxY, relY));
+        }
+        else {
+            node.fx = relX;
+            node.fy = relY;
+        }
+        // Restore interactive forces for dragging
+        if (this.simulation) {
+            const linkForce = this.simulation.force('link');
+            if (linkForce)
+                linkForce.strength((d) => d.strength * 0.6);
+            const collideForce = this.simulation.force('collide');
+            if (collideForce)
+                collideForce.strength(1.0);
+            const xTarget = this.simulation.force('xTarget');
+            if (xTarget)
+                xTarget.strength(0.08);
+            const yTarget = this.simulation.force('yTarget');
+            if (yTarget)
+                yTarget.strength(0.08);
+        }
+        // Pull connected chips toward the dragged node
+        this.updateAttractionForce(node);
+        // Wake up the simulation target to keep it highly active during drag
+        this.simulation.alphaTarget(0.3).restart();
+    }
+    onDocumentDragMove(event) {
+        if (!this.isDragging || !this.draggedNode)
+            return;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        const touchEvent = event;
+        const mouseEvent = event;
+        const isTouch = !!(touchEvent.touches && touchEvent.touches.length);
+        const clientX = isTouch ? touchEvent.touches[0].clientX : mouseEvent.clientX;
+        const clientY = isTouch ? touchEvent.touches[0].clientY : mouseEvent.clientY;
+        const rect = this.chipsGrid.nativeElement.getBoundingClientRect();
+        const scrollTop = this.chipsGrid.nativeElement.scrollTop;
+        // Clamp dragged position so chip can't go off-edge (same estimate used in layout pass).
+        const charWidth = this.chipFontSizePx * 0.53;
+        const halfW = (this.draggedNode.label.length * charWidth + this.chipPaddingXPx * 2) / 2;
+        const edgePad = 20;
+        const relX = clientX - rect.left;
+        const relY = clientY - rect.top + scrollTop;
+        const fallbackMinX = halfW + edgePad;
+        const fallbackMaxX = rect.width - halfW - edgePad;
+        const fallbackMinY = 30;
+        const fallbackMaxY = Math.max(fallbackMinY, this.forceCanvasHeight - 30);
+        const bounds = this.nodeDragBounds.get(this.draggedNode.id);
+        const minX = bounds?.minX ?? fallbackMinX;
+        const maxX = bounds?.maxX ?? fallbackMaxX;
+        const minY = bounds?.minY ?? fallbackMinY;
+        const maxY = bounds?.maxY ?? fallbackMaxY;
+        const clampedX = Math.max(minX, Math.min(maxX, relX));
+        const clampedY = Math.max(minY, Math.min(maxY, relY));
+        const anchorX = this.draggedNode.originalFx ?? clampedX;
+        const anchorY = this.draggedNode.originalFy ?? clampedY;
+        const xElasticity = this.draggedNode.group === 'shared' ? 0.62 : 0.72;
+        const yElasticity = this.draggedNode.group === 'shared' ? 0.58 : 0.68;
+        this.draggedNode.fx = anchorX + (clampedX - anchorX) * xElasticity;
+        this.draggedNode.fy = anchorY + (clampedY - anchorY) * yElasticity;
+        // Keep active force simulation running
+        this.simulation.alpha(0.3).restart();
+    }
+    onDocumentDragEnd() {
+        if (!this.isDragging || !this.draggedNode)
+            return;
+        // Release the node. Clear fx and fy so it is no longer pinned to the mouse
+        this.draggedNode.fx = undefined;
+        this.draggedNode.fy = undefined;
+        // Remove attraction so connected chips return home
+        this.simulation.force('attraction', null);
+        // Set other forces to 0 so all chips glide directly to their starting coordinates
+        if (this.simulation) {
+            const linkForce = this.simulation.force('link');
+            if (linkForce)
+                linkForce.strength(0);
+            const collideForce = this.simulation.force('collide');
+            if (collideForce)
+                collideForce.strength(0.92);
+            // Pull nodes smoothly and slowly back to their exact starting points
+            const xTarget = this.simulation.force('xTarget');
+            if (xTarget)
+                xTarget.strength(0.13);
+            const yTarget = this.simulation.force('yTarget');
+            if (yTarget)
+                yTarget.strength(0.13);
+        }
+        // Cool down simulation targets
+        this.simulation.alphaTarget(0);
+        this.simulation.alpha(0.6).restart();
+        this.draggedNode = null;
+        this.isDragging = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", user1File: "user1File", user2File: "user2File", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges", person1Name: "person1Name", person2Name: "person2Name", imageProxyPath: "imageProxyPath" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, host: { listeners: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick()", "document:mousemove": "onDocumentDragMove($event)", "document:touchmove": "onDocumentDragMove($event)", "document:mouseup": "onDocumentDragEnd()", "document:touchend": "onDocumentDragEnd()" } }, 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 }, { propertyName: "chipsGrid", first: true, predicate: ["chipsGrid"], 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 #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\r\n      <g filter=\"url(#filter0_n_1_1753)\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\r\n      </g>\r\n      <defs>\r\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" 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          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\r\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\r\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\r\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\r\n          </feComponentTransfer>\r\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\r\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\r\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\r\n          <feMerge result=\"effect1_noise_1_1753\">\r\n            <feMergeNode in=\"shape\"/>\r\n            <feMergeNode in=\"color1\"/>\r\n          </feMerge>\r\n        </filter>\r\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\r\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\r\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\r\n        </radialGradient>\r\n      </defs>\r\n    </svg>\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.top]=\"user1Top\"\r\n        [style.height]=\"user1Height\"\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.top]=\"user2Top\"\r\n        [style.height]=\"user2Height\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"image-shade-overlay\"></div>\r\n\r\n  <!-- Frosted Glass Overlay Layer -->\r\n  <div class=\"overlay-container\">\r\n    <!-- Top Headers \u2014 absolutely positioned overlays, exactly as original -->\r\n    <div class=\"header-label left\">{{ person1Name }}</div>\r\n    <div class=\"header-label center\">Shared</div>\r\n    <div class=\"header-label right\">{{ person2Name }}</div>\r\n\r\n    <!-- Force-directed chip canvas (scrollable) -->\r\n    <div class=\"chips-grid\" #chipsGrid>\r\n      <div class=\"force-canvas\" [style.height.px]=\"forceCanvasHeight\">\r\n        <!-- SVG Connections Layer -->\r\n        <svg class=\"connections-svg\" [style.height.px]=\"forceCanvasHeight\">\r\n          <line\r\n            *ngFor=\"let link of sortedForceLinks\"\r\n            [attr.x1]=\"getLinkSourceX(link)\"\r\n            [attr.y1]=\"getLinkSourceY(link)\"\r\n            [attr.x2]=\"getLinkTargetX(link)\"\r\n            [attr.y2]=\"getLinkTargetY(link)\"\r\n            class=\"connection-line\"\r\n            [class.active]=\"isLinkConnectedToActive(link)\"\r\n            [class.cross-group]=\"isCrossGroupLink(link)\"\r\n          ></line>\r\n        </svg>\r\n\r\n        <div\r\n          *ngFor=\"let node of forceNodes\"\r\n          class=\"frosted-chip\"\r\n          [class.person-a]=\"node.group === 'p1'\"\r\n          [class.shared]=\"node.group === 'shared'\"\r\n          [class.person-b]=\"node.group === 'p2'\"\r\n          [class.active]=\"activeNode === node\"\r\n          [class.dimmed]=\"activeNode && !isNodeConnected(node)\"\r\n          [style.left.px]=\"node.x\"\r\n          [style.top.px]=\"node.y\"\r\n          [style.padding]=\"chipPaddingYPx + 'px ' + chipPaddingXPx + 'px'\"\r\n          (mouseenter)=\"onNodeMouseEnter(node)\"\r\n          (mouseleave)=\"onNodeMouseLeave(node)\"\r\n          (click)=\"onNodeClick(node, $event)\"\r\n          (mousedown)=\"onNodeDragStart(node, $event)\"\r\n          (touchstart)=\"onNodeDragStart(node, $event)\"\r\n        >\r\n          <span\r\n            class=\"chip-label\"\r\n            [style.font-size.px]=\"chipFontSizePx\"\r\n            [style.line-height]=\"chipLineHeight\"\r\n          >{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Bottom Actions -->\r\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\r\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</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: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);--name-label-font-size: 14px}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:25%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{left:75%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.chips-grid{position:absolute;inset:45px 0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.force-canvas{position:relative;width:100%;box-sizing:border-box;min-height:120px}.connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}@keyframes lineGlow{0%{opacity:0;stroke-dashoffset:8}30%{opacity:.15}to{opacity:.6;stroke-dashoffset:0}}.connection-line{stroke:#fe3c72d1;stroke-width:1.5px;stroke-dasharray:4;opacity:0;pointer-events:none;transition:opacity .3s ease}.connection-line.active{animation:lineGlow .7s cubic-bezier(.4,0,.2,1) forwards}.frosted-chip{position:absolute;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .3s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2;border:1px solid rgba(255,255,255,.24);background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59,0 0 0 1px #0f172a38;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:translate(-50%,-50%) scale(1.04);background:#ffffff29;cursor:grab}.frosted-chip.active{background:#ffffff4d;box-shadow:0 0 15px #fe3c7261,inset 0 1.5px 2px #ffffff80,0 0 0 1px #ffffff52;transform:translate(-50%,-50%) scale(1.06);z-index:10;cursor:grabbing}.frosted-chip.active .chip-label{color:#fff!important}.frosted-chip.dimmed{opacity:.35}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:8px;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:var(--name-label-font-size);font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:8%;width:34%;text-align:left;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:8%;width:34%;text-align:right;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0;top:45px;bottom:50px;box-sizing:border-box}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:10px}}@media(max-width:480px){.overlay-container{--name-label-font-size: 12px}.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label,.header-label.center{font-size:10px}}\n"], dependencies: [{ kind: "directive", type: i2_1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2_1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\n      <g filter=\"url(#filter0_n_1_1753)\">\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\n      </g>\n      <defs>\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" color-interpolation-filters=\"sRGB\">\n          <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\n          </feComponentTransfer>\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\n          <feMerge result=\"effect1_noise_1_1753\">\n            <feMergeNode in=\"shape\"/>\n            <feMergeNode in=\"color1\"/>\n          </feMerge>\n        </filter>\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\n        </radialGradient>\n      </defs>\n    </svg>\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user1Image\"\n        alt=\"User 1\"\n        [style.transform]=\"user1Transform\"\n        [style.top]=\"user1Top\"\n        [style.height]=\"user1Height\"\n        [style.object-position]=\"user1ObjectPosition\"\n        (load)=\"onUserImageLoad(1, $event)\"\n      />\n    </div>\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\n      <img\n        [src]=\"user2Image\"\n        alt=\"User 2\"\n        [style.transform]=\"user2Transform\"\n        [style.top]=\"user2Top\"\n        [style.height]=\"user2Height\"\n        [style.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n    </div>\n    <div class=\"image-shade-overlay\"></div>\n\n  <!-- Frosted Glass Overlay Layer -->\n  <div class=\"overlay-container\">\n    <!-- Top Headers -->\n    <div class=\"header-label left\">{{ person1Name }}</div>\n    <div class=\"header-label center\">Shared</div>\n    <div class=\"header-label right\">{{ person2Name }}</div>\n\n    <!-- Chips Columns Grid -->\n    <div class=\"chips-grid\">\n      <!-- Person 1 Unique Interests -->\n      <div class=\"chips-column left\">\n        <ng-container *ngFor=\"let interest of getPerson1UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-a\" [style.margin-right.px]=\"getChipOffset(i, 'left')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Shared Interests (Center Column) -->\n      <div class=\"chips-column center\">\n        <ng-container *ngFor=\"let interest of centerItem; let i = index\">\n          <div *ngIf=\"interest !== 'empty'\" class=\"frosted-chip shared\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n          <div *ngIf=\"interest === 'empty'\" class=\"frosted-chip ghost-chip shared\" [style.margin-left.px]=\"getChipOffset(i, 'center')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">&nbsp;</span>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Person 2 Unique Interests -->\n      <div class=\"chips-column right\">\n        <ng-container *ngFor=\"let interest of getPerson2UniqueInterests(); let i = index\">\n          <div class=\"frosted-chip person-b\" [style.margin-left.px]=\"getChipOffset(i, 'right')\" [style.margin-top.px]=\"(i > 0 ? 4 : 0)\">\n            <span class=\"chip-label\">{{ interest }}</span>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Bottom Actions -->\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [":host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:5%;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{right:5%;left:auto;transform:none;font-size:14px;font-weight:400;color:#fffffff2}.chips-grid{position:absolute;inset:45px 0;display:flex;padding:0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.chips-column{flex:1;display:flex;flex-direction:column;gap:8px;padding:4px 10px;box-sizing:border-box}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{position:relative;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:scale(1.04);background:#ffffff29}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:20px!important;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:18px;font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:5%;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:5%;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0 4px;top:50px;bottom:50px;box-sizing:border-box}.chips-column{padding:2px}.chips-column.left{align-items:flex-end}.chips-column.center{align-items:center}.chips-column.right{align-items:flex-start}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:14px}}@media(max-width:480px){.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label{font-size:10px}.header-label{top:14px}.header-label.left{font-size:12px}.header-label.center{font-size:10px}.header-label.right{font-size:12px}}\n"] }]
-        }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+            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 #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <svg class=\"image-noise-overlay\" style=\"position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 320\" fill=\"none\" preserveAspectRatio=\"none\">\r\n      <g filter=\"url(#filter0_n_1_1753)\">\r\n        <rect width=\"100%\" height=\"100%\" fill=\"url(#paint0_radial_1_1753)\" fill-opacity=\"0.33\"/>\r\n      </g>\r\n      <defs>\r\n        <filter id=\"filter0_n_1_1753\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\" filterUnits=\"objectBoundingBox\" 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          <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.10869565606117249 0.10869565606117249\" stitchTiles=\"stitch\" numOctaves=\"3\" result=\"noise\" seed=\"7339\"/>\r\n          <feColorMatrix in=\"noise\" type=\"luminanceToAlpha\" result=\"alphaNoise\"/>\r\n          <feComponentTransfer in=\"alphaNoise\" result=\"coloredNoise1\">\r\n            <feFuncA type=\"discrete\" tableValues=\"0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 \"/>\r\n          </feComponentTransfer>\r\n          <feComposite operator=\"in\" in2=\"shape\" in=\"coloredNoise1\" result=\"noise1Clipped\"/>\r\n          <feFlood flood-color=\"rgba(0, 0, 0, 0.25)\" result=\"color1Flood\"/>\r\n          <feComposite operator=\"in\" in2=\"noise1Clipped\" in=\"color1Flood\" result=\"color1\"/>\r\n          <feMerge result=\"effect1_noise_1_1753\">\r\n            <feMergeNode in=\"shape\"/>\r\n            <feMergeNode in=\"color1\"/>\r\n          </feMerge>\r\n        </filter>\r\n        <radialGradient id=\"paint0_radial_1_1753\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\r\n          <stop offset=\"0%\" stop-opacity=\"0\"/>\r\n          <stop offset=\"100%\" stop-opacity=\"0.25\"/>\r\n        </radialGradient>\r\n      </defs>\r\n    </svg>\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.top]=\"user1Top\"\r\n        [style.height]=\"user1Height\"\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.top]=\"user2Top\"\r\n        [style.height]=\"user2Height\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n    </div>\r\n    <div class=\"image-shade-overlay\"></div>\r\n\r\n  <!-- Frosted Glass Overlay Layer -->\r\n  <div class=\"overlay-container\">\r\n    <!-- Top Headers \u2014 absolutely positioned overlays, exactly as original -->\r\n    <div class=\"header-label left\">{{ person1Name }}</div>\r\n    <div class=\"header-label center\">Shared</div>\r\n    <div class=\"header-label right\">{{ person2Name }}</div>\r\n\r\n    <!-- Force-directed chip canvas (scrollable) -->\r\n    <div class=\"chips-grid\" #chipsGrid>\r\n      <div class=\"force-canvas\" [style.height.px]=\"forceCanvasHeight\">\r\n        <!-- SVG Connections Layer -->\r\n        <svg class=\"connections-svg\" [style.height.px]=\"forceCanvasHeight\">\r\n          <line\r\n            *ngFor=\"let link of sortedForceLinks\"\r\n            [attr.x1]=\"getLinkSourceX(link)\"\r\n            [attr.y1]=\"getLinkSourceY(link)\"\r\n            [attr.x2]=\"getLinkTargetX(link)\"\r\n            [attr.y2]=\"getLinkTargetY(link)\"\r\n            class=\"connection-line\"\r\n            [class.active]=\"isLinkConnectedToActive(link)\"\r\n            [class.cross-group]=\"isCrossGroupLink(link)\"\r\n          ></line>\r\n        </svg>\r\n\r\n        <div\r\n          *ngFor=\"let node of forceNodes\"\r\n          class=\"frosted-chip\"\r\n          [class.person-a]=\"node.group === 'p1'\"\r\n          [class.shared]=\"node.group === 'shared'\"\r\n          [class.person-b]=\"node.group === 'p2'\"\r\n          [class.active]=\"activeNode === node\"\r\n          [class.dimmed]=\"activeNode && !isNodeConnected(node)\"\r\n          [style.left.px]=\"node.x\"\r\n          [style.top.px]=\"node.y\"\r\n          [style.padding]=\"chipPaddingYPx + 'px ' + chipPaddingXPx + 'px'\"\r\n          (mouseenter)=\"onNodeMouseEnter(node)\"\r\n          (mouseleave)=\"onNodeMouseLeave(node)\"\r\n          (click)=\"onNodeClick(node, $event)\"\r\n          (mousedown)=\"onNodeDragStart(node, $event)\"\r\n          (touchstart)=\"onNodeDragStart(node, $event)\"\r\n        >\r\n          <span\r\n            class=\"chip-label\"\r\n            [style.font-size.px]=\"chipFontSizePx\"\r\n            [style.line-height]=\"chipLineHeight\"\r\n          >{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Bottom Actions -->\r\n    <div class=\"view-profile left\" (click)=\"onViewProfile('left')\">View Profile</div>\r\n    <div class=\"view-profile right\" (click)=\"onViewProfile('right')\">View Profile</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: ["@charset \"UTF-8\";:host{display:block;width:100%;max-width:100%;overflow-x:hidden!important;box-sizing:border-box!important}.profile-img.left{position:absolute;top:0;bottom:0;left:0;width:58%;height:100%;margin:0;z-index:1;-webkit-mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%);mask-image:linear-gradient(to right,black 0%,black 45%,transparent 92%)}.profile-img.right{position:absolute;inset:0 0 0 auto;width:58%;height:100%;margin:0;z-index:2;-webkit-mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%);mask-image:linear-gradient(to right,transparent 8%,black 55%,black 100%)}@media(min-width:768px){.profile-img.left{width:65%;-webkit-mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%);mask-image:linear-gradient(to right,black 0%,black 40%,transparent 90%)}.profile-img.right{width:65%;-webkit-mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%);mask-image:linear-gradient(to right,transparent 10%,black 60%,black 100%)}}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:100%;max-width:768px;margin:0 auto;overflow:hidden;position:relative;border-radius:12px}.profile-flex{display:flex;width:100%;height:440px;overflow:hidden;background:transparent;gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 18%,black 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.profile-flex .image-shade-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 40%,rgba(41,37,45,.25) 100%)}.profile-flex .image-noise-overlay{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;pointer-events:none;overflow:hidden;z-index:0}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{height:100%;position:relative;flex-shrink:0;background:transparent;margin:0;padding:0;left:0;top:0;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:1;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.overlay-container{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;overflow:hidden;background:#29252da6;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);--name-label-font-size: 14px}.header-label{position:absolute;top:20px;font-family:Gilroy,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none}.header-label.left{left:25%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.header-label.center{left:50%;transform:translate(-50%);font-size:12px;font-weight:400;color:#fffc;letter-spacing:0}.header-label.right{left:75%;transform:translate(-50%);font-size:var(--name-label-font-size);font-weight:400;color:#fffffff2;text-align:center}.chips-grid{position:absolute;inset:45px 0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;box-sizing:border-box}.chips-grid::-webkit-scrollbar{display:none}.force-canvas{position:relative;width:100%;box-sizing:border-box;min-height:120px}.connections-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}@keyframes lineGlow{0%{opacity:0;stroke-dashoffset:8}30%{opacity:.15}to{opacity:.6;stroke-dashoffset:0}}.connection-line{stroke:#fe3c72d1;stroke-width:1.5px;stroke-dasharray:4;opacity:0;pointer-events:none;transition:opacity .3s ease}.connection-line.active{animation:lineGlow .7s cubic-bezier(.4,0,.2,1) forwards}.frosted-chip{position:absolute;cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .3s ease;flex-shrink:0;padding:6px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);z-index:2;border:1px solid rgba(255,255,255,.24);background:#ffffff30;box-shadow:inset 0 1.5px 2px #ffffff59,0 0 0 1px #0f172a38;backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}.frosted-chip:hover{transform:translate(-50%,-50%) scale(1.04);background:#ffffff29;cursor:grab}.frosted-chip.active{background:#ffffff4d;box-shadow:0 0 15px #fe3c7261,inset 0 1.5px 2px #ffffff80,0 0 0 1px #ffffff52;transform:translate(-50%,-50%) scale(1.06);z-index:10;cursor:grabbing}.frosted-chip.active .chip-label{color:#fff!important}.frosted-chip.dimmed{opacity:.35}.frosted-chip .chip-label{position:relative;color:#a8a8a8;text-align:center;font-family:Gilroy,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:-.01em;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:1}.ghost-chip{visibility:hidden!important;pointer-events:none!important}.view-profile{position:absolute;bottom:8px;color:#ffffff80;text-shadow:0 2px 4.2px #000;font-family:Calistoga,serif;font-size:var(--name-label-font-size);font-style:normal;font-weight:400;line-height:normal;cursor:pointer;pointer-events:auto;transition:opacity .2s ease,transform .2s ease}.view-profile:hover{opacity:.85}.view-profile.left{left:8%;width:34%;text-align:left;transform:none}.view-profile.left:hover{transform:translateY(-2px)}.view-profile.right{right:8%;width:34%;text-align:right;left:auto;transform:none}.view-profile.right:hover{transform:translateY(-2px)}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:absolute;inset:0;width:100%;height:100%;background:#00000040;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:auto}.loading-spinner{width:44px;height:44px;border:3.5px solid rgba(255,255,255,.25);border-top:3.5px solid #ffffff;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 15px #fff3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:14px;font-weight:500;color:#ffffffd9;letter-spacing:.02em}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}@media(max-width:1023px){.profile-screen{max-width:640px}.profile-flex{height:400px}.profile-img{height:550px}}@media(max-width:767px){.profile-screen,.profile-flex,.overlay-container{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.profile-screen{border-radius:0}.profile-flex{height:360px}.profile-img{height:510px}.chips-grid{width:100%;max-width:100%;padding:0;top:45px;bottom:50px;box-sizing:border-box}.frosted-chip{padding:4px 10px;max-width:100%;box-sizing:border-box}.frosted-chip .chip-label{font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.view-profile{bottom:10px}}@media(max-width:480px){.overlay-container{--name-label-font-size: 12px}.profile-flex{height:340px}.profile-img{height:480px}.frosted-chip{padding:3px 8px}.frosted-chip .chip-label,.header-label.center{font-size:10px}}\n"] }]
+        }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -2643,22 +3785,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }], shapeTextCenter: [{
                 type: ViewChild,
                 args: ['shapeTextCenter']
+            }], chipsGrid: [{
+                type: ViewChild,
+                args: ['chipsGrid']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }], onDocumentDragMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:touchmove', ['$event']]
+            }], onDocumentDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }, {
+                type: HostListener,
+                args: ['document:touchend']
             }] } });
 
 class ProfileComparisonLibModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, declarations: [ProfileComparisonLibComponent], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, providers: [
             ProfileComparisonBackendService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComparisonLibModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [