@naniteninja/profile-comparison-lib 1.0.3 → 1.0.4

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

@@ -1,24 +1,54 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
-import { switchMap, map, catchError, shareReplay, tap as tap$1 } from 'rxjs/operators';
-import { from, throwError, of, forkJoin, defer, switchMap as switchMap$1, map as map$1, Observable, BehaviorSubject, tap, retryWhen, concatMap, timer, catchError as catchError$1 } from 'rxjs';
-import * as use from '@tensorflow-models/universal-sentence-encoder';
-import '@tensorflow/tfjs';
+import { InjectionToken, Injectable, Optional, Inject, inject, EventEmitter, ViewChild, Output, Input, Component, NgModule } from '@angular/core';
+import { switchMap as switchMap$1, map as map$1, catchError, tap as tap$1 } from 'rxjs/operators';
+import { from, switchMap, map, of, Observable, BehaviorSubject, throwError, tap, retryWhen, concatMap, timer, forkJoin, catchError as catchError$1 } from 'rxjs';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+/** Backend mode for the profile comparison component. */
+var BackendMode;
+(function (BackendMode) {
+    /** Use the real deployed backend (default). */
+    BackendMode[BackendMode["Real"] = 0] = "Real";
+    /** Use a local mock server at localhost:3000. */
+    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',
+};
 /**
- * When provided, ProfileService and OpenAIEmbeddingService call this backend base URL
- * (e.g. 'http://localhost:3000/api') for all profile/embedding endpoints instead of
- * calling external APIs directly with keys. Can be a string or a getter function for runtime toggle.
- * When not provided or getter returns null, the lib uses the direct path with keys.
+ * Legacy injection token for the backend base URL.
+ * Prefer using the [backendMode] or [backendUrl] @Input on the component instead.
+ * Kept for backward compatibility — lowest priority when resolving the URL.
  */
 const PROFILE_COMPARISON_API_BASE_URL = new InjectionToken('PROFILE_COMPARISON_API_BASE_URL');
 /** Optional getter: when true, lib and backend service log steps to console for diagnosis. */
 const PROFILE_COMPARISON_VERBOSE_LOGGING = new InjectionToken('PROFILE_COMPARISON_VERBOSE_LOGGING');
+/**
+ * Resolves the active backend URL from inputs, with fallback to injection token.
+ *
+ * Priority:
+ * 1. Explicit backendUrl (custom URL string)
+ * 2. BackendMode enum (Real or Mock)
+ * 3. Legacy PROFILE_COMPARISON_API_BASE_URL token
+ */
+function resolveBackendUrl(backendUrl, backendMode, legacyTokenUrl) {
+    if (backendUrl != null && backendUrl.trim().length > 0) {
+        return backendUrl.trim();
+    }
+    const modeUrl = BACKEND_MODE_URLS[backendMode];
+    if (modeUrl) {
+        return modeUrl;
+    }
+    if (legacyTokenUrl != null && legacyTokenUrl.trim().length > 0) {
+        return legacyTokenUrl.trim();
+    }
+    return null;
+}
 
 const DB_NAME = 'profile-comparison-cache';
 const DB_VERSION = 1;
@@ -180,780 +210,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class EmbeddingService {
-    model$ = null;
-    // Get embedding for a single text (returns Observable)
-    getEmbedding(text) {
-        return this.loadModel().pipe(switchMap((model) => from(model.embed([text]))), switchMap((embeddings) => {
-            const t2d = embeddings;
-            return from(t2d.array()).pipe(map((arr) => {
-                t2d.dispose();
-                return Float32Array.from(arr[0]);
-            }));
-        }), catchError((err) => throwError(() => new Error('Model failed to load or embed: ' + err))));
-    }
-    /**
-     * Group-align two lists based on semantic similarity, allowing one-to-many relationships.
-     *
-     * Design goals:
-     * - Semantic relevance takes priority over original order or spacing.
-     * - Each term in listB is assigned to the single most similar anchor in listA (if above threshold).
-     * - For an anchor in listA with multiple highly related listB terms, they are emitted as consecutive rows:
-     *   [A, B1], ['-', B2], ['-', B3], ... so they render adjacently and remain visually connected.
-     * - Low-similarity/unassigned terms from either side are appended at the end and never break groups.
-     */
-    groupAlignLists(listA, listB, threshold = 0.25, preserveLeftOrder = true, exclusivityMargin = 0.06, leftCohesion = 0.23) {
-        // Short-circuit simple cases
-        if ((!listA || listA.length === 0) && (!listB || listB.length === 0)) {
-            return of([]);
-        }
-        if (!listA || listA.length === 0) {
-            return of(listB.map((b) => ({ left: '-', right: b, score: 0 })));
-        }
-        if (!listB || listB.length === 0) {
-            return of(listA.map((a) => ({ left: a, right: '-', score: 0 })));
-        }
-        return this.loadModel().pipe(switchMap((model) => forkJoin([
-            from(model.embed(listA)),
-            from(model.embed(listB))
-        ]).pipe(switchMap(([tA, tB]) => {
-            return forkJoin([from(tA.array()), from(tB.array())]).pipe(map((tensorArrays) => {
-                const [arrA, arrB] = tensorArrays;
-                // Dispose tensors to avoid memory leaks
-                tA.dispose();
-                tB.dispose();
-                const aCount = listA.length;
-                const bCount = listB.length;
-                // Pre-convert to Float32Array for faster cosine computations
-                const vecA = new Array(aCount);
-                const vecB = new Array(bCount);
-                for (let i = 0; i < aCount; i++)
-                    vecA[i] = Float32Array.from(arrA[i]);
-                for (let j = 0; j < bCount; j++)
-                    vecB[j] = Float32Array.from(arrB[j]);
-                // Build full cross-list similarity matrix S[i][j] = sim(A_i, B_j)
-                const S = new Array(aCount);
-                for (let i = 0; i < aCount; i++) {
-                    const row = new Array(bCount);
-                    for (let j = 0; j < bCount; j++) {
-                        const emb = this.cosineSimilarity(vecA[i], vecB[j]);
-                        const lex = this.computeLexicalBoost(listA[i], listB[j]);
-                        // Apply domain gating to prevent mismatched category-vs-activity alignments
-                        const cap = this.domainCompatibilityCap(listA[i], listB[j]);
-                        row[j] = Math.min(Math.max(emb, lex), cap);
-                    }
-                    S[i] = row;
-                }
-                // Build within-list similarity for A (A↔A) to allow left-side extras to attach to cohesive anchors.
-                // We use the same hybrid semantic/lexical metric.
-                const SAA = new Array(aCount);
-                for (let i = 0; i < aCount; i++) {
-                    const rowAA = new Array(aCount);
-                    for (let k = 0; k < aCount; k++) {
-                        if (i === k) {
-                            rowAA[k] = 1; // self
-                        }
-                        else {
-                            const embAA = this.cosineSimilarity(vecA[i], vecA[k]);
-                            const lexAA = this.computeLexicalBoost(listA[i], listA[k]);
-                            rowAA[k] = Math.max(embAA, lexAA);
-                        }
-                    }
-                    SAA[i] = rowAA;
-                }
-                // Build thresholded neighborhoods
-                const neighborsA = new Map();
-                const neighborsB = new Map();
-                for (let i = 0; i < aCount; i++) {
-                    const row = [];
-                    for (let j = 0; j < bCount; j++) {
-                        const s = S[i][j];
-                        if (s >= threshold) {
-                            row.push({ j, score: s });
-                            const rev = neighborsB.get(j) || [];
-                            rev.push({ i, score: s });
-                            neighborsB.set(j, rev);
-                        }
-                    }
-                    // sort descending for deterministic preference lists
-                    row.sort((a, b) => b.score - a.score);
-                    if (row.length)
-                        neighborsA.set(i, row);
-                }
-                // Identify exclusive vs ambiguous B nodes
-                const exclusiveForA = new Map();
-                const ambiguousB = [];
-                const unassignedB = [];
-                for (let j = 0; j < bCount; j++) {
-                    const list = (neighborsB.get(j) || []).sort((a, b) => b.score - a.score);
-                    if (list.length === 0) {
-                        unassignedB.push(j);
-                    }
-                    else if (list.length === 1) {
-                        const i = list[0].i;
-                        const arr = exclusiveForA.get(i) || [];
-                        arr.push({ j, score: list[0].score });
-                        exclusiveForA.set(i, arr);
-                    }
-                    else {
-                        // If best is significantly better than second-best, treat as exclusive to best
-                        const best = list[0];
-                        const second = list[1];
-                        if (best.score - second.score >= exclusivityMargin) {
-                            const arr = exclusiveForA.get(best.i) || [];
-                            arr.push({ j, score: best.score });
-                            exclusiveForA.set(best.i, arr);
-                        }
-                        else {
-                            ambiguousB.push(j);
-                        }
-                    }
-                }
-                // A-side exclusivity: if an anchor A has a clearly dominant best B, prefer that exclusive pairing.
-                const bOwner = new Map();
-                for (const [i, arr] of exclusiveForA.entries()) {
-                    for (const x of arr) {
-                        const ex = bOwner.get(x.j);
-                        if (!ex || x.score > ex.score)
-                            bOwner.set(x.j, { i, score: x.score });
-                    }
-                }
-                const ambSetForA = new Set(ambiguousB);
-                for (let i = 0; i < aCount; i++) {
-                    const list = (neighborsA.get(i) || [])
-                        .slice()
-                        .sort((a, b) => b.score - a.score);
-                    if (!list.length)
-                        continue;
-                    const top = list[0];
-                    const second = list[1];
-                    const hasClearLead = !second || top.score - second.score >= exclusivityMargin;
-                    if (top.score >= threshold && hasClearLead) {
-                        const current = bOwner.get(top.j);
-                        if (!current || top.score > current.score + 1e-6) {
-                            // Reassign this B exclusively to A=i
-                            // Remove from any previous exclusiveForA groups
-                            for (const [ai, arr] of exclusiveForA.entries()) {
-                                exclusiveForA.set(ai, arr.filter((x) => x.j !== top.j));
-                            }
-                            const arr = exclusiveForA.get(i) || [];
-                            if (!arr.some((x) => x.j === top.j))
-                                arr.push({ j: top.j, score: top.score });
-                            arr.sort((u, v) => v.score - u.score);
-                            exclusiveForA.set(i, arr);
-                            bOwner.set(top.j, { i, score: top.score });
-                            ambSetForA.delete(top.j);
-                        }
-                    }
-                }
-                ambiguousB.splice(0, ambiguousB.length, ...Array.from(ambSetForA.values()));
-                // Mutual-best pairing stage (within small tolerance) to prioritize exclusive high-similarity pairs
-                const mutualTolerance = 0.03;
-                const bestBForA = new Array(aCount);
-                for (let i = 0; i < aCount; i++) {
-                    let bBest = -1;
-                    let bBestScore = -Infinity;
-                    for (let j = 0; j < bCount; j++) {
-                        const s = S[i][j];
-                        if (s > bBestScore) {
-                            bBestScore = s;
-                            bBest = j;
-                        }
-                    }
-                    bestBForA[i] = { j: bBest, score: bBestScore };
-                }
-                const bestAForB = new Array(bCount);
-                for (let j = 0; j < bCount; j++) {
-                    let aBest = -1;
-                    let aBestScore = -Infinity;
-                    for (let i = 0; i < aCount; i++) {
-                        const s = S[i][j];
-                        if (s > aBestScore) {
-                            aBestScore = s;
-                            aBest = i;
-                        }
-                    }
-                    bestAForB[j] = { i: aBest, score: aBestScore };
-                }
-                // Promote mutual-best pairs to exclusive, removing from ambiguous list if present
-                const ambSet = new Set(ambiguousB);
-                for (let i = 0; i < aCount; i++) {
-                    const b = bestBForA[i].j;
-                    if (b >= 0 && S[i][b] >= threshold) {
-                        const a = bestAForB[b].i;
-                        const score = S[i][b];
-                        // within tolerance of best on both sides
-                        const isWithinA = score >= bestBForA[i].score - mutualTolerance;
-                        const isWithinB = score >= bestAForB[b].score - mutualTolerance;
-                        if (a === i && isWithinA && isWithinB) {
-                            // Remove from any previous exclusive lists under other anchors
-                            for (const [ai, arr] of exclusiveForA.entries()) {
-                                exclusiveForA.set(ai, arr.filter((x) => x.j !== b));
-                            }
-                            // Add as exclusive to this anchor
-                            const arr = exclusiveForA.get(i) || [];
-                            // Avoid duplicate insert
-                            if (!arr.some((x) => x.j === b)) {
-                                arr.push({ j: b, score });
-                                arr.sort((u, v) => v.score - u.score);
-                                exclusiveForA.set(i, arr);
-                            }
-                            // Remove from ambiguous set
-                            ambSet.delete(b);
-                        }
-                    }
-                }
-                ambiguousB.splice(0, ambiguousB.length, ...Array.from(ambSet.values()));
-                // Build symmetric anchor heads from mutual-best pairs (above threshold)
-                const anchorHeads = new Map(); // A_i -> head B_j
-                for (let i = 0; i < aCount; i++) {
-                    const b = bestBForA[i].j;
-                    if (b >= 0) {
-                        const score = S[i][b];
-                        const isWithinA = score >= bestBForA[i].score - mutualTolerance;
-                        const isWithinB = score >= bestAForB[b].score - mutualTolerance;
-                        if (bestAForB[b].i === i &&
-                            score >= threshold &&
-                            isWithinA &&
-                            isWithinB) {
-                            anchorHeads.set(i, b);
-                        }
-                    }
-                }
-                // Resolve ambiguous many-to-many by B-centric greedy assignment:
-                // each ambiguous B chooses its single most similar A (enables one-to-many on A side).
-                const matchedAmbigForA = new Map();
-                for (const j of ambiguousB) {
-                    let bestI = -1;
-                    let bestScore = -Infinity;
-                    for (let i = 0; i < aCount; i++) {
-                        const s = S[i][j];
-                        if (s > bestScore) {
-                            bestScore = s;
-                            bestI = i;
-                        }
-                    }
-                    if (bestI >= 0 && bestScore >= threshold) {
-                        const arr = matchedAmbigForA.get(bestI) || [];
-                        arr.push({ j, score: bestScore });
-                        matchedAmbigForA.set(bestI, arr);
-                    }
-                }
-                // Merge exclusive and matched ambiguous into final assignments per A
-                const assignedToA = new Map();
-                for (let i = 0; i < aCount; i++) {
-                    const list = [];
-                    const ex = exclusiveForA.get(i) || [];
-                    for (const x of ex)
-                        list.push(x);
-                    const amb = matchedAmbigForA.get(i) || [];
-                    for (const x of amb)
-                        list.push(x);
-                    if (list.length) {
-                        list.sort((a, b) => b.score - a.score);
-                        assignedToA.set(i, list);
-                    }
-                }
-                // Promote anchors for left items that have strong assigned matches even if
-                // they were not mutual-best. This guarantees group creation around
-                // semantically coherent anchors such as Fish, so items like Clams attach there.
-                for (const [i, lst] of assignedToA.entries()) {
-                    if (!anchorHeads.has(i) && lst.length) {
-                        anchorHeads.set(i, lst[0].j); // head = top assigned right item
-                    }
-                }
-                // Track which B have been assigned (exclusive or ambiguous)
-                const assignedBSet = new Set();
-                for (const arr of assignedToA.values()) {
-                    for (const x of arr)
-                        assignedBSet.add(x.j);
-                }
-                // Also mark mutual-best anchor head B's as assigned so they are not appended as leftovers
-                // even if they weren't already in assignedToA for their group.
-                for (const [ai, headJ] of anchorHeads.entries()) {
-                    assignedBSet.add(headJ);
-                }
-                // Any B not assigned (and not a head) goes to the bottom unassigned list
-                const leftoverB = [];
-                for (let j = 0; j < bCount; j++) {
-                    if (!assignedBSet.has(j))
-                        leftoverB.push(j);
-                }
-                // Determine ranking for each A_i.
-                // Priority 1: anchors with at least one assigned B (highly related) go to the TOP.
-                // Priority 2: among them, sort by descending top assigned similarity.
-                // Anchors with NO assignment are pushed to the BOTTOM and sorted by their best potential similarity.
-                const rankA = [];
-                for (let i = 0; i < aCount; i++) {
-                    const assigned = assignedToA.get(i) || [];
-                    let top = 0;
-                    if (assigned.length > 0) {
-                        top = assigned.reduce((m, x) => x.score > m ? x.score : m, 0);
-                    }
-                    else {
-                        // If nothing assigned, consider the best potential similarity (even if below threshold)
-                        let best = 0;
-                        for (let j = 0; j < bCount; j++)
-                            best = Math.max(best, S[i][j]);
-                        top = best;
-                    }
-                    rankA.push({
-                        i,
-                        score: top,
-                        hasAssignment: assigned.length > 0,
-                    });
-                }
-                rankA.sort((x, y) => Number(y.hasAssignment) - Number(x.hasAssignment) ||
-                    y.score - x.score);
-                // Within each group, sort assigned B by descending similarity to the anchor
-                for (const [i, list] of assignedToA.entries()) {
-                    list.sort((a, b) => b.score - a.score);
-                    assignedToA.set(i, list);
-                }
-                // Determine anchor groups strictly from symmetric mutual-best pairs
-                const anchorSet = new Set(anchorHeads.keys());
-                // Early-out: if no anchors (no cross-list matches above threshold),
-                // fall back to simple left-only rows followed by right-only rows
-                if (anchorSet.size === 0) {
-                    const rowsNoAnchors = [];
-                    for (let i = 0; i < aCount; i++)
-                        rowsNoAnchors.push({
-                            left: listA[i],
-                            right: '-',
-                            score: 0,
-                        });
-                    for (const j of leftoverB)
-                        rowsNoAnchors.push({
-                            left: '-',
-                            right: listB[j],
-                            score: 0,
-                        });
-                    return rowsNoAnchors;
-                }
-                // Map each B to its owning anchor A for quick lookup (based on assignedToA)
-                const ownerOfB = new Array(bCount).fill(-1);
-                for (const [ai, lst] of assignedToA.entries()) {
-                    for (const x of lst)
-                        ownerOfB[x.j] = ai;
-                }
-                const leftUsed = new Set();
-                // Mark anchors as used so they won't be re-assigned as extras
-                for (const ai of anchorSet.values())
-                    leftUsed.add(ai);
-                // Pre-bucket extras: group -> (right j within that group) -> extras[]
-                const extrasByGroup = new Map();
-                for (let k = 0; k < aCount; k++) {
-                    if (leftUsed.has(k))
-                        continue; // skip anchors
-                    let bestGroup = -1;
-                    let bestRightJ = -1;
-                    let bestScore = -Infinity;
-                    // Evaluate affinity against each anchor group
-                    for (const ai of anchorSet.values()) {
-                        const groupList = assignedToA.get(ai) || [];
-                        // Ensure the head B is present in the consideration list
-                        const headJ = anchorHeads.get(ai);
-                        const listWithHead = groupList.some((x) => x.j === headJ)
-                            ? groupList
-                            : [{ j: headJ, score: S[ai][headJ] }, ...groupList];
-                        // Best cross-list similarity to any right item under this anchor
-                        let localBestJ = -1;
-                        let localBestCross = -Infinity;
-                        for (const x of listWithHead) {
-                            const s = S[k][x.j];
-                            if (s > localBestCross) {
-                                localBestCross = s;
-                                localBestJ = x.j;
-                            }
-                        }
-                        // Within-list cohesion to the anchor left word
-                        const withinAA = SAA[k][ai];
-                        const combined = Math.max(localBestCross, withinAA);
-                        if (combined > bestScore) {
-                            bestScore = combined;
-                            bestGroup = ai;
-                            // Prefer the concrete right target when cross-list is stronger;
-                            // otherwise fall back to the group's top right assignment.
-                            bestRightJ =
-                                localBestCross >= withinAA ? localBestJ : headJ;
-                        }
-                    }
-                    // Attach as extra if cohesive enough to some group
-                    if (bestGroup >= 0 &&
-                        bestRightJ >= 0 &&
-                        bestScore >= leftCohesion) {
-                        let byRight = extrasByGroup.get(bestGroup);
-                        if (!byRight) {
-                            byRight = new Map();
-                            extrasByGroup.set(bestGroup, byRight);
-                        }
-                        const arr = byRight.get(bestRightJ) || [];
-                        arr.push({ k, jPref: bestRightJ, score: bestScore });
-                        byRight.set(bestRightJ, arr);
-                        leftUsed.add(k);
-                    }
-                }
-                // Build grouped rows with left extras rendered directly under the specific right item
-                // they most strongly match. This ensures highly related words appear exactly below their
-                // most similar counterpart on the other side.
-                const rows = [];
-                const anchorIndices = Array.from(anchorSet.values());
-                const orderIndices = preserveLeftOrder
-                    ? anchorIndices.sort((x, y) => x - y)
-                    : anchorIndices.sort((i1, i2) => {
-                        const j1 = anchorHeads.get(i1);
-                        const j2 = anchorHeads.get(i2);
-                        const diff = S[i2][j2] - S[i1][j1];
-                        if (Math.abs(diff) > 1e-9)
-                            return diff;
-                        // Side-invariant tie-breaker using symmetric pair key
-                        const key1 = [
-                            listA[i1].toLowerCase(),
-                            listB[j1].toLowerCase(),
-                        ]
-                            .sort()
-                            .join('|');
-                        const key2 = [
-                            listA[i2].toLowerCase(),
-                            listB[j2].toLowerCase(),
-                        ]
-                            .sort()
-                            .join('|');
-                        return key1.localeCompare(key2);
-                    });
-                for (const i of orderIndices) {
-                    const groupOrig = assignedToA.get(i) || [];
-                    const headJ = anchorHeads.get(i);
-                    // Build group with head first, then others by score
-                    const others = groupOrig
-                        .filter((x) => x.j !== headJ)
-                        .sort((a, b) => {
-                        const d = b.score - a.score;
-                        if (Math.abs(d) > 1e-9)
-                            return d;
-                        return listB[a.j]
-                            .toLowerCase()
-                            .localeCompare(listB[b.j].toLowerCase());
-                    });
-                    const group = [{ j: headJ, score: S[i][headJ] }, ...others];
-                    // First row uses the anchor head pair
-                    const first = group[0];
-                    rows.push({
-                        left: listA[i],
-                        right: listB[first.j],
-                        score: first.score,
-                    });
-                    // Render left extras that prefer this first right item
-                    const byRight = extrasByGroup.get(i);
-                    const extrasForFirst = (byRight && byRight.get(first.j)) || [];
-                    if (extrasForFirst.length) {
-                        extrasForFirst.sort((e1, e2) => {
-                            const s1 = Math.max(S[e1.k][first.j], SAA[e1.k][i]);
-                            const s2 = Math.max(S[e2.k][first.j], SAA[e2.k][i]);
-                            const d = s2 - s1;
-                            if (Math.abs(d) > 1e-9)
-                                return d;
-                            return listA[e1.k]
-                                .toLowerCase()
-                                .localeCompare(listA[e2.k].toLowerCase());
-                        });
-                        for (const ex of extrasForFirst) {
-                            rows.push({
-                                left: listA[ex.k],
-                                right: '-',
-                                score: Math.max(S[ex.k][first.j], SAA[ex.k][i]),
-                            });
-                        }
-                    }
-                    // Render remaining right items with their own left extras directly beneath
-                    for (let idx = 1; idx < group.length; idx++) {
-                        const g = group[idx];
-                        rows.push({ left: '-', right: listB[g.j], score: g.score });
-                        const extrasForJ = (byRight && byRight.get(g.j)) || [];
-                        if (extrasForJ.length) {
-                            extrasForJ.sort((e1, e2) => {
-                                const s1 = Math.max(S[e1.k][g.j], SAA[e1.k][i]);
-                                const s2 = Math.max(S[e2.k][g.j], SAA[e2.k][i]);
-                                const d = s2 - s1;
-                                if (Math.abs(d) > 1e-9)
-                                    return d;
-                                return listA[e1.k]
-                                    .toLowerCase()
-                                    .localeCompare(listA[e2.k].toLowerCase());
-                            });
-                            for (const ex of extrasForJ) {
-                                rows.push({
-                                    left: listA[ex.k],
-                                    right: '-',
-                                    score: Math.max(S[ex.k][g.j], SAA[ex.k][i]),
-                                });
-                            }
-                        }
-                    }
-                }
-                // Append leftover left items (not anchors and not attached as extras)
-                for (let i = 0; i < aCount; i++) {
-                    if (!anchorSet.has(i) && !leftUsed.has(i)) {
-                        rows.push({ left: listA[i], right: '-', score: 0 });
-                    }
-                }
-                // Append unassigned B at the end so they do not disrupt highly related groups
-                for (const j of leftoverB) {
-                    rows.push({ left: '-', right: listB[j], score: 0 });
-                }
-                return rows;
-            }));
-        }))), catchError((err) => throwError(() => new Error('Failed to create grouped alignment: ' + err))));
-    }
-    // Cosine similarity between two vectors
-    cosineSimilarity(a, b) {
-        let dot = 0, na = 0, nb = 0;
-        for (let i = 0; i < a.length; i++) {
-            dot += a[i] * b[i];
-            na += a[i] * a[i];
-            nb += b[i] * b[i];
-        }
-        return dot / (Math.sqrt(na) * Math.sqrt(nb) + 1e-12);
-    }
-    /**
-     * Align words in listA with their most semantically similar words in listB
-     *
-     * Algorithm:
-     * 1. Generate embeddings for all words in both lists using Universal Sentence Encoder
-     * 2. For each word in listA, compare its embedding with all words in listB
-     * 3. Find the word in listB with highest cosine similarity score
-     * 4. Return alignment results with similarity scores
-     *
-     * @param listA - Source list of words to align
-     * @param listB - Target list of words to find matches in
-     * @returns Observable of alignment results with word, alignedWith, score, and index
-     */
-    alignLists(listA, listB) {
-        return this.loadModel().pipe(
-        // Step 1: Generate embeddings for both word lists simultaneously
-        switchMap((model) => forkJoin([
-            from(model.embed(listA)),
-            from(model.embed(listB))
-        ]).pipe(
-        // Step 2: Convert tensor embeddings to JavaScript arrays
-        switchMap(([tA, tB]) => {
-            return forkJoin([from(tA.array()), from(tB.array())]).pipe(map((tensorArrays) => {
-                const [arrA, arrB] = tensorArrays;
-                // Clean up TensorFlow tensors to prevent memory leaks
-                tA.dispose();
-                tB.dispose();
-                // For each word in listA, find its best match in listB
-                const results = listA.map((wordA, i) => {
-                    // Get the embedding vector for current word from listA
-                    const vecA = Float32Array.from(arrA[i]);
-                    // Initialize variables to track the best match
-                    let bestScore = -Infinity;
-                    let bestMatch = null;
-                    let bestIndex = -1;
-                    // Compare current word from listA with all words in listB
-                    for (let j = 0; j < listB.length; j++) {
-                        // Get the embedding vector for current word from listB
-                        const vecB = Float32Array.from(arrB[j]);
-                        // Calculate semantic similarity using cosine similarity
-                        const score = this.cosineSimilarity(vecA, vecB);
-                        // Update best match if this similarity is higher
-                        if (score > bestScore) {
-                            bestScore = score;
-                            bestMatch = listB[j];
-                            bestIndex = j;
-                        }
-                    }
-                    // Return alignment result for this word
-                    return {
-                        word: wordA, // Original word from listA
-                        alignedWith: bestMatch, // Best matching word from listB
-                        score: bestScore, // Similarity score (0-1, higher is better)
-                        index: bestIndex, // Index of best match in listB
-                    };
-                });
-                // Return all alignment results
-                return results;
-            }));
-        }))), catchError((err) => throwError(() => new Error('Model not loaded or embedding failed: ' + err))));
-    }
-    /**
-     * Find best matching pairs between two lists above a similarity threshold
-     *
-     * @param listA - Source list of words
-     * @param listB - Target list of words to match against
-     * @param threshold - Minimum similarity score (0-1, default: 0.15)
-     * @returns Observable of word pairs with similarity scores
-     */
-    findBestMatchingPairs(listA, listB, threshold = 0.15) {
-        return this.alignLists(listA, listB).pipe(map((alignments) => {
-            const usedB = new Set();
-            const pairs = [];
-            // Sort by similarity score (highest first)
-            alignments.sort((a, b) => b.score - a.score);
-            // Debug logging for travel/journey matching
-            console.log('Embedding Service - All alignments:', alignments.map((alignment) => ({
-                word: alignment.word,
-                alignedWith: alignment.alignedWith,
-                score: alignment.score.toFixed(3),
-            })));
-            for (const alignment of alignments) {
-                if (alignment.score >= threshold && !usedB.has(alignment.index)) {
-                    pairs.push({
-                        wordA: alignment.word,
-                        wordB: alignment.alignedWith,
-                        score: alignment.score,
-                    });
-                    usedB.add(alignment.index);
-                    // Special logging for travel-related matches
-                    if (alignment.word.toLowerCase().includes('travel') ||
-                        alignment.word.toLowerCase().includes('journey') ||
-                        alignment.alignedWith.toLowerCase().includes('travel') ||
-                        alignment.alignedWith.toLowerCase().includes('journey')) {
-                        console.log('🎯 Travel/Journey Match Found:', {
-                            wordA: alignment.word,
-                            wordB: alignment.alignedWith,
-                            score: alignment.score.toFixed(3),
-                            threshold: threshold,
-                        });
-                    }
-                }
-            }
-            return pairs;
-        }), catchError((err) => throwError(() => new Error('Failed to find best matching pairs: ' + err))));
-    }
-    // Calculate similarity between two texts (returns Observable)
-    calculateSimilarity(primaryText, comparisonText) {
-        return this.getEmbedding(primaryText).pipe(switchMap((emb1) => this.getEmbedding(comparisonText).pipe(map((emb2) => {
-            const similarity = this.cosineSimilarity(emb1, emb2);
-            // Debug logging for travel/journey similarity
-            if (primaryText.toLowerCase().includes('travel') ||
-                primaryText.toLowerCase().includes('journey') ||
-                comparisonText.toLowerCase().includes('travel') ||
-                comparisonText.toLowerCase().includes('journey')) {
-                console.log('🔍 Travel/Journey Similarity:', {
-                    primaryText,
-                    comparisonText,
-                    similarity: similarity.toFixed(3),
-                });
-            }
-            return similarity;
-        }))), catchError((err) => throwError(() => new Error('Failed to calculate similarity: ' + err))));
-    }
-    // Test method to check specific word similarities (Observable only)
-    testWordSimilarity(word1, word2) {
-        return this.calculateSimilarity(word1, word2).pipe(map((similarity) => {
-            console.log(`📊 Similarity between "${word1}" and "${word2}": ${(similarity * 100).toFixed(1)}%`);
-        }), catchError((error) => {
-            console.error('Error testing word similarity:', error);
-            return of();
-        }));
-    }
-    // Private methods
-    // Domain compatibility cap to avoid mismatched category-versus-activity pairings.
-    // Example: "Fish" (food/animal noun) vs "Bird watching" (activity) should not align.
-    // Returns a cap in [0,1] representing the maximum allowed similarity for the pair.
-    // Values below the groupAlignLists() threshold (default 0.25) effectively block alignment.
-    domainCompatibilityCap(a, b) {
-        const norm = (s) => s
-            .toLowerCase()
-            .replace(/[_-]+/g, ' ')
-            .replace(/[^a-z\s]/g, ' ')
-            .replace(/\s+/g, ' ')
-            .trim();
-        const A = norm(a);
-        const B = norm(b);
-        const watching = /\b[a-z]+\s*watching\b|\bbirdwatching\b/;
-        const genericActivities = /\b(hiking|reading|painting|photography|gardening|blogging|writing|gaming|chess|puzzles|travel(?:ing|ling)?|programming|coding|language learning|pottery|clay\s*model(?:ing|ling))\b/;
-        const isActivity = (s) => watching.test(s) || genericActivities.test(s);
-        const foodAnimal = /\b(fish|sea\s*food|seafood|shell\s*fish|shellfish|clam|clams|mussel|mussels|oyster|oysters|scallop|scallops|shrimp|prawn|prawns|lobster|crab|meat|beef|pork|chicken|egg|eggs)\b/;
-        const isFoodAnimal = (s) => foodAnimal.test(s);
-        const aAct = isActivity(A);
-        const bAct = isActivity(B);
-        const aFood = isFoodAnimal(A);
-        const bFood = isFoodAnimal(B);
-        if ((aAct && bFood) || (bAct && aFood)) {
-            // Cap below default threshold so these pairs never form groups
-            return 0.2;
-        }
-        return 1.0;
-    }
-    // Lightweight lexical similarity booster to catch cases like "AI/ML" ↔ "AI machine learning"
-    // Uses token normalization + targeted synonym/expansion rules and token Jaccard.
-    computeLexicalBoost(a, b) {
-        const expand = (s) => {
-            let x = s.toLowerCase();
-            // Normalize separators
-            x = x.replace(/[_-]+/g, ' ');
-            // Targeted expansions
-            x = x.replace(/ai\s*\/\s*ml|ai\s*[- ]?ml/g, 'ai machine learning');
-            x = x.replace(/\bml\b/g, 'machine learning');
-            x = x.replace(/web\s*dev(elopment)?/g, 'web development');
-            // Domain expansions – culinary/food categories (to help cases like Fish ↔ Clams)
-            x = x.replace(/\bsea\s*food\b/g, 'seafood fish shellfish');
-            x = x.replace(/\bshell\s*fish\b/g, 'shellfish clams mussels oysters scallops seafood');
-            x = x.replace(/\bfish(es)?\b/g, 'fish seafood');
-            x = x.replace(/\bclam(s)?\b/g, 'clams shellfish seafood');
-            x = x.replace(/\bmussel(s)?\b/g, 'mussels shellfish seafood');
-            x = x.replace(/\boyster(s)?\b/g, 'oysters shellfish seafood');
-            x = x.replace(/\bscallop(s)?\b/g, 'scallops shellfish seafood');
-            x = x.replace(/\bshrimp(s)?\b/g, 'shrimp seafood');
-            x = x.replace(/\bprawn(s)?\b/g, 'prawns shrimp seafood');
-            x = x.replace(/\blobster(s)?\b/g, 'lobster seafood');
-            x = x.replace(/\bcrab(s)?\b/g, 'crab seafood');
-            x = x.replace(/ui\s*\/\s*ux|ui\s*[- ]?ux/g, 'ui ux design');
-            return x;
-        };
-        const normalize = (s) => {
-            const x = expand(s)
-                .replace(/[^a-z0-9\s]/g, ' ')
-                .replace(/\s+/g, ' ')
-                .trim();
-            return x;
-        };
-        const A = normalize(a);
-        const B = normalize(b);
-        if (!A || !B)
-            return 0;
-        // Strong containment boost (e.g., "ai machine learning" contains "machine learning")
-        if (A.includes(B) || B.includes(A)) {
-            return Math.max(0.75, Math.min(0.95, Math.max(A.length, B.length) > 12 ? 0.85 : 0.78));
-        }
-        const toTokens = (s) => s.split(' ').filter(Boolean);
-        const setFrom = (arr) => new Set(arr);
-        const tA = toTokens(A);
-        const tB = toTokens(B);
-        if (!tA.length || !tB.length)
-            return 0;
-        const sA = setFrom(tA);
-        const sB = setFrom(tB);
-        let inter = 0;
-        for (const t of sA)
-            if (sB.has(t))
-                inter++;
-        const union = sA.size + sB.size - inter;
-        const jaccard = union > 0 ? inter / union : 0;
-        // Small extra for sharing big tokens like "learning"/"development" with qualifiers
-        const longTokenBonus = Math.min(0.1, [...sA].filter((t) => t.length >= 6 && sB.has(t)).length * 0.03);
-        const score = Math.min(0.95, jaccard + longTokenBonus);
-        return score;
-    }
-    // Lazy load the model only once, as observable
-    loadModel() {
-        if (!this.model$) {
-            this.model$ = defer(() => from(use.load())).pipe(shareReplay(1));
-        }
-        return this.model$;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EmbeddingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class FileConversionService {
     static MIME_TYPE_JPEG = 'image/jpeg';
     static MIME_TYPE_PNG = 'image/png';
@@ -963,7 +219,7 @@ class FileConversionService {
     static FILE_EXTENSION_PNG = '.png';
     static FILE_EXTENSION_WEBP = '.webp';
     urlToFile(url, fileName, mimeType) {
-        return from(fetch(url)).pipe(switchMap$1(response => from(response.blob())), map$1(blob => new File([blob], fileName, { type: mimeType })));
+        return from(fetch(url)).pipe(switchMap(response => from(response.blob())), map(blob => new File([blob], fileName, { type: mimeType })));
     }
     isDataUrl(str) {
         return typeof str === 'string' && str.startsWith('data:');
@@ -1008,7 +264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class ImageCompressionService {
     compressImageFile(file, config, overrides = {}) {
         const cfg = { ...config, ...overrides };
-        return this.loadImageFromFile(file).pipe(switchMap$1((img) => {
+        return this.loadImageFromFile(file).pipe(switchMap((img) => {
             let width = img.naturalWidth || img.width;
             let height = img.naturalHeight || img.height;
             const scale = Math.min(cfg.maxWidth / width, cfg.maxHeight / height, 1);
@@ -1024,7 +280,7 @@ class ImageCompressionService {
             };
             const process = (w, h, q, attempts) => {
                 render(w, h);
-                return this.canvasToBlob(canvas, cfg.format, q).pipe(switchMap$1((blob) => {
+                return this.canvasToBlob(canvas, cfg.format, q).pipe(switchMap((blob) => {
                     if (blob.size > cfg.maxBytes && attempts < 25) {
                         if (q > cfg.qualityMin + 0.005) {
                             return process(w, h, Math.max(cfg.qualityMin, q - cfg.qualityStep), attempts + 1);
@@ -1040,10 +296,10 @@ class ImageCompressionService {
                     return of(blob);
                 }));
             };
-            return process(width, height, cfg.qualityStart, 0).pipe(switchMap$1((finalBlob) => {
+            return process(width, height, cfg.qualityStart, 0).pipe(switchMap((finalBlob) => {
                 const newName = this.renameFileForFormat(file.name, cfg.format);
                 const compressedFile = new File([finalBlob], newName, { type: cfg.format, lastModified: Date.now() });
-                return this.blobToDataURL(finalBlob).pipe(map$1((dataUrl) => ({ file: compressedFile, dataUrl })));
+                return this.blobToDataURL(finalBlob).pipe(map((dataUrl) => ({ file: compressedFile, dataUrl })));
             }));
         }));
     }
@@ -1228,7 +484,7 @@ class OpenAIEmbeddingService {
         if (validA.length === 0 && validB.length === 0)
             return of({ listA: [], listB: [] });
         const key = JSON.stringify({ a: validA, b: validB, v: 'spacer-v35' });
-        return from(this.loadSpacerCache()).pipe(switchMap(() => {
+        return from(this.loadSpacerCache()).pipe(switchMap$1(() => {
             if (this.spacerAlignmentCache.has(key)) {
                 console.log('Alignment cache hit');
                 return of(this.spacerAlignmentCache.get(key));
@@ -1240,7 +496,7 @@ class OpenAIEmbeddingService {
                     .post(url, { listA: validA, listB: validB }, {
                     headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
                 })
-                    .pipe(map((result) => {
+                    .pipe(map$1((result) => {
                     const finalResult = { listA: result.listA || [], listB: result.listB || [] };
                     this.spacerAlignmentCache.set(key, finalResult);
                     this.persistence.set(CachePersistenceService.STORE_OPENAI_SPACER, key, finalResult);
@@ -1362,7 +618,7 @@ class OpenAIEmbeddingService {
             temperature: 0.0, // Zero temperature for maximum determinism
             seed: 42 // Fixed seed for reproducibility
         };
-        return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
+        return this.http.post(this.API_URL, body, { headers }).pipe(map$1(response => {
             try {
                 const content = response.choices[0].message.content;
                 console.log('OpenAI LLM Output (getAlignedLists):', content);
@@ -1520,7 +776,7 @@ class OpenAIEmbeddingService {
             return of([]);
         const keyDirect = JSON.stringify({ a: validA, b: validB });
         const keyReverse = JSON.stringify({ a: validB, b: validA });
-        return from(this.loadAlignmentCache()).pipe(switchMap(() => {
+        return from(this.loadAlignmentCache()).pipe(switchMap$1(() => {
             if (this.alignmentCache.has(keyDirect)) {
                 console.log('Alignment cache hit (Direct)');
                 return of(this.alignmentCache.get(keyDirect).rows);
@@ -1589,7 +845,7 @@ class OpenAIEmbeddingService {
             temperature: 0.2
         };
         console.log('Sending single alignment request to OpenAI...');
-        return this.http.post(this.API_URL, body, { headers }).pipe(map(response => {
+        return this.http.post(this.API_URL, body, { headers }).pipe(map$1(response => {
             try {
                 const content = response.choices[0].message.content;
                 console.log('OpenAI LLM Output (groupAlignLists):', content);
@@ -1767,7 +1023,7 @@ class OpenAIEmbeddingService {
             return of(0);
         }
         const simKey = [a, b].sort().join('\0');
-        return from(this.loadSimilarityCache()).pipe(switchMap(() => {
+        return from(this.loadSimilarityCache()).pipe(switchMap$1(() => {
             if (this.similarityCache.has(simKey)) {
                 return of(this.similarityCache.get(simKey));
             }
@@ -1778,7 +1034,7 @@ class OpenAIEmbeddingService {
                     .post(url, { textA: a, textB: b }, {
                     headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
                 })
-                    .pipe(map((res) => {
+                    .pipe(map$1((res) => {
                     const similarity = res.similarity ?? 0;
                     this.similarityCache.set(simKey, similarity);
                     this.persistence.set(CachePersistenceService.STORE_OPENAI_SIMILARITY, simKey, similarity);
@@ -1797,7 +1053,7 @@ class OpenAIEmbeddingService {
                 model: 'text-embedding-3-small',
                 input: [a, b]
             };
-            return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map(res => {
+            return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map$1(res => {
                 const data = res?.data;
                 if (!Array.isArray(data) || data.length < 2) {
                     throw new Error('Invalid embeddings response from OpenAI');
@@ -1824,7 +1080,7 @@ class OpenAIEmbeddingService {
         if (!texts || texts.length === 0)
             return of([]);
         const embKey = JSON.stringify(texts);
-        return from(this.loadEmbeddingsCache()).pipe(switchMap(() => {
+        return from(this.loadEmbeddingsCache()).pipe(switchMap$1(() => {
             if (this.embeddingsCache.has(embKey)) {
                 return of(this.embeddingsCache.get(embKey));
             }
@@ -1835,7 +1091,7 @@ class OpenAIEmbeddingService {
                     .post(url, { input: texts }, {
                     headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
                 })
-                    .pipe(map((res) => {
+                    .pipe(map$1((res) => {
                     const result = (res.data || []).map((item) => item.embedding || []);
                     this.embeddingsCache.set(embKey, result);
                     this.persistence.set(CachePersistenceService.STORE_OPENAI_EMBEDDINGS, embKey, result);
@@ -1854,7 +1110,7 @@ class OpenAIEmbeddingService {
                 model: 'text-embedding-3-small',
                 input: texts
             };
-            return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map(res => {
+            return this.http.post(EMBEDDINGS_URL, body, { headers }).pipe(map$1(res => {
                 const data = res?.data;
                 if (!Array.isArray(data)) {
                     throw new Error('Invalid embeddings response from OpenAI');
@@ -2023,7 +1279,7 @@ class ProfileService {
         const a = (text_1 ?? '').trim();
         const b = (text_2 ?? '').trim();
         const cacheKey = a && b ? [a, b].sort().join('\0') : '';
-        return from(this.loadCompareCache()).pipe(switchMap(() => {
+        return from(this.loadCompareCache()).pipe(switchMap$1(() => {
             if (cacheKey && this.compareInterestsCache.has(cacheKey)) {
                 return of(this.compareInterestsCache.get(cacheKey));
             }
@@ -2054,7 +1310,7 @@ class ProfileService {
     detectFace(image, creds, options) {
         const rawKey = options?.cacheKey ?? (typeof image === 'string' ? image : undefined);
         const cacheKey = ProfileService.faceCacheKey(rawKey);
-        return from(this.loadFaceCache()).pipe(switchMap(() => {
+        return from(this.loadFaceCache()).pipe(switchMap$1(() => {
             if (cacheKey && this.faceCache.has(cacheKey)) {
                 console.log('Face detection cache hit');
                 return of(this.faceCache.get(cacheKey));
@@ -2126,7 +1382,7 @@ class ProfileService {
             }
             // Propagate other errors (or second failure) to the caller
             return throwError(() => error);
-        }))), map$1((raw) => {
+        }))), map((raw) => {
             // Face++ sometimes returns HTTP 200 with an error payload containing `error_message`
             // e.g. "AUTHENTICATION_ERROR: api_key and api_secret does not match." or
             //      "AUTHORIZATION_ERROR:<reason>" or "CONCURRENCY_LIMIT_EXCEEDED".
@@ -2206,27 +1462,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * The lib does not call third-party APIs; the backend does.
  */
 class ProfileComparisonBackendService {
-    http;
-    apiBaseUrl;
-    getVerboseLogging;
-    constructor(http, apiBaseUrl, getVerboseLogging) {
-        this.http = http;
-        this.apiBaseUrl = apiBaseUrl;
-        this.getVerboseLogging = getVerboseLogging;
+    http = inject(HttpClient);
+    apiBaseUrl = inject(PROFILE_COMPARISON_API_BASE_URL, { optional: true });
+    getVerboseLogging = inject(PROFILE_COMPARISON_VERBOSE_LOGGING, { optional: true });
+    constructor() { }
+    static extractErrorMessage(err) {
+        if (err == null || typeof err !== 'object')
+            return 'Unknown error';
+        const e = err;
+        return e.error?.message || e.message || 'Unknown error';
     }
     log(...args) {
         if (this.getVerboseLogging?.() === true) {
             console.log('[ProfileComparisonBackend]', ...args);
         }
     }
-    getBaseUrl() {
+    /** Returns the legacy token URL (for backward compat fallback). */
+    getLegacyTokenUrl() {
         const u = this.apiBaseUrl;
         if (u == null)
             return null;
         return typeof u === 'function' ? u() : u;
     }
-    getComparison(config) {
-        const base = this.getBaseUrl();
+    /** @deprecated Use getLegacyTokenUrl(). Kept for backward compat. */
+    getBaseUrl() {
+        return this.getLegacyTokenUrl();
+    }
+    getComparison(config, baseUrl) {
+        const base = baseUrl ?? this.getLegacyTokenUrl();
         this.log('getComparison', 'baseUrl', base ?? '(null)');
         if (!base || !base.trim()) {
             this.log('getComparison', 'returning error: backend not configured');
@@ -2236,29 +1499,17 @@ class ProfileComparisonBackendService {
         this.log('getComparison', 'POST', url);
         return this.http.post(url, { config }).pipe(tap$1(() => this.log('getComparison', 'POST success')), catchError((err) => {
             this.log('getComparison', 'POST error', err);
-            const msg = err?.error?.message ?? err?.message ?? err?.statusText ?? String(err);
-            const status = err?.status ?? err?.statusCode;
-            console.error('[ProfileComparisonBackend] getComparison failed', status, msg);
+            console.error('[ProfileComparisonBackend] getComparison failed', err?.status, ProfileComparisonBackendService.extractErrorMessage(err));
             return throwError(() => err);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, deps: [{ token: i1.HttpClient }, { token: PROFILE_COMPARISON_API_BASE_URL, optional: true }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonBackendService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [PROFILE_COMPARISON_API_BASE_URL]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [PROFILE_COMPARISON_VERBOSE_LOGGING]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class ProfileComparisonLibComponent {
     backendService;
@@ -2306,7 +1557,9 @@ class ProfileComparisonLibComponent {
         user1Image: '',
         user2Image: '',
     };
-    fadeAllEdges = false;
+    backendMode = BackendMode.Real;
+    backendUrl = null;
+    fadeAllEdges = true;
     matrixDataChange = new EventEmitter();
     rawLLMOutputChange = new EventEmitter();
     viewProfileClick = new EventEmitter();
@@ -2358,6 +1611,8 @@ class ProfileComparisonLibComponent {
     matrixData = null;
     /** When false, backend URL is not provided — show "Configure backend". */
     backendConfigured = false;
+    /** The resolved backend URL computed from inputs and legacy token. */
+    resolvedBackendUrl = null;
     compressionConfig = {
         maxWidth: ProfileComparisonLibComponent.DEFAULT_MAX_WIDTH,
         maxHeight: ProfileComparisonLibComponent.DEFAULT_MAX_HEIGHT,
@@ -2411,9 +1666,9 @@ class ProfileComparisonLibComponent {
         });
         this.baseConfig = JSON.parse(JSON.stringify(this.config));
         this.updateConfigProperties();
-        const base = this.backendService.getBaseUrl();
-        this.backendConfigured = !!(base && base.trim());
-        this.log('ngOnInit', 'backendConfigured', this.backendConfigured, 'base', base ?? '(null)');
+        this.resolvedBackendUrl = resolveBackendUrl(this.backendUrl, this.backendMode, this.backendService.getLegacyTokenUrl());
+        this.backendConfigured = !!this.resolvedBackendUrl;
+        this.log('ngOnInit', 'backendConfigured', this.backendConfigured, 'resolvedUrl', this.resolvedBackendUrl ?? '(null)');
         if (!this.backendConfigured) {
             this.log('ngOnInit', 'exiting early: backend not configured');
             this.user1Transform = 'translateY(0px)';
@@ -2441,6 +1696,11 @@ class ProfileComparisonLibComponent {
         this.waitForImagesAndInitDrag();
     }
     ngOnChanges(changes) {
+        if (changes['backendMode'] || changes['backendUrl']) {
+            this.resolvedBackendUrl = resolveBackendUrl(this.backendUrl, this.backendMode, this.backendService.getLegacyTokenUrl());
+            this.backendConfigured = !!this.resolvedBackendUrl;
+            this.log('ngOnChanges', 'backend inputs changed', 'resolvedUrl', this.resolvedBackendUrl ?? '(null)');
+        }
         if (changes['config']) {
             const first = changes['config'].firstChange;
             this.log('ngOnChanges', 'config changed', 'firstChange', first, 'backendConfigured', this.backendConfigured);
@@ -2502,7 +1762,7 @@ class ProfileComparisonLibComponent {
             user1ImageLen: (configToSend.user1Image || '').length,
             user2ImageLen: (configToSend.user2Image || '').length,
         });
-        this.computeSub = this.backendService.getComparison(configToSend).subscribe({
+        this.computeSub = this.backendService.getComparison(configToSend, this.resolvedBackendUrl).subscribe({
             next: (payload) => {
                 if (requestId !== this.fetchRequestId) {
                     this.log('fetchComparison', 'ignoring stale success', { requestId, current: this.fetchRequestId });
@@ -2886,16 +2146,16 @@ class ProfileComparisonLibComponent {
         const tasks = [];
         if (this.user1Image) {
             tasks.push(this.compressImageStringToDataUrl(this.user1Image, 'ConfigUser1').pipe(tap$1((dataUrl) => { if (dataUrl)
-                this.user1Image = dataUrl; }), map$1(() => void 0)));
+                this.user1Image = dataUrl; }), map(() => void 0)));
         }
         if (this.user2Image) {
             tasks.push(this.compressImageStringToDataUrl(this.user2Image, 'ConfigUser2').pipe(tap$1((dataUrl) => { if (dataUrl)
-                this.user2Image = dataUrl; }), map$1(() => void 0)));
+                this.user2Image = dataUrl; }), map(() => void 0)));
         }
-        return tasks.length > 0 ? forkJoin(tasks).pipe(map$1(() => void 0)) : of(void 0);
+        return tasks.length > 0 ? forkJoin(tasks).pipe(map(() => void 0)) : of(void 0);
     }
     compressImageStringToDataUrl(imageStr, baseName) {
-        return this.fileConversionService.getFileForImageString(imageStr, `${baseName}.jpg`).pipe(switchMap$1(file => this.imageCompressionService.compressImageFile(file, this.compressionConfig)), map$1(res => res.dataUrl), catchError$1(() => of(null)));
+        return this.fileConversionService.getFileForImageString(imageStr, `${baseName}.jpg`).pipe(switchMap(file => this.imageCompressionService.compressImageFile(file, this.compressionConfig)), map(res => res.dataUrl), catchError$1(() => of(null)));
     }
     getEyeCoordinatesFromBBox(bbox) {
         const eyeY = bbox.y + bbox.height * 0.38;
@@ -3018,11 +2278,11 @@ class ProfileComparisonLibComponent {
         return !!face && typeof face.x === 'number' && face.width > 0 && face.height > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibComponent, deps: [{ token: ProfileComparisonBackendService }, { token: i0.Renderer2 }, { token: FileConversionService }, { token: ImageCompressionService }, { token: i0.ChangeDetectorRef }, { token: PROFILE_COMPARISON_VERBOSE_LOGGING, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", fadeAllEdges: "fadeAllEdges" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\n  Configure backend\n</div>\n\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\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.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.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n      <!-- [style.object-fit]=\"'cover'\" -->\n    </div>\n  </div>\n\n  <div #shapeContainer class=\"shape\">\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\n<g filter=\"url(#filter0_i_4_4137)\">\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4137)\">\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\n<g filter=\"url(#filter0_i_4_4141)\">\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4141)\">\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n    </div>\n\n    <div class=\"shape-text\">\n      <div #shapeTextLeft class=\"shape-text-left\">\n        <div class=\"scroll-container\" #leftContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\n      </div>\n\n      <div #shapeTextCenter class=\"shape-text-center\">\n        <ng-container *ngFor=\"let item of centerItem\">\n          <p class=\"shape-p-center\">{{ item }}</p>\n        </ng-container>\n      </div>\n      <div #shapeTextRight class=\"shape-text-right\">\n        <div class=\"scroll-container\" #rightContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p-right\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:.5;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.6;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ProfileComparisonLibComponent, isStandalone: false, selector: "lib-profile-comparison", inputs: { config: "config", backendMode: "backendMode", backendUrl: "backendUrl", fadeAllEdges: "fadeAllEdges" }, outputs: { matrixDataChange: "matrixDataChange", rawLLMOutputChange: "rawLLMOutputChange", viewProfileClick: "viewProfileClick" }, viewQueries: [{ propertyName: "leftContainer", first: true, predicate: ["leftContainer"], descendants: true }, { propertyName: "rightContainer", first: true, predicate: ["rightContainer"], descendants: true }, { propertyName: "profileFlex", first: true, predicate: ["profileFlex"], descendants: true }, { propertyName: "profileImgLeft", first: true, predicate: ["profileImgLeft"], descendants: true }, { propertyName: "profileImgRight", first: true, predicate: ["profileImgRight"], descendants: true }, { propertyName: "shapeContainer", first: true, predicate: ["shapeContainer"], descendants: true }, { propertyName: "shapeBg", first: true, predicate: ["shapeBg"], descendants: true }, { propertyName: "shapeBg1", first: true, predicate: ["shapeBg1"], descendants: true }, { propertyName: "shapeBg2", first: true, predicate: ["shapeBg2"], descendants: true }, { propertyName: "shapeTextLeft", first: true, predicate: ["shapeTextLeft"], descendants: true }, { propertyName: "shapeTextRight", first: true, predicate: ["shapeTextRight"], descendants: true }, { propertyName: "shapeTextCenter", first: true, predicate: ["shapeTextCenter"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div #shapeContainer class=\"shape\">\r\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\r\n<g filter=\"url(#filter0_i_4_4137)\">\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4137)\">\r\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\r\n<g filter=\"url(#filter0_i_4_4141)\">\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4141)\">\r\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div #shapeTextLeft class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\r\n      </div>\r\n\r\n      <div #shapeTextCenter class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div #shapeTextRight class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.75;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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 class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\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.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.object-position]=\"user2ObjectPosition\"\n        (load)=\"onUserImageLoad(2, $event)\"\n      />\n      <!-- [style.object-fit]=\"'cover'\" -->\n    </div>\n  </div>\n\n  <div #shapeContainer class=\"shape\">\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\n<g filter=\"url(#filter0_i_4_4137)\">\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4137)\">\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\n<g filter=\"url(#filter0_i_4_4141)\">\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.07\"/>\n</g>\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.07\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\n<g filter=\"url(#filter1_ddddd_4_4141)\">\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.3\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\n</g>\n<defs>\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.95\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\n</filter>\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"7.85\"/>\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\n</filter>\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\n<stop offset=\"1\" stop-color=\"white\"/>\n</radialGradient>\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\n<stop offset=\"1\" stop-color=\"#319990\"/>\n</linearGradient>\n</defs>\n</svg>\n    </div>\n\n    <div class=\"shape-text\">\n      <div #shapeTextLeft class=\"shape-text-left\">\n        <div class=\"scroll-container\" #leftContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson1Interests.length > 0\n                ? alignedPerson1Interests\n                : displayPerson1Interests.length > 0\n                ? displayPerson1Interests\n                : person1Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\n      </div>\n\n      <div #shapeTextCenter class=\"shape-text-center\">\n        <ng-container *ngFor=\"let item of centerItem\">\n          <p class=\"shape-p-center\">{{ item }}</p>\n        </ng-container>\n      </div>\n      <div #shapeTextRight class=\"shape-text-right\">\n        <div class=\"scroll-container\" #rightContainer>\n          <ng-container\n            *ngFor=\"\n              let interest of alignedPerson2Interests.length > 0\n                ? alignedPerson2Interests\n                : displayPerson2Interests.length > 0\n                ? displayPerson2Interests\n                : person2Interests;\n              let i = index\n            \"\n          >\n            <p\n              class=\"shape-p-right\"\n              *ngIf=\"!isInCenter(interest)\"\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\n            >\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\n            </p>\n          </ng-container>\n        </div>\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading indicator for alignment process -->\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n</div>\n\n\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:.5;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#3a3a3a,#2a2a2a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.6;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#ffffff80;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"] }]
+            args: [{ selector: 'lib-profile-comparison', standalone: false, template: "<div class=\"configure-backend-message\" *ngIf=\"!backendConfigured\">\r\n  Configure backend\r\n</div>\r\n\r\n<div class=\"profile-screen\" *ngIf=\"backendConfigured\">\r\n  <div class=\"backend-error-message\" *ngIf=\"backendError\">{{ backendError }}</div>\r\n  <div #profileFlex class=\"profile-flex\" [class.fade-all]=\"fadeAllEdges\">\r\n    <div #profileImgLeft class=\"profile-img left\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user1Image\"\r\n        alt=\"User 1\"\r\n        [style.transform]=\"user1Transform\"\r\n        [style.object-position]=\"user1ObjectPosition\"\r\n        (load)=\"onUserImageLoad(1, $event)\"\r\n      />\r\n    </div>\r\n    <div #profileImgRight class=\"profile-img right\" [class.fade-all]=\"fadeAllEdges\">\r\n      <img\r\n        [src]=\"user2Image\"\r\n        alt=\"User 2\"\r\n        [style.transform]=\"user2Transform\"\r\n        [style.object-position]=\"user2ObjectPosition\"\r\n        (load)=\"onUserImageLoad(2, $event)\"\r\n      />\r\n      <!-- [style.object-fit]=\"'cover'\" -->\r\n    </div>\r\n  </div>\r\n\r\n  <div #shapeContainer class=\"shape\">\r\n    <div #shapeBg class=\"shape-bg\" [class.fade-all]=\"fadeAllEdges\">\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMaxYMid slice\" style=\"height: 350px;\" class=\"shape-bg1\" #shapeBg1>\r\n<g filter=\"url(#filter0_i_4_4137)\">\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"#00CFE6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M215.177 44.4924L-18.823 19.3104C-25.3264 18.6106 -31 23.7064 -31 30.2473V283.169C-31 289.914 -24.9854 295.07 -18.3196 294.04L215.68 257.869C221.043 257.04 225 252.407 225 246.981V55.4497C225 49.8302 220.764 45.0937 215.177 44.4924Z\" fill=\"url(#paint0_radial_4_4137)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4137)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4137)\">\r\n<path d=\"M219.081 43.0755L-18.9193 17.2045C-24.8351 16.5614 -30 21.1953 -30 27.1459V287.318C-30 293.455 -24.5217 298.145 -18.4573 297.198L219.543 260.038C224.411 259.278 228 255.075 228 250.148V53.0303C228 47.9257 224.155 43.6271 219.081 43.0755Z\" stroke=\"#61C2AB\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4137\" x=\"-31\" y=\"19.2461\" width=\"256\" height=\"274.925\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.516667 0 0 0 0 1 0 0 0 1 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4137\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4137\" x=\"-46.2\" y=\"0.944715\" width=\"290.4\" height=\"312.575\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4137\" result=\"effect2_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4137\" result=\"effect3_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4137\" result=\"effect4_dropShadow_4_4137\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4137\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n      <svg width=\"250\" height=\"350\" viewBox=\"0 0 250 350\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMinYMid slice\" style=\"height: 350px;\" class=\"shape-bg2\" #shapeBg2>\r\n<g filter=\"url(#filter0_i_4_4141)\">\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"#7B00E6\" fill-opacity=\"0.2\"/>\r\n</g>\r\n<path d=\"M29.5864 44.9454L263.826 19.8065C270.329 19.1087 276 24.2041 276 30.7437V283.174C276 289.917 269.988 295.073 263.324 294.046L29.0843 257.937C23.7196 257.11 19.7602 252.476 19.7602 247.048V55.9032C19.7602 50.2824 23.9977 45.5452 29.5864 44.9454Z\" fill=\"url(#paint0_radial_4_4141)\" fill-opacity=\"0.2\" stroke=\"url(#paint1_linear_4_4141)\" stroke-width=\"2\" stroke-miterlimit=\"3.99393\" stroke-linejoin=\"round\"/>\r\n<g filter=\"url(#filter1_ddddd_4_4141)\">\r\n<path d=\"M25.9212 43.077L264.37 17.2022C270.285 16.5603 275.449 21.194 275.449 27.1438V287.321C275.449 293.457 269.972 298.146 263.909 297.201L25.46 260.036C20.5905 259.277 17 255.074 17 250.146V53.032C17 47.9267 20.8457 43.6277 25.9212 43.077Z\" stroke=\"#C37DFF\" stroke-opacity=\"0.8\" stroke-linejoin=\"round\" shape-rendering=\"crispEdges\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_i_4_4141\" x=\"19.7602\" y=\"19.7425\" width=\"256.24\" height=\"274.434\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.95\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.482353 0 0 0 0 0 0 0 0 0 0.901961 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow_4_4141\"/>\r\n</filter>\r\n<filter id=\"filter1_ddddd_4_4141\" x=\"0.8\" y=\"0.942639\" width=\"290.849\" height=\"312.58\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect1_dropShadow_4_4141\" result=\"effect2_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect2_dropShadow_4_4141\" result=\"effect3_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect3_dropShadow_4_4141\" result=\"effect4_dropShadow_4_4141\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset/>\r\n<feGaussianBlur stdDeviation=\"7.85\"/>\r\n<feComposite in2=\"hardAlpha\" operator=\"out\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0\"/>\r\n<feBlend mode=\"normal\" in2=\"effect4_dropShadow_4_4141\" result=\"effect5_dropShadow_4_4137\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect5_dropShadow_4_4137\" result=\"shape\"/>\r\n</filter>\r\n<radialGradient id=\"paint0_radial_4_4137\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(65.1034 -81.3964 74.955 49.415 97 157)\" gradientUnits=\"userSpaceOnUse\">\r\n<stop stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"0.615385\" stop-color=\"#0051E6\" stop-opacity=\"0\"/>\r\n<stop offset=\"1\" stop-color=\"white\"/>\r\n</radialGradient>\r\n<linearGradient id=\"paint1_linear_4_4137\" x1=\"97\" y1=\"18\" x2=\"97\" y2=\"296\" gradientUnits=\"userSpaceOnUse\">\r\n<stop offset=\"0.380829\" stop-color=\"#52FFEB\"/>\r\n<stop offset=\"1\" stop-color=\"#319990\"/>\r\n</linearGradient>\r\n</defs>\r\n</svg>\r\n    </div>\r\n\r\n    <div class=\"shape-text\">\r\n      <div #shapeTextLeft class=\"shape-text-left\">\r\n        <div class=\"scroll-container\" #leftContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson1Interests.length > 0\r\n                ? alignedPerson1Interests\r\n                : displayPerson1Interests.length > 0\r\n                ? displayPerson1Interests\r\n                : person1Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2\" (click)=\"onViewProfile('left')\">View Profile</h2>\r\n      </div>\r\n\r\n      <div #shapeTextCenter class=\"shape-text-center\">\r\n        <ng-container *ngFor=\"let item of centerItem\">\r\n          <p class=\"shape-p-center\">{{ item }}</p>\r\n        </ng-container>\r\n      </div>\r\n      <div #shapeTextRight class=\"shape-text-right\">\r\n        <div class=\"scroll-container\" #rightContainer>\r\n          <ng-container\r\n            *ngFor=\"\r\n              let interest of alignedPerson2Interests.length > 0\r\n                ? alignedPerson2Interests\r\n                : displayPerson2Interests.length > 0\r\n                ? displayPerson2Interests\r\n                : person2Interests;\r\n              let i = index\r\n            \"\r\n          >\r\n            <p\r\n              class=\"shape-p-right\"\r\n              *ngIf=\"!isInCenter(interest)\"\r\n              [ngClass]=\"{'dash-item': interest === '-', 'spacer-item': interest === '----', 'aligned-item': interest !== '-' && interest !== '----'}\"\r\n            >\r\n              {{ interest === \"-\" ? \"\u2014\" : interest }}\r\n            </p>\r\n          </ng-container>\r\n        </div>\r\n        <h2 class=\"shape-h2-right\" (click)=\"onViewProfile('right')\">View Profile</h2>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Loading indicator for alignment process -->\r\n  <div *ngIf=\"isAligning\" class=\"loading-indicator\">\r\n    <div class=\"loading-spinner\"></div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".profile-img.left{-webkit-mask-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-right:calc(-.5 * var(--overlap-size, 40px))}.profile-img.right{-webkit-mask-image:linear-gradient(to left,rgb(0,0,0) 0%,rgb(0,0,0) calc(100% - var(--overlap-size, 40px)),rgba(0,0,0,0) 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to left,#fff 0% calc(100% - var(--overlap-size, 40px)),#fff0);mask-size:100% 100%;mask-repeat:no-repeat;margin-left:calc(-.5 * var(--overlap-size, 40px))}.profile-img.fade-all{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-composite:intersect}.profile-img.fade-all.left{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to right,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.profile-img.fade-all.right{-webkit-mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 75px,black 125px,black 425px,transparent 475px),linear-gradient(to left,transparent 0%,black 15%,black calc(100% - var(--overlap-size, 40px)),transparent 100%)}.configure-backend-message{padding:1rem;text-align:center;color:#bdc3c7;background:#34495e;border-radius:8px}.backend-error-message{padding:.75rem 1rem;text-align:center;color:#fef3c7;background:#b4530940;border:1px solid rgba(245,158,11,.5);border-radius:8px;margin-bottom:.5rem}.profile-screen{width:320px;max-width:100%;margin:0 auto;overflow:hidden;position:relative}.profile-flex{display:flex;width:100%;height:400px;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);gap:0;margin:0;padding:0;position:relative;box-shadow:none;border:none;--overlap-size: 40px}.profile-flex.fade-all{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);-webkit-mask-composite:intersect;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 85%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 15%,black 85%,transparent 100%);mask-composite:intersect}.shape-bg1,.shape-bg2{position:absolute;max-width:250px;opacity:1;transition:transform .2s ease-out}.shape-bg1{z-index:1;left:0}.shape-bg2{right:0}.shape-bg.fade-all .shape-bg1{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.shape-bg.fade-all .shape-bg2{-webkit-mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%);mask-image:linear-gradient(to left,transparent 0%,black 20%,black 100%)}.shape-bg svg{cursor:grab}.shape-bg svg:active{cursor:grabbing}.profile-img{width:180px;height:550px;position:relative;flex-shrink:0;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);margin:0;padding:0;left:0;top:-75px;border:none;box-sizing:border-box;overflow:hidden;box-shadow:none;outline:none}.profile-img img{transition:transform .3s ease;width:100%;height:100%;object-fit:cover;display:block;object-position:center center;opacity:.75;transform-origin:center center;border:none;outline:none;box-shadow:none;position:relative;top:0;left:0;filter:contrast(1.2) brightness(1.1) saturate(1.1);image-rendering:auto}.shape{position:absolute;top:40px;width:100%}.shape-bg{position:relative}.shape-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:1;padding:0 1.25rem;box-sizing:border-box;pointer-events:none}.shape-text-left{margin-top:40px;text-align:left;position:absolute;top:0;bottom:0;right:calc(50% + 75px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end}.shape-text-left .scroll-container{width:100%}.shape-text-center{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;text-shadow:2px 2px 4px rgba(0,0,0,.3);z-index:10;transition:transform .3s ease;pointer-events:none;top:50%;transform:translateY(-50%);padding:0 .625rem;margin-top:3.8125rem}.shape-text-right{margin-top:40px;text-align:right;position:absolute;top:0;bottom:0;left:calc(50% + 70px);z-index:2;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start}.shape-text-right .scroll-container{width:100%}.shape-p{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:right;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;-webkit-user-select:none;user-select:none;margin:0}.shape-p-center{font-family:Gilroy,sans-serif;font-weight:700;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;margin:0;text-align:center;display:flex;justify-content:center;align-items:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.shape-p-right{font-family:Gilroy,sans-serif;font-weight:400;font-size:.75rem;line-height:100%;letter-spacing:0%;color:#fff;padding-bottom:.125rem;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;-webkit-user-select:none;user-select:none}.dash-item{color:#ffffff4d!important;font-size:.625rem!important;height:.625rem}.spacer-item{height:auto!important;color:#fffc!important;font-weight:700;font-size:.75rem!important;letter-spacing:2px}.shape-h2{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-left:.5rem}.shape-h2:hover{opacity:.8;transform:translateY(-2px)}.shape-h2-right{font-family:Calistoga,serif;font-weight:400;font-size:.625rem;letter-spacing:0%;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;border:none;outline:none;white-space:nowrap;pointer-events:auto;z-index:100;position:relative;margin-right:3.75rem}.shape-h2-right:hover{opacity:.8;transform:translateY(-2px)}.scroll-when-long{display:inline-block;max-width:4.5625rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scroll-when-long::-webkit-scrollbar{height:2px}.scroll-when-long::-webkit-scrollbar-track{background:#eee;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb{background:#888;border-radius:.625rem}.scroll-when-long::-webkit-scrollbar-thumb:hover{background:#555}.shape-text p{cursor:default;-webkit-user-select:none;user-select:none}.shape-text p:active{cursor:default}#drag-preview{position:absolute;pointer-events:none;display:none;background:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;z-index:9999;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shape-text-container{width:70px;position:relative;overflow:hidden}.draggable{width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;-webkit-user-select:none;user-select:none;position:relative;display:inline-block}.dragging{width:auto;text-overflow:clip;cursor:grabbing;position:absolute;z-index:1000}.p-wrapper{width:70px;overflow-x:hidden}.shape-text-center{display:flex;justify-content:space-between;flex-direction:column;gap:10px;height:100%;margin-top:55px}.loading-indicator{position:fixed;top:25%;left:50%;transform:translate(-50%,-50%);background:transparent;color:#fff;padding:20px 30px;border-radius:10px;text-align:center;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator p{margin:0;font-size:16px;font-weight:500}.api-key-modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2000}.api-key-modal{width:min(640px,92vw);background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px #00000073;padding:16px 18px}.api-key-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.api-key-modal-header h2{margin:0;font-size:20px;font-weight:700;color:#e2e8f0}.warning-icon{color:#fbbf24}.api-key-modal .close-btn{background:#0b1220;border:1px solid #334155;color:#94a3b8;border-radius:8px;padding:6px;cursor:pointer;line-height:0}.api-key-modal-body{margin-top:12px;display:flex;flex-direction:column;gap:10px}.modal-message,.modal-instruction{margin:0;color:#cbd5e1}.modal-message strong{color:#e5e7eb}.api-key-input-group{display:flex;align-items:center;gap:10px}.api-key-input{flex:1 1 auto;background:#0a1020;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:10px 12px}.api-key-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}.api-key-load-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 12px;cursor:pointer;font-weight:600}.api-key-load-btn:hover{background:#1d4ed8}.modal-hint{display:flex;align-items:center;gap:8px;color:#94a3b8}.modal-hint a{color:#93c5fd}\n"] }]
         }], ctorParameters: () => [{ type: ProfileComparisonBackendService }, { type: i0.Renderer2 }, { type: FileConversionService }, { type: ImageCompressionService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3030,6 +2290,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     args: [PROFILE_COMPARISON_VERBOSE_LOGGING]
                 }] }], propDecorators: { config: [{
                 type: Input
+            }], backendMode: [{
+                type: Input
+            }], backendUrl: [{
+                type: Input
             }], fadeAllEdges: [{
                 type: Input
             }], matrixDataChange: [{
@@ -3083,9 +2347,7 @@ class ProfileComparisonLibModule {
             FormsModule,
             ReactiveFormsModule], exports: [ProfileComparisonLibComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProfileComparisonLibModule, providers: [
-            ProfileComparisonBackendService,
-            EmbeddingService,
-            OpenAIEmbeddingService
+            ProfileComparisonBackendService
         ], imports: [CommonModule,
             HttpClientModule,
             FormsModule,
@@ -3107,9 +2369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ProfileComparisonLibComponent
                     ],
                     providers: [
-                        ProfileComparisonBackendService,
-                        EmbeddingService,
-                        OpenAIEmbeddingService
+                        ProfileComparisonBackendService
                     ]
                 }]
         }] });
@@ -3122,5 +2382,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CachePersistenceService, EmbeddingService, FileConversionService, ImageCompressionService, OpenAIEmbeddingService, PROFILE_COMPARISON_API_BASE_URL, PROFILE_COMPARISON_VERBOSE_LOGGING, ProfileComparisonBackendService, ProfileComparisonLibComponent, ProfileComparisonLibModule, ProfileComparisonLibService, ProfileService };
+export { BACKEND_MODE_URLS, BackendMode, CachePersistenceService, FileConversionService, ImageCompressionService, OpenAIEmbeddingService, PROFILE_COMPARISON_API_BASE_URL, PROFILE_COMPARISON_VERBOSE_LOGGING, ProfileComparisonBackendService, ProfileComparisonLibComponent, ProfileComparisonLibModule, ProfileComparisonLibService, ProfileService, resolveBackendUrl };
 //# sourceMappingURL=naniteninja-profile-comparison-lib.mjs.map