@naniteninja/dashboard-components-lib 2.1.12 → 2.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/fesm2022/naniteninja-dashboard-components-lib.mjs +4 -4
  2. package/fesm2022/naniteninja-dashboard-components-lib.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/naniteninja-dashboard-components-lib.mjs CHANGED
@@ -10315,11 +10315,11 @@ class ClientViewportComponent {
10315
10315
  }, 50);
10316
10316
  }
10317
10317
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ClientViewportComponent, deps: [{ token: LayoutService }, { token: i0.ElementRef }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
10318
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ClientViewportComponent, isStandalone: false, selector: "lib-client-viewport", inputs: { config: "config", showViewportControls: "showViewportControls", showViewportHeader: "showViewportHeader", showViewportFooter: "showViewportFooter", activePage: "activePage", enablePageRouting: "enablePageRouting", pageRouteQueryParamKey: "pageRouteQueryParamKey", pageRouteParamKey: "pageRouteParamKey", pageRouteSegmentName: "pageRouteSegmentName" }, outputs: { back: "back", tabSettingsClick: "tabSettingsClick", activeIndexChange: "activeIndexChange", activePageChange: "activePageChange" }, viewQueries: [{ propertyName: "tabStripRef", first: true, predicate: ["tabStrip"], descendants: true }, { propertyName: "spiderChartComponent", first: true, predicate: SpiderChartComponent, descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">Request Date</span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"clientProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n @if (config?.profile?.name) {\n <div class=\"top-nav-name\" style=\"color: white; font-size: 12px; margin-left: 8px;\">{{ config?.profile?.name }}\n </div>\n }\n </div>\n }\n <div class=\"content-scroll\">\n\n @switch (activePageIndex) {\n @case (ClientViewportPage.UpcomingDates) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline points=\"9 22 9 12 15 12 15 22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Upcoming Dates</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your upcoming dates and events.</p>\n </div>\n }\n @case (ClientViewportPage.Matches) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Matches</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your potential matches.</p>\n </div>\n }\n @case (ClientViewportPage.Messages) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Messages</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Connect with your matches.</p>\n </div>\n }\n @case (ClientViewportPage.Home) {\n <section class=\"upcoming-dates\">\n <div class=\"upcoming-dates-header\">\n <span class=\"upcoming-dates-title\">Upcoming Dates</span>\n <span class=\"upcoming-dates-info-icon\" (click)=\"onTabInfoClick(ClientViewportTab.UpcomingDates, $event)\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#5E5965\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#5E5965\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#5E5965\" />\n </svg>\n </span>\n </div>\n <div class=\"upcoming-dates-calendar\">\n <lib-agenda [events]=\"upcomingEvents\"></lib-agenda>\n </div>\n @if (alertStatus.upcomingDates) {\n <div class=\"alert-popup-agenda\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.upcomingDates,\n })\n \"></lib-alert-popup>\n </div>\n }\n </section>\n\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip\n (mousedown)=\"onTabStripMouseDown($event)\"\n (touchstart)=\"onTabStripTouchStart($event)\"\n (touchmove)=\"onTabStripTouchMove($event)\"\n (touchend)=\"onTabStripTouchEnd()\">\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <button #tabButton class=\"tab-pill\" type=\"button\" [class.active]=\"tab.key === activeTabKey\"\n (click)=\"setActiveTab(tab.key)\" [attr.data-key]=\"tab.key\">\n <span class=\"tab-label\">{{ tab.label }}</span>\n @if (tab.key === activeTabKey) {\n <span class=\"tab-icons\">\n <svg class=\"tab-icon-info\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabInfoClick(tab.key, $event)\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#D3D3D3\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#D3D3D3\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#D3D3D3\" />\n </svg>\n @if (tab.hasSettings) {\n <svg class=\"tab-icon-settings\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0ZM3.39528 0.521714C3.23082 0.523571 3.06679 0.537203 2.90461 0.562452L2.86512 0.90234C2.82825 1.21869 2.63733 1.49951 2.35129 1.65882C2.0635 1.82027 1.71262 1.8397 1.40733 1.71105L1.08192 1.57379C0.874732 1.81524 0.709828 2.08746 0.593686 2.37976L0.882687 2.58397C1.15032 2.77278 1.30839 3.07265 1.30839 3.39154C1.30839 3.7104 1.15032 4.01026 0.88297 4.19886L0.593513 4.40363C0.709556 4.69643 0.874486 4.96917 1.08181 5.21109L1.4097 5.07317C1.7133 4.9459 2.06179 4.96451 2.3488 5.12336C2.6358 5.28222 2.82727 5.56243 2.8648 5.87927L2.90428 6.2215C3.22654 6.27413 3.55579 6.27413 3.87805 6.2215L3.91754 5.87931C3.95405 5.56257 4.14529 5.28138 4.43262 5.12194C4.72 4.96246 5.06917 4.94374 5.37332 5.07157L5.70098 5.20938C5.90811 4.96785 6.07297 4.69556 6.18907 4.40321L5.90003 4.19872C5.6324 4.00992 5.47432 3.71005 5.47432 3.39119C5.47432 3.0723 5.6324 2.77243 5.89971 2.58386L6.18835 2.37955C6.07221 2.08721 5.90728 1.81493 5.70007 1.57344L5.37531 1.71042C5.24298 1.76664 5.09982 1.79558 4.95524 1.79536C4.42284 1.79483 3.97604 1.40996 3.91794 0.902218L3.87845 0.562341C3.71707 0.537123 3.55478 0.523529 3.39528 0.521714ZM3.39068 2.08698C4.14094 2.08698 4.74912 2.67096 4.74912 3.39137C4.74912 4.11173 4.14094 4.69574 3.39068 4.69574C2.64044 4.69574 2.03225 4.11173 2.03225 3.39137C2.03225 2.67096 2.64044 2.08698 3.39068 2.08698ZM3.39068 2.60873C2.94055 2.60873 2.57563 2.95911 2.57563 3.39137C2.57563 3.82358 2.94055 4.17399 3.39068 4.17399C3.84085 4.17399 4.20575 3.82358 4.20575 3.39137C4.20575 2.95911 3.84085 2.60873 3.39068 2.60873Z\"\n fill=\"#D3D3D3\" />\n </svg>\n }\n @if (false) {\n <svg class=\"tab-icon-settings\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M6.39761 0C6.89863 0.00567637 7.39767 0.0625743 7.88668 0.169781C8.1002 0.216581 8.25986 0.391515 8.28409 0.605184L8.40026 1.62965C8.45282 2.10003 8.85685 2.4563 9.33856 2.45679C9.46798 2.45699 9.5961 2.43049 9.71569 2.37846L10.6718 1.96563C10.8706 1.87977 11.1029 1.92658 11.2514 2.08242C11.9423 2.80775 12.4568 3.67766 12.7563 4.62669C12.8209 4.83134 12.7466 5.05373 12.5711 5.18086L11.7237 5.79486C11.482 5.96944 11.3392 6.24669 11.3392 6.54158C11.3392 6.8364 11.482 7.11364 11.7242 7.28863L12.5724 7.90283C12.7479 8.02991 12.8223 8.25234 12.7577 8.45705C12.4583 9.40593 11.9441 10.2758 11.2536 11.0012C11.1052 11.157 10.8731 11.204 10.6743 11.1183L9.71432 10.7049C9.43972 10.5868 9.12429 10.6041 8.86477 10.7515C8.60525 10.899 8.43248 11.159 8.39951 11.4518L8.28409 12.4762C8.26033 12.6874 8.10409 12.8612 7.89378 12.9104C6.90505 13.1416 5.87494 13.1416 4.88626 12.9104C4.67594 12.8612 4.51972 12.6874 4.49592 12.4762L4.38068 11.4534C4.34684 11.161 4.17385 10.9018 3.91452 10.7549C3.65519 10.608 3.34031 10.5907 3.06658 10.7082L2.10643 11.1217C1.90755 11.2073 1.67535 11.1604 1.52705 11.0044C0.836161 10.2782 0.321875 9.40727 0.0228998 8.45738C-0.0414892 8.25281 0.0329134 8.03051 0.208326 7.9035L1.05701 7.2889C1.29875 7.11431 1.44152 6.83707 1.44152 6.54225C1.44152 6.24736 1.29875 5.97011 1.0567 5.79533L0.208545 5.18176C0.0328656 5.05468 -0.0416053 4.83214 0.0230158 4.62737C0.322503 3.67833 0.837062 2.80842 1.52797 2.08309C1.67641 1.92725 1.90873 1.88044 2.10757 1.9663L3.06345 2.37905C3.33851 2.49771 3.6547 2.47979 3.91543 2.33005C4.17504 2.18204 4.34787 1.92179 4.38123 1.62886L4.49733 0.605184C4.52157 0.391408 4.68137 0.216413 4.89498 0.169714C5.38457 0.0626815 5.88416 0.00580385 6.39761 0ZM6.39774 1.00638C6.08785 1.00996 5.77877 1.03626 5.47317 1.08496L5.39877 1.7406C5.32928 2.35085 4.96954 2.89254 4.43055 3.19985C3.88827 3.51128 3.22711 3.54876 2.65183 3.30059L2.03866 3.03582C1.64826 3.50159 1.33753 4.0267 1.11869 4.59053L1.66325 4.98446C2.16756 5.34867 2.46541 5.92711 2.46541 6.54225C2.46541 7.15732 2.16756 7.73576 1.66378 8.09956L1.11836 8.49455C1.33702 9.05937 1.6478 9.58548 2.03847 10.0521L2.6563 9.7861C3.22838 9.54059 3.88504 9.57649 4.42585 9.88292C4.96666 10.1893 5.32744 10.7299 5.39815 11.3411L5.47256 12.0012C6.07979 12.1027 6.7002 12.1027 7.30743 12.0012L7.38184 11.3411C7.45064 10.7301 7.81098 10.1877 8.35242 9.88016C8.89392 9.57253 9.55187 9.53643 10.125 9.78301L10.7424 10.0488C11.1327 9.58293 11.4433 9.58548 11.6621 8.49375L11.1175 8.09929C10.6132 7.73509 10.3153 7.15665 10.3153 6.54158C10.3153 5.92643 10.6132 5.348 11.1168 4.98424L11.6607 4.59013C11.4419 4.0262 11.1311 3.50099 10.7407 3.03515L10.1287 3.29938C9.87938 3.40784 9.60961 3.46366 9.33719 3.46324C8.33398 3.46221 7.49208 2.71979 7.38259 1.74037L7.30819 1.08475C7.00409 1.0361 6.69829 1.00988 6.39774 1.00638ZM6.38907 4.02576C7.80279 4.02576 8.9488 5.15226 8.9488 6.54191C8.9488 7.93148 7.80279 9.05803 6.38907 9.05803C4.9754 9.05803 3.82938 7.93148 3.82938 6.54191C3.82938 5.15226 4.9754 4.02576 6.38907 4.02576ZM6.38907 5.03221C5.54088 5.03221 4.85327 5.7081 4.85327 6.54191C4.85327 7.37565 5.54088 8.05158 6.38907 8.05158C7.23733 8.05158 7.92491 7.37565 7.92491 6.54191C7.92491 5.7081 7.23733 5.03221 6.38907 5.03221Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n </svg>\n }\n </span>\n }\n </button>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\">\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatScheduler) {\n @if (alertStatus.chatMeetupAgenda) {\n <div class=\"alert-popup-client-scheduler\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatMeetupAgenda,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.SpiderChart) {\n @if (alertStatus.compatibilityProfileSpider) {\n <div class=\"alert-popup-spider-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileSpider,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatHandoff) {\n @if (alertStatus.chatHandoff) {\n <div class=\"alert-popup-chat-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatHandoff,\n })\n \"></lib-alert-popup>\n </div>\n }\n @if (alertStatus.chatProgress) {\n <div class=\"alert-popup-chat-progress\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatProgress,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n @if (alertStatus.profileCompare) {\n <div class=\"alert-popup-profile-compare\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.profileCompare,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n @if (alertStatus.datePrepHandoffInfo) {\n <div class=\"alert-popup-date-prep-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.datePrepHandoffInfo,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n }\n\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n <div class=\"trait-visual-container\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div class=\"swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"client\"></lib-scheduler>\n </div>\n }\n @case (ClientViewportTab.SpiderChart) {\n <div class=\"spider-chart-container\" [class.tooltip-active]=\"isSpiderTooltipActive\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\"\n (tooltipActiveChange)=\"onSpiderTooltipChange($event)\"></lib-spider-chart>\n </div>\n }\n @case (ClientViewportTab.ChatHandoff) {\n <div class=\"chat-handoff-wrapper\" style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n <div class=\"date-pref-handoff-card\">\n <lib-handoff-panel [config]=\"handoffDatePrepConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @default {\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n @case (ClientViewportPage.Profile) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Profile</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your profile settings.</p>\n </div>\n }\n @default {\n <!-- Placeholder for other pages -->\n <div style=\"display: flex; justify-content: center; align-items: center; height: 100%; color: white;\">\n <h2>Page {{ activePageIndex }} Content</h2>\n </div>\n }\n }\n </div>\n\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value; updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n\n @if (clientHomeConfig && activePageIndex === ClientViewportPage.Home) {\n <div class=\"chat-heads-belt\">\n <lib-client-home [config]=\"clientHomeConfig\" (activeIndexChange)=\"onChatHeadChange($event)\"\n (rejectRequest)=\"onReject($event)\"></lib-client-home>\n </div>\n }\n <div class=\"viewport-shadow-ellipse\"></div>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-indicator\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Home)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Home\">\n <span class=\"bottom-nav-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.25 8.5L10 3.5L15.75 8.5V15.75H4.25V8.5Z\" fill=\"none\" stroke=\"#666666\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Matches)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Matches\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25952\" layer-name=\"user\" style=\"position:relative\" width=\"27\" height=\"19\"\n viewBox=\"0 0 27 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"match_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Matches) {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"url(#match_active_grad)\" />\n } @else {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Messages)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Messages\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25867\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"msg_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Messages) {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"url(#msg_active_grad)\" />\n } @else {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.UpcomingDates)\"\n [class.active]=\"activePageIndex === ClientViewportPage.UpcomingDates\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25953\" style=\"position:relative\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (activePageIndex === ClientViewportPage.UpcomingDates) {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"url(#paint0_linear_4018_2162)\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"url(#paint1_linear_4018_2162)\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"url(#paint2_linear_4018_2162)\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"url(#paint3_linear_4018_2162)\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"url(#paint4_linear_4018_2162)\"\n stroke-width=\"2\" />\n } @else {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"#666666\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"#666666\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"#666666\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"#666666\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"#666666\" stroke-width=\"2\" />\n }\n <defs>\n <linearGradient id=\"paint0_linear_4018_2162\" x1=\"7.49976\" y1=\"12.5\" x2=\"2.99976\" y2=\"16\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4018_2162\" x1=\"9.94037\" y1=\"11.3359\" x2=\"6.5\" y2=\"16.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint2_linear_4018_2162\" x1=\"16\" y1=\"8\" x2=\"4.5\" y2=\"21.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint3_linear_4018_2162\" x1=\"14.9998\" y1=\"4\" x2=\"-5.00024\" y2=\"18.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFA3E4\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint4_linear_4018_2162\" x1=\"20\" y1=\"8.27014e-07\" x2=\"-35.5\" y2=\"46\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Profile)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Profile\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"profile_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Profile) {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"url(#profile_active_grad)\" />\n } @else {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-client-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden;background:#2c282f}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:130.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-client-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-client-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.design-root.header-hidden .content-scroll{top:calc(var(--lib-client-viewport-header-space, 95px) / 2)}::ng-deep .handoff-panel__content{scrollbar-width:none!important;-ms-overflow-style:none!important}::ng-deep .handoff-panel__content::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.top-nav-notification{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fe3c72,#e15561);box-shadow:0 0 6px #fe3c72cc}.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer;position:relative;width:106px;height:32px}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#353039 .68%,#29252d 99.45%);box-shadow:4px 4px 9px #00000040;filter:blur(4.3px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:center;width:92px;height:27px;border-radius:54px;border:1px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80)}.request-date-label{font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;color:#fff;text-shadow:0 0 3px #ffffff,0 0 15px #fe3c72,0 0 15px #fe3c72}.upcoming-dates{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;box-sizing:border-box;position:relative}.upcoming-dates .alert-popup-agenda{position:absolute;top:30px;right:10px;z-index:999;transform:scale(.75);transform-origin:top right}.upcoming-dates-header{display:flex;align-items:center;gap:6px}.upcoming-dates-title{color:#fff;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:150%;letter-spacing:-.132px}.upcoming-dates-info-icon{display:flex;align-items:center;justify-content:center}.upcoming-dates-info-icon svg{display:block}.upcoming-dates-calendar{margin-top:10px;position:relative}.upcoming-dates-calendar:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#2C282F 0%,transparent 40px,transparent calc(100% - 40px),#2C282F 100%);z-index:10}.upcoming-dates-calendar lib-agenda{display:block;width:100%}.tab-switcher{margin:8px auto 0;padding:0 12px;width:100%;max-width:100%;box-sizing:border-box}.tab-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.tab-pill{position:relative;border:none;padding:4px 10px;background:transparent;color:#fff6;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;font-weight:500;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.tab-pill.active{color:#fff}.tab-icons{display:inline-flex;align-items:center;gap:3px}.tab-icon-info,.tab-icon-settings{width:7px;height:7px;display:block}.tab-content{padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;max-width:100%;height:auto;aspect-ratio:373.02/219.18;overflow:visible;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;pointer-events:none;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;z-index:1}.tab-content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-chat-progress,.tab-content-scroll .alert-popup-client-scheduler,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{position:absolute;z-index:999;right:10px;transform:scale(.75);transform-origin:top right}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{top:20px}.tab-content-scroll .alert-popup-client-scheduler{top:50px}.tab-content-scroll .alert-popup-chat-progress{top:100px}.tab-content-scroll lib-handoff-panel,.tab-content-scroll lib-profile-comparison,.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-chat{--max-width-container: 320px;display:flex;flex-direction:column;flex:1;width:100%;max-width:320px;min-height:0;transform-origin:top center}@media (min-width: 768px){.tab-content-scroll lib-chat{transform:scale(1.5);margin-bottom:150px}}@media (min-width: 1024px){.tab-content-scroll lib-chat{transform:scale(2);margin-bottom:300px}}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel,.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.tab-content .profile-compare-wrapper{position:relative;width:100%;height:100%;overflow-y:scroll}.tab-content-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.spider-chart-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.spider-chart-container lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.spider-chart-container.tooltip-active{align-items:flex-start}.spider-chart-container.tooltip-active lib-spider-chart{width:90%;margin-left:-45px;margin-right:auto;align-self:flex-start}.spider-chart-container .alert-popup-spider-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card{display:flex;align-items:center;justify-content:center;padding:8px 0;position:relative}.date-pref-handoff-card .alert-popup-date-prep-handoff{position:absolute;z-index:999;top:0;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card lib-handoff-panel{display:block;width:100%;background:transparent}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel,.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.4);transform-origin:top center;margin-bottom:100px}@media (min-width: 768px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.7);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(2.2);transform-origin:top center;margin-bottom:400px}}.trait-visual-container{width:100%;height:100%;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.trait-visual-container .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.trait-visual-container tv-trait-visual-canvas,.trait-visual-container .trait-visual-image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:500px;max-width:100%;max-height:100%;position:relative}.trait-visual-container tv-trait-visual-canvas:before,.trait-visual-container .trait-visual-image:before{content:\"\";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at center,rgb(0,0,0) 0%,rgba(0,0,0,.8) 15%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.04) 80%,transparent 100%);pointer-events:none}.trait-visual-container tv-trait-visual-canvas ::ng-deep canvas,.trait-visual-container .trait-visual-image ::ng-deep canvas{width:100%!important;height:100%!important;min-height:500px!important;object-fit:contain!important;position:relative;z-index:1;transform:translateY(-60px)}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;padding:10px;cursor:pointer;white-space:nowrap}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background-color:red;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-pill-right{display:inline-flex;align-items:center;gap:6px}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-toggle{width:22px;height:22px;border-radius:999px;border:none;background:linear-gradient(180deg,#37343c,#201f25);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.pref-match-manager-item-toggle svg{display:block}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.chat-heads-belt{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(var(--lib-client-viewport-footer-space, 60px) + 7px);display:flex;width:100%;max-width:100%;height:54.862px;align-items:center;gap:18.446px;z-index:10}.chat-heads-belt lib-client-home{width:100%;height:100%}.chat-heads-belt ::ng-deep lib-standard-chat-head{transform:scale(.9);transform-origin:center}.chat-heads-belt .tab-bar-container{padding:0 24px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;white-space:nowrap;cursor:grab}.chat-heads-belt .tab-bar-container::-webkit-scrollbar{display:none;width:0;height:0}.chat-heads-belt .tab-bar-container:active{cursor:grabbing}.chat-heads-belt swiper-container{scrollbar-width:none;-ms-overflow-style:none}.chat-heads-belt swiper-container::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-indicator{position:absolute;bottom:4px;width:117px;height:1px;border-radius:13px;background:#fff}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg{transform:scale(1.5);transform-origin:center}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg path{fill:none;stroke:currentColor}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#666}.bottom-nav-item.active{color:#fe3c72}.bottom-nav-item-placeholder .bottom-nav-placeholder{width:20px;height:20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#ffffff0d}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: LibStatusBarComponent, selector: "lib-status-bar" }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config", "menuPosition"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup", "rejectRequest"] }, { kind: "component", type: i9.ProfileComparisonLibComponent, selector: "lib-profile-comparison", inputs: ["config", "backendMode", "backendUrl", "fadeAllEdges"], outputs: ["matrixDataChange", "rawLLMOutputChange", "viewProfileClick"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"], outputs: ["tooltipActiveChange"] }, { kind: "component", type: i11.TraitVisualCanvasComponent, selector: "tv-trait-visual-canvas", inputs: ["config", "assetsBaseUrl", "verboseWebGLLog", "command"], outputs: ["nodeSelected", "rightClick", "frameRendered", "perfStats", "cameraLockChanged", "nodeDataChanged"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "events", "startDate", "endDate", "default", "role"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: LibHandoffPanelComponent, selector: "lib-handoff-panel", inputs: ["config"], outputs: ["addMessage", "scheduleSlotToggle", "activeTabIndexChange", "prospectSelect", "swipeNext", "swipePrev"] }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight", "enableGrouping", "enableDragAndDrop", "enableTabBarScrollDrag", "items", "thumbTemplate", "contentTemplate", "groupingAdapter", "showPrefRejectButton", "menuPosition"], outputs: ["repositionModeChange", "activeIndexChange", "itemClicked", "expandedIdChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10318
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ClientViewportComponent, isStandalone: false, selector: "lib-client-viewport", inputs: { config: "config", showViewportControls: "showViewportControls", showViewportHeader: "showViewportHeader", showViewportFooter: "showViewportFooter", activePage: "activePage", enablePageRouting: "enablePageRouting", pageRouteQueryParamKey: "pageRouteQueryParamKey", pageRouteParamKey: "pageRouteParamKey", pageRouteSegmentName: "pageRouteSegmentName" }, outputs: { back: "back", tabSettingsClick: "tabSettingsClick", activeIndexChange: "activeIndexChange", activePageChange: "activePageChange" }, viewQueries: [{ propertyName: "tabStripRef", first: true, predicate: ["tabStrip"], descendants: true }, { propertyName: "spiderChartComponent", first: true, predicate: SpiderChartComponent, descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">Request Date</span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"clientProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n @if (config?.profile?.name) {\n <div class=\"top-nav-name\" style=\"color: white; font-size: 12px; margin-left: 8px;\">{{ config?.profile?.name }}\n </div>\n }\n </div>\n }\n <div class=\"content-scroll\">\n\n @switch (activePageIndex) {\n @case (ClientViewportPage.UpcomingDates) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline points=\"9 22 9 12 15 12 15 22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Upcoming Dates</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your upcoming dates and events.</p>\n </div>\n }\n @case (ClientViewportPage.Matches) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Matches</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your potential matches.</p>\n </div>\n }\n @case (ClientViewportPage.Messages) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Messages</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Connect with your matches.</p>\n </div>\n }\n @case (ClientViewportPage.Home) {\n <section class=\"upcoming-dates\">\n <div class=\"upcoming-dates-header\">\n <span class=\"upcoming-dates-title\">Upcoming Dates</span>\n <span class=\"upcoming-dates-info-icon\" (click)=\"onTabInfoClick(ClientViewportTab.UpcomingDates, $event)\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#5E5965\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#5E5965\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#5E5965\" />\n </svg>\n </span>\n </div>\n <div class=\"upcoming-dates-calendar\">\n <lib-agenda [events]=\"upcomingEvents\"></lib-agenda>\n </div>\n @if (alertStatus.upcomingDates) {\n <div class=\"alert-popup-agenda\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.upcomingDates,\n })\n \"></lib-alert-popup>\n </div>\n }\n </section>\n\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip\n (mousedown)=\"onTabStripMouseDown($event)\"\n (touchstart)=\"onTabStripTouchStart($event)\"\n (touchmove)=\"onTabStripTouchMove($event)\"\n (touchend)=\"onTabStripTouchEnd()\">\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <button #tabButton class=\"tab-pill\" type=\"button\" [class.active]=\"tab.key === activeTabKey\"\n (click)=\"setActiveTab(tab.key)\" [attr.data-key]=\"tab.key\">\n <span class=\"tab-label\">{{ tab.label }}</span>\n @if (tab.key === activeTabKey) {\n <span class=\"tab-icons\">\n <svg class=\"tab-icon-info\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabInfoClick(tab.key, $event)\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#D3D3D3\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#D3D3D3\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#D3D3D3\" />\n </svg>\n @if (tab.hasSettings) {\n <svg class=\"tab-icon-settings\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0ZM3.39528 0.521714C3.23082 0.523571 3.06679 0.537203 2.90461 0.562452L2.86512 0.90234C2.82825 1.21869 2.63733 1.49951 2.35129 1.65882C2.0635 1.82027 1.71262 1.8397 1.40733 1.71105L1.08192 1.57379C0.874732 1.81524 0.709828 2.08746 0.593686 2.37976L0.882687 2.58397C1.15032 2.77278 1.30839 3.07265 1.30839 3.39154C1.30839 3.7104 1.15032 4.01026 0.88297 4.19886L0.593513 4.40363C0.709556 4.69643 0.874486 4.96917 1.08181 5.21109L1.4097 5.07317C1.7133 4.9459 2.06179 4.96451 2.3488 5.12336C2.6358 5.28222 2.82727 5.56243 2.8648 5.87927L2.90428 6.2215C3.22654 6.27413 3.55579 6.27413 3.87805 6.2215L3.91754 5.87931C3.95405 5.56257 4.14529 5.28138 4.43262 5.12194C4.72 4.96246 5.06917 4.94374 5.37332 5.07157L5.70098 5.20938C5.90811 4.96785 6.07297 4.69556 6.18907 4.40321L5.90003 4.19872C5.6324 4.00992 5.47432 3.71005 5.47432 3.39119C5.47432 3.0723 5.6324 2.77243 5.89971 2.58386L6.18835 2.37955C6.07221 2.08721 5.90728 1.81493 5.70007 1.57344L5.37531 1.71042C5.24298 1.76664 5.09982 1.79558 4.95524 1.79536C4.42284 1.79483 3.97604 1.40996 3.91794 0.902218L3.87845 0.562341C3.71707 0.537123 3.55478 0.523529 3.39528 0.521714ZM3.39068 2.08698C4.14094 2.08698 4.74912 2.67096 4.74912 3.39137C4.74912 4.11173 4.14094 4.69574 3.39068 4.69574C2.64044 4.69574 2.03225 4.11173 2.03225 3.39137C2.03225 2.67096 2.64044 2.08698 3.39068 2.08698ZM3.39068 2.60873C2.94055 2.60873 2.57563 2.95911 2.57563 3.39137C2.57563 3.82358 2.94055 4.17399 3.39068 4.17399C3.84085 4.17399 4.20575 3.82358 4.20575 3.39137C4.20575 2.95911 3.84085 2.60873 3.39068 2.60873Z\"\n fill=\"#D3D3D3\" />\n </svg>\n }\n @if (false) {\n <svg class=\"tab-icon-settings\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M6.39761 0C6.89863 0.00567637 7.39767 0.0625743 7.88668 0.169781C8.1002 0.216581 8.25986 0.391515 8.28409 0.605184L8.40026 1.62965C8.45282 2.10003 8.85685 2.4563 9.33856 2.45679C9.46798 2.45699 9.5961 2.43049 9.71569 2.37846L10.6718 1.96563C10.8706 1.87977 11.1029 1.92658 11.2514 2.08242C11.9423 2.80775 12.4568 3.67766 12.7563 4.62669C12.8209 4.83134 12.7466 5.05373 12.5711 5.18086L11.7237 5.79486C11.482 5.96944 11.3392 6.24669 11.3392 6.54158C11.3392 6.8364 11.482 7.11364 11.7242 7.28863L12.5724 7.90283C12.7479 8.02991 12.8223 8.25234 12.7577 8.45705C12.4583 9.40593 11.9441 10.2758 11.2536 11.0012C11.1052 11.157 10.8731 11.204 10.6743 11.1183L9.71432 10.7049C9.43972 10.5868 9.12429 10.6041 8.86477 10.7515C8.60525 10.899 8.43248 11.159 8.39951 11.4518L8.28409 12.4762C8.26033 12.6874 8.10409 12.8612 7.89378 12.9104C6.90505 13.1416 5.87494 13.1416 4.88626 12.9104C4.67594 12.8612 4.51972 12.6874 4.49592 12.4762L4.38068 11.4534C4.34684 11.161 4.17385 10.9018 3.91452 10.7549C3.65519 10.608 3.34031 10.5907 3.06658 10.7082L2.10643 11.1217C1.90755 11.2073 1.67535 11.1604 1.52705 11.0044C0.836161 10.2782 0.321875 9.40727 0.0228998 8.45738C-0.0414892 8.25281 0.0329134 8.03051 0.208326 7.9035L1.05701 7.2889C1.29875 7.11431 1.44152 6.83707 1.44152 6.54225C1.44152 6.24736 1.29875 5.97011 1.0567 5.79533L0.208545 5.18176C0.0328656 5.05468 -0.0416053 4.83214 0.0230158 4.62737C0.322503 3.67833 0.837062 2.80842 1.52797 2.08309C1.67641 1.92725 1.90873 1.88044 2.10757 1.9663L3.06345 2.37905C3.33851 2.49771 3.6547 2.47979 3.91543 2.33005C4.17504 2.18204 4.34787 1.92179 4.38123 1.62886L4.49733 0.605184C4.52157 0.391408 4.68137 0.216413 4.89498 0.169714C5.38457 0.0626815 5.88416 0.00580385 6.39761 0ZM6.39774 1.00638C6.08785 1.00996 5.77877 1.03626 5.47317 1.08496L5.39877 1.7406C5.32928 2.35085 4.96954 2.89254 4.43055 3.19985C3.88827 3.51128 3.22711 3.54876 2.65183 3.30059L2.03866 3.03582C1.64826 3.50159 1.33753 4.0267 1.11869 4.59053L1.66325 4.98446C2.16756 5.34867 2.46541 5.92711 2.46541 6.54225C2.46541 7.15732 2.16756 7.73576 1.66378 8.09956L1.11836 8.49455C1.33702 9.05937 1.6478 9.58548 2.03847 10.0521L2.6563 9.7861C3.22838 9.54059 3.88504 9.57649 4.42585 9.88292C4.96666 10.1893 5.32744 10.7299 5.39815 11.3411L5.47256 12.0012C6.07979 12.1027 6.7002 12.1027 7.30743 12.0012L7.38184 11.3411C7.45064 10.7301 7.81098 10.1877 8.35242 9.88016C8.89392 9.57253 9.55187 9.53643 10.125 9.78301L10.7424 10.0488C11.1327 9.58293 11.4433 9.58548 11.6621 8.49375L11.1175 8.09929C10.6132 7.73509 10.3153 7.15665 10.3153 6.54158C10.3153 5.92643 10.6132 5.348 11.1168 4.98424L11.6607 4.59013C11.4419 4.0262 11.1311 3.50099 10.7407 3.03515L10.1287 3.29938C9.87938 3.40784 9.60961 3.46366 9.33719 3.46324C8.33398 3.46221 7.49208 2.71979 7.38259 1.74037L7.30819 1.08475C7.00409 1.0361 6.69829 1.00988 6.39774 1.00638ZM6.38907 4.02576C7.80279 4.02576 8.9488 5.15226 8.9488 6.54191C8.9488 7.93148 7.80279 9.05803 6.38907 9.05803C4.9754 9.05803 3.82938 7.93148 3.82938 6.54191C3.82938 5.15226 4.9754 4.02576 6.38907 4.02576ZM6.38907 5.03221C5.54088 5.03221 4.85327 5.7081 4.85327 6.54191C4.85327 7.37565 5.54088 8.05158 6.38907 8.05158C7.23733 8.05158 7.92491 7.37565 7.92491 6.54191C7.92491 5.7081 7.23733 5.03221 6.38907 5.03221Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n </svg>\n }\n </span>\n }\n </button>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\">\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatScheduler) {\n @if (alertStatus.chatMeetupAgenda) {\n <div class=\"alert-popup-client-scheduler\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatMeetupAgenda,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.SpiderChart) {\n @if (alertStatus.compatibilityProfileSpider) {\n <div class=\"alert-popup-spider-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileSpider,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatHandoff) {\n @if (alertStatus.chatHandoff) {\n <div class=\"alert-popup-chat-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatHandoff,\n })\n \"></lib-alert-popup>\n </div>\n }\n @if (alertStatus.chatProgress) {\n <div class=\"alert-popup-chat-progress\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatProgress,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n @if (alertStatus.profileCompare) {\n <div class=\"alert-popup-profile-compare\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.profileCompare,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n @if (alertStatus.datePrepHandoffInfo) {\n <div class=\"alert-popup-date-prep-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.datePrepHandoffInfo,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n }\n\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n <div class=\"trait-visual-container\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div class=\"swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"client\"></lib-scheduler>\n </div>\n }\n @case (ClientViewportTab.SpiderChart) {\n <div class=\"spider-chart-container\" [class.tooltip-active]=\"isSpiderTooltipActive\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\"\n (tooltipActiveChange)=\"onSpiderTooltipChange($event)\"></lib-spider-chart>\n </div>\n }\n @case (ClientViewportTab.ChatHandoff) {\n <div class=\"chat-handoff-wrapper\" style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n <div class=\"date-pref-handoff-card\">\n <lib-handoff-panel [config]=\"handoffDatePrepConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @default {\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n @case (ClientViewportPage.Profile) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Profile</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your profile settings.</p>\n </div>\n }\n @default {\n <!-- Placeholder for other pages -->\n <div style=\"display: flex; justify-content: center; align-items: center; height: 100%; color: white;\">\n <h2>Page {{ activePageIndex }} Content</h2>\n </div>\n }\n }\n </div>\n\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value; updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n\n @if (clientHomeConfig && activePageIndex === ClientViewportPage.Home) {\n <div class=\"chat-heads-belt\">\n <lib-client-home [config]=\"clientHomeConfig\" (activeIndexChange)=\"onChatHeadChange($event)\"\n (rejectRequest)=\"onReject($event)\"></lib-client-home>\n </div>\n }\n <div class=\"viewport-shadow-ellipse\"></div>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-indicator\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Home)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Home\">\n <span class=\"bottom-nav-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.25 8.5L10 3.5L15.75 8.5V15.75H4.25V8.5Z\" fill=\"none\" stroke=\"#666666\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Matches)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Matches\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25952\" layer-name=\"user\" style=\"position:relative\" width=\"27\" height=\"19\"\n viewBox=\"0 0 27 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"match_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Matches) {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"url(#match_active_grad)\" />\n } @else {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Messages)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Messages\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25867\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"msg_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Messages) {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"url(#msg_active_grad)\" />\n } @else {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.UpcomingDates)\"\n [class.active]=\"activePageIndex === ClientViewportPage.UpcomingDates\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25953\" style=\"position:relative\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (activePageIndex === ClientViewportPage.UpcomingDates) {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"url(#paint0_linear_4018_2162)\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"url(#paint1_linear_4018_2162)\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"url(#paint2_linear_4018_2162)\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"url(#paint3_linear_4018_2162)\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"url(#paint4_linear_4018_2162)\"\n stroke-width=\"2\" />\n } @else {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"#666666\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"#666666\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"#666666\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"#666666\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"#666666\" stroke-width=\"2\" />\n }\n <defs>\n <linearGradient id=\"paint0_linear_4018_2162\" x1=\"7.49976\" y1=\"12.5\" x2=\"2.99976\" y2=\"16\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4018_2162\" x1=\"9.94037\" y1=\"11.3359\" x2=\"6.5\" y2=\"16.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint2_linear_4018_2162\" x1=\"16\" y1=\"8\" x2=\"4.5\" y2=\"21.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint3_linear_4018_2162\" x1=\"14.9998\" y1=\"4\" x2=\"-5.00024\" y2=\"18.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFA3E4\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint4_linear_4018_2162\" x1=\"20\" y1=\"8.27014e-07\" x2=\"-35.5\" y2=\"46\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Profile)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Profile\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"profile_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Profile) {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"url(#profile_active_grad)\" />\n } @else {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-client-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden;background:#2c282f}.design-root.header-hidden,.design-root.footer-hidden{background:transparent;pointer-events:none}.design-root.header-hidden .content-scroll,.design-root.footer-hidden .content-scroll{pointer-events:auto;background:#2c282f;background-clip:content-box}.design-root.footer-hidden .content-scroll{bottom:var(--lib-client-viewport-footer-space, 60px);padding-bottom:0}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:130.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-client-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-client-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}::ng-deep .handoff-panel__content{scrollbar-width:none!important;-ms-overflow-style:none!important}::ng-deep .handoff-panel__content::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.top-nav-notification{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fe3c72,#e15561);box-shadow:0 0 6px #fe3c72cc}.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer;position:relative;width:106px;height:32px}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#353039 .68%,#29252d 99.45%);box-shadow:4px 4px 9px #00000040;filter:blur(4.3px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:center;width:92px;height:27px;border-radius:54px;border:1px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80)}.request-date-label{font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;color:#fff;text-shadow:0 0 3px #ffffff,0 0 15px #fe3c72,0 0 15px #fe3c72}.upcoming-dates{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;box-sizing:border-box;position:relative}.upcoming-dates .alert-popup-agenda{position:absolute;top:30px;right:10px;z-index:999;transform:scale(.75);transform-origin:top right}.upcoming-dates-header{display:flex;align-items:center;gap:6px}.upcoming-dates-title{color:#fff;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:150%;letter-spacing:-.132px}.upcoming-dates-info-icon{display:flex;align-items:center;justify-content:center}.upcoming-dates-info-icon svg{display:block}.upcoming-dates-calendar{margin-top:10px;position:relative}.upcoming-dates-calendar:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#2C282F 0%,transparent 40px,transparent calc(100% - 40px),#2C282F 100%);z-index:10}.upcoming-dates-calendar lib-agenda{display:block;width:100%}.tab-switcher{margin:8px auto 0;padding:0 12px;width:100%;max-width:100%;box-sizing:border-box}.tab-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.tab-pill{position:relative;border:none;padding:4px 10px;background:transparent;color:#fff6;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;font-weight:500;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.tab-pill.active{color:#fff}.tab-icons{display:inline-flex;align-items:center;gap:3px}.tab-icon-info,.tab-icon-settings{width:7px;height:7px;display:block}.tab-content{padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;max-width:100%;height:auto;aspect-ratio:373.02/219.18;overflow:visible;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;pointer-events:none;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;z-index:1}.tab-content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-chat-progress,.tab-content-scroll .alert-popup-client-scheduler,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{position:absolute;z-index:999;right:10px;transform:scale(.75);transform-origin:top right}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{top:20px}.tab-content-scroll .alert-popup-client-scheduler{top:50px}.tab-content-scroll .alert-popup-chat-progress{top:100px}.tab-content-scroll lib-handoff-panel,.tab-content-scroll lib-profile-comparison,.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-chat{--max-width-container: 320px;display:flex;flex-direction:column;flex:1;width:100%;max-width:320px;min-height:0;transform-origin:top center}@media (min-width: 768px){.tab-content-scroll lib-chat{transform:scale(1.5);margin-bottom:150px}}@media (min-width: 1024px){.tab-content-scroll lib-chat{transform:scale(2);margin-bottom:300px}}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel,.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.tab-content .profile-compare-wrapper{position:relative;width:100%;height:100%;overflow-y:scroll}.tab-content-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.spider-chart-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.spider-chart-container lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.spider-chart-container.tooltip-active{align-items:flex-start}.spider-chart-container.tooltip-active lib-spider-chart{width:90%;margin-left:-45px;margin-right:auto;align-self:flex-start}.spider-chart-container .alert-popup-spider-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card{display:flex;align-items:center;justify-content:center;padding:8px 0;position:relative}.date-pref-handoff-card .alert-popup-date-prep-handoff{position:absolute;z-index:999;top:0;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card lib-handoff-panel{display:block;width:100%;background:transparent}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel,.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.4);transform-origin:top center;margin-bottom:100px}@media (min-width: 768px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.7);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(2.2);transform-origin:top center;margin-bottom:400px}}.trait-visual-container{width:100%;height:100%;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.trait-visual-container .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.trait-visual-container tv-trait-visual-canvas,.trait-visual-container .trait-visual-image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:500px;max-width:100%;max-height:100%;position:relative}.trait-visual-container tv-trait-visual-canvas:before,.trait-visual-container .trait-visual-image:before{content:\"\";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at center,rgb(0,0,0) 0%,rgba(0,0,0,.8) 15%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.04) 80%,transparent 100%);pointer-events:none}.trait-visual-container tv-trait-visual-canvas ::ng-deep canvas,.trait-visual-container .trait-visual-image ::ng-deep canvas{width:100%!important;height:100%!important;min-height:500px!important;object-fit:contain!important;position:relative;z-index:1;transform:translateY(-60px)}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;padding:10px;cursor:pointer;white-space:nowrap}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background-color:red;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-pill-right{display:inline-flex;align-items:center;gap:6px}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-toggle{width:22px;height:22px;border-radius:999px;border:none;background:linear-gradient(180deg,#37343c,#201f25);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.pref-match-manager-item-toggle svg{display:block}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.chat-heads-belt{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(var(--lib-client-viewport-footer-space, 60px) + 7px);display:flex;width:100%;max-width:100%;height:54.862px;align-items:center;gap:18.446px;z-index:10}.chat-heads-belt lib-client-home{width:100%;height:100%}.chat-heads-belt ::ng-deep lib-standard-chat-head{transform:scale(.9);transform-origin:center}.chat-heads-belt .tab-bar-container{padding:0 24px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;white-space:nowrap;cursor:grab}.chat-heads-belt .tab-bar-container::-webkit-scrollbar{display:none;width:0;height:0}.chat-heads-belt .tab-bar-container:active{cursor:grabbing}.chat-heads-belt swiper-container{scrollbar-width:none;-ms-overflow-style:none}.chat-heads-belt swiper-container::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-indicator{position:absolute;bottom:4px;width:117px;height:1px;border-radius:13px;background:#fff}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg{transform:scale(1.5);transform-origin:center}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg path{fill:none;stroke:currentColor}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#666}.bottom-nav-item.active{color:#fe3c72}.bottom-nav-item-placeholder .bottom-nav-placeholder{width:20px;height:20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#ffffff0d}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: LibStatusBarComponent, selector: "lib-status-bar" }, { kind: "component", type: AgendaComponent, selector: "lib-agenda", inputs: ["adsTemplate", "agendaAdsData", "loading$", "startDate", "endDate", "events", "setAdsData"] }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config", "menuPosition"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup", "rejectRequest"] }, { kind: "component", type: i9.ProfileComparisonLibComponent, selector: "lib-profile-comparison", inputs: ["config", "backendMode", "backendUrl", "fadeAllEdges"], outputs: ["matrixDataChange", "rawLLMOutputChange", "viewProfileClick"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"], outputs: ["tooltipActiveChange"] }, { kind: "component", type: i11.TraitVisualCanvasComponent, selector: "tv-trait-visual-canvas", inputs: ["config", "assetsBaseUrl", "verboseWebGLLog", "command"], outputs: ["nodeSelected", "rightClick", "frameRendered", "perfStats", "cameraLockChanged", "nodeDataChanged"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "events", "startDate", "endDate", "default", "role"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: LibHandoffPanelComponent, selector: "lib-handoff-panel", inputs: ["config"], outputs: ["addMessage", "scheduleSlotToggle", "activeTabIndexChange", "prospectSelect", "swipeNext", "swipePrev"] }, { kind: "component", type: AlertPopupComponent, selector: "lib-alert-popup", inputs: ["title", "description", "timeState", "number"], outputs: ["closed"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight", "enableGrouping", "enableDragAndDrop", "enableTabBarScrollDrag", "items", "thumbTemplate", "contentTemplate", "groupingAdapter", "showPrefRejectButton", "menuPosition"], outputs: ["repositionModeChange", "activeIndexChange", "itemClicked", "expandedIdChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10319
10319
  }
10320
10320
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ClientViewportComponent, decorators: [{
10321
10321
  type: Component,
10322
- args: [{ selector: 'lib-client-viewport', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">Request Date</span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"clientProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n @if (config?.profile?.name) {\n <div class=\"top-nav-name\" style=\"color: white; font-size: 12px; margin-left: 8px;\">{{ config?.profile?.name }}\n </div>\n }\n </div>\n }\n <div class=\"content-scroll\">\n\n @switch (activePageIndex) {\n @case (ClientViewportPage.UpcomingDates) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline points=\"9 22 9 12 15 12 15 22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Upcoming Dates</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your upcoming dates and events.</p>\n </div>\n }\n @case (ClientViewportPage.Matches) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Matches</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your potential matches.</p>\n </div>\n }\n @case (ClientViewportPage.Messages) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Messages</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Connect with your matches.</p>\n </div>\n }\n @case (ClientViewportPage.Home) {\n <section class=\"upcoming-dates\">\n <div class=\"upcoming-dates-header\">\n <span class=\"upcoming-dates-title\">Upcoming Dates</span>\n <span class=\"upcoming-dates-info-icon\" (click)=\"onTabInfoClick(ClientViewportTab.UpcomingDates, $event)\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#5E5965\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#5E5965\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#5E5965\" />\n </svg>\n </span>\n </div>\n <div class=\"upcoming-dates-calendar\">\n <lib-agenda [events]=\"upcomingEvents\"></lib-agenda>\n </div>\n @if (alertStatus.upcomingDates) {\n <div class=\"alert-popup-agenda\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.upcomingDates,\n })\n \"></lib-alert-popup>\n </div>\n }\n </section>\n\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip\n (mousedown)=\"onTabStripMouseDown($event)\"\n (touchstart)=\"onTabStripTouchStart($event)\"\n (touchmove)=\"onTabStripTouchMove($event)\"\n (touchend)=\"onTabStripTouchEnd()\">\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <button #tabButton class=\"tab-pill\" type=\"button\" [class.active]=\"tab.key === activeTabKey\"\n (click)=\"setActiveTab(tab.key)\" [attr.data-key]=\"tab.key\">\n <span class=\"tab-label\">{{ tab.label }}</span>\n @if (tab.key === activeTabKey) {\n <span class=\"tab-icons\">\n <svg class=\"tab-icon-info\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabInfoClick(tab.key, $event)\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#D3D3D3\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#D3D3D3\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#D3D3D3\" />\n </svg>\n @if (tab.hasSettings) {\n <svg class=\"tab-icon-settings\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0ZM3.39528 0.521714C3.23082 0.523571 3.06679 0.537203 2.90461 0.562452L2.86512 0.90234C2.82825 1.21869 2.63733 1.49951 2.35129 1.65882C2.0635 1.82027 1.71262 1.8397 1.40733 1.71105L1.08192 1.57379C0.874732 1.81524 0.709828 2.08746 0.593686 2.37976L0.882687 2.58397C1.15032 2.77278 1.30839 3.07265 1.30839 3.39154C1.30839 3.7104 1.15032 4.01026 0.88297 4.19886L0.593513 4.40363C0.709556 4.69643 0.874486 4.96917 1.08181 5.21109L1.4097 5.07317C1.7133 4.9459 2.06179 4.96451 2.3488 5.12336C2.6358 5.28222 2.82727 5.56243 2.8648 5.87927L2.90428 6.2215C3.22654 6.27413 3.55579 6.27413 3.87805 6.2215L3.91754 5.87931C3.95405 5.56257 4.14529 5.28138 4.43262 5.12194C4.72 4.96246 5.06917 4.94374 5.37332 5.07157L5.70098 5.20938C5.90811 4.96785 6.07297 4.69556 6.18907 4.40321L5.90003 4.19872C5.6324 4.00992 5.47432 3.71005 5.47432 3.39119C5.47432 3.0723 5.6324 2.77243 5.89971 2.58386L6.18835 2.37955C6.07221 2.08721 5.90728 1.81493 5.70007 1.57344L5.37531 1.71042C5.24298 1.76664 5.09982 1.79558 4.95524 1.79536C4.42284 1.79483 3.97604 1.40996 3.91794 0.902218L3.87845 0.562341C3.71707 0.537123 3.55478 0.523529 3.39528 0.521714ZM3.39068 2.08698C4.14094 2.08698 4.74912 2.67096 4.74912 3.39137C4.74912 4.11173 4.14094 4.69574 3.39068 4.69574C2.64044 4.69574 2.03225 4.11173 2.03225 3.39137C2.03225 2.67096 2.64044 2.08698 3.39068 2.08698ZM3.39068 2.60873C2.94055 2.60873 2.57563 2.95911 2.57563 3.39137C2.57563 3.82358 2.94055 4.17399 3.39068 4.17399C3.84085 4.17399 4.20575 3.82358 4.20575 3.39137C4.20575 2.95911 3.84085 2.60873 3.39068 2.60873Z\"\n fill=\"#D3D3D3\" />\n </svg>\n }\n @if (false) {\n <svg class=\"tab-icon-settings\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M6.39761 0C6.89863 0.00567637 7.39767 0.0625743 7.88668 0.169781C8.1002 0.216581 8.25986 0.391515 8.28409 0.605184L8.40026 1.62965C8.45282 2.10003 8.85685 2.4563 9.33856 2.45679C9.46798 2.45699 9.5961 2.43049 9.71569 2.37846L10.6718 1.96563C10.8706 1.87977 11.1029 1.92658 11.2514 2.08242C11.9423 2.80775 12.4568 3.67766 12.7563 4.62669C12.8209 4.83134 12.7466 5.05373 12.5711 5.18086L11.7237 5.79486C11.482 5.96944 11.3392 6.24669 11.3392 6.54158C11.3392 6.8364 11.482 7.11364 11.7242 7.28863L12.5724 7.90283C12.7479 8.02991 12.8223 8.25234 12.7577 8.45705C12.4583 9.40593 11.9441 10.2758 11.2536 11.0012C11.1052 11.157 10.8731 11.204 10.6743 11.1183L9.71432 10.7049C9.43972 10.5868 9.12429 10.6041 8.86477 10.7515C8.60525 10.899 8.43248 11.159 8.39951 11.4518L8.28409 12.4762C8.26033 12.6874 8.10409 12.8612 7.89378 12.9104C6.90505 13.1416 5.87494 13.1416 4.88626 12.9104C4.67594 12.8612 4.51972 12.6874 4.49592 12.4762L4.38068 11.4534C4.34684 11.161 4.17385 10.9018 3.91452 10.7549C3.65519 10.608 3.34031 10.5907 3.06658 10.7082L2.10643 11.1217C1.90755 11.2073 1.67535 11.1604 1.52705 11.0044C0.836161 10.2782 0.321875 9.40727 0.0228998 8.45738C-0.0414892 8.25281 0.0329134 8.03051 0.208326 7.9035L1.05701 7.2889C1.29875 7.11431 1.44152 6.83707 1.44152 6.54225C1.44152 6.24736 1.29875 5.97011 1.0567 5.79533L0.208545 5.18176C0.0328656 5.05468 -0.0416053 4.83214 0.0230158 4.62737C0.322503 3.67833 0.837062 2.80842 1.52797 2.08309C1.67641 1.92725 1.90873 1.88044 2.10757 1.9663L3.06345 2.37905C3.33851 2.49771 3.6547 2.47979 3.91543 2.33005C4.17504 2.18204 4.34787 1.92179 4.38123 1.62886L4.49733 0.605184C4.52157 0.391408 4.68137 0.216413 4.89498 0.169714C5.38457 0.0626815 5.88416 0.00580385 6.39761 0ZM6.39774 1.00638C6.08785 1.00996 5.77877 1.03626 5.47317 1.08496L5.39877 1.7406C5.32928 2.35085 4.96954 2.89254 4.43055 3.19985C3.88827 3.51128 3.22711 3.54876 2.65183 3.30059L2.03866 3.03582C1.64826 3.50159 1.33753 4.0267 1.11869 4.59053L1.66325 4.98446C2.16756 5.34867 2.46541 5.92711 2.46541 6.54225C2.46541 7.15732 2.16756 7.73576 1.66378 8.09956L1.11836 8.49455C1.33702 9.05937 1.6478 9.58548 2.03847 10.0521L2.6563 9.7861C3.22838 9.54059 3.88504 9.57649 4.42585 9.88292C4.96666 10.1893 5.32744 10.7299 5.39815 11.3411L5.47256 12.0012C6.07979 12.1027 6.7002 12.1027 7.30743 12.0012L7.38184 11.3411C7.45064 10.7301 7.81098 10.1877 8.35242 9.88016C8.89392 9.57253 9.55187 9.53643 10.125 9.78301L10.7424 10.0488C11.1327 9.58293 11.4433 9.58548 11.6621 8.49375L11.1175 8.09929C10.6132 7.73509 10.3153 7.15665 10.3153 6.54158C10.3153 5.92643 10.6132 5.348 11.1168 4.98424L11.6607 4.59013C11.4419 4.0262 11.1311 3.50099 10.7407 3.03515L10.1287 3.29938C9.87938 3.40784 9.60961 3.46366 9.33719 3.46324C8.33398 3.46221 7.49208 2.71979 7.38259 1.74037L7.30819 1.08475C7.00409 1.0361 6.69829 1.00988 6.39774 1.00638ZM6.38907 4.02576C7.80279 4.02576 8.9488 5.15226 8.9488 6.54191C8.9488 7.93148 7.80279 9.05803 6.38907 9.05803C4.9754 9.05803 3.82938 7.93148 3.82938 6.54191C3.82938 5.15226 4.9754 4.02576 6.38907 4.02576ZM6.38907 5.03221C5.54088 5.03221 4.85327 5.7081 4.85327 6.54191C4.85327 7.37565 5.54088 8.05158 6.38907 8.05158C7.23733 8.05158 7.92491 7.37565 7.92491 6.54191C7.92491 5.7081 7.23733 5.03221 6.38907 5.03221Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n </svg>\n }\n </span>\n }\n </button>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\">\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatScheduler) {\n @if (alertStatus.chatMeetupAgenda) {\n <div class=\"alert-popup-client-scheduler\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatMeetupAgenda,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.SpiderChart) {\n @if (alertStatus.compatibilityProfileSpider) {\n <div class=\"alert-popup-spider-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileSpider,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatHandoff) {\n @if (alertStatus.chatHandoff) {\n <div class=\"alert-popup-chat-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatHandoff,\n })\n \"></lib-alert-popup>\n </div>\n }\n @if (alertStatus.chatProgress) {\n <div class=\"alert-popup-chat-progress\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatProgress,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n @if (alertStatus.profileCompare) {\n <div class=\"alert-popup-profile-compare\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.profileCompare,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n @if (alertStatus.datePrepHandoffInfo) {\n <div class=\"alert-popup-date-prep-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.datePrepHandoffInfo,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n }\n\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n <div class=\"trait-visual-container\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div class=\"swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"client\"></lib-scheduler>\n </div>\n }\n @case (ClientViewportTab.SpiderChart) {\n <div class=\"spider-chart-container\" [class.tooltip-active]=\"isSpiderTooltipActive\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\"\n (tooltipActiveChange)=\"onSpiderTooltipChange($event)\"></lib-spider-chart>\n </div>\n }\n @case (ClientViewportTab.ChatHandoff) {\n <div class=\"chat-handoff-wrapper\" style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n <div class=\"date-pref-handoff-card\">\n <lib-handoff-panel [config]=\"handoffDatePrepConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @default {\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n @case (ClientViewportPage.Profile) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Profile</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your profile settings.</p>\n </div>\n }\n @default {\n <!-- Placeholder for other pages -->\n <div style=\"display: flex; justify-content: center; align-items: center; height: 100%; color: white;\">\n <h2>Page {{ activePageIndex }} Content</h2>\n </div>\n }\n }\n </div>\n\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value; updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n\n @if (clientHomeConfig && activePageIndex === ClientViewportPage.Home) {\n <div class=\"chat-heads-belt\">\n <lib-client-home [config]=\"clientHomeConfig\" (activeIndexChange)=\"onChatHeadChange($event)\"\n (rejectRequest)=\"onReject($event)\"></lib-client-home>\n </div>\n }\n <div class=\"viewport-shadow-ellipse\"></div>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-indicator\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Home)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Home\">\n <span class=\"bottom-nav-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.25 8.5L10 3.5L15.75 8.5V15.75H4.25V8.5Z\" fill=\"none\" stroke=\"#666666\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Matches)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Matches\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25952\" layer-name=\"user\" style=\"position:relative\" width=\"27\" height=\"19\"\n viewBox=\"0 0 27 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"match_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Matches) {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"url(#match_active_grad)\" />\n } @else {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Messages)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Messages\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25867\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"msg_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Messages) {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"url(#msg_active_grad)\" />\n } @else {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.UpcomingDates)\"\n [class.active]=\"activePageIndex === ClientViewportPage.UpcomingDates\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25953\" style=\"position:relative\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (activePageIndex === ClientViewportPage.UpcomingDates) {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"url(#paint0_linear_4018_2162)\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"url(#paint1_linear_4018_2162)\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"url(#paint2_linear_4018_2162)\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"url(#paint3_linear_4018_2162)\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"url(#paint4_linear_4018_2162)\"\n stroke-width=\"2\" />\n } @else {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"#666666\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"#666666\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"#666666\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"#666666\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"#666666\" stroke-width=\"2\" />\n }\n <defs>\n <linearGradient id=\"paint0_linear_4018_2162\" x1=\"7.49976\" y1=\"12.5\" x2=\"2.99976\" y2=\"16\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4018_2162\" x1=\"9.94037\" y1=\"11.3359\" x2=\"6.5\" y2=\"16.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint2_linear_4018_2162\" x1=\"16\" y1=\"8\" x2=\"4.5\" y2=\"21.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint3_linear_4018_2162\" x1=\"14.9998\" y1=\"4\" x2=\"-5.00024\" y2=\"18.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFA3E4\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint4_linear_4018_2162\" x1=\"20\" y1=\"8.27014e-07\" x2=\"-35.5\" y2=\"46\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Profile)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Profile\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"profile_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Profile) {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"url(#profile_active_grad)\" />\n } @else {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-client-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden;background:#2c282f}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:130.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-client-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-client-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.design-root.header-hidden .content-scroll{top:calc(var(--lib-client-viewport-header-space, 95px) / 2)}::ng-deep .handoff-panel__content{scrollbar-width:none!important;-ms-overflow-style:none!important}::ng-deep .handoff-panel__content::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.top-nav-notification{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fe3c72,#e15561);box-shadow:0 0 6px #fe3c72cc}.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer;position:relative;width:106px;height:32px}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#353039 .68%,#29252d 99.45%);box-shadow:4px 4px 9px #00000040;filter:blur(4.3px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:center;width:92px;height:27px;border-radius:54px;border:1px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80)}.request-date-label{font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;color:#fff;text-shadow:0 0 3px #ffffff,0 0 15px #fe3c72,0 0 15px #fe3c72}.upcoming-dates{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;box-sizing:border-box;position:relative}.upcoming-dates .alert-popup-agenda{position:absolute;top:30px;right:10px;z-index:999;transform:scale(.75);transform-origin:top right}.upcoming-dates-header{display:flex;align-items:center;gap:6px}.upcoming-dates-title{color:#fff;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:150%;letter-spacing:-.132px}.upcoming-dates-info-icon{display:flex;align-items:center;justify-content:center}.upcoming-dates-info-icon svg{display:block}.upcoming-dates-calendar{margin-top:10px;position:relative}.upcoming-dates-calendar:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#2C282F 0%,transparent 40px,transparent calc(100% - 40px),#2C282F 100%);z-index:10}.upcoming-dates-calendar lib-agenda{display:block;width:100%}.tab-switcher{margin:8px auto 0;padding:0 12px;width:100%;max-width:100%;box-sizing:border-box}.tab-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.tab-pill{position:relative;border:none;padding:4px 10px;background:transparent;color:#fff6;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;font-weight:500;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.tab-pill.active{color:#fff}.tab-icons{display:inline-flex;align-items:center;gap:3px}.tab-icon-info,.tab-icon-settings{width:7px;height:7px;display:block}.tab-content{padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;max-width:100%;height:auto;aspect-ratio:373.02/219.18;overflow:visible;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;pointer-events:none;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;z-index:1}.tab-content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-chat-progress,.tab-content-scroll .alert-popup-client-scheduler,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{position:absolute;z-index:999;right:10px;transform:scale(.75);transform-origin:top right}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{top:20px}.tab-content-scroll .alert-popup-client-scheduler{top:50px}.tab-content-scroll .alert-popup-chat-progress{top:100px}.tab-content-scroll lib-handoff-panel,.tab-content-scroll lib-profile-comparison,.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-chat{--max-width-container: 320px;display:flex;flex-direction:column;flex:1;width:100%;max-width:320px;min-height:0;transform-origin:top center}@media (min-width: 768px){.tab-content-scroll lib-chat{transform:scale(1.5);margin-bottom:150px}}@media (min-width: 1024px){.tab-content-scroll lib-chat{transform:scale(2);margin-bottom:300px}}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel,.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.tab-content .profile-compare-wrapper{position:relative;width:100%;height:100%;overflow-y:scroll}.tab-content-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.spider-chart-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.spider-chart-container lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.spider-chart-container.tooltip-active{align-items:flex-start}.spider-chart-container.tooltip-active lib-spider-chart{width:90%;margin-left:-45px;margin-right:auto;align-self:flex-start}.spider-chart-container .alert-popup-spider-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card{display:flex;align-items:center;justify-content:center;padding:8px 0;position:relative}.date-pref-handoff-card .alert-popup-date-prep-handoff{position:absolute;z-index:999;top:0;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card lib-handoff-panel{display:block;width:100%;background:transparent}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel,.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.4);transform-origin:top center;margin-bottom:100px}@media (min-width: 768px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.7);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(2.2);transform-origin:top center;margin-bottom:400px}}.trait-visual-container{width:100%;height:100%;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.trait-visual-container .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.trait-visual-container tv-trait-visual-canvas,.trait-visual-container .trait-visual-image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:500px;max-width:100%;max-height:100%;position:relative}.trait-visual-container tv-trait-visual-canvas:before,.trait-visual-container .trait-visual-image:before{content:\"\";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at center,rgb(0,0,0) 0%,rgba(0,0,0,.8) 15%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.04) 80%,transparent 100%);pointer-events:none}.trait-visual-container tv-trait-visual-canvas ::ng-deep canvas,.trait-visual-container .trait-visual-image ::ng-deep canvas{width:100%!important;height:100%!important;min-height:500px!important;object-fit:contain!important;position:relative;z-index:1;transform:translateY(-60px)}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;padding:10px;cursor:pointer;white-space:nowrap}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background-color:red;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-pill-right{display:inline-flex;align-items:center;gap:6px}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-toggle{width:22px;height:22px;border-radius:999px;border:none;background:linear-gradient(180deg,#37343c,#201f25);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.pref-match-manager-item-toggle svg{display:block}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.chat-heads-belt{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(var(--lib-client-viewport-footer-space, 60px) + 7px);display:flex;width:100%;max-width:100%;height:54.862px;align-items:center;gap:18.446px;z-index:10}.chat-heads-belt lib-client-home{width:100%;height:100%}.chat-heads-belt ::ng-deep lib-standard-chat-head{transform:scale(.9);transform-origin:center}.chat-heads-belt .tab-bar-container{padding:0 24px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;white-space:nowrap;cursor:grab}.chat-heads-belt .tab-bar-container::-webkit-scrollbar{display:none;width:0;height:0}.chat-heads-belt .tab-bar-container:active{cursor:grabbing}.chat-heads-belt swiper-container{scrollbar-width:none;-ms-overflow-style:none}.chat-heads-belt swiper-container::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-indicator{position:absolute;bottom:4px;width:117px;height:1px;border-radius:13px;background:#fff}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg{transform:scale(1.5);transform-origin:center}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg path{fill:none;stroke:currentColor}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#666}.bottom-nav-item.active{color:#fe3c72}.bottom-nav-item-placeholder .bottom-nav-placeholder{width:20px;height:20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#ffffff0d}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"] }]
10322
+ args: [{ selector: 'lib-client-viewport', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">Request Date</span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"clientProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n @if (config?.profile?.name) {\n <div class=\"top-nav-name\" style=\"color: white; font-size: 12px; margin-left: 8px;\">{{ config?.profile?.name }}\n </div>\n }\n </div>\n }\n <div class=\"content-scroll\">\n\n @switch (activePageIndex) {\n @case (ClientViewportPage.UpcomingDates) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline points=\"9 22 9 12 15 12 15 22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Upcoming Dates</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your upcoming dates and events.</p>\n </div>\n }\n @case (ClientViewportPage.Matches) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Matches</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your potential matches.</p>\n </div>\n }\n @case (ClientViewportPage.Messages) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Messages</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Connect with your matches.</p>\n </div>\n }\n @case (ClientViewportPage.Home) {\n <section class=\"upcoming-dates\">\n <div class=\"upcoming-dates-header\">\n <span class=\"upcoming-dates-title\">Upcoming Dates</span>\n <span class=\"upcoming-dates-info-icon\" (click)=\"onTabInfoClick(ClientViewportTab.UpcomingDates, $event)\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#5E5965\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#5E5965\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#5E5965\" />\n </svg>\n </span>\n </div>\n <div class=\"upcoming-dates-calendar\">\n <lib-agenda [events]=\"upcomingEvents\"></lib-agenda>\n </div>\n @if (alertStatus.upcomingDates) {\n <div class=\"alert-popup-agenda\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.upcomingDates]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.UPCOMING_DATES.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.upcomingDates,\n })\n \"></lib-alert-popup>\n </div>\n }\n </section>\n\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip\n (mousedown)=\"onTabStripMouseDown($event)\"\n (touchstart)=\"onTabStripTouchStart($event)\"\n (touchmove)=\"onTabStripTouchMove($event)\"\n (touchend)=\"onTabStripTouchEnd()\">\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <button #tabButton class=\"tab-pill\" type=\"button\" [class.active]=\"tab.key === activeTabKey\"\n (click)=\"setActiveTab(tab.key)\" [attr.data-key]=\"tab.key\">\n <span class=\"tab-label\">{{ tab.label }}</span>\n @if (tab.key === activeTabKey) {\n <span class=\"tab-icons\">\n <svg class=\"tab-icon-info\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabInfoClick(tab.key, $event)\">\n <path\n d=\"M3.14951 2.06978C3.34832 2.06978 3.50947 1.90861 3.50947 1.70981C3.50947 1.51102 3.34832 1.34985 3.14951 1.34985C2.95071 1.34985 2.78955 1.51102 2.78955 1.70981C2.78955 1.90861 2.95071 2.06978 3.14951 2.06978Z\"\n fill=\"#D3D3D3\" />\n <path\n d=\"M3.14985 2.69971C3.29895 2.69971 3.41982 2.82058 3.41982 2.96968V4.76948C3.41982 4.91858 3.29895 5.03945 3.14985 5.03945C3.00076 5.03945 2.87988 4.91858 2.87988 4.76948V2.96968C2.87988 2.82058 3.00076 2.69971 3.14985 2.69971Z\"\n fill=\"#D3D3D3\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\"\n fill=\"#D3D3D3\" />\n </svg>\n @if (tab.hasSettings) {\n <svg class=\"tab-icon-settings\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0ZM3.39528 0.521714C3.23082 0.523571 3.06679 0.537203 2.90461 0.562452L2.86512 0.90234C2.82825 1.21869 2.63733 1.49951 2.35129 1.65882C2.0635 1.82027 1.71262 1.8397 1.40733 1.71105L1.08192 1.57379C0.874732 1.81524 0.709828 2.08746 0.593686 2.37976L0.882687 2.58397C1.15032 2.77278 1.30839 3.07265 1.30839 3.39154C1.30839 3.7104 1.15032 4.01026 0.88297 4.19886L0.593513 4.40363C0.709556 4.69643 0.874486 4.96917 1.08181 5.21109L1.4097 5.07317C1.7133 4.9459 2.06179 4.96451 2.3488 5.12336C2.6358 5.28222 2.82727 5.56243 2.8648 5.87927L2.90428 6.2215C3.22654 6.27413 3.55579 6.27413 3.87805 6.2215L3.91754 5.87931C3.95405 5.56257 4.14529 5.28138 4.43262 5.12194C4.72 4.96246 5.06917 4.94374 5.37332 5.07157L5.70098 5.20938C5.90811 4.96785 6.07297 4.69556 6.18907 4.40321L5.90003 4.19872C5.6324 4.00992 5.47432 3.71005 5.47432 3.39119C5.47432 3.0723 5.6324 2.77243 5.89971 2.58386L6.18835 2.37955C6.07221 2.08721 5.90728 1.81493 5.70007 1.57344L5.37531 1.71042C5.24298 1.76664 5.09982 1.79558 4.95524 1.79536C4.42284 1.79483 3.97604 1.40996 3.91794 0.902218L3.87845 0.562341C3.71707 0.537123 3.55478 0.523529 3.39528 0.521714ZM3.39068 2.08698C4.14094 2.08698 4.74912 2.67096 4.74912 3.39137C4.74912 4.11173 4.14094 4.69574 3.39068 4.69574C2.64044 4.69574 2.03225 4.11173 2.03225 3.39137C2.03225 2.67096 2.64044 2.08698 3.39068 2.08698ZM3.39068 2.60873C2.94055 2.60873 2.57563 2.95911 2.57563 3.39137C2.57563 3.82358 2.94055 4.17399 3.39068 4.17399C3.84085 4.17399 4.20575 3.82358 4.20575 3.39137C4.20575 2.95911 3.84085 2.60873 3.39068 2.60873Z\"\n fill=\"#D3D3D3\" />\n </svg>\n }\n @if (false) {\n <svg class=\"tab-icon-settings\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" (click)=\"onTabSettingsClick(tab.key, $event)\">\n <path\n d=\"M6.39761 0C6.89863 0.00567637 7.39767 0.0625743 7.88668 0.169781C8.1002 0.216581 8.25986 0.391515 8.28409 0.605184L8.40026 1.62965C8.45282 2.10003 8.85685 2.4563 9.33856 2.45679C9.46798 2.45699 9.5961 2.43049 9.71569 2.37846L10.6718 1.96563C10.8706 1.87977 11.1029 1.92658 11.2514 2.08242C11.9423 2.80775 12.4568 3.67766 12.7563 4.62669C12.8209 4.83134 12.7466 5.05373 12.5711 5.18086L11.7237 5.79486C11.482 5.96944 11.3392 6.24669 11.3392 6.54158C11.3392 6.8364 11.482 7.11364 11.7242 7.28863L12.5724 7.90283C12.7479 8.02991 12.8223 8.25234 12.7577 8.45705C12.4583 9.40593 11.9441 10.2758 11.2536 11.0012C11.1052 11.157 10.8731 11.204 10.6743 11.1183L9.71432 10.7049C9.43972 10.5868 9.12429 10.6041 8.86477 10.7515C8.60525 10.899 8.43248 11.159 8.39951 11.4518L8.28409 12.4762C8.26033 12.6874 8.10409 12.8612 7.89378 12.9104C6.90505 13.1416 5.87494 13.1416 4.88626 12.9104C4.67594 12.8612 4.51972 12.6874 4.49592 12.4762L4.38068 11.4534C4.34684 11.161 4.17385 10.9018 3.91452 10.7549C3.65519 10.608 3.34031 10.5907 3.06658 10.7082L2.10643 11.1217C1.90755 11.2073 1.67535 11.1604 1.52705 11.0044C0.836161 10.2782 0.321875 9.40727 0.0228998 8.45738C-0.0414892 8.25281 0.0329134 8.03051 0.208326 7.9035L1.05701 7.2889C1.29875 7.11431 1.44152 6.83707 1.44152 6.54225C1.44152 6.24736 1.29875 5.97011 1.0567 5.79533L0.208545 5.18176C0.0328656 5.05468 -0.0416053 4.83214 0.0230158 4.62737C0.322503 3.67833 0.837062 2.80842 1.52797 2.08309C1.67641 1.92725 1.90873 1.88044 2.10757 1.9663L3.06345 2.37905C3.33851 2.49771 3.6547 2.47979 3.91543 2.33005C4.17504 2.18204 4.34787 1.92179 4.38123 1.62886L4.49733 0.605184C4.52157 0.391408 4.68137 0.216413 4.89498 0.169714C5.38457 0.0626815 5.88416 0.00580385 6.39761 0ZM6.39774 1.00638C6.08785 1.00996 5.77877 1.03626 5.47317 1.08496L5.39877 1.7406C5.32928 2.35085 4.96954 2.89254 4.43055 3.19985C3.88827 3.51128 3.22711 3.54876 2.65183 3.30059L2.03866 3.03582C1.64826 3.50159 1.33753 4.0267 1.11869 4.59053L1.66325 4.98446C2.16756 5.34867 2.46541 5.92711 2.46541 6.54225C2.46541 7.15732 2.16756 7.73576 1.66378 8.09956L1.11836 8.49455C1.33702 9.05937 1.6478 9.58548 2.03847 10.0521L2.6563 9.7861C3.22838 9.54059 3.88504 9.57649 4.42585 9.88292C4.96666 10.1893 5.32744 10.7299 5.39815 11.3411L5.47256 12.0012C6.07979 12.1027 6.7002 12.1027 7.30743 12.0012L7.38184 11.3411C7.45064 10.7301 7.81098 10.1877 8.35242 9.88016C8.89392 9.57253 9.55187 9.53643 10.125 9.78301L10.7424 10.0488C11.1327 9.58293 11.4433 9.58548 11.6621 8.49375L11.1175 8.09929C10.6132 7.73509 10.3153 7.15665 10.3153 6.54158C10.3153 5.92643 10.6132 5.348 11.1168 4.98424L11.6607 4.59013C11.4419 4.0262 11.1311 3.50099 10.7407 3.03515L10.1287 3.29938C9.87938 3.40784 9.60961 3.46366 9.33719 3.46324C8.33398 3.46221 7.49208 2.71979 7.38259 1.74037L7.30819 1.08475C7.00409 1.0361 6.69829 1.00988 6.39774 1.00638ZM6.38907 4.02576C7.80279 4.02576 8.9488 5.15226 8.9488 6.54191C8.9488 7.93148 7.80279 9.05803 6.38907 9.05803C4.9754 9.05803 3.82938 7.93148 3.82938 6.54191C3.82938 5.15226 4.9754 4.02576 6.38907 4.02576ZM6.38907 5.03221C5.54088 5.03221 4.85327 5.7081 4.85327 6.54191C4.85327 7.37565 5.54088 8.05158 6.38907 8.05158C7.23733 8.05158 7.92491 7.37565 7.92491 6.54191C7.92491 5.7081 7.23733 5.03221 6.38907 5.03221Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n </svg>\n }\n </span>\n }\n </button>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\">\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatScheduler) {\n @if (alertStatus.chatMeetupAgenda) {\n <div class=\"alert-popup-client-scheduler\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatMeetupAgenda]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_MEETUP_AGENDA.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatMeetupAgenda,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.SpiderChart) {\n @if (alertStatus.compatibilityProfileSpider) {\n <div class=\"alert-popup-spider-chart\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileSpider]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.COMPATIBILITY_PROFILE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileSpider,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.ChatHandoff) {\n @if (alertStatus.chatHandoff) {\n <div class=\"alert-popup-chat-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatHandoff]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.HANDOFF_CHAT.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatHandoff,\n })\n \"></lib-alert-popup>\n </div>\n }\n @if (alertStatus.chatProgress) {\n <div class=\"alert-popup-chat-progress\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatProgress]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_PROGRESS.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatProgress,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n @if (alertStatus.profileCompare) {\n <div class=\"alert-popup-profile-compare\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.profileCompare]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.PROFILE_COMPARE.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.profileCompare,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n @if (alertStatus.datePrepHandoffInfo) {\n <div class=\"alert-popup-date-prep-handoff\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.datePrepHandoffInfo]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.DATE_PREP_HANDOFF_INFO.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.datePrepHandoffInfo,\n })\n \"></lib-alert-popup>\n </div>\n }\n }\n }\n\n @switch (activeTabKey) {\n @case (ClientViewportTab.PrefMatchVisual) {\n <div class=\"trait-visual-container\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div class=\"swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"client\"></lib-scheduler>\n </div>\n }\n @case (ClientViewportTab.SpiderChart) {\n <div class=\"spider-chart-container\" [class.tooltip-active]=\"isSpiderTooltipActive\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\"\n (tooltipActiveChange)=\"onSpiderTooltipChange($event)\"></lib-spider-chart>\n </div>\n }\n @case (ClientViewportTab.ChatHandoff) {\n <div class=\"chat-handoff-wrapper\" style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n\n @case (ClientViewportTab.ProfileCompare) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[clientHomeConfig.activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n }\n @case (ClientViewportTab.DatePrepHandoffInfo) {\n <div class=\"date-pref-handoff-card\">\n <lib-handoff-panel [config]=\"handoffDatePrepConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @default {\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n @case (ClientViewportPage.Profile) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Profile</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your profile settings.</p>\n </div>\n }\n @default {\n <!-- Placeholder for other pages -->\n <div style=\"display: flex; justify-content: center; align-items: center; height: 100%; color: white;\">\n <h2>Page {{ activePageIndex }} Content</h2>\n </div>\n }\n }\n </div>\n\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value); updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value; updateTraitVisualFromManager(); buildSpiderDatasets()\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n\n @if (clientHomeConfig && activePageIndex === ClientViewportPage.Home) {\n <div class=\"chat-heads-belt\">\n <lib-client-home [config]=\"clientHomeConfig\" (activeIndexChange)=\"onChatHeadChange($event)\"\n (rejectRequest)=\"onReject($event)\"></lib-client-home>\n </div>\n }\n <div class=\"viewport-shadow-ellipse\"></div>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-indicator\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Home)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Home\">\n <span class=\"bottom-nav-icon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.25 8.5L10 3.5L15.75 8.5V15.75H4.25V8.5Z\" fill=\"none\" stroke=\"#666666\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Matches)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Matches\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25952\" layer-name=\"user\" style=\"position:relative\" width=\"27\" height=\"19\"\n viewBox=\"0 0 27 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"match_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Matches) {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"url(#match_active_grad)\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"url(#match_active_grad)\" />\n } @else {\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M21.5424 0C23.4828 0 25.0594 1.49996 25.0594 3.3599C25.0594 4.45479 24.5131 5.44572 23.6802 6.07568C25.0582 6.62179 26.2538 7.75377 26.8545 9.18008C27.097 9.78007 27.0364 10.5 26.6726 11.04C26.2481 11.64 25.6417 12 24.914 12L18.086 11.9997C17.3583 11.9997 16.7519 11.6397 16.3274 11.0397C15.9636 10.4997 15.903 9.77973 16.1455 9.17975C16.7519 7.73979 17.9647 6.59983 19.3594 6.05984C18.5711 5.45986 18.086 4.49989 18.086 3.4199C18.086 1.55995 19.6626 0 21.5424 0ZM19.2987 3.4199C19.2987 2.21994 20.3296 1.19997 21.5424 1.19997C22.7552 1.19997 23.786 2.21994 23.786 3.4199C23.786 4.61988 22.7552 5.63985 21.5424 5.63985C20.3296 5.63985 19.2987 4.61988 19.2987 3.4199ZM17.4189 10.3797C17.5402 10.6197 17.8434 10.7997 18.1466 10.7997L24.8534 10.8C25.1566 10.8 25.4598 10.62 25.5811 10.38C25.763 10.1401 25.763 9.90006 25.6417 9.60007C24.9264 7.94865 23.3321 6.81902 21.4925 6.78114C19.6592 6.82482 18.0717 7.95279 17.3583 9.59974C17.237 9.89973 17.237 10.1397 17.4189 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M5.54239 0C7.48283 0 9.05944 1.49996 9.05944 3.3599C9.05944 4.45479 8.51311 5.44572 7.6802 6.07568C9.05823 6.62179 10.2538 7.75377 10.8545 9.18008C11.097 9.78007 11.0364 10.5 10.6726 11.04C10.2481 11.64 9.64169 12 8.91403 12L2.08597 11.9997C1.35831 11.9997 0.751921 11.6397 0.327449 11.0397C-0.0363833 10.4997 -0.097022 9.77973 0.145533 9.17975C0.751921 7.73979 1.9647 6.59983 3.35939 6.05984C2.57108 5.45986 2.08597 4.49989 2.08597 3.4199C2.08597 1.55996 3.66258 0 5.54239 0ZM3.29875 3.4199C3.29875 2.21994 4.32961 1.19997 5.54239 1.19997C6.75517 1.19997 7.78603 2.21994 7.78603 3.4199C7.78603 4.61988 6.75517 5.63985 5.54239 5.63985C4.32961 5.63985 3.29875 4.61988 3.29875 3.4199ZM1.41895 10.3797C1.54023 10.6197 1.84342 10.7997 2.14661 10.7997L8.85339 10.8C9.15658 10.8 9.45978 10.62 9.58105 10.38C9.76297 10.1401 9.76297 9.90006 9.64169 9.60007C8.92638 7.94865 7.33212 6.81902 5.49252 6.78114C3.65924 6.82482 2.07168 7.95279 1.35831 9.59974C1.23703 9.89973 1.23703 10.1397 1.41895 10.3797Z\"\n fill=\"#666666\" fill-opacity=\"0.52\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M13.5655 0C16.5644 0 19.001 2.37493 19.001 5.31984C19.001 7.05342 18.1566 8.6224 16.8694 9.61983C18.9991 10.4845 20.8468 12.2768 21.7751 14.5351C22.1499 15.4851 22.0562 16.6251 21.4939 17.48C20.8379 18.43 19.9008 19 18.7762 19L8.22378 18.9995C7.0992 18.9995 6.16206 18.4295 5.50606 17.4795C4.94377 16.6245 4.85006 15.4846 5.22491 14.5346C6.16206 12.2547 8.03635 10.4497 10.1918 9.59475C8.97349 8.64478 8.22378 7.12482 8.22378 5.41484C8.22378 2.46993 10.6604 0 13.5655 0ZM8.31749 17.0995C7.84892 17.0995 7.38035 16.8145 7.19292 16.4345C6.91178 16.0546 6.91178 15.6746 7.0992 15.1996C8.20168 12.5919 10.6552 10.806 13.4884 10.7368C16.3315 10.7968 18.7953 12.5854 19.9008 15.2001C20.0882 15.6751 20.0882 16.0551 19.8071 16.4351C19.6197 16.8151 19.1511 17.1001 18.6825 17.1001L8.31749 17.0995ZM13.5655 1.89994C11.6912 1.89994 10.0981 3.5149 10.0981 5.41484C10.0981 7.31482 11.6912 8.92977 13.5655 8.92977C15.4398 8.92977 17.0329 7.31482 17.0329 5.41484C17.0329 3.5149 15.4398 1.89994 13.5655 1.89994Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Messages)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Messages\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25867\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"msg_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Messages) {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"url(#msg_active_grad)\" />\n } @else {\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.UpcomingDates)\"\n [class.active]=\"activePageIndex === ClientViewportPage.UpcomingDates\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;7003:25953\" style=\"position:relative\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n @if (activePageIndex === ClientViewportPage.UpcomingDates) {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"url(#paint0_linear_4018_2162)\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"url(#paint1_linear_4018_2162)\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"url(#paint2_linear_4018_2162)\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"url(#paint3_linear_4018_2162)\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"url(#paint4_linear_4018_2162)\"\n stroke-width=\"2\" />\n } @else {\n <path\n d=\"M6.80688 12.3242H5.91174C5.41941 12.3242 5.0166 12.7688 5.0166 13.3122C5.0166 13.8555 5.41941 14.3001 5.91174 14.3001H6.80688C7.29921 14.3001 7.70202 13.8555 7.70202 13.3122C7.70202 12.7688 7.29921 12.3242 6.80688 12.3242Z\"\n fill=\"#666666\" />\n <path\n d=\"M10.3879 11.3359H9.4928C9.00047 11.3359 8.59766 11.7805 8.59766 12.3239V13.3118C8.59766 13.8552 9.00047 14.2998 9.4928 14.2998H10.3879C10.8803 14.2998 11.2831 13.8552 11.2831 13.3118V12.3239C11.2831 11.7805 10.8803 11.3359 10.3879 11.3359Z\"\n fill=\"#666666\" />\n <path\n d=\"M13.968 9.36133H13.0729C12.5805 9.36133 12.1777 9.80591 12.1777 10.3493V13.3131C12.1777 13.8565 12.5805 14.3011 13.0729 14.3011H13.968C14.4603 14.3011 14.8632 13.8565 14.8632 13.3131V10.3493C14.8632 9.80591 14.4603 9.36133 13.968 9.36133Z\"\n fill=\"#666666\" />\n <path\n d=\"M14.4156 4.41992H11.4616C11.0588 4.41992 10.8798 4.9633 11.1483 5.25968L11.9987 6.19824C10.3427 8.27294 7.97056 9.85366 5.46417 9.85366C5.19563 9.85366 5.0166 10.0512 5.0166 10.3476C5.0166 10.644 5.19563 10.8416 5.46417 10.8416C8.46289 10.8416 11.2378 9.90306 13.2519 7.58137L14.0575 8.47053C14.3261 8.76691 14.8184 8.56932 14.8184 8.12474V4.9139C14.8631 4.61751 14.6841 4.41992 14.4156 4.41992Z\"\n fill=\"#666666\" />\n <rect x=\"1\" y=\"1\" width=\"18\" height=\"18\" rx=\"3\" stroke=\"#666666\" stroke-width=\"2\" />\n }\n <defs>\n <linearGradient id=\"paint0_linear_4018_2162\" x1=\"7.49976\" y1=\"12.5\" x2=\"2.99976\" y2=\"16\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4018_2162\" x1=\"9.94037\" y1=\"11.3359\" x2=\"6.5\" y2=\"16.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint2_linear_4018_2162\" x1=\"16\" y1=\"8\" x2=\"4.5\" y2=\"21.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint3_linear_4018_2162\" x1=\"14.9998\" y1=\"4\" x2=\"-5.00024\" y2=\"18.5\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFA3E4\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"paint4_linear_4018_2162\" x1=\"20\" y1=\"8.27014e-07\" x2=\"-35.5\" y2=\"46\"\n gradientUnits=\"userSpaceOnUse\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" stop-opacity=\"0\" />\n </linearGradient>\n </defs>\n </svg>\n </span>\n </button>\n <button class=\"bottom-nav-item\" type=\"button\" (click)=\"onFooterClick(ClientViewportPage.Profile)\"\n [class.active]=\"activePageIndex === ClientViewportPage.Profile\">\n <span class=\"bottom-nav-icon\">\n <svg id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\" width=\"20\" height=\"20\"\n viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <linearGradient id=\"profile_active_grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop stop-color=\"#FE3C72\" />\n <stop offset=\"1\" stop-color=\"#FFB5E9\" />\n </linearGradient>\n </defs>\n @if (activePageIndex === ClientViewportPage.Profile) {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"url(#profile_active_grad)\" />\n } @else {\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n fill=\"#666666\" />\n }\n </svg>\n </span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-client-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden;background:#2c282f}.design-root.header-hidden,.design-root.footer-hidden{background:transparent;pointer-events:none}.design-root.header-hidden .content-scroll,.design-root.footer-hidden .content-scroll{pointer-events:auto;background:#2c282f;background-clip:content-box}.design-root.footer-hidden .content-scroll{bottom:var(--lib-client-viewport-footer-space, 60px);padding-bottom:0}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:130.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-client-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-client-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}::ng-deep .handoff-panel__content{scrollbar-width:none!important;-ms-overflow-style:none!important}::ng-deep .handoff-panel__content::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.top-nav-notification{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fe3c72,#e15561);box-shadow:0 0 6px #fe3c72cc}.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer;position:relative;width:106px;height:32px}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#353039 .68%,#29252d 99.45%);box-shadow:4px 4px 9px #00000040;filter:blur(4.3px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:center;width:92px;height:27px;border-radius:54px;border:1px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80)}.request-date-label{font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;color:#fff;text-shadow:0 0 3px #ffffff,0 0 15px #fe3c72,0 0 15px #fe3c72}.upcoming-dates{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;box-sizing:border-box;position:relative}.upcoming-dates .alert-popup-agenda{position:absolute;top:30px;right:10px;z-index:999;transform:scale(.75);transform-origin:top right}.upcoming-dates-header{display:flex;align-items:center;gap:6px}.upcoming-dates-title{color:#fff;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:150%;letter-spacing:-.132px}.upcoming-dates-info-icon{display:flex;align-items:center;justify-content:center}.upcoming-dates-info-icon svg{display:block}.upcoming-dates-calendar{margin-top:10px;position:relative}.upcoming-dates-calendar:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#2C282F 0%,transparent 40px,transparent calc(100% - 40px),#2C282F 100%);z-index:10}.upcoming-dates-calendar lib-agenda{display:block;width:100%}.tab-switcher{margin:8px auto 0;padding:0 12px;width:100%;max-width:100%;box-sizing:border-box}.tab-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 2px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.tab-pill{position:relative;border:none;padding:4px 10px;background:transparent;color:#fff6;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;font-weight:500;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.tab-pill.active{color:#fff}.tab-icons{display:inline-flex;align-items:center;gap:3px}.tab-icon-info,.tab-icon-settings{width:7px;height:7px;display:block}.tab-content{padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;max-width:100%;height:auto;aspect-ratio:373.02/219.18;overflow:visible;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;pointer-events:none;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;z-index:1}.tab-content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-chat-progress,.tab-content-scroll .alert-popup-client-scheduler,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{position:absolute;z-index:999;right:10px;transform:scale(.75);transform-origin:top right}.tab-content-scroll .alert-popup-chat-handoff,.tab-content-scroll .alert-popup-profile-compare,.tab-content-scroll .alert-popup-spider-chart,.tab-content-scroll .alert-popup-trait-chart,.tab-content-scroll .alert-popup-date-prep-handoff{top:20px}.tab-content-scroll .alert-popup-client-scheduler{top:50px}.tab-content-scroll .alert-popup-chat-progress{top:100px}.tab-content-scroll lib-handoff-panel,.tab-content-scroll lib-profile-comparison,.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-chat{--max-width-container: 320px;display:flex;flex-direction:column;flex:1;width:100%;max-width:320px;min-height:0;transform-origin:top center}@media (min-width: 768px){.tab-content-scroll lib-chat{transform:scale(1.5);margin-bottom:150px}}@media (min-width: 1024px){.tab-content-scroll lib-chat{transform:scale(2);margin-bottom:300px}}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel,.tab-content-scroll .chat-handoff-wrapper lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.tab-content .profile-compare-wrapper{position:relative;width:100%;height:100%;overflow-y:scroll}.tab-content-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.spider-chart-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.spider-chart-container lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.spider-chart-container.tooltip-active{align-items:flex-start}.spider-chart-container.tooltip-active lib-spider-chart{width:90%;margin-left:-45px;margin-right:auto;align-self:flex-start}.spider-chart-container .alert-popup-spider-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card{display:flex;align-items:center;justify-content:center;padding:8px 0;position:relative}.date-pref-handoff-card .alert-popup-date-prep-handoff{position:absolute;z-index:999;top:0;right:10px;transform:scale(.75);transform-origin:top right}.date-pref-handoff-card lib-handoff-panel{display:block;width:100%;background:transparent}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel,.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__tabs{background:transparent!important}.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.4);transform-origin:top center;margin-bottom:100px}@media (min-width: 768px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(1.7);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.date-pref-handoff-card lib-handoff-panel ::ng-deep .handoff-panel__date-prep,.date-pref-handoff-card lib-handoff-panel ::ng-deep .date-prep-card{transform:scale(2.2);transform-origin:top center;margin-bottom:400px}}.trait-visual-container{width:100%;height:100%;min-height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.trait-visual-container .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.trait-visual-container tv-trait-visual-canvas,.trait-visual-container .trait-visual-image{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:500px;max-width:100%;max-height:100%;position:relative}.trait-visual-container tv-trait-visual-canvas:before,.trait-visual-container .trait-visual-image:before{content:\"\";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at center,rgb(0,0,0) 0%,rgba(0,0,0,.8) 15%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.04) 80%,transparent 100%);pointer-events:none}.trait-visual-container tv-trait-visual-canvas ::ng-deep canvas,.trait-visual-container .trait-visual-image ::ng-deep canvas{width:100%!important;height:100%!important;min-height:500px!important;object-fit:contain!important;position:relative;z-index:1;transform:translateY(-60px)}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;padding:10px;cursor:pointer;white-space:nowrap}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background-color:red;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-pill-right{display:inline-flex;align-items:center;gap:6px}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-toggle{width:22px;height:22px;border-radius:999px;border:none;background:linear-gradient(180deg,#37343c,#201f25);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}.pref-match-manager-item-toggle svg{display:block}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.chat-heads-belt{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(var(--lib-client-viewport-footer-space, 60px) + 7px);display:flex;width:100%;max-width:100%;height:54.862px;align-items:center;gap:18.446px;z-index:10}.chat-heads-belt lib-client-home{width:100%;height:100%}.chat-heads-belt ::ng-deep lib-standard-chat-head{transform:scale(.9);transform-origin:center}.chat-heads-belt .tab-bar-container{padding:0 24px;scrollbar-width:none;-ms-overflow-style:none;overflow-x:auto;white-space:nowrap;cursor:grab}.chat-heads-belt .tab-bar-container::-webkit-scrollbar{display:none;width:0;height:0}.chat-heads-belt .tab-bar-container:active{cursor:grabbing}.chat-heads-belt swiper-container{scrollbar-width:none;-ms-overflow-style:none}.chat-heads-belt swiper-container::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-indicator{position:absolute;bottom:4px;width:117px;height:1px;border-radius:13px;background:#fff}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg{transform:scale(1.5);transform-origin:center}.bottom-nav-icons .bottom-nav-item:first-child .bottom-nav-icon svg path{fill:none;stroke:currentColor}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#666}.bottom-nav-item.active{color:#fe3c72}.bottom-nav-item-placeholder .bottom-nav-placeholder{width:20px;height:20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#ffffff0d}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"] }]
10323
10323
  }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ElementRef }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.TranslateService }], propDecorators: { config: [{
10324
10324
  type: Input
10325
10325
  }], showViewportControls: [{
@@ -11521,11 +11521,11 @@ class MatcherViewportComponent {
11521
11521
  this.updateCountdownFromTotalSeconds(this.countdownTotalSeconds);
11522
11522
  }
11523
11523
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MatcherViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11524
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MatcherViewportComponent, isStandalone: false, selector: "lib-matcher-viewport", inputs: { config: "config", showViewportControls: "showViewportControls", showViewportHeader: "showViewportHeader", showViewportFooter: "showViewportFooter", activePageInput: "activePageInput", enablePageRouting: "enablePageRouting", pageRouteQueryParamKey: "pageRouteQueryParamKey", pageRouteParamKey: "pageRouteParamKey", pageRouteSegmentName: "pageRouteSegmentName" }, outputs: { activeIndexChange: "activeIndexChange", activePageChange: "activePageChange" }, viewQueries: [{ propertyName: "spiderChartComponent", first: true, predicate: SpiderChartComponent, descendants: true }, { propertyName: "tabStripRef", first: true, predicate: ["tabStrip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">On</span>\n <span class=\"request-date-icon\">\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M20.9778 10.526C20.9778 16.3393 16.2817 21.0519 10.4889 21.0519C4.69604 21.0519 0 16.3393 0 10.526C0 4.71263 4.69604 0 10.4889 0C16.2817 0 20.9778 4.71263 20.9778 10.526Z\"\n fill=\"white\" />\n <path\n d=\"M10.6016 3.9873C13.0366 3.9873 15.1862 5.55213 15.4844 7.72461C16.219 7.96315 16.7519 8.64584 16.752 9.4541V11.2773C16.7518 12.0896 16.213 12.7737 15.4727 13.0088C15.2238 14.4405 13.9647 15.5283 12.4473 15.5283H11.8389C11.6129 15.9788 11.1434 16.2881 10.6016 16.2881C9.84089 16.2881 9.22089 15.6785 9.2207 14.9229C9.2207 14.1671 9.84077 13.5576 10.6016 13.5576C11.1433 13.5576 11.6128 13.8661 11.8389 14.3164H12.4473C13.2546 14.3164 13.9394 13.8067 14.1924 13.0977H13.0635C12.7276 13.0977 12.4512 12.8285 12.4512 12.4922V8.23926C12.4512 7.90295 12.7275 7.63281 13.0635 7.63281H14.2188C13.8831 6.29752 12.4582 5.19922 10.6016 5.19922C8.7449 5.19922 7.32005 6.29752 6.98438 7.63281H8.13965C8.47558 7.63281 8.75195 7.90295 8.75195 8.23926V12.4922C8.75192 12.8285 8.47556 13.0977 8.13965 13.0977H6.29395C5.27841 13.0977 4.45139 12.2846 4.45117 11.2773V9.4541C4.45119 8.64616 4.98361 7.96342 5.71777 7.72461C6.01586 5.55207 8.16648 3.9873 10.6016 3.9873ZM13.6748 11.8867H14.9092C15.2529 11.8867 15.5281 11.612 15.5283 11.2773V9.4541C15.5283 9.11928 15.253 8.84473 14.9092 8.84473H13.6748V11.8867ZM6.29395 8.84473C5.95016 8.84473 5.67483 9.11928 5.6748 9.4541V11.2773C5.67503 11.612 5.95028 11.8867 6.29395 11.8867H7.52832V8.84473H6.29395Z\"\n fill=\"#FE3C72\" stroke=\"#FE3C72\" stroke-width=\"0.3\" />\n </svg>\n </span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"userProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n </div>\n }\n <div class=\"content-scroll\">\n <div class=\"chat-heads-separator\">\n <svg width=\"274\" height=\"5\" viewBox=\"0 0 274 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.3\" d=\"M0 2.5L274 2.49998\" stroke=\"url(#paint0_radial_4170_4807)\" stroke-width=\"5\" />\n <defs>\n <radialGradient id=\"paint0_radial_4170_4807\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(137 2.99999) rotate(90) scale(0.5 137)\">\n <stop stop-color=\"#F7F5DD\" />\n <stop offset=\"1\" stop-color=\"#F7F5DD\" stop-opacity=\"0\" />\n </radialGradient>\n </defs>\n </svg>\n </div>\n @if (activePage === 2) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Insights</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your matching insights here.</p>\n </div>\n } @else if (activePage === 3) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Itinerary</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your upcoming dates.</p>\n </div>\n } @else if (activePage === 4) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Quests</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Complete quests to earn rewards.</p>\n </div>\n } @else if (activePage === 5) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M10.325 4.317C10.565 3.56 11.269 3 12.102 3C12.935 3 13.639 3.56 13.879 4.317C14.135 4.382 14.383 4.475 14.622 4.595L15.69 3.528C16.279 2.939 17.236 2.939 17.825 3.528C18.414 4.117 18.414 5.074 17.825 5.663L16.758 6.73C16.877 6.97 16.971 7.218 17.036 7.474C17.793 7.714 18.353 8.418 18.353 9.251C18.353 10.084 17.793 10.788 17.036 11.028C16.971 11.284 16.877 11.532 16.758 11.772L17.825 12.839C18.414 13.428 18.414 14.385 17.825 14.974C17.236 15.563 16.279 15.563 15.69 14.974L14.622 13.907C14.383 14.027 14.135 14.12 13.879 14.185C13.639 14.942 12.935 15.502 12.102 15.502C11.269 15.502 10.565 14.942 10.325 14.185C10.069 14.12 9.821 14.027 9.582 13.907L8.514 14.974C7.925 15.563 6.968 15.563 6.379 14.974C5.79 14.385 5.79 13.428 6.379 12.839L7.446 11.772C7.327 11.532 7.233 11.284 7.168 11.028C6.411 10.788 5.851 10.084 5.851 9.251C5.851 8.418 6.411 7.714 7.168 7.474C7.233 7.218 7.327 6.97 7.446 6.73L6.379 5.663C5.79 5.074 5.79 4.117 6.379 3.528C6.968 2.939 7.925 2.939 8.514 3.528L9.582 4.595C9.821 4.475 10.069 4.382 10.325 4.317ZM12.102 11.335C13.253 11.335 14.186 10.402 14.186 9.251C14.186 8.1 13.253 7.167 12.102 7.167C10.951 7.167 10.018 8.1 10.018 9.251C10.018 10.402 10.951 11.335 12.102 11.335Z\"\n fill=\"currentColor\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Settings</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Adjust your preferences.</p>\n </div>\n } @else if (getPageConfig(activePage)?.custom?.content; as pageContent) {\n <div class=\"custom-page-content\" style=\"flex: 1; overflow: auto;\">\n <ng-container *ngTemplateOutlet=\"pageContent\"></ng-container>\n </div>\n } @else {\n @if (getPageConfig(activePage)?.custom?.swipeableTabs; as swipeableTabs) {\n <div class=\"user-chat-heads\">\n <ng-container *ngTemplateOutlet=\"swipeableTabs\"></ng-container>\n </div>\n } @else {\n @if (userHomeConfig) {\n <div class=\"user-chat-heads\">\n <lib-client-home [config]=\"userHomeConfig\" [menuPosition]=\"'down'\"\n (activeIndexChange)=\"onChatHeadChange($event)\"></lib-client-home>\n </div>\n }\n }\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip>\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <div class=\"toolbelt-tab\">\n <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"\n tab.key === 'SUGGESTED' ? (hasSuggestions ? 'Suggested' : 'Suggest') : tab.label\n \" [hasIcon]=\"true\" [checked]=\"tab.key === activeTabKey\" (click)=\"setActiveTab(tab.key)\">\n @switch (tab.key) {\n @case ('CONTEXT') {\n <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.40551 11.603C4.00666 11.603 3.66509 11.4608 3.38082 11.1766C3.09655 10.8923 2.95465 10.551 2.95514 10.1526V8.70224C2.95514 8.49677 3.02475 8.32442 3.16399 8.18518C3.30322 8.04595 3.47534 7.97657 3.68032 7.97705H5.13069V6.34538C4.70767 6.32121 4.30567 6.22742 3.92471 6.06401C3.54374 5.9006 3.19638 5.65597 2.88262 5.33012V4.53242H2.04865L0.308204 2.79197C0.102735 2.5865 0 2.37499 0 2.15743C0 1.93987 0.102735 1.74649 0.308204 1.57728C0.658711 1.27512 1.09068 1.04548 1.60411 0.888354C2.11754 0.73123 2.66458 0.652668 3.24521 0.652668C3.57154 0.652668 3.88869 0.676841 4.19665 0.725187C4.50462 0.773532 4.81596 0.864181 5.13069 0.997132V0.725187C5.13069 0.519717 5.20031 0.347606 5.33955 0.208854C5.47878 0.0701014 5.6509 0.000483458 5.85588 0H13.1077C13.3132 0 13.4856 0.069618 13.6248 0.208854C13.764 0.34809 13.8334 0.520201 13.8329 0.725187V9.42743C13.8329 10.0317 13.6214 10.5454 13.1984 10.9684C12.7754 11.3915 12.2617 11.603 11.6574 11.603H4.40551ZM6.58107 7.97705H10.207C10.4125 7.97705 10.5848 8.04667 10.7241 8.18591C10.8633 8.32514 10.9327 8.49725 10.9322 8.70224V9.42743C10.9322 9.6329 11.0018 9.80525 11.141 9.94448C11.2803 10.0837 11.4524 10.1531 11.6574 10.1526C11.8628 10.1526 12.0352 10.083 12.1744 9.94376C12.3137 9.80452 12.383 9.63241 12.3826 9.42743V1.45037H6.58107V1.88549L10.7146 6.01905C10.7992 6.10365 10.8568 6.18222 10.8872 6.25473C10.9177 6.32725 10.9327 6.4179 10.9322 6.52668C10.9322 6.73215 10.8626 6.9045 10.7233 7.04374C10.5841 7.18297 10.412 7.25235 10.207 7.25187C10.0982 7.25187 10.0076 7.23664 9.93506 7.20618C9.86254 7.17572 9.78398 7.11843 9.69937 7.03431L7.85014 5.18508L7.70511 5.33012C7.5359 5.49933 7.3575 5.65041 7.16992 5.78336C6.98234 5.91631 6.78605 6.01905 6.58107 6.09157V7.97705ZM2.66506 3.08204H4.33299V4.64119C4.47803 4.73789 4.62911 4.80436 4.78623 4.84062C4.94335 4.87688 5.10652 4.89501 5.27573 4.89501C5.55372 4.89501 5.80464 4.85271 6.02848 4.7681C6.25232 4.6835 6.47277 4.53242 6.68985 4.31486L6.83488 4.16982L5.81962 3.15456C5.46912 2.80405 5.07631 2.54105 4.64119 2.36556C4.20608 2.19006 3.74075 2.10256 3.24521 2.10304C3.00348 2.10304 2.77384 2.12117 2.55628 2.15743C2.33873 2.19369 2.12117 2.24808 1.90361 2.3206L2.66506 3.08204ZM4.40551 10.1526H9.59059C9.55433 10.0438 9.52702 9.92901 9.50865 9.80815C9.49027 9.68728 9.48133 9.56038 9.48181 9.42743H4.40551V10.1526Z\"\n [attr.fill]=\"activeTabKey === 'CONTEXT' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('GALAXY') {\n <svg width=\"17\" height=\"20\" viewBox=\"0 0 17 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n </svg>\n }\n @case ('SPIDER') {\n <svg width=\"17\" height=\"15\" viewBox=\"0 0 17 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.30245 0L16.6049 5.76773L13.3539 14.9444H3.25104L0 5.76773L8.30245 0ZM6.13278 11.4367L4.63453 13.3906H11.9698L11.0753 12.2245L6.13278 11.4367ZM2.04264 6.69219L4.1665 12.6875L5.50796 10.9387L4.2299 7.27331L2.04264 6.69219ZM14.244 7.58485L11.8228 11.8849L12.437 12.6867L14.244 7.58485ZM12.6085 7.21116L8.97736 8.17527L10.7576 10.4974L12.6085 7.21116ZM8.30245 8.60885L7.21018 10.0329L9.69886 10.4299L8.30245 8.60885ZM6.11652 7.77441L6.6853 9.40355L7.62699 8.17527L6.11652 7.77441ZM8.70844 5.41961L8.70871 7.44116L12.0381 6.55699L8.70844 5.41961ZM7.89591 5.82751L6.43179 7.0519L7.89591 7.44112V5.82751ZM7.89591 2.20251L2.44077 5.99221L4.55976 6.55469L7.89591 3.76327V2.20251ZM8.70844 2.20251V3.7695L13.1455 5.28445L8.70844 2.20251Z\"\n [attr.fill]=\"activeTabKey === 'SPIDER' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('PLANS') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.34766 0.181641C5.4477 0.181641 5.5293 0.262261 5.5293 0.362305V1.28906H9.59863V0.362305C9.59863 0.262366 9.6794 0.18181 9.7793 0.181641H10.8877C10.9877 0.181731 11.0684 0.262317 11.0684 0.362305V1.28906H11.4414C11.7833 1.28906 12.1108 1.42528 12.3525 1.66699C12.5943 1.90873 12.7305 2.23625 12.7305 2.57812V8.29785C12.7304 8.6397 12.5943 8.96726 12.3525 9.20898C12.1108 9.45068 11.7833 9.58691 11.4414 9.58691H3.68652C3.34464 9.58691 3.01616 9.45073 2.77441 9.20898C2.53282 8.96728 2.39748 8.6396 2.39746 8.29785V2.57812C2.39747 2.23637 2.53283 1.90871 2.77441 1.66699C3.01616 1.42525 3.34464 1.28906 3.68652 1.28906H4.05859V0.362305C4.05859 0.262261 4.14019 0.181641 4.24023 0.181641H5.34766ZM3.38477 8.59668L11.7334 8.58887L11.7695 2.98145L3.37207 2.94922L3.38477 8.59668ZM8.91992 4.23926C8.97207 4.23576 9.02359 4.25504 9.06055 4.29199L9.64746 4.87891C9.68133 4.91278 9.70008 4.95895 9.7002 5.00684C9.7002 5.05488 9.68143 5.10177 9.64746 5.13574L7.1875 7.59473C7.15353 7.62868 7.1076 7.64844 7.05957 7.64844C7.01156 7.64841 6.96559 7.62867 6.93164 7.59473L5.44727 6.11035C5.41334 6.07643 5.39361 6.03039 5.39355 5.98242C5.39355 5.93439 5.41331 5.88846 5.44727 5.85449L5.76465 5.53613L5.82422 5.49707C5.84629 5.48807 5.87022 5.48315 5.89453 5.4834C5.94317 5.48392 5.98975 5.50398 6.02344 5.53906L7.04395 6.60156L8.78809 4.31055L8.81445 4.28223C8.8438 4.25719 8.88076 4.2419 8.91992 4.23926ZM9.40723 11.6211C9.40723 11.7211 9.32563 11.8027 9.22559 11.8027H1.4707C1.12882 11.8027 0.80034 11.6666 0.558594 11.4248C0.316998 11.1831 0.181657 10.8554 0.181641 10.5137V3.86621C0.181641 3.81819 0.200438 3.77225 0.234375 3.73828C0.268346 3.70431 0.314262 3.68457 0.362305 3.68457H0.882812C0.982401 3.68457 1.06381 3.76565 1.06445 3.86523L1.1084 10.873L9.22559 10.8926C9.32542 10.8928 9.40714 10.9734 9.40723 11.0732V11.6211Z\"\n [attr.fill]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" stroke-width=\"0.362289\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('SUGGESTED') {\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"5.3\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.hours }}</tspan><tspan class=\"suggested-timer-unit\">h</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"9.2\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.minutes }}</tspan><tspan class=\"suggested-timer-unit\">m</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"13.1\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.seconds }}</tspan><tspan class=\"suggested-timer-unit\">s</tspan>\n </text>\n </svg>\n }\n @case ('PROFILE') {\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.88281 0C9.29266 0 11.251 1.9089 11.251 4.27539C11.2508 5.6683 10.5724 6.92903 9.53809 7.73047C9.80086 7.83716 10.0574 7.96302 10.3076 8.10352C9.5682 8.1673 8.88987 8.44387 8.33398 8.87207C7.85197 8.72388 7.34477 8.63898 6.82129 8.62793C4.54458 8.68351 2.57249 10.1185 1.68652 12.2139C1.53591 12.5956 1.5358 12.9017 1.76172 13.207C1.91239 13.5123 2.28955 13.7412 2.66602 13.7412H7.3584C7.73672 14.401 8.30825 14.9353 8.99609 15.2676H2.59082C1.68713 15.2676 0.933404 14.8093 0.40625 14.0459C-0.0453186 13.3589 -0.120497 12.4429 0.180664 11.6797C0.933743 9.84762 2.43985 8.39701 4.17188 7.70996C3.19307 6.94661 2.5909 5.72546 2.59082 4.35156C2.59082 1.98518 4.54841 0.000180704 6.88281 0ZM6.88281 1.52637C5.37679 1.52655 4.09668 2.8249 4.09668 4.35156C4.09683 5.87813 5.37688 7.1756 6.88281 7.17578C8.38888 7.17578 9.66977 5.87824 9.66992 4.35156C9.66992 2.82479 8.38897 1.52637 6.88281 1.52637Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" />\n <path\n d=\"M10.6743 8.87866C11.1021 8.87869 11.5104 8.96731 11.8979 9.14429C12.1832 9.27439 12.442 9.44223 12.6733 9.64819V9.30151C12.6734 9.21698 12.7034 9.13966 12.7642 9.07886C12.8252 9.01782 12.9029 8.98769 12.9878 8.98804L13.0493 8.9939C13.0894 9.0014 13.1274 9.01613 13.1616 9.03882L13.2104 9.07886L13.2505 9.12769C13.2843 9.179 13.3012 9.23839 13.3013 9.30151V10.3152C13.3012 10.4306 13.2599 10.5343 13.1782 10.616L13.1772 10.615C13.0956 10.6967 12.993 10.738 12.8774 10.738H11.8647C11.7801 10.738 11.7028 10.7079 11.6421 10.6472C11.5812 10.5863 11.5503 10.5083 11.5503 10.4236C11.5504 10.339 11.581 10.2616 11.6421 10.2009C11.7029 10.1405 11.7804 10.1111 11.8647 10.1111H12.2339C12.0566 9.95706 11.8639 9.82769 11.6528 9.72632C11.3481 9.57979 11.0226 9.50662 10.6743 9.50659C10.0157 9.50659 9.46168 9.73387 9.00439 10.1912C8.54708 10.6487 8.31918 11.2029 8.31885 11.8611C8.31885 12.5196 8.54585 13.0744 9.00342 13.532C9.46096 13.9895 10.0152 14.2167 10.6733 14.2166C11.2285 14.2166 11.7177 14.0439 12.145 13.696C12.5733 13.3474 12.8474 12.9069 12.9692 12.3708L12.9712 12.3621C12.9884 12.3045 13.0158 12.2512 13.0562 12.2078L13.1011 12.1677C13.1701 12.115 13.2516 12.097 13.3354 12.1091H13.3345C13.4274 12.1216 13.5057 12.1704 13.5532 12.2546C13.5954 12.3297 13.6029 12.4116 13.5825 12.4929L13.5835 12.4939C13.4418 13.1797 13.0993 13.7448 12.5591 14.1843C12.0183 14.624 11.3879 14.8434 10.6743 14.8435V14.8445H10.6733C10.2609 14.8444 9.87284 14.7662 9.51025 14.6101C9.14996 14.455 8.83342 14.2428 8.56299 13.9724C8.29238 13.7018 8.07943 13.3854 7.92432 13.0251C7.76819 12.6627 7.69095 12.2744 7.69092 11.8621C7.69092 11.4499 7.76822 11.0612 7.92432 10.698C8.07941 10.3378 8.29242 10.0213 8.56299 9.75073C8.83342 9.4803 9.14996 9.26718 9.51025 9.11206C9.87298 8.95595 10.2617 8.87866 10.6743 8.87866ZM10.6743 9.94604C10.7585 9.9461 10.8354 9.97633 10.896 10.0369C10.9568 10.0976 10.9877 10.1753 10.9878 10.2595V11.7312L12.0161 12.7595C12.0739 12.8175 12.1049 12.8906 12.1089 12.9714L12.105 13.0378C12.0975 13.0797 12.0807 13.1183 12.0571 13.1531L12.0161 13.2029C11.9571 13.2619 11.8815 13.2995 11.7935 13.2996C11.7274 13.2996 11.6687 13.2785 11.6187 13.2429L11.5718 13.2029L10.4858 12.1179V12.1169C10.4443 12.0755 10.4104 12.028 10.3892 11.9734C10.3698 11.9237 10.3599 11.8714 10.3599 11.8181V10.2595C10.36 10.175 10.3905 10.0976 10.4517 10.0369C10.5124 9.97663 10.5893 9.94647 10.6733 9.94604H10.6743Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" stroke-width=\"0.271717\" />\n </svg>\n }\n @default {\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7.5\" cy=\"7.5\" r=\"5.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" fill=\"none\" />\n <path d=\"M7.5 4.5V10.5M4.5 7.5H10.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" stroke-linecap=\"round\" />\n </svg>\n }\n }\n </lib-bubble-btn>\n @if ((tab.key === 'SPIDER' || tab.key === 'GALAXY') && activeTabKey === tab.key) {\n <div class=\"toolbelt-tab-controls\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\">\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onInfoIconClick($event, tab.key === 'SPIDER' ? 0 : 1); $event.stopPropagation()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"><path d=\"M3.14963 2.06979C3.34844 2.06979 3.50959 1.90863 3.50959 1.70983C3.50959 1.51103 3.34844 1.34987 3.14963 1.34987C2.95083 1.34987 2.78967 1.51103 2.78967 1.70983C2.78967 1.90863 2.95083 2.06979 3.14963 2.06979Z\" fill=\"#5E5965\"/><path d=\"M3.14961 2.69972C3.29871 2.69972 3.41958 2.8206 3.41958 2.96969V4.7695C3.41958 4.91859 3.29871 5.03947 3.14961 5.03947C3.00051 5.03947 2.87964 4.91859 2.87964 4.7695V2.96969C2.87964 2.8206 3.00051 2.69972 3.14961 2.69972Z\" fill=\"#5E5965\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\" fill=\"#5E5965\"/></svg>\n </div>\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onTabSettingsClick(tab.key === 'SPIDER' ? ClientViewportTab.SpiderChart : ClientViewportTab.PrefMatchVisual, $event); $event.stopPropagation()\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0Z\" fill=\"#5E5965\"/></svg>\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\" (touchstart)=\"swipe($event, 'start')\" (touchend)=\"swipe($event, 'end')\">\n @switch (activeTabKey) {\n @case ('CONTEXT') {\n @if (getTabConfig('CONTEXT')?.library; as library) {\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n } @else {\n <div></div>\n }\n }\n @case ('GALAXY') {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\" style=\"position: absolute; z-index: 999; top: 20px; right: 10px; transform: scale(0.75); transform-origin: top right;\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n <div class=\"profile-tab-content\" style=\"height: 100%; width: 100%;\">\n <div class=\"profile-trait-visual-container\" style=\"height: 100%; width: 100%;\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n </div>\n </div>\n </div>\n }\n @case ('SPIDER') {\n @if (getTabConfig('SPIDER')?.library; as library) {\n <div class=\"visuals-tab-content\">\n <div class=\"visuals-spider-chart-container\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n </div>\n } @else {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\" [showChartInfo]=\"true\"></lib-spider-chart>\n <div class=\"prospect-galaxy-stacked\">\n <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n </div>\n </div>\n </div>\n }\n }\n @case ('PLANS') {\n @if (getTabConfig('PLANS')?.library; as library) {\n <div class=\"plans-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"plans-tab-content swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"matcher\"></lib-scheduler>\n </div>\n }\n }\n @case ('SUGGESTED') {\n @if (getTabConfig('SUGGESTED')?.library; as library) {\n <div class=\"suggested-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"suggested-tab-content\">\n <lib-chat-suggestion\n [chatSuggestions]=\"clientMatches[activeIndex]?.prospectData?.chatSuggestions ?? []\"\n (suggestClicked)=\"onSuggestionClicked($event)\"></lib-chat-suggestion>\n </div>\n }\n }\n @case ('PROFILE') {\n <div class=\"profile-tab-content\">\n <lib-dashboard-swipeable-tabs [activeIndex]=\"0\" [bottomThumbs]=\"false\"\n [generalSwiperHeight]=\"'100%'\" [mainSwiperHeight]=\"'100%'\" [thumbsSwiperHeight]=\"'0px'\"\n [subMainSwiperHeight]=\"'100%'\" [menuPosition]=\"'down'\">\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"profile-comparison-container\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[activeIndex]?.primary?.src || '',\n user2Image: clientMatches[activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n </swiper-slide>\n\n <swiper-slide>\n <div class=\"profile-card-container\" style=\"height: 100%; width: 100%;\">\n <!-- Blank screen -->\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n </div>\n }\n @default {\n <div></div>\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"prefMatchManagerTemplate\"></ng-container>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 1\" type=\"button\"\n (click)=\"setPage(1)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.3438 0.111328C18.8882 -0.433809 20.4334 1.11071 19.8887 2.65527L17.1992 10.543C16.7458 10.3503 16.2463 10.2441 15.7227 10.2441C13.637 10.2444 11.9463 11.9358 11.9463 14.0215C11.9464 15.777 13.1446 17.2516 14.7676 17.6748L14.4365 18.6475C13.8005 20.4647 11.2562 20.4648 10.7109 18.5566L9.25684 13.1963C8.98429 12.0151 7.98496 11.1056 6.80371 10.7422L1.44238 9.28906C-0.465423 8.74368 -0.465315 6.1997 1.35156 5.56348L17.3438 0.111328Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\" />\n </svg>\n <svg class=\"bottom-nav-icon-badge\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.84766 -0.135742C3.27545 -0.135712 3.68372 -0.0470902 4.07129 0.129883C4.35655 0.259981 4.61539 0.427828 4.84668 0.633789V0.287109C4.84679 0.202579 4.87672 0.125256 4.9375 0.0644531C4.99854 0.00341623 5.07628 -0.0267184 5.16113 -0.0263672L5.22266 -0.0205078C5.26279 -0.0130088 5.30071 0.00172397 5.33496 0.0244141L5.38379 0.0644531L5.42383 0.113281C5.45765 0.164592 5.47453 0.223981 5.47461 0.287109V1.30078C5.47452 1.41622 5.43326 1.51987 5.35156 1.60156L5.35059 1.60059C5.26893 1.68232 5.1663 1.72363 5.05078 1.72363H4.03809C3.95349 1.72363 3.87619 1.69348 3.81543 1.63281C3.75451 1.57189 3.72363 1.4939 3.72363 1.40918C3.72375 1.32463 3.75431 1.24722 3.81543 1.18652C3.87628 1.1261 3.95371 1.09668 4.03809 1.09668H4.40723C4.22991 0.942658 4.03725 0.813283 3.82617 0.711914C3.52148 0.56539 3.19592 0.492218 2.84766 0.492188C2.18908 0.492188 1.63502 0.719471 1.17773 1.17676C0.720418 1.6343 0.492516 2.18855 0.492188 2.84668C0.492188 3.50518 0.71919 4.05997 1.17676 4.51758C1.6343 4.97512 2.18856 5.20229 2.84668 5.20215C3.40186 5.20215 3.89106 5.02945 4.31836 4.68164C4.74661 4.33302 5.02072 3.8925 5.14258 3.35645L5.14453 3.34766C5.16178 3.29008 5.18918 3.23683 5.22949 3.19336L5.27441 3.15332C5.34347 3.10058 5.42499 3.08263 5.50879 3.09473H5.50781C5.60076 3.10716 5.67909 3.15603 5.72656 3.24023C5.76874 3.31527 5.77629 3.39715 5.75586 3.47852L5.75684 3.47949C5.61511 4.16531 5.27268 4.73038 4.73242 5.16992C4.19159 5.60955 3.56123 5.82898 2.84766 5.8291V5.83008H2.84668C2.43422 5.82998 2.04618 5.75181 1.68359 5.5957C1.3233 5.44058 1.00676 5.22844 0.736328 4.95801C0.465716 4.68737 0.252766 4.37101 0.0976562 4.01074C-0.0584718 3.64827 -0.135715 3.26003 -0.135742 2.84766C-0.135742 2.43545 -0.05844 2.04676 0.0976562 1.68359C0.25275 1.32336 0.465756 1.00694 0.736328 0.736328C1.00676 0.465898 1.3233 0.252777 1.68359 0.0976562C2.04632 -0.0584577 2.43502 -0.135742 2.84766 -0.135742ZM2.84766 0.931641C2.93186 0.931692 3.00872 0.961922 3.06934 1.02246C3.1301 1.08322 3.16102 1.16087 3.16113 1.24512V2.7168L4.18945 3.74512C4.24721 3.80307 4.27829 3.87624 4.28223 3.95703L4.27832 4.02344C4.27088 4.06534 4.25403 4.1039 4.23047 4.13867L4.18945 4.18848C4.13046 4.24747 4.05485 4.28513 3.9668 4.28516C3.90077 4.28516 3.84201 4.26406 3.79199 4.22852L3.74512 4.18848L2.65918 3.10352V3.10254C2.61762 3.06109 2.58373 3.01355 2.5625 2.95898C2.54305 2.90895 2.53223 2.85578 2.53223 2.80078V1.24512C2.53223 1.16088 2.56309 1.08322 2.62378 1.02246C2.68464 0.961922 2.76308 0.931641 2.84766 0.931641Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\"\n [attr.stroke]=\"activePage === 1 ? '#FE558A' : '#666666'\" stroke-width=\"0.272\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 1\"\n [class.bottom-nav-label-muted]=\"activePage !== 1\">Messenger</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-insights\" [class.bottom-nav-item-active]=\"activePage === 2\"\n type=\"button\" (click)=\"setPage(2)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 59 35\"\n preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.3076 12.4885C22.3076 12.0886 22.6318 11.7644 23.0317 11.7644H27.3763C27.7762 11.7644 28.1003 12.0886 28.1003 12.4885C28.1003 12.8884 27.7762 13.2126 27.3763 13.2126H23.0317C22.6318 13.2126 22.3076 12.8884 22.3076 12.4885Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M27.9638 9.96072L27.6017 11.4089L27.2397 9.96072L25.7915 9.59868L27.2397 9.23663L27.6017 7.78845L27.9638 9.23663L29.412 9.59868L27.9638 9.96072Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M22.3076 6.69577C22.3076 6.29587 22.6318 5.97168 23.0317 5.97168H25.204H27.3763C27.7762 5.97168 28.1003 6.29587 28.1003 6.69577C28.1003 7.09567 27.7762 7.41986 27.3763 7.41986H23.0317C22.6318 7.41986 22.3076 7.09567 22.3076 6.69577Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M24.8714 8.86804H20.5268C20.1269 8.86804 19.8027 9.19223 19.8027 9.59213C19.8027 9.99204 20.1269 10.3162 20.5268 10.3162H24.8714C25.2713 10.3162 25.5955 9.99204 25.5955 9.59213C25.5955 9.19223 25.2713 8.86804 24.8714 8.86804Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M39.1452 20.7042C39.4436 20.4058 39.4436 19.922 39.1452 19.6236L34.9405 15.4189C34.5886 15.067 34.5547 14.5129 34.8123 14.087C35.6044 12.7772 36.0651 11.2358 36.0651 9.59216C36.0651 4.81317 32.155 0.903076 27.376 0.903076C25.2782 0.903076 23.292 1.62859 21.7115 3.03061C21.3403 3.35988 21.3585 3.93036 21.7133 4.27722C22.0927 4.64817 22.7061 4.61461 23.1307 4.29633C24.4608 3.29937 26.2836 2.96866 27.376 2.96866C31.0538 2.96866 33.8782 6.29157 33.8782 9.59216C33.8782 13.5747 31.3585 16.5926 27.376 16.5926C25.4551 16.5926 23.6474 16.0446 22.3034 14.7661C22.0102 14.4871 21.5486 14.4446 21.2428 14.7097C20.9484 14.9649 20.9078 15.4103 21.1788 15.6901C22.7647 17.3274 25.0107 18.2812 27.376 18.2812C29.2716 18.2812 30.8785 17.8916 32.0061 17.1439C32.4241 16.8668 32.9826 16.8204 33.3807 17.1253L38.1403 20.7705C38.4445 21.0035 38.8743 20.9752 39.1452 20.7042Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M20.5927 7.24594L19.912 8.74481L19.2459 7.24594L17.7397 6.57254L19.2459 5.89914L19.912 4.40027L20.5927 5.89914L22.0843 6.57254L20.5927 7.24594Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M21.1586 12.7088L20.956 13.519L20.7535 12.7088L19.9434 12.5063L20.7535 12.3038L20.956 11.4937L21.1586 12.3038L21.9687 12.5063L21.1586 12.7088Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 2\"\n [class.bottom-nav-label-muted]=\"activePage !== 2\">Insights</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-itinerary\"\n [class.bottom-nav-item-active]=\"activePage === 3\" type=\"button\" (click)=\"setPage(3)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n [attr.fill]=\"activePage === 3 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 3\"\n [class.bottom-nav-label-muted]=\"activePage !== 3\">Itinerary</span>\n </button>\n\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 4\" type=\"button\"\n (click)=\"setPage(4)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.3714 3.90686C15.5705 3.16335 14.8902 2.48307 14.1467 2.68225L10.8753 3.55864C10.3601 3.69666 10.1875 4.34067 10.5646 4.71782C10.8352 4.9884 10.8352 5.42709 10.5646 5.69767L9.49991 6.76239C8.761 7.49823 8.77278 8.51674 8.94176 9.14863C9.19114 10.1508 9.71191 11.0003 10.0079 11.6895C10.0198 11.716 10.0314 11.7421 10.0425 11.7678C10.182 12.0905 10.081 12.4531 9.83242 12.7017L9.23936 13.2948C8.97859 13.5555 8.59785 13.6432 8.26598 13.4824C7.89905 13.3046 7.42919 13.0566 6.96466 12.8125C6.49714 12.5877 6.00197 12.3619 5.38595 12.2712C4.79297 12.1657 3.92655 12.3112 3.35508 12.9072L2.04566 14.2166C1.65513 14.6072 1.65513 15.2403 2.04566 15.6309L2.42369 16.0089C2.81421 16.3994 3.44738 16.3994 3.8379 16.0089L5.03463 14.8122C5.05193 14.7949 5.07673 14.7874 5.10072 14.7922C5.45405 14.8485 6.27644 15.3196 7.10701 15.7436C7.53766 15.951 7.98624 16.1568 8.54951 16.2439C9.07746 16.3447 9.88755 16.23 10.4319 15.6857L12.1867 13.9309C12.5483 13.5796 12.7418 13.0829 12.7772 12.6676C12.8284 11.2461 12.1222 10.3668 11.7546 9.46356C11.5533 9.04008 11.4145 8.66063 11.3905 8.4809C11.3882 8.46707 11.3928 8.45301 11.4027 8.4431L12.3564 7.48937C12.627 7.21881 13.0656 7.21881 13.3362 7.48937C13.7133 7.86652 14.3573 7.69391 14.4953 7.17869L15.3714 3.90686ZM5.51167 11.5587C5.51156 11.5588 5.51162 11.559 5.51177 11.559C6.19266 11.6563 6.75736 11.9087 7.27702 12.1591C7.43696 12.2429 7.63278 12.213 7.76045 12.0853L8.36647 11.4793C8.66639 11.1794 8.73871 10.7253 8.57731 10.3331C8.44758 10.0178 8.32835 9.67976 8.23971 9.32223C8.13307 8.92505 7.57522 8.68606 7.28443 8.97685L5.05638 11.2049C4.94508 11.3162 5.03512 11.5154 5.19233 11.5231C5.30524 11.5287 5.41241 11.5406 5.51157 11.5584C5.51172 11.5584 5.51177 11.5586 5.51167 11.5587Z\"\n [attr.fill]=\"activePage === 4 ? '#FE558A' : '#626069'\" />\n </svg>\n <span class=\"bottom-nav-icon-box\"></span>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 4\"\n [class.bottom-nav-label-muted]=\"activePage !== 4\">Quests</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-settings\" [class.bottom-nav-item-active]=\"activePage === 5\"\n type=\"button\" (click)=\"setPage(5)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n [attr.fill]=\"activePage === 5 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 5\"\n [class.bottom-nav-label-muted]=\"activePage !== 5\">Settings</span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <ng-template #prefMatchManagerTemplate>\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value)\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value)\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-matcher-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:100.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-matcher-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-matcher-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.design-root.header-hidden .content-scroll{top:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.bottom-nav-item-insights{gap:2px}.bottom-nav-icon{position:relative;display:flex;align-items:center;justify-content:center}.bottom-nav-icon-main{display:block;height:17px;width:auto}.bottom-nav-icon-badge{position:absolute;right:0;bottom:5px;transform:translate(-10%,50%);display:block}.bottom-nav-icon-box{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:4px;border:2px solid #626069;box-sizing:border-box;transform:translate(-50%,-50%) scale(.93);transform-origin:center}.bottom-nav-item-active .bottom-nav-icon-box{border-color:#fe558a}.bottom-nav-item-insights .bottom-nav-icon-main{transform:translateY(15px) scale(2);transform-origin:center bottom}.bottom-nav-item-settings .bottom-nav-icon-main{transform:scale(1.1);transform-origin:center}.bottom-nav-label{font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9.5px;font-weight:600;line-height:normal;text-align:center;color:#68666c}.bottom-nav-label-active{color:#fe558a}.bottom-nav-label-muted{opacity:.7}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile,.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.request-date-btn{position:relative;width:59px;height:26px;display:flex;align-items:center;justify-content:center}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:251.296px;background:#f5436d;filter:blur(3.8px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:22px;border-radius:251.296px;border:.339px solid rgba(255,255,255,.29);background:linear-gradient(180deg,#fe558acc,#fe558aa6);box-shadow:0 4px 4px #00000040,0 1.693px 2.54px #00000040 inset;padding:0 4px;box-sizing:border-box}.request-date-label{color:#fff;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:4px}.request-date-icon{display:flex;align-items:center;justify-content:center}.top-nav-profile{position:relative;width:25px;height:25px}.top-nav-profile-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.top-nav-profile-image{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.2)}.top-nav-profile-caret{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#28252d;display:flex;align-items:center;justify-content:center}.top-nav-notification{position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:#fe3c72;border:1px solid #28252d}.chat-heads-separator{margin:10px auto;width:100%;display:flex;justify-content:center;opacity:.1}.user-chat-heads{margin-bottom:10px}.tab-switcher{margin-top:10px}.tab-strip{display:flex;gap:12px;padding:4px 10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.toolbelt-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s ease;opacity:.6}.toolbelt-tab:hover{opacity:.8}.toolbelt-tab.active{opacity:1}.toolbelt-tab-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#322f36,#29252d);border:1px solid rgba(255,255,255,.1);box-shadow:-3.6px -3.6px 5.8px #cbc7d140,8px 7.3px 9.8px #111014a6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.toolbelt-tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9px;font-weight:600;color:#939296}.toolbelt-tab-label{font-family:Lato,Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:8.7px;font-weight:400;line-height:1;color:#fff}.toolbelt-tab-active .toolbelt-tab-circle{transform:scale(1.06)}.toolbelt-tab-active .toolbelt-tab-icon{color:#f7f7f7;text-shadow:0 0 4px #ff1997}.tab-content{margin:6px auto 0;padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;height:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;pointer-events:none;z-index:0}.design-root.footer-hidden .tab-content-placeholder{margin-bottom:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;z-index:1}.tab-content-scroll lib-scheduler{display:block;width:100%;max-width:800px;margin:0 auto}.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas,.tab-content-scroll lib-profile-comparison{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none;display:block;max-width:800px;margin:0 auto}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-dashboard-swipeable-tabs{display:block;width:100%;max-width:600px;margin:0 auto}.visuals-tab-content{width:100%;height:100%}.visuals-spider-chart-container{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-bottom:20px}.visuals-spider-chart-container lib-spider-chart{height:auto;width:100%}.visuals-spider-chart-container img{margin-top:20px;z-index:1}.plans-tab-content{width:100%;height:100%;padding:8px 8px 0;box-sizing:border-box}.profile-tab-content{width:100%;height:100%}.profile-trait-visual-container{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.profile-trait-visual-container tv-trait-visual-canvas{display:block;width:100%!important;height:100%!important;min-height:300px;max-width:100%!important;max-height:100%!important;position:relative;z-index:1}.profile-trait-visual-container tv-trait-visual-canvas ::ng-deep canvas{width:100%!important;height:100%!important;min-height:300px!important;object-fit:contain!important}.profile-card-container,.profile-comparison-container{width:100%;height:100%;min-height:300px;display:block;background:transparent;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.profile-card-container::-webkit-scrollbar,.profile-comparison-container::-webkit-scrollbar{display:none}.suggested-tab-content{padding:12px 20px 0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;height:100%;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.suggested-tab-content::-webkit-scrollbar{display:none}.suggested-tab-content>*{max-width:100%;width:100%}.tab-content-placeholder lib-chat-suggestion{--max-width-container: 100%}.tab-switcher ::ng-deep .custom-bubble-status .lib-button-component button .text .btn-text .title{color:#fff!important}.suggested-timer-text{fill:#939296}.suggested-timer-num{font-family:Open Sans,sans-serif;font-weight:600}.suggested-timer-unit{font-family:Cutive Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400}.suggested-timer-text.active{filter:drop-shadow(0 0 2px #ff1997);text-shadow:0 0 2px #ff1997}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;white-space:nowrap;padding:10px 0;cursor:pointer}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.visuals-spider-content{position:relative;width:100%;height:100%}.visuals-spider-content .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.spider-tab-label-container{display:flex;align-items:center;gap:4px}.info-icon{cursor:pointer;display:flex;align-items:center;justify-content:center}.info-icon svg{display:block}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.visuals-spider-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#27242c}.toolbelt-tab-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-top:-2px}.toolbelt-tab-icon-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbelt-tab-icon-btn svg{display:block}.prospect-galaxy-stacked{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.spider-tab-switchers{display:none}.spider-tab-label-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px}.visuals-spider-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.visuals-spider-content::-webkit-scrollbar{display:none}.visuals-spider-content lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.visuals-spider-content img{max-width:100%;max-height:100%;object-fit:contain;align-self:center;margin:auto}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: LibStatusBarComponent, selector: "lib-status-bar" }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config", "menuPosition"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup", "rejectRequest"] }, { kind: "component", type: i9.ProfileComparisonLibComponent, selector: "lib-profile-comparison", inputs: ["config", "backendMode", "backendUrl", "fadeAllEdges"], outputs: ["matrixDataChange", "rawLLMOutputChange", "viewProfileClick"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"], outputs: ["tooltipActiveChange"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "events", "startDate", "endDate", "default", "role"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: i11.TraitVisualCanvasComponent, selector: "tv-trait-visual-canvas", inputs: ["config", "assetsBaseUrl", "verboseWebGLLog", "command"], outputs: ["nodeSelected", "rightClick", "frameRendered", "perfStats", "cameraLockChanged", "nodeDataChanged"] }, { kind: "component", type: i1.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "enableActiveStyle", "checked", "disabled", "loading$"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight", "enableGrouping", "enableDragAndDrop", "enableTabBarScrollDrag", "items", "thumbTemplate", "contentTemplate", "groupingAdapter", "showPrefRejectButton", "menuPosition"], outputs: ["repositionModeChange", "activeIndexChange", "itemClicked", "expandedIdChange"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11524
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MatcherViewportComponent, isStandalone: false, selector: "lib-matcher-viewport", inputs: { config: "config", showViewportControls: "showViewportControls", showViewportHeader: "showViewportHeader", showViewportFooter: "showViewportFooter", activePageInput: "activePageInput", enablePageRouting: "enablePageRouting", pageRouteQueryParamKey: "pageRouteQueryParamKey", pageRouteParamKey: "pageRouteParamKey", pageRouteSegmentName: "pageRouteSegmentName" }, outputs: { activeIndexChange: "activeIndexChange", activePageChange: "activePageChange" }, viewQueries: [{ propertyName: "spiderChartComponent", first: true, predicate: SpiderChartComponent, descendants: true }, { propertyName: "tabStripRef", first: true, predicate: ["tabStrip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">On</span>\n <span class=\"request-date-icon\">\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M20.9778 10.526C20.9778 16.3393 16.2817 21.0519 10.4889 21.0519C4.69604 21.0519 0 16.3393 0 10.526C0 4.71263 4.69604 0 10.4889 0C16.2817 0 20.9778 4.71263 20.9778 10.526Z\"\n fill=\"white\" />\n <path\n d=\"M10.6016 3.9873C13.0366 3.9873 15.1862 5.55213 15.4844 7.72461C16.219 7.96315 16.7519 8.64584 16.752 9.4541V11.2773C16.7518 12.0896 16.213 12.7737 15.4727 13.0088C15.2238 14.4405 13.9647 15.5283 12.4473 15.5283H11.8389C11.6129 15.9788 11.1434 16.2881 10.6016 16.2881C9.84089 16.2881 9.22089 15.6785 9.2207 14.9229C9.2207 14.1671 9.84077 13.5576 10.6016 13.5576C11.1433 13.5576 11.6128 13.8661 11.8389 14.3164H12.4473C13.2546 14.3164 13.9394 13.8067 14.1924 13.0977H13.0635C12.7276 13.0977 12.4512 12.8285 12.4512 12.4922V8.23926C12.4512 7.90295 12.7275 7.63281 13.0635 7.63281H14.2188C13.8831 6.29752 12.4582 5.19922 10.6016 5.19922C8.7449 5.19922 7.32005 6.29752 6.98438 7.63281H8.13965C8.47558 7.63281 8.75195 7.90295 8.75195 8.23926V12.4922C8.75192 12.8285 8.47556 13.0977 8.13965 13.0977H6.29395C5.27841 13.0977 4.45139 12.2846 4.45117 11.2773V9.4541C4.45119 8.64616 4.98361 7.96342 5.71777 7.72461C6.01586 5.55207 8.16648 3.9873 10.6016 3.9873ZM13.6748 11.8867H14.9092C15.2529 11.8867 15.5281 11.612 15.5283 11.2773V9.4541C15.5283 9.11928 15.253 8.84473 14.9092 8.84473H13.6748V11.8867ZM6.29395 8.84473C5.95016 8.84473 5.67483 9.11928 5.6748 9.4541V11.2773C5.67503 11.612 5.95028 11.8867 6.29395 11.8867H7.52832V8.84473H6.29395Z\"\n fill=\"#FE3C72\" stroke=\"#FE3C72\" stroke-width=\"0.3\" />\n </svg>\n </span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"userProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n </div>\n }\n <div class=\"content-scroll\">\n <div class=\"chat-heads-separator\">\n <svg width=\"274\" height=\"5\" viewBox=\"0 0 274 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.3\" d=\"M0 2.5L274 2.49998\" stroke=\"url(#paint0_radial_4170_4807)\" stroke-width=\"5\" />\n <defs>\n <radialGradient id=\"paint0_radial_4170_4807\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(137 2.99999) rotate(90) scale(0.5 137)\">\n <stop stop-color=\"#F7F5DD\" />\n <stop offset=\"1\" stop-color=\"#F7F5DD\" stop-opacity=\"0\" />\n </radialGradient>\n </defs>\n </svg>\n </div>\n @if (activePage === 2) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Insights</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your matching insights here.</p>\n </div>\n } @else if (activePage === 3) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Itinerary</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your upcoming dates.</p>\n </div>\n } @else if (activePage === 4) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Quests</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Complete quests to earn rewards.</p>\n </div>\n } @else if (activePage === 5) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M10.325 4.317C10.565 3.56 11.269 3 12.102 3C12.935 3 13.639 3.56 13.879 4.317C14.135 4.382 14.383 4.475 14.622 4.595L15.69 3.528C16.279 2.939 17.236 2.939 17.825 3.528C18.414 4.117 18.414 5.074 17.825 5.663L16.758 6.73C16.877 6.97 16.971 7.218 17.036 7.474C17.793 7.714 18.353 8.418 18.353 9.251C18.353 10.084 17.793 10.788 17.036 11.028C16.971 11.284 16.877 11.532 16.758 11.772L17.825 12.839C18.414 13.428 18.414 14.385 17.825 14.974C17.236 15.563 16.279 15.563 15.69 14.974L14.622 13.907C14.383 14.027 14.135 14.12 13.879 14.185C13.639 14.942 12.935 15.502 12.102 15.502C11.269 15.502 10.565 14.942 10.325 14.185C10.069 14.12 9.821 14.027 9.582 13.907L8.514 14.974C7.925 15.563 6.968 15.563 6.379 14.974C5.79 14.385 5.79 13.428 6.379 12.839L7.446 11.772C7.327 11.532 7.233 11.284 7.168 11.028C6.411 10.788 5.851 10.084 5.851 9.251C5.851 8.418 6.411 7.714 7.168 7.474C7.233 7.218 7.327 6.97 7.446 6.73L6.379 5.663C5.79 5.074 5.79 4.117 6.379 3.528C6.968 2.939 7.925 2.939 8.514 3.528L9.582 4.595C9.821 4.475 10.069 4.382 10.325 4.317ZM12.102 11.335C13.253 11.335 14.186 10.402 14.186 9.251C14.186 8.1 13.253 7.167 12.102 7.167C10.951 7.167 10.018 8.1 10.018 9.251C10.018 10.402 10.951 11.335 12.102 11.335Z\"\n fill=\"currentColor\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Settings</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Adjust your preferences.</p>\n </div>\n } @else if (getPageConfig(activePage)?.custom?.content; as pageContent) {\n <div class=\"custom-page-content\" style=\"flex: 1; overflow: auto;\">\n <ng-container *ngTemplateOutlet=\"pageContent\"></ng-container>\n </div>\n } @else {\n @if (getPageConfig(activePage)?.custom?.swipeableTabs; as swipeableTabs) {\n <div class=\"user-chat-heads\">\n <ng-container *ngTemplateOutlet=\"swipeableTabs\"></ng-container>\n </div>\n } @else {\n @if (userHomeConfig) {\n <div class=\"user-chat-heads\">\n <lib-client-home [config]=\"userHomeConfig\" [menuPosition]=\"'down'\"\n (activeIndexChange)=\"onChatHeadChange($event)\"></lib-client-home>\n </div>\n }\n }\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip>\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <div class=\"toolbelt-tab\">\n <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"\n tab.key === 'SUGGESTED' ? (hasSuggestions ? 'Suggested' : 'Suggest') : tab.label\n \" [hasIcon]=\"true\" [checked]=\"tab.key === activeTabKey\" (click)=\"setActiveTab(tab.key)\">\n @switch (tab.key) {\n @case ('CONTEXT') {\n <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.40551 11.603C4.00666 11.603 3.66509 11.4608 3.38082 11.1766C3.09655 10.8923 2.95465 10.551 2.95514 10.1526V8.70224C2.95514 8.49677 3.02475 8.32442 3.16399 8.18518C3.30322 8.04595 3.47534 7.97657 3.68032 7.97705H5.13069V6.34538C4.70767 6.32121 4.30567 6.22742 3.92471 6.06401C3.54374 5.9006 3.19638 5.65597 2.88262 5.33012V4.53242H2.04865L0.308204 2.79197C0.102735 2.5865 0 2.37499 0 2.15743C0 1.93987 0.102735 1.74649 0.308204 1.57728C0.658711 1.27512 1.09068 1.04548 1.60411 0.888354C2.11754 0.73123 2.66458 0.652668 3.24521 0.652668C3.57154 0.652668 3.88869 0.676841 4.19665 0.725187C4.50462 0.773532 4.81596 0.864181 5.13069 0.997132V0.725187C5.13069 0.519717 5.20031 0.347606 5.33955 0.208854C5.47878 0.0701014 5.6509 0.000483458 5.85588 0H13.1077C13.3132 0 13.4856 0.069618 13.6248 0.208854C13.764 0.34809 13.8334 0.520201 13.8329 0.725187V9.42743C13.8329 10.0317 13.6214 10.5454 13.1984 10.9684C12.7754 11.3915 12.2617 11.603 11.6574 11.603H4.40551ZM6.58107 7.97705H10.207C10.4125 7.97705 10.5848 8.04667 10.7241 8.18591C10.8633 8.32514 10.9327 8.49725 10.9322 8.70224V9.42743C10.9322 9.6329 11.0018 9.80525 11.141 9.94448C11.2803 10.0837 11.4524 10.1531 11.6574 10.1526C11.8628 10.1526 12.0352 10.083 12.1744 9.94376C12.3137 9.80452 12.383 9.63241 12.3826 9.42743V1.45037H6.58107V1.88549L10.7146 6.01905C10.7992 6.10365 10.8568 6.18222 10.8872 6.25473C10.9177 6.32725 10.9327 6.4179 10.9322 6.52668C10.9322 6.73215 10.8626 6.9045 10.7233 7.04374C10.5841 7.18297 10.412 7.25235 10.207 7.25187C10.0982 7.25187 10.0076 7.23664 9.93506 7.20618C9.86254 7.17572 9.78398 7.11843 9.69937 7.03431L7.85014 5.18508L7.70511 5.33012C7.5359 5.49933 7.3575 5.65041 7.16992 5.78336C6.98234 5.91631 6.78605 6.01905 6.58107 6.09157V7.97705ZM2.66506 3.08204H4.33299V4.64119C4.47803 4.73789 4.62911 4.80436 4.78623 4.84062C4.94335 4.87688 5.10652 4.89501 5.27573 4.89501C5.55372 4.89501 5.80464 4.85271 6.02848 4.7681C6.25232 4.6835 6.47277 4.53242 6.68985 4.31486L6.83488 4.16982L5.81962 3.15456C5.46912 2.80405 5.07631 2.54105 4.64119 2.36556C4.20608 2.19006 3.74075 2.10256 3.24521 2.10304C3.00348 2.10304 2.77384 2.12117 2.55628 2.15743C2.33873 2.19369 2.12117 2.24808 1.90361 2.3206L2.66506 3.08204ZM4.40551 10.1526H9.59059C9.55433 10.0438 9.52702 9.92901 9.50865 9.80815C9.49027 9.68728 9.48133 9.56038 9.48181 9.42743H4.40551V10.1526Z\"\n [attr.fill]=\"activeTabKey === 'CONTEXT' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('GALAXY') {\n <svg width=\"17\" height=\"20\" viewBox=\"0 0 17 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n </svg>\n }\n @case ('SPIDER') {\n <svg width=\"17\" height=\"15\" viewBox=\"0 0 17 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.30245 0L16.6049 5.76773L13.3539 14.9444H3.25104L0 5.76773L8.30245 0ZM6.13278 11.4367L4.63453 13.3906H11.9698L11.0753 12.2245L6.13278 11.4367ZM2.04264 6.69219L4.1665 12.6875L5.50796 10.9387L4.2299 7.27331L2.04264 6.69219ZM14.244 7.58485L11.8228 11.8849L12.437 12.6867L14.244 7.58485ZM12.6085 7.21116L8.97736 8.17527L10.7576 10.4974L12.6085 7.21116ZM8.30245 8.60885L7.21018 10.0329L9.69886 10.4299L8.30245 8.60885ZM6.11652 7.77441L6.6853 9.40355L7.62699 8.17527L6.11652 7.77441ZM8.70844 5.41961L8.70871 7.44116L12.0381 6.55699L8.70844 5.41961ZM7.89591 5.82751L6.43179 7.0519L7.89591 7.44112V5.82751ZM7.89591 2.20251L2.44077 5.99221L4.55976 6.55469L7.89591 3.76327V2.20251ZM8.70844 2.20251V3.7695L13.1455 5.28445L8.70844 2.20251Z\"\n [attr.fill]=\"activeTabKey === 'SPIDER' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('PLANS') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.34766 0.181641C5.4477 0.181641 5.5293 0.262261 5.5293 0.362305V1.28906H9.59863V0.362305C9.59863 0.262366 9.6794 0.18181 9.7793 0.181641H10.8877C10.9877 0.181731 11.0684 0.262317 11.0684 0.362305V1.28906H11.4414C11.7833 1.28906 12.1108 1.42528 12.3525 1.66699C12.5943 1.90873 12.7305 2.23625 12.7305 2.57812V8.29785C12.7304 8.6397 12.5943 8.96726 12.3525 9.20898C12.1108 9.45068 11.7833 9.58691 11.4414 9.58691H3.68652C3.34464 9.58691 3.01616 9.45073 2.77441 9.20898C2.53282 8.96728 2.39748 8.6396 2.39746 8.29785V2.57812C2.39747 2.23637 2.53283 1.90871 2.77441 1.66699C3.01616 1.42525 3.34464 1.28906 3.68652 1.28906H4.05859V0.362305C4.05859 0.262261 4.14019 0.181641 4.24023 0.181641H5.34766ZM3.38477 8.59668L11.7334 8.58887L11.7695 2.98145L3.37207 2.94922L3.38477 8.59668ZM8.91992 4.23926C8.97207 4.23576 9.02359 4.25504 9.06055 4.29199L9.64746 4.87891C9.68133 4.91278 9.70008 4.95895 9.7002 5.00684C9.7002 5.05488 9.68143 5.10177 9.64746 5.13574L7.1875 7.59473C7.15353 7.62868 7.1076 7.64844 7.05957 7.64844C7.01156 7.64841 6.96559 7.62867 6.93164 7.59473L5.44727 6.11035C5.41334 6.07643 5.39361 6.03039 5.39355 5.98242C5.39355 5.93439 5.41331 5.88846 5.44727 5.85449L5.76465 5.53613L5.82422 5.49707C5.84629 5.48807 5.87022 5.48315 5.89453 5.4834C5.94317 5.48392 5.98975 5.50398 6.02344 5.53906L7.04395 6.60156L8.78809 4.31055L8.81445 4.28223C8.8438 4.25719 8.88076 4.2419 8.91992 4.23926ZM9.40723 11.6211C9.40723 11.7211 9.32563 11.8027 9.22559 11.8027H1.4707C1.12882 11.8027 0.80034 11.6666 0.558594 11.4248C0.316998 11.1831 0.181657 10.8554 0.181641 10.5137V3.86621C0.181641 3.81819 0.200438 3.77225 0.234375 3.73828C0.268346 3.70431 0.314262 3.68457 0.362305 3.68457H0.882812C0.982401 3.68457 1.06381 3.76565 1.06445 3.86523L1.1084 10.873L9.22559 10.8926C9.32542 10.8928 9.40714 10.9734 9.40723 11.0732V11.6211Z\"\n [attr.fill]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" stroke-width=\"0.362289\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('SUGGESTED') {\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"5.3\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.hours }}</tspan><tspan class=\"suggested-timer-unit\">h</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"9.2\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.minutes }}</tspan><tspan class=\"suggested-timer-unit\">m</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"13.1\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.seconds }}</tspan><tspan class=\"suggested-timer-unit\">s</tspan>\n </text>\n </svg>\n }\n @case ('PROFILE') {\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.88281 0C9.29266 0 11.251 1.9089 11.251 4.27539C11.2508 5.6683 10.5724 6.92903 9.53809 7.73047C9.80086 7.83716 10.0574 7.96302 10.3076 8.10352C9.5682 8.1673 8.88987 8.44387 8.33398 8.87207C7.85197 8.72388 7.34477 8.63898 6.82129 8.62793C4.54458 8.68351 2.57249 10.1185 1.68652 12.2139C1.53591 12.5956 1.5358 12.9017 1.76172 13.207C1.91239 13.5123 2.28955 13.7412 2.66602 13.7412H7.3584C7.73672 14.401 8.30825 14.9353 8.99609 15.2676H2.59082C1.68713 15.2676 0.933404 14.8093 0.40625 14.0459C-0.0453186 13.3589 -0.120497 12.4429 0.180664 11.6797C0.933743 9.84762 2.43985 8.39701 4.17188 7.70996C3.19307 6.94661 2.5909 5.72546 2.59082 4.35156C2.59082 1.98518 4.54841 0.000180704 6.88281 0ZM6.88281 1.52637C5.37679 1.52655 4.09668 2.8249 4.09668 4.35156C4.09683 5.87813 5.37688 7.1756 6.88281 7.17578C8.38888 7.17578 9.66977 5.87824 9.66992 4.35156C9.66992 2.82479 8.38897 1.52637 6.88281 1.52637Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" />\n <path\n d=\"M10.6743 8.87866C11.1021 8.87869 11.5104 8.96731 11.8979 9.14429C12.1832 9.27439 12.442 9.44223 12.6733 9.64819V9.30151C12.6734 9.21698 12.7034 9.13966 12.7642 9.07886C12.8252 9.01782 12.9029 8.98769 12.9878 8.98804L13.0493 8.9939C13.0894 9.0014 13.1274 9.01613 13.1616 9.03882L13.2104 9.07886L13.2505 9.12769C13.2843 9.179 13.3012 9.23839 13.3013 9.30151V10.3152C13.3012 10.4306 13.2599 10.5343 13.1782 10.616L13.1772 10.615C13.0956 10.6967 12.993 10.738 12.8774 10.738H11.8647C11.7801 10.738 11.7028 10.7079 11.6421 10.6472C11.5812 10.5863 11.5503 10.5083 11.5503 10.4236C11.5504 10.339 11.581 10.2616 11.6421 10.2009C11.7029 10.1405 11.7804 10.1111 11.8647 10.1111H12.2339C12.0566 9.95706 11.8639 9.82769 11.6528 9.72632C11.3481 9.57979 11.0226 9.50662 10.6743 9.50659C10.0157 9.50659 9.46168 9.73387 9.00439 10.1912C8.54708 10.6487 8.31918 11.2029 8.31885 11.8611C8.31885 12.5196 8.54585 13.0744 9.00342 13.532C9.46096 13.9895 10.0152 14.2167 10.6733 14.2166C11.2285 14.2166 11.7177 14.0439 12.145 13.696C12.5733 13.3474 12.8474 12.9069 12.9692 12.3708L12.9712 12.3621C12.9884 12.3045 13.0158 12.2512 13.0562 12.2078L13.1011 12.1677C13.1701 12.115 13.2516 12.097 13.3354 12.1091H13.3345C13.4274 12.1216 13.5057 12.1704 13.5532 12.2546C13.5954 12.3297 13.6029 12.4116 13.5825 12.4929L13.5835 12.4939C13.4418 13.1797 13.0993 13.7448 12.5591 14.1843C12.0183 14.624 11.3879 14.8434 10.6743 14.8435V14.8445H10.6733C10.2609 14.8444 9.87284 14.7662 9.51025 14.6101C9.14996 14.455 8.83342 14.2428 8.56299 13.9724C8.29238 13.7018 8.07943 13.3854 7.92432 13.0251C7.76819 12.6627 7.69095 12.2744 7.69092 11.8621C7.69092 11.4499 7.76822 11.0612 7.92432 10.698C8.07941 10.3378 8.29242 10.0213 8.56299 9.75073C8.83342 9.4803 9.14996 9.26718 9.51025 9.11206C9.87298 8.95595 10.2617 8.87866 10.6743 8.87866ZM10.6743 9.94604C10.7585 9.9461 10.8354 9.97633 10.896 10.0369C10.9568 10.0976 10.9877 10.1753 10.9878 10.2595V11.7312L12.0161 12.7595C12.0739 12.8175 12.1049 12.8906 12.1089 12.9714L12.105 13.0378C12.0975 13.0797 12.0807 13.1183 12.0571 13.1531L12.0161 13.2029C11.9571 13.2619 11.8815 13.2995 11.7935 13.2996C11.7274 13.2996 11.6687 13.2785 11.6187 13.2429L11.5718 13.2029L10.4858 12.1179V12.1169C10.4443 12.0755 10.4104 12.028 10.3892 11.9734C10.3698 11.9237 10.3599 11.8714 10.3599 11.8181V10.2595C10.36 10.175 10.3905 10.0976 10.4517 10.0369C10.5124 9.97663 10.5893 9.94647 10.6733 9.94604H10.6743Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" stroke-width=\"0.271717\" />\n </svg>\n }\n @default {\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7.5\" cy=\"7.5\" r=\"5.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" fill=\"none\" />\n <path d=\"M7.5 4.5V10.5M4.5 7.5H10.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" stroke-linecap=\"round\" />\n </svg>\n }\n }\n </lib-bubble-btn>\n @if ((tab.key === 'SPIDER' || tab.key === 'GALAXY') && activeTabKey === tab.key) {\n <div class=\"toolbelt-tab-controls\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\">\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onInfoIconClick($event, tab.key === 'SPIDER' ? 0 : 1); $event.stopPropagation()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"><path d=\"M3.14963 2.06979C3.34844 2.06979 3.50959 1.90863 3.50959 1.70983C3.50959 1.51103 3.34844 1.34987 3.14963 1.34987C2.95083 1.34987 2.78967 1.51103 2.78967 1.70983C2.78967 1.90863 2.95083 2.06979 3.14963 2.06979Z\" fill=\"#5E5965\"/><path d=\"M3.14961 2.69972C3.29871 2.69972 3.41958 2.8206 3.41958 2.96969V4.7695C3.41958 4.91859 3.29871 5.03947 3.14961 5.03947C3.00051 5.03947 2.87964 4.91859 2.87964 4.7695V2.96969C2.87964 2.8206 3.00051 2.69972 3.14961 2.69972Z\" fill=\"#5E5965\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\" fill=\"#5E5965\"/></svg>\n </div>\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onTabSettingsClick(tab.key === 'SPIDER' ? ClientViewportTab.SpiderChart : ClientViewportTab.PrefMatchVisual, $event); $event.stopPropagation()\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0Z\" fill=\"#5E5965\"/></svg>\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\" (touchstart)=\"swipe($event, 'start')\" (touchend)=\"swipe($event, 'end')\">\n @switch (activeTabKey) {\n @case ('CONTEXT') {\n @if (getTabConfig('CONTEXT')?.library; as library) {\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n } @else {\n <div></div>\n }\n }\n @case ('GALAXY') {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\" style=\"position: absolute; z-index: 999; top: 20px; right: 10px; transform: scale(0.75); transform-origin: top right;\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n <div class=\"profile-tab-content\" style=\"height: 100%; width: 100%;\">\n <div class=\"profile-trait-visual-container\" style=\"height: 100%; width: 100%;\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n </div>\n </div>\n </div>\n }\n @case ('SPIDER') {\n @if (getTabConfig('SPIDER')?.library; as library) {\n <div class=\"visuals-tab-content\">\n <div class=\"visuals-spider-chart-container\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n </div>\n } @else {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\" [showChartInfo]=\"true\"></lib-spider-chart>\n <div class=\"prospect-galaxy-stacked\">\n <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n </div>\n </div>\n </div>\n }\n }\n @case ('PLANS') {\n @if (getTabConfig('PLANS')?.library; as library) {\n <div class=\"plans-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"plans-tab-content swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"matcher\"></lib-scheduler>\n </div>\n }\n }\n @case ('SUGGESTED') {\n @if (getTabConfig('SUGGESTED')?.library; as library) {\n <div class=\"suggested-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"suggested-tab-content\">\n <lib-chat-suggestion\n [chatSuggestions]=\"clientMatches[activeIndex]?.prospectData?.chatSuggestions ?? []\"\n (suggestClicked)=\"onSuggestionClicked($event)\"></lib-chat-suggestion>\n </div>\n }\n }\n @case ('PROFILE') {\n <div class=\"profile-tab-content\">\n <lib-dashboard-swipeable-tabs [activeIndex]=\"0\" [bottomThumbs]=\"false\"\n [generalSwiperHeight]=\"'100%'\" [mainSwiperHeight]=\"'100%'\" [thumbsSwiperHeight]=\"'0px'\"\n [subMainSwiperHeight]=\"'100%'\" [menuPosition]=\"'down'\">\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"profile-comparison-container\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[activeIndex]?.primary?.src || '',\n user2Image: clientMatches[activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n </swiper-slide>\n\n <swiper-slide>\n <div class=\"profile-card-container\" style=\"height: 100%; width: 100%;\">\n <!-- Blank screen -->\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n </div>\n }\n @default {\n <div></div>\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"prefMatchManagerTemplate\"></ng-container>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 1\" type=\"button\"\n (click)=\"setPage(1)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.3438 0.111328C18.8882 -0.433809 20.4334 1.11071 19.8887 2.65527L17.1992 10.543C16.7458 10.3503 16.2463 10.2441 15.7227 10.2441C13.637 10.2444 11.9463 11.9358 11.9463 14.0215C11.9464 15.777 13.1446 17.2516 14.7676 17.6748L14.4365 18.6475C13.8005 20.4647 11.2562 20.4648 10.7109 18.5566L9.25684 13.1963C8.98429 12.0151 7.98496 11.1056 6.80371 10.7422L1.44238 9.28906C-0.465423 8.74368 -0.465315 6.1997 1.35156 5.56348L17.3438 0.111328Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\" />\n </svg>\n <svg class=\"bottom-nav-icon-badge\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.84766 -0.135742C3.27545 -0.135712 3.68372 -0.0470902 4.07129 0.129883C4.35655 0.259981 4.61539 0.427828 4.84668 0.633789V0.287109C4.84679 0.202579 4.87672 0.125256 4.9375 0.0644531C4.99854 0.00341623 5.07628 -0.0267184 5.16113 -0.0263672L5.22266 -0.0205078C5.26279 -0.0130088 5.30071 0.00172397 5.33496 0.0244141L5.38379 0.0644531L5.42383 0.113281C5.45765 0.164592 5.47453 0.223981 5.47461 0.287109V1.30078C5.47452 1.41622 5.43326 1.51987 5.35156 1.60156L5.35059 1.60059C5.26893 1.68232 5.1663 1.72363 5.05078 1.72363H4.03809C3.95349 1.72363 3.87619 1.69348 3.81543 1.63281C3.75451 1.57189 3.72363 1.4939 3.72363 1.40918C3.72375 1.32463 3.75431 1.24722 3.81543 1.18652C3.87628 1.1261 3.95371 1.09668 4.03809 1.09668H4.40723C4.22991 0.942658 4.03725 0.813283 3.82617 0.711914C3.52148 0.56539 3.19592 0.492218 2.84766 0.492188C2.18908 0.492188 1.63502 0.719471 1.17773 1.17676C0.720418 1.6343 0.492516 2.18855 0.492188 2.84668C0.492188 3.50518 0.71919 4.05997 1.17676 4.51758C1.6343 4.97512 2.18856 5.20229 2.84668 5.20215C3.40186 5.20215 3.89106 5.02945 4.31836 4.68164C4.74661 4.33302 5.02072 3.8925 5.14258 3.35645L5.14453 3.34766C5.16178 3.29008 5.18918 3.23683 5.22949 3.19336L5.27441 3.15332C5.34347 3.10058 5.42499 3.08263 5.50879 3.09473H5.50781C5.60076 3.10716 5.67909 3.15603 5.72656 3.24023C5.76874 3.31527 5.77629 3.39715 5.75586 3.47852L5.75684 3.47949C5.61511 4.16531 5.27268 4.73038 4.73242 5.16992C4.19159 5.60955 3.56123 5.82898 2.84766 5.8291V5.83008H2.84668C2.43422 5.82998 2.04618 5.75181 1.68359 5.5957C1.3233 5.44058 1.00676 5.22844 0.736328 4.95801C0.465716 4.68737 0.252766 4.37101 0.0976562 4.01074C-0.0584718 3.64827 -0.135715 3.26003 -0.135742 2.84766C-0.135742 2.43545 -0.05844 2.04676 0.0976562 1.68359C0.25275 1.32336 0.465756 1.00694 0.736328 0.736328C1.00676 0.465898 1.3233 0.252777 1.68359 0.0976562C2.04632 -0.0584577 2.43502 -0.135742 2.84766 -0.135742ZM2.84766 0.931641C2.93186 0.931692 3.00872 0.961922 3.06934 1.02246C3.1301 1.08322 3.16102 1.16087 3.16113 1.24512V2.7168L4.18945 3.74512C4.24721 3.80307 4.27829 3.87624 4.28223 3.95703L4.27832 4.02344C4.27088 4.06534 4.25403 4.1039 4.23047 4.13867L4.18945 4.18848C4.13046 4.24747 4.05485 4.28513 3.9668 4.28516C3.90077 4.28516 3.84201 4.26406 3.79199 4.22852L3.74512 4.18848L2.65918 3.10352V3.10254C2.61762 3.06109 2.58373 3.01355 2.5625 2.95898C2.54305 2.90895 2.53223 2.85578 2.53223 2.80078V1.24512C2.53223 1.16088 2.56309 1.08322 2.62378 1.02246C2.68464 0.961922 2.76308 0.931641 2.84766 0.931641Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\"\n [attr.stroke]=\"activePage === 1 ? '#FE558A' : '#666666'\" stroke-width=\"0.272\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 1\"\n [class.bottom-nav-label-muted]=\"activePage !== 1\">Messenger</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-insights\" [class.bottom-nav-item-active]=\"activePage === 2\"\n type=\"button\" (click)=\"setPage(2)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 59 35\"\n preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.3076 12.4885C22.3076 12.0886 22.6318 11.7644 23.0317 11.7644H27.3763C27.7762 11.7644 28.1003 12.0886 28.1003 12.4885C28.1003 12.8884 27.7762 13.2126 27.3763 13.2126H23.0317C22.6318 13.2126 22.3076 12.8884 22.3076 12.4885Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M27.9638 9.96072L27.6017 11.4089L27.2397 9.96072L25.7915 9.59868L27.2397 9.23663L27.6017 7.78845L27.9638 9.23663L29.412 9.59868L27.9638 9.96072Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M22.3076 6.69577C22.3076 6.29587 22.6318 5.97168 23.0317 5.97168H25.204H27.3763C27.7762 5.97168 28.1003 6.29587 28.1003 6.69577C28.1003 7.09567 27.7762 7.41986 27.3763 7.41986H23.0317C22.6318 7.41986 22.3076 7.09567 22.3076 6.69577Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M24.8714 8.86804H20.5268C20.1269 8.86804 19.8027 9.19223 19.8027 9.59213C19.8027 9.99204 20.1269 10.3162 20.5268 10.3162H24.8714C25.2713 10.3162 25.5955 9.99204 25.5955 9.59213C25.5955 9.19223 25.2713 8.86804 24.8714 8.86804Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M39.1452 20.7042C39.4436 20.4058 39.4436 19.922 39.1452 19.6236L34.9405 15.4189C34.5886 15.067 34.5547 14.5129 34.8123 14.087C35.6044 12.7772 36.0651 11.2358 36.0651 9.59216C36.0651 4.81317 32.155 0.903076 27.376 0.903076C25.2782 0.903076 23.292 1.62859 21.7115 3.03061C21.3403 3.35988 21.3585 3.93036 21.7133 4.27722C22.0927 4.64817 22.7061 4.61461 23.1307 4.29633C24.4608 3.29937 26.2836 2.96866 27.376 2.96866C31.0538 2.96866 33.8782 6.29157 33.8782 9.59216C33.8782 13.5747 31.3585 16.5926 27.376 16.5926C25.4551 16.5926 23.6474 16.0446 22.3034 14.7661C22.0102 14.4871 21.5486 14.4446 21.2428 14.7097C20.9484 14.9649 20.9078 15.4103 21.1788 15.6901C22.7647 17.3274 25.0107 18.2812 27.376 18.2812C29.2716 18.2812 30.8785 17.8916 32.0061 17.1439C32.4241 16.8668 32.9826 16.8204 33.3807 17.1253L38.1403 20.7705C38.4445 21.0035 38.8743 20.9752 39.1452 20.7042Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M20.5927 7.24594L19.912 8.74481L19.2459 7.24594L17.7397 6.57254L19.2459 5.89914L19.912 4.40027L20.5927 5.89914L22.0843 6.57254L20.5927 7.24594Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M21.1586 12.7088L20.956 13.519L20.7535 12.7088L19.9434 12.5063L20.7535 12.3038L20.956 11.4937L21.1586 12.3038L21.9687 12.5063L21.1586 12.7088Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 2\"\n [class.bottom-nav-label-muted]=\"activePage !== 2\">Insights</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-itinerary\"\n [class.bottom-nav-item-active]=\"activePage === 3\" type=\"button\" (click)=\"setPage(3)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n [attr.fill]=\"activePage === 3 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 3\"\n [class.bottom-nav-label-muted]=\"activePage !== 3\">Itinerary</span>\n </button>\n\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 4\" type=\"button\"\n (click)=\"setPage(4)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.3714 3.90686C15.5705 3.16335 14.8902 2.48307 14.1467 2.68225L10.8753 3.55864C10.3601 3.69666 10.1875 4.34067 10.5646 4.71782C10.8352 4.9884 10.8352 5.42709 10.5646 5.69767L9.49991 6.76239C8.761 7.49823 8.77278 8.51674 8.94176 9.14863C9.19114 10.1508 9.71191 11.0003 10.0079 11.6895C10.0198 11.716 10.0314 11.7421 10.0425 11.7678C10.182 12.0905 10.081 12.4531 9.83242 12.7017L9.23936 13.2948C8.97859 13.5555 8.59785 13.6432 8.26598 13.4824C7.89905 13.3046 7.42919 13.0566 6.96466 12.8125C6.49714 12.5877 6.00197 12.3619 5.38595 12.2712C4.79297 12.1657 3.92655 12.3112 3.35508 12.9072L2.04566 14.2166C1.65513 14.6072 1.65513 15.2403 2.04566 15.6309L2.42369 16.0089C2.81421 16.3994 3.44738 16.3994 3.8379 16.0089L5.03463 14.8122C5.05193 14.7949 5.07673 14.7874 5.10072 14.7922C5.45405 14.8485 6.27644 15.3196 7.10701 15.7436C7.53766 15.951 7.98624 16.1568 8.54951 16.2439C9.07746 16.3447 9.88755 16.23 10.4319 15.6857L12.1867 13.9309C12.5483 13.5796 12.7418 13.0829 12.7772 12.6676C12.8284 11.2461 12.1222 10.3668 11.7546 9.46356C11.5533 9.04008 11.4145 8.66063 11.3905 8.4809C11.3882 8.46707 11.3928 8.45301 11.4027 8.4431L12.3564 7.48937C12.627 7.21881 13.0656 7.21881 13.3362 7.48937C13.7133 7.86652 14.3573 7.69391 14.4953 7.17869L15.3714 3.90686ZM5.51167 11.5587C5.51156 11.5588 5.51162 11.559 5.51177 11.559C6.19266 11.6563 6.75736 11.9087 7.27702 12.1591C7.43696 12.2429 7.63278 12.213 7.76045 12.0853L8.36647 11.4793C8.66639 11.1794 8.73871 10.7253 8.57731 10.3331C8.44758 10.0178 8.32835 9.67976 8.23971 9.32223C8.13307 8.92505 7.57522 8.68606 7.28443 8.97685L5.05638 11.2049C4.94508 11.3162 5.03512 11.5154 5.19233 11.5231C5.30524 11.5287 5.41241 11.5406 5.51157 11.5584C5.51172 11.5584 5.51177 11.5586 5.51167 11.5587Z\"\n [attr.fill]=\"activePage === 4 ? '#FE558A' : '#626069'\" />\n </svg>\n <span class=\"bottom-nav-icon-box\"></span>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 4\"\n [class.bottom-nav-label-muted]=\"activePage !== 4\">Quests</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-settings\" [class.bottom-nav-item-active]=\"activePage === 5\"\n type=\"button\" (click)=\"setPage(5)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n [attr.fill]=\"activePage === 5 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 5\"\n [class.bottom-nav-label-muted]=\"activePage !== 5\">Settings</span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <ng-template #prefMatchManagerTemplate>\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value)\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value)\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-matcher-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden}.design-root.header-hidden,.design-root.footer-hidden{background:transparent;pointer-events:none}.design-root.header-hidden .content-scroll,.design-root.footer-hidden .content-scroll{pointer-events:auto}.design-root.footer-hidden .content-scroll{bottom:var(--lib-matcher-viewport-footer-space, 60px);padding-bottom:0}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:100.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-matcher-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-matcher-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.bottom-nav-item-insights{gap:2px}.bottom-nav-icon{position:relative;display:flex;align-items:center;justify-content:center}.bottom-nav-icon-main{display:block;height:17px;width:auto}.bottom-nav-icon-badge{position:absolute;right:0;bottom:5px;transform:translate(-10%,50%);display:block}.bottom-nav-icon-box{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:4px;border:2px solid #626069;box-sizing:border-box;transform:translate(-50%,-50%) scale(.93);transform-origin:center}.bottom-nav-item-active .bottom-nav-icon-box{border-color:#fe558a}.bottom-nav-item-insights .bottom-nav-icon-main{transform:translateY(15px) scale(2);transform-origin:center bottom}.bottom-nav-item-settings .bottom-nav-icon-main{transform:scale(1.1);transform-origin:center}.bottom-nav-label{font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9.5px;font-weight:600;line-height:normal;text-align:center;color:#68666c}.bottom-nav-label-active{color:#fe558a}.bottom-nav-label-muted{opacity:.7}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile,.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.request-date-btn{position:relative;width:59px;height:26px;display:flex;align-items:center;justify-content:center}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:251.296px;background:#f5436d;filter:blur(3.8px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:22px;border-radius:251.296px;border:.339px solid rgba(255,255,255,.29);background:linear-gradient(180deg,#fe558acc,#fe558aa6);box-shadow:0 4px 4px #00000040,0 1.693px 2.54px #00000040 inset;padding:0 4px;box-sizing:border-box}.request-date-label{color:#fff;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:4px}.request-date-icon{display:flex;align-items:center;justify-content:center}.top-nav-profile{position:relative;width:25px;height:25px}.top-nav-profile-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.top-nav-profile-image{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.2)}.top-nav-profile-caret{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#28252d;display:flex;align-items:center;justify-content:center}.top-nav-notification{position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:#fe3c72;border:1px solid #28252d}.chat-heads-separator{margin:10px auto;width:100%;display:flex;justify-content:center;opacity:.1}.user-chat-heads{margin-bottom:10px}.tab-switcher{margin-top:10px}.tab-strip{display:flex;gap:12px;padding:4px 10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.toolbelt-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s ease;opacity:.6}.toolbelt-tab:hover{opacity:.8}.toolbelt-tab.active{opacity:1}.toolbelt-tab-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#322f36,#29252d);border:1px solid rgba(255,255,255,.1);box-shadow:-3.6px -3.6px 5.8px #cbc7d140,8px 7.3px 9.8px #111014a6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.toolbelt-tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9px;font-weight:600;color:#939296}.toolbelt-tab-label{font-family:Lato,Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:8.7px;font-weight:400;line-height:1;color:#fff}.toolbelt-tab-active .toolbelt-tab-circle{transform:scale(1.06)}.toolbelt-tab-active .toolbelt-tab-icon{color:#f7f7f7;text-shadow:0 0 4px #ff1997}.tab-content{margin:6px auto 0;padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;height:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;pointer-events:none;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;z-index:1}.tab-content-scroll lib-scheduler{display:block;width:100%;max-width:800px;margin:0 auto}.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas,.tab-content-scroll lib-profile-comparison{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none;display:block;max-width:800px;margin:0 auto}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-dashboard-swipeable-tabs{display:block;width:100%;max-width:600px;margin:0 auto}.visuals-tab-content{width:100%;height:100%}.visuals-spider-chart-container{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-bottom:20px}.visuals-spider-chart-container lib-spider-chart{height:auto;width:100%}.visuals-spider-chart-container img{margin-top:20px;z-index:1}.plans-tab-content{width:100%;height:100%;padding:8px 8px 0;box-sizing:border-box}.profile-tab-content{width:100%;height:100%}.profile-trait-visual-container{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.profile-trait-visual-container tv-trait-visual-canvas{display:block;width:100%!important;height:100%!important;min-height:300px;max-width:100%!important;max-height:100%!important;position:relative;z-index:1}.profile-trait-visual-container tv-trait-visual-canvas ::ng-deep canvas{width:100%!important;height:100%!important;min-height:300px!important;object-fit:contain!important}.profile-card-container,.profile-comparison-container{width:100%;height:100%;min-height:300px;display:block;background:transparent;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.profile-card-container::-webkit-scrollbar,.profile-comparison-container::-webkit-scrollbar{display:none}.suggested-tab-content{padding:12px 20px 0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;height:100%;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.suggested-tab-content::-webkit-scrollbar{display:none}.suggested-tab-content>*{max-width:100%;width:100%}.tab-content-placeholder lib-chat-suggestion{--max-width-container: 100%}.tab-switcher ::ng-deep .custom-bubble-status .lib-button-component button .text .btn-text .title{color:#fff!important}.suggested-timer-text{fill:#939296}.suggested-timer-num{font-family:Open Sans,sans-serif;font-weight:600}.suggested-timer-unit{font-family:Cutive Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400}.suggested-timer-text.active{filter:drop-shadow(0 0 2px #ff1997);text-shadow:0 0 2px #ff1997}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;white-space:nowrap;padding:10px 0;cursor:pointer}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.visuals-spider-content{position:relative;width:100%;height:100%}.visuals-spider-content .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.spider-tab-label-container{display:flex;align-items:center;gap:4px}.info-icon{cursor:pointer;display:flex;align-items:center;justify-content:center}.info-icon svg{display:block}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.visuals-spider-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#27242c}.toolbelt-tab-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-top:-2px}.toolbelt-tab-icon-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbelt-tab-icon-btn svg{display:block}.prospect-galaxy-stacked{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.spider-tab-switchers{display:none}.spider-tab-label-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px}.visuals-spider-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.visuals-spider-content::-webkit-scrollbar{display:none}.visuals-spider-content lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.visuals-spider-content img{max-width:100%;max-height:100%;object-fit:contain;align-self:center;margin:auto}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: LibStatusBarComponent, selector: "lib-status-bar" }, { kind: "component", type: LibClientHomeComponent, selector: "lib-client-home", inputs: ["config", "menuPosition"], outputs: ["activeIndexChange", "addMessage", "getMessages", "bookEvent", "removeSuggestion", "handleAppearPopup", "rejectRequest"] }, { kind: "component", type: i9.ProfileComparisonLibComponent, selector: "lib-profile-comparison", inputs: ["config", "backendMode", "backendUrl", "fadeAllEdges"], outputs: ["matrixDataChange", "rawLLMOutputChange", "viewProfileClick"] }, { kind: "component", type: SpiderChartComponent, selector: "lib-spider-chart", inputs: ["datasets", "config", "polygon_colors", "showChartInfo"], outputs: ["tooltipActiveChange"] }, { kind: "component", type: LibSchedulerComponent, selector: "lib-scheduler", inputs: ["adsTemplate", "loading$", "emptyMessage", "displayBookedStatuses", "displayEmptyDays", "events$", "events", "startDate", "endDate", "default", "role"], outputs: ["bookEvent", "removeSuggestion"] }, { kind: "component", type: i11.TraitVisualCanvasComponent, selector: "tv-trait-visual-canvas", inputs: ["config", "assetsBaseUrl", "verboseWebGLLog", "command"], outputs: ["nodeSelected", "rightClick", "frameRendered", "perfStats", "cameraLockChanged", "nodeDataChanged"] }, { kind: "component", type: i1.BubbleBtnComponent, selector: "lib-bubble-btn", inputs: ["title", "subTitle", "hasIcon", "enableActiveStyle", "checked", "disabled", "loading$"] }, { kind: "component", type: LibDashboardSwipeableTabsComponent, selector: "lib-dashboard-swipeable-tabs", inputs: ["thumbsSwiperOptions", "mainSwiperOptions", "activeIndex", "bottomThumbs", "slideContentMaxHeight", "mainSwiperHeight", "subMainSwiperHeight", "thumbsSwiperHeight", "generalSwiperHeight", "enableGrouping", "enableDragAndDrop", "enableTabBarScrollDrag", "items", "thumbTemplate", "contentTemplate", "groupingAdapter", "showPrefRejectButton", "menuPosition"], outputs: ["repositionModeChange", "activeIndexChange", "itemClicked", "expandedIdChange"] }, { kind: "component", type: ChatSuggestionComponent, selector: "lib-chat-suggestion", inputs: ["chatSuggestions"], outputs: ["suggestClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
11525
11525
  }
11526
11526
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MatcherViewportComponent, decorators: [{
11527
11527
  type: Component,
11528
- args: [{ selector: 'lib-matcher-viewport', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">On</span>\n <span class=\"request-date-icon\">\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M20.9778 10.526C20.9778 16.3393 16.2817 21.0519 10.4889 21.0519C4.69604 21.0519 0 16.3393 0 10.526C0 4.71263 4.69604 0 10.4889 0C16.2817 0 20.9778 4.71263 20.9778 10.526Z\"\n fill=\"white\" />\n <path\n d=\"M10.6016 3.9873C13.0366 3.9873 15.1862 5.55213 15.4844 7.72461C16.219 7.96315 16.7519 8.64584 16.752 9.4541V11.2773C16.7518 12.0896 16.213 12.7737 15.4727 13.0088C15.2238 14.4405 13.9647 15.5283 12.4473 15.5283H11.8389C11.6129 15.9788 11.1434 16.2881 10.6016 16.2881C9.84089 16.2881 9.22089 15.6785 9.2207 14.9229C9.2207 14.1671 9.84077 13.5576 10.6016 13.5576C11.1433 13.5576 11.6128 13.8661 11.8389 14.3164H12.4473C13.2546 14.3164 13.9394 13.8067 14.1924 13.0977H13.0635C12.7276 13.0977 12.4512 12.8285 12.4512 12.4922V8.23926C12.4512 7.90295 12.7275 7.63281 13.0635 7.63281H14.2188C13.8831 6.29752 12.4582 5.19922 10.6016 5.19922C8.7449 5.19922 7.32005 6.29752 6.98438 7.63281H8.13965C8.47558 7.63281 8.75195 7.90295 8.75195 8.23926V12.4922C8.75192 12.8285 8.47556 13.0977 8.13965 13.0977H6.29395C5.27841 13.0977 4.45139 12.2846 4.45117 11.2773V9.4541C4.45119 8.64616 4.98361 7.96342 5.71777 7.72461C6.01586 5.55207 8.16648 3.9873 10.6016 3.9873ZM13.6748 11.8867H14.9092C15.2529 11.8867 15.5281 11.612 15.5283 11.2773V9.4541C15.5283 9.11928 15.253 8.84473 14.9092 8.84473H13.6748V11.8867ZM6.29395 8.84473C5.95016 8.84473 5.67483 9.11928 5.6748 9.4541V11.2773C5.67503 11.612 5.95028 11.8867 6.29395 11.8867H7.52832V8.84473H6.29395Z\"\n fill=\"#FE3C72\" stroke=\"#FE3C72\" stroke-width=\"0.3\" />\n </svg>\n </span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"userProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n </div>\n }\n <div class=\"content-scroll\">\n <div class=\"chat-heads-separator\">\n <svg width=\"274\" height=\"5\" viewBox=\"0 0 274 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.3\" d=\"M0 2.5L274 2.49998\" stroke=\"url(#paint0_radial_4170_4807)\" stroke-width=\"5\" />\n <defs>\n <radialGradient id=\"paint0_radial_4170_4807\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(137 2.99999) rotate(90) scale(0.5 137)\">\n <stop stop-color=\"#F7F5DD\" />\n <stop offset=\"1\" stop-color=\"#F7F5DD\" stop-opacity=\"0\" />\n </radialGradient>\n </defs>\n </svg>\n </div>\n @if (activePage === 2) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Insights</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your matching insights here.</p>\n </div>\n } @else if (activePage === 3) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Itinerary</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your upcoming dates.</p>\n </div>\n } @else if (activePage === 4) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Quests</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Complete quests to earn rewards.</p>\n </div>\n } @else if (activePage === 5) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M10.325 4.317C10.565 3.56 11.269 3 12.102 3C12.935 3 13.639 3.56 13.879 4.317C14.135 4.382 14.383 4.475 14.622 4.595L15.69 3.528C16.279 2.939 17.236 2.939 17.825 3.528C18.414 4.117 18.414 5.074 17.825 5.663L16.758 6.73C16.877 6.97 16.971 7.218 17.036 7.474C17.793 7.714 18.353 8.418 18.353 9.251C18.353 10.084 17.793 10.788 17.036 11.028C16.971 11.284 16.877 11.532 16.758 11.772L17.825 12.839C18.414 13.428 18.414 14.385 17.825 14.974C17.236 15.563 16.279 15.563 15.69 14.974L14.622 13.907C14.383 14.027 14.135 14.12 13.879 14.185C13.639 14.942 12.935 15.502 12.102 15.502C11.269 15.502 10.565 14.942 10.325 14.185C10.069 14.12 9.821 14.027 9.582 13.907L8.514 14.974C7.925 15.563 6.968 15.563 6.379 14.974C5.79 14.385 5.79 13.428 6.379 12.839L7.446 11.772C7.327 11.532 7.233 11.284 7.168 11.028C6.411 10.788 5.851 10.084 5.851 9.251C5.851 8.418 6.411 7.714 7.168 7.474C7.233 7.218 7.327 6.97 7.446 6.73L6.379 5.663C5.79 5.074 5.79 4.117 6.379 3.528C6.968 2.939 7.925 2.939 8.514 3.528L9.582 4.595C9.821 4.475 10.069 4.382 10.325 4.317ZM12.102 11.335C13.253 11.335 14.186 10.402 14.186 9.251C14.186 8.1 13.253 7.167 12.102 7.167C10.951 7.167 10.018 8.1 10.018 9.251C10.018 10.402 10.951 11.335 12.102 11.335Z\"\n fill=\"currentColor\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Settings</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Adjust your preferences.</p>\n </div>\n } @else if (getPageConfig(activePage)?.custom?.content; as pageContent) {\n <div class=\"custom-page-content\" style=\"flex: 1; overflow: auto;\">\n <ng-container *ngTemplateOutlet=\"pageContent\"></ng-container>\n </div>\n } @else {\n @if (getPageConfig(activePage)?.custom?.swipeableTabs; as swipeableTabs) {\n <div class=\"user-chat-heads\">\n <ng-container *ngTemplateOutlet=\"swipeableTabs\"></ng-container>\n </div>\n } @else {\n @if (userHomeConfig) {\n <div class=\"user-chat-heads\">\n <lib-client-home [config]=\"userHomeConfig\" [menuPosition]=\"'down'\"\n (activeIndexChange)=\"onChatHeadChange($event)\"></lib-client-home>\n </div>\n }\n }\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip>\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <div class=\"toolbelt-tab\">\n <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"\n tab.key === 'SUGGESTED' ? (hasSuggestions ? 'Suggested' : 'Suggest') : tab.label\n \" [hasIcon]=\"true\" [checked]=\"tab.key === activeTabKey\" (click)=\"setActiveTab(tab.key)\">\n @switch (tab.key) {\n @case ('CONTEXT') {\n <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.40551 11.603C4.00666 11.603 3.66509 11.4608 3.38082 11.1766C3.09655 10.8923 2.95465 10.551 2.95514 10.1526V8.70224C2.95514 8.49677 3.02475 8.32442 3.16399 8.18518C3.30322 8.04595 3.47534 7.97657 3.68032 7.97705H5.13069V6.34538C4.70767 6.32121 4.30567 6.22742 3.92471 6.06401C3.54374 5.9006 3.19638 5.65597 2.88262 5.33012V4.53242H2.04865L0.308204 2.79197C0.102735 2.5865 0 2.37499 0 2.15743C0 1.93987 0.102735 1.74649 0.308204 1.57728C0.658711 1.27512 1.09068 1.04548 1.60411 0.888354C2.11754 0.73123 2.66458 0.652668 3.24521 0.652668C3.57154 0.652668 3.88869 0.676841 4.19665 0.725187C4.50462 0.773532 4.81596 0.864181 5.13069 0.997132V0.725187C5.13069 0.519717 5.20031 0.347606 5.33955 0.208854C5.47878 0.0701014 5.6509 0.000483458 5.85588 0H13.1077C13.3132 0 13.4856 0.069618 13.6248 0.208854C13.764 0.34809 13.8334 0.520201 13.8329 0.725187V9.42743C13.8329 10.0317 13.6214 10.5454 13.1984 10.9684C12.7754 11.3915 12.2617 11.603 11.6574 11.603H4.40551ZM6.58107 7.97705H10.207C10.4125 7.97705 10.5848 8.04667 10.7241 8.18591C10.8633 8.32514 10.9327 8.49725 10.9322 8.70224V9.42743C10.9322 9.6329 11.0018 9.80525 11.141 9.94448C11.2803 10.0837 11.4524 10.1531 11.6574 10.1526C11.8628 10.1526 12.0352 10.083 12.1744 9.94376C12.3137 9.80452 12.383 9.63241 12.3826 9.42743V1.45037H6.58107V1.88549L10.7146 6.01905C10.7992 6.10365 10.8568 6.18222 10.8872 6.25473C10.9177 6.32725 10.9327 6.4179 10.9322 6.52668C10.9322 6.73215 10.8626 6.9045 10.7233 7.04374C10.5841 7.18297 10.412 7.25235 10.207 7.25187C10.0982 7.25187 10.0076 7.23664 9.93506 7.20618C9.86254 7.17572 9.78398 7.11843 9.69937 7.03431L7.85014 5.18508L7.70511 5.33012C7.5359 5.49933 7.3575 5.65041 7.16992 5.78336C6.98234 5.91631 6.78605 6.01905 6.58107 6.09157V7.97705ZM2.66506 3.08204H4.33299V4.64119C4.47803 4.73789 4.62911 4.80436 4.78623 4.84062C4.94335 4.87688 5.10652 4.89501 5.27573 4.89501C5.55372 4.89501 5.80464 4.85271 6.02848 4.7681C6.25232 4.6835 6.47277 4.53242 6.68985 4.31486L6.83488 4.16982L5.81962 3.15456C5.46912 2.80405 5.07631 2.54105 4.64119 2.36556C4.20608 2.19006 3.74075 2.10256 3.24521 2.10304C3.00348 2.10304 2.77384 2.12117 2.55628 2.15743C2.33873 2.19369 2.12117 2.24808 1.90361 2.3206L2.66506 3.08204ZM4.40551 10.1526H9.59059C9.55433 10.0438 9.52702 9.92901 9.50865 9.80815C9.49027 9.68728 9.48133 9.56038 9.48181 9.42743H4.40551V10.1526Z\"\n [attr.fill]=\"activeTabKey === 'CONTEXT' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('GALAXY') {\n <svg width=\"17\" height=\"20\" viewBox=\"0 0 17 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n </svg>\n }\n @case ('SPIDER') {\n <svg width=\"17\" height=\"15\" viewBox=\"0 0 17 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.30245 0L16.6049 5.76773L13.3539 14.9444H3.25104L0 5.76773L8.30245 0ZM6.13278 11.4367L4.63453 13.3906H11.9698L11.0753 12.2245L6.13278 11.4367ZM2.04264 6.69219L4.1665 12.6875L5.50796 10.9387L4.2299 7.27331L2.04264 6.69219ZM14.244 7.58485L11.8228 11.8849L12.437 12.6867L14.244 7.58485ZM12.6085 7.21116L8.97736 8.17527L10.7576 10.4974L12.6085 7.21116ZM8.30245 8.60885L7.21018 10.0329L9.69886 10.4299L8.30245 8.60885ZM6.11652 7.77441L6.6853 9.40355L7.62699 8.17527L6.11652 7.77441ZM8.70844 5.41961L8.70871 7.44116L12.0381 6.55699L8.70844 5.41961ZM7.89591 5.82751L6.43179 7.0519L7.89591 7.44112V5.82751ZM7.89591 2.20251L2.44077 5.99221L4.55976 6.55469L7.89591 3.76327V2.20251ZM8.70844 2.20251V3.7695L13.1455 5.28445L8.70844 2.20251Z\"\n [attr.fill]=\"activeTabKey === 'SPIDER' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('PLANS') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.34766 0.181641C5.4477 0.181641 5.5293 0.262261 5.5293 0.362305V1.28906H9.59863V0.362305C9.59863 0.262366 9.6794 0.18181 9.7793 0.181641H10.8877C10.9877 0.181731 11.0684 0.262317 11.0684 0.362305V1.28906H11.4414C11.7833 1.28906 12.1108 1.42528 12.3525 1.66699C12.5943 1.90873 12.7305 2.23625 12.7305 2.57812V8.29785C12.7304 8.6397 12.5943 8.96726 12.3525 9.20898C12.1108 9.45068 11.7833 9.58691 11.4414 9.58691H3.68652C3.34464 9.58691 3.01616 9.45073 2.77441 9.20898C2.53282 8.96728 2.39748 8.6396 2.39746 8.29785V2.57812C2.39747 2.23637 2.53283 1.90871 2.77441 1.66699C3.01616 1.42525 3.34464 1.28906 3.68652 1.28906H4.05859V0.362305C4.05859 0.262261 4.14019 0.181641 4.24023 0.181641H5.34766ZM3.38477 8.59668L11.7334 8.58887L11.7695 2.98145L3.37207 2.94922L3.38477 8.59668ZM8.91992 4.23926C8.97207 4.23576 9.02359 4.25504 9.06055 4.29199L9.64746 4.87891C9.68133 4.91278 9.70008 4.95895 9.7002 5.00684C9.7002 5.05488 9.68143 5.10177 9.64746 5.13574L7.1875 7.59473C7.15353 7.62868 7.1076 7.64844 7.05957 7.64844C7.01156 7.64841 6.96559 7.62867 6.93164 7.59473L5.44727 6.11035C5.41334 6.07643 5.39361 6.03039 5.39355 5.98242C5.39355 5.93439 5.41331 5.88846 5.44727 5.85449L5.76465 5.53613L5.82422 5.49707C5.84629 5.48807 5.87022 5.48315 5.89453 5.4834C5.94317 5.48392 5.98975 5.50398 6.02344 5.53906L7.04395 6.60156L8.78809 4.31055L8.81445 4.28223C8.8438 4.25719 8.88076 4.2419 8.91992 4.23926ZM9.40723 11.6211C9.40723 11.7211 9.32563 11.8027 9.22559 11.8027H1.4707C1.12882 11.8027 0.80034 11.6666 0.558594 11.4248C0.316998 11.1831 0.181657 10.8554 0.181641 10.5137V3.86621C0.181641 3.81819 0.200438 3.77225 0.234375 3.73828C0.268346 3.70431 0.314262 3.68457 0.362305 3.68457H0.882812C0.982401 3.68457 1.06381 3.76565 1.06445 3.86523L1.1084 10.873L9.22559 10.8926C9.32542 10.8928 9.40714 10.9734 9.40723 11.0732V11.6211Z\"\n [attr.fill]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" stroke-width=\"0.362289\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('SUGGESTED') {\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"5.3\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.hours }}</tspan><tspan class=\"suggested-timer-unit\">h</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"9.2\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.minutes }}</tspan><tspan class=\"suggested-timer-unit\">m</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"13.1\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.seconds }}</tspan><tspan class=\"suggested-timer-unit\">s</tspan>\n </text>\n </svg>\n }\n @case ('PROFILE') {\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.88281 0C9.29266 0 11.251 1.9089 11.251 4.27539C11.2508 5.6683 10.5724 6.92903 9.53809 7.73047C9.80086 7.83716 10.0574 7.96302 10.3076 8.10352C9.5682 8.1673 8.88987 8.44387 8.33398 8.87207C7.85197 8.72388 7.34477 8.63898 6.82129 8.62793C4.54458 8.68351 2.57249 10.1185 1.68652 12.2139C1.53591 12.5956 1.5358 12.9017 1.76172 13.207C1.91239 13.5123 2.28955 13.7412 2.66602 13.7412H7.3584C7.73672 14.401 8.30825 14.9353 8.99609 15.2676H2.59082C1.68713 15.2676 0.933404 14.8093 0.40625 14.0459C-0.0453186 13.3589 -0.120497 12.4429 0.180664 11.6797C0.933743 9.84762 2.43985 8.39701 4.17188 7.70996C3.19307 6.94661 2.5909 5.72546 2.59082 4.35156C2.59082 1.98518 4.54841 0.000180704 6.88281 0ZM6.88281 1.52637C5.37679 1.52655 4.09668 2.8249 4.09668 4.35156C4.09683 5.87813 5.37688 7.1756 6.88281 7.17578C8.38888 7.17578 9.66977 5.87824 9.66992 4.35156C9.66992 2.82479 8.38897 1.52637 6.88281 1.52637Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" />\n <path\n d=\"M10.6743 8.87866C11.1021 8.87869 11.5104 8.96731 11.8979 9.14429C12.1832 9.27439 12.442 9.44223 12.6733 9.64819V9.30151C12.6734 9.21698 12.7034 9.13966 12.7642 9.07886C12.8252 9.01782 12.9029 8.98769 12.9878 8.98804L13.0493 8.9939C13.0894 9.0014 13.1274 9.01613 13.1616 9.03882L13.2104 9.07886L13.2505 9.12769C13.2843 9.179 13.3012 9.23839 13.3013 9.30151V10.3152C13.3012 10.4306 13.2599 10.5343 13.1782 10.616L13.1772 10.615C13.0956 10.6967 12.993 10.738 12.8774 10.738H11.8647C11.7801 10.738 11.7028 10.7079 11.6421 10.6472C11.5812 10.5863 11.5503 10.5083 11.5503 10.4236C11.5504 10.339 11.581 10.2616 11.6421 10.2009C11.7029 10.1405 11.7804 10.1111 11.8647 10.1111H12.2339C12.0566 9.95706 11.8639 9.82769 11.6528 9.72632C11.3481 9.57979 11.0226 9.50662 10.6743 9.50659C10.0157 9.50659 9.46168 9.73387 9.00439 10.1912C8.54708 10.6487 8.31918 11.2029 8.31885 11.8611C8.31885 12.5196 8.54585 13.0744 9.00342 13.532C9.46096 13.9895 10.0152 14.2167 10.6733 14.2166C11.2285 14.2166 11.7177 14.0439 12.145 13.696C12.5733 13.3474 12.8474 12.9069 12.9692 12.3708L12.9712 12.3621C12.9884 12.3045 13.0158 12.2512 13.0562 12.2078L13.1011 12.1677C13.1701 12.115 13.2516 12.097 13.3354 12.1091H13.3345C13.4274 12.1216 13.5057 12.1704 13.5532 12.2546C13.5954 12.3297 13.6029 12.4116 13.5825 12.4929L13.5835 12.4939C13.4418 13.1797 13.0993 13.7448 12.5591 14.1843C12.0183 14.624 11.3879 14.8434 10.6743 14.8435V14.8445H10.6733C10.2609 14.8444 9.87284 14.7662 9.51025 14.6101C9.14996 14.455 8.83342 14.2428 8.56299 13.9724C8.29238 13.7018 8.07943 13.3854 7.92432 13.0251C7.76819 12.6627 7.69095 12.2744 7.69092 11.8621C7.69092 11.4499 7.76822 11.0612 7.92432 10.698C8.07941 10.3378 8.29242 10.0213 8.56299 9.75073C8.83342 9.4803 9.14996 9.26718 9.51025 9.11206C9.87298 8.95595 10.2617 8.87866 10.6743 8.87866ZM10.6743 9.94604C10.7585 9.9461 10.8354 9.97633 10.896 10.0369C10.9568 10.0976 10.9877 10.1753 10.9878 10.2595V11.7312L12.0161 12.7595C12.0739 12.8175 12.1049 12.8906 12.1089 12.9714L12.105 13.0378C12.0975 13.0797 12.0807 13.1183 12.0571 13.1531L12.0161 13.2029C11.9571 13.2619 11.8815 13.2995 11.7935 13.2996C11.7274 13.2996 11.6687 13.2785 11.6187 13.2429L11.5718 13.2029L10.4858 12.1179V12.1169C10.4443 12.0755 10.4104 12.028 10.3892 11.9734C10.3698 11.9237 10.3599 11.8714 10.3599 11.8181V10.2595C10.36 10.175 10.3905 10.0976 10.4517 10.0369C10.5124 9.97663 10.5893 9.94647 10.6733 9.94604H10.6743Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" stroke-width=\"0.271717\" />\n </svg>\n }\n @default {\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7.5\" cy=\"7.5\" r=\"5.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" fill=\"none\" />\n <path d=\"M7.5 4.5V10.5M4.5 7.5H10.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" stroke-linecap=\"round\" />\n </svg>\n }\n }\n </lib-bubble-btn>\n @if ((tab.key === 'SPIDER' || tab.key === 'GALAXY') && activeTabKey === tab.key) {\n <div class=\"toolbelt-tab-controls\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\">\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onInfoIconClick($event, tab.key === 'SPIDER' ? 0 : 1); $event.stopPropagation()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"><path d=\"M3.14963 2.06979C3.34844 2.06979 3.50959 1.90863 3.50959 1.70983C3.50959 1.51103 3.34844 1.34987 3.14963 1.34987C2.95083 1.34987 2.78967 1.51103 2.78967 1.70983C2.78967 1.90863 2.95083 2.06979 3.14963 2.06979Z\" fill=\"#5E5965\"/><path d=\"M3.14961 2.69972C3.29871 2.69972 3.41958 2.8206 3.41958 2.96969V4.7695C3.41958 4.91859 3.29871 5.03947 3.14961 5.03947C3.00051 5.03947 2.87964 4.91859 2.87964 4.7695V2.96969C2.87964 2.8206 3.00051 2.69972 3.14961 2.69972Z\" fill=\"#5E5965\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\" fill=\"#5E5965\"/></svg>\n </div>\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onTabSettingsClick(tab.key === 'SPIDER' ? ClientViewportTab.SpiderChart : ClientViewportTab.PrefMatchVisual, $event); $event.stopPropagation()\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0Z\" fill=\"#5E5965\"/></svg>\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\" (touchstart)=\"swipe($event, 'start')\" (touchend)=\"swipe($event, 'end')\">\n @switch (activeTabKey) {\n @case ('CONTEXT') {\n @if (getTabConfig('CONTEXT')?.library; as library) {\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n } @else {\n <div></div>\n }\n }\n @case ('GALAXY') {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\" style=\"position: absolute; z-index: 999; top: 20px; right: 10px; transform: scale(0.75); transform-origin: top right;\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n <div class=\"profile-tab-content\" style=\"height: 100%; width: 100%;\">\n <div class=\"profile-trait-visual-container\" style=\"height: 100%; width: 100%;\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n </div>\n </div>\n </div>\n }\n @case ('SPIDER') {\n @if (getTabConfig('SPIDER')?.library; as library) {\n <div class=\"visuals-tab-content\">\n <div class=\"visuals-spider-chart-container\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n </div>\n } @else {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\" [showChartInfo]=\"true\"></lib-spider-chart>\n <div class=\"prospect-galaxy-stacked\">\n <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n </div>\n </div>\n </div>\n }\n }\n @case ('PLANS') {\n @if (getTabConfig('PLANS')?.library; as library) {\n <div class=\"plans-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"plans-tab-content swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"matcher\"></lib-scheduler>\n </div>\n }\n }\n @case ('SUGGESTED') {\n @if (getTabConfig('SUGGESTED')?.library; as library) {\n <div class=\"suggested-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"suggested-tab-content\">\n <lib-chat-suggestion\n [chatSuggestions]=\"clientMatches[activeIndex]?.prospectData?.chatSuggestions ?? []\"\n (suggestClicked)=\"onSuggestionClicked($event)\"></lib-chat-suggestion>\n </div>\n }\n }\n @case ('PROFILE') {\n <div class=\"profile-tab-content\">\n <lib-dashboard-swipeable-tabs [activeIndex]=\"0\" [bottomThumbs]=\"false\"\n [generalSwiperHeight]=\"'100%'\" [mainSwiperHeight]=\"'100%'\" [thumbsSwiperHeight]=\"'0px'\"\n [subMainSwiperHeight]=\"'100%'\" [menuPosition]=\"'down'\">\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"profile-comparison-container\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[activeIndex]?.primary?.src || '',\n user2Image: clientMatches[activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n </swiper-slide>\n\n <swiper-slide>\n <div class=\"profile-card-container\" style=\"height: 100%; width: 100%;\">\n <!-- Blank screen -->\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n </div>\n }\n @default {\n <div></div>\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"prefMatchManagerTemplate\"></ng-container>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 1\" type=\"button\"\n (click)=\"setPage(1)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.3438 0.111328C18.8882 -0.433809 20.4334 1.11071 19.8887 2.65527L17.1992 10.543C16.7458 10.3503 16.2463 10.2441 15.7227 10.2441C13.637 10.2444 11.9463 11.9358 11.9463 14.0215C11.9464 15.777 13.1446 17.2516 14.7676 17.6748L14.4365 18.6475C13.8005 20.4647 11.2562 20.4648 10.7109 18.5566L9.25684 13.1963C8.98429 12.0151 7.98496 11.1056 6.80371 10.7422L1.44238 9.28906C-0.465423 8.74368 -0.465315 6.1997 1.35156 5.56348L17.3438 0.111328Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\" />\n </svg>\n <svg class=\"bottom-nav-icon-badge\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.84766 -0.135742C3.27545 -0.135712 3.68372 -0.0470902 4.07129 0.129883C4.35655 0.259981 4.61539 0.427828 4.84668 0.633789V0.287109C4.84679 0.202579 4.87672 0.125256 4.9375 0.0644531C4.99854 0.00341623 5.07628 -0.0267184 5.16113 -0.0263672L5.22266 -0.0205078C5.26279 -0.0130088 5.30071 0.00172397 5.33496 0.0244141L5.38379 0.0644531L5.42383 0.113281C5.45765 0.164592 5.47453 0.223981 5.47461 0.287109V1.30078C5.47452 1.41622 5.43326 1.51987 5.35156 1.60156L5.35059 1.60059C5.26893 1.68232 5.1663 1.72363 5.05078 1.72363H4.03809C3.95349 1.72363 3.87619 1.69348 3.81543 1.63281C3.75451 1.57189 3.72363 1.4939 3.72363 1.40918C3.72375 1.32463 3.75431 1.24722 3.81543 1.18652C3.87628 1.1261 3.95371 1.09668 4.03809 1.09668H4.40723C4.22991 0.942658 4.03725 0.813283 3.82617 0.711914C3.52148 0.56539 3.19592 0.492218 2.84766 0.492188C2.18908 0.492188 1.63502 0.719471 1.17773 1.17676C0.720418 1.6343 0.492516 2.18855 0.492188 2.84668C0.492188 3.50518 0.71919 4.05997 1.17676 4.51758C1.6343 4.97512 2.18856 5.20229 2.84668 5.20215C3.40186 5.20215 3.89106 5.02945 4.31836 4.68164C4.74661 4.33302 5.02072 3.8925 5.14258 3.35645L5.14453 3.34766C5.16178 3.29008 5.18918 3.23683 5.22949 3.19336L5.27441 3.15332C5.34347 3.10058 5.42499 3.08263 5.50879 3.09473H5.50781C5.60076 3.10716 5.67909 3.15603 5.72656 3.24023C5.76874 3.31527 5.77629 3.39715 5.75586 3.47852L5.75684 3.47949C5.61511 4.16531 5.27268 4.73038 4.73242 5.16992C4.19159 5.60955 3.56123 5.82898 2.84766 5.8291V5.83008H2.84668C2.43422 5.82998 2.04618 5.75181 1.68359 5.5957C1.3233 5.44058 1.00676 5.22844 0.736328 4.95801C0.465716 4.68737 0.252766 4.37101 0.0976562 4.01074C-0.0584718 3.64827 -0.135715 3.26003 -0.135742 2.84766C-0.135742 2.43545 -0.05844 2.04676 0.0976562 1.68359C0.25275 1.32336 0.465756 1.00694 0.736328 0.736328C1.00676 0.465898 1.3233 0.252777 1.68359 0.0976562C2.04632 -0.0584577 2.43502 -0.135742 2.84766 -0.135742ZM2.84766 0.931641C2.93186 0.931692 3.00872 0.961922 3.06934 1.02246C3.1301 1.08322 3.16102 1.16087 3.16113 1.24512V2.7168L4.18945 3.74512C4.24721 3.80307 4.27829 3.87624 4.28223 3.95703L4.27832 4.02344C4.27088 4.06534 4.25403 4.1039 4.23047 4.13867L4.18945 4.18848C4.13046 4.24747 4.05485 4.28513 3.9668 4.28516C3.90077 4.28516 3.84201 4.26406 3.79199 4.22852L3.74512 4.18848L2.65918 3.10352V3.10254C2.61762 3.06109 2.58373 3.01355 2.5625 2.95898C2.54305 2.90895 2.53223 2.85578 2.53223 2.80078V1.24512C2.53223 1.16088 2.56309 1.08322 2.62378 1.02246C2.68464 0.961922 2.76308 0.931641 2.84766 0.931641Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\"\n [attr.stroke]=\"activePage === 1 ? '#FE558A' : '#666666'\" stroke-width=\"0.272\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 1\"\n [class.bottom-nav-label-muted]=\"activePage !== 1\">Messenger</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-insights\" [class.bottom-nav-item-active]=\"activePage === 2\"\n type=\"button\" (click)=\"setPage(2)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 59 35\"\n preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.3076 12.4885C22.3076 12.0886 22.6318 11.7644 23.0317 11.7644H27.3763C27.7762 11.7644 28.1003 12.0886 28.1003 12.4885C28.1003 12.8884 27.7762 13.2126 27.3763 13.2126H23.0317C22.6318 13.2126 22.3076 12.8884 22.3076 12.4885Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M27.9638 9.96072L27.6017 11.4089L27.2397 9.96072L25.7915 9.59868L27.2397 9.23663L27.6017 7.78845L27.9638 9.23663L29.412 9.59868L27.9638 9.96072Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M22.3076 6.69577C22.3076 6.29587 22.6318 5.97168 23.0317 5.97168H25.204H27.3763C27.7762 5.97168 28.1003 6.29587 28.1003 6.69577C28.1003 7.09567 27.7762 7.41986 27.3763 7.41986H23.0317C22.6318 7.41986 22.3076 7.09567 22.3076 6.69577Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M24.8714 8.86804H20.5268C20.1269 8.86804 19.8027 9.19223 19.8027 9.59213C19.8027 9.99204 20.1269 10.3162 20.5268 10.3162H24.8714C25.2713 10.3162 25.5955 9.99204 25.5955 9.59213C25.5955 9.19223 25.2713 8.86804 24.8714 8.86804Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M39.1452 20.7042C39.4436 20.4058 39.4436 19.922 39.1452 19.6236L34.9405 15.4189C34.5886 15.067 34.5547 14.5129 34.8123 14.087C35.6044 12.7772 36.0651 11.2358 36.0651 9.59216C36.0651 4.81317 32.155 0.903076 27.376 0.903076C25.2782 0.903076 23.292 1.62859 21.7115 3.03061C21.3403 3.35988 21.3585 3.93036 21.7133 4.27722C22.0927 4.64817 22.7061 4.61461 23.1307 4.29633C24.4608 3.29937 26.2836 2.96866 27.376 2.96866C31.0538 2.96866 33.8782 6.29157 33.8782 9.59216C33.8782 13.5747 31.3585 16.5926 27.376 16.5926C25.4551 16.5926 23.6474 16.0446 22.3034 14.7661C22.0102 14.4871 21.5486 14.4446 21.2428 14.7097C20.9484 14.9649 20.9078 15.4103 21.1788 15.6901C22.7647 17.3274 25.0107 18.2812 27.376 18.2812C29.2716 18.2812 30.8785 17.8916 32.0061 17.1439C32.4241 16.8668 32.9826 16.8204 33.3807 17.1253L38.1403 20.7705C38.4445 21.0035 38.8743 20.9752 39.1452 20.7042Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M20.5927 7.24594L19.912 8.74481L19.2459 7.24594L17.7397 6.57254L19.2459 5.89914L19.912 4.40027L20.5927 5.89914L22.0843 6.57254L20.5927 7.24594Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M21.1586 12.7088L20.956 13.519L20.7535 12.7088L19.9434 12.5063L20.7535 12.3038L20.956 11.4937L21.1586 12.3038L21.9687 12.5063L21.1586 12.7088Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 2\"\n [class.bottom-nav-label-muted]=\"activePage !== 2\">Insights</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-itinerary\"\n [class.bottom-nav-item-active]=\"activePage === 3\" type=\"button\" (click)=\"setPage(3)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n [attr.fill]=\"activePage === 3 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 3\"\n [class.bottom-nav-label-muted]=\"activePage !== 3\">Itinerary</span>\n </button>\n\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 4\" type=\"button\"\n (click)=\"setPage(4)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.3714 3.90686C15.5705 3.16335 14.8902 2.48307 14.1467 2.68225L10.8753 3.55864C10.3601 3.69666 10.1875 4.34067 10.5646 4.71782C10.8352 4.9884 10.8352 5.42709 10.5646 5.69767L9.49991 6.76239C8.761 7.49823 8.77278 8.51674 8.94176 9.14863C9.19114 10.1508 9.71191 11.0003 10.0079 11.6895C10.0198 11.716 10.0314 11.7421 10.0425 11.7678C10.182 12.0905 10.081 12.4531 9.83242 12.7017L9.23936 13.2948C8.97859 13.5555 8.59785 13.6432 8.26598 13.4824C7.89905 13.3046 7.42919 13.0566 6.96466 12.8125C6.49714 12.5877 6.00197 12.3619 5.38595 12.2712C4.79297 12.1657 3.92655 12.3112 3.35508 12.9072L2.04566 14.2166C1.65513 14.6072 1.65513 15.2403 2.04566 15.6309L2.42369 16.0089C2.81421 16.3994 3.44738 16.3994 3.8379 16.0089L5.03463 14.8122C5.05193 14.7949 5.07673 14.7874 5.10072 14.7922C5.45405 14.8485 6.27644 15.3196 7.10701 15.7436C7.53766 15.951 7.98624 16.1568 8.54951 16.2439C9.07746 16.3447 9.88755 16.23 10.4319 15.6857L12.1867 13.9309C12.5483 13.5796 12.7418 13.0829 12.7772 12.6676C12.8284 11.2461 12.1222 10.3668 11.7546 9.46356C11.5533 9.04008 11.4145 8.66063 11.3905 8.4809C11.3882 8.46707 11.3928 8.45301 11.4027 8.4431L12.3564 7.48937C12.627 7.21881 13.0656 7.21881 13.3362 7.48937C13.7133 7.86652 14.3573 7.69391 14.4953 7.17869L15.3714 3.90686ZM5.51167 11.5587C5.51156 11.5588 5.51162 11.559 5.51177 11.559C6.19266 11.6563 6.75736 11.9087 7.27702 12.1591C7.43696 12.2429 7.63278 12.213 7.76045 12.0853L8.36647 11.4793C8.66639 11.1794 8.73871 10.7253 8.57731 10.3331C8.44758 10.0178 8.32835 9.67976 8.23971 9.32223C8.13307 8.92505 7.57522 8.68606 7.28443 8.97685L5.05638 11.2049C4.94508 11.3162 5.03512 11.5154 5.19233 11.5231C5.30524 11.5287 5.41241 11.5406 5.51157 11.5584C5.51172 11.5584 5.51177 11.5586 5.51167 11.5587Z\"\n [attr.fill]=\"activePage === 4 ? '#FE558A' : '#626069'\" />\n </svg>\n <span class=\"bottom-nav-icon-box\"></span>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 4\"\n [class.bottom-nav-label-muted]=\"activePage !== 4\">Quests</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-settings\" [class.bottom-nav-item-active]=\"activePage === 5\"\n type=\"button\" (click)=\"setPage(5)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n [attr.fill]=\"activePage === 5 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 5\"\n [class.bottom-nav-label-muted]=\"activePage !== 5\">Settings</span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <ng-template #prefMatchManagerTemplate>\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value)\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value)\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-matcher-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:100.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-matcher-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-matcher-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.design-root.header-hidden .content-scroll{top:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.bottom-nav-item-insights{gap:2px}.bottom-nav-icon{position:relative;display:flex;align-items:center;justify-content:center}.bottom-nav-icon-main{display:block;height:17px;width:auto}.bottom-nav-icon-badge{position:absolute;right:0;bottom:5px;transform:translate(-10%,50%);display:block}.bottom-nav-icon-box{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:4px;border:2px solid #626069;box-sizing:border-box;transform:translate(-50%,-50%) scale(.93);transform-origin:center}.bottom-nav-item-active .bottom-nav-icon-box{border-color:#fe558a}.bottom-nav-item-insights .bottom-nav-icon-main{transform:translateY(15px) scale(2);transform-origin:center bottom}.bottom-nav-item-settings .bottom-nav-icon-main{transform:scale(1.1);transform-origin:center}.bottom-nav-label{font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9.5px;font-weight:600;line-height:normal;text-align:center;color:#68666c}.bottom-nav-label-active{color:#fe558a}.bottom-nav-label-muted{opacity:.7}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile,.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.request-date-btn{position:relative;width:59px;height:26px;display:flex;align-items:center;justify-content:center}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:251.296px;background:#f5436d;filter:blur(3.8px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:22px;border-radius:251.296px;border:.339px solid rgba(255,255,255,.29);background:linear-gradient(180deg,#fe558acc,#fe558aa6);box-shadow:0 4px 4px #00000040,0 1.693px 2.54px #00000040 inset;padding:0 4px;box-sizing:border-box}.request-date-label{color:#fff;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:4px}.request-date-icon{display:flex;align-items:center;justify-content:center}.top-nav-profile{position:relative;width:25px;height:25px}.top-nav-profile-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.top-nav-profile-image{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.2)}.top-nav-profile-caret{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#28252d;display:flex;align-items:center;justify-content:center}.top-nav-notification{position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:#fe3c72;border:1px solid #28252d}.chat-heads-separator{margin:10px auto;width:100%;display:flex;justify-content:center;opacity:.1}.user-chat-heads{margin-bottom:10px}.tab-switcher{margin-top:10px}.tab-strip{display:flex;gap:12px;padding:4px 10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.toolbelt-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s ease;opacity:.6}.toolbelt-tab:hover{opacity:.8}.toolbelt-tab.active{opacity:1}.toolbelt-tab-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#322f36,#29252d);border:1px solid rgba(255,255,255,.1);box-shadow:-3.6px -3.6px 5.8px #cbc7d140,8px 7.3px 9.8px #111014a6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.toolbelt-tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9px;font-weight:600;color:#939296}.toolbelt-tab-label{font-family:Lato,Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:8.7px;font-weight:400;line-height:1;color:#fff}.toolbelt-tab-active .toolbelt-tab-circle{transform:scale(1.06)}.toolbelt-tab-active .toolbelt-tab-icon{color:#f7f7f7;text-shadow:0 0 4px #ff1997}.tab-content{margin:6px auto 0;padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;height:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;pointer-events:none;z-index:0}.design-root.footer-hidden .tab-content-placeholder{margin-bottom:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;z-index:1}.tab-content-scroll lib-scheduler{display:block;width:100%;max-width:800px;margin:0 auto}.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas,.tab-content-scroll lib-profile-comparison{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none;display:block;max-width:800px;margin:0 auto}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-dashboard-swipeable-tabs{display:block;width:100%;max-width:600px;margin:0 auto}.visuals-tab-content{width:100%;height:100%}.visuals-spider-chart-container{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-bottom:20px}.visuals-spider-chart-container lib-spider-chart{height:auto;width:100%}.visuals-spider-chart-container img{margin-top:20px;z-index:1}.plans-tab-content{width:100%;height:100%;padding:8px 8px 0;box-sizing:border-box}.profile-tab-content{width:100%;height:100%}.profile-trait-visual-container{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.profile-trait-visual-container tv-trait-visual-canvas{display:block;width:100%!important;height:100%!important;min-height:300px;max-width:100%!important;max-height:100%!important;position:relative;z-index:1}.profile-trait-visual-container tv-trait-visual-canvas ::ng-deep canvas{width:100%!important;height:100%!important;min-height:300px!important;object-fit:contain!important}.profile-card-container,.profile-comparison-container{width:100%;height:100%;min-height:300px;display:block;background:transparent;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.profile-card-container::-webkit-scrollbar,.profile-comparison-container::-webkit-scrollbar{display:none}.suggested-tab-content{padding:12px 20px 0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;height:100%;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.suggested-tab-content::-webkit-scrollbar{display:none}.suggested-tab-content>*{max-width:100%;width:100%}.tab-content-placeholder lib-chat-suggestion{--max-width-container: 100%}.tab-switcher ::ng-deep .custom-bubble-status .lib-button-component button .text .btn-text .title{color:#fff!important}.suggested-timer-text{fill:#939296}.suggested-timer-num{font-family:Open Sans,sans-serif;font-weight:600}.suggested-timer-unit{font-family:Cutive Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400}.suggested-timer-text.active{filter:drop-shadow(0 0 2px #ff1997);text-shadow:0 0 2px #ff1997}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;white-space:nowrap;padding:10px 0;cursor:pointer}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.visuals-spider-content{position:relative;width:100%;height:100%}.visuals-spider-content .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.spider-tab-label-container{display:flex;align-items:center;gap:4px}.info-icon{cursor:pointer;display:flex;align-items:center;justify-content:center}.info-icon svg{display:block}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.visuals-spider-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#27242c}.toolbelt-tab-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-top:-2px}.toolbelt-tab-icon-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbelt-tab-icon-btn svg{display:block}.prospect-galaxy-stacked{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.spider-tab-switchers{display:none}.spider-tab-label-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px}.visuals-spider-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.visuals-spider-content::-webkit-scrollbar{display:none}.visuals-spider-content lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.visuals-spider-content img{max-width:100%;max-height:100%;object-fit:contain;align-self:center;margin:auto}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"] }]
11528
+ args: [{ selector: 'lib-matcher-viewport', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<main class=\"app-shell\">\n <div class=\"viewport-shell\">\n <div class=\"viewport\" [class.mode-mobile]=\"viewportMode === 'mobile'\"\n [class.mode-tablet]=\"viewportMode === 'tablet'\" [class.mode-desktop]=\"viewportMode === 'desktop'\">\n <div class=\"design-root\" [class.header-hidden]=\"!showViewportHeader\" [class.footer-hidden]=\"!showViewportFooter\">\n @if (showViewportHeader) {\n <lib-status-bar></lib-status-bar>\n <div class=\"top-nav\">\n <button class=\"top-nav-back\" type=\"button\" (click)=\"onBackClick()\">\n <svg width=\"77\" height=\"77\" viewBox=\"0 0 77 77\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"19.4617\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint0_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddf_4301_9009)\">\n <rect x=\"19.4617\" y=\"20.4231\" width=\"25\" height=\"24.0385\" rx=\"12.0192\"\n fill=\"url(#paint1_linear_4301_9009)\" fill-opacity=\"0.81\" shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M32.9023 29.0491L28.9023 32.3942L32.9023 35.7393\" stroke=\"white\" stroke-width=\"1.8\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_9009\" x=\"3.33786e-06\" y=\"3.33786e-06\" width=\"63.9233\" height=\"62.9619\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"1\" operator=\"dilate\" in=\"SourceAlpha\" result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dy=\"3.11387\" />\n <feGaussianBlur stdDeviation=\"1.55693\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"6.48722\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_9009\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"6.48722\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <filter id=\"filter1_ddf_4301_9009\" x=\"4.63162\" y=\"4.79142\" width=\"72.2959\" height=\"71.3344\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.00406\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_9009\" />\n <feOffset dx=\"8.81787\" dy=\"8.01625\" />\n <feGaussianBlur stdDeviation=\"10.8219\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_9009\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"1.49206\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_9009\" result=\"effect2_dropShadow_4301_9009\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_9009\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.324361\" result=\"effect3_foregroundBlur_4301_9009\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_9009\" x1=\"31.4408\" y1=\"8.44404\" x2=\"34.6954\" y2=\"46.3458\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_9009\" x1=\"31.4408\" y1=\"9.40547\" x2=\"34.6954\" y2=\"47.3072\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </button>\n\n <div class=\"top-nav-center\">\n <button class=\"request-date-btn\" type=\"button\">\n <span class=\"request-date-inner\">\n <span class=\"request-date-label\">On</span>\n <span class=\"request-date-icon\">\n <svg width=\"21\" height=\"22\" viewBox=\"0 0 21 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M20.9778 10.526C20.9778 16.3393 16.2817 21.0519 10.4889 21.0519C4.69604 21.0519 0 16.3393 0 10.526C0 4.71263 4.69604 0 10.4889 0C16.2817 0 20.9778 4.71263 20.9778 10.526Z\"\n fill=\"white\" />\n <path\n d=\"M10.6016 3.9873C13.0366 3.9873 15.1862 5.55213 15.4844 7.72461C16.219 7.96315 16.7519 8.64584 16.752 9.4541V11.2773C16.7518 12.0896 16.213 12.7737 15.4727 13.0088C15.2238 14.4405 13.9647 15.5283 12.4473 15.5283H11.8389C11.6129 15.9788 11.1434 16.2881 10.6016 16.2881C9.84089 16.2881 9.22089 15.6785 9.2207 14.9229C9.2207 14.1671 9.84077 13.5576 10.6016 13.5576C11.1433 13.5576 11.6128 13.8661 11.8389 14.3164H12.4473C13.2546 14.3164 13.9394 13.8067 14.1924 13.0977H13.0635C12.7276 13.0977 12.4512 12.8285 12.4512 12.4922V8.23926C12.4512 7.90295 12.7275 7.63281 13.0635 7.63281H14.2188C13.8831 6.29752 12.4582 5.19922 10.6016 5.19922C8.7449 5.19922 7.32005 6.29752 6.98438 7.63281H8.13965C8.47558 7.63281 8.75195 7.90295 8.75195 8.23926V12.4922C8.75192 12.8285 8.47556 13.0977 8.13965 13.0977H6.29395C5.27841 13.0977 4.45139 12.2846 4.45117 11.2773V9.4541C4.45119 8.64616 4.98361 7.96342 5.71777 7.72461C6.01586 5.55207 8.16648 3.9873 10.6016 3.9873ZM13.6748 11.8867H14.9092C15.2529 11.8867 15.5281 11.612 15.5283 11.2773V9.4541C15.5283 9.11928 15.253 8.84473 14.9092 8.84473H13.6748V11.8867ZM6.29395 8.84473C5.95016 8.84473 5.67483 9.11928 5.6748 9.4541V11.2773C5.67503 11.612 5.95028 11.8867 6.29395 11.8867H7.52832V8.84473H6.29395Z\"\n fill=\"#FE3C72\" stroke=\"#FE3C72\" stroke-width=\"0.3\" />\n </svg>\n </span>\n </span>\n </button>\n </div>\n\n <button class=\"top-nav-profile\" type=\"button\">\n <div class=\"profile-svg-main\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"47\" height=\"47\"\n viewBox=\"0 0 47 47\" fill=\"none\">\n <g filter=\"url(#filter0_dd_4301_8990)\">\n <mask id=\"path-1-inside-1_4301_8990\" fill=\"white\">\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\" />\n </mask>\n <path\n d=\"M22.9065 9.04028C30.5645 9.04032 36.7727 15.2485 36.7727 22.9065C36.7727 24.978 36.3175 26.9431 35.5032 28.7083C34.9094 28.2495 34.1651 27.9758 33.3567 27.9758C31.4162 27.976 29.8431 29.549 29.843 31.4895C29.843 32.5438 30.308 33.489 31.0432 34.1331C28.7577 35.7924 25.9469 36.7727 22.9065 36.7727C15.2485 36.7727 9.04032 30.5645 9.04028 22.9065C9.04028 15.2484 15.2484 9.04028 22.9065 9.04028Z\"\n fill=\"url(#pattern0_4301_8990)\" shape-rendering=\"crispEdges\" />\n <path\n d=\"M22.9065 9.04028L22.9065 7.61289H22.9065V9.04028ZM36.7727 22.9065L38.2001 22.9065V22.9065H36.7727ZM35.5032 28.7083L34.6304 29.8377L36.0485 30.9335L36.7993 29.3062L35.5032 28.7083ZM33.3567 27.9758V26.5484H33.3566L33.3567 27.9758ZM29.843 31.4895L28.4156 31.4894V31.4895H29.843ZM31.0432 34.1331L31.8818 35.2881L33.3287 34.2376L31.9838 33.0594L31.0432 34.1331ZM22.9065 36.7727V38.2001H22.9065L22.9065 36.7727ZM9.04028 22.9065H7.61289V22.9065L9.04028 22.9065ZM22.9065 9.04028L22.9065 10.4677C29.7762 10.4677 35.3453 16.0368 35.3453 22.9065H36.7727H38.2001C38.2001 14.4601 31.3529 7.61292 22.9065 7.61289L22.9065 9.04028ZM36.7727 22.9065L35.3453 22.9065C35.3453 24.7669 34.9369 26.5284 34.2071 28.1103L35.5032 28.7083L36.7993 29.3062C37.6982 27.3578 38.2001 25.1891 38.2001 22.9065L36.7727 22.9065ZM35.5032 28.7083L36.3759 27.5788C35.5418 26.9342 34.4928 26.5484 33.3567 26.5484V27.9758V29.4032C33.8373 29.4032 34.277 29.5647 34.6304 29.8377L35.5032 28.7083ZM33.3567 27.9758L33.3566 26.5484C30.6279 26.5487 28.4158 28.7606 28.4156 31.4894L29.843 31.4895L31.2704 31.4896C31.2705 30.3374 32.2045 29.4033 33.3568 29.4032L33.3567 27.9758ZM29.843 31.4895H28.4156C28.4156 32.9732 29.0719 34.3038 30.1026 35.2067L31.0432 34.1331L31.9838 33.0594C31.5441 32.6742 31.2704 32.1143 31.2704 31.4895H29.843ZM31.0432 34.1331L30.2046 32.978C28.1541 34.4667 25.635 35.3453 22.9065 35.3453L22.9065 36.7727L22.9065 38.2001C26.2588 38.2001 29.3612 37.1182 31.8818 35.2881L31.0432 34.1331ZM22.9065 36.7727V35.3453C16.0368 35.3453 10.4677 29.7762 10.4677 22.9065L9.04028 22.9065L7.61289 22.9065C7.61292 31.3529 14.4601 38.2001 22.9065 38.2001V36.7727ZM9.04028 22.9065H10.4677C10.4677 16.0368 16.0368 10.4677 22.9065 10.4677V9.04028V7.61289C14.4601 7.61289 7.61289 14.4601 7.61289 22.9065H9.04028Z\"\n fill=\"#28252D\" mask=\"url(#path-1-inside-1_4301_8990)\" />\n </g>\n <defs>\n <filter id=\"filter0_dd_4301_8990\" x=\"9.97782e-05\" y=\"9.97782e-05\" width=\"46.7644\" height=\"46.7644\"\n 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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"2.379\" dy=\"2.379\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\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 0.32 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8990\" />\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\"\n result=\"hardAlpha\" />\n <feOffset dx=\"-1.4274\" dy=\"-1.4274\" />\n <feGaussianBlur stdDeviation=\"3.80639\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8990\" result=\"effect2_dropShadow_4301_8990\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8990\" result=\"shape\" />\n </filter>\n <pattern id=\"pattern0_4301_8990\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n <use xlink:href=\"#image0_4301_8990\" transform=\"scale(0.00277778)\" />\n </pattern>\n <image id=\"image0_4301_8990\" width=\"360\" height=\"360\" preserveAspectRatio=\"xMidYMid slice\"\n [attr.xlink:href]=\"userProfileImageSrc\" />\n </defs>\n </svg>\n </div>\n <div class=\"profile-caret-wrapper\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g filter=\"url(#filter0_ddf_4301_8993)\">\n <rect x=\"8.08252\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.08252 17.3318)\" fill=\"url(#paint0_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <g filter=\"url(#filter1_ddddddf_4301_8993)\">\n <rect x=\"8.42505\" y=\"17.3318\" width=\"8.90665\" height=\"8.56409\" rx=\"4.28204\"\n transform=\"rotate(-90 8.42505 17.3318)\" fill=\"url(#paint1_linear_4301_8993)\" fill-opacity=\"0.81\"\n shape-rendering=\"crispEdges\" />\n </g>\n <path d=\"M11.4983 12.5434L12.69 13.9685L13.8818 12.5434\" stroke=\"white\" stroke-width=\"0.641279\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <defs>\n <filter id=\"filter0_ddf_4301_8993\" x=\"1.14899\" y=\"1.49152\" width=\"22.4313\" height=\"22.7738\"\n 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.356266\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset dy=\"1.10937\" />\n <feGaussianBlur stdDeviation=\"0.554683\" />\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 0.43 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"2.31118\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect2_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"2.31118\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0 0.258738 0 0 0 0.61 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <filter id=\"filter1_ddddddf_4301_8993\" x=\"9.50098e-05\" y=\"9.50098e-05\" width=\"25.4141\"\n height=\"25.7566\" 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\"\n result=\"hardAlpha\" />\n <feMorphology radius=\"0.713979\" operator=\"dilate\" in=\"SourceAlpha\"\n result=\"effect1_dropShadow_4301_8993\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"3.85549\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\"\n values=\"0 0 0 0 0.070249 0 0 0 0 0.0696554 0 0 0 0 0.0712385 0 0 0 0.65 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_4301_8993\" result=\"effect2_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow_4301_8993\" result=\"effect3_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect3_dropShadow_4301_8993\" result=\"effect4_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect4_dropShadow_4301_8993\" result=\"effect5_dropShadow_4301_8993\" />\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\"\n result=\"hardAlpha\" />\n <feOffset />\n <feGaussianBlur stdDeviation=\"0.531571\" />\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 0.3 0\" />\n <feBlend mode=\"normal\" in2=\"effect5_dropShadow_4301_8993\" result=\"effect6_dropShadow_4301_8993\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect6_dropShadow_4301_8993\" result=\"shape\" />\n <feGaussianBlur stdDeviation=\"0.115559\" result=\"effect7_foregroundBlur_4301_8993\" />\n </filter>\n <linearGradient id=\"paint0_linear_4301_8993\" x1=\"12.3503\" y1=\"13.4066\" x2=\"13.5098\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.456411\" stop-color=\"#69686A\" />\n <stop offset=\"0.893\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n <linearGradient id=\"paint1_linear_4301_8993\" x1=\"12.6928\" y1=\"13.4066\" x2=\"13.8523\" y2=\"26.9097\"\n gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0.0765292\" stop-color=\"#595859\" />\n <stop offset=\"0.417307\" stop-color=\"#29252D\" />\n <stop offset=\"0.953901\" stop-color=\"#29252D\" />\n </linearGradient>\n </defs>\n </svg>\n </div>\n </button>\n </div>\n }\n <div class=\"content-scroll\">\n <div class=\"chat-heads-separator\">\n <svg width=\"274\" height=\"5\" viewBox=\"0 0 274 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path opacity=\"0.3\" d=\"M0 2.5L274 2.49998\" stroke=\"url(#paint0_radial_4170_4807)\" stroke-width=\"5\" />\n <defs>\n <radialGradient id=\"paint0_radial_4170_4807\" cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\"\n gradientTransform=\"translate(137 2.99999) rotate(90) scale(0.5 137)\">\n <stop stop-color=\"#F7F5DD\" />\n <stop offset=\"1\" stop-color=\"#F7F5DD\" stop-opacity=\"0\" />\n </radialGradient>\n </defs>\n </svg>\n </div>\n @if (activePage === 2) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Insights</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">View your matching insights here.</p>\n </div>\n } @else if (activePage === 3) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Itinerary</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Manage your upcoming dates.</p>\n </div>\n } @else if (activePage === 4) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Quests</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Complete quests to earn rewards.</p>\n </div>\n } @else if (activePage === 5) {\n <div class=\"custom-page-content\"\n style=\"flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; color: #666;\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n style=\"margin-bottom: 16px; opacity: 0.5;\">\n <path\n d=\"M10.325 4.317C10.565 3.56 11.269 3 12.102 3C12.935 3 13.639 3.56 13.879 4.317C14.135 4.382 14.383 4.475 14.622 4.595L15.69 3.528C16.279 2.939 17.236 2.939 17.825 3.528C18.414 4.117 18.414 5.074 17.825 5.663L16.758 6.73C16.877 6.97 16.971 7.218 17.036 7.474C17.793 7.714 18.353 8.418 18.353 9.251C18.353 10.084 17.793 10.788 17.036 11.028C16.971 11.284 16.877 11.532 16.758 11.772L17.825 12.839C18.414 13.428 18.414 14.385 17.825 14.974C17.236 15.563 16.279 15.563 15.69 14.974L14.622 13.907C14.383 14.027 14.135 14.12 13.879 14.185C13.639 14.942 12.935 15.502 12.102 15.502C11.269 15.502 10.565 14.942 10.325 14.185C10.069 14.12 9.821 14.027 9.582 13.907L8.514 14.974C7.925 15.563 6.968 15.563 6.379 14.974C5.79 14.385 5.79 13.428 6.379 12.839L7.446 11.772C7.327 11.532 7.233 11.284 7.168 11.028C6.411 10.788 5.851 10.084 5.851 9.251C5.851 8.418 6.411 7.714 7.168 7.474C7.233 7.218 7.327 6.97 7.446 6.73L6.379 5.663C5.79 5.074 5.79 4.117 6.379 3.528C6.968 2.939 7.925 2.939 8.514 3.528L9.582 4.595C9.821 4.475 10.069 4.382 10.325 4.317ZM12.102 11.335C13.253 11.335 14.186 10.402 14.186 9.251C14.186 8.1 13.253 7.167 12.102 7.167C10.951 7.167 10.018 8.1 10.018 9.251C10.018 10.402 10.951 11.335 12.102 11.335Z\"\n fill=\"currentColor\" />\n </svg>\n <h3 style=\"margin: 0; font-size: 18px; font-weight: 600;\">Settings</h3>\n <p style=\"margin: 8px 0 0; font-size: 14px;\">Adjust your preferences.</p>\n </div>\n } @else if (getPageConfig(activePage)?.custom?.content; as pageContent) {\n <div class=\"custom-page-content\" style=\"flex: 1; overflow: auto;\">\n <ng-container *ngTemplateOutlet=\"pageContent\"></ng-container>\n </div>\n } @else {\n @if (getPageConfig(activePage)?.custom?.swipeableTabs; as swipeableTabs) {\n <div class=\"user-chat-heads\">\n <ng-container *ngTemplateOutlet=\"swipeableTabs\"></ng-container>\n </div>\n } @else {\n @if (userHomeConfig) {\n <div class=\"user-chat-heads\">\n <lib-client-home [config]=\"userHomeConfig\" [menuPosition]=\"'down'\"\n (activeIndexChange)=\"onChatHeadChange($event)\"></lib-client-home>\n </div>\n }\n }\n <section class=\"tab-switcher\">\n <div class=\"tab-strip\" #tabStrip>\n @for (tab of tabs; track tab.key) {\n @if (tab.enabled !== false) {\n <div class=\"toolbelt-tab\">\n <lib-bubble-btn class=\"custom-bubble-status\" [title]=\"\n tab.key === 'SUGGESTED' ? (hasSuggestions ? 'Suggested' : 'Suggest') : tab.label\n \" [hasIcon]=\"true\" [checked]=\"tab.key === activeTabKey\" (click)=\"setActiveTab(tab.key)\">\n @switch (tab.key) {\n @case ('CONTEXT') {\n <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.40551 11.603C4.00666 11.603 3.66509 11.4608 3.38082 11.1766C3.09655 10.8923 2.95465 10.551 2.95514 10.1526V8.70224C2.95514 8.49677 3.02475 8.32442 3.16399 8.18518C3.30322 8.04595 3.47534 7.97657 3.68032 7.97705H5.13069V6.34538C4.70767 6.32121 4.30567 6.22742 3.92471 6.06401C3.54374 5.9006 3.19638 5.65597 2.88262 5.33012V4.53242H2.04865L0.308204 2.79197C0.102735 2.5865 0 2.37499 0 2.15743C0 1.93987 0.102735 1.74649 0.308204 1.57728C0.658711 1.27512 1.09068 1.04548 1.60411 0.888354C2.11754 0.73123 2.66458 0.652668 3.24521 0.652668C3.57154 0.652668 3.88869 0.676841 4.19665 0.725187C4.50462 0.773532 4.81596 0.864181 5.13069 0.997132V0.725187C5.13069 0.519717 5.20031 0.347606 5.33955 0.208854C5.47878 0.0701014 5.6509 0.000483458 5.85588 0H13.1077C13.3132 0 13.4856 0.069618 13.6248 0.208854C13.764 0.34809 13.8334 0.520201 13.8329 0.725187V9.42743C13.8329 10.0317 13.6214 10.5454 13.1984 10.9684C12.7754 11.3915 12.2617 11.603 11.6574 11.603H4.40551ZM6.58107 7.97705H10.207C10.4125 7.97705 10.5848 8.04667 10.7241 8.18591C10.8633 8.32514 10.9327 8.49725 10.9322 8.70224V9.42743C10.9322 9.6329 11.0018 9.80525 11.141 9.94448C11.2803 10.0837 11.4524 10.1531 11.6574 10.1526C11.8628 10.1526 12.0352 10.083 12.1744 9.94376C12.3137 9.80452 12.383 9.63241 12.3826 9.42743V1.45037H6.58107V1.88549L10.7146 6.01905C10.7992 6.10365 10.8568 6.18222 10.8872 6.25473C10.9177 6.32725 10.9327 6.4179 10.9322 6.52668C10.9322 6.73215 10.8626 6.9045 10.7233 7.04374C10.5841 7.18297 10.412 7.25235 10.207 7.25187C10.0982 7.25187 10.0076 7.23664 9.93506 7.20618C9.86254 7.17572 9.78398 7.11843 9.69937 7.03431L7.85014 5.18508L7.70511 5.33012C7.5359 5.49933 7.3575 5.65041 7.16992 5.78336C6.98234 5.91631 6.78605 6.01905 6.58107 6.09157V7.97705ZM2.66506 3.08204H4.33299V4.64119C4.47803 4.73789 4.62911 4.80436 4.78623 4.84062C4.94335 4.87688 5.10652 4.89501 5.27573 4.89501C5.55372 4.89501 5.80464 4.85271 6.02848 4.7681C6.25232 4.6835 6.47277 4.53242 6.68985 4.31486L6.83488 4.16982L5.81962 3.15456C5.46912 2.80405 5.07631 2.54105 4.64119 2.36556C4.20608 2.19006 3.74075 2.10256 3.24521 2.10304C3.00348 2.10304 2.77384 2.12117 2.55628 2.15743C2.33873 2.19369 2.12117 2.24808 1.90361 2.3206L2.66506 3.08204ZM4.40551 10.1526H9.59059C9.55433 10.0438 9.52702 9.92901 9.50865 9.80815C9.49027 9.68728 9.48133 9.56038 9.48181 9.42743H4.40551V10.1526Z\"\n [attr.fill]=\"activeTabKey === 'CONTEXT' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('GALAXY') {\n <svg width=\"17\" height=\"20\" viewBox=\"0 0 17 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.14056 0.142921C9.02459 0.0728305 8.89658 0.0273556 8.76384 0.00909276C8.63109 -0.0091701 8.49622 0.000136654 8.36691 0.0364817C8.2376 0.0728267 8.11639 0.135498 8.0102 0.220918C7.90401 0.306338 7.81491 0.412833 7.74801 0.534323C7.68111 0.655813 7.6377 0.789918 7.62026 0.928983C7.60283 1.06805 7.61172 1.20935 7.64641 1.34482C7.6811 1.48028 7.74092 1.60727 7.82246 1.71851C7.904 1.82976 8.00565 1.92309 8.12162 1.99318C9.81849 3.01795 10.6866 4.80701 10.726 6.75548C8.39741 3.65273 4.38415 2.10278 0.75809 4.29605C0.523883 4.4376 0.352944 4.67083 0.282878 4.94442C0.212813 5.21801 0.24936 5.50955 0.38448 5.75491C0.519599 6.00027 0.742223 6.17935 1.00338 6.25275C1.26453 6.32615 1.54282 6.28787 1.77703 6.14631C3.47662 5.11728 5.39222 5.22545 7.02524 6.16766C3.30136 6.73555 0 9.59634 0 13.9772C0 14.2603 0.107352 14.5318 0.29844 14.732C0.489528 14.9322 0.748699 15.0447 1.01894 15.0447C1.28918 15.0447 1.54835 14.9322 1.73944 14.732C1.93053 14.5318 2.03788 14.2603 2.03788 13.9772C2.03788 11.9362 3.08263 10.2582 4.67217 9.24621C3.29185 12.904 4.00783 17.3191 7.62302 19.5052C7.73899 19.5753 7.867 19.6208 7.99974 19.639C8.13248 19.6573 8.26736 19.648 8.39667 19.6117C8.52598 19.5753 8.64719 19.5126 8.75338 19.4272C8.85957 19.3418 8.94866 19.2353 9.01557 19.1138C9.08247 18.9923 9.12588 18.8582 9.14331 18.7192C9.16075 18.5801 9.15186 18.4388 9.11717 18.3033C9.08248 18.1678 9.02265 18.0409 8.94112 17.9296C8.85958 17.8184 8.75793 17.725 8.64196 17.6549C6.9546 16.6359 6.09054 14.8482 6.04842 12.9012C8.38247 15.9812 12.3903 17.5382 16.0055 15.3521C16.2397 15.2105 16.4106 14.9773 16.4807 14.7037C16.5508 14.4301 16.5142 14.1386 16.3791 13.8932C16.244 13.6479 16.0214 13.4688 15.7602 13.3954C15.499 13.322 15.2208 13.3603 14.9866 13.5018C13.3019 14.5223 11.3945 14.4141 9.76415 13.4819C13.4867 12.914 16.7622 10.0489 16.7622 5.67094C16.7622 5.38783 16.6549 5.11632 16.4638 4.91613C16.2727 4.71594 16.0135 4.60348 15.7433 4.60348C15.473 4.60348 15.2139 4.71594 15.0228 4.91613C14.8317 5.11632 14.7243 5.38783 14.7243 5.67094C14.7243 7.72331 13.6809 9.40562 12.0887 10.4162C13.4907 6.75121 12.7653 2.33619 9.14056 0.142921ZM8.38247 11.2488C8.56459 11.2548 8.746 11.2224 8.91595 11.1536C9.08589 11.0847 9.2409 10.9808 9.37176 10.848C9.50262 10.7152 9.60666 10.5561 9.67772 10.3804C9.74878 10.2046 9.78539 10.0157 9.78539 9.82478C9.78539 9.63389 9.74878 9.44496 9.67772 9.26918C9.60666 9.09341 9.50262 8.93439 9.37176 8.80157C9.2409 8.66874 9.08589 8.56482 8.91595 8.49597C8.746 8.42712 8.56459 8.39476 8.38247 8.40079C8.03266 8.41718 7.70237 8.5743 7.46036 8.83942C7.21836 9.10454 7.0833 9.45723 7.0833 9.82407C7.0833 10.1909 7.21836 10.5436 7.46036 10.8087C7.70237 11.0738 8.03266 11.231 8.38247 11.2473\" [attr.fill]=\"activeTabKey === 'GALAXY' ? '#FE3C72' : '#939296'\"/>\n </svg>\n }\n @case ('SPIDER') {\n <svg width=\"17\" height=\"15\" viewBox=\"0 0 17 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M8.30245 0L16.6049 5.76773L13.3539 14.9444H3.25104L0 5.76773L8.30245 0ZM6.13278 11.4367L4.63453 13.3906H11.9698L11.0753 12.2245L6.13278 11.4367ZM2.04264 6.69219L4.1665 12.6875L5.50796 10.9387L4.2299 7.27331L2.04264 6.69219ZM14.244 7.58485L11.8228 11.8849L12.437 12.6867L14.244 7.58485ZM12.6085 7.21116L8.97736 8.17527L10.7576 10.4974L12.6085 7.21116ZM8.30245 8.60885L7.21018 10.0329L9.69886 10.4299L8.30245 8.60885ZM6.11652 7.77441L6.6853 9.40355L7.62699 8.17527L6.11652 7.77441ZM8.70844 5.41961L8.70871 7.44116L12.0381 6.55699L8.70844 5.41961ZM7.89591 5.82751L6.43179 7.0519L7.89591 7.44112V5.82751ZM7.89591 2.20251L2.44077 5.99221L4.55976 6.55469L7.89591 3.76327V2.20251ZM8.70844 2.20251V3.7695L13.1455 5.28445L8.70844 2.20251Z\"\n [attr.fill]=\"activeTabKey === 'SPIDER' ? '#FE3C72' : '#939296'\" />\n </svg>\n }\n @case ('PLANS') {\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.34766 0.181641C5.4477 0.181641 5.5293 0.262261 5.5293 0.362305V1.28906H9.59863V0.362305C9.59863 0.262366 9.6794 0.18181 9.7793 0.181641H10.8877C10.9877 0.181731 11.0684 0.262317 11.0684 0.362305V1.28906H11.4414C11.7833 1.28906 12.1108 1.42528 12.3525 1.66699C12.5943 1.90873 12.7305 2.23625 12.7305 2.57812V8.29785C12.7304 8.6397 12.5943 8.96726 12.3525 9.20898C12.1108 9.45068 11.7833 9.58691 11.4414 9.58691H3.68652C3.34464 9.58691 3.01616 9.45073 2.77441 9.20898C2.53282 8.96728 2.39748 8.6396 2.39746 8.29785V2.57812C2.39747 2.23637 2.53283 1.90871 2.77441 1.66699C3.01616 1.42525 3.34464 1.28906 3.68652 1.28906H4.05859V0.362305C4.05859 0.262261 4.14019 0.181641 4.24023 0.181641H5.34766ZM3.38477 8.59668L11.7334 8.58887L11.7695 2.98145L3.37207 2.94922L3.38477 8.59668ZM8.91992 4.23926C8.97207 4.23576 9.02359 4.25504 9.06055 4.29199L9.64746 4.87891C9.68133 4.91278 9.70008 4.95895 9.7002 5.00684C9.7002 5.05488 9.68143 5.10177 9.64746 5.13574L7.1875 7.59473C7.15353 7.62868 7.1076 7.64844 7.05957 7.64844C7.01156 7.64841 6.96559 7.62867 6.93164 7.59473L5.44727 6.11035C5.41334 6.07643 5.39361 6.03039 5.39355 5.98242C5.39355 5.93439 5.41331 5.88846 5.44727 5.85449L5.76465 5.53613L5.82422 5.49707C5.84629 5.48807 5.87022 5.48315 5.89453 5.4834C5.94317 5.48392 5.98975 5.50398 6.02344 5.53906L7.04395 6.60156L8.78809 4.31055L8.81445 4.28223C8.8438 4.25719 8.88076 4.2419 8.91992 4.23926ZM9.40723 11.6211C9.40723 11.7211 9.32563 11.8027 9.22559 11.8027H1.4707C1.12882 11.8027 0.80034 11.6666 0.558594 11.4248C0.316998 11.1831 0.181657 10.8554 0.181641 10.5137V3.86621C0.181641 3.81819 0.200438 3.77225 0.234375 3.73828C0.268346 3.70431 0.314262 3.68457 0.362305 3.68457H0.882812C0.982401 3.68457 1.06381 3.76565 1.06445 3.86523L1.1084 10.873L9.22559 10.8926C9.32542 10.8928 9.40714 10.9734 9.40723 11.0732V11.6211Z\"\n [attr.fill]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PLANS' ? '#FE3C72' : '#939296'\" stroke-width=\"0.362289\" stroke-linejoin=\"round\" />\n </svg>\n }\n @case ('SUGGESTED') {\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"5.3\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.hours }}</tspan><tspan class=\"suggested-timer-unit\">h</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"9.2\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.minutes }}</tspan><tspan class=\"suggested-timer-unit\">m</tspan>\n </text>\n <text\n class=\"suggested-timer-text\"\n [class.active]=\"activeTabKey === 'SUGGESTED'\"\n x=\"50%\"\n y=\"13.1\"\n text-anchor=\"middle\"\n font-size=\"4.912\"\n >\n <tspan class=\"suggested-timer-num\">{{ countdown.seconds }}</tspan><tspan class=\"suggested-timer-unit\">s</tspan>\n </text>\n </svg>\n }\n @case ('PROFILE') {\n <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.88281 0C9.29266 0 11.251 1.9089 11.251 4.27539C11.2508 5.6683 10.5724 6.92903 9.53809 7.73047C9.80086 7.83716 10.0574 7.96302 10.3076 8.10352C9.5682 8.1673 8.88987 8.44387 8.33398 8.87207C7.85197 8.72388 7.34477 8.63898 6.82129 8.62793C4.54458 8.68351 2.57249 10.1185 1.68652 12.2139C1.53591 12.5956 1.5358 12.9017 1.76172 13.207C1.91239 13.5123 2.28955 13.7412 2.66602 13.7412H7.3584C7.73672 14.401 8.30825 14.9353 8.99609 15.2676H2.59082C1.68713 15.2676 0.933404 14.8093 0.40625 14.0459C-0.0453186 13.3589 -0.120497 12.4429 0.180664 11.6797C0.933743 9.84762 2.43985 8.39701 4.17188 7.70996C3.19307 6.94661 2.5909 5.72546 2.59082 4.35156C2.59082 1.98518 4.54841 0.000180704 6.88281 0ZM6.88281 1.52637C5.37679 1.52655 4.09668 2.8249 4.09668 4.35156C4.09683 5.87813 5.37688 7.1756 6.88281 7.17578C8.38888 7.17578 9.66977 5.87824 9.66992 4.35156C9.66992 2.82479 8.38897 1.52637 6.88281 1.52637Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" />\n <path\n d=\"M10.6743 8.87866C11.1021 8.87869 11.5104 8.96731 11.8979 9.14429C12.1832 9.27439 12.442 9.44223 12.6733 9.64819V9.30151C12.6734 9.21698 12.7034 9.13966 12.7642 9.07886C12.8252 9.01782 12.9029 8.98769 12.9878 8.98804L13.0493 8.9939C13.0894 9.0014 13.1274 9.01613 13.1616 9.03882L13.2104 9.07886L13.2505 9.12769C13.2843 9.179 13.3012 9.23839 13.3013 9.30151V10.3152C13.3012 10.4306 13.2599 10.5343 13.1782 10.616L13.1772 10.615C13.0956 10.6967 12.993 10.738 12.8774 10.738H11.8647C11.7801 10.738 11.7028 10.7079 11.6421 10.6472C11.5812 10.5863 11.5503 10.5083 11.5503 10.4236C11.5504 10.339 11.581 10.2616 11.6421 10.2009C11.7029 10.1405 11.7804 10.1111 11.8647 10.1111H12.2339C12.0566 9.95706 11.8639 9.82769 11.6528 9.72632C11.3481 9.57979 11.0226 9.50662 10.6743 9.50659C10.0157 9.50659 9.46168 9.73387 9.00439 10.1912C8.54708 10.6487 8.31918 11.2029 8.31885 11.8611C8.31885 12.5196 8.54585 13.0744 9.00342 13.532C9.46096 13.9895 10.0152 14.2167 10.6733 14.2166C11.2285 14.2166 11.7177 14.0439 12.145 13.696C12.5733 13.3474 12.8474 12.9069 12.9692 12.3708L12.9712 12.3621C12.9884 12.3045 13.0158 12.2512 13.0562 12.2078L13.1011 12.1677C13.1701 12.115 13.2516 12.097 13.3354 12.1091H13.3345C13.4274 12.1216 13.5057 12.1704 13.5532 12.2546C13.5954 12.3297 13.6029 12.4116 13.5825 12.4929L13.5835 12.4939C13.4418 13.1797 13.0993 13.7448 12.5591 14.1843C12.0183 14.624 11.3879 14.8434 10.6743 14.8435V14.8445H10.6733C10.2609 14.8444 9.87284 14.7662 9.51025 14.6101C9.14996 14.455 8.83342 14.2428 8.56299 13.9724C8.29238 13.7018 8.07943 13.3854 7.92432 13.0251C7.76819 12.6627 7.69095 12.2744 7.69092 11.8621C7.69092 11.4499 7.76822 11.0612 7.92432 10.698C8.07941 10.3378 8.29242 10.0213 8.56299 9.75073C8.83342 9.4803 9.14996 9.26718 9.51025 9.11206C9.87298 8.95595 10.2617 8.87866 10.6743 8.87866ZM10.6743 9.94604C10.7585 9.9461 10.8354 9.97633 10.896 10.0369C10.9568 10.0976 10.9877 10.1753 10.9878 10.2595V11.7312L12.0161 12.7595C12.0739 12.8175 12.1049 12.8906 12.1089 12.9714L12.105 13.0378C12.0975 13.0797 12.0807 13.1183 12.0571 13.1531L12.0161 13.2029C11.9571 13.2619 11.8815 13.2995 11.7935 13.2996C11.7274 13.2996 11.6687 13.2785 11.6187 13.2429L11.5718 13.2029L10.4858 12.1179V12.1169C10.4443 12.0755 10.4104 12.028 10.3892 11.9734C10.3698 11.9237 10.3599 11.8714 10.3599 11.8181V10.2595C10.36 10.175 10.3905 10.0976 10.4517 10.0369C10.5124 9.97663 10.5893 9.94647 10.6733 9.94604H10.6743Z\"\n [attr.fill]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" [attr.stroke]=\"activeTabKey === 'PROFILE' ? '#FE3C72' : '#939296'\" stroke-width=\"0.271717\" />\n </svg>\n }\n @default {\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"7.5\" cy=\"7.5\" r=\"5.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" fill=\"none\" />\n <path d=\"M7.5 4.5V10.5M4.5 7.5H10.5\" stroke=\"#F7F7F7\" stroke-width=\"1\" stroke-linecap=\"round\" />\n </svg>\n }\n }\n </lib-bubble-btn>\n @if ((tab.key === 'SPIDER' || tab.key === 'GALAXY') && activeTabKey === tab.key) {\n <div class=\"toolbelt-tab-controls\"\n (mousedown)=\"$event.stopPropagation()\"\n (touchstart)=\"$event.stopPropagation()\">\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onInfoIconClick($event, tab.key === 'SPIDER' ? 0 : 1); $event.stopPropagation()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\"><path d=\"M3.14963 2.06979C3.34844 2.06979 3.50959 1.90863 3.50959 1.70983C3.50959 1.51103 3.34844 1.34987 3.14963 1.34987C2.95083 1.34987 2.78967 1.51103 2.78967 1.70983C2.78967 1.90863 2.95083 2.06979 3.14963 2.06979Z\" fill=\"#5E5965\"/><path d=\"M3.14961 2.69972C3.29871 2.69972 3.41958 2.8206 3.41958 2.96969V4.7695C3.41958 4.91859 3.29871 5.03947 3.14961 5.03947C3.00051 5.03947 2.87964 4.91859 2.87964 4.7695V2.96969C2.87964 2.8206 3.00051 2.69972 3.14961 2.69972Z\" fill=\"#5E5965\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3.14966C0 1.41015 1.41015 0 3.14966 0C4.88917 0 6.29932 1.41015 6.29932 3.14966C6.29932 4.88917 4.88917 6.29932 3.14966 6.29932C1.41015 6.29932 0 4.88917 0 3.14966ZM3.14966 0.539941C1.70835 0.539941 0.539941 1.70835 0.539941 3.14966C0.539941 4.59098 1.70835 5.75938 3.14966 5.75938C4.59098 5.75938 5.75938 4.59098 5.75938 3.14966C5.75938 1.70835 4.59098 0.539941 3.14966 0.539941Z\" fill=\"#5E5965\"/></svg>\n </div>\n <div class=\"toolbelt-tab-icon-btn\" (click)=\"onTabSettingsClick(tab.key === 'SPIDER' ? ClientViewportTab.SpiderChart : ClientViewportTab.PrefMatchVisual, $event); $event.stopPropagation()\">\n <svg width=\"7\" height=\"7\" viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.39521 0C3.6611 0.00294266 3.92594 0.0324389 4.18546 0.0880155C4.29877 0.112277 4.3835 0.202964 4.39636 0.313731L4.45802 0.844819C4.48591 1.08867 4.70033 1.27336 4.95597 1.27362C5.02465 1.27372 5.09265 1.25998 5.15611 1.23301L5.66352 1.019C5.76904 0.974484 5.89232 0.998752 5.97111 1.07954C6.33778 1.45555 6.61084 1.90652 6.76976 2.39851C6.80403 2.5046 6.76462 2.61988 6.67148 2.68579L6.22175 3.00409C6.09347 3.0946 6.01769 3.23832 6.01769 3.39119C6.01769 3.54403 6.09348 3.68775 6.22204 3.77847L6.67217 4.09687C6.76531 4.16275 6.80479 4.27806 6.77049 4.38418C6.61164 4.87609 6.33872 5.32702 5.97227 5.70309C5.89355 5.78386 5.77035 5.80821 5.66482 5.76379L5.15539 5.54949C5.00965 5.48824 4.84226 5.49721 4.70453 5.57367C4.5668 5.65008 4.47512 5.78487 4.45762 5.9367L4.39636 6.46773C4.38376 6.57723 4.30084 6.66732 4.18923 6.69282C3.66451 6.81268 3.11783 6.81268 2.59314 6.69282C2.48152 6.66732 2.39861 6.57723 2.38598 6.46773L2.32483 5.9375C2.30687 5.78595 2.21506 5.65158 2.07743 5.57541C1.93981 5.49923 1.7727 5.49029 1.62743 5.5512L1.11788 5.76553C1.01234 5.80995 0.889106 5.7856 0.810407 5.70476C0.44375 5.32827 0.170819 4.87678 0.0121529 4.38436C-0.0220183 4.2783 0.0174671 4.16307 0.110559 4.09722L0.560957 3.77861C0.689245 3.6881 0.765013 3.54438 0.765013 3.39154C0.765013 3.23867 0.689245 3.09494 0.56079 3.00433L0.110675 2.68626C0.0174418 2.62038 -0.0220799 2.50501 0.0122145 2.39885C0.171152 1.90687 0.444229 1.4559 0.810893 1.07989C0.889671 0.9991 1.01296 0.974832 1.11849 1.01934L1.62577 1.23332C1.77174 1.29483 1.93955 1.28554 2.07792 1.20791C2.21569 1.13118 2.30741 0.996268 2.32512 0.844412L2.38673 0.313731C2.3996 0.202908 2.4844 0.11219 2.59776 0.0879807C2.85759 0.0324945 3.12272 0.00300875 3.39521 0Z\" fill=\"#5E5965\"/></svg>\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n </section>\n <section class=\"tab-content\">\n <div class=\"tab-content-inner\">\n <div class=\"tab-content-placeholder\">\n <div class=\"tab-content-scroll\" (touchstart)=\"swipe($event, 'start')\" (touchend)=\"swipe($event, 'end')\">\n @switch (activeTabKey) {\n @case ('CONTEXT') {\n @if (getTabConfig('CONTEXT')?.library; as library) {\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n } @else {\n <div></div>\n }\n }\n @case ('GALAXY') {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n @if (alertStatus.compatibilityProfileTrait) {\n <div class=\"alert-popup-trait-chart\" style=\"position: absolute; z-index: 999; top: 20px; right: 10px; transform: scale(0.75); transform-origin: top right;\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.compatibilityProfileTrait]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.FORCE_GRAPH_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.compatibilityProfileTrait,\n })\n \"></lib-alert-popup>\n </div>\n }\n <div class=\"profile-tab-content\" style=\"height: 100%; width: 100%;\">\n <div class=\"profile-trait-visual-container\" style=\"height: 100%; width: 100%;\">\n @if (traitVisualVisible) {\n <tv-trait-visual-canvas [config]=\"traitVisualConfig\"></tv-trait-visual-canvas>\n }\n </div>\n </div>\n </div>\n </div>\n }\n @case ('SPIDER') {\n @if (getTabConfig('SPIDER')?.library; as library) {\n <div class=\"visuals-tab-content\">\n <div class=\"visuals-spider-chart-container\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n </div>\n } @else {\n <div class=\"visuals-tab-content visuals-spider-container\">\n <div class=\"visuals-spider-content\">\n <lib-spider-chart [datasets]=\"spiderDatasets\" [config]=\"spiderConfig\"\n [polygon_colors]=\"spiderPolygonColors\" [showChartInfo]=\"true\"></lib-spider-chart>\n <div class=\"prospect-galaxy-stacked\">\n <img width=\"280px\" height=\"250px\" src=\"assets/trait-visual/force-directed-graph.png\" />\n </div>\n </div>\n </div>\n }\n }\n @case ('PLANS') {\n @if (getTabConfig('PLANS')?.library; as library) {\n <div class=\"plans-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"plans-tab-content swipeable-scheduler-container\" \n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n [style.transition]=\"transition\"\n [class.is-swiping]=\"isSwiping\"\n (mousedown)=\"onSwipeStart($event)\"\n (mousemove)=\"onSwipeMove($event)\"\n (mouseup)=\"onSwipeEnd()\"\n (mouseleave)=\"onSwipeEnd()\"\n (touchstart)=\"onSwipeStart($event)\"\n (touchmove)=\"onSwipeMove($event)\"\n (touchend)=\"onSwipeEnd()\"\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative; cursor: grab; user-select: none;\">\n <lib-scheduler [events$]=\"schedulerEvents$\" role=\"matcher\"></lib-scheduler>\n </div>\n }\n }\n @case ('SUGGESTED') {\n @if (getTabConfig('SUGGESTED')?.library; as library) {\n <div class=\"suggested-tab-content\">\n <ng-container *ngTemplateOutlet=\"library\"></ng-container>\n </div>\n } @else {\n <div class=\"suggested-tab-content\">\n <lib-chat-suggestion\n [chatSuggestions]=\"clientMatches[activeIndex]?.prospectData?.chatSuggestions ?? []\"\n (suggestClicked)=\"onSuggestionClicked($event)\"></lib-chat-suggestion>\n </div>\n }\n }\n @case ('PROFILE') {\n <div class=\"profile-tab-content\">\n <lib-dashboard-swipeable-tabs [activeIndex]=\"0\" [bottomThumbs]=\"false\"\n [generalSwiperHeight]=\"'100%'\" [mainSwiperHeight]=\"'100%'\" [thumbsSwiperHeight]=\"'0px'\"\n [subMainSwiperHeight]=\"'100%'\" [menuPosition]=\"'down'\">\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"profile-comparison-container\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: getClientAttributes(clientMatches[activeIndex]),\n person2Interests: getProspectAttributes(clientMatches[activeIndex]),\n person3Interests: [],\n user1Image: clientMatches[activeIndex]?.primary?.src || '',\n user2Image: clientMatches[activeIndex]?.secondary?.src || ''\n }\"\n [backendMode]=\"BackendMode.Real\"></lib-profile-comparison>\n }\n </div>\n </swiper-slide>\n\n <swiper-slide>\n <div class=\"profile-card-container\" style=\"height: 100%; width: 100%;\">\n <!-- Blank screen -->\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n </div>\n }\n @default {\n <div></div>\n }\n }\n </div>\n </div>\n </div>\n </section>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"prefMatchManagerTemplate\"></ng-container>\n @if (showViewportFooter) {\n <div class=\"bottom-nav\">\n <div class=\"bottom-nav-inner\">\n <div class=\"bottom-nav-handle\"></div>\n <div class=\"bottom-nav-icons\">\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 1\" type=\"button\"\n (click)=\"setPage(1)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.3438 0.111328C18.8882 -0.433809 20.4334 1.11071 19.8887 2.65527L17.1992 10.543C16.7458 10.3503 16.2463 10.2441 15.7227 10.2441C13.637 10.2444 11.9463 11.9358 11.9463 14.0215C11.9464 15.777 13.1446 17.2516 14.7676 17.6748L14.4365 18.6475C13.8005 20.4647 11.2562 20.4648 10.7109 18.5566L9.25684 13.1963C8.98429 12.0151 7.98496 11.1056 6.80371 10.7422L1.44238 9.28906C-0.465423 8.74368 -0.465315 6.1997 1.35156 5.56348L17.3438 0.111328Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\" />\n </svg>\n <svg class=\"bottom-nav-icon-badge\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.84766 -0.135742C3.27545 -0.135712 3.68372 -0.0470902 4.07129 0.129883C4.35655 0.259981 4.61539 0.427828 4.84668 0.633789V0.287109C4.84679 0.202579 4.87672 0.125256 4.9375 0.0644531C4.99854 0.00341623 5.07628 -0.0267184 5.16113 -0.0263672L5.22266 -0.0205078C5.26279 -0.0130088 5.30071 0.00172397 5.33496 0.0244141L5.38379 0.0644531L5.42383 0.113281C5.45765 0.164592 5.47453 0.223981 5.47461 0.287109V1.30078C5.47452 1.41622 5.43326 1.51987 5.35156 1.60156L5.35059 1.60059C5.26893 1.68232 5.1663 1.72363 5.05078 1.72363H4.03809C3.95349 1.72363 3.87619 1.69348 3.81543 1.63281C3.75451 1.57189 3.72363 1.4939 3.72363 1.40918C3.72375 1.32463 3.75431 1.24722 3.81543 1.18652C3.87628 1.1261 3.95371 1.09668 4.03809 1.09668H4.40723C4.22991 0.942658 4.03725 0.813283 3.82617 0.711914C3.52148 0.56539 3.19592 0.492218 2.84766 0.492188C2.18908 0.492188 1.63502 0.719471 1.17773 1.17676C0.720418 1.6343 0.492516 2.18855 0.492188 2.84668C0.492188 3.50518 0.71919 4.05997 1.17676 4.51758C1.6343 4.97512 2.18856 5.20229 2.84668 5.20215C3.40186 5.20215 3.89106 5.02945 4.31836 4.68164C4.74661 4.33302 5.02072 3.8925 5.14258 3.35645L5.14453 3.34766C5.16178 3.29008 5.18918 3.23683 5.22949 3.19336L5.27441 3.15332C5.34347 3.10058 5.42499 3.08263 5.50879 3.09473H5.50781C5.60076 3.10716 5.67909 3.15603 5.72656 3.24023C5.76874 3.31527 5.77629 3.39715 5.75586 3.47852L5.75684 3.47949C5.61511 4.16531 5.27268 4.73038 4.73242 5.16992C4.19159 5.60955 3.56123 5.82898 2.84766 5.8291V5.83008H2.84668C2.43422 5.82998 2.04618 5.75181 1.68359 5.5957C1.3233 5.44058 1.00676 5.22844 0.736328 4.95801C0.465716 4.68737 0.252766 4.37101 0.0976562 4.01074C-0.0584718 3.64827 -0.135715 3.26003 -0.135742 2.84766C-0.135742 2.43545 -0.05844 2.04676 0.0976562 1.68359C0.25275 1.32336 0.465756 1.00694 0.736328 0.736328C1.00676 0.465898 1.3233 0.252777 1.68359 0.0976562C2.04632 -0.0584577 2.43502 -0.135742 2.84766 -0.135742ZM2.84766 0.931641C2.93186 0.931692 3.00872 0.961922 3.06934 1.02246C3.1301 1.08322 3.16102 1.16087 3.16113 1.24512V2.7168L4.18945 3.74512C4.24721 3.80307 4.27829 3.87624 4.28223 3.95703L4.27832 4.02344C4.27088 4.06534 4.25403 4.1039 4.23047 4.13867L4.18945 4.18848C4.13046 4.24747 4.05485 4.28513 3.9668 4.28516C3.90077 4.28516 3.84201 4.26406 3.79199 4.22852L3.74512 4.18848L2.65918 3.10352V3.10254C2.61762 3.06109 2.58373 3.01355 2.5625 2.95898C2.54305 2.90895 2.53223 2.85578 2.53223 2.80078V1.24512C2.53223 1.16088 2.56309 1.08322 2.62378 1.02246C2.68464 0.961922 2.76308 0.931641 2.84766 0.931641Z\"\n [attr.fill]=\"activePage === 1 ? '#FE558A' : '#666666'\"\n [attr.stroke]=\"activePage === 1 ? '#FE558A' : '#666666'\" stroke-width=\"0.272\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 1\"\n [class.bottom-nav-label-muted]=\"activePage !== 1\">Messenger</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-insights\" [class.bottom-nav-item-active]=\"activePage === 2\"\n type=\"button\" (click)=\"setPage(2)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 59 35\"\n preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.3076 12.4885C22.3076 12.0886 22.6318 11.7644 23.0317 11.7644H27.3763C27.7762 11.7644 28.1003 12.0886 28.1003 12.4885C28.1003 12.8884 27.7762 13.2126 27.3763 13.2126H23.0317C22.6318 13.2126 22.3076 12.8884 22.3076 12.4885Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M27.9638 9.96072L27.6017 11.4089L27.2397 9.96072L25.7915 9.59868L27.2397 9.23663L27.6017 7.78845L27.9638 9.23663L29.412 9.59868L27.9638 9.96072Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M22.3076 6.69577C22.3076 6.29587 22.6318 5.97168 23.0317 5.97168H25.204H27.3763C27.7762 5.97168 28.1003 6.29587 28.1003 6.69577C28.1003 7.09567 27.7762 7.41986 27.3763 7.41986H23.0317C22.6318 7.41986 22.3076 7.09567 22.3076 6.69577Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M24.8714 8.86804H20.5268C20.1269 8.86804 19.8027 9.19223 19.8027 9.59213C19.8027 9.99204 20.1269 10.3162 20.5268 10.3162H24.8714C25.2713 10.3162 25.5955 9.99204 25.5955 9.59213C25.5955 9.19223 25.2713 8.86804 24.8714 8.86804Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M39.1452 20.7042C39.4436 20.4058 39.4436 19.922 39.1452 19.6236L34.9405 15.4189C34.5886 15.067 34.5547 14.5129 34.8123 14.087C35.6044 12.7772 36.0651 11.2358 36.0651 9.59216C36.0651 4.81317 32.155 0.903076 27.376 0.903076C25.2782 0.903076 23.292 1.62859 21.7115 3.03061C21.3403 3.35988 21.3585 3.93036 21.7133 4.27722C22.0927 4.64817 22.7061 4.61461 23.1307 4.29633C24.4608 3.29937 26.2836 2.96866 27.376 2.96866C31.0538 2.96866 33.8782 6.29157 33.8782 9.59216C33.8782 13.5747 31.3585 16.5926 27.376 16.5926C25.4551 16.5926 23.6474 16.0446 22.3034 14.7661C22.0102 14.4871 21.5486 14.4446 21.2428 14.7097C20.9484 14.9649 20.9078 15.4103 21.1788 15.6901C22.7647 17.3274 25.0107 18.2812 27.376 18.2812C29.2716 18.2812 30.8785 17.8916 32.0061 17.1439C32.4241 16.8668 32.9826 16.8204 33.3807 17.1253L38.1403 20.7705C38.4445 21.0035 38.8743 20.9752 39.1452 20.7042Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M20.5927 7.24594L19.912 8.74481L19.2459 7.24594L17.7397 6.57254L19.2459 5.89914L19.912 4.40027L20.5927 5.89914L22.0843 6.57254L20.5927 7.24594Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n <path\n d=\"M21.1586 12.7088L20.956 13.519L20.7535 12.7088L19.9434 12.5063L20.7535 12.3038L20.956 11.4937L21.1586 12.3038L21.9687 12.5063L21.1586 12.7088Z\"\n [attr.fill]=\"activePage === 2 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 2\"\n [class.bottom-nav-label-muted]=\"activePage !== 2\">Insights</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-itinerary\"\n [class.bottom-nav-item-active]=\"activePage === 3\" type=\"button\" (click)=\"setPage(3)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.7 0H5.2C4.6 0 4.2 0.4 4.2 1C4.2 1.6 4.6 2 5.2 2H15.7C17 2 18 3 18 4.3V15.8C18 17.1 17 18.1 15.7 18.1H14.7L6.8 0.6C6.7 0.2 6.3 0 5.9 0H4.3C1.9 0 0 1.9 0 4.3V15.8C0 18.1 1.9 20 4.3 20H14.1H15.7C18.1 20 20 18.1 20 15.7V4.3C20 1.9 18.1 0 15.7 0ZM4.3 2H5.3L8.7 9.5L2 12.9V4.3C2 3 3 2 4.3 2ZM4.3 18C3 18 2 17 2 15.7V15.1L9.5 11.3L12.5 18H4.3Z\"\n [attr.fill]=\"activePage === 3 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 3\"\n [class.bottom-nav-label-muted]=\"activePage !== 3\">Itinerary</span>\n </button>\n\n <button class=\"bottom-nav-item\" [class.bottom-nav-item-active]=\"activePage === 4\" type=\"button\"\n (click)=\"setPage(4)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.3714 3.90686C15.5705 3.16335 14.8902 2.48307 14.1467 2.68225L10.8753 3.55864C10.3601 3.69666 10.1875 4.34067 10.5646 4.71782C10.8352 4.9884 10.8352 5.42709 10.5646 5.69767L9.49991 6.76239C8.761 7.49823 8.77278 8.51674 8.94176 9.14863C9.19114 10.1508 9.71191 11.0003 10.0079 11.6895C10.0198 11.716 10.0314 11.7421 10.0425 11.7678C10.182 12.0905 10.081 12.4531 9.83242 12.7017L9.23936 13.2948C8.97859 13.5555 8.59785 13.6432 8.26598 13.4824C7.89905 13.3046 7.42919 13.0566 6.96466 12.8125C6.49714 12.5877 6.00197 12.3619 5.38595 12.2712C4.79297 12.1657 3.92655 12.3112 3.35508 12.9072L2.04566 14.2166C1.65513 14.6072 1.65513 15.2403 2.04566 15.6309L2.42369 16.0089C2.81421 16.3994 3.44738 16.3994 3.8379 16.0089L5.03463 14.8122C5.05193 14.7949 5.07673 14.7874 5.10072 14.7922C5.45405 14.8485 6.27644 15.3196 7.10701 15.7436C7.53766 15.951 7.98624 16.1568 8.54951 16.2439C9.07746 16.3447 9.88755 16.23 10.4319 15.6857L12.1867 13.9309C12.5483 13.5796 12.7418 13.0829 12.7772 12.6676C12.8284 11.2461 12.1222 10.3668 11.7546 9.46356C11.5533 9.04008 11.4145 8.66063 11.3905 8.4809C11.3882 8.46707 11.3928 8.45301 11.4027 8.4431L12.3564 7.48937C12.627 7.21881 13.0656 7.21881 13.3362 7.48937C13.7133 7.86652 14.3573 7.69391 14.4953 7.17869L15.3714 3.90686ZM5.51167 11.5587C5.51156 11.5588 5.51162 11.559 5.51177 11.559C6.19266 11.6563 6.75736 11.9087 7.27702 12.1591C7.43696 12.2429 7.63278 12.213 7.76045 12.0853L8.36647 11.4793C8.66639 11.1794 8.73871 10.7253 8.57731 10.3331C8.44758 10.0178 8.32835 9.67976 8.23971 9.32223C8.13307 8.92505 7.57522 8.68606 7.28443 8.97685L5.05638 11.2049C4.94508 11.3162 5.03512 11.5154 5.19233 11.5231C5.30524 11.5287 5.41241 11.5406 5.51157 11.5584C5.51172 11.5584 5.51177 11.5586 5.51167 11.5587Z\"\n [attr.fill]=\"activePage === 4 ? '#FE558A' : '#626069'\" />\n </svg>\n <span class=\"bottom-nav-icon-box\"></span>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 4\"\n [class.bottom-nav-label-muted]=\"activePage !== 4\">Quests</span>\n </button>\n\n <button class=\"bottom-nav-item bottom-nav-item-settings\" [class.bottom-nav-item-active]=\"activePage === 5\"\n type=\"button\" (click)=\"setPage(5)\">\n <span class=\"bottom-nav-icon\">\n <svg class=\"bottom-nav-icon-main\" id=\"I2003:8172;6999:25874\" style=\"fill:#666;position:relative\"\n width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.0114 0C10.7954 0.00867694 11.5763 0.0956516 12.3415 0.259529C12.6757 0.331068 12.9255 0.598473 12.9634 0.925089L13.1452 2.49109C13.2275 3.21012 13.8597 3.75472 14.6135 3.75548C14.8161 3.75578 15.0165 3.71527 15.2037 3.63573L16.6999 3.00468C17.011 2.87343 17.3745 2.94499 17.6068 3.18321C18.688 4.29195 19.4932 5.62171 19.9618 7.07241C20.0629 7.38523 19.9466 7.72518 19.672 7.91951L18.3459 8.85807C17.9677 9.12494 17.7442 9.54874 17.7442 9.99951C17.7442 10.4502 17.9677 10.874 18.3468 11.1415L19.674 12.0803C19.9487 12.2746 20.0651 12.6146 19.9639 12.9275C19.4956 14.378 18.6908 15.7076 17.6103 16.8166C17.3781 17.0547 17.0149 17.1265 16.7037 16.9955L15.2016 16.3636C14.7718 16.183 14.2782 16.2095 13.8721 16.4349C13.466 16.6602 13.1956 17.0577 13.1441 17.5054L12.9634 19.0712C12.9263 19.3941 12.6818 19.6597 12.3527 19.7349C10.8054 20.0884 9.19346 20.0884 7.64631 19.7349C7.31718 19.6597 7.07272 19.3941 7.03549 19.0712L6.85515 17.5077C6.80219 17.0609 6.53149 16.6647 6.12567 16.44C5.71985 16.2154 5.22711 16.1891 4.79877 16.3687L3.29627 17.0007C2.98505 17.1316 2.62168 17.0598 2.38962 16.8215C1.30847 15.7113 0.50369 14.38 0.0358349 12.928C-0.0649248 12.6153 0.0515049 12.2755 0.326001 12.0814L1.65408 11.1419C2.03236 10.875 2.25577 10.4512 2.25577 10.0005C2.25577 9.54977 2.03236 9.12597 1.65359 8.85879L0.326343 7.92089C0.0514301 7.72663 -0.0651064 7.38646 0.0360165 7.07343C0.504672 5.62273 1.30988 4.29297 2.39106 3.18423C2.62335 2.94602 2.98689 2.87446 3.29805 3.00571L4.79388 3.63664C5.22429 3.81802 5.7191 3.79062 6.1271 3.56174C6.53334 3.33549 6.8038 2.93767 6.85601 2.48989L7.03769 0.925089C7.07563 0.598309 7.32569 0.330811 7.65996 0.259426C8.4261 0.0958155 9.20788 0.00887182 10.0114 0ZM10.0116 1.53836C9.52662 1.54384 9.04296 1.58403 8.56474 1.65849L8.44831 2.6607C8.33957 3.59353 7.77663 4.42157 6.93319 4.89132C6.0846 5.36737 5.04997 5.42466 4.14974 5.04531L3.19022 4.64059C2.5793 5.35256 2.09305 6.15525 1.75059 7.01712L2.60276 7.61929C3.39192 8.17602 3.85802 9.06023 3.85802 10.0005C3.85802 10.9407 3.39192 11.825 2.60359 12.3811L1.75007 12.9849C2.09225 13.8482 2.57857 14.6524 3.18991 15.3658L4.15674 14.9591C5.05195 14.5838 6.07955 14.6387 6.92583 15.1071C7.77212 15.5755 8.33669 16.4018 8.44735 17.336L8.56378 18.3452C9.51402 18.5004 10.4849 18.5004 11.4351 18.3452L11.5515 17.3361C11.6592 16.4022 12.2231 15.5731 13.0704 15.1029C13.9177 14.6327 14.9473 14.5775 15.8442 14.9544L16.8103 15.3608C17.4211 14.6485 17.9072 13.8457 18.2495 12.9836L17.3973 12.3806C16.6081 11.8239 16.142 10.9397 16.142 9.99951C16.142 9.0592 16.6081 8.17499 17.3963 7.61896L18.2474 7.01652C17.905 6.15449 17.4186 5.35164 16.8076 4.63956L15.85 5.04347C15.4598 5.20925 15.0377 5.29458 14.6114 5.29394C13.0415 5.29236 11.724 4.1575 11.5527 2.66034L11.4363 1.65816C10.9604 1.5838 10.4819 1.54372 10.0116 1.53836ZM9.998 6.15381C12.2103 6.15381 14.0036 7.87579 14.0036 10C14.0036 12.1241 12.2103 13.8462 9.998 13.8462C7.78581 13.8462 5.99244 12.1241 5.99244 10C5.99244 7.87579 7.78581 6.15381 9.998 6.15381ZM9.998 7.69228C8.6707 7.69228 7.59468 8.72546 7.59468 10C7.59468 11.2745 8.6707 12.3077 9.998 12.3077C11.3254 12.3077 12.4014 11.2745 12.4014 10C12.4014 8.72546 11.3254 7.69228 9.998 7.69228Z\"\n [attr.fill]=\"activePage === 5 ? '#FE558A' : '#666666'\" />\n </svg>\n </span>\n <span class=\"bottom-nav-label\" [class.bottom-nav-label-active]=\"activePage === 5\"\n [class.bottom-nav-label-muted]=\"activePage !== 5\">Settings</span>\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <ng-template #prefMatchManagerTemplate>\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\"\n [style.display]=\"(showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext === ClientViewportTab.SpiderChart)) ? 'flex' : 'none'\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"pref-match-manager-header\">\n <div class=\"pref-match-manager-header-icon\">\n <svg width=\"34\" height=\"32\" viewBox=\"0 0 34 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M27.5719 13.301C28.0729 13.3067 28.572 13.3636 29.061 13.4708C29.2745 13.5176 29.4342 13.6925 29.4584 13.9062L29.5746 14.9307C29.6271 15.4011 30.0312 15.7573 30.5129 15.7578C30.6423 15.758 30.7704 15.7315 30.89 15.6795L31.8461 15.2667C32.045 15.1808 32.2772 15.2276 32.4257 15.3834C33.1166 16.1088 33.6312 16.9787 33.9306 17.9277C33.9952 18.1324 33.9209 18.3548 33.7454 18.4819L32.898 19.0959C32.6563 19.2705 32.5135 19.5477 32.5135 19.8426C32.5135 20.1374 32.6563 20.4147 32.8985 20.5897L33.7467 21.2039C33.9222 21.3309 33.9966 21.5534 33.932 21.7581C33.6327 22.707 33.1184 23.5768 32.4279 24.3022C32.2796 24.458 32.0474 24.505 31.8486 24.4193L30.8886 24.0059C30.614 23.8878 30.2986 23.9051 30.0391 24.0526C29.7796 24.2 29.6068 24.46 29.5738 24.7529L29.4584 25.7772C29.4346 25.9884 29.2784 26.1622 29.0681 26.2114C28.0794 26.4426 27.0493 26.4426 26.0606 26.2114C25.8503 26.1622 25.694 25.9884 25.6702 25.7772L25.555 24.7544C25.5212 24.4621 25.3482 24.2029 25.0888 24.0559C24.8295 23.909 24.5146 23.8917 24.2409 24.0092L23.2807 24.4227C23.0819 24.5084 22.8497 24.4614 22.7014 24.3055C22.0105 23.5792 21.4962 22.7083 21.1972 21.7584C21.1328 21.5538 21.2072 21.3315 21.3826 21.2045L22.2313 20.5899C22.4731 20.4153 22.6158 20.1381 22.6158 19.8433C22.6158 19.5484 22.4731 19.2711 22.231 19.0964L21.3829 18.4828C21.2072 18.3557 21.1327 18.1332 21.1973 17.9284C21.4968 16.9794 22.0114 16.1094 22.7023 15.3841C22.8507 15.2283 23.083 15.1815 23.2819 15.2673L24.2378 15.6801C24.5128 15.7987 24.829 15.7808 25.0897 15.6311C25.3494 15.4831 25.5222 15.2228 25.5556 14.9299L25.6716 13.9062C25.6959 13.6924 25.8557 13.5174 26.0693 13.4707C26.5589 13.3637 27.0585 13.3068 27.5719 13.301Z\"\n fill=\"none\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <circle cx=\"27.5634\" cy=\"19.8429\" r=\"2.5\" stroke=\"#C1C1C1\" stroke-width=\"1.1\" />\n <path\n d=\"M12.2919 32C12.1118 32 11.9314 31.9545 11.7691 31.8628C11.4339 31.6736 11.2265 31.3184 11.2265 30.9333V16.3358C11.2265 16.279 11.2079 16.2236 11.1736 16.1783L0.216248 1.71129C-0.028084 1.38844 -0.0685693 0.955022 0.111128 0.592356C0.291181 0.229333 0.660876 0 1.06537 0H28.4565C28.8613 0 29.2307 0.229333 29.4107 0.592356C29.5908 0.955022 29.5503 1.38844 29.3056 1.71129L18.3483 16.1783C18.314 16.2236 18.2954 16.279 18.2954 16.3358V27.9364C18.2954 28.3093 18.1008 28.6549 17.7822 28.8484L12.8445 31.8453C12.6747 31.9481 12.4833 32 12.2919 32ZM3.7352 2.13333C3.51967 2.13333 3.39711 2.37988 3.52724 2.5517L13.141 15.2452C13.2816 15.4304 13.3573 15.6569 13.3573 15.8898V28.5762C13.3573 28.7795 13.5796 28.9047 13.7535 28.7992L16.0391 27.412C16.117 27.3647 16.1646 27.2802 16.1646 27.189V15.8894C16.1646 15.6569 16.2406 15.4304 16.3809 15.2448L25.9946 2.5517C26.1247 2.37989 26.0022 2.13333 25.7867 2.13333H3.7352Z\"\n fill=\"#C1C1C1\" />\n </svg>\n </div>\n </div>\n <lib-dashboard-swipeable-tabs\n [enableGrouping]=\"false\"\n [(activeIndex)]=\"activeManagerTabIndex\"\n (activeIndexChange)=\"prefMatchManagerActiveTab = ($event === 0 ? ClientViewportPrefTab.Manager : ClientViewportPrefTab.Preferences)\"\n [thumbsSwiperHeight]=\"'50px'\"\n [mainSwiperHeight]=\"'400px'\"\n [spaceBetween]=\"10\"\n [thumbsSwiperOptions]=\"{ slidesPerView: 2, spaceBetween: 10, centeredSlides: false, freeMode: false }\"\n >\n <ng-container thumb-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 0\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual Manager' }}\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-header-title\" [class.active]=\"activeManagerTabIndex === 1\">\n Preferences\n </div>\n </swiper-slide>\n </ng-container>\n\n <ng-container main-slides>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-list\" cdkDropList [cdkDropListData]=\"prefMatchManagerItems\"\n (cdkDropListDropped)=\"onPrefMatchManagerDrop($event)\">\n @for (item of prefMatchManagerItems; track item.id; let i = $index) {\n <div class=\"pref-match-manager-item\" [class.is-unselected]=\"!item.selected\"\n [class.has-index]=\"(settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList : spiderOrderedList) && item.selected\"\n cdkDrag [cdkDragDisabled]=\"!item.selected\">\n @if ((settingsContext === ClientViewportTab.PrefMatchVisual ? prefMatchManagerOrderedList :\n spiderOrderedList) && item.selected) {\n <div class=\"pref-match-manager-item-index\">\n {{ getPrefMatchDisplayIndex(i) }}\n </div>\n }\n <div class=\"pref-match-manager-item-bar\">\n <div class=\"pref-match-manager-item-main\" (click)=\"togglePrefMatchItemSelection(item.id)\">\n <div class=\"pref-match-manager-item-pill\">\n <span class=\"pref-match-manager-item-name\">{{ item.name }}</span>\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <input class=\"pref-match-manager-item-weight\" type=\"number\" [value]=\"item.weight\" min=\"0\"\n max=\"100\" (click)=\"$event.stopPropagation()\"\n (input)=\"updatePrefMatchItemWeight(item.id, $any($event.target).value)\" />\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n (click)=\"toggleSpiderColorPicker(item.id); $event.stopPropagation()\"\n [ngStyle]=\"{ 'background-color': getSpiderColorValueForItem(item.id) || '#ffffff' }\"></button>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart && spiderColorPickerOpenId === item.id) {\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderColorChange(item.id, color.label); $event.stopPropagation()\"></button>\n }\n </div>\n }\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-remove\"\n (click)=\"togglePrefMatchItemSelection(item.id); $event.stopPropagation()\">\n @if (item.selected) {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 11 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.19361 0.881595L1.08939 8.98581M8.98581 8.98581L0.881589 0.881595\" stroke=\"#A29FA8\"\n stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n } @else {\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 1V9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n <path d=\"M1 5H9\" stroke=\"#A29FA8\" stroke-width=\"1.3\" stroke-linecap=\"round\" />\n </svg>\n }\n </button>\n </div>\n <button type=\"button\" class=\"pref-match-manager-item-handle\" cdkDragHandle>\n <svg width=\"10\" height=\"4\" viewBox=\"0 0 10 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M0 0H9.0754M0 3.2844H9.0754\" stroke=\"#666666\" stroke-width=\"0.98532\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n }\n </div>\n } @else {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n </swiper-slide>\n <swiper-slide>\n <div class=\"pref-match-manager-body\" style=\"height: 100%; overflow-y: auto;\" libDraggableScroll direction=\"vertical\">\n @if (settingsContext === ClientViewportTab.PrefMatchVisual) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\"\n [checked]=\"prefMatchManagerOrderedList\"\n (change)=\"setPrefMatchManagerOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row pref-match-manager-age-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Min age: {{ prefMatchManagerMinAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMinAge\"\n (input)=\"onPrefMatchMinAgeChange($any($event.target).value)\" />\n </div>\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Max age: {{ prefMatchManagerMaxAge }}</span>\n <input type=\"range\" min=\"18\" max=\"99\" [value]=\"prefMatchManagerMaxAge\"\n (input)=\"onPrefMatchMaxAgeChange($any($event.target).value)\" />\n </div>\n </div>\n\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Waist: {{ prefMatchWaist }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchWaist\"\n (input)=\"prefMatchWaist = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Hips: {{ prefMatchHips }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHips\"\n (input)=\"prefMatchHips = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Bust: {{ prefMatchBust }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchBust\"\n (input)=\"prefMatchBust = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Height: {{ prefMatchHeight }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchHeight\"\n (input)=\"prefMatchHeight = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Face: {{ prefMatchFace }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchFace\"\n (input)=\"prefMatchFace = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Chastity: {{ prefMatchChastity }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchChastity\"\n (input)=\"prefMatchChastity = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Intelligence: {{ prefMatchIntelligence }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchIntelligence\"\n (input)=\"prefMatchIntelligence = $any($event.target).value\" />\n </div>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <div class=\"pref-match-manager-age-control\">\n <span class=\"pref-match-manager-age-label\">Cooperativeness: {{ prefMatchCooperativeness }}</span>\n <input type=\"range\" min=\"0\" max=\"100\" [value]=\"prefMatchCooperativeness\"\n (input)=\"prefMatchCooperativeness = $any($event.target).value\" />\n </div>\n </div>\n </div>\n }\n @if (settingsContext === ClientViewportTab.SpiderChart) {\n <div class=\"pref-match-manager-preferences\">\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <input type=\"checkbox\" class=\"pref-match-manager-preferences-checkbox\" [checked]=\"spiderOrderedList\"\n (change)=\"setSpiderOrderedList($any($event.target).checked)\" />\n Ordered list (number only selected prospects)\n </label>\n </div>\n <div class=\"pref-match-manager-preferences-row\">\n <label class=\"pref-match-manager-preferences-label\">\n <span class=\"pref-match-manager-item-name\">Default color</span>\n <div class=\"pref-match-manager-default-color\">\n <button type=\"button\" class=\"pref-match-manager-color-chip\"\n [ngStyle]=\"{ 'background-color': getSpiderDefaultColorValue() || '#ffffff' }\"\n (click)=\"$event.stopPropagation()\"></button>\n <div class=\"pref-match-manager-color-palette\" (click)=\"$event.stopPropagation()\">\n @for (color of allSpiderColors; track color) {\n <button type=\"button\" class=\"pref-match-manager-color-swatch\"\n [ngStyle]=\"{ 'background-color': color.value }\"\n (click)=\"onSpiderDefaultColorChange(color.label); $event.stopPropagation()\"></button>\n }\n </div>\n </div>\n </label>\n </div>\n </div>\n }\n </div>\n </swiper-slide>\n </ng-container>\n </lib-dashboard-swipeable-tabs>\n <div class=\"pref-match-manager-footer\">\n <button type=\"button\" class=\"pref-match-manager-reset\" (click)=\"resetPrefMatchManager()\">\n Reset\n </button>\n <button type=\"button\" class=\"pref-match-manager-apply\" (click)=\"applyPrefMatchManager()\">\n Apply\n </button>\n </div>\n </div>\n </div>\n </ng-template>\n\n @if (showViewportControls) {\n <div class=\"viewport-controls\">\n <button (click)=\"setViewportMode('mobile')\" [class.active]=\"viewportMode === 'mobile'\">Mobile (320x568)</button>\n <button (click)=\"setViewportMode('tablet')\" [class.active]=\"viewportMode === 'tablet'\">Tablet (768x1024)</button>\n <button (click)=\"setViewportMode('desktop')\" [class.active]=\"viewportMode === 'desktop'\">Desktop (1024x640)</button>\n </div>\n }\n</main>\n", styles: [".app-shell{width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.viewport-shell{width:100%;height:100%}.viewport{width:100%;height:100%;position:relative;overflow:hidden}.design-root{--lib-matcher-viewport-header-space: 95px;width:100%;height:100%;position:relative;overflow:hidden}.design-root.header-hidden,.design-root.footer-hidden{background:transparent;pointer-events:none}.design-root.header-hidden .content-scroll,.design-root.footer-hidden .content-scroll{pointer-events:auto}.design-root.footer-hidden .content-scroll{bottom:var(--lib-matcher-viewport-footer-space, 60px);padding-bottom:0}.viewport-shadow-ellipse{position:absolute;left:50%;bottom:0;width:460.509px;height:100.063px;border-radius:460.509px;background:#000;filter:blur(26.0212478638px);transform:translate(-50%);pointer-events:none}.content-scroll{position:absolute;top:var(--lib-matcher-viewport-header-space, 95px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:var(--lib-matcher-viewport-footer-space, 60px);scrollbar-width:none;-ms-overflow-style:none}.content-scroll::-webkit-scrollbar{display:none;width:0;height:0}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:100%;max-width:100%;height:50px;border-radius:16px 16px 0 0;background:#28252d;box-shadow:0 -15px 16px 2px #ffffff1a;display:flex;align-items:center;justify-content:center;padding:0 24px;box-sizing:border-box;z-index:4000}.bottom-nav-handle{position:absolute;top:4px;width:21px;height:1px;border-radius:13px;background:#ffffff4d}.bottom-nav-icons{width:100%;max-width:287px;display:flex;align-items:center;justify-content:space-between}.bottom-nav-item{border:none;padding:0;background:transparent;cursor:pointer;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.bottom-nav-item-insights{gap:2px}.bottom-nav-icon{position:relative;display:flex;align-items:center;justify-content:center}.bottom-nav-icon-main{display:block;height:17px;width:auto}.bottom-nav-icon-badge{position:absolute;right:0;bottom:5px;transform:translate(-10%,50%);display:block}.bottom-nav-icon-box{position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:4px;border:2px solid #626069;box-sizing:border-box;transform:translate(-50%,-50%) scale(.93);transform-origin:center}.bottom-nav-item-active .bottom-nav-icon-box{border-color:#fe558a}.bottom-nav-item-insights .bottom-nav-icon-main{transform:translateY(15px) scale(2);transform-origin:center bottom}.bottom-nav-item-settings .bottom-nav-icon-main{transform:scale(1.1);transform-origin:center}.bottom-nav-label{font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9.5px;font-weight:600;line-height:normal;text-align:center;color:#68666c}.bottom-nav-label-active{color:#fe558a}.bottom-nav-label-muted{opacity:.7}.top-nav{margin:12px auto 0;padding:0 20px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}.top-nav-back,.top-nav-profile,.request-date-btn{border:none;padding:0;background:transparent;cursor:pointer}.top-nav-back{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-back svg{position:absolute;width:77px;height:77px;top:50%;left:50%;transform:translate(-50%,-50%) translate(6.5px,6.5px);pointer-events:none}.top-nav-profile{width:25px;height:25px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}.top-nav-profile .profile-svg-main{position:absolute;width:47px;height:47px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.top-nav-profile .profile-caret-wrapper{position:absolute;bottom:-10px;right:-10px;width:26px;height:26px;pointer-events:none}.top-nav-profile .profile-caret-wrapper svg{width:100%;height:100%}.request-date-btn{position:relative;width:59px;height:26px;display:flex;align-items:center;justify-content:center}.request-date-btn:before{content:\"\";position:absolute;inset:0;border-radius:251.296px;background:#f5436d;filter:blur(3.8px)}.request-date-inner{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:54px;height:22px;border-radius:251.296px;border:.339px solid rgba(255,255,255,.29);background:linear-gradient(180deg,#fe558acc,#fe558aa6);box-shadow:0 4px 4px #00000040,0 1.693px 2.54px #00000040 inset;padding:0 4px;box-sizing:border-box}.request-date-label{color:#fff;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;margin-left:4px}.request-date-icon{display:flex;align-items:center;justify-content:center}.top-nav-profile{position:relative;width:25px;height:25px}.top-nav-profile-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.top-nav-profile-image{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.2)}.top-nav-profile-caret{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#28252d;display:flex;align-items:center;justify-content:center}.top-nav-notification{position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:#fe3c72;border:1px solid #28252d}.chat-heads-separator{margin:10px auto;width:100%;display:flex;justify-content:center;opacity:.1}.user-chat-heads{margin-bottom:10px}.tab-switcher{margin-top:10px}.tab-strip{display:flex;gap:12px;padding:4px 10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;scroll-behavior:auto;touch-action:pan-x;will-change:scroll-position;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.tab-strip::-webkit-scrollbar{display:none;width:0;height:0}.tab-strip:active{cursor:grabbing}.tab-strip>*{flex-shrink:0}.tab-strip:before,.tab-strip:after{content:\"\";flex:0 0 40px}.toolbelt-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .2s ease;opacity:.6}.toolbelt-tab:hover{opacity:.8}.toolbelt-tab.active{opacity:1}.toolbelt-tab-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#322f36,#29252d);border:1px solid rgba(255,255,255,.1);box-shadow:-3.6px -3.6px 5.8px #cbc7d140,8px 7.3px 9.8px #111014a6;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.toolbelt-tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-family:Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:9px;font-weight:600;color:#939296}.toolbelt-tab-label{font-family:Lato,Gilroy,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:8.7px;font-weight:400;line-height:1;color:#fff}.toolbelt-tab-active .toolbelt-tab-circle{transform:scale(1.06)}.toolbelt-tab-active .toolbelt-tab-icon{color:#f7f7f7;text-shadow:0 0 4px #ff1997}.tab-content{margin:6px auto 0;padding:0;width:100%;max-width:100%;box-sizing:border-box}.tab-content-inner{display:flex;align-items:center;justify-content:center}.tab-content-placeholder{position:relative;width:100%;height:auto;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:80px;background:linear-gradient(0deg,#2c282f 0% 100%),#29252d}.tab-content-placeholder::-webkit-scrollbar{display:none;width:0;height:0}.tab-content-placeholder:before{content:\"\";position:absolute;inset:0;background:url(/assets/images/showcase-background.png) 50%/cover no-repeat;opacity:.1;box-shadow:#151216 0 30px 60px -12px inset,#151216 0 18px 36px -18px inset;pointer-events:none;z-index:0}.tab-content-scroll{position:relative;width:100%;height:auto;overflow-y:visible;z-index:1}.tab-content-scroll lib-scheduler{display:block;width:100%;max-width:800px;margin:0 auto}.tab-content-scroll lib-spider-chart,.tab-content-scroll tv-trait-visual-canvas,.tab-content-scroll lib-profile-comparison{display:block;width:100%;max-width:100%}.tab-content-scroll lib-profile-comparison{width:100%;height:auto;transform:none;display:block;max-width:800px;margin:0 auto}@media (min-width: 768px){.tab-content-scroll lib-profile-comparison{transform:scale(1.3);transform-origin:top center;margin-bottom:200px}}@media (min-width: 1024px){.tab-content-scroll lib-profile-comparison{transform:scale(1.6);transform-origin:top center;margin-bottom:400px}}.tab-content-scroll lib-dashboard-swipeable-tabs{display:block;width:100%;max-width:600px;margin:0 auto}.visuals-tab-content{width:100%;height:100%}.visuals-spider-chart-container{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-bottom:20px}.visuals-spider-chart-container lib-spider-chart{height:auto;width:100%}.visuals-spider-chart-container img{margin-top:20px;z-index:1}.plans-tab-content{width:100%;height:100%;padding:8px 8px 0;box-sizing:border-box}.profile-tab-content{width:100%;height:100%}.profile-trait-visual-container{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.profile-trait-visual-container tv-trait-visual-canvas{display:block;width:100%!important;height:100%!important;min-height:300px;max-width:100%!important;max-height:100%!important;position:relative;z-index:1}.profile-trait-visual-container tv-trait-visual-canvas ::ng-deep canvas{width:100%!important;height:100%!important;min-height:300px!important;object-fit:contain!important}.profile-card-container,.profile-comparison-container{width:100%;height:100%;min-height:300px;display:block;background:transparent;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.profile-card-container::-webkit-scrollbar,.profile-comparison-container::-webkit-scrollbar{display:none}.suggested-tab-content{padding:12px 20px 0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;height:100%;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.suggested-tab-content::-webkit-scrollbar{display:none}.suggested-tab-content>*{max-width:100%;width:100%}.tab-content-placeholder lib-chat-suggestion{--max-width-container: 100%}.tab-switcher ::ng-deep .custom-bubble-status .lib-button-component button .text .btn-text .title{color:#fff!important}.suggested-timer-text{fill:#939296}.suggested-timer-num{font-family:Open Sans,sans-serif;font-weight:600}.suggested-timer-unit{font-family:Cutive Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400}.suggested-timer-text.active{filter:drop-shadow(0 0 2px #ff1997);text-shadow:0 0 2px #ff1997}.pref-match-manager-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:1001}.pref-match-manager-modal{width:302px;max-width:calc(100% - 32px);border-radius:8px;background:linear-gradient(180deg,#323133,#1f1e20);box-shadow:0 2px 4px #00000040,0 4px 4px #00000040,2px -2px 3px #0006 inset,0 -2px 8px #fff3 inset;padding:16px 16px 14px;box-sizing:border-box;color:#fff}.pref-match-manager-header{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:12px}.pref-match-manager-header-icon{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:4px}.pref-match-manager-header-title{text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:400;line-height:1.6;color:#fff;opacity:.4;white-space:nowrap;padding:10px 0;cursor:pointer}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-close{position:absolute;right:0;top:2px;border:none;padding:4px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.pref-match-manager-body{max-height:250px;padding:8px 2px 8px 0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.pref-match-manager-body::-webkit-scrollbar{display:none;width:0;height:0}.pref-match-manager-preferences{display:flex;flex-direction:column;gap:8px;padding:4px 4px 0 2px}.pref-match-manager-preferences-row{display:flex;align-items:center;justify-content:space-between}.pref-match-manager-preferences-label{display:inline-flex;align-items:center;gap:6px;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-preferences-checkbox{width:8px;height:8px;aspect-ratio:1/1;margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent;-webkit-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.6)}.pref-match-manager-preferences-checkbox:checked{background:#fe3c72;box-shadow:0 0 2px #fe3c72cc}.pref-match-manager-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid #ffffff;margin-left:6px;padding:0;background:#fff;position:relative;z-index:2}.pref-match-manager-color-palette{display:inline-flex;gap:4px;margin-left:6px;position:relative;z-index:2}.pref-match-manager-color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.5);padding:0;background:transparent}.pref-match-manager-default-color{display:inline-flex;align-items:center}.pref-match-manager-age-row{flex-direction:column;align-items:center;gap:4px}.pref-match-manager-age-control{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:220px;margin:0 auto}.pref-match-manager-age-control input[type=range]{flex:1;max-width:120px;margin:0;padding:0;border-radius:999px;background:#232126;box-shadow:none;height:14px}.pref-match-manager-age-label{font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:9px;color:#fffc}.pref-match-manager-list{display:flex;flex-direction:column;gap:8px}.pref-match-manager-item{display:flex;align-items:center;column-gap:6px;height:25px;padding:0 6px}.pref-match-manager-item.has-index .pref-match-manager-item-bar{max-width:calc(100% - 24px)}.pref-match-manager-item.is-unselected .pref-match-manager-item-pill{opacity:.4}.pref-match-manager-item-bar{flex:1;height:100%;border-radius:24px;background:linear-gradient(191deg,#27242c 61.33%,#0c0b0e 101.43%);box-shadow:9px 12px 11px 1px #111014b3 inset,-1px -1px 4px #cbc7d180 inset;display:flex;align-items:center;padding:0 0 0 10px;box-sizing:border-box}.pref-match-manager-item-main{cursor:pointer;flex:1}.pref-match-manager-item-pill{display:flex;align-items:center;justify-content:space-between;width:100%}.pref-match-manager-item-name{font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;font-weight:400;line-height:1.6;color:#fff}.pref-match-manager-item-weight{width:48px;margin-left:8px;border-radius:24px;border:none;padding:2px 6px;background:#17161a;color:#fff;font-family:Lato,-apple-system,Roboto,Helvetica,sans-serif;font-size:8px;outline:none}.pref-match-manager-item-weight::-webkit-outer-spin-button,.pref-match-manager-item-weight::-webkit-inner-spin-button{margin:0}.pref-match-manager-item-index{width:18px;text-align:center;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:12.466px;line-height:160%;color:#fff}.pref-match-manager-item-remove{width:20.937px;height:20.132px;border-radius:18.765px;border:none;background:linear-gradient(175deg,#595859cf -26.99%,#29252dcf 22.7% 100.94%);box-shadow:0 0 2.45px #0000004d,7.24px 6.582px 17.772px 1.646px #121212a6;filter:blur(.2663328946px);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative;z-index:1}.pref-match-manager-item-handle{width:30px;height:25px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:grab;padding:0;flex-shrink:0;position:relative;z-index:1}.pref-match-manager-item-handle:active{cursor:grabbing}.pref-match-manager-empty{padding:16px 4px;text-align:center;font-family:Gilroy,-apple-system,Roboto,Helvetica,sans-serif;font-size:10px;color:#ffffffb3}.pref-match-manager-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}.pref-match-manager-reset,.pref-match-manager-apply{min-width:80px;height:31px;border-radius:20px;border:.6px solid rgba(10,9,9,.45);background:linear-gradient(180deg,#3e404580,#3e404500 8.33%),radial-gradient(170.95% 118.01% at 8.39% 32.81%,#43404680,#29252d80 28.24%,#0a0a0b80);box-shadow:4px 4px 8px #00000040;display:flex;align-items:center;justify-content:center;padding:0 12px;cursor:pointer;font-family:Calistoga,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:10px;font-weight:400}.pref-match-manager-reset{color:#fe638e;text-shadow:0 0 7px #fe3c72,0 0 7px #fe3c72}.pref-match-manager-apply{color:#fff}.visuals-spider-content{position:relative;width:100%;height:100%}.visuals-spider-content .alert-popup-trait-chart{position:absolute;z-index:999;top:20px;right:10px;transform:scale(.75);transform-origin:top right}.spider-tab-label-container{display:flex;align-items:center;gap:4px}.info-icon{cursor:pointer;display:flex;align-items:center;justify-content:center}.info-icon svg{display:block}.viewport-controls{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;gap:10px;background:#28252de6;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d}.viewport-controls button{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:3px 6px;cursor:pointer;border-radius:4px;font-family:Gilroy,sans-serif;font-size:6px;transition:all .2s ease}.viewport-controls button:hover{background:#ffffff1a;color:#fff}.viewport-controls button.active{background:#fe3c72;border-color:#fe3c72;color:#fff;box-shadow:0 0 8px #fe3c7266}.visuals-spider-container{display:flex;flex-direction:column;height:100%;width:100%;background-color:#27242c}.toolbelt-tab-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-top:-2px}.toolbelt-tab-icon-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}.toolbelt-tab-icon-btn svg{display:block}.prospect-galaxy-stacked{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.spider-tab-switchers{display:none}.spider-tab-label-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4px}.visuals-spider-content{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.visuals-spider-content::-webkit-scrollbar{display:none}.visuals-spider-content lib-spider-chart{width:100%;margin:auto;transition:all .3s ease}.visuals-spider-content img{max-width:100%;max-height:100%;object-fit:contain;align-self:center;margin:auto}.swipeable-scheduler-container.is-swiping{cursor:grabbing!important}\n"] }]
11529
11529
  }], propDecorators: { config: [{
11530
11530
  type: Input
11531
11531
  }], showViewportControls: [{