@edvak99/voice-receptionist-widget 1.1.26 → 1.1.27

package/fesm2022/{edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-CabSa0_n.mjs → edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-BxX138_W.mjs}

@@ -1221,57 +1221,6 @@ function humanizeSettingsKey(key) {
         .trim()
         .replace(/^\w/, (c) => c.toUpperCase());
 }
-const DEFAULT_BOOKING_MODE_OPTIONS = [
-    {
-        value: 'confirmed',
-        label: 'Confirm appointment',
-        description: 'Creates a live appointment in the EHR (create-new-appointment). The caller hears that they are booked.',
-    },
-    {
-        value: 'pending',
-        label: 'Pending appointment',
-        description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
-    },
-];
-function unwrapBookingModePayload(body) {
-    if (!body || typeof body !== 'object')
-        return {};
-    const raw = body;
-    if (typeof raw['bookingMode'] === 'string' || Array.isArray(raw['options'])) {
-        return raw;
-    }
-    if (raw['data'] && typeof raw['data'] === 'object') {
-        return unwrapBookingModePayload(raw['data']);
-    }
-    if (raw['settings'] && typeof raw['settings'] === 'object') {
-        return unwrapBookingModePayload(raw['settings']);
-    }
-    return raw;
-}
-function mapBookingModeSettings(body) {
-    const raw = unwrapBookingModePayload(body);
-    const mode = String(raw.bookingMode ?? '').trim().toLowerCase();
-    const bookingMode = mode === 'pending' ? 'pending' : 'confirmed';
-    const options = Array.isArray(raw.options) && raw.options.length
-        ? raw.options
-            .map((o) => {
-            const value = String(o?.value ?? '').trim().toLowerCase();
-            if (value !== 'confirmed' && value !== 'pending')
-                return null;
-            return {
-                value: value,
-                label: String(o?.label ?? '').trim() ||
-                    (value === 'pending' ? 'Pending appointment' : 'Confirm appointment'),
-                description: String(o?.description ?? '').trim(),
-            };
-        })
-            .filter((o) => !!o)
-        : DEFAULT_BOOKING_MODE_OPTIONS;
-    return {
-        bookingMode,
-        options: options.length ? options : DEFAULT_BOOKING_MODE_OPTIONS,
-    };
-}
 /** Map frontend AgentSettings → backend PUT body section keys. */
 function mapSettingsToRequest(settings) {
     return {
@@ -2416,7 +2365,6 @@ class AiReceptionistApiMockService {
         this.tasks = signal(cloneTasks());
         this.history = signal(cloneHistory());
         this.settings = signal(structuredClone(SEED_SETTINGS));
-        this.bookingMode = 'confirmed';
         this.status = signal({
             agentOn: true,
             agentOnExplicit: true,
@@ -2737,27 +2685,6 @@ class AiReceptionistApiMockService {
         this.settings.set(saved);
         return this.mock(saved);
     }
-    getBookingMode() {
-        return this.mock({
-            bookingMode: this.bookingMode,
-            options: [
-                {
-                    value: 'confirmed',
-                    label: 'Confirm appointment',
-                    description: 'Creates a live appointment in the EHR (create-new-appointment). The caller hears that they are booked.',
-                },
-                {
-                    value: 'pending',
-                    label: 'Pending appointment',
-                    description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
-                },
-            ],
-        });
-    }
-    putBookingMode(bookingMode) {
-        this.bookingMode = bookingMode === 'pending' ? 'pending' : 'confirmed';
-        return this.getBookingMode();
-    }
     getVoicePromptDefault() {
         return of({
             defaultVoiceSystemPrompt: 'You are an AI receptionist for a medical practice. Be warm, concise, and HIPAA-aware.',
@@ -3421,22 +3348,6 @@ class AiReceptionistApiService {
             .put(`${this.arBase}/settings`, { settings: mapSettingsToRequest(next) })
             .pipe(switchMap(() => this.getSettings()), catchError((err) => throwError(() => new Error(this.apiErrorMessage(err, 'Failed to save agent settings')))));
     }
-    /**
-     * Practice-level Confirm vs Pending booking mode.
-     * Dedicated endpoint — JWT supplies the practice; do not send practiceId.
-     */
-    getBookingMode() {
-        if (this.useMock)
-            return this.mock.getBookingMode();
-        return this.http.get(`${this.arBase}/settings/booking-mode`).pipe(map((body) => ({ data: mapBookingModeSettings(body) })), catchError((err) => throwError(() => new Error(this.apiErrorMessage(err, 'Failed to load booking mode')))));
-    }
-    putBookingMode(bookingMode) {
-        if (this.useMock)
-            return this.mock.putBookingMode(bookingMode);
-        return this.http
-            .put(`${this.arBase}/settings/booking-mode`, { bookingMode })
-            .pipe(map((body) => ({ data: mapBookingModeSettings(body) })), catchError((err) => throwError(() => new Error(this.apiErrorMessage(err, 'Failed to save booking mode')))));
-    }
     /** Shipped default voice system prompt + max lengths. */
     getVoicePromptDefault() {
         if (this.useMock)
@@ -3757,30 +3668,12 @@ class AiReceptionistApiService {
     apiErrorMessage(err, fallback) {
         const body = err.error;
         if (typeof body === 'object' && body && 'message' in body) {
-            const text = this.coerceErrorText(body.message);
-            if (text)
-                return text;
-        }
-        if (typeof body === 'string' && body.trim() && body !== '[object Object]')
-            return body.trim();
-        if (typeof err.message === 'string' && err.message.trim() && err.message !== '[object Object]') {
-            return err.message.trim();
+            return String(body.message);
         }
+        if (typeof body === 'string' && body.trim())
+            return body;
         return fallback;
     }
-    coerceErrorText(value) {
-        if (typeof value === 'string' && value.trim() && value !== '[object Object]') {
-            return value.trim();
-        }
-        if (Array.isArray(value)) {
-            const parts = value.map((item) => this.coerceErrorText(item)).filter((item) => !!item);
-            return parts.length ? parts.join('; ') : null;
-        }
-        if (value && typeof value === 'object' && 'message' in value) {
-            return this.coerceErrorText(value.message);
-        }
-        return null;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiReceptionistApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiReceptionistApiService, providedIn: 'root' }); }
 }
@@ -4681,11 +4574,11 @@ class KnowledgeTestModalComponent {
         this.playing.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KnowledgeTestModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KnowledgeTestModalComponent, isStandalone: true, selector: "eds-knowledge-test-modal", inputs: { open: "open", whatToSay: "whatToSay", whatNotToSay: "whatNotToSay", voiceId: "voiceId" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label>What might a caller ask?<span required></span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KnowledgeTestModalComponent, isStandalone: true, selector: "eds-knowledge-test-modal", inputs: { open: "open", whatToSay: "whatToSay", whatNotToSay: "whatNotToSay", voiceId: "voiceId" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label><span required>What might a caller ask?</span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KnowledgeTestModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eds-knowledge-test-modal', imports: [FormsModule, ModalComponent, IconComponent, EdButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label>What might a caller ask?<span required></span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"] }]
+            args: [{ selector: 'eds-knowledge-test-modal', imports: [FormsModule, ModalComponent, IconComponent, EdButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <app-modal\n    title=\"Test Knowledge Base\"\n    subtitle=\"Ask a sample caller question \u2014 hear how the agent answers with your guidance and voice\"\n    maxWidth=\"560px\"\n    (closed)=\"close()\"\n  >\n    <form id=\"knowledge-test-form\" class=\"flex flex-col gap-4\" (ngSubmit)=\"runTest()\" novalidate autocomplete=\"off\">\n      <div class=\"mb-sm\">\n        <label><span required>What might a caller ask?</span></label>\n        <textarea\n          class=\"form-textarea min-h-[84px]\"\n          rows=\"3\"\n          [maxlength]=\"questionMax\"\n          [ngModel]=\"question()\"\n          (ngModelChange)=\"onQuestionChange($event)\"\n          name=\"question\"\n          placeholder=\"e.g. What are your Saturday hours? Is parking free?\"\n          [disabled]=\"testing()\"\n          autocomplete=\"off\"\n        ></textarea>\n        <span class=\"kb-test__hint self-end text-xs\">{{ question().length }}/{{ questionMax }}</span>\n      </div>\n\n      @if (answer(); as spoken) {\n        <div class=\"kb-test__answer rounded-lg border px-4 py-3\" role=\"status\">\n          <div class=\"mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide\">\n            <ed-icon name=\"graph_new\" [size]=\"18\" />\n            <span>Agent reply</span>\n            @if (playing()) {\n              <span class=\"kb-test__playing ml-auto font-medium normal-case tracking-normal\">Playing\u2026</span>\n            } @else {\n              <button type=\"button\" class=\"kb-test__replay ml-auto cursor-pointer border-none bg-transparent px-1 py-1 text-[13px] font-semibold normal-case tracking-normal\" (click)=\"replay()\">\n                Replay\n              </button>\n            }\n          </div>\n          <p class=\"m-0 text-sm leading-[1.55]\">{{ spoken }}</p>\n        </div>\n      }\n    </form>\n\n    <div modalFooter class=\"border-t border-base bg-white px-6 py-4\">\n      <div class=\"flex justify-end gap-2\">\n        <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"close()\" [disabled]=\"testing()\">\n          Close\n        </ed-button>\n        <ed-button\n          type=\"button\"\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"testing() || !question().trim()\"\n          (click$)=\"runTest()\"\n        >\n          @if (testing()) {\n            Generating\u2026\n          } @else {\n            <ed-icon slot=\"prefix\" name=\"play_arrow\" [size]=\"16\" />\n            Test\n          }\n        </ed-button>\n      </div>\n    </div>\n  </app-modal>\n}\n", styles: [".kb-test__hint{color:var(--eds-color-text-muted, #64748b)}.kb-test__answer{border-color:var(--eds-color-border, #e2e8f0);background:var(--eds-color-surface-alt, #f8fafc)}.kb-test__answer-head{color:var(--eds-color-text-muted, #64748b)}.kb-test__playing,.kb-test__replay{color:var(--eds-primary, #2563eb)}.kb-test__answer-text{color:var(--eds-color-text, #0f172a)}\n"] }]
         }], propDecorators: { open: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5183,12 +5076,6 @@ class SettingsPageComponent {
         this.confirmOffOpen = signal(false);
         this.voicePreviewBusy = signal(false);
         this.voicePreviewPlaying = signal(false);
-        /** Isolated from main settings body — practice-level EHR booking write path. */
-        this.bookingMode = signal('confirmed');
-        this.bookingModeOptions = signal([]);
-        this.bookingModeLoading = signal(true);
-        this.bookingModeError = signal(null);
-        this.originalBookingMode = null;
         this.online = this.agentOnline.online;
         this.agentLoading = this.agentOnline.loading;
         this.toggling = this.agentOnline.toggling;
@@ -5285,7 +5172,6 @@ class SettingsPageComponent {
             next: ({ data }) => this.locations.set(data ?? []),
             error: () => this.locations.set([]),
         });
-        this.loadBookingMode();
     }
     ngOnDestroy() {
         this.stopVoicePreview();
@@ -5310,80 +5196,9 @@ class SettingsPageComponent {
         if (!this.originalSettings)
             return;
         this.settings.set(structuredClone(this.originalSettings));
-        if (this.originalBookingMode)
-            this.bookingMode.set(this.originalBookingMode);
-        this.bookingModeError.set(null);
         this.locationsMenuOpen.set(false);
         this.stopVoicePreview();
     }
-    loadBookingMode() {
-        this.bookingModeLoading.set(true);
-        this.bookingModeError.set(null);
-        this.api.getBookingMode().subscribe({
-            next: ({ data }) => {
-                this.bookingMode.set(data.bookingMode);
-                this.originalBookingMode = data.bookingMode;
-                this.bookingModeOptions.set(data.options);
-                this.bookingModeLoading.set(false);
-            },
-            error: (err) => {
-                this.bookingModeLoading.set(false);
-                if (!this.bookingModeOptions().length) {
-                    this.bookingModeOptions.set([
-                        {
-                            value: 'confirmed',
-                            label: 'Confirm appointment',
-                            description: 'Creates a live appointment in the EHR (create-new-appointment). The caller hears that they are booked.',
-                        },
-                        {
-                            value: 'pending',
-                            label: 'Pending appointment',
-                            description: 'Submits an Online Request for staff review (req-auto-new-appointment). Do not tell the caller the visit is confirmed.',
-                        },
-                    ]);
-                }
-                this.bookingModeError.set(this.asErrorText(err, 'Could not load booking mode for this practice.'));
-            },
-        });
-    }
-    selectBookingMode(mode) {
-        if (this.saving() || this.bookingMode() === mode)
-            return;
-        this.bookingMode.set(mode);
-        this.bookingModeError.set(null);
-    }
-    asErrorText(err, fallback) {
-        if (err instanceof Error && err.message && err.message !== '[object Object]') {
-            return err.message;
-        }
-        if (typeof err === 'string' && err.trim())
-            return err.trim();
-        if (err && typeof err === 'object') {
-            const o = err;
-            const fromMessage = this.coerceUnknownMessage(o.message);
-            if (fromMessage)
-                return fromMessage;
-            const fromError = this.coerceUnknownMessage(o.error);
-            if (fromError)
-                return fromError;
-        }
-        return fallback;
-    }
-    coerceUnknownMessage(value) {
-        if (typeof value === 'string' && value.trim() && value !== '[object Object]') {
-            return value.trim();
-        }
-        if (Array.isArray(value)) {
-            const parts = value
-                .map((item) => this.coerceUnknownMessage(item))
-                .filter((item) => !!item);
-            return parts.length ? parts.join('; ') : null;
-        }
-        if (value && typeof value === 'object' && 'message' in value) {
-            return this.coerceUnknownMessage(value.message);
-        }
-        return null;
-    }
     updateField(section, key, value) {
         const current = this.settings();
         if (!current || isFieldReadOnly(section, key))
@@ -5602,48 +5417,25 @@ class SettingsPageComponent {
         payload.transcripts['retainDays'] = Math.max(recDays, txDays);
         this.restoreReadOnlyFields(payload, orig);
         this.saving.set(true);
-        this.bookingModeError.set(null);
-        const nextBookingMode = this.bookingMode();
-        const bookingModeDirty = this.originalBookingMode != null && nextBookingMode !== this.originalBookingMode;
         this.api.putSettings(payload).subscribe({
             next: ({ data }) => {
                 this.originalSettings = structuredClone(data);
                 this.settings.set(structuredClone(data));
-                if (!bookingModeDirty) {
-                    this.finishSaveSuccess();
-                    return;
-                }
-                this.api.putBookingMode(nextBookingMode).subscribe({
-                    next: ({ data: booking }) => {
-                        this.bookingMode.set(booking.bookingMode);
-                        this.originalBookingMode = booking.bookingMode;
-                        if (booking.options?.length)
-                            this.bookingModeOptions.set(booking.options);
-                        this.finishSaveSuccess();
-                    },
-                    error: (err) => {
-                        this.saving.set(false);
-                        const text = this.asErrorText(err, 'Failed to save booking mode');
-                        this.bookingModeError.set(text);
-                        this.tab.set('phone');
-                        this.toast.show(`Agent settings saved, but booking mode failed: ${text}`, 'error');
-                    },
-                });
+                this.saving.set(false);
+                this.saved.set(true);
+                this.toast.show('Agent settings saved', 'success');
+                setTimeout(() => this.saved.set(false), 2000);
+                this.savedSuccessfully.emit();
             },
             error: (err) => {
                 this.saving.set(false);
-                const message = this.asErrorText(err, 'Failed to save agent settings');
+                const message = err instanceof Error && err.message.trim()
+                    ? err.message
+                    : 'Failed to save agent settings';
                 this.toast.show(message, 'error');
             },
         });
     }
-    finishSaveSuccess() {
-        this.saving.set(false);
-        this.saved.set(true);
-        this.toast.show('Agent settings saved', 'success');
-        setTimeout(() => this.saved.set(false), 2000);
-        this.savedSuccessfully.emit();
-    }
     restoreReadOnlyFields(payload, orig) {
         const editableSections = [
             'general',
@@ -5673,7 +5465,7 @@ class SettingsPageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SettingsPageComponent, isStandalone: true, selector: "eds-settings-page", inputs: { presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedSuccessfully: "savedSuccessfully" }, host: { properties: { "class.settings-page-host--drawer": "presentation() === \"drawer\"" } }, ngImport: i0, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>What to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>What not to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  Name<span required></span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label>Voice<span required></span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Inbound Greetings<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">AI Answer Mode<span required></span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>AI Phone Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Transfer Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Ringing Time Wait<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Location Handled<span required></span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Max AI Call Duration<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Silence Timeout<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>After-Hours Behaviour<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\n                <div class=\"flex flex-col gap-2xs\">\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\n                  <span class=\"fs-xs text-light\">\n                    Controls how the voice agent writes bookings to the EHR for this practice.\n                    Applied when you click Save changes.\n                  </span>\n                </div>\n\n                @if (bookingModeLoading()) {\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\n                } @else {\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\n                    @for (opt of bookingModeOptions(); track opt.value) {\n                      <button\n                        type=\"button\"\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\n                        [disabled]=\"saving()\"\n                        role=\"radio\"\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\n                        (click)=\"selectBookingMode(opt.value)\"\n                      >\n                        <span\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\n                          aria-hidden=\"true\"\n                        ></span>\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\n                          @if (opt.description) {\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                }\n\n                @if (bookingModeError(); as err) {\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\n                    {{ err }}\n                  </p>\n                }\n              </div>\n\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Call Recordings<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Transcripts<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: KnowledgeTestModalComponent, selector: "eds-knowledge-test-modal", inputs: ["open", "whatToSay", "whatNotToSay", "voiceId"], outputs: ["closed"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SettingsPageComponent, isStandalone: true, selector: "eds-settings-page", inputs: { presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { savedSuccessfully: "savedSuccessfully" }, ngImport: i0, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>What to say</span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>What not to say</span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  <span required>Name</span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label><span required>Voice</span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Inbound Greetings</span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\"><span required>AI Answer Mode</span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>AI Phone Number</span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Transfer Number</span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Ringing Time Wait</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Location Handled</span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Max AI Call Duration</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Silence Timeout</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>After-Hours Behaviour</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Keep Call Recordings</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Keep Transcripts</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: KnowledgeTestModalComponent, selector: "eds-knowledge-test-modal", inputs: ["open", "whatToSay", "whatNotToSay", "voiceId"], outputs: ["closed"] }, { kind: "component", type: ModalComponent, selector: "app-modal", inputs: ["title", "subtitle", "maxWidth"], outputs: ["closed"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SettingsPageComponent, decorators: [{
             type: Component,
@@ -5685,9 +5477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         KnowledgeTestModalComponent,
                         ModalComponent,
                         EdSkeletonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.settings-page-host--drawer]': 'presentation() === "drawer"',
-                    }, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>What to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>What not to say<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  Name<span required></span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label>Voice<span required></span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Inbound Greetings<span required></span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">AI Answer Mode<span required></span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>AI Phone Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Transfer Number<span required></span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Ringing Time Wait<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Location Handled<span required></span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Max AI Call Duration<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Silence Timeout<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>After-Hours Behaviour<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"settings-page__booking-mode flex flex-col gap-sm\">\n                <div class=\"flex flex-col gap-2xs\">\n                  <span class=\"fs-sm font-medium text-dark\">Appointment booking mode</span>\n                  <span class=\"fs-xs text-light\">\n                    Controls how the voice agent writes bookings to the EHR for this practice.\n                    Applied when you click Save changes.\n                  </span>\n                </div>\n\n                @if (bookingModeLoading()) {\n                  <p class=\"m-0 fs-sm text-light\">Loading booking mode\u2026</p>\n                } @else {\n                  <div class=\"flex flex-col gap-xs\" role=\"radiogroup\" aria-label=\"Appointment booking mode\">\n                    @for (opt of bookingModeOptions(); track opt.value) {\n                      <button\n                        type=\"button\"\n                        class=\"settings-page__booking-option flex w-full cursor-pointer items-start gap-sm rounded-md border border-base bg-white p-sm text-left\"\n                        [class.settings-page__booking-option--active]=\"bookingMode() === opt.value\"\n                        [disabled]=\"saving()\"\n                        role=\"radio\"\n                        [attr.aria-checked]=\"bookingMode() === opt.value\"\n                        (click)=\"selectBookingMode(opt.value)\"\n                      >\n                        <span\n                          class=\"settings-page__booking-radio mt-2xs flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-zinc-300\"\n                          [class.settings-page__booking-radio--on]=\"bookingMode() === opt.value\"\n                          aria-hidden=\"true\"\n                        ></span>\n                        <span class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                          <span class=\"fs-sm font-medium text-dark\">{{ opt.label }}</span>\n                          @if (opt.description) {\n                            <span class=\"fs-xs text-light\">{{ opt.description }}</span>\n                          }\n                        </span>\n                      </button>\n                    }\n                  </div>\n                }\n\n                @if (bookingModeError(); as err) {\n                  <p class=\"m-0 rounded-md border border-red-200 bg-red-50 px-sm py-xs fs-sm text-red-600\" role=\"alert\">\n                    {{ err }}\n                  </p>\n                }\n              </div>\n\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Call Recordings<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Keep Transcripts<span required></span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}:host.settings-page-host--drawer{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.settings-page__booking-option:hover:not(:disabled){border-color:#94c5f9;background:#f8fbff}.settings-page__booking-option--active{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-color-primary-light, #eaf1fe)}.settings-page__booking-option:disabled{opacity:.7;cursor:wait}.settings-page__booking-radio--on{border-color:var(--eds-brand-600, #2162f0);background:var(--eds-brand-600, #2162f0);box-shadow:inset 0 0 0 3px #fff}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"settings-page\"\n  [class.p-base]=\"presentation() === 'page'\"\n  [class.bg-lighter]=\"presentation() === 'page'\"\n  [class.min-h-full]=\"presentation() === 'page'\"\n  [class.h-full]=\"presentation() === 'page'\"\n  [class.min-h-0]=\"presentation() === 'page'\"\n  [class.overflow-auto]=\"presentation() === 'page'\"\n  [class.flex]=\"presentation() === 'drawer'\"\n  [class.h-full]=\"presentation() === 'drawer'\"\n  [class.min-h-0]=\"presentation() === 'drawer'\"\n  [class.flex-col]=\"presentation() === 'drawer'\"\n>\n  @if (presentation() === 'page') {\n    <header class=\"mb-6 flex items-start justify-between gap-4\">\n      <div>\n        <h4>Agent settings</h4>\n        <p class=\"mt-2 text-base leading-normal text-zinc-500\">Configure AI receptionist behavior and safety</p>\n      </div>\n      <div class=\"flex shrink-0 items-center gap-3\">\n        @if (saved()) {\n          <span class=\"text-sm font-medium text-green-500\">Saved</span>\n        }\n        <ed-button variant=\"primary\" fill size=\"sm\" [disabled]=\"saving()\" (click$)=\"save()\">\n          <ed-icon slot=\"prefix\" name=\"save\" [size]=\"16\" />\n          {{ saving() ? 'Saving\u2026' : 'Save changes' }}\n        </ed-button>\n      </div>\n    </header>\n  }\n\n  @if (loading()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\" aria-busy=\"true\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"presentation\">\n            @for (_ of navSkeletonRows; track _) {\n              <li class=\"mb-1\">\n                <ed-skeleton class=\"h-8 w-full !rounded-md\"></ed-skeleton>\n              </li>\n            }\n          </ul>\n        </nav>\n        <article class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md overflow-y-auto bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    } @else {\n      <div\n        class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\"\n        aria-busy=\"true\"\n      >\n        <nav class=\"flex flex-col gap-1 rounded-lg border border-base bg-white p-2 shadow-sm\" aria-label=\"Settings sections\">\n          @for (_ of navSkeletonRows; track _) {\n            <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n          }\n        </nav>\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"grid gap-2xs\">\n            <ed-skeleton class=\"h-5 w-40\"></ed-skeleton>\n            <ed-skeleton class=\"h-3 w-72\"></ed-skeleton>\n          </header>\n          @for (_ of fieldSkeletonRows; track _) {\n            <div class=\"grid gap-2xs\">\n              <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n              <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n            </div>\n          }\n        </article>\n      </div>\n    }\n  } @else if (settings()) {\n    @if (presentation() === 'drawer') {\n      <div class=\"flex min-h-0 flex-1\">\n        <nav class=\"w-[220px] h-full shrink-0 overflow-y-auto p-base bg-lighter-2\" aria-label=\"Settings sections\">\n          <ul role=\"tablist\" aria-label=\"Settings sections\">\n            @for (t of tabs; track t.id) {\n              <li\n                role=\"presentation\"\n                [class.cursor-pointer]=\"!isTabDisabled(t.id)\"\n                [class.cursor-not-allowed]=\"isTabDisabled(t.id)\"\n              >\n                <div\n                  class=\"kpi-menu\"\n                  role=\"tab\"\n                  [attr.id]=\"'agent-settings-tab-' + t.id\"\n                  [attr.aria-selected]=\"tab() === t.id\"\n                  [attr.aria-disabled]=\"isTabDisabled(t.id)\"\n                  [attr.tabindex]=\"tab() === t.id ? 0 : -1\"\n                  [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n                  [class.kpi-menu-active]=\"tab() === t.id\"\n                  [class.opacity-45]=\"isTabDisabled(t.id)\"\n                  (click)=\"setTab(t.id)\"\n                  (keydown.enter)=\"setTab(t.id)\"\n                  (keydown.space)=\"$event.preventDefault(); setTab(t.id)\"\n                >\n                  <div class=\"flex items-center gap-xs w-full\">\n                    <span class=\"whitespace-nowrap flex-1 truncate\">{{ t.label }}</span>\n                    @if (isTabDisabled(t.id)) {\n                      <span class=\"shrink-0 fs-2xs font-medium uppercase tracking-wide text-lighter\">Off</span>\n                    }\n                  </div>\n                </div>\n              </li>\n            }\n          </ul>\n        </nav>\n\n        <article\n          class=\"flex min-h-0 min-w-0 flex-1 flex-col gap-md bg-white p-base\"\n          [class.overflow-y-auto]=\"!locationsMenuOpen()\"\n          [class.overflow-visible]=\"locationsMenuOpen()\"\n        >\n          <header class=\"flex shrink-0 items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    } @else {\n      <div class=\"grid grid-cols-[240px_minmax(0,1fr)] max-[960px]:grid-cols-1 items-start gap-5\">\n        <nav\n          class=\"sticky top-4 flex max-h-[calc(100vh-120px)] max-[960px]:static max-[960px]:max-h-none max-[960px]:flex-row max-[960px]:flex-wrap flex-col gap-1 overflow-y-auto rounded-lg border border-base bg-white p-2 shadow-sm\"\n          aria-label=\"Settings sections\"\n        >\n          @for (t of tabs; track t.id) {\n            <button\n              type=\"button\"\n              class=\"settings-page__nav-item flex w-full max-[960px]:w-auto max-[960px]:flex-1 cursor-pointer items-center justify-between gap-3 rounded-md border-none bg-transparent px-4 py-3 text-left text-sm font-medium leading-snug text-zinc-600\"\n              [class.settings-page__nav-item--active]=\"tab() === t.id\"\n              [class.settings-page__nav-item--disabled]=\"isTabDisabled(t.id)\"\n              [disabled]=\"isTabDisabled(t.id)\"\n              [attr.title]=\"isTabDisabled(t.id) ? 'This section is currently disabled' : null\"\n              (click)=\"setTab(t.id)\"\n            >\n              {{ t.label }}\n              @if (isTabDisabled(t.id)) {\n                <span class=\"ml-auto text-xs font-medium uppercase tracking-wide text-zinc-400\">Disabled</span>\n              }\n            </button>\n          }\n        </nav>\n\n        <article class=\"flex min-h-96 flex-col gap-md overflow-hidden rounded-lg border border-light bg-white p-base\">\n          <header class=\"flex items-start justify-between gap-base\">\n            <div class=\"min-w-0\">\n              <h5 class=\"m-0\">{{ sectionMeta().title }}</h5>\n              @if (tab() !== 'knowledge' && tab() !== 'general' && tab() !== 'phone' && tab() !== 'transcripts') {\n                <p class=\"m-0 mt-2xs max-w-2xl fs-sm text-light\">{{ sectionMeta().description }}</p>\n              }\n            </div>\n            @if (tab() === 'knowledge') {\n              <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"openTestCall()\">\n                <ed-icon slot=\"prefix\" name=\"phone_call\" [size]=\"16\" />\n                Test Call\n              </ed-button>\n            }\n          </header>\n\n          @if (sectionIsReadOnly(tab())) {\n            <p class=\"flex items-center gap-sm rounded-md border border-light bg-lighter px-base py-sm fs-sm text-light\">\n              <ed-icon name=\"lock\" [size]=\"18\" />\n              These settings are managed by Edvak. Contact support to request changes.\n            </p>\n          }\n\n          <ng-container [ngTemplateOutlet]=\"settingsPanels\" />\n        </article>\n      </div>\n    }\n  }\n</div>\n\n<ng-template #settingsPanels>\n        @if (tab() === 'knowledge') {\n          <div class=\"flex w-full max-w-4xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>What to say</span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatToSay', $event)\"\n                placeholder=\"Hours, parking, payment options, arrival instructions, emergencies\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>What not to say</span></label>\n              <textarea\n                class=\"form-textarea min-h-56\"\n                rows=\"10\"\n                [maxlength]=\"knowledgeMax\"\n                [ngModel]=\"whatNotToSay()\"\n                (ngModelChange)=\"updateKnowledgeField('whatNotToSay', $event)\"\n                placeholder=\"Clinical advice, unverified prices, PHI, promises the practice cannot keep\u2026\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ whatNotToSay().length }}/{{ knowledgeMax }}</span>\n            </div>\n          </div>\n        } @else if (tab() === 'general') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\">\n                  <span required>Name</span>\n                </label>\n                <ed-icon\n                  name=\"info\"\n                  [size]=\"16\"\n                  class=\"text-light\"\n                  title=\"How the AI introduces itself on calls\"\n                />\n              </div>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('general', 'agentName')\"\n                (ngModelChange)=\"updateField('general', 'agentName', $event)\"\n                autocomplete=\"off\"\n              />\n            </div>\n\n            <div class=\"flex items-end gap-sm\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-xs\">\n                <label><span required>Voice</span></label>\n                <select\n                  class=\"form-select is-sm settings-page__select\"\n                  [ngModel]=\"selectedVoiceId()\"\n                  (ngModelChange)=\"onVoiceChange($event)\"\n                  autocomplete=\"off\"\n                >\n                  @for (v of voicePresets; track v.id) {\n                    <option [ngValue]=\"v.id\">{{ v.gender }} \u00B7 {{ v.label }}</option>\n                  }\n                </select>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__voice-play inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-base bg-white disabled:cursor-wait disabled:opacity-60\"\n                [disabled]=\"!selectedVoiceId() || voicePreviewBusy()\"\n                [attr.aria-label]=\"voicePreviewPlaying() ? 'Stop voice preview' : 'Play voice preview'\"\n                [title]=\"voicePreviewPlaying() ? 'Stop preview' : 'Play sample'\"\n                (click)=\"toggleVoicePreview()\"\n              >\n                <ed-icon [name]=\"voicePreviewPlaying() ? 'stop' : 'play_arrow'\" [size]=\"20\" />\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Tone</label>\n              <div class=\"flex flex-wrap gap-xs\" role=\"radiogroup\" aria-label=\"Tone\">\n                @for (tone of toneOptions; track tone.value) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__tone cursor-pointer rounded-full border border-transparent bg-lighter px-sm py-2xs fs-xs font-medium text-body\"\n                    [class.settings-page__tone--active]=\"selectedTone() === tone.value\"\n                    [class.font-semibold]=\"selectedTone() === tone.value\"\n                    [attr.aria-checked]=\"selectedTone() === tone.value\"\n                    role=\"radio\"\n                    (click)=\"setTone(tone.value)\"\n                  >\n                    {{ tone.label }}\n                  </button>\n                }\n              </div>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Inbound Greetings</span></label>\n              <textarea\n                class=\"form-textarea min-h-24\"\n                rows=\"4\"\n                spellcheck=\"false\"\n                [maxlength]=\"welcomeMax\"\n                [placeholder]=\"welcomePlaceholder()\"\n                [ngModel]=\"welcomeMessage()\"\n                (ngModelChange)=\"updateWelcomeMessage($event)\"\n                autocomplete=\"off\"\n              ></textarea>\n              <span class=\"block text-right fs-xs text-light\">{{ welcomeMessage().length }}/{{ welcomeMax }}</span>\n              <div class=\"flex flex-wrap items-center gap-xs\">\n                <span class=\"fs-xs font-medium text-dark\">Variables:</span>\n                @for (v of greetingVariables; track v.key) {\n                  <button\n                    type=\"button\"\n                    class=\"settings-page__var-chip inline-flex h-5 cursor-pointer items-center rounded border border-base bg-white px-2xs fs-xs font-medium text-dark\"\n                    (click)=\"insertGreetingVariable(v.token)\"\n                    [title]=\"'Insert ' + v.token\"\n                  >\n                    {{ v.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'phone') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center justify-between gap-xs\">\n                <label class=\"m-0\"><span required>AI Answer Mode</span></label>\n                <ed-icon name=\"info\" [size]=\"16\" class=\"text-light\" title=\"When the AI picks up inbound calls\" />\n              </div>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'answerMode')\"\n                (ngModelChange)=\"updateField('phone', 'answerMode', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of answerModeOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>AI Phone Number</span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'mainNumber')\"\n                [ngModel]=\"fieldValue('phone', 'mainNumber')\"\n                (ngModelChange)=\"updateField('phone', 'mainNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Number patients dial for the AI receptionist. Locked (managed by platform).</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Transfer Number</span></label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [disabled]=\"isFieldReadOnly('phone', 'transferNumber')\"\n                [ngModel]=\"fieldValue('phone', 'transferNumber')\"\n                (ngModelChange)=\"updateField('phone', 'transferNumber', $event)\"\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Staff / front-desk handoff number. Locked.</span>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Ringing Time Wait</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'ringTimeout')\"\n                (ngModelChange)=\"selectNumberField('phone', 'ringTimeout', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of ringTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <ed-icon name=\"event_available\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Create Follow-up Task</span>\n                <span class=\"fs-xs text-light\">\n                  If no one answers in time, the agent auto-creates a high priority task.\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                [attr.aria-pressed]=\"!!fieldValue('phone', 'createFollowUpTask')\"\n                aria-label=\"Create Follow-up Task\"\n                (click)=\"updateField('phone', 'createFollowUpTask', !fieldValue('phone', 'createFollowUpTask'))\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Location Handled</span></label>\n              <div class=\"relative\" data-locations-dd (document:click)=\"onLocationsDocClick($event)\">\n                <div\n                  class=\"form-input flex h-auto w-full cursor-pointer items-center justify-between gap-xs py-2xs text-left\"\n                  role=\"combobox\"\n                  tabindex=\"0\"\n                  [class.opacity-55]=\"locations().length === 0\"\n                  [attr.aria-expanded]=\"locationsMenuOpen()\"\n                  [attr.aria-disabled]=\"locations().length === 0\"\n                  [attr.title]=\"locationSummary()\"\n                  aria-haspopup=\"listbox\"\n                  aria-label=\"Locations handled\"\n                  (click)=\"$event.stopPropagation(); locations().length && toggleLocationsMenu()\"\n                  (keydown.enter)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                  (keydown.space)=\"$event.preventDefault(); locations().length && toggleLocationsMenu()\"\n                >\n                  <span class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2xs overflow-hidden\">\n                    @if (locations().length === 0) {\n                      <span class=\"fs-sm text-light\">No locations available.</span>\n                    } @else if (selectedLocations().length === 0) {\n                      <span class=\"fs-sm text-light\">Select locations</span>\n                    } @else {\n                      @for (loc of visibleSelectedLocations(); track loc.id) {\n                        <span class=\"inline-flex h-5 items-center gap-2xs rounded bg-primary-50 px-2xs text-primary\">\n                          <span class=\"fs-xs font-medium\">{{ loc.name }}</span>\n                          <button\n                            type=\"button\"\n                            class=\"inline-flex h-3 w-3 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-primary\"\n                            [attr.aria-label]=\"'Remove ' + loc.name\"\n                            (click)=\"$event.stopPropagation(); toggleLocation(loc.id)\"\n                          >\n                            <ed-icon name=\"close\" [size]=\"12\" color=\"currentColor\" />\n                          </button>\n                        </span>\n                      }\n                      @if (hiddenLocationCount() > 0) {\n                        <span class=\"inline-flex h-5 items-center rounded bg-primary-50 px-2xs fs-xs font-medium text-primary\">\n                          +{{ hiddenLocationCount() }}\n                        </span>\n                      }\n                    }\n                  </span>\n                  <ed-icon name=\"expand_more\" [size]=\"16\" class=\"shrink-0 text-light\" />\n                </div>\n                @if (locationsMenuOpen()) {\n                  <ul\n                    class=\"settings-page__locations-menu absolute bottom-full z-50 m-0 mb-1 max-h-56 w-full list-none overflow-auto rounded-md border border-zinc-300 bg-white p-2xs shadow-lg\"\n                    role=\"listbox\"\n                    aria-multiselectable=\"true\"\n                  >\n                    @for (loc of locations(); track loc.id) {\n                      <li role=\"option\" [attr.aria-selected]=\"selectedLocationIds().includes(loc.id)\">\n                        <label class=\"flex cursor-pointer items-center gap-xs rounded px-xs py-2xs fs-sm text-dark hover:bg-lighter\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"h-4 w-4 accent-blue-600\"\n                            [checked]=\"selectedLocationIds().includes(loc.id)\"\n                            (change)=\"toggleLocation(loc.id)\"\n                          />\n                          <span class=\"min-w-0 truncate\">{{ loc.name }}</span>\n                        </label>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n              @if (locations().length === 0) {\n                <p class=\"m-0 fs-sm text-light\">No locations available.</p>\n              }\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Max AI Call Duration</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'maxCallDurationMin')\"\n                (ngModelChange)=\"selectNumberField('phone', 'maxCallDurationMin', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of maxCallDurationOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Silence Timeout</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('phone', 'silenceTimeoutSec')\"\n                (ngModelChange)=\"selectNumberField('phone', 'silenceTimeoutSec', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of silenceTimeoutOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>After-Hours Behaviour</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"fieldValue('phone', 'afterHoursBehavior')\"\n                (ngModelChange)=\"updateField('phone', 'afterHoursBehavior', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of afterHoursOptions; track opt.value) {\n                  <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-md border-t border-light pt-md\">\n              <div class=\"flex flex-col gap-xs\">\n                <label>Minimum lead time (hours)</label>\n                <input\n                  class=\"form-input is-sm\"\n                  type=\"number\"\n                  min=\"0\"\n                  [ngModel]=\"fieldValue('scheduling', 'leadTimeHours')\"\n                  (ngModelChange)=\"updateField('scheduling', 'leadTimeHours', +$event)\"\n                  autocomplete=\"off\"\n                />\n                <span class=\"fs-xs text-light\">Earliest bookable slot from now.</span>\n              </div>\n\n              <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n                  <ed-icon name=\"calendar_month\" [size]=\"20\" class=\"shrink-0 text-primary\" />\n                <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                  <span class=\"fs-sm text-dark\">Allow same-day booking</span>\n                  <span class=\"fs-xs text-light\">\n                    Let patients book appointments later today.\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  [attr.aria-pressed]=\"!!fieldValue('scheduling', 'allowSameDay')\"\n                  aria-label=\"Allow same-day booking\"\n                  (click)=\"updateField('scheduling', 'allowSameDay', !fieldValue('scheduling', 'allowSameDay'))\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n            </div>\n          </div>\n        } @else if (tab() === 'transcripts') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Keep Call Recordings</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'recordingRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'recordingRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label><span required>Keep Transcripts</span></label>\n              <select\n                class=\"form-select is-sm\"\n                [ngModel]=\"numberFieldAsString('transcripts', 'transcriptRetainDays')\"\n                (ngModelChange)=\"selectNumberField('transcripts', 'transcriptRetainDays', $event)\"\n                autocomplete=\"off\"\n              >\n                @for (opt of retentionOptions; track opt.value) {\n                  <option [value]=\"opt.value\">{{ opt.label }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <div class=\"flex items-center gap-xs\">\n                <label class=\"m-0\">Disclosure Warning</label>\n                <button\n                  type=\"button\"\n                  class=\"settings-page__switch shrink-0\"\n                  [class.settings-page__switch--on]=\"disclosureEnabled()\"\n                  [attr.aria-pressed]=\"disclosureEnabled()\"\n                  aria-label=\"Disclosure Warning\"\n                  (click)=\"setDisclosureEnabled(!disclosureEnabled())\"\n                >\n                  <span class=\"settings-page__switch-thumb\"></span>\n                </button>\n              </div>\n              @if (disclosureEnabled()) {\n                <textarea\n                  class=\"form-textarea min-h-24\"\n                  rows=\"4\"\n                  [maxlength]=\"disclosureMax\"\n                  [ngModel]=\"disclosureText()\"\n                  (ngModelChange)=\"updateDisclosureText($event)\"\n                  autocomplete=\"off\"\n                ></textarea>\n              }\n            </div>\n          </div>\n        } @else if (tab() === 'advanced') {\n          <div class=\"flex w-full max-w-3xl flex-col gap-md\">\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-white p-sm\">\n              <span class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary-50 text-primary\" aria-hidden=\"true\">\n                <ed-icon name=\"sparkle\" [size]=\"20\" />\n              </span>\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">\n                  @if (toggling()) {\n                    Updating\u2026\n                  } @else if (online() === true) {\n                    Agent online\n                  } @else if (online() === false) {\n                    Agent offline\n                  } @else {\n                    Status unknown\n                  }\n                </span>\n                <span class=\"fs-xs text-light\">\n                  @if (online() === true) {\n                    AI receptionist is answering inbound calls.\n                  } @else if (online() === false) {\n                    AI is offline \u2014 calls go to the front desk.\n                  } @else {\n                    Checking agent status\u2026\n                  }\n                </span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"online() === true\"\n                [disabled]=\"agentSwitchDisabled()\"\n                [attr.aria-pressed]=\"online() === true\"\n                aria-label=\"Agent online\"\n                (click)=\"onAgentToggleClick()\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n\n            <div class=\"flex flex-col gap-xs\">\n              <label>Model version</label>\n              <input\n                class=\"form-input is-sm\"\n                type=\"text\"\n                [ngModel]=\"fieldValue('advanced', 'modelVersion')\"\n                disabled\n                autocomplete=\"off\"\n              />\n              <span class=\"fs-xs text-light\">Set by Edvak support.</span>\n            </div>\n\n            <div class=\"flex items-center gap-sm rounded-md border border-base bg-lighter px-base py-sm opacity-90\">\n              <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                <span class=\"fs-sm text-dark\">Debug mode</span>\n                <span class=\"fs-xs text-light\">Verbose logging \u2014 contact Edvak to change.</span>\n              </div>\n              <button\n                type=\"button\"\n                class=\"settings-page__switch shrink-0\"\n                [class.settings-page__switch--on]=\"!!fieldValue('advanced', 'debugMode')\"\n                disabled\n                [attr.aria-pressed]=\"!!fieldValue('advanced', 'debugMode')\"\n                aria-label=\"Debug mode\"\n              >\n                <span class=\"settings-page__switch-thumb\"></span>\n              </button>\n            </div>\n          </div>\n        } @else {\n          <div class=\"grid grid-cols-2 gap-x-md gap-y-md below-md:grid-cols-1\">\n            @for (field of fieldsForTab(); track field.key) {\n              @if (field.type === 'boolean') {\n                <label\n                  class=\"col-span-full flex cursor-pointer items-center justify-between gap-base rounded-md border border-base bg-lighter px-base py-sm\"\n                  [class.cursor-default]=\"fieldIsReadOnly(tab(), field.key)\"\n                  [class.opacity-90]=\"fieldIsReadOnly(tab(), field.key)\"\n                >\n                  <div class=\"flex min-w-0 flex-col gap-2xs\">\n                    <span class=\"fs-sm text-dark\">{{ field.label }}</span>\n                    @if (field.description) {\n                      <span\n                        class=\"fs-sm text-light\"\n                        [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                      >{{ field.description }}</span>\n                    }\n                  </div>\n                  <input\n                    type=\"checkbox\"\n                    class=\"h-4 w-4 shrink-0 accent-blue-600 disabled:cursor-not-allowed\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  />\n                </label>\n              } @else if (field.type === 'select' && field.options?.length) {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  <select\n                    class=\"form-select is-sm\"\n                    [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                    [ngModel]=\"fieldValue(tab(), field.key)\"\n                    (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                    autocomplete=\"off\"\n                  >\n                    @for (opt of field.options; track opt.value) {\n                      <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                </div>\n              } @else {\n                <div class=\"flex flex-col gap-xs\">\n                  <label>{{ field.label }}</label>\n                  @if (field.description) {\n                    <span\n                      class=\"fs-sm text-light\"\n                      [class.text-lighter]=\"fieldIsReadOnly(tab(), field.key)\"\n                    >{{ field.description }}</span>\n                  }\n                  @if (field.type === 'number') {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"number\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, +$event)\"\n                      autocomplete=\"off\"\n                    />\n                  } @else {\n                    <input\n                      class=\"form-input is-sm\"\n                      type=\"text\"\n                      [disabled]=\"fieldIsReadOnly(tab(), field.key)\"\n                      [ngModel]=\"fieldValue(tab(), field.key)\"\n                      (ngModelChange)=\"updateField(tab(), field.key, $event)\"\n                      autocomplete=\"off\"\n                    />\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n</ng-template>\n\n<eds-knowledge-test-modal\n  [open]=\"knowledgeTestOpen()\"\n  [whatToSay]=\"whatToSay()\"\n  [whatNotToSay]=\"whatNotToSay()\"\n  [voiceId]=\"selectedVoiceId()\"\n  (closed)=\"closeTestCall()\"\n/>\n\n@if (confirmOffOpen()) {\n  <app-modal\n    title=\"Turn off AI receptionist?\"\n    subtitle=\"Inbound callers will be transferred to the front desk instead of the AI.\"\n    maxWidth=\"480px\"\n    (closed)=\"cancelConfirmOff()\"\n  >\n    <p class=\"mb-4 m-0 text-sm leading-normal text-zinc-500\">While offline, the AI will not answer calls. Callers are routed to the human receptionist.</p>\n    <div class=\"flex justify-end gap-2\">\n      <ed-button variant=\"secondary\" outline size=\"sm\" (click$)=\"cancelConfirmOff()\">Cancel</ed-button>\n      <ed-button variant=\"danger\" fill size=\"sm\" [disabled]=\"toggling()\" (click$)=\"confirmTurnOff()\">\n        Turn off AI receptionist\n      </ed-button>\n    </div>\n  </app-modal>\n}\n", styles: [":host{display:block}.settings-page__layout{grid-template-columns:240px minmax(0,1fr)}.settings-page__nav-item:hover{background:var(--eds-surface-l1, #f7f9fa);color:var(--eds-text-primary, #41464c)}.settings-page__nav-item--active{background:var(--eds-color-primary-light, #eaf1fe);color:var(--eds-text-brand, #2162f0)}.settings-page__nav-item--disabled,.settings-page__nav-item:disabled{opacity:.45;cursor:not-allowed;color:var(--eds-text-tertiary, #767676)}.settings-page__nav-item--disabled:hover,.settings-page__nav-item:disabled:hover{background:none;color:var(--eds-text-tertiary, #767676)}.settings-page__select{min-height:2.25rem;background:#fff;border:1px solid #c5c7d0;color:#1f2328}.settings-page__locations-menu{box-shadow:0 8px 24px #0f172a29}.settings-page__voice-play{color:var(--eds-text-primary, #41464c)}.settings-page__voice-play:hover:not(:disabled){border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__tone--active{background:var(--eds-surface-l0, #fff);border-color:var(--eds-brand-600, #2162f0);color:var(--eds-brand-600, #2162f0)}.settings-page__var-chip:hover{border-color:var(--eds-brand-300, #94c5f9);color:var(--eds-brand-600, #2162f0)}.settings-page__switch{width:44px;height:26px;border-radius:999px;border:none;background:var(--eds-gray-300, #cbd5e1);padding:3px;cursor:pointer;transition:background .15s ease}.settings-page__switch--on{background:var(--eds-brand-600, #2162f0)}.settings-page__switch:disabled{opacity:.55;cursor:not-allowed}.settings-page__switch-thumb{display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0f172a33;transition:transform .15s ease}.settings-page__switch--on .settings-page__switch-thumb{transform:translate(18px)}.form-input:disabled,.form-select:disabled{color:var(--eds-color-text-muted, #64748b);background:var(--eds-color-surface-alt, #f1f5f9);border-color:var(--eds-color-border, #e2e8f0);cursor:not-allowed;opacity:1}@media(max-width:960px){.settings-page__layout{grid-template-columns:1fr}}\n"] }]
         }] });
 
 var settingsPage_component = /*#__PURE__*/Object.freeze({
@@ -5964,7 +5754,7 @@ class AgentSettingsDrawerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentSettingsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AgentSettingsDrawerComponent, isStandalone: true, selector: "eds-agent-settings-drawer", viewQueries: [{ propertyName: "settingsForm", first: true, predicate: ["settingsForm"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"], dependencies: [{ kind: "component", type: SettingsPageComponent, selector: "eds-settings-page", inputs: ["presentation"], outputs: ["savedSuccessfully"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: EdIconButtonComponent, selector: "ed-icon-button", inputs: ["label", "name", "size", "variant", "allowBubble", "ghost", "outline", "solid", "subtle", "shape", "type", "disabled", "loading", "toggle", "pressed", "id", "title", "nameAttr", "value", "autofocus", "tabIndex"], outputs: ["click", "focus", "blur", "click$", "focus$", "blur$"] }, { kind: "directive", type: ViewportPortalDirective, selector: "[edsViewportPortal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AgentSettingsDrawerComponent, isStandalone: true, selector: "eds-agent-settings-drawer", viewQueries: [{ propertyName: "settingsForm", first: true, predicate: ["settingsForm"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-visible p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"], dependencies: [{ kind: "component", type: SettingsPageComponent, selector: "eds-settings-page", inputs: ["presentation"], outputs: ["savedSuccessfully"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: EdIconButtonComponent, selector: "ed-icon-button", inputs: ["label", "name", "size", "variant", "allowBubble", "ghost", "outline", "solid", "subtle", "shape", "type", "disabled", "loading", "toggle", "pressed", "id", "title", "nameAttr", "value", "autofocus", "tabIndex"], outputs: ["click", "focus", "blur", "click$", "focus$", "blur$"] }, { kind: "directive", type: ViewportPortalDirective, selector: "[edsViewportPortal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AgentSettingsDrawerComponent, decorators: [{
             type: Component,
@@ -5973,7 +5763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         EdButtonComponent,
                         EdIconButtonComponent,
                         ViewportPortalDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-hidden p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (open()) {\n  <div\n    edsViewportPortal\n    class=\"eds-drawer-backdrop fixed left-0 top-0 z-[100100] flex h-[100vh] w-[100vw] justify-end\"\n    (click)=\"onBackdropClick($event)\"\n    role=\"presentation\"\n  >\n    <ed-drawer\n      size=\"xl\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Agent Setting\"\n    >\n      <ed-drawer-header class=\"shrink-0 border-b border-zinc-200 bg-white shadow-none\">\n        <h6 data-new-heading=\"true\">Agent Setting</h6>\n        <ed-icon-button\n          name=\"close\"\n          label=\"Close\"\n          size=\"sm\"\n          ghost\n          (click$)=\"close()\"\n        />\n      </ed-drawer-header>\n\n      <ed-drawer-body class=\"min-h-0 flex-1 overflow-visible p-0\">\n        <eds-settings-page\n          #settingsForm\n          presentation=\"drawer\"\n        />\n      </ed-drawer-body>\n\n      <ed-drawer-footer class=\"shrink-0 flex-row-reverse bg-lighter\">\n        <ed-button\n          variant=\"primary\"\n          fill\n          size=\"sm\"\n          [disabled]=\"settingsForm.saving()\"\n          (click$)=\"settingsForm.save()\"\n        >\n          {{ settingsForm.saving() ? 'Saving\u2026' : 'Save' }}\n        </ed-button>\n        <ed-button\n          variant=\"default\"\n          outline\n          size=\"sm\"\n          (click$)=\"close()\"\n        >\n          Cancel\n        </ed-button>\n        @if (settingsForm.saved()) {\n          <span class=\"mr-auto fs-sm font-medium text-green-500\">Saved</span>\n        }\n      </ed-drawer-footer>\n    </ed-drawer>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.eds-drawer-backdrop{background-color:#0f172a66}\n"] }]
         }] });
 
 class EdsModuleNavComponent {
@@ -6572,7 +6362,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
     {
         path: 'dashboard',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-dashboard-page.component-CoqHpfH4.mjs').then((m) => m.DashboardPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-dashboard-page.component-o7i5Hd2a.mjs').then((m) => m.DashboardPageComponent),
     },
     {
         path: 'live',
@@ -6581,37 +6371,37 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-calls-page.component-BLJTOY-p.mjs').then((m) => m.LiveCallsPageComponent),
+                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-calls-page.component--IvghBHo.mjs').then((m) => m.LiveCallsPageComponent),
             },
             {
                 path: ':id',
-                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-monitor-page.component-MS9bpOBv.mjs').then((m) => m.LiveMonitorPageComponent),
+                loadComponent: () => import('./edvak99-voice-receptionist-widget-live-monitor-page.component-BGkh-tr2.mjs').then((m) => m.LiveMonitorPageComponent),
             },
         ],
     },
     {
         path: 'history',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-page.component-CtdkYCXC.mjs').then((m) => m.CallHistoryPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-page.component-B79RtjPX.mjs').then((m) => m.CallHistoryPageComponent),
     },
     {
         path: 'history/:id',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-detail-page.component-pRSrt5C2.mjs').then((m) => m.CallHistoryDetailPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-call-history-detail-page.component-CBxMXdsL.mjs').then((m) => m.CallHistoryDetailPageComponent),
     },
     {
         path: 'activities',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-activities-page.component-BlOth9CN.mjs').then((m) => m.ActivitiesPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-activities-page.component-CU_0syoU.mjs').then((m) => m.ActivitiesPageComponent),
     },
     {
         path: 'tasks',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-tasks-page.component-9X8YjNaO.mjs').then((m) => m.TasksPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-tasks-page.component-DNyrZJkS.mjs').then((m) => m.TasksPageComponent),
     },
     {
         path: 'analytics',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-analytics-page.component-Cr02cCqy.mjs').then((m) => m.AnalyticsPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-analytics-page.component-C_YenFDP.mjs').then((m) => m.AnalyticsPageComponent),
     },
     {
         path: 'audit',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-audit-page.component-IKR5CpVe.mjs').then((m) => m.AuditPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-audit-page.component-BdsYgTWW.mjs').then((m) => m.AuditPageComponent),
     },
     {
         path: 'settings',
@@ -6619,7 +6409,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     },
     {
         path: 'settings/outbound-purposes',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-outbound-purposes-page.component-Wxq3Aqip.mjs').then((m) => m.OutboundPurposesPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-outbound-purposes-page.component-DVgtSIve.mjs').then((m) => m.OutboundPurposesPageComponent),
     },
     {
         path: 'knowledge',
@@ -6628,7 +6418,7 @@ const VOICE_RECEPTIONIST_FEATURE_ROUTES = [
     },
     {
         path: 'wizard',
-        loadComponent: () => import('./edvak99-voice-receptionist-widget-wizard-page.component-CktmVrGt.mjs').then((m) => m.WizardPageComponent),
+        loadComponent: () => import('./edvak99-voice-receptionist-widget-wizard-page.component-CR7DkO2R.mjs').then((m) => m.WizardPageComponent),
     },
 ];
 /**
@@ -6690,4 +6480,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  */
 
 export { AiReceptionistApiService as A, ToastContainerComponent as B, VOICE_RECEPTIONIST_FEATURE_ROUTES as C, DashboardSocketService as D, EdAvatarComponent as E, VOICE_RECEPTIONIST_ROUTES as F, VOICE_RECEPTIONIST_SESSION as G, provideVoiceReceptionist as H, IconComponent as I, LiveCallsListService as L, ModalComponent as M, ToastService as T, VOICE_RECEPTIONIST_CONFIG as V, AgentOnlineService as a, ageFromDob as b, callerMetaLine as c, historyResultChips as d, historyResolutionLabel as e, EdButtonComponent as f, EdSkeletonComponent as g, historyResolution as h, isUnknownCaller as i, toE164Phone as j, resolveToolKey as k, resolveToolDisplayName as l, toolEventTrackKey as m, DEFAULT_PAGE_SIZE as n, totalPages as o, EdIconButtonComponent as p, activityTypeLabel as q, resultChipIcon as r, ViewportPortalDirective as s, triggerBlobDownload as t, initialsFromName as u, DEFAULT_PLACEHOLDERS as v, EdsAppShellComponent as w, EdsBadgeComponent as x, EdsButtonComponent as y, EdsRouteProgressComponent as z };
-//# sourceMappingURL=edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-CabSa0_n.mjs.map
+//# sourceMappingURL=edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-BxX138_W.mjs.map