@naniteninja/dashboard-components-lib 2.1.5 → 2.1.6

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 +2 -2
  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
@@ -10008,11 +10008,11 @@ class ClientViewportComponent {
10008
10008
  this.buildSpiderDatasets();
10009
10009
  }
10010
10010
  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 }], target: i0.ɵɵFactoryTarget.Component }); }
10011
- 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 @case (ClientViewportTab.ChatCompatibility) {\n @if (alertStatus.chatCompatibility) {\n <div class=\"alert-popup-chat-compatibility\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatCompatibility,\n })\n \"></lib-alert-popup>\n </div>\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 <tv-trait-visual-canvas [config]=\"{\n nodeData: traitVisualNodes,\n attributeWeights: traitVisualAttrWeights,\n preferenceWeights: traitVisualPrefWeights,\n defaultZoomLevel: 3.25,\n galaxyParticleCount: 6192,\n particleFieldCloudSize: 0.01,\n glowIntensity: 0,\n nodeHaloParticleSizeScale: 0.9,\n nodeHaloInfluenceScale: 1.3,\n galaxyParticleSize: 1.5,\n\n backgroundColor: '#000000',\n primaryColor: '#c300ff',\n secondaryColor: '#ff3366',\n blackholeRepulsion: 1.0,\n simulationSpeed: 8,\n pairwiseRepulsionMain: 52,\n pairwiseRepulsionSecondary: 42,\n dissimilarityRepulsionExponent: 2.0,\n minDistanceWidths: 0.25,\n maxDistanceWidths: 4.5,\n particleSizeScale: 1.0,\n particleDepth: 1.0\n }\"></tv-trait-visual-canvas>\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative;\">\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 style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @case (ClientViewportTab.ChatCompatibility) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: chatCompatibilityConfig.person1Interests,\n person2Interests: chatCompatibilityConfig.person2Interests,\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendUrl]=\"backendUrl\"></lib-profile-comparison>\n }\n </div>\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 [backendUrl]=\"backendUrl\"></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 @if (showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext ===\n ClientViewportTab.SpiderChart)) {\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\"\n (touchstart)=\"onPrefMatchBodyTouchStart($event)\" (touchend)=\"onPrefMatchBodyTouchEnd($event)\"\n (mousedown)=\"onPrefMatchBodyTouchStart($event)\" (mouseup)=\"onPrefMatchBodyTouchEnd($event)\">\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 class=\"pref-match-manager-header-switcher\" (touchstart)=\"onPrefMatchHeaderTouchStart($event)\"\n (touchend)=\"onPrefMatchHeaderTouchEnd($event)\" (mousedown)=\"onPrefMatchHeaderTouchStart($event)\"\n (mouseup)=\"onPrefMatchHeaderTouchEnd($event)\">\n <div class=\"pref-match-manager-header-main\"\n [class.is-manager-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n [class.is-preferences-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\">\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--manager\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Manager)\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual\n Manager' }}\n </div>\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--preferences\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Preferences)\">\n Preferences\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-close\" (click)=\"closePrefMatchManager()\">\n <svg width=\"11\" 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=\"#626069\"\n stroke-width=\"1.76325\" stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Manager) {\n <div class=\"pref-match-manager-body\">\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, $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 }\n @if (!prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n }\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences) {\n <div class=\"pref-match-manager-body\">\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($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\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($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\">\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 }\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%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}.viewport-shell{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center}.viewport{border:1px solid transparent;width:100%;max-width:320px;aspect-ratio:320/568;position:relative;overflow:hidden}@media (min-width: 768px) and (max-width: 1023.98px){.viewport{min-width:768px;aspect-ratio:768/1024}}@media (min-width: 1024px){.viewport{min-width:1024px;aspect-ratio:1024/640}}.viewport.mode-mobile{min-width:0;max-width:320px;aspect-ratio:320/568}.viewport.mode-desktop{min-width:1024px;max-width:unset;aspect-ratio:1024/640}.viewport.mode-tablet{min-width:768px;max-width:768px;aspect-ratio:768/700}.design-root{width:320px;margin:0 auto;position:relative;transform-origin:top center;height:100%;max-height:100%;overflow:hidden;background:#2c282f}@media (min-width: 768px) and (max-width: 1023.98px){.design-root{transform:scale(1.2);height:83.3333333333%}}@media (min-width: 1024px){.design-root{transform:scale(1.4);height:71.4285714286%}}.viewport.mode-desktop .design-root{transform:scale(1.4);height:71.4285714286%}.viewport.mode-mobile .design-root{transform:none;height:100%}.viewport.mode-tablet .design-root{transform:scale(1.2);height:83.3333333333%}.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;inset:95px 0 0;overflow-y:auto;overflow-x:hidden;padding-bottom: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}.design-root.footer-hidden .content-scroll{padding-bottom: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:320px;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:320px;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:320px;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:320px;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:320px;height:319px;aspect-ratio:373.02/219.18;overflow:hidden;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:100%;overflow-y:auto;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-chat-compatibility,.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-chat-compatibility,.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{transform:scale(.85);transform-origin:top center}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.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:#27242c}.trait-visual-container{width:100%;height:100%;min-height:300px;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:300px;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:300px!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{position:absolute;left:50%;top:0;transform:translate(-50%);width:160px;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}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-header-title--manager,.pref-match-manager-header-title--preferences{z-index:1}.pref-match-manager-header-switcher{width:100%;margin-top:2px;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.pref-match-manager-header-switcher:active{cursor:grabbing}.pref-match-manager-header-main{position:relative;width:160px;height:20px;margin:0 auto}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--manager{transform:translate(-50%)}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--preferences{transform:translate(40%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--preferences{transform:translate(-50%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--manager{transform:translate(-140%)}.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:18px;height:18px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-right:5%}.pref-match-manager-item-handle[disabled]{opacity:.35;cursor:default}.pref-match-manager-item-handle svg{display:block}.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:67px;display:flex;width:320px;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}.design-root.footer-hidden .chat-heads-belt{bottom:17px}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:320px;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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.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$1.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$1.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: i8.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: i10.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$", "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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10011
+ 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 @case (ClientViewportTab.ChatCompatibility) {\n @if (alertStatus.chatCompatibility) {\n <div class=\"alert-popup-chat-compatibility\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatCompatibility,\n })\n \"></lib-alert-popup>\n </div>\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 <tv-trait-visual-canvas [config]=\"{\n nodeData: traitVisualNodes,\n attributeWeights: traitVisualAttrWeights,\n preferenceWeights: traitVisualPrefWeights,\n defaultZoomLevel: 3.25,\n galaxyParticleCount: 6192,\n particleFieldCloudSize: 0.01,\n glowIntensity: 0,\n nodeHaloParticleSizeScale: 0.9,\n nodeHaloInfluenceScale: 1.3,\n galaxyParticleSize: 1.5,\n\n backgroundColor: '#000000',\n primaryColor: '#c300ff',\n secondaryColor: '#ff3366',\n blackholeRepulsion: 1.0,\n simulationSpeed: 8,\n pairwiseRepulsionMain: 52,\n pairwiseRepulsionSecondary: 42,\n dissimilarityRepulsionExponent: 2.0,\n minDistanceWidths: 0.25,\n maxDistanceWidths: 4.5,\n particleSizeScale: 1.0,\n particleDepth: 1.0\n }\"></tv-trait-visual-canvas>\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative;\">\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 style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @case (ClientViewportTab.ChatCompatibility) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: chatCompatibilityConfig.person1Interests,\n person2Interests: chatCompatibilityConfig.person2Interests,\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendUrl]=\"backendUrl\"></lib-profile-comparison>\n }\n </div>\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 [backendUrl]=\"backendUrl\"></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 @if (showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext ===\n ClientViewportTab.SpiderChart)) {\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\"\n (touchstart)=\"onPrefMatchBodyTouchStart($event)\" (touchend)=\"onPrefMatchBodyTouchEnd($event)\"\n (mousedown)=\"onPrefMatchBodyTouchStart($event)\" (mouseup)=\"onPrefMatchBodyTouchEnd($event)\">\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 class=\"pref-match-manager-header-switcher\" (touchstart)=\"onPrefMatchHeaderTouchStart($event)\"\n (touchend)=\"onPrefMatchHeaderTouchEnd($event)\" (mousedown)=\"onPrefMatchHeaderTouchStart($event)\"\n (mouseup)=\"onPrefMatchHeaderTouchEnd($event)\">\n <div class=\"pref-match-manager-header-main\"\n [class.is-manager-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n [class.is-preferences-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\">\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--manager\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Manager)\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual\n Manager' }}\n </div>\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--preferences\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Preferences)\">\n Preferences\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-close\" (click)=\"closePrefMatchManager()\">\n <svg width=\"11\" 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=\"#626069\"\n stroke-width=\"1.76325\" stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Manager) {\n <div class=\"pref-match-manager-body\">\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, $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 }\n @if (!prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n }\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences) {\n <div class=\"pref-match-manager-body\">\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($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\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($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\">\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 }\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%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}.viewport-shell{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center}.viewport{border:1px solid transparent;width:100%;max-width:320px;aspect-ratio:320/568;position:relative;overflow:hidden}@media (min-width: 768px) and (max-width: 1023.98px){.viewport{min-width:768px;aspect-ratio:768/1024}}@media (min-width: 1024px){.viewport{min-width:1024px;aspect-ratio:1024/640}}.viewport.mode-mobile{min-width:0;max-width:320px;aspect-ratio:320/568}.viewport.mode-desktop{min-width:1024px;max-width:unset;aspect-ratio:1024/640}.viewport.mode-tablet{min-width:768px;max-width:768px;aspect-ratio:768/700}.design-root{width:320px;margin:0 auto;position:relative;transform-origin:top center;height:100%;max-height:100%;overflow:hidden;background:#2c282f}@media (min-width: 768px) and (max-width: 1023.98px){.design-root{transform:scale(1.2);height:83.3333333333%}}@media (min-width: 1024px){.design-root{transform:scale(1.4);height:71.4285714286%}}.viewport.mode-desktop .design-root{transform:scale(1.4);height:71.4285714286%}.viewport.mode-mobile .design-root{transform:none;height:100%}.viewport.mode-tablet .design-root{transform:scale(1.2);height:83.3333333333%}.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;inset:95px 0 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: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:320px;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:320px;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:320px;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:320px;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:320px;height:319px;aspect-ratio:373.02/219.18;overflow:hidden;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:100%;overflow-y:auto;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-chat-compatibility,.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-chat-compatibility,.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{transform:scale(.85);transform-origin:top center}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.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:#27242c}.trait-visual-container{width:100%;height:100%;min-height:300px;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:300px;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:300px!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{position:absolute;left:50%;top:0;transform:translate(-50%);width:160px;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}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-header-title--manager,.pref-match-manager-header-title--preferences{z-index:1}.pref-match-manager-header-switcher{width:100%;margin-top:2px;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.pref-match-manager-header-switcher:active{cursor:grabbing}.pref-match-manager-header-main{position:relative;width:160px;height:20px;margin:0 auto}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--manager{transform:translate(-50%)}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--preferences{transform:translate(40%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--preferences{transform:translate(-50%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--manager{transform:translate(-140%)}.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:18px;height:18px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-right:5%}.pref-match-manager-item-handle[disabled]{opacity:.35;cursor:default}.pref-match-manager-item-handle svg{display:block}.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:320px;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:320px;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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.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$1.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$1.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: i8.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: i10.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$", "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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
10012
10012
  }
10013
10013
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ClientViewportComponent, decorators: [{
10014
10014
  type: Component,
10015
- 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 @case (ClientViewportTab.ChatCompatibility) {\n @if (alertStatus.chatCompatibility) {\n <div class=\"alert-popup-chat-compatibility\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatCompatibility,\n })\n \"></lib-alert-popup>\n </div>\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 <tv-trait-visual-canvas [config]=\"{\n nodeData: traitVisualNodes,\n attributeWeights: traitVisualAttrWeights,\n preferenceWeights: traitVisualPrefWeights,\n defaultZoomLevel: 3.25,\n galaxyParticleCount: 6192,\n particleFieldCloudSize: 0.01,\n glowIntensity: 0,\n nodeHaloParticleSizeScale: 0.9,\n nodeHaloInfluenceScale: 1.3,\n galaxyParticleSize: 1.5,\n\n backgroundColor: '#000000',\n primaryColor: '#c300ff',\n secondaryColor: '#ff3366',\n blackholeRepulsion: 1.0,\n simulationSpeed: 8,\n pairwiseRepulsionMain: 52,\n pairwiseRepulsionSecondary: 42,\n dissimilarityRepulsionExponent: 2.0,\n minDistanceWidths: 0.25,\n maxDistanceWidths: 4.5,\n particleSizeScale: 1.0,\n particleDepth: 1.0\n }\"></tv-trait-visual-canvas>\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative;\">\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 style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @case (ClientViewportTab.ChatCompatibility) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: chatCompatibilityConfig.person1Interests,\n person2Interests: chatCompatibilityConfig.person2Interests,\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendUrl]=\"backendUrl\"></lib-profile-comparison>\n }\n </div>\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 [backendUrl]=\"backendUrl\"></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 @if (showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext ===\n ClientViewportTab.SpiderChart)) {\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\"\n (touchstart)=\"onPrefMatchBodyTouchStart($event)\" (touchend)=\"onPrefMatchBodyTouchEnd($event)\"\n (mousedown)=\"onPrefMatchBodyTouchStart($event)\" (mouseup)=\"onPrefMatchBodyTouchEnd($event)\">\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 class=\"pref-match-manager-header-switcher\" (touchstart)=\"onPrefMatchHeaderTouchStart($event)\"\n (touchend)=\"onPrefMatchHeaderTouchEnd($event)\" (mousedown)=\"onPrefMatchHeaderTouchStart($event)\"\n (mouseup)=\"onPrefMatchHeaderTouchEnd($event)\">\n <div class=\"pref-match-manager-header-main\"\n [class.is-manager-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n [class.is-preferences-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\">\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--manager\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Manager)\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual\n Manager' }}\n </div>\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--preferences\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Preferences)\">\n Preferences\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-close\" (click)=\"closePrefMatchManager()\">\n <svg width=\"11\" 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=\"#626069\"\n stroke-width=\"1.76325\" stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Manager) {\n <div class=\"pref-match-manager-body\">\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, $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 }\n @if (!prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n }\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences) {\n <div class=\"pref-match-manager-body\">\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($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\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($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\">\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 }\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%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}.viewport-shell{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center}.viewport{border:1px solid transparent;width:100%;max-width:320px;aspect-ratio:320/568;position:relative;overflow:hidden}@media (min-width: 768px) and (max-width: 1023.98px){.viewport{min-width:768px;aspect-ratio:768/1024}}@media (min-width: 1024px){.viewport{min-width:1024px;aspect-ratio:1024/640}}.viewport.mode-mobile{min-width:0;max-width:320px;aspect-ratio:320/568}.viewport.mode-desktop{min-width:1024px;max-width:unset;aspect-ratio:1024/640}.viewport.mode-tablet{min-width:768px;max-width:768px;aspect-ratio:768/700}.design-root{width:320px;margin:0 auto;position:relative;transform-origin:top center;height:100%;max-height:100%;overflow:hidden;background:#2c282f}@media (min-width: 768px) and (max-width: 1023.98px){.design-root{transform:scale(1.2);height:83.3333333333%}}@media (min-width: 1024px){.design-root{transform:scale(1.4);height:71.4285714286%}}.viewport.mode-desktop .design-root{transform:scale(1.4);height:71.4285714286%}.viewport.mode-mobile .design-root{transform:none;height:100%}.viewport.mode-tablet .design-root{transform:scale(1.2);height:83.3333333333%}.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;inset:95px 0 0;overflow-y:auto;overflow-x:hidden;padding-bottom: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}.design-root.footer-hidden .content-scroll{padding-bottom: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:320px;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:320px;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:320px;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:320px;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:320px;height:319px;aspect-ratio:373.02/219.18;overflow:hidden;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:100%;overflow-y:auto;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-chat-compatibility,.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-chat-compatibility,.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{transform:scale(.85);transform-origin:top center}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.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:#27242c}.trait-visual-container{width:100%;height:100%;min-height:300px;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:300px;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:300px!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{position:absolute;left:50%;top:0;transform:translate(-50%);width:160px;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}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-header-title--manager,.pref-match-manager-header-title--preferences{z-index:1}.pref-match-manager-header-switcher{width:100%;margin-top:2px;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.pref-match-manager-header-switcher:active{cursor:grabbing}.pref-match-manager-header-main{position:relative;width:160px;height:20px;margin:0 auto}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--manager{transform:translate(-50%)}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--preferences{transform:translate(40%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--preferences{transform:translate(-50%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--manager{transform:translate(-140%)}.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:18px;height:18px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-right:5%}.pref-match-manager-item-handle[disabled]{opacity:.35;cursor:default}.pref-match-manager-item-handle svg{display:block}.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:67px;display:flex;width:320px;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}.design-root.footer-hidden .chat-heads-belt{bottom:17px}.bottom-nav{position:absolute;left:0;bottom:0;width:100%;display:flex;justify-content:center}.bottom-nav-inner{position:relative;width:320px;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}\n"] }]
10015
+ 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 @case (ClientViewportTab.ChatCompatibility) {\n @if (alertStatus.chatCompatibility) {\n <div class=\"alert-popup-chat-compatibility\">\n <lib-alert-popup\n [title]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.title || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.TITLE' | translate)\"\n [description]=\"config?.toastInfo?.[alertStatusFields.chatCompatibility]?.description || ('CLIENT_DASHBOARD.ALERT_POPUP.CHAT_COMPATIBILITY.DESCRIPTION' | translate)\"\n (closed)=\"\n onClosedAlert({\n event: $event,\n field: alertStatusFields.chatCompatibility,\n })\n \"></lib-alert-popup>\n </div>\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 <tv-trait-visual-canvas [config]=\"{\n nodeData: traitVisualNodes,\n attributeWeights: traitVisualAttrWeights,\n preferenceWeights: traitVisualPrefWeights,\n defaultZoomLevel: 3.25,\n galaxyParticleCount: 6192,\n particleFieldCloudSize: 0.01,\n glowIntensity: 0,\n nodeHaloParticleSizeScale: 0.9,\n nodeHaloInfluenceScale: 1.3,\n galaxyParticleSize: 1.5,\n\n backgroundColor: '#000000',\n primaryColor: '#c300ff',\n secondaryColor: '#ff3366',\n blackholeRepulsion: 1.0,\n simulationSpeed: 8,\n pairwiseRepulsionMain: 52,\n pairwiseRepulsionSecondary: 42,\n dissimilarityRepulsionExponent: 2.0,\n minDistanceWidths: 0.25,\n maxDistanceWidths: 4.5,\n particleSizeScale: 1.0,\n particleDepth: 1.0\n }\"></tv-trait-visual-canvas>\n </div>\n }\n @case (ClientViewportTab.ChatScheduler) {\n <div\n style=\"height: 100%; overflow: hidden; padding: 16px; box-sizing: border-box; position: relative;\">\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 style=\"position: relative; height: 100%;\">\n <lib-handoff-panel [config]=\"handoffChatConfig\" (swipeNext)=\"onHandoffSwipeNext()\"\n (swipePrev)=\"onHandoffSwipePrev()\"></lib-handoff-panel>\n </div>\n }\n @case (ClientViewportTab.ChatCompatibility) {\n <div class=\"profile-compare-wrapper\">\n @if (clientMatches$ | async; as clientMatches) {\n <lib-profile-comparison [config]=\"{\n person1Interests: chatCompatibilityConfig.person1Interests,\n person2Interests: chatCompatibilityConfig.person2Interests,\n person3Interests: [],\n user1Image: clientMatches[clientHomeConfig.activeIndex]?.primary?.src || '',\n user2Image: clientMatches[clientHomeConfig.activeIndex]?.secondary?.src || ''\n }\"\n [backendUrl]=\"backendUrl\"></lib-profile-comparison>\n }\n </div>\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 [backendUrl]=\"backendUrl\"></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 @if (showPrefMatchManager && (settingsContext === ClientViewportTab.PrefMatchVisual || settingsContext ===\n ClientViewportTab.SpiderChart)) {\n <div class=\"pref-match-manager-backdrop\" (click)=\"closePrefMatchManager()\">\n <div class=\"pref-match-manager-modal\" (click)=\"$event.stopPropagation()\"\n (touchstart)=\"onPrefMatchBodyTouchStart($event)\" (touchend)=\"onPrefMatchBodyTouchEnd($event)\"\n (mousedown)=\"onPrefMatchBodyTouchStart($event)\" (mouseup)=\"onPrefMatchBodyTouchEnd($event)\">\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 class=\"pref-match-manager-header-switcher\" (touchstart)=\"onPrefMatchHeaderTouchStart($event)\"\n (touchend)=\"onPrefMatchHeaderTouchEnd($event)\" (mousedown)=\"onPrefMatchHeaderTouchStart($event)\"\n (mouseup)=\"onPrefMatchHeaderTouchEnd($event)\">\n <div class=\"pref-match-manager-header-main\"\n [class.is-manager-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n [class.is-preferences-active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\">\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--manager\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Manager\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Manager)\">\n {{ settingsContext === ClientViewportTab.SpiderChart ? 'Spider Chart Manager' : 'Pref Match Visual\n Manager' }}\n </div>\n <div class=\"pref-match-manager-header-title pref-match-manager-header-title--preferences\"\n [class.active]=\"prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences\"\n (click)=\"setPrefMatchManagerActiveTab(ClientViewportPrefTab.Preferences)\">\n Preferences\n </div>\n </div>\n </div>\n <button type=\"button\" class=\"pref-match-manager-close\" (click)=\"closePrefMatchManager()\">\n <svg width=\"11\" 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=\"#626069\"\n stroke-width=\"1.76325\" stroke-linecap=\"round\" />\n </svg>\n </button>\n </div>\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Manager) {\n <div class=\"pref-match-manager-body\">\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, $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 }\n @if (!prefMatchManagerItems?.length) {\n <div class=\"pref-match-manager-empty\">\n No prospects available\n </div>\n }\n </div>\n }\n @if (prefMatchManagerActiveTab === ClientViewportPrefTab.Preferences) {\n <div class=\"pref-match-manager-body\">\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($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\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($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\">\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 }\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%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}.viewport-shell{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:center}.viewport{border:1px solid transparent;width:100%;max-width:320px;aspect-ratio:320/568;position:relative;overflow:hidden}@media (min-width: 768px) and (max-width: 1023.98px){.viewport{min-width:768px;aspect-ratio:768/1024}}@media (min-width: 1024px){.viewport{min-width:1024px;aspect-ratio:1024/640}}.viewport.mode-mobile{min-width:0;max-width:320px;aspect-ratio:320/568}.viewport.mode-desktop{min-width:1024px;max-width:unset;aspect-ratio:1024/640}.viewport.mode-tablet{min-width:768px;max-width:768px;aspect-ratio:768/700}.design-root{width:320px;margin:0 auto;position:relative;transform-origin:top center;height:100%;max-height:100%;overflow:hidden;background:#2c282f}@media (min-width: 768px) and (max-width: 1023.98px){.design-root{transform:scale(1.2);height:83.3333333333%}}@media (min-width: 1024px){.design-root{transform:scale(1.4);height:71.4285714286%}}.viewport.mode-desktop .design-root{transform:scale(1.4);height:71.4285714286%}.viewport.mode-mobile .design-root{transform:none;height:100%}.viewport.mode-tablet .design-root{transform:scale(1.2);height:83.3333333333%}.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;inset:95px 0 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: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:320px;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:320px;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:320px;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:320px;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:320px;height:319px;aspect-ratio:373.02/219.18;overflow:hidden;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:100%;overflow-y:auto;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-chat-compatibility,.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-chat-compatibility,.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{transform:scale(.85);transform-origin:top center}.tab-content-scroll lib-handoff-panel{max-width:100%;overflow-x:hidden}.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:#27242c}.trait-visual-container{width:100%;height:100%;min-height:300px;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:300px;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:300px!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{position:absolute;left:50%;top:0;transform:translate(-50%);width:160px;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}.pref-match-manager-header-title.active{opacity:1}.pref-match-manager-header-title--manager,.pref-match-manager-header-title--preferences{z-index:1}.pref-match-manager-header-switcher{width:100%;margin-top:2px;overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none}.pref-match-manager-header-switcher:active{cursor:grabbing}.pref-match-manager-header-main{position:relative;width:160px;height:20px;margin:0 auto}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--manager{transform:translate(-50%)}.pref-match-manager-header-main.is-manager-active .pref-match-manager-header-title--preferences{transform:translate(40%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--preferences{transform:translate(-50%)}.pref-match-manager-header-main.is-preferences-active .pref-match-manager-header-title--manager{transform:translate(-140%)}.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:18px;height:18px;border-radius:999px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;margin-right:5%}.pref-match-manager-item-handle[disabled]{opacity:.35;cursor:default}.pref-match-manager-item-handle svg{display:block}.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:320px;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:320px;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}\n"] }]
10016
10016
  }], ctorParameters: () => [{ type: LayoutService }, { type: i0.ElementRef }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
10017
10017
  type: Input
10018
10018
  }], showViewportControls: [{