@product7/feedback-sdk 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/feedback-sdk.js +25 -16
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/widgets/ButtonWidget.js +24 -14
package/dist/feedback-sdk.min.js CHANGED
@@ -1,2 +1,2 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FeedbackSDK={})}(this,function(e){"use strict";class t extends Error{constructor(e,n){super(e),this.name="SDKError",this.cause=n,Error.captureStackTrace&&Error.captureStackTrace(this,t)}}class n extends Error{constructor(e,t,s){super(t),this.name="APIError",this.status=e,this.response=s,Error.captureStackTrace&&Error.captureStackTrace(this,n)}isNetworkError(){return 0===this.status}isClientError(){return this.status>=400&&this.status<500}isServerError(){return this.status>=500&&this.status<600}}class s extends Error{constructor(e,t,n){super(e),this.name="WidgetError",this.widgetType=t,this.widgetId=n,Error.captureStackTrace&&Error.captureStackTrace(this,s)}}class i extends Error{constructor(e,t){super(e),this.name="ConfigError",this.configKey=t,Error.captureStackTrace&&Error.captureStackTrace(this,i)}}class r extends Error{constructor(e,t,n){super(e),this.name="ValidationError",this.field=t,this.value=n,Error.captureStackTrace&&Error.captureStackTrace(this,r)}}const o={primaryColor:"#21244A",backgroundColor:"#ffffff",textColor:"#1F2937",boardId:"feature-requests",size:"medium",displayMode:"modal"},a=[{id:"mock_nps_survey",type:"nps",title:"How likely are you to recommend us?",description:"Your feedback helps us improve",low_label:"Not likely",high_label:"Very likely",trigger:"manual",status:"active"},{id:"mock_csat_survey",type:"csat",title:"How satisfied are you?",description:"Rate your experience with our product",trigger:"manual",status:"active"},{id:"mock_ces_survey",type:"ces",title:"How easy was it?",description:"Rate the ease of completing your task",low_label:"Very difficult",high_label:"Very easy",trigger:"manual",status:"active"}],l={production:{base:"https://api.product7.io/api/v1",withWorkspace:e=>`https://${e}.api.product7.io/api/v1`},staging:{base:"https://staging.api.product7.io/api/v1",withWorkspace:e=>`https://${e}.staging.api.product7.io/api/v1`}};class c{constructor(e={}){if(this.workspace=e.workspace,this.sessionToken=null,this.sessionExpiry=null,this.userContext=e.userContext||null,this.mock=e.mock||!1,this.env=e.env||"production",e.apiUrl)this.baseURL=e.apiUrl;else{const e=l[this.env]||l.production;this.baseURL=this.workspace?e.withWorkspace(this.workspace):e.base}this._loadStoredSession()}async init(e=null){if(e&&(this.userContext=e),this.isSessionValid())return{sessionToken:this.sessionToken};if(!this.userContext||!this.workspace){const e=`Missing ${this.workspace?"user context":"workspace"} for initialization`;throw new n(400,e)}if(this.mock)return this.sessionToken="mock_session_"+Date.now(),this.sessionExpiry=new Date(Date.now()+36e5),this._storeSession(),{sessionToken:this.sessionToken,config:o,expiresIn:3600};const t={workspace:this.workspace,user:this.userContext};try{const e=await this._makeRequest("/widget/init",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});return this.sessionToken=e.session_token,this.sessionExpiry=new Date(Date.now()+1e3*e.expires_in),this._storeSession(),{sessionToken:this.sessionToken,config:e.config||{},expiresIn:e.expires_in}}catch(e){throw new n(e.status||500,`Failed to initialize widget: ${e.message}`,e.response)}}async submitFeedback(e){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(this.mock)return await new Promise(e=>setTimeout(e,500)),{success:!0,data:{id:"mock_post_"+Date.now(),title:e.title,content:e.content},message:"Feedback submitted successfully!"};const t={board:e.board_id||e.board||e.boardId,title:e.title,content:e.content,attachments:e.attachments||[]};try{return await this._makeRequest("/widget/feedback",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.submitFeedback(e);throw new n(t.status||500,`Failed to submit feedback: ${t.message}`,t.response)}}async getActiveSurveys(e={}){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(this.mock)return await new Promise(e=>setTimeout(e,200)),{success:!0,data:a};try{const t=new URLSearchParams,n=e.url||("undefined"!=typeof window?window.location.href:"");n&&t.append("url",n);const s=this._getDeviceInfo();s.device&&t.append("device",s.device),s.browser&&t.append("browser",s.browser),s.os&&t.append("os",s.os),e.userProperties&&t.append("user_properties",JSON.stringify(e.userProperties));const i="/widget/surveys/active"+(t.toString()?"?"+t.toString():"");return await this._makeRequest(i,{method:"GET",headers:{Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.getActiveSurveys(e);throw new n(t.status||500,`Failed to get active surveys: ${t.message}`,t.response)}}_getDeviceInfo(){if("undefined"==typeof navigator)return{device:null,browser:null,os:null};const e=navigator.userAgent;let t="desktop";/Mobi|Android/i.test(e)&&(t=/Tablet|iPad/i.test(e)?"tablet":"mobile");let n="unknown";e.includes("Firefox")?n="firefox":e.includes("Edg")?n="edge":e.includes("Chrome")?n="chrome":e.includes("Safari")?n="safari":(e.includes("Opera")||e.includes("OPR"))&&(n="opera");let s="unknown";return e.includes("Windows")?s="windows":e.includes("Mac")?s="macos":e.includes("Linux")?s="linux":e.includes("Android")?s="android":(e.includes("iPhone")||e.includes("iPad"))&&(s="ios"),{device:t,browser:n,os:s}}async submitSurveyResponse(e,t){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(!e)throw new n(400,"Survey ID is required");if(this.mock)return await new Promise(e=>setTimeout(e,300)),{success:!0,data:{id:"mock_response_"+Date.now(),survey_id:e,...t},message:"Survey response submitted successfully!"};const s={rating:t.rating,feedback:t.feedback||"",answers:t.answers||{}};try{return await this._makeRequest(`/widget/surveys/${e}/responses`,{method:"POST",body:JSON.stringify(s),headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.sessionToken}`}})}catch(s){if(401===s.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.submitSurveyResponse(e,t);throw new n(s.status||500,`Failed to submit survey response: ${s.message}`,s.response)}}async dismissSurvey(e){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(!e)throw new n(400,"Survey ID is required");if(this.mock)return await new Promise(e=>setTimeout(e,100)),{success:!0,message:"Survey dismissed successfully"};try{return await this._makeRequest(`/widget/surveys/${e}/dismiss`,{method:"POST",headers:{Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.dismissSurvey(e);throw new n(t.status||500,`Failed to dismiss survey: ${t.message}`,t.response)}}isSessionValid(){return this.sessionToken&&this.sessionExpiry&&new Date<this.sessionExpiry}setUserContext(e){this.userContext=e,"undefined"!=typeof localStorage&&localStorage.setItem("feedbackSDK_userContext",JSON.stringify(e))}getUserContext(){return this.userContext}clearSession(){this.sessionToken=null,this.sessionExpiry=null,"undefined"!=typeof localStorage&&(localStorage.removeItem("feedbackSDK_session"),localStorage.removeItem("feedbackSDK_userContext"))}_storeSession(){if("undefined"!=typeof localStorage)try{const e={token:this.sessionToken,expiry:this.sessionExpiry.toISOString(),workspace:this.workspace};localStorage.setItem("feedbackSDK_session",JSON.stringify(e))}catch(e){}}_loadStoredSession(){if("undefined"==typeof localStorage)return!1;try{const e=localStorage.getItem("feedbackSDK_session");if(!e)return!1;const t=JSON.parse(e);return this.sessionToken=t.token,this.sessionExpiry=new Date(t.expiry),this.isSessionValid()}catch(e){return!1}}async _makeRequest(e,t={}){const s=`${this.baseURL}${e}`;try{const e=await fetch(s,t);if(!e.ok){let t=`HTTP ${e.status}`,s=null;try{s=await e.json(),t=s.message||s.error||t}catch(n){t=await e.text()||t}throw new n(e.status,t,s)}const i=e.headers.get("content-type");return i&&i.includes("application/json")?await e.json():await e.text()}catch(e){if(e instanceof n)throw e;throw new n(0,e.message,null)}}}class d{constructor(){this.events=new Map}on(e,t){return this.events.has(e)||this.events.set(e,[]),this.events.get(e).push(t),()=>this.off(e,t)}off(e,t){const n=this.events.get(e);if(n){const e=n.indexOf(t);e>-1&&n.splice(e,1)}}emit(e,t){const n=this.events.get(e);n&&n.forEach(e=>{try{e(t)}catch(e){console.error("[FeedbackSDK] Event callback error:",e)}})}once(e,t){const n=this.on(e,e=>{t(e),n()});return n}clear(){this.events.clear()}getListenerCount(e){const t=this.events.get(e);return t?t.length:0}}function h(e="feedback"){return`${e}_${Date.now()}_${Math.random().toString(36).substring(2,9)}`}function m(e,t){const n={...e};for(const s in t)t.hasOwnProperty(s)&&(t[s]&&"object"==typeof t[s]&&!Array.isArray(t[s])?n[s]=m(e[s]||{},t[s]):n[s]=t[s]);return n}function g(){return"undefined"!=typeof window&&"undefined"!=typeof document}var p=Object.freeze({__proto__:null,debounce:function(e,t){let n;return function(...s){clearTimeout(n),n=setTimeout(()=>{clearTimeout(n),e(...s)},t)}},deepMerge:m,delay:function(e){return new Promise(t=>setTimeout(t,e))},escapeRegex:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},formatFileSize:function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]},generateId:h,getBrowserInfo:function(){return{userAgent:navigator.userAgent,platform:navigator.platform,language:navigator.language||navigator.userLanguage,cookieEnabled:navigator.cookieEnabled,screenResolution:`${screen.width}x${screen.height}`,windowSize:`${window.innerWidth}x${window.innerHeight}`,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone}},getCSSProperty:function(e,t,n=""){if(!e||!t)return n;try{return window.getComputedStyle(e).getPropertyValue(t)||n}catch(e){return n}},getCurrentTimestamp:function(){return(new Date).toISOString()},getNestedProperty:function(e,t,n=void 0){if(!e||!t)return n;const s=t.split(".");let i=e;for(const e of s){if(null==i||!(e in i))return n;i=i[e]}return i},isBrowser:g,isInViewport:function(e){if(!e)return!1;const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)},isMobile:function(){return!!g()&&(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||window.innerWidth<=768)},isValidEmail:function(e){return!(!e||"string"!=typeof e)&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim())},safeJsonParse:function(e,t=null){try{return JSON.parse(e)}catch(e){return t}},sanitizeHTML:function(e){if(!e||"string"!=typeof e)return"";const t=document.createElement("div");return t.textContent=e,t.innerHTML},scrollToElement:function(e,t={}){if(!e)return;e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest",...t})},setNestedProperty:function(e,t,n){if(!e||!t)return e;const s=t.split("."),i=s.pop();let r=e;for(const e of s)e in r&&"object"==typeof r[e]||(r[e]={}),r=r[e];return r[i]=n,e},throttle:function(e,t){let n,s;return function(...i){s?(clearTimeout(n),n=setTimeout(()=>{Date.now()-s>=t&&(e(...i),s=Date.now())},t-(Date.now()-s))):(e(...i),s=Date.now())}},validateConfig:function(e,t=[]){const n=[];for(const s of t)e[s]||n.push(s);if(n.length>0)throw new Error(`Missing required configuration: ${n.join(", ")}`);return!0}});class u{constructor(e={}){this.id=e.id,this.sdk=e.sdk,this.apiService=e.apiService,this.type=e.type||"base",this.options={container:null,position:this.sdk.config.position,boardId:this.sdk.config.boardId,displayMode:e.displayMode||"panel",size:e.size||"medium",primaryColor:e.primaryColor||"#21244A",backgroundColor:e.backgroundColor||"#ffffff",textColor:e.textColor||"#1F2937",autoShow:!1,showBackdrop:!0,customStyles:{},...e},this.element=null,this.panelElement=null,this.backdropElement=null,this.mounted=!1,this.destroyed=!1,this.state={isOpen:!1,isLoading:!1,isSubmitting:!1,title:"",content:"",email:"",attachments:[],errors:{}},this._bindMethods()}mount(e){return this.mounted||this.destroyed||("string"==typeof e&&(e=document.querySelector(e)),e||(e=document.body),this.container=e,this.element=this._render(),this.container.appendChild(this.element),this.mounted=!0,this._attachEvents(),this.onMount(),this.options.autoShow&&this.show(),this.sdk.eventBus.emit("widget:mounted",{widget:this})),this}show(){return this.element&&(this.element.style.display="block"),this}hide(){return this.element&&(this.element.style.display="none"),this}openPanel(){this.state.isOpen=!0,"modal"===this.options.displayMode?(this._showLoadingModal(),setTimeout(()=>{this._hideLoadingModal(),this._renderPanel(),requestAnimationFrame(()=>{this.panelElement&&this.panelElement.classList.add("open"),this.backdropElement&&this.backdropElement.classList.add("show")})},600)):(this._renderPanel(),requestAnimationFrame(()=>{this.panelElement&&this.panelElement.classList.add("open"),this.backdropElement&&this.backdropElement.classList.add("show")}))}_showLoadingModal(){this.state.isLoading=!0,this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-panel-backdrop",document.body.appendChild(this.backdropElement),this.loadingElement=document.createElement("div"),this.loadingElement.className=`feedback-loading-modal theme-${this.options.theme}`,this.loadingElement.innerHTML='\n\t\t\t<div class="feedback-loading-spinner"></div>\n\t\t',document.body.appendChild(this.loadingElement),requestAnimationFrame(()=>{this.backdropElement.classList.add("show"),this.loadingElement.classList.add("show")})}_hideLoadingModal(){this.state.isLoading=!1,this.loadingElement&&(this.loadingElement.remove(),this.loadingElement=null)}closePanel(){this.panelElement&&this.panelElement.classList.remove("open"),this.backdropElement&&this.backdropElement.classList.remove("show"),setTimeout(()=>{this.state.isOpen=!1,this.panelElement&&this.panelElement.parentNode&&(this.panelElement.parentNode.removeChild(this.panelElement),this.panelElement=null),this.backdropElement&&this.backdropElement.parentNode&&(this.backdropElement.parentNode.removeChild(this.backdropElement),this.backdropElement=null),this._resetForm()},300)}async submitFeedback(){if(!this.state.isSubmitting){this._hideError();try{this.state.isSubmitting=!0,this._updateSubmitButton();const e={title:this.state.title||"Feedback",content:this.state.content,email:this.state.email,board_id:this.options.boardId,attachments:this.state.attachments};if(!this.state.content.trim())return void this._showError("Please enter your feedback message.");const t=await this.apiService.submitFeedback(e);this._showSuccessMessage(),this.closePanel(),this.sdk.eventBus.emit("feedback:submitted",{widget:this,feedback:t})}catch(e){this._showError("Failed to submit feedback. Please try again."),this.sdk.eventBus.emit("feedback:error",{widget:this,error:e})}finally{this.state.isSubmitting=!1,this._updateSubmitButton()}}}handleConfigUpdate(e){this.options.theme=e.theme,this.element&&this._updateTheme()}destroy(){this.destroyed||(this.onDestroy(),this.closePanel(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element),this.destroyed=!0,this.mounted=!1,this.sdk.eventBus.emit("widget:destroyed",{widget:this}))}onMount(){}onDestroy(){}_render(){throw new Error("_render() must be implemented by concrete widget")}_attachEvents(){}_bindMethods(){this.openPanel=this.openPanel.bind(this),this.closePanel=this.closePanel.bind(this),this.submitFeedback=this.submitFeedback.bind(this)}_renderPanel(){if(this.panelElement)return;this.options.showBackdrop&&!this.backdropElement&&(this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-panel-backdrop",document.body.appendChild(this.backdropElement),this.backdropElement.addEventListener("click",this.closePanel));const e="modal"===this.options.displayMode?"feedback-modal":"feedback-panel",t=`size-${this.options.size}`;this.panelElement=document.createElement("div"),this.panelElement.className=`${e} ${t}`,this.panelElement.style.setProperty("--primary-color",this.options.primaryColor),this.panelElement.style.setProperty("--bg-color",this.options.backgroundColor),this.panelElement.style.setProperty("--text-color",this.options.textColor),this.panelElement.innerHTML=this._getPanelHTML(),document.body.appendChild(this.panelElement),this._attachPanelEvents();const n=this.panelElement.querySelector("input, textarea");n&&setTimeout(()=>n.focus(),350)}_getPanelHTML(){return`\n <div class="feedback-panel-content">\n <div class="feedback-panel-header">\n <h3>Send Feedback</h3>\n <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>\n </div>\n <div class="feedback-panel-body">\n <form class="feedback-form">\n <div class="feedback-form-group">\n <label for="feedback-title-${this.id}">Title (optional)</label>\n <input \n type="text" \n id="feedback-title-${this.id}" \n name="title" \n placeholder="Brief description of your feedback"\n value="${this.state.title}"\n />\n </div>\n <div class="feedback-form-group">\n <label for="feedback-content-${this.id}">Message *</label>\n <textarea \n id="feedback-content-${this.id}" \n name="content" \n placeholder="Tell us what you think..."\n required\n >${this.state.content}</textarea>\n </div>\n <div class="feedback-error" role="alert"></div>\n <div class="feedback-form-actions">\n <button type="submit" class="feedback-btn feedback-btn-submit">\n ${this.state.isSubmitting?"Sending...":"Send Feedback"}\n </button>\n </div>\n </form>\n </div>\n </div>\n `}_attachPanelEvents(){const e=this.panelElement;e.querySelector(".feedback-panel-close").addEventListener("click",this.closePanel);e.querySelector(".feedback-form").addEventListener("submit",e=>{e.preventDefault(),this.submitFeedback()}),e.querySelector('input[name="title"]').addEventListener("input",e=>{this.state.title=e.target.value}),e.querySelector('textarea[name="content"]').addEventListener("input",e=>{this.state.content=e.target.value});const t=e=>{"Escape"===e.key&&(this.closePanel(),document.removeEventListener("keydown",t))};document.addEventListener("keydown",t)}_updateSubmitButton(){if(this.panelElement){const e=this.panelElement.querySelector(".feedback-btn-submit");e&&(e.textContent=this.state.isSubmitting?"Sending...":"Send Feedback",e.disabled=this.state.isSubmitting)}}_showError(e){if(this.panelElement){const t=this.panelElement.querySelector(".feedback-error");t&&(t.textContent=e,t.classList.add("show"))}}_hideError(){if(this.panelElement){const e=this.panelElement.querySelector(".feedback-error");e&&e.classList.remove("show")}}_showSuccessMessage(){const e=document.createElement("div");e.className="feedback-success-notification",e.innerHTML='\n <div class="feedback-success-content">\n <div class="feedback-success-icon">✓</div>\n <span>Feedback submitted successfully!</span>\n <button class="feedback-success-close" aria-label="Close">&times;</button>\n </div>\n ',document.body.appendChild(e);const t=()=>{e.parentNode&&(e.style.opacity="0",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},300))};e.querySelector(".feedback-success-close").addEventListener("click",t),setTimeout(t,4e3)}_resetForm(){this.state.title="",this.state.content="",this.state.email="",this.state.errors={}}_updateTheme(){this.element&&(this.element.className=this.element.className.replace(/theme-\w+/,`theme-${this.options.theme}`)),this.panelElement&&(this.panelElement.className=this.panelElement.className.replace(/theme-\w+/,`theme-${this.options.theme}`))}openModal(){this.openPanel()}closeModal(){this.closePanel()}}class f extends u{constructor(e){super({...e,type:"button"}),this.isMinimized=!1}_render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`,e.innerHTML='\n <button class="feedback-trigger-btn" type="button">\n <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">\n <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"/>\n </svg>\n <span class="feedback-text">Feedback</span>\n \n <div class="feedback-minimize-icon">\n <svg viewBox="0 0 256 256">\n <path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"/>\n </svg>\n </div>\n \n <div class="feedback-expand-icon">\n <svg viewBox="0 0 256 256">\n <path d="M112,40V64.69L61.66,14.34A8,8,0,0,0,50.34,25.66L100.69,76H72a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V36A8,8,0,0,0,112,40Zm131.06,70.61a8,8,0,0,0-8.72,1.73L184,162.69V136a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8h48a8,8,0,0,0,0-16H195.31l50.35-50.34A8,8,0,0,0,243.06,110.61Z"/>\n </svg>\n </div>\n </button>\n ',this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}_attachEvents(){const e=this.element.querySelector(".feedback-trigger-btn");this.element.querySelector(".feedback-minimize-icon"),this.element.querySelector(".feedback-expand-icon"),e.addEventListener("click",e=>{const t=e.target.closest(".feedback-minimize-icon"),n=e.target.closest(".feedback-expand-icon");t?(e.stopPropagation(),this.minimize()):n?(e.stopPropagation(),this.restore()):this.isMinimized||this.openPanel()}),e.addEventListener("mouseenter",()=>{this.state.isSubmitting||this.isMinimized||(e.style.transform="translateY(-2px)")}),e.addEventListener("mouseleave",()=>{this.isMinimized||(e.style.transform="translateY(0)")})}minimize(){this.isMinimized=!0,this.element.classList.add("minimized")}restore(){this.isMinimized=!1,this.element.classList.remove("minimized")}mount(e){super.mount(e)}updateText(e){const t=this.element?.querySelector(".feedback-text");t&&(t.textContent=e)}updatePosition(e){this.options.position=e,this.element&&(this.element.className=this.element.className.replace(/position-\w+-\w+/,`position-${e}`))}}class b extends u{constructor(e){super({...e,type:"inline"})}_render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-inline theme-${this.options.theme}`,e.innerHTML=`\n <div class="feedback-inline-content">\n <h3>Send us your feedback</h3>\n <form class="feedback-inline-form">\n <div class="feedback-form-group">\n <input \n type="text" \n name="title" \n placeholder="Title (optional)"\n value="${this.state.title}"\n />\n </div>\n <div class="feedback-form-group">\n <textarea \n name="content" \n placeholder="Your feedback..."\n required\n >${this.state.content}</textarea>\n </div>\n <div class="feedback-form-group">\n <input \n type="email" \n name="email" \n placeholder="Email (optional)"\n value="${this.state.email}"\n />\n </div>\n <button type="submit" class="feedback-btn feedback-btn-submit">\n Send Feedback\n </button>\n <div class="feedback-error" style="display: none;"></div>\n </form>\n </div>\n `,this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}_attachEvents(){const e=this.element.querySelector(".feedback-inline-form");e.addEventListener("submit",e=>{e.preventDefault(),this.submitFeedback()}),e.querySelector('input[name="title"]').addEventListener("input",e=>{this.state.title=e.target.value}),e.querySelector('textarea[name="content"]').addEventListener("input",e=>{this.state.content=e.target.value}),e.querySelector('input[name="email"]').addEventListener("input",e=>{this.state.email=e.target.value})}openModal(){const e=this.element.querySelector('textarea[name="content"]');e&&e.focus()}closeModal(){}_showSuccessMessage(){const e=this.element.querySelector(".feedback-inline-content"),t=e.innerHTML;e.innerHTML='\n <div class="feedback-success">\n <div class="feedback-success-icon">✓</div>\n <h3>Thank you!</h3>\n <p>Your feedback has been submitted successfully.</p>\n <button class="feedback-btn feedback-btn-reset">Send Another</button>\n </div>\n ';e.querySelector(".feedback-btn-reset").addEventListener("click",()=>{e.innerHTML=t,this._attachEvents(),this._resetForm()})}_showError(e){const t=this.element.querySelector(".feedback-error");t&&(t.textContent=e,t.style.display="block",setTimeout(()=>{t&&(t.style.display="none")},5e3))}_updateSubmitButton(){const e=this.element.querySelector(".feedback-btn-submit");e&&(e.textContent=this.state.isSubmitting?"Sending...":"Send Feedback",e.disabled=this.state.isSubmitting)}updateTitle(e){const t=this.element?.querySelector("h3");t&&(t.textContent=e)}setPlaceholder(e,t){const n=this.element?.querySelector(`[name="${e}"]`);n&&(n.placeholder=t)}}class v{constructor(e={}){this.currentView="home",this.isOpen=!1,this.unreadCount=0,this.activeConversationId=null,this.conversations=[],this.messages={},this.helpArticles=[],this.helpSearchQuery="",this.homeChangelogItems=[],this.changelogItems=[],this.teamName=e.teamName||"Support",this.teamAvatars=e.teamAvatars||[],this.welcomeMessage=e.welcomeMessage||"How can we help?",this.userContext=e.userContext||null,this.enableHelp=!1!==e.enableHelp,this.enableChangelog=!1!==e.enableChangelog,this._listeners=new Set}subscribe(e){return this._listeners.add(e),()=>this._listeners.delete(e)}_notify(e,t){this._listeners.forEach(n=>n(e,t,this))}setView(e){const t=this.currentView;this.currentView=e,this._notify("viewChange",{previousView:t,currentView:e})}setOpen(e){this.isOpen=e,this._notify("openChange",{isOpen:e})}setActiveConversation(e){this.activeConversationId=e,this._notify("conversationChange",{conversationId:e})}setConversations(e){this.conversations=e,this._updateUnreadCount(),this._notify("conversationsUpdate",{conversations:e})}addConversation(e){this.conversations.unshift(e),this._updateUnreadCount(),this._notify("conversationAdded",{conversation:e})}setMessages(e,t){this.messages[e]=t,this._notify("messagesUpdate",{conversationId:e,messages:t})}addMessage(e,t){this.messages[e]||(this.messages[e]=[]),this.messages[e].push(t);const n=this.conversations.find(t=>t.id===e);n&&(n.lastMessage=t.content,n.lastMessageTime=t.timestamp,t.isOwn||(n.unread=(n.unread||0)+1,this._updateUnreadCount())),this._notify("messageAdded",{conversationId:e,message:t})}markAsRead(e){const t=this.conversations.find(t=>t.id===e);t&&t.unread>0&&(t.unread=0,this._updateUnreadCount(),this._notify("conversationRead",{conversationId:e}))}_updateUnreadCount(){this.unreadCount=this.conversations.reduce((e,t)=>e+(t.unread||0),0),this._notify("unreadCountChange",{count:this.unreadCount})}setHelpArticles(e){this.helpArticles=e,this._notify("helpArticlesUpdate",{articles:e})}setHelpSearchQuery(e){this.helpSearchQuery=e,this._notify("helpSearchChange",{query:e})}setHomeChangelogItems(e){this.homeChangelogItems=e,this._notify("homeChangelogUpdate",{items:e})}setChangelogItems(e){this.changelogItems=e,this._notify("changelogUpdate",{items:e})}getActiveConversation(){return this.conversations.find(e=>e.id===this.activeConversationId)}getActiveMessages(){return this.messages[this.activeConversationId]||[]}getFilteredHelpArticles(){if(!this.helpSearchQuery)return this.helpArticles;const e=this.helpSearchQuery.toLowerCase();return this.helpArticles.filter(t=>t.title.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e))}reset(){this.currentView="home",this.activeConversationId=null,this.helpSearchQuery="",this._notify("reset",{})}}class y{constructor(e,t={}){this.state=e,this.options={position:t.position||"bottom-right",primaryColor:t.primaryColor||"#1c1c1e",...t},this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className=`messenger-launcher messenger-launcher-${this.options.position}`,this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe((e,t)=>{"openChange"===e&&this._updateIcon(),"unreadCountChange"===e&&this._updateBadge()}),this.element}_updateContent(){const e=this.state.unreadCount>0?`<span class="messenger-launcher-badge">${this.state.unreadCount>9?"9+":this.state.unreadCount}</span>`:"";this.element.innerHTML=`\n\t\t\t<button class="messenger-launcher-btn" aria-label="Open messenger" style="background: ${this.options.primaryColor};">\n\t\t\t\t<span class="messenger-launcher-icon messenger-launcher-icon-chat">\n\t\t\t\t\t<i class="ph ph-chat-circle-dots" style="font-size: 24px;"></i>\n\t\t\t\t</span>\n\t\t\t\t<span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 24px;"></i>\n\t\t\t\t</span>\n\t\t\t\t${e}\n\t\t\t</button>\n\t\t`}_attachEvents(){this.element.querySelector(".messenger-launcher-btn").addEventListener("click",()=>{this.state.setOpen(!this.state.isOpen)})}_updateIcon(){const e=this.element.querySelector(".messenger-launcher-icon-chat"),t=this.element.querySelector(".messenger-launcher-icon-close");this.state.isOpen?(e.style.display="none",t.style.display="flex",this.element.classList.add("messenger-launcher-open")):(e.style.display="flex",t.style.display="none",this.element.classList.remove("messenger-launcher-open"))}_updateBadge(){const e=this.element.querySelector(".messenger-launcher-badge");if(e&&e.remove(),this.state.unreadCount>0&&!this.state.isOpen){const e=document.createElement("span");e.className="messenger-launcher-badge",e.textContent=this.state.unreadCount>9?"9+":this.state.unreadCount,this.element.querySelector(".messenger-launcher-btn").appendChild(e)}}show(){this.element&&(this.element.style.display="block")}hide(){this.element&&(this.element.style.display="none")}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class x{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-nav",this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe(e=>{"viewChange"!==e&&"unreadCountChange"!==e||this._updateActiveTab()}),this.element}_getTabs(){const e=[{id:"home",label:"Home",icon:this._getHomeIcon()},{id:"messages",label:"Messages",icon:this._getMessagesIcon(),badge:this.state.unreadCount}];return this.state.enableHelp&&e.push({id:"help",label:"Help",icon:this._getHelpIcon()}),this.state.enableChangelog&&e.push({id:"changelog",label:"Changelog",icon:this._getChangelogIcon()}),e}_updateContent(){const e=this._getTabs().map(e=>{const t=this.state.currentView===e.id,n=e.badge&&e.badge>0?`<span class="messenger-nav-badge">${e.badge>9?"9+":e.badge}</span>`:"";return`\n\t\t\t\t<button class="messenger-nav-tab ${t?"active":""}" data-tab="${e.id}">\n\t\t\t\t\t<span class="messenger-nav-icon">${e.icon}</span>\n\t\t\t\t\t<span class="messenger-nav-label">${e.label}</span>\n\t\t\t\t\t${n}\n\t\t\t\t</button>\n\t\t\t`}).join("");this.element.innerHTML=e}_attachEvents(){this.element.addEventListener("click",e=>{const t=e.target.closest(".messenger-nav-tab");if(t){const e=t.dataset.tab;this.state.setView(e)}})}_updateActiveTab(){this.element.querySelectorAll(".messenger-nav-tab").forEach(e=>{const t=e.dataset.tab===this.state.currentView;if(e.classList.toggle("active",t),"messages"===e.dataset.tab){const t=e.querySelector(".messenger-nav-badge");if(t&&t.remove(),this.state.unreadCount>0){const t=document.createElement("span");t.className="messenger-nav-badge",t.textContent=this.state.unreadCount>9?"9+":this.state.unreadCount,e.appendChild(t)}}})}_getHomeIcon(){return'<i class="ph-duotone ph-house-simple" style="font-size: 24px;"></i>'}_getMessagesIcon(){return'<i class="ph-duotone ph-chat" style="font-size: 24px;"></i>'}_getHelpIcon(){return'<i class="ph-duotone ph-question" style="font-size: 24px;"></i>'}_getChangelogIcon(){return'<i class="ph-duotone ph-megaphone" style="font-size: 24px;"></i>'}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class w{constructor(e,t={}){this.state=e,this.options={position:t.position||"bottom-right",theme:t.theme||"dark",...t},this.element=null,this.navigationTabs=null,this.currentViewComponent=null,this.viewRegistry={},this._unsubscribe=null}registerView(e,t){this.viewRegistry[e]=t}render(){this.element=document.createElement("div"),this.element.className=`messenger-panel messenger-panel-${this.options.position} theme-${this.options.theme}`,this.element.innerHTML='\n\t\t\t<div class="messenger-panel-content">\n\t\t\t\t<div class="messenger-panel-views"></div>\n\t\t\t\t<div class="messenger-panel-nav"></div>\n\t\t\t</div>\n\t\t',this.navigationTabs=new x(this.state,this.options);return this.element.querySelector(".messenger-panel-nav").appendChild(this.navigationTabs.render()),this._renderCurrentView(),this._unsubscribe=this.state.subscribe(e=>{"viewChange"===e&&this._renderCurrentView()}),this.element}_renderCurrentView(){const e=this.element.querySelector(".messenger-panel-views");this.currentViewComponent&&this.currentViewComponent.destroy&&this.currentViewComponent.destroy(),e.innerHTML="";const t=this.viewRegistry[this.state.currentView];t?(this.currentViewComponent=new t(this.state,this.options),e.appendChild(this.currentViewComponent.render())):e.innerHTML=`<div class="messenger-view-placeholder">View not found: ${this.state.currentView}</div>`}show(){this.element&&(this.element.style.display="block",requestAnimationFrame(()=>{this.element.classList.add("open")}))}hide(){this.element&&(this.element.classList.remove("open"),setTimeout(()=>{this.element&&(this.element.style.display="none")},300))}setHeader(e){const t=this.element.querySelector(".messenger-panel-header");t&&(t.innerHTML=e)}destroy(){this._unsubscribe&&this._unsubscribe(),this.navigationTabs&&this.navigationTabs.destroy(),this.currentViewComponent&&this.currentViewComponent.destroy&&this.currentViewComponent.destroy(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class k{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-changelog-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"changelogUpdate"===e&&this._updateChangelogList()}),this.element}_updateContent(){const e=this._renderTeamAvatars();this.element.innerHTML=`\n\t\t\t<div class="messenger-changelog-header">\n\t\t\t\t<h2>Changelog</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-changelog-subheader">\n\t\t\t\t<span class="messenger-changelog-latest">Latest</span>\n\t\t\t\t<div class="messenger-changelog-team">\n\t\t\t\t\t<span>From ${this.state.teamName}</span>\n\t\t\t\t\t${e}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-changelog-body">\n\t\t\t\t<div class="messenger-changelog-list"></div>\n\t\t\t</div>\n\t\t`,this._updateChangelogList(),this._attachEvents()}_updateChangelogList(){const e=this.element.querySelector(".messenger-changelog-list"),t=this.state.changelogItems;0!==t.length?(e.innerHTML=t.map(e=>this._renderChangelogCard(e)).join(""),this._attachChangelogEvents()):e.innerHTML=this._renderEmptyState()}_renderChangelogCard(e){const t=e.tags&&e.tags.length>0?`<div class="messenger-changelog-tags">\n\t\t\t\t${e.tags.map(e=>`<span class="messenger-changelog-tag">${e}</span>`).join("")}\n\t\t\t</div>`:"",n=this._formatDate(e.publishedAt||e.date);return`\n\t\t\t<div class="messenger-changelog-card" data-changelog-id="${e.id}">\n\t\t\t\t${e.coverImage?`\n\t\t\t\t\t<div class="messenger-changelog-cover">\n\t\t\t\t\t\t<img src="${e.coverImage}" alt="${e.title}" onerror="this.style.display='none';" />\n\t\t\t\t\t</div>\n\t\t\t\t`:""}\n\t\t\t\t<div class="messenger-changelog-content">\n\t\t\t\t\t${t}\n\t\t\t\t\t<h3 class="messenger-changelog-title">${e.title}</h3>\n\t\t\t\t\t${e.description?`<p class="messenger-changelog-description">${this._truncateText(e.description,100)}</p>`:""}\n\t\t\t\t\t<div class="messenger-changelog-meta">\n\t\t\t\t\t\t<span class="messenger-changelog-date">${n}</span>\n\t\t\t\t\t\t<i class="ph ph-caret-right messenger-changelog-arrow" style="font-size: 16px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderTeamAvatars(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack messenger-avatar-stack-tiny">\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-tiny" style="background: #5856d6;">S</div>\n\t\t\t\t</div>\n\t\t\t';const t=["#5856d6","#007aff","#34c759"];return`<div class="messenger-avatar-stack messenger-avatar-stack-tiny">${e.slice(0,2).map((e,n)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar messenger-avatar-tiny" src="${e}" alt="Team member" style="z-index: ${2-n};" />`:`<div class="messenger-avatar messenger-avatar-tiny" style="background: ${t[n%t.length]}; z-index: ${2-n};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_renderEmptyState(){return'\n\t\t\t<div class="messenger-changelog-empty">\n\t\t\t\t<div class="messenger-changelog-empty-icon">\n\t\t\t\t\t<i class="ph ph-megaphone" style="font-size: 48px;"></i>\n\t\t\t\t</div>\n\t\t\t\t<h3>No changelog yet</h3>\n\t\t\t\t<p>Check back later for updates</p>\n\t\t\t</div>\n\t\t'}_formatDate(e){if(!e)return"";return new Date(e).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})}_truncateText(e,t){return e?e.length<=t?e:e.substring(0,t).trim()+"...":""}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)}),this._attachChangelogEvents()}_attachChangelogEvents(){this.element.querySelectorAll(".messenger-changelog-card").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.changelogId,n=this.state.changelogItems.find(e=>e.id===t);n&&n.url?window.open(n.url,"_blank"):this.options.onChangelogClick&&this.options.onChangelogClick(n)})})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class S{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-chat-view",this._updateContent(),this._unsubscribe=this.state.subscribe((e,t)=>{"messageAdded"===e&&t.conversationId===this.state.activeConversationId&&(this._appendMessage(t.message),this._scrollToBottom())}),this.element}_updateContent(){const e=this.state.getActiveConversation(),t=this.state.getActiveMessages(),n=0===t.length?this._renderEmptyState():t.map(e=>this._renderMessage(e)).join(""),s=this._renderConversationAvatar(e);this.element.innerHTML=`\n\t\t\t<div class="messenger-chat-header">\n\t\t\t\t<button class="messenger-back-btn" aria-label="Back">\n\t\t\t\t\t<i class="ph ph-caret-left" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t\t<div class="messenger-chat-header-info">\n\t\t\t\t\t${s}\n\t\t\t\t\t<span class="messenger-chat-title">${e?.title||"Chat with team"}</span>\n\t\t\t\t</div>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-chat-messages">\n\t\t\t\t${n}\n\t\t\t</div>\n\n\t\t\t<div class="messenger-chat-compose">\n\t\t\t\t<div class="messenger-compose-input-wrapper">\n\t\t\t\t\t<textarea class="messenger-compose-input" placeholder="Write a message..." rows="1"></textarea>\n\t\t\t\t</div>\n\t\t\t\t<button class="messenger-compose-send" aria-label="Send" disabled>\n\t\t\t\t\t<i class="ph ph-paper-plane-tilt" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t`,this._attachEvents(),this._scrollToBottom()}_renderEmptyState(){return`\n\t\t\t<div class="messenger-chat-empty">\n\t\t\t\t<div class="messenger-chat-empty-avatars">${this._renderTeamAvatars()}</div>\n\t\t\t\t<h3>Start the conversation</h3>\n\t\t\t\t<p>Send us a message and we'll get back to you as soon as possible.</p>\n\t\t\t</div>\n\t\t`}_renderMessage(e){const t=e.isOwn,n=t?"messenger-message-own":"messenger-message-received",s=this._formatMessageTime(e.timestamp);if(t)return`\n\t\t\t\t<div class="messenger-message ${n}">\n\t\t\t\t\t<div class="messenger-message-bubble">\n\t\t\t\t\t\t<div class="messenger-message-content">${this._formatMessageContent(e.content)}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-message-time">${s}</div>\n\t\t\t\t</div>\n\t\t\t`;return`\n\t\t\t<div class="messenger-message ${n}">\n\t\t\t\t<div class="messenger-message-avatar">${this._renderSenderAvatar(e.sender)}</div>\n\t\t\t\t<div class="messenger-message-wrapper">\n\t\t\t\t\t<div class="messenger-message-sender">${e.sender?.name||"Support"}</div>\n\t\t\t\t\t<div class="messenger-message-bubble">\n\t\t\t\t\t\t<div class="messenger-message-content">${this._formatMessageContent(e.content)}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-message-time">${s}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderSenderAvatar(e){if(e?.avatarUrl)return`<img class="messenger-avatar messenger-avatar-small" src="${e.avatarUrl}" alt="${e.name}" />`;return`<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(e?.name||"S").charAt(0).toUpperCase()}</div>`}_renderConversationAvatar(e){if(!e?.participants?.length)return'<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>';const t=e.participants[0];return t.avatarUrl?`<img class="messenger-avatar messenger-avatar-small" src="${t.avatarUrl}" alt="${t.name}" />`:`<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(t.name||"S").charAt(0).toUpperCase()}</div>`}_renderTeamAvatars(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack">\n\t\t\t\t\t<div class="messenger-avatar" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return`<div class="messenger-avatar-stack">${e.slice(0,3).map((e,n)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar" src="${e}" alt="Team member" style="z-index: ${3-n};" />`:`<div class="messenger-avatar" style="background: ${t[n%t.length]}; z-index: ${3-n};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_formatMessageTime(e){if(!e)return"";return new Date(e).toLocaleTimeString("en-US",{hour:"numeric",minute:"2-digit",hour12:!0})}_formatMessageContent(e){return e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n/g,"<br>"):""}_appendMessage(e){const t=this.element.querySelector(".messenger-chat-messages"),n=t.querySelector(".messenger-chat-empty");n&&n.remove();const s=this._renderMessage(e),i=document.createElement("div");i.innerHTML=s,t.appendChild(i.firstElementChild)}_scrollToBottom(){const e=this.element.querySelector(".messenger-chat-messages");e&&setTimeout(()=>{e.scrollTop=e.scrollHeight},50)}_attachEvents(){this.element.querySelector(".messenger-back-btn").addEventListener("click",()=>{this.state.setView("messages")}),this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)});const e=this.element.querySelector(".messenger-compose-input"),t=this.element.querySelector(".messenger-compose-send");e.addEventListener("input",()=>{e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px",t.disabled=!e.value.trim()}),e.addEventListener("keydown",e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),this._sendMessage())}),t.addEventListener("click",()=>{this._sendMessage()})}_sendMessage(){const e=this.element.querySelector(".messenger-compose-input"),t=e.value.trim();if(!t)return;const n={id:"msg_"+Date.now(),content:t,isOwn:!0,timestamp:(new Date).toISOString()};this.state.addMessage(this.state.activeConversationId,n),e.value="",e.style.height="auto",this.element.querySelector(".messenger-compose-send").disabled=!0,this.options.onSendMessage&&this.options.onSendMessage(this.state.activeConversationId,n)}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class C{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-conversations-view",this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe(e=>{"conversationsUpdate"!==e&&"conversationAdded"!==e&&"conversationRead"!==e||this._updateContent()}),this.element}_updateContent(){const e=this.state.conversations,t=this._renderAvatarStack();let n;n=0===e.length?'\n\t\t\t\t<div class="messenger-conversations-empty">\n\t\t\t\t\t<div class="messenger-conversations-empty-icon">\n\t\t\t\t\t\t<i class="ph ph-chat" style="font-size: 48px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h3>No conversations yet</h3>\n\t\t\t\t\t<p>Start a new conversation with our team</p>\n\t\t\t\t</div>\n\t\t\t':`\n\t\t\t\t<div class="messenger-conversations-list">\n\t\t\t\t\t${e.map(e=>this._renderConversationItem(e)).join("")}\n\t\t\t\t</div>\n\t\t\t`,this.element.innerHTML=`\n\t\t\t<div class="messenger-conversations-header">\n\t\t\t\t<h2>Messages</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-conversations-body">\n\t\t\t\t${n}\n\t\t\t</div>\n\n\t\t\t<div class="messenger-conversations-footer">\n\t\t\t\t<button class="messenger-new-message-btn">\n\t\t\t\t\t<div class="messenger-new-message-avatars">${t}</div>\n\t\t\t\t\t<span>Send us a message</span>\n\t\t\t\t\t<i class="ph ph-arrow-right" style="font-size: 16px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t`,this._attachEvents()}_renderConversationItem(e){const t=e.unread>0?"unread":"",n=this._formatTimeAgo(e.lastMessageTime),s=this._renderConversationAvatars(e.participants);return`\n\t\t\t<div class="messenger-conversation-item ${t}" data-conversation-id="${e.id}">\n\t\t\t\t<div class="messenger-conversation-avatars">\n\t\t\t\t\t${s}\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-conversation-content">\n\t\t\t\t\t<div class="messenger-conversation-header">\n\t\t\t\t\t\t<span class="messenger-conversation-title">${e.title||"Chat with team"}</span>\n\t\t\t\t\t\t<span class="messenger-conversation-time">${n}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-conversation-preview">\n\t\t\t\t\t\t${e.unread>0?'<span class="messenger-unread-dot"></span>':""}\n\t\t\t\t\t\t<span class="messenger-conversation-message">${this._truncateMessage(e.lastMessage)}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderConversationAvatars(e){if(!e||0===e.length)return'<div class="messenger-avatar messenger-avatar-medium" style="background: #5856d6;">S</div>';const t=e[0];return t.avatarUrl?`<img class="messenger-avatar messenger-avatar-medium" src="${t.avatarUrl}" alt="${t.name}" />`:`<div class="messenger-avatar messenger-avatar-medium" style="background: ${this._getAvatarColor(0)};">${(t.name||"S").charAt(0).toUpperCase()}</div>`}_renderAvatarStack(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack messenger-avatar-stack-small">\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-small" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';return`<div class="messenger-avatar-stack messenger-avatar-stack-small">${e.slice(0,2).map((e,t)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar messenger-avatar-small" src="${e}" alt="Team member" style="z-index: ${2-t};" />`:`<div class="messenger-avatar messenger-avatar-small" style="background: ${this._getAvatarColor(t)}; z-index: ${2-t};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_getAvatarColor(e){const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return t[e%t.length]}_formatTimeAgo(e){if(!e)return"";const t=new Date(e),n=new Date-t,s=Math.floor(n/6e4),i=Math.floor(n/36e5),r=Math.floor(n/864e5);return s<1?"now":s<60?`${s}m`:i<24?`${i}h`:r<7?`${r}d`:t.toLocaleDateString("en-US",{month:"short",day:"numeric"})}_truncateMessage(e){if(!e)return"No messages yet";return e.length<=50?e:e.substring(0,50)+"..."}_attachEvents(){const e=this.element.querySelector(".messenger-close-btn");e&&e.addEventListener("click",()=>{this.state.setOpen(!1)}),this.element.querySelectorAll(".messenger-conversation-item").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.conversationId;this.state.setActiveConversation(t),this.state.markAsRead(t),this.state.setView("chat")})});const t=this.element.querySelector(".messenger-new-message-btn");t&&t.addEventListener("click",()=>{this._startNewConversation()})}_startNewConversation(){const e={id:"conv_"+Date.now(),title:"New conversation",participants:[],lastMessage:null,lastMessageTime:(new Date).toISOString(),unread:0};this.state.addConversation(e),this.state.setActiveConversation(e.id),this.state.setView("chat")}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class _{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-help-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"helpArticlesUpdate"!==e&&"helpSearchChange"!==e||this._updateCollectionsList()}),this.element}_updateContent(){const e=this.state.helpSearchQuery||"",t=(this.state.helpArticles||[]).length;this.element.innerHTML=`\n\t\t\t<div class="messenger-help-header">\n\t\t\t\t<h2>Help</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-help-search">\n\t\t\t\t<div class="messenger-help-search-wrapper">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype="text"\n\t\t\t\t\t\tclass="messenger-help-search-input"\n\t\t\t\t\t\tplaceholder="Search for help"\n\t\t\t\t\t\tvalue="${e}"\n\t\t\t\t\t/>\n\t\t\t\t\t<i class="ph ph-magnifying-glass messenger-help-search-icon" style="font-size: 18px;"></i>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-help-body">\n\t\t\t\t<div class="messenger-help-collections-header">\n\t\t\t\t\t${t} collections\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-help-collections"></div>\n\t\t\t</div>\n\t\t`,this._updateCollectionsList(),this._attachEvents()}_updateCollectionsList(){const e=this.element.querySelector(".messenger-help-collections"),t=this.state.helpArticles||[],n=(this.state.helpSearchQuery||"").toLowerCase(),s=n?t.filter(e=>e.title.toLowerCase().includes(n)||e.description&&e.description.toLowerCase().includes(n)):t,i=this.element.querySelector(".messenger-help-collections-header");i&&(i.textContent=`${s.length} collections`),0!==s.length?(e.innerHTML=s.map(e=>this._renderCollectionItem(e)).join(""),this._attachCollectionEvents()):e.innerHTML=this._renderEmptyState()}_renderCollectionItem(e){const t=e.articleCount||0;return`\n\t\t\t<div class="messenger-help-collection" data-collection-id="${e.id}">\n\t\t\t\t<div class="messenger-help-collection-content">\n\t\t\t\t\t<h3 class="messenger-help-collection-title">${e.title}</h3>\n\t\t\t\t\t<p class="messenger-help-collection-desc">${e.description||""}</p>\n\t\t\t\t\t<span class="messenger-help-collection-count">${t} articles</span>\n\t\t\t\t</div>\n\t\t\t\t<i class="ph ph-caret-right messenger-help-collection-arrow" style="font-size: 20px;"></i>\n\t\t\t</div>\n\t\t`}_renderEmptyState(){return this.state.helpSearchQuery?'\n\t\t\t\t<div class="messenger-help-empty">\n\t\t\t\t\t<div class="messenger-help-empty-icon">\n\t\t\t\t\t\t<i class="ph ph-magnifying-glass" style="font-size: 48px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h3>No results found</h3>\n\t\t\t\t\t<p>Try a different search term</p>\n\t\t\t\t</div>\n\t\t\t':'\n\t\t\t<div class="messenger-help-empty">\n\t\t\t\t<div class="messenger-help-empty-icon">\n\t\t\t\t\t<i class="ph ph-question" style="font-size: 48px;"></i>\n\t\t\t\t</div>\n\t\t\t\t<h3>Help collections</h3>\n\t\t\t\t<p>No collections available yet</p>\n\t\t\t</div>\n\t\t'}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)});let e;this.element.querySelector(".messenger-help-search-input").addEventListener("input",t=>{clearTimeout(e),e=setTimeout(()=>{this.state.setHelpSearchQuery(t.target.value)},300)}),this._attachCollectionEvents()}_attachCollectionEvents(){this.element.querySelectorAll(".messenger-help-collection").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.collectionId,n=this.state.helpArticles.find(e=>e.id===t);n&&n.url?window.open(n.url,"_blank"):this.options.onArticleClick&&this.options.onArticleClick(n)})})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class E{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-home-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"homeChangelogUpdate"!==e&&"conversationsUpdate"!==e||this._updateContent()}),this.element}_updateContent(){const e=this._renderAvatarStack(),t=this._renderRecentChangelog();this.element.innerHTML=`\n\t\t\t<div class="messenger-home-header">\n\t\t\t\t<div class="messenger-home-header-top">\n\t\t\t\t\t<div class="messenger-home-logo">\n\t\t\t\t\t\t${this.options.logoUrl?`<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />`:""}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-home-avatars">${e}</div>\n\t\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-home-welcome">\n\t\t\t\t\t<span class="messenger-home-greeting">Hello there.</span>\n\t\t\t\t\t<span class="messenger-home-question">${this.state.welcomeMessage}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-home-body">\n\t\t\t\t<button class="messenger-home-message-btn">\n\t\t\t\t\t<span>Send us a message</span>\n\t\t\t\t\t<i class="ph ph-arrow-right" style="font-size: 16px;"></i>\n\t\t\t\t</button>\n\n\t\t\t\t${this._renderFeaturedCard()}\n\n\t\t\t\t${t}\n\t\t\t</div>\n\t\t`,this._attachEvents()}_renderAvatarStack(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack">\n\t\t\t\t\t<div class="messenger-avatar" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';return`<div class="messenger-avatar-stack">${e.slice(0,3).map((e,t)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar" src="${e}" alt="Team member" style="z-index: ${3-t};" />`:`<div class="messenger-avatar" style="background: ${this._getAvatarColor(t)}; z-index: ${3-t};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_getAvatarColor(e){const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return t[e%t.length]}_renderFeaturedCard(){if(!this.options.featuredContent)return"";const{title:e,description:t,imageUrl:n,action:s}=this.options.featuredContent;return`\n\t\t\t<div class="messenger-home-featured">\n\t\t\t\t${n?`<img src="${n}" alt="${e}" class="messenger-home-featured-image" onerror="this.style.display='none';" />`:""}\n\t\t\t\t<div class="messenger-home-featured-content">\n\t\t\t\t\t<h3>${e}</h3>\n\t\t\t\t\t<p>${t}</p>\n\t\t\t\t</div>\n\t\t\t\t${s?`<button class="messenger-home-featured-btn" data-action="${s.type}" data-value="${s.value}">${s.label}</button>`:""}\n\t\t\t</div>\n\t\t`}_renderRecentChangelog(){const e=this.state.homeChangelogItems;if(0===e.length)return"";return`\n\t\t\t<div class="messenger-home-changelog-section">\n\t\t\t\t${e.map(e=>`\n\t\t\t<div class="messenger-home-changelog-card" data-changelog-id="${e.id}">\n\t\t\t\t${e.coverImage?`\n\t\t\t\t\t<div class="messenger-home-changelog-cover">\n\t\t\t\t\t\t<img src="${e.coverImage}" alt="${e.title}" onerror="this.style.display='none';" />\n\t\t\t\t\t\t${e.coverText?`<span class="messenger-home-changelog-cover-text">${e.coverText}</span>`:""}\n\t\t\t\t\t</div>\n\t\t\t\t`:""}\n\t\t\t\t<div class="messenger-home-changelog-card-content">\n\t\t\t\t\t<h4 class="messenger-home-changelog-card-title">${e.title}</h4>\n\t\t\t\t\t<p class="messenger-home-changelog-card-desc">${e.description||""}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`).join("")}\n\t\t\t</div>\n\t\t`}_formatDate(e){if(!e)return"";const t=new Date(e),n=new Date,s=Math.floor((n-t)/864e5);return 0===s?"Today":1===s?"Yesterday":s<7?`${s}d ago`:t.toLocaleDateString("en-US",{month:"short",day:"numeric"})}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)}),this.element.querySelector(".messenger-home-message-btn").addEventListener("click",()=>{this.state.setView("messages")}),this.element.querySelectorAll(".messenger-home-changelog-item").forEach(e=>{e.addEventListener("click",()=>{this.state.setView("changelog")})});const e=this.element.querySelector(".messenger-home-changelog-all");e&&e.addEventListener("click",()=>{this.state.setView("changelog")});const t=this.element.querySelector(".messenger-home-featured-btn");t&&t.addEventListener("click",()=>{const e=t.dataset.action,n=t.dataset.value;"url"===e?window.open(n,"_blank"):"view"===e&&this.state.setView(n)})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class $ extends u{constructor(e){super({...e,type:"messenger"}),this.messengerOptions={position:e.position||"bottom-right",theme:e.theme||"light",teamName:e.teamName||"Support",teamAvatars:e.teamAvatars||[],welcomeMessage:e.welcomeMessage||"How can we help?",enableHelp:!1!==e.enableHelp,enableChangelog:!1!==e.enableChangelog,logoUrl:e.logoUrl||"https://feedback-sdk.product7.io/p7.png",featuredContent:e.featuredContent||null,primaryColor:e.primaryColor||"#1c1c1e",onSendMessage:e.onSendMessage||null,onArticleClick:e.onArticleClick||null,onChangelogClick:e.onChangelogClick||null},this.messengerState=new v({teamName:this.messengerOptions.teamName,teamAvatars:this.messengerOptions.teamAvatars,welcomeMessage:this.messengerOptions.welcomeMessage,enableHelp:this.messengerOptions.enableHelp,enableChangelog:this.messengerOptions.enableChangelog,userContext:this.sdk?.apiService?.getUserContext()||null}),this.launcher=null,this.panel=null,this._handleOpenChange=this._handleOpenChange.bind(this)}_render(){const e=document.createElement("div");return e.className=`messenger-widget theme-${this.messengerOptions.theme}`,e.style.zIndex="999999",this.launcher=new y(this.messengerState,{position:this.messengerOptions.position,primaryColor:this.messengerOptions.primaryColor}),e.appendChild(this.launcher.render()),this.panel=new w(this.messengerState,{position:this.messengerOptions.position,theme:this.messengerOptions.theme,primaryColor:this.messengerOptions.primaryColor,logoUrl:this.messengerOptions.logoUrl,featuredContent:this.messengerOptions.featuredContent,onSendMessage:this.messengerOptions.onSendMessage||this._handleSendMessage.bind(this),onArticleClick:this.messengerOptions.onArticleClick,onChangelogClick:this.messengerOptions.onChangelogClick}),this.panel.registerView("home",E),this.panel.registerView("messages",C),this.panel.registerView("chat",S),this.panel.registerView("help",_),this.panel.registerView("changelog",k),e.appendChild(this.panel.render()),this.panel.hide(),e}_attachEvents(){this._stateUnsubscribe=this.messengerState.subscribe((e,t)=>{"openChange"===e&&this._handleOpenChange(t.isOpen)})}_handleOpenChange(e){e?(this.panel.show(),this.sdk.eventBus.emit("messenger:opened",{widget:this})):(this.panel.hide(),this.messengerState.reset(),this.sdk.eventBus.emit("messenger:closed",{widget:this}))}async _handleSendMessage(e,t){this.sdk.eventBus.emit("messenger:messageSent",{widget:this,conversationId:e,message:t}),this.apiService?.mock&&setTimeout(()=>{const t={id:"msg_"+Date.now(),content:"Thanks for your message! We'll get back to you soon.",isOwn:!1,timestamp:(new Date).toISOString(),sender:{name:"Support Team",avatarUrl:null}};this.messengerState.addMessage(e,t)},1500)}open(){this.messengerState.setOpen(!0)}close(){this.messengerState.setOpen(!1)}toggle(){this.messengerState.setOpen(!this.messengerState.isOpen)}navigateTo(e){this.messengerState.setView(e),this.messengerState.isOpen||this.open()}setConversations(e){this.messengerState.setConversations(e)}addMessage(e,t){this.messengerState.addMessage(e,t)}setHelpArticles(e){this.messengerState.setHelpArticles(e)}setHomeChangelogItems(e){this.messengerState.setHomeChangelogItems(e)}setChangelogItems(e){this.messengerState.setChangelogItems(e)}setUnreadCount(e){this.messengerState.unreadCount=e,this.messengerState._notify("unreadCountChange",{count:e})}getState(){return{isOpen:this.messengerState.isOpen,currentView:this.messengerState.currentView,unreadCount:this.messengerState.unreadCount,conversations:this.messengerState.conversations}}async loadInitialData(){try{const e=await this._fetchConversations();this.messengerState.setConversations(e)}catch(e){console.error("[MessengerWidget] Failed to load conversations:",e)}if(this.messengerOptions.enableHelp)try{const e=await this._fetchHelpArticles();this.messengerState.setHelpArticles(e)}catch(e){console.error("[MessengerWidget] Failed to load help articles:",e)}if(this.messengerOptions.enableChangelog)try{const{homeItems:e,changelogItems:t}=await this._fetchChangelog();this.messengerState.setHomeChangelogItems(e),this.messengerState.setChangelogItems(t)}catch(e){console.error("[MessengerWidget] Failed to load changelog:",e)}}async _fetchConversations(){return this.apiService?.mock?[{id:"conv_1",title:"Chat with Sarah",participants:[{name:"Sarah",avatarUrl:null}],lastMessage:"Sarah: Hi 👋 I'm Sarah. How can I help today?",lastMessageTime:new Date(Date.now()-294e4).toISOString(),unread:1},{id:"conv_2",title:"Chat with Tom",participants:[{name:"Tom",avatarUrl:null}],lastMessage:"Tom: The feature will be available next week.",lastMessageTime:new Date(Date.now()-5184e5).toISOString(),unread:0}]:[]}async _fetchHelpArticles(){return this.apiService?.mock?[{id:"collection_1",title:"Product Overview",description:"See how your AI-first customer service solution works.",articleCount:24,url:"#"},{id:"collection_2",title:"Getting Started",description:"Everything you need to know to get started with Product7.",articleCount:30,url:"#"},{id:"collection_3",title:"AI Agent",description:"Resolving customer questions instantly and accurately—from live chat to email.",articleCount:82,url:"#"},{id:"collection_4",title:"Channels",description:"Enabling the channels you use to communicate with customers, all from the Inbox.",articleCount:45,url:"#"},{id:"collection_5",title:"Billing & Payments",description:"Manage your subscription, invoices, and payment methods.",articleCount:12,url:"#"}]:[]}async _fetchChangelog(){return this.apiService?.mock?{homeItems:[{id:"changelog_5",title:"New integrations available",description:"Connect with more tools you love and streamline your workflow.",tags:["Integration"],coverImage:"https://feedback-sdk.product7.io/700x400__5_.png",coverText:null,publishedAt:new Date(Date.now()-12096e5).toISOString(),url:"#"},{id:"changelog_2",title:"A new era of Insights has arrived",description:"We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.",tags:["New feature","AI"],coverImage:"https://feedback-sdk.product7.io/Intercom_Messenger__1_.jpg",coverText:"Watch our major product launch on-demand",publishedAt:new Date(Date.now()-432e6).toISOString(),url:"#"},{id:"changelog_1",title:"The 2025 Customer Service Transformation Report",description:"Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.",tags:["Report"],coverImage:"https://feedback-sdk.product7.io/Main_Report_Email_Header.png",coverText:"Customer service trends as we know them are dead.",publishedAt:new Date(Date.now()-1728e5).toISOString(),url:"#"}],changelogItems:[{id:"changelog_4",title:"Enhanced conversation analytics",description:"Get deeper insights into your customer conversations with our new analytics dashboard.",tags:["Analytics"],coverImage:"https://feedback-sdk.product7.io/cgangelog-Frame%202087334450.jpg",coverText:null,publishedAt:new Date(Date.now()-864e6).toISOString(),url:"#"},{id:"changelog_3",title:"Escalation guidance for complex issues",description:"New AI-powered escalation guidance helps your team handle complex customer issues more effectively.",tags:["New feature","AI"],coverImage:"https://feedback-sdk.product7.io/cgangelog-image-escalation-guidance-event@2x.png",coverText:null,publishedAt:new Date(Date.now()-6048e5).toISOString(),url:"#"}]}:{homeItems:[],changelogItems:[]}}onMount(){this.loadInitialData()}onDestroy(){this._stateUnsubscribe&&this._stateUnsubscribe()}destroy(){this.launcher&&this.launcher.destroy(),this.panel&&this.panel.destroy(),super.destroy()}}class T extends u{constructor(e){super({...e,type:"survey"}),this.surveyOptions={surveyId:e.surveyId||null,surveyType:e.surveyType||"nps",position:e.position||"bottom-right",title:e.title||null,description:e.description||null,lowLabel:e.lowLabel||null,highLabel:e.highLabel||null,customQuestions:e.customQuestions||[],theme:e.theme||"light",onSubmit:e.onSubmit||null,onDismiss:e.onDismiss||null},this.surveyState={score:null,feedback:"",customAnswers:{},isVisible:!1}}_render(){const e=document.createElement("div");return e.className="feedback-survey-container",e.style.display="none",e}_attachEvents(){}show(){return this._renderSurvey(),this.surveyState.isVisible=!0,this.sdk.eventBus.emit("survey:shown",{widget:this,type:this.surveyOptions.surveyType}),this}hide(){return this._closeSurvey(),this}_renderSurvey(){this._closeSurvey();const e=this._getSurveyConfig(),t=this._getPositionStyles(),n="dark"===this.surveyOptions.theme?"background: #1a1a1a; color: #fff;":"background: #fff; color: #1d1d1f;";"center"===this.surveyOptions.position&&(this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-survey-backdrop",document.body.appendChild(this.backdropElement),this.backdropElement.addEventListener("click",()=>this._handleDismiss())),this.surveyElement=document.createElement("div"),this.surveyElement.className=`feedback-survey feedback-survey-${this.surveyOptions.position} theme-${this.surveyOptions.theme}`,this.surveyElement.style.cssText=`position: fixed; ${t} z-index: 10000; ${n} border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 24px; min-width: 320px; max-width: 400px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;`,this.surveyElement.innerHTML=`\n\t\t\t<button class="feedback-survey-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"}; line-height: 1;">&times;</button>\n\t\t\t<h3 class="feedback-survey-title" style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600; padding-right: 24px;">${e.title}</h3>\n\t\t\t<p class="feedback-survey-description" style="color: ${"dark"===this.surveyOptions.theme?"#aaa":"#86868b"}; margin: 0 0 20px 0; font-size: 14px;">${e.description}</p>\n\t\t\t<div class="feedback-survey-content">${e.html}</div>\n\t\t\t<div class="feedback-survey-feedback" style="margin-top: 16px;">\n\t\t\t\t<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)" style="width: 100%; padding: 12px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#333":"#d2d2d7"}; border-radius: 8px; font-size: 14px; resize: none; height: 80px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; font-family: inherit; box-sizing: border-box;"></textarea>\n\t\t\t</div>\n\t\t\t<button class="feedback-survey-submit" style="width: 100%; margin-top: 12px; padding: 12px; background: #007aff; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;">Submit</button>\n\t\t`,document.body.appendChild(this.surveyElement),this._attachSurveyEvents(),requestAnimationFrame(()=>{this.surveyElement.style.opacity="1",this.surveyElement.style.transform="center"===this.surveyOptions.position?"translate(-50%, -50%) scale(1)":"translateY(0)"})}_getSurveyConfig(){const e={nps:{title:this.surveyOptions.title||"How likely are you to recommend us?",description:this.surveyOptions.description||"On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?",html:`\n\t\t\t\t\t<div class="feedback-survey-nps" style="display: flex; justify-content: space-between; gap: 4px;">\n\t\t\t\t\t\t${[...Array(11).keys()].map(e=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-nps-btn" data-score="${e}" style="width: 28px; height: 36px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 6px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 12px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"};">\n\t\t\t\t\t\t<span>${this.surveyOptions.lowLabel||"Not likely"}</span>\n\t\t\t\t\t\t<span>${this.surveyOptions.highLabel||"Very likely"}</span>\n\t\t\t\t\t</div>\n\t\t\t\t`},csat:{title:this.surveyOptions.title||"How satisfied are you?",description:this.surveyOptions.description||"How would you rate your overall satisfaction with our product?",html:`\n\t\t\t\t\t<div class="feedback-survey-csat" style="display: flex; justify-content: center; gap: 16px;">\n\t\t\t\t\t\t${["😞","😕","😐","🙂","😄"].map((e,t)=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-csat-btn" data-score="${t+1}" style="background: none; border: none; cursor: pointer; font-size: 36px; transition: transform 0.15s; padding: 8px;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"};">\n\t\t\t\t\t\t<span>${this.surveyOptions.lowLabel||"Very dissatisfied"}</span>\n\t\t\t\t\t\t<span>${this.surveyOptions.highLabel||"Very satisfied"}</span>\n\t\t\t\t\t</div>\n\t\t\t\t`},ces:{title:this.surveyOptions.title||"How easy was it?",description:this.surveyOptions.description||"How easy was it to accomplish your task today?",html:`\n\t\t\t\t\t<div class="feedback-survey-ces" style="display: flex; justify-content: space-between; gap: 8px;">\n\t\t\t\t\t\t${["Very Difficult","Difficult","Neutral","Easy","Very Easy"].map((e,t)=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-ces-btn" data-score="${t+1}" style="flex: 1; padding: 12px 8px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t`},custom:{title:this.surveyOptions.title||"Quick Feedback",description:this.surveyOptions.description||"Help us improve by answering a few questions.",html:this._renderCustomQuestions()}};return e[this.surveyOptions.surveyType]||e.nps}_renderCustomQuestions(){return this.surveyOptions.customQuestions&&0!==this.surveyOptions.customQuestions.length?this.surveyOptions.customQuestions.map((e,t)=>`\n\t\t\t<div style="margin-bottom: 16px;">\n\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">${e.label}</label>\n\t\t\t\t${this._renderQuestionInput(e,t)}\n\t\t\t</div>\n\t\t`).join(""):`\n\t\t\t\t<div style="margin-bottom: 16px;">\n\t\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">What feature do you use most?</label>\n\t\t\t\t\t<select class="feedback-survey-select" data-question="feature" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"};">\n\t\t\t\t\t\t<option value="">Select a feature</option>\n\t\t\t\t\t\t<option value="feedback">Feedback Collection</option>\n\t\t\t\t\t\t<option value="surveys">Surveys</option>\n\t\t\t\t\t\t<option value="analytics">Analytics</option>\n\t\t\t\t\t\t<option value="integrations">Integrations</option>\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">How often do you use it?</label>\n\t\t\t\t\t<div class="feedback-survey-frequency" style="display: flex; gap: 8px;">\n\t\t\t\t\t\t${["Daily","Weekly","Monthly","Rarely"].map(e=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-freq-btn" data-freq="${e}" style="flex: 1; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 12px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t`}_renderQuestionInput(e,t){switch(e.type){case"select":return`\n\t\t\t\t\t<select class="feedback-survey-select" data-question="${e.id||t}" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"};">\n\t\t\t\t\t\t<option value="">${e.placeholder||"Select an option"}</option>\n\t\t\t\t\t\t${e.options.map(e=>`<option value="${e.value}">${e.label}</option>`).join("")}\n\t\t\t\t\t</select>\n\t\t\t\t`;case"text":return`\n\t\t\t\t\t<input type="text" class="feedback-survey-input" data-question="${e.id||t}" placeholder="${e.placeholder||""}" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; box-sizing: border-box;">\n\t\t\t\t`;default:return""}}_getPositionStyles(){const e={"bottom-right":"bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;","bottom-left":"bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;",center:"top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;",bottom:"bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;"};return e[this.surveyOptions.position]||e["bottom-right"]}_attachSurveyEvents(){if(!this.surveyElement)return;this.surveyElement.querySelector(".feedback-survey-close").addEventListener("click",()=>this._handleDismiss());this.surveyElement.querySelector(".feedback-survey-submit").addEventListener("click",()=>this._handleSubmit());this.surveyElement.querySelector(".feedback-survey-textarea").addEventListener("input",e=>{this.surveyState.feedback=e.target.value}),this._attachTypeSpecificEvents(),this._escapeHandler=e=>{"Escape"===e.key&&this._handleDismiss()},document.addEventListener("keydown",this._escapeHandler)}_attachTypeSpecificEvents(){const e=this.surveyOptions.surveyType;"nps"===e&&this.surveyElement.querySelectorAll(".feedback-survey-nps-btn").forEach(e=>{e.addEventListener("click",()=>this._selectNPS(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="#007aff")}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7")})}),"csat"===e&&this.surveyElement.querySelectorAll(".feedback-survey-csat-btn").forEach(e=>{e.addEventListener("click",()=>this._selectCSAT(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{e.style.transform="scale(1.1)"}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.transform="scale(1)")})}),"ces"===e&&this.surveyElement.querySelectorAll(".feedback-survey-ces-btn").forEach(e=>{e.addEventListener("click",()=>this._selectCES(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="#007aff")}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7")})}),"custom"===e&&(this.surveyElement.querySelectorAll(".feedback-survey-freq-btn").forEach(e=>{e.addEventListener("click",()=>this._selectFrequency(e.dataset.freq))}),this.surveyElement.querySelectorAll(".feedback-survey-select").forEach(e=>{e.addEventListener("change",t=>{this.surveyState.customAnswers[e.dataset.question]=t.target.value})}),this.surveyElement.querySelectorAll(".feedback-survey-input").forEach(e=>{e.addEventListener("input",t=>{this.surveyState.customAnswers[e.dataset.question]=t.target.value})}))}_selectNPS(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-nps-btn").forEach(t=>{parseInt(t.dataset.score)===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}_selectCSAT(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-csat-btn").forEach(t=>{const n=parseInt(t.dataset.score);t.style.transform=n===e?"scale(1.2)":"scale(1)"})}_selectCES(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-ces-btn").forEach(t=>{parseInt(t.dataset.score)===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}_selectFrequency(e){this.surveyState.customAnswers.frequency=e,this.surveyElement.querySelectorAll(".feedback-survey-freq-btn").forEach(t=>{t.dataset.freq===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}async _handleSubmit(){const e=this.surveyOptions.surveyType;if(("nps"===e||"csat"===e||"ces"===e)&&null===this.surveyState.score)return void this._showError("Please select a rating");const t={rating:this.surveyState.score,feedback:this.surveyState.feedback,answers:this.surveyState.customAnswers},n={type:e,score:this.surveyState.score,feedback:this.surveyState.feedback,customAnswers:this.surveyState.customAnswers,timestamp:(new Date).toISOString()};this.surveyOptions.onSubmit&&this.surveyOptions.onSubmit(n);try{const n=this.surveyOptions.surveyId||`local_${e}_${Date.now()}`;await this.apiService.submitSurveyResponse(n,t)}catch(e){console.error("[SurveyWidget] Failed to submit survey:",e)}this.sdk.eventBus.emit("survey:submitted",{widget:this,response:n}),this._closeSurvey(),this._showSuccessNotification()}async _handleDismiss(){if(this.surveyOptions.surveyId)try{await this.apiService.dismissSurvey(this.surveyOptions.surveyId)}catch(e){console.error("[SurveyWidget] Failed to dismiss survey:",e)}this.surveyOptions.onDismiss&&this.surveyOptions.onDismiss(),this.sdk.eventBus.emit("survey:dismissed",{widget:this}),this._closeSurvey()}_showError(e){const t=this.surveyElement.querySelector(".feedback-survey-error");t&&t.remove();const n=document.createElement("div");n.className="feedback-survey-error",n.style.cssText="color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;",n.textContent=e;const s=this.surveyElement.querySelector(".feedback-survey-submit");s.parentNode.insertBefore(n,s),setTimeout(()=>n.remove(),3e3)}_showSuccessNotification(){const e=document.createElement("div");e.className="feedback-survey-success",e.style.cssText="\n\t\t\tposition: fixed;\n\t\t\ttop: 24px;\n\t\t\tright: 24px;\n\t\t\tbackground: #10b981;\n\t\t\tcolor: white;\n\t\t\tpadding: 16px 24px;\n\t\t\tborder-radius: 12px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tz-index: 10001;\n\t\t\tbox-shadow: 0 10px 40px rgba(0,0,0,0.2);\n\t\t\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n\t\t",e.innerHTML='\n\t\t\t<div style="display: flex; align-items: center; gap: 8px;">\n\t\t\t\t<span style="font-size: 18px;">✓</span>\n\t\t\t\t<span>Thank you for your feedback!</span>\n\t\t\t</div>\n\t\t',document.body.appendChild(e),setTimeout(()=>{e.style.opacity="0",e.style.transition="opacity 0.3s ease",setTimeout(()=>e.remove(),300)},3e3)}_closeSurvey(){this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null);const e=this.surveyElement,t=this.backdropElement;e&&(e.style.opacity="0",e.style.transform="center"===this.surveyOptions.position?"translate(-50%, -50%) scale(0.95)":"translateY(20px)",setTimeout(()=>{e&&e.parentNode&&e.parentNode.removeChild(e)},300),this.surveyElement=null),t&&(t.style.opacity="0",setTimeout(()=>{t&&t.parentNode&&t.parentNode.removeChild(t)},300),this.backdropElement=null),this.surveyState={score:null,feedback:"",customAnswers:{},isVisible:!1}}destroy(){this._closeSurvey(),super.destroy()}}class z extends u{constructor(e){super({...e,type:"tab"})}_render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-tab theme-${this.options.theme} position-${this.options.position}`,e.innerHTML='\n <div class="feedback-tab-trigger">\n <span class="feedback-tab-text">Feedback</span>\n </div>\n ',this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}_attachEvents(){const e=this.element.querySelector(".feedback-tab-trigger");e.addEventListener("click",this.openModal),e.addEventListener("mouseenter",()=>{this.state.isSubmitting||(e.style.transform=this._getHoverTransform())}),e.addEventListener("mouseleave",()=>{e.style.transform="none"})}_getHoverTransform(){const e=this.options.position;return e.includes("right")?"translateX(-5px)":e.includes("left")?"translateX(5px)":"none"}updateText(e){const t=this.element?.querySelector(".feedback-tab-text");t&&(t.textContent=e)}updatePosition(e){this.options.position=e,this.element&&(this.element.className=this.element.className.replace(/position-\w+-\w+/,`position-${e}`))}}class A{static widgets=new Map([["button",f],["tab",z],["inline",b],["survey",T],["messenger",$]]);static register(e,n){if("string"!=typeof e||!e.trim())throw new t("Widget type must be a non-empty string");if("function"!=typeof n)throw new t("Widget class must be a constructor function");this.widgets.set(e,n)}static create(e,n={}){const s=this.widgets.get(e);if(!s){const n=Array.from(this.widgets.keys()).join(", ");throw new t(`Unknown widget type: ${e}. Available types: ${n}`)}try{return new s(n)}catch(n){throw new t(`Failed to create widget of type '${e}': ${n.message}`,n)}}static getAvailableTypes(){return Array.from(this.widgets.keys())}static isTypeRegistered(e){return this.widgets.has(e)}static unregister(e){return this.widgets.delete(e)}static clear(){this.widgets.clear()}static getWidgetClass(e){return this.widgets.get(e)}}class L{constructor(e={}){this.config=this._validateAndMergeConfig(e),this.initialized=!1,this.widgets=new Map,this.eventBus=new d,this.apiService=new c({apiUrl:this.config.apiUrl,workspace:this.config.workspace,userContext:this.config.userContext,mock:this.config.mock,env:this.config.env}),this._bindMethods()}async init(){if(this.initialized)return{alreadyInitialized:!0};try{const e=await this.apiService.init(this.config.userContext);return e.config&&(this.config=m(e.config,this.config)),this.initialized=!0,this.eventBus.emit("sdk:initialized",{config:this.config,sessionToken:e.sessionToken}),{initialized:!0,config:e.config||{},sessionToken:e.sessionToken,expiresIn:e.expiresIn}}catch(e){throw this.eventBus.emit("sdk:error",{error:e}),new t(`Failed to initialize SDK: ${e.message}`,e)}}createWidget(e="button",n={}){if(!this.initialized)throw new t("SDK must be initialized before creating widgets. Call init() first.");const s=h("widget"),i={id:s,sdk:this,apiService:this.apiService,...this.config,...n};try{const t=A.create(e,i);return this.widgets.set(s,t),this.eventBus.emit("widget:created",{widget:t,type:e}),t}catch(e){throw new t(`Failed to create widget: ${e.message}`,e)}}getWidget(e){return this.widgets.get(e)}async getActiveSurveys(e={}){if(!this.initialized)throw new t("SDK must be initialized before fetching surveys. Call init() first.");try{return(await this.apiService.getActiveSurveys(e)).data||[]}catch(e){throw this.eventBus.emit("sdk:error",{error:e}),new t(`Failed to fetch active surveys: ${e.message}`,e)}}async showSurveyById(e,n={}){if(!this.initialized)throw new t("SDK must be initialized before showing surveys. Call init() first.");const s=(await this.getActiveSurveys()).find(t=>t.id===e);if(!s)throw new t(`Survey with ID '${e}' not found or not active`);return this.showSurvey({surveyId:s.id,surveyType:s.type,title:s.title,description:s.description,lowLabel:s.low_label,highLabel:s.high_label,customQuestions:s.questions,...n})}showSurvey(e={}){if(!this.initialized)throw new t("SDK must be initialized before showing surveys. Call init() first.");const n=this.createWidget("survey",{surveyId:e.surveyId,surveyType:e.surveyType||e.type||"nps",position:e.position||"bottom-right",theme:e.theme||this.config.theme||"light",title:e.title,description:e.description,lowLabel:e.lowLabel,highLabel:e.highLabel,customQuestions:e.customQuestions,onSubmit:e.onSubmit,onDismiss:e.onDismiss});return n.mount(),n.show(),n}getAllWidgets(){return Array.from(this.widgets.values())}destroyWidget(e){const t=this.widgets.get(e);return!!t&&(t.destroy(),this.widgets.delete(e),this.eventBus.emit("widget:removed",{widgetId:e}),!0)}destroyAllWidgets(){for(const e of this.widgets.values())e.destroy();this.widgets.clear(),this.eventBus.emit("widgets:cleared")}updateConfig(e){const t={...this.config};this.config=this._validateAndMergeConfig(e,this.config);for(const e of this.widgets.values())e.handleConfigUpdate(this.config);this.eventBus.emit("config:updated",{oldConfig:t,newConfig:this.config})}setUserContext(e){this.config.userContext=e,this.apiService&&this.apiService.setUserContext(e),this.eventBus.emit("user:updated",{userContext:e})}getUserContext(){return this.config.userContext||(this.apiService?this.apiService.getUserContext():null)}async reinitialize(e=null){return this.apiService.clearSession(),this.initialized=!1,e&&this.setUserContext(e),this.init()}on(e,t){return this.eventBus.on(e,t),this}off(e,t){return this.eventBus.off(e,t),this}once(e,t){return this.eventBus.once(e,t),this}emit(e,t){return this.eventBus.emit(e,t),this}destroy(){this.destroyAllWidgets(),this.eventBus.removeAllListeners(),this.apiService.clearSession(),this.initialized=!1,this.eventBus.emit("sdk:destroyed")}_validateAndMergeConfig(e,t={}){const n=m(m({apiUrl:null,workspace:null,userContext:null,position:"bottom-right",theme:"light",boardId:"general",autoShow:!0,debug:!1,mock:!1,env:"production"},t),e);if(!n.workspace)throw new i("Missing required configuration: workspace");return n.userContext&&this._validateUserContext(n.userContext),n}_validateUserContext(e){if(!e.user_id&&!e.email)throw new i("User context must include at least user_id or email");const t={user_id:"string",email:"string",name:"string",custom_fields:"object",company:"object"};for(const[n,s]of Object.entries(t))if(e[n]&&typeof e[n]!==s)throw new i(`User context field '${n}' must be of type '${s}'`)}_bindMethods(){this.createWidget=this.createWidget.bind(this),this.destroyWidget=this.destroyWidget.bind(this),this.updateConfig=this.updateConfig.bind(this)}static create(e){return new L(e)}static async createAndInit(e){const t=new L(e);return await t.init(),t}static extractUserContextFromAuth(e){return e?{user_id:e.sub||e.id||e.user_id,email:e.email,name:e.name||e.display_name||e.full_name,custom_fields:{role:e.role,plan:e.plan||e.subscription?.plan,...e.custom_fields||{}},company:e.company||e.organization?{id:e.company?.id||e.organization?.id,name:e.company?.name||e.organization?.name,monthly_spend:e.company?.monthly_spend}:void 0}:null}}function O(){if("undefined"!=typeof document&&!document.querySelector("#feedback-sdk-styles")){const e=document.createElement("style");e.id="feedback-sdk-styles",e.textContent="\n.feedback-widget {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n line-height: 1.4;\n z-index: 999999;\n box-sizing: border-box;\n}\n\n.feedback-widget *,\n.feedback-widget *::before,\n.feedback-widget *::after {\n box-sizing: border-box;\n}\n\n.feedback-widget-button {\n position: fixed;\n z-index: 999999;\n}\n\n.feedback-widget-button.position-bottom-right {\n bottom: 20px;\n right: 20px;\n}\n\n.feedback-widget-button.position-bottom-left {\n bottom: 20px;\n left: 20px;\n}\n\n.feedback-widget-button.position-top-right {\n top: 20px;\n right: 20px;\n}\n\n.feedback-widget-button.position-top-left {\n top: 20px;\n left: 20px;\n}\n\n.feedback-trigger-btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 48px;\n overflow: visible;\n border-radius: 9999px;\n border: none;\n padding: 12px 20px;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s ease;\n color: white;\n background: #155EEF;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n width: fit-content;\n}\n\n.feedback-trigger-btn:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}\n\n.feedback-trigger-btn:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.feedback-trigger-btn:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-icon {\n flex-shrink: 0;\n}\n\n.feedback-minimize-icon,\n.feedback-expand-icon {\n position: absolute;\n top: -6px;\n right: -6px;\n width: 24px;\n height: 24px;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.feedback-minimize-icon svg,\n.feedback-expand-icon svg {\n width: 16px;\n height: 16px;\n display: block;\n fill: #155EEF;\n}\n\n/* Show minimize icon on hover when expanded */\n.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {\n opacity: 1;\n}\n\n/* Minimized state - just icon */\n.feedback-widget-button.minimized .feedback-trigger-btn {\n padding: 12px;\n width: 48px;\n height: 48px;\n justify-content: center;\n}\n\n.feedback-widget-button.minimized .feedback-text {\n display: none;\n}\n\n.feedback-widget-button.minimized .feedback-minimize-icon {\n display: none;\n}\n\n/* Show expand icon on hover when minimized */\n.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {\n opacity: 1;\n}\n\n/* Side Panel Styles */\n.feedback-panel {\n position: fixed;\n bottom: 80px;\n right: 24px;\n width: 420px;\n max-height: 500px;\n z-index: 1000000;\n transform: translateX(calc(100% + 24px));\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n}\n\n.feedback-panel.open {\n transform: translateX(0);\n}\n\n.feedback-panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n z-index: 999999;\n}\n\n.feedback-panel-backdrop.show {\n opacity: 1;\n pointer-events: auto;\n}\n\n.feedback-panel-content {\n background: white;\n height: 100%;\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), \n 0 10px 10px -5px rgba(0, 0, 0, 0.04),\n 0 0 0 1px rgba(0, 0, 0, 0.05);\n}\n\n.feedback-panel.theme-dark .feedback-panel-content {\n background: #1F2937;\n color: white;\n}\n\n.feedback-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 24px;\n border-bottom: 1px solid #E5E7EB;\n flex-shrink: 0;\n}\n\n.feedback-panel.theme-dark .feedback-panel-header {\n border-bottom-color: #374151;\n}\n\n.feedback-panel-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #111827;\n}\n\n.feedback-panel.theme-dark .feedback-panel-header h3 {\n color: white;\n}\n\n.feedback-panel-close {\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #6B7280;\n padding: 4px;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.feedback-panel-close:hover {\n background: #F3F4F6;\n color: #111827;\n}\n\n.feedback-panel-close:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-panel.theme-dark .feedback-panel-close {\n color: #9CA3AF;\n}\n\n.feedback-panel.theme-dark .feedback-panel-close:hover {\n background: #374151;\n color: white;\n}\n\n.feedback-panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.feedback-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.feedback-form-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 20px;\n}\n\n.feedback-form-group:last-child {\n margin-bottom: 0;\n}\n\n.feedback-form-group label {\n font-size: 14px;\n font-weight: 500;\n line-height: 1.25;\n color: #374151;\n}\n\n.feedback-panel.theme-dark .feedback-form-group label {\n color: #D1D5DB;\n}\n\n.feedback-form-group input {\n height: 44px;\n width: 100%;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n padding: 10px 14px;\n font-size: 15px;\n font-weight: 400;\n line-height: 1.5;\n color: #1F2937;\n font-family: inherit;\n outline: none;\n transition: all 0.2s ease;\n}\n\n.feedback-form-group input::placeholder {\n font-size: 15px;\n color: #9CA3AF;\n}\n\n.feedback-form-group input:focus {\n border-color: #155EEF;\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.feedback-form-group input:focus-visible {\n outline: none;\n}\n\n.feedback-form-group textarea {\n min-height: 200px;\n width: 100%;\n resize: vertical;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n padding: 10px 14px;\n font-size: 15px;\n font-weight: 400;\n line-height: 1.5;\n color: #1F2937;\n font-family: inherit;\n outline: none;\n transition: all 0.2s ease;\n}\n\n.feedback-form-group textarea::placeholder {\n font-size: 15px;\n color: #9CA3AF;\n}\n\n.feedback-form-group textarea:focus {\n border-color: #155EEF;\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.feedback-form-group textarea:focus-visible {\n outline: none;\n}\n\n.feedback-panel.theme-dark .feedback-form-group input,\n.feedback-panel.theme-dark .feedback-form-group textarea {\n background: #374151;\n border-color: #4B5563;\n color: white;\n}\n\n.feedback-panel.theme-dark .feedback-form-group input::placeholder,\n.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {\n color: #6B7280;\n}\n\n.feedback-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 8px;\n border: none;\n height: 44px;\n padding: 10px 18px;\n font-size: 15px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.feedback-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.feedback-btn:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-btn-submit {\n background: #155EEF;\n color: white;\n width: 100%;\n}\n\n.feedback-btn-submit:hover:not(:disabled) {\n background: #4338ca;\n}\n\n.feedback-btn-submit:active:not(:disabled) {\n background: #3730a3;\n}\n\n.feedback-btn-cancel {\n background: transparent;\n color: #6B7280;\n border: 1px solid #D1D5DB;\n}\n\n.feedback-btn-cancel:hover:not(:disabled) {\n background: #F9FAFB;\n border-color: #9CA3AF;\n color: #374151;\n}\n\n.feedback-panel.theme-dark .feedback-btn-cancel {\n color: #D1D5DB;\n border-color: #4B5563;\n}\n\n.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {\n background: #374151;\n}\n\n.feedback-form-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: auto;\n padding-top: 24px;\n}\n\n.feedback-error {\n color: #DC2626;\n font-size: 14px;\n font-weight: 400;\n margin-top: 8px;\n padding: 12px;\n background: #FEE2E2;\n border: 1px solid #FECACA;\n border-radius: 8px;\n display: none;\n}\n\n.feedback-error.show {\n display: block;\n}\n\n.feedback-panel.theme-dark .feedback-error {\n background: #7F1D1D;\n border-color: #991B1B;\n color: #FCA5A5;\n}\n\n.feedback-success-notification {\n position: fixed;\n top: 24px;\n right: 24px;\n z-index: 1000002;\n background: white;\n border: 1px solid #D1FAE5;\n border-radius: 12px;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 320px;\n}\n\n.feedback-success-content {\n display: flex;\n align-items: center;\n padding: 16px 20px;\n gap: 12px;\n}\n\n.feedback-success-icon {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #10B981;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.feedback-success-content span {\n color: #065F46;\n font-weight: 500;\n font-size: 14px;\n flex: 1;\n}\n\n.feedback-success-close {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 20px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.feedback-success-close:hover {\n background: #F3F4F6;\n color: #374151;\n}\n\n.feedback-success-close:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n@keyframes slideInRight {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.feedback-panel-backdrop {\n animation: fadeIn 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .feedback-panel {\n width: 100%;\n top: auto;\n bottom: 0;\n right: 0;\n left: 0;\n height: 85vh;\n max-height: 85vh;\n transform: translateY(100%);\n border-radius: 20px 20px 0 0;\n }\n \n .feedback-panel.open {\n transform: translateY(0);\n }\n \n .feedback-panel-content {\n border-radius: 20px 20px 0 0;\n }\n \n .feedback-panel-header {\n padding: 20px;\n position: relative;\n }\n \n .feedback-panel-header::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 4px;\n background: #D1D5DB;\n border-radius: 2px;\n }\n \n .feedback-panel.theme-dark .feedback-panel-header::before {\n background: #4B5563;\n }\n \n .feedback-panel-body {\n padding: 20px;\n }\n \n .feedback-form-group textarea {\n min-height: 150px;\n }\n \n .feedback-widget-button {\n bottom: 16px;\n right: 16px;\n }\n \n .feedback-widget-button.position-bottom-left {\n left: 16px;\n }\n \n .feedback-success-notification {\n top: 16px;\n right: 16px;\n left: 16px;\n min-width: auto;\n }\n \n .feedback-minimize-icon,\n .feedback-expand-icon {\n top: -4px;\n right: -4px;\n width: 20px;\n height: 20px;\n }\n \n .feedback-minimize-icon svg,\n .feedback-expand-icon svg {\n width: 14px;\n height: 14px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .feedback-trigger-btn,\n .feedback-btn,\n .feedback-panel,\n .feedback-panel-backdrop,\n .feedback-success-notification,\n .feedback-minimize-icon,\n .feedback-expand-icon {\n transition: none;\n animation: none;\n }\n}\n\n@media print {\n .feedback-widget,\n .feedback-panel,\n .feedback-panel-backdrop,\n .feedback-success-notification {\n display: none !important;\n }\n}\n\n/* ========================================\n Messenger Widget - Intercom-style Dark Theme\n ======================================== */\n\n.messenger-widget {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.messenger-widget *,\n.messenger-widget *::before,\n.messenger-widget *::after {\n box-sizing: border-box;\n}\n\n/* ========================================\n Launcher Button\n ======================================== */\n\n.messenger-launcher {\n position: fixed;\n z-index: 999999;\n}\n\n.messenger-launcher-bottom-right {\n bottom: 20px;\n right: 20px;\n}\n\n.messenger-launcher-bottom-left {\n bottom: 20px;\n left: 20px;\n}\n\n.messenger-launcher-btn {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n border: none;\n background: #1c1c1e;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n}\n\n.messenger-launcher-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);\n}\n\n.messenger-launcher-btn:active {\n transform: scale(0.95);\n}\n\n.messenger-launcher-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.messenger-launcher-open .messenger-launcher-icon-chat {\n opacity: 0;\n transform: rotate(-90deg);\n}\n\n.messenger-launcher-open .messenger-launcher-icon-close {\n opacity: 1;\n transform: rotate(0deg);\n}\n\n.messenger-launcher-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n background: #ef4444;\n color: white;\n font-size: 11px;\n font-weight: 600;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 6px;\n border: 2px solid white;\n}\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.messenger-panel {\n position: fixed;\n z-index: 999998;\n width: 400px;\n height: 680px;\n max-height: calc(100vh - 100px);\n display: none;\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.messenger-panel.open {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.messenger-panel-bottom-right {\n bottom: 90px;\n right: 20px;\n}\n\n.messenger-panel-bottom-left {\n bottom: 90px;\n left: 20px;\n}\n\n.messenger-panel-content {\n background: #1c1c1e;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);\n}\n\n/* Light theme */\n.messenger-panel.theme-light .messenger-panel-content {\n background: #ffffff;\n}\n\n/* ========================================\n Views Container\n ======================================== */\n\n.messenger-panel-views {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.messenger-view {\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* ========================================\n Common Components\n ======================================== */\n\n/* Close Button */\n.messenger-close-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.6);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.messenger-close-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n.theme-light .messenger-close-btn {\n color: #86868b;\n}\n\n.theme-light .messenger-close-btn:hover {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n/* Back Button */\n.messenger-back-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.6);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.messenger-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n/* Avatar Stack */\n.messenger-avatar-stack {\n display: flex;\n align-items: center;\n}\n\n.messenger-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 2px solid #1c1c1e;\n background: #5856d6;\n color: white;\n font-size: 13px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: -8px;\n object-fit: cover;\n}\n\n.messenger-avatar:first-child {\n margin-left: 0;\n}\n\n.messenger-avatar-small {\n width: 28px;\n height: 28px;\n font-size: 11px;\n}\n\n.messenger-avatar-medium {\n width: 40px;\n height: 40px;\n font-size: 15px;\n font-weight: 600;\n}\n\n.messenger-avatar-tiny {\n width: 20px;\n height: 20px;\n font-size: 9px;\n border-width: 1.5px;\n margin-left: -6px;\n}\n\n.messenger-avatar-tiny:first-child {\n margin-left: 0;\n}\n\n.theme-light .messenger-avatar {\n border-color: #ffffff;\n}\n\n/* ========================================\n Home View\n ======================================== */\n\n.messenger-home-view {\n background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 40%);\n}\n\n.messenger-home-header {\n padding: 20px;\n background: linear-gradient(180deg, rgba(88, 86, 214, 0.2) 0%, transparent 100%);\n}\n\n.messenger-home-header-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.messenger-home-logo {\n width: 32px;\n height: 32px;\n}\n\n.messenger-home-logo img {\n width: 100%;\n height: 100%;\n border-radius: 8px;\n object-fit: cover;\n}\n\n.messenger-home-logo-default {\n width: 32px;\n height: 32px;\n background: linear-gradient(135deg, #5856d6, #007aff);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.messenger-home-avatars {\n flex: 1;\n display: flex;\n justify-content: flex-end;\n margin-right: 12px;\n}\n\n.messenger-home-welcome {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.messenger-home-greeting {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-home-question {\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-home-body {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n.messenger-home-message-btn {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: #2c2c2e;\n border: none;\n border-radius: 24px;\n color: white;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-bottom: 20px;\n}\n\n.messenger-home-message-btn:hover {\n background: #3c3c3e;\n transform: translateX(4px);\n}\n\n.messenger-home-message-btn svg {\n opacity: 0.6;\n}\n\n/* Featured Card */\n.messenger-home-featured {\n background: #2c2c2e;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 20px;\n}\n\n.messenger-home-featured-image {\n width: 100%;\n height: 120px;\n object-fit: cover;\n}\n\n.messenger-home-featured-content {\n padding: 16px;\n}\n\n.messenger-home-featured-content h3 {\n margin: 0 0 8px;\n font-size: 16px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-home-featured-content p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n}\n\n/* Changelog Section in Home */\n.messenger-home-changelog-section {\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.messenger-home-changelog-card {\n background: #2c2c2e;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-home-changelog-card:hover {\n background: #3c3c3e;\n transform: translateY(-2px);\n}\n\n.messenger-home-changelog-cover {\n width: 100%;\n height: 140px;\n overflow: hidden;\n position: relative;\n border-radius: 12px;\n margin: 12px 12px 0 12px;\n padding-bottom: 12px;\n width: calc(100% - 24px);\n}\n\n.messenger-home-changelog-cover img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 12px;\n}\n\n.messenger-home-changelog-cover-text {\n position: absolute;\n bottom: 12px;\n left: 12px;\n right: 12px;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n line-height: 1.3;\n}\n\n.messenger-home-changelog-card-content {\n padding: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-home-changelog-card-title {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 600;\n color: #ffffff;\n line-height: 1.3;\n}\n\n.messenger-home-changelog-card-desc {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ========================================\n Conversations View\n ======================================== */\n\n.messenger-conversations-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-conversations-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-conversations-body {\n flex: 1;\n overflow-y: auto;\n padding: 12px;\n}\n\n.messenger-conversations-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-conversations-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-conversations-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-conversations-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-conversation-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n border-radius: 12px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.messenger-conversation-item:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-conversation-avatars {\n flex-shrink: 0;\n padding-top: 2px;\n}\n\n.messenger-conversation-content {\n flex: 1;\n min-width: 0;\n}\n\n.messenger-conversation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n gap: 12px;\n}\n\n.messenger-conversation-title {\n font-size: 15px;\n font-weight: 400;\n color: #ffffff;\n line-height: 1.3;\n}\n\n.messenger-conversation-time {\n font-size: 13px;\n color: rgba(255, 255, 255, 0.5);\n flex-shrink: 0;\n}\n\n.messenger-conversation-preview {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.messenger-unread-dot {\n width: 8px;\n height: 8px;\n background: #ef4444;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.messenger-conversation-message {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n line-height: 1.4;\n}\n\n.messenger-conversation-item.unread .messenger-conversation-title {\n font-weight: 400;\n color: #ffffff;\n}\n\n.messenger-conversation-item.unread .messenger-conversation-message {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.messenger-conversations-footer {\n padding: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-new-message-btn {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: #2c2c2e;\n border: none;\n border-radius: 24px;\n color: white;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-new-message-btn:hover {\n background: #3c3c3e;\n}\n\n.messenger-new-message-btn span {\n flex: 1;\n text-align: left;\n}\n\n.messenger-new-message-btn svg {\n opacity: 0.6;\n}\n\n/* ========================================\n Chat View\n ======================================== */\n\n.messenger-chat-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-chat-header-info {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.messenger-chat-title {\n font-size: 16px;\n font-weight: 500;\n color: white;\n}\n\n.messenger-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.messenger-chat-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-chat-empty-avatars {\n margin-bottom: 16px;\n}\n\n.messenger-chat-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-chat-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n max-width: 240px;\n}\n\n/* Messages */\n.messenger-message {\n display: flex;\n gap: 8px;\n max-width: 85%;\n}\n\n.messenger-message-own {\n align-self: flex-end;\n flex-direction: column;\n align-items: flex-end;\n}\n\n.messenger-message-received {\n align-self: flex-start;\n}\n\n.messenger-message-wrapper {\n display: flex;\n flex-direction: column;\n}\n\n.messenger-message-sender {\n font-size: 12px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 4px;\n margin-left: 12px;\n}\n\n.messenger-message-bubble {\n padding: 12px 16px;\n border-radius: 18px;\n word-wrap: break-word;\n}\n\n.messenger-message-own .messenger-message-bubble {\n background: #007aff;\n color: white;\n border-bottom-right-radius: 4px;\n}\n\n.messenger-message-received .messenger-message-bubble {\n background: #2c2c2e;\n color: white;\n border-bottom-left-radius: 4px;\n}\n\n.messenger-message-content {\n font-size: 15px;\n line-height: 1.4;\n}\n\n.messenger-message-time {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.4);\n margin-top: 4px;\n padding: 0 4px;\n}\n\n.messenger-message-avatar {\n flex-shrink: 0;\n margin-top: auto;\n}\n\n/* Compose Area */\n.messenger-chat-compose {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n background: #1c1c1e;\n}\n\n.messenger-compose-input-wrapper {\n flex: 1;\n background: #2c2c2e;\n border-radius: 20px;\n padding: 8px 16px;\n}\n\n.messenger-compose-input {\n width: 100%;\n background: transparent;\n border: none;\n outline: none;\n color: white;\n font-size: 15px;\n line-height: 1.4;\n resize: none;\n max-height: 120px;\n font-family: inherit;\n}\n\n.messenger-compose-input::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-compose-send {\n width: 40px;\n height: 40px;\n background: #007aff;\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.messenger-compose-send:hover:not(:disabled) {\n background: #0066d6;\n transform: scale(1.05);\n}\n\n.messenger-compose-send:disabled {\n background: #3c3c3e;\n color: rgba(255, 255, 255, 0.3);\n cursor: not-allowed;\n}\n\n/* ========================================\n Help View\n ======================================== */\n\n.messenger-help-header {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n position: relative;\n}\n\n.messenger-help-header h2 {\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-header .messenger-close-btn {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.messenger-help-search {\n padding: 0 16px 16px;\n}\n\n.messenger-help-search-wrapper {\n display: flex;\n align-items: center;\n background: #2c2c2e;\n border-radius: 12px;\n padding: 14px 16px;\n position: relative;\n}\n\n.messenger-help-search-icon {\n position: absolute;\n right: 16px;\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-search-input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: white;\n font-size: 16px;\n font-family: inherit;\n padding-right: 32px;\n}\n\n.messenger-help-search-input::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-body {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n}\n\n.messenger-help-collections-header {\n font-size: 17px;\n font-weight: 600;\n color: white;\n padding: 12px 16px 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-help-collections {\n padding: 0;\n}\n\n.messenger-help-collection {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-help-collection:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-help-collection-content {\n flex: 1;\n min-width: 0;\n}\n\n.messenger-help-collection-title {\n margin: 0 0 2px;\n font-size: 14px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-collection-desc {\n margin: 0 0 2px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.3;\n}\n\n.messenger-help-collection-count {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-collection-arrow {\n color: rgba(255, 255, 255, 0.3);\n flex-shrink: 0;\n margin-left: 12px;\n}\n\n.messenger-help-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-help-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-help-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ========================================\n Changelog View\n ======================================== */\n\n.messenger-changelog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-changelog-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-changelog-subheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-changelog-latest {\n font-size: 12px;\n font-weight: 600;\n color: rgba(255, 255, 255, 0.5);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.messenger-changelog-team {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.6);\n}\n\n.messenger-changelog-body {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.messenger-changelog-card {\n background: #2c2c2e;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-changelog-card:hover {\n background: #3c3c3e;\n transform: translateY(-2px);\n}\n\n.messenger-changelog-cover {\n height: 120px;\n overflow: hidden;\n}\n\n.messenger-changelog-cover img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.messenger-changelog-content {\n padding: 16px;\n}\n\n.messenger-changelog-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.messenger-changelog-tag {\n font-size: 11px;\n font-weight: 600;\n color: white;\n background: rgba(88, 86, 214, 0.3);\n padding: 4px 10px;\n border-radius: 12px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.messenger-changelog-title {\n margin: 0 0 8px;\n font-size: 14px;\n font-weight: 600;\n color: white;\n line-height: 1.3;\n}\n\n.messenger-changelog-description {\n margin: 0 0 12px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n line-height: 1.4;\n}\n\n.messenger-changelog-meta {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.messenger-changelog-date {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-changelog-arrow {\n color: rgba(255, 255, 255, 0.3);\n}\n\n.messenger-changelog-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-changelog-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-changelog-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-changelog-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ========================================\n Navigation Tabs\n ======================================== */\n\n.messenger-panel-nav {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n background: #1c1c1e;\n}\n\n.messenger-nav {\n display: flex;\n padding: 8px 12px;\n gap: 4px;\n}\n\n.messenger-nav-tab {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n padding: 8px 4px;\n background: none;\n border: none;\n cursor: pointer;\n border-radius: 8px;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.messenger-nav-tab:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-nav-icon {\n color: rgba(255, 255, 255, 0.5);\n transition: color 0.2s ease;\n}\n\n.messenger-nav-home-icon {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.messenger-nav-home-icon > i:first-child {\n position: relative;\n}\n\n.messenger-nav-home-icon > i:last-child {\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n transition: color 0.2s ease, filter 0.2s ease;\n}\n\n.messenger-nav-tab:hover .messenger-nav-home-icon > i:last-child {\n color: #ffd700;\n filter: drop-shadow(0 0 4px #ffd700);\n}\n\n.messenger-nav-label {\n font-size: 14px;\n font-weight: 400;\n color: rgba(255, 255, 255, 0.5);\n transition: color 0.2s ease;\n}\n\n.messenger-nav-tab.active .messenger-nav-icon {\n color: white;\n}\n\n.messenger-nav-tab.active .messenger-nav-label {\n color: white;\n font-weight: 400;\n}\n\n.messenger-nav-badge {\n position: absolute;\n top: 4px;\n right: calc(50% - 16px);\n min-width: 16px;\n height: 16px;\n background: #ef4444;\n color: white;\n font-size: 10px;\n font-weight: 600;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n}\n\n/* ========================================\n Light Theme Overrides\n ======================================== */\n\n/* Panel */\n.theme-light .messenger-panel-content {\n background: #ffffff;\n}\n\n/* Home View */\n.theme-light .messenger-home-view {\n background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 40%);\n}\n\n.theme-light .messenger-home-header {\n background: linear-gradient(180deg, rgba(88, 86, 214, 0.1) 0%, transparent 100%);\n}\n\n.theme-light .messenger-home-greeting {\n color: #86868b;\n}\n\n.theme-light .messenger-home-question {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-message-btn {\n background: #f5f5f7;\n color: #1d1d1f;\n border: 1px solid #e0e0e0;\n}\n\n.theme-light .messenger-home-message-btn:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-home-message-btn svg,\n.theme-light .messenger-home-message-btn i {\n color: #86868b;\n}\n\n.theme-light .messenger-home-featured {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-home-featured-content h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-featured-content p {\n color: #86868b;\n}\n\n.theme-light .messenger-home-changelog-card {\n background: #f5f5f7;\n border: 1px solid #e0e0e0;\n}\n\n.theme-light .messenger-home-changelog-card-content {\n border-top-color: #e0e0e0;\n}\n\n.theme-light .messenger-home-changelog-card:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-home-changelog-card-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-changelog-card-desc {\n color: #6e6e73;\n}\n\n/* Close/Back buttons */\n.theme-light .messenger-close-btn,\n.theme-light .messenger-back-btn {\n color: #86868b;\n}\n\n.theme-light .messenger-close-btn:hover,\n.theme-light .messenger-back-btn:hover {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n/* Avatar */\n.theme-light .messenger-avatar {\n border-color: #ffffff;\n}\n\n/* Conversations View */\n.theme-light .messenger-conversations-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-header,\n.theme-light .messenger-help-header,\n.theme-light .messenger-changelog-header,\n.theme-light .messenger-chat-header {\n background: #ffffff;\n border-bottom-color: #e5e5e7;\n}\n\n.theme-light .messenger-conversations-header h2,\n.theme-light .messenger-help-header h2,\n.theme-light .messenger-changelog-header h2 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-conversations-body {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-footer {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-empty-icon,\n.theme-light .messenger-chat-empty-avatars,\n.theme-light .messenger-help-empty-icon,\n.theme-light .messenger-changelog-empty-icon {\n color: #c7c7cc;\n}\n\n.theme-light .messenger-conversations-empty h3,\n.theme-light .messenger-chat-empty h3,\n.theme-light .messenger-help-empty h3,\n.theme-light .messenger-changelog-empty h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-conversations-empty p,\n.theme-light .messenger-chat-empty p,\n.theme-light .messenger-help-empty p,\n.theme-light .messenger-changelog-empty p {\n color: #86868b;\n}\n\n.theme-light .messenger-conversation-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n\n.theme-light .messenger-conversation-title {\n color: #1d1d1f !important;\n}\n\n.theme-light .messenger-conversation-item.unread .messenger-conversation-title {\n color: #1d1d1f !important;\n font-weight: 400;\n}\n\n.theme-light .messenger-conversation-time {\n color: #86868b !important;\n}\n\n.theme-light .messenger-conversation-message {\n color: #6e6e73 !important;\n}\n\n.theme-light .messenger-conversation-item.unread .messenger-conversation-message {\n color: #3a3a3c !important;\n}\n\n.theme-light .messenger-chat-title,\n.theme-light .messenger-help-article-title,\n.theme-light .messenger-changelog-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-article-desc,\n.theme-light .messenger-changelog-description {\n color: #86868b;\n}\n\n.theme-light .messenger-conversations-footer {\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-new-message-btn {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n.theme-light .messenger-new-message-btn:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-new-message-btn svg,\n.theme-light .messenger-new-message-btn i {\n color: #86868b;\n}\n\n/* Chat View */\n.theme-light .messenger-chat-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-header {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-chat-messages {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-empty h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-chat-empty p {\n color: #86868b;\n}\n\n.theme-light .messenger-message-sender {\n color: #86868b;\n}\n\n.theme-light .messenger-message-received .messenger-message-bubble {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n.theme-light .messenger-message-own .messenger-message-bubble {\n background: #007aff;\n color: #ffffff;\n}\n\n.theme-light .messenger-message-time {\n color: #86868b;\n}\n\n.theme-light .messenger-chat-compose {\n background: #ffffff;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-compose-input-wrapper {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-compose-input {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-compose-input::placeholder {\n color: #86868b;\n}\n\n.theme-light .messenger-compose-send:disabled {\n background: #e5e5e7;\n color: #c7c7cc;\n}\n\n/* Help View */\n.theme-light .messenger-help-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-body {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-search {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-search-wrapper {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-help-search-icon {\n color: #86868b;\n}\n\n.theme-light .messenger-help-search-input {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-search-input::placeholder {\n color: #86868b;\n}\n\n.theme-light .messenger-help-collections-header {\n color: #1d1d1f;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-help-collection {\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-help-collection:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n\n.theme-light .messenger-help-collection-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-collection-desc {\n color: #6e6e73;\n}\n\n.theme-light .messenger-help-collection-count {\n color: #86868b;\n}\n\n.theme-light .messenger-help-collection-arrow {\n color: #c7c7cc;\n}\n\n/* Changelog View */\n.theme-light .messenger-changelog-subheader {\n border-bottom-color: #e5e5e7;\n}\n\n.theme-light .messenger-changelog-latest {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-team {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-card {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-changelog-card:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-changelog-tag {\n background: rgba(0, 122, 255, 0.15);\n color: #007aff;\n}\n\n.theme-light .messenger-changelog-date {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-arrow {\n color: #c7c7cc;\n}\n\n/* Navigation */\n.theme-light .messenger-panel-nav {\n background: #ffffff;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-nav-icon {\n color: #86868b;\n}\n\n.theme-light .messenger-nav-label {\n color: #86868b;\n}\n\n.theme-light .messenger-nav-tab:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.theme-light .messenger-nav-tab.active .messenger-nav-icon,\n.theme-light .messenger-nav-tab.active .messenger-nav-label {\n color: #007aff;\n}\n\n/* ========================================\n Responsive Design\n ======================================== */\n\n@media (max-width: 480px) {\n .messenger-panel {\n width: 100%;\n height: 100%;\n max-height: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n border-radius: 0;\n }\n\n .messenger-panel-content {\n border-radius: 0;\n }\n\n .messenger-launcher {\n bottom: 16px;\n right: 16px;\n }\n\n .messenger-launcher-bottom-left {\n left: 16px;\n }\n}\n\n/* ========================================\n Animations\n ======================================== */\n\n@keyframes messenger-slide-up {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes messenger-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .messenger-launcher-btn,\n .messenger-panel,\n .messenger-nav-tab,\n .messenger-conversation-item,\n .messenger-help-article,\n .messenger-changelog-card {\n transition: none;\n }\n}\n",document.head.appendChild(e)}}function M(){if("undefined"!=typeof window&&window.FeedbackSDKConfig){O();const e={...window.FeedbackSDKConfig},t=new L(e);t.init().then(n=>{if(window.FeedbackSDK.instance=t,window.FeedbackSDKConfig.autoCreate){(Array.isArray(window.FeedbackSDKConfig.autoCreate)?window.FeedbackSDKConfig.autoCreate:[window.FeedbackSDKConfig.autoCreate]).forEach(e=>{try{t.createWidget(e.type||"button",e).mount(e.container)}catch(e){console.error("[FeedbackSDK] Failed to create widget:",e)}})}if("undefined"!=typeof CustomEvent){const s=new CustomEvent("FeedbackSDKReady",{detail:{sdk:t,config:e,initData:n}});window.dispatchEvent(s)}}).catch(t=>{if(console.error("[FeedbackSDK] Auto-initialization failed:",t),"undefined"!=typeof CustomEvent){const n=new CustomEvent("FeedbackSDKError",{detail:{error:t,config:e,phase:"initialization"}});window.dispatchEvent(n)}})}}const I={FeedbackSDK:L,BaseWidget:u,ButtonWidget:f,TabWidget:z,InlineWidget:b,SurveyWidget:T,MessengerWidget:$,WidgetFactory:A,EventBus:d,APIService:c,SDKError:t,APIError:n,WidgetError:s,ConfigError:i,ValidationError:r,helpers:p,create:e=>(O(),new L(e)),version:"1.0.0",instance:null,isReady:()=>Boolean(I.instance),getInstance:()=>I.instance,setUserContext:e=>{I.instance?I.instance.setUserContext(e):"undefined"!=typeof window&&(window.FeedbackSDKUserContext=e)},initWithUser:async(e,t)=>{O();const n={...e,userContext:t},s=new L(n);return await s.init(),"undefined"!=typeof window&&(window.FeedbackSDK.instance=s),s},onReady:e=>{"undefined"!=typeof window&&(I.isReady()?e(I.instance):window.addEventListener("FeedbackSDKReady",t=>{e(t.detail.sdk,t.detail)},{once:!0}))},onError:e=>{"undefined"!=typeof window&&window.addEventListener("FeedbackSDKError",t=>{e(t.detail.error,t.detail)})},extractUserContext:L.extractUserContextFromAuth};"undefined"!=typeof window&&(window.FeedbackSDK=I,"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",M):setTimeout(M,0))),e.APIError=n,e.APIService=c,e.BaseWidget=u,e.ButtonWidget=f,e.ConfigError=i,e.EventBus=d,e.FeedbackSDK=L,e.InlineWidget=b,e.MessengerWidget=$,e.SDKError=t,e.SurveyWidget=T,e.TabWidget=z,e.ValidationError=r,e.WidgetError=s,e.WidgetFactory=A,e.default=I,e.helpers=p,Object.defineProperty(e,"__esModule",{value:!0})});
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FeedbackSDK={})}(this,function(e){"use strict";class t extends Error{constructor(e,n){super(e),this.name="SDKError",this.cause=n,Error.captureStackTrace&&Error.captureStackTrace(this,t)}}class n extends Error{constructor(e,t,s){super(t),this.name="APIError",this.status=e,this.response=s,Error.captureStackTrace&&Error.captureStackTrace(this,n)}isNetworkError(){return 0===this.status}isClientError(){return this.status>=400&&this.status<500}isServerError(){return this.status>=500&&this.status<600}}class s extends Error{constructor(e,t,n){super(e),this.name="WidgetError",this.widgetType=t,this.widgetId=n,Error.captureStackTrace&&Error.captureStackTrace(this,s)}}class i extends Error{constructor(e,t){super(e),this.name="ConfigError",this.configKey=t,Error.captureStackTrace&&Error.captureStackTrace(this,i)}}class r extends Error{constructor(e,t,n){super(e),this.name="ValidationError",this.field=t,this.value=n,Error.captureStackTrace&&Error.captureStackTrace(this,r)}}const o={primaryColor:"#21244A",backgroundColor:"#ffffff",textColor:"#1F2937",boardId:"feature-requests",size:"medium",displayMode:"modal"},a=[{id:"mock_nps_survey",type:"nps",title:"How likely are you to recommend us?",description:"Your feedback helps us improve",low_label:"Not likely",high_label:"Very likely",trigger:"manual",status:"active"},{id:"mock_csat_survey",type:"csat",title:"How satisfied are you?",description:"Rate your experience with our product",trigger:"manual",status:"active"},{id:"mock_ces_survey",type:"ces",title:"How easy was it?",description:"Rate the ease of completing your task",low_label:"Very difficult",high_label:"Very easy",trigger:"manual",status:"active"}],l={production:{base:"https://api.product7.io/api/v1",withWorkspace:e=>`https://${e}.api.product7.io/api/v1`},staging:{base:"https://staging.api.product7.io/api/v1",withWorkspace:e=>`https://${e}.staging.api.product7.io/api/v1`}};class c{constructor(e={}){if(this.workspace=e.workspace,this.sessionToken=null,this.sessionExpiry=null,this.userContext=e.userContext||null,this.mock=e.mock||!1,this.env=e.env||"production",e.apiUrl)this.baseURL=e.apiUrl;else{const e=l[this.env]||l.production;this.baseURL=this.workspace?e.withWorkspace(this.workspace):e.base}this._loadStoredSession()}async init(e=null){if(e&&(this.userContext=e),this.isSessionValid())return{sessionToken:this.sessionToken};if(!this.userContext||!this.workspace){const e=`Missing ${this.workspace?"user context":"workspace"} for initialization`;throw new n(400,e)}if(this.mock)return this.sessionToken="mock_session_"+Date.now(),this.sessionExpiry=new Date(Date.now()+36e5),this._storeSession(),{sessionToken:this.sessionToken,config:o,expiresIn:3600};const t={workspace:this.workspace,user:this.userContext};try{const e=await this._makeRequest("/widget/init",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}});return this.sessionToken=e.session_token,this.sessionExpiry=new Date(Date.now()+1e3*e.expires_in),this._storeSession(),{sessionToken:this.sessionToken,config:e.config||{},expiresIn:e.expires_in}}catch(e){throw new n(e.status||500,`Failed to initialize widget: ${e.message}`,e.response)}}async submitFeedback(e){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(this.mock)return await new Promise(e=>setTimeout(e,500)),{success:!0,data:{id:"mock_post_"+Date.now(),title:e.title,content:e.content},message:"Feedback submitted successfully!"};const t={board:e.board_id||e.board||e.boardId,title:e.title,content:e.content,attachments:e.attachments||[]};try{return await this._makeRequest("/widget/feedback",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.submitFeedback(e);throw new n(t.status||500,`Failed to submit feedback: ${t.message}`,t.response)}}async getActiveSurveys(e={}){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(this.mock)return await new Promise(e=>setTimeout(e,200)),{success:!0,data:a};try{const t=new URLSearchParams,n=e.url||("undefined"!=typeof window?window.location.href:"");n&&t.append("url",n);const s=this._getDeviceInfo();s.device&&t.append("device",s.device),s.browser&&t.append("browser",s.browser),s.os&&t.append("os",s.os),e.userProperties&&t.append("user_properties",JSON.stringify(e.userProperties));const i="/widget/surveys/active"+(t.toString()?"?"+t.toString():"");return await this._makeRequest(i,{method:"GET",headers:{Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.getActiveSurveys(e);throw new n(t.status||500,`Failed to get active surveys: ${t.message}`,t.response)}}_getDeviceInfo(){if("undefined"==typeof navigator)return{device:null,browser:null,os:null};const e=navigator.userAgent;let t="desktop";/Mobi|Android/i.test(e)&&(t=/Tablet|iPad/i.test(e)?"tablet":"mobile");let n="unknown";e.includes("Firefox")?n="firefox":e.includes("Edg")?n="edge":e.includes("Chrome")?n="chrome":e.includes("Safari")?n="safari":(e.includes("Opera")||e.includes("OPR"))&&(n="opera");let s="unknown";return e.includes("Windows")?s="windows":e.includes("Mac")?s="macos":e.includes("Linux")?s="linux":e.includes("Android")?s="android":(e.includes("iPhone")||e.includes("iPad"))&&(s="ios"),{device:t,browser:n,os:s}}async submitSurveyResponse(e,t){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(!e)throw new n(400,"Survey ID is required");if(this.mock)return await new Promise(e=>setTimeout(e,300)),{success:!0,data:{id:"mock_response_"+Date.now(),survey_id:e,...t},message:"Survey response submitted successfully!"};const s={rating:t.rating,feedback:t.feedback||"",answers:t.answers||{}};try{return await this._makeRequest(`/widget/surveys/${e}/responses`,{method:"POST",body:JSON.stringify(s),headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.sessionToken}`}})}catch(s){if(401===s.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.submitSurveyResponse(e,t);throw new n(s.status||500,`Failed to submit survey response: ${s.message}`,s.response)}}async dismissSurvey(e){if(this.isSessionValid()||await this.init(),!this.sessionToken)throw new n(401,"No valid session token available");if(!e)throw new n(400,"Survey ID is required");if(this.mock)return await new Promise(e=>setTimeout(e,100)),{success:!0,message:"Survey dismissed successfully"};try{return await this._makeRequest(`/widget/surveys/${e}/dismiss`,{method:"POST",headers:{Authorization:`Bearer ${this.sessionToken}`}})}catch(t){if(401===t.status)return this.sessionToken=null,this.sessionExpiry=null,await this.init(),this.dismissSurvey(e);throw new n(t.status||500,`Failed to dismiss survey: ${t.message}`,t.response)}}isSessionValid(){return this.sessionToken&&this.sessionExpiry&&new Date<this.sessionExpiry}setUserContext(e){this.userContext=e,"undefined"!=typeof localStorage&&localStorage.setItem("feedbackSDK_userContext",JSON.stringify(e))}getUserContext(){return this.userContext}clearSession(){this.sessionToken=null,this.sessionExpiry=null,"undefined"!=typeof localStorage&&(localStorage.removeItem("feedbackSDK_session"),localStorage.removeItem("feedbackSDK_userContext"))}_storeSession(){if("undefined"!=typeof localStorage)try{const e={token:this.sessionToken,expiry:this.sessionExpiry.toISOString(),workspace:this.workspace};localStorage.setItem("feedbackSDK_session",JSON.stringify(e))}catch(e){}}_loadStoredSession(){if("undefined"==typeof localStorage)return!1;try{const e=localStorage.getItem("feedbackSDK_session");if(!e)return!1;const t=JSON.parse(e);return this.sessionToken=t.token,this.sessionExpiry=new Date(t.expiry),this.isSessionValid()}catch(e){return!1}}async _makeRequest(e,t={}){const s=`${this.baseURL}${e}`;try{const e=await fetch(s,t);if(!e.ok){let t=`HTTP ${e.status}`,s=null;try{s=await e.json(),t=s.message||s.error||t}catch(n){t=await e.text()||t}throw new n(e.status,t,s)}const i=e.headers.get("content-type");return i&&i.includes("application/json")?await e.json():await e.text()}catch(e){if(e instanceof n)throw e;throw new n(0,e.message,null)}}}class d{constructor(){this.events=new Map}on(e,t){return this.events.has(e)||this.events.set(e,[]),this.events.get(e).push(t),()=>this.off(e,t)}off(e,t){const n=this.events.get(e);if(n){const e=n.indexOf(t);e>-1&&n.splice(e,1)}}emit(e,t){const n=this.events.get(e);n&&n.forEach(e=>{try{e(t)}catch(e){console.error("[FeedbackSDK] Event callback error:",e)}})}once(e,t){const n=this.on(e,e=>{t(e),n()});return n}clear(){this.events.clear()}getListenerCount(e){const t=this.events.get(e);return t?t.length:0}}function h(e="feedback"){return`${e}_${Date.now()}_${Math.random().toString(36).substring(2,9)}`}function m(e,t){const n={...e};for(const s in t)t.hasOwnProperty(s)&&(t[s]&&"object"==typeof t[s]&&!Array.isArray(t[s])?n[s]=m(e[s]||{},t[s]):n[s]=t[s]);return n}function g(){return"undefined"!=typeof window&&"undefined"!=typeof document}var p=Object.freeze({__proto__:null,debounce:function(e,t){let n;return function(...s){clearTimeout(n),n=setTimeout(()=>{clearTimeout(n),e(...s)},t)}},deepMerge:m,delay:function(e){return new Promise(t=>setTimeout(t,e))},escapeRegex:function(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")},formatFileSize:function(e){if(0===e)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]},generateId:h,getBrowserInfo:function(){return{userAgent:navigator.userAgent,platform:navigator.platform,language:navigator.language||navigator.userLanguage,cookieEnabled:navigator.cookieEnabled,screenResolution:`${screen.width}x${screen.height}`,windowSize:`${window.innerWidth}x${window.innerHeight}`,timezone:Intl.DateTimeFormat().resolvedOptions().timeZone}},getCSSProperty:function(e,t,n=""){if(!e||!t)return n;try{return window.getComputedStyle(e).getPropertyValue(t)||n}catch(e){return n}},getCurrentTimestamp:function(){return(new Date).toISOString()},getNestedProperty:function(e,t,n=void 0){if(!e||!t)return n;const s=t.split(".");let i=e;for(const e of s){if(null==i||!(e in i))return n;i=i[e]}return i},isBrowser:g,isInViewport:function(e){if(!e)return!1;const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)},isMobile:function(){return!!g()&&(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)||window.innerWidth<=768)},isValidEmail:function(e){return!(!e||"string"!=typeof e)&&/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim())},safeJsonParse:function(e,t=null){try{return JSON.parse(e)}catch(e){return t}},sanitizeHTML:function(e){if(!e||"string"!=typeof e)return"";const t=document.createElement("div");return t.textContent=e,t.innerHTML},scrollToElement:function(e,t={}){if(!e)return;e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest",...t})},setNestedProperty:function(e,t,n){if(!e||!t)return e;const s=t.split("."),i=s.pop();let r=e;for(const e of s)e in r&&"object"==typeof r[e]||(r[e]={}),r=r[e];return r[i]=n,e},throttle:function(e,t){let n,s;return function(...i){s?(clearTimeout(n),n=setTimeout(()=>{Date.now()-s>=t&&(e(...i),s=Date.now())},t-(Date.now()-s))):(e(...i),s=Date.now())}},validateConfig:function(e,t=[]){const n=[];for(const s of t)e[s]||n.push(s);if(n.length>0)throw new Error(`Missing required configuration: ${n.join(", ")}`);return!0}});class u{constructor(e={}){this.id=e.id,this.sdk=e.sdk,this.apiService=e.apiService,this.type=e.type||"base",this.options={container:null,position:this.sdk.config.position,boardId:this.sdk.config.boardId,displayMode:e.displayMode||"panel",size:e.size||"medium",primaryColor:e.primaryColor||"#21244A",backgroundColor:e.backgroundColor||"#ffffff",textColor:e.textColor||"#1F2937",autoShow:!1,showBackdrop:!0,customStyles:{},...e},this.element=null,this.panelElement=null,this.backdropElement=null,this.mounted=!1,this.destroyed=!1,this.state={isOpen:!1,isLoading:!1,isSubmitting:!1,title:"",content:"",email:"",attachments:[],errors:{}},this._bindMethods()}mount(e){return this.mounted||this.destroyed||("string"==typeof e&&(e=document.querySelector(e)),e||(e=document.body),this.container=e,this.element=this._render(),this.container.appendChild(this.element),this.mounted=!0,this._attachEvents(),this.onMount(),this.options.autoShow&&this.show(),this.sdk.eventBus.emit("widget:mounted",{widget:this})),this}show(){return this.element&&(this.element.style.display="block"),this}hide(){return this.element&&(this.element.style.display="none"),this}openPanel(){this.state.isOpen=!0,"modal"===this.options.displayMode?(this._showLoadingModal(),setTimeout(()=>{this._hideLoadingModal(),this._renderPanel(),requestAnimationFrame(()=>{this.panelElement&&this.panelElement.classList.add("open"),this.backdropElement&&this.backdropElement.classList.add("show")})},600)):(this._renderPanel(),requestAnimationFrame(()=>{this.panelElement&&this.panelElement.classList.add("open"),this.backdropElement&&this.backdropElement.classList.add("show")}))}_showLoadingModal(){this.state.isLoading=!0,this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-panel-backdrop",document.body.appendChild(this.backdropElement),this.loadingElement=document.createElement("div"),this.loadingElement.className=`feedback-loading-modal theme-${this.options.theme}`,this.loadingElement.innerHTML='\n\t\t\t<div class="feedback-loading-spinner"></div>\n\t\t',document.body.appendChild(this.loadingElement),requestAnimationFrame(()=>{this.backdropElement.classList.add("show"),this.loadingElement.classList.add("show")})}_hideLoadingModal(){this.state.isLoading=!1,this.loadingElement&&(this.loadingElement.remove(),this.loadingElement=null)}closePanel(){this.panelElement&&this.panelElement.classList.remove("open"),this.backdropElement&&this.backdropElement.classList.remove("show"),setTimeout(()=>{this.state.isOpen=!1,this.panelElement&&this.panelElement.parentNode&&(this.panelElement.parentNode.removeChild(this.panelElement),this.panelElement=null),this.backdropElement&&this.backdropElement.parentNode&&(this.backdropElement.parentNode.removeChild(this.backdropElement),this.backdropElement=null),this._resetForm()},300)}async submitFeedback(){if(!this.state.isSubmitting){this._hideError();try{this.state.isSubmitting=!0,this._updateSubmitButton();const e={title:this.state.title||"Feedback",content:this.state.content,email:this.state.email,board_id:this.options.boardId,attachments:this.state.attachments};if(!this.state.content.trim())return void this._showError("Please enter your feedback message.");const t=await this.apiService.submitFeedback(e);this._showSuccessMessage(),this.closePanel(),this.sdk.eventBus.emit("feedback:submitted",{widget:this,feedback:t})}catch(e){this._showError("Failed to submit feedback. Please try again."),this.sdk.eventBus.emit("feedback:error",{widget:this,error:e})}finally{this.state.isSubmitting=!1,this._updateSubmitButton()}}}handleConfigUpdate(e){this.options.theme=e.theme,this.element&&this._updateTheme()}destroy(){this.destroyed||(this.onDestroy(),this.closePanel(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element),this.destroyed=!0,this.mounted=!1,this.sdk.eventBus.emit("widget:destroyed",{widget:this}))}onMount(){}onDestroy(){}_render(){throw new Error("_render() must be implemented by concrete widget")}_attachEvents(){}_bindMethods(){this.openPanel=this.openPanel.bind(this),this.closePanel=this.closePanel.bind(this),this.submitFeedback=this.submitFeedback.bind(this)}_renderPanel(){if(this.panelElement)return;this.options.showBackdrop&&!this.backdropElement&&(this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-panel-backdrop",document.body.appendChild(this.backdropElement),this.backdropElement.addEventListener("click",this.closePanel));const e="modal"===this.options.displayMode?"feedback-modal":"feedback-panel",t=`size-${this.options.size}`;this.panelElement=document.createElement("div"),this.panelElement.className=`${e} ${t}`,this.panelElement.style.setProperty("--primary-color",this.options.primaryColor),this.panelElement.style.setProperty("--bg-color",this.options.backgroundColor),this.panelElement.style.setProperty("--text-color",this.options.textColor),this.panelElement.innerHTML=this._getPanelHTML(),document.body.appendChild(this.panelElement),this._attachPanelEvents();const n=this.panelElement.querySelector("input, textarea");n&&setTimeout(()=>n.focus(),350)}_getPanelHTML(){return`\n <div class="feedback-panel-content">\n <div class="feedback-panel-header">\n <h3>Send Feedback</h3>\n <button class="feedback-panel-close" type="button" aria-label="Close">&times;</button>\n </div>\n <div class="feedback-panel-body">\n <form class="feedback-form">\n <div class="feedback-form-group">\n <label for="feedback-title-${this.id}">Title (optional)</label>\n <input \n type="text" \n id="feedback-title-${this.id}" \n name="title" \n placeholder="Brief description of your feedback"\n value="${this.state.title}"\n />\n </div>\n <div class="feedback-form-group">\n <label for="feedback-content-${this.id}">Message *</label>\n <textarea \n id="feedback-content-${this.id}" \n name="content" \n placeholder="Tell us what you think..."\n required\n >${this.state.content}</textarea>\n </div>\n <div class="feedback-error" role="alert"></div>\n <div class="feedback-form-actions">\n <button type="submit" class="feedback-btn feedback-btn-submit">\n ${this.state.isSubmitting?"Sending...":"Send Feedback"}\n </button>\n </div>\n </form>\n </div>\n </div>\n `}_attachPanelEvents(){const e=this.panelElement;e.querySelector(".feedback-panel-close").addEventListener("click",this.closePanel);e.querySelector(".feedback-form").addEventListener("submit",e=>{e.preventDefault(),this.submitFeedback()}),e.querySelector('input[name="title"]').addEventListener("input",e=>{this.state.title=e.target.value}),e.querySelector('textarea[name="content"]').addEventListener("input",e=>{this.state.content=e.target.value});const t=e=>{"Escape"===e.key&&(this.closePanel(),document.removeEventListener("keydown",t))};document.addEventListener("keydown",t)}_updateSubmitButton(){if(this.panelElement){const e=this.panelElement.querySelector(".feedback-btn-submit");e&&(e.textContent=this.state.isSubmitting?"Sending...":"Send Feedback",e.disabled=this.state.isSubmitting)}}_showError(e){if(this.panelElement){const t=this.panelElement.querySelector(".feedback-error");t&&(t.textContent=e,t.classList.add("show"))}}_hideError(){if(this.panelElement){const e=this.panelElement.querySelector(".feedback-error");e&&e.classList.remove("show")}}_showSuccessMessage(){const e=document.createElement("div");e.className="feedback-success-notification",e.innerHTML='\n <div class="feedback-success-content">\n <div class="feedback-success-icon">✓</div>\n <span>Feedback submitted successfully!</span>\n <button class="feedback-success-close" aria-label="Close">&times;</button>\n </div>\n ',document.body.appendChild(e);const t=()=>{e.parentNode&&(e.style.opacity="0",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},300))};e.querySelector(".feedback-success-close").addEventListener("click",t),setTimeout(t,4e3)}_resetForm(){this.state.title="",this.state.content="",this.state.email="",this.state.errors={}}_updateTheme(){this.element&&(this.element.className=this.element.className.replace(/theme-\w+/,`theme-${this.options.theme}`)),this.panelElement&&(this.panelElement.className=this.panelElement.className.replace(/theme-\w+/,`theme-${this.options.theme}`))}openModal(){this.openPanel()}closeModal(){this.closePanel()}}class f extends u{constructor(e){super({...e,type:"button"}),this.isMinimized=!1}render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-button theme-${this.options.theme} position-${this.options.position}`,e.innerHTML='\n <button class="feedback-trigger-btn" type="button">\n <svg class="feedback-icon" width="20" height="20" viewBox="0 0 256 256" fill="currentColor">\n <path d="M216,80H184V48a16,16,0,0,0-16-16H40A16,16,0,0,0,24,48V176a8,8,0,0,0,13,6.22L72,154V184a16,16,0,0,0,16,16h93.59L219,230.22a8,8,0,0,0,5,1.78,8,8,0,0,0,8-8V96A16,16,0,0,0,216,80ZM66.55,137.78,40,159.25V48H168v88H71.58A8,8,0,0,0,66.55,137.78ZM216,207.25l-26.55-21.47a8,8,0,0,0-5-1.78H88V152h80a16,16,0,0,0,16-16V96h32Z"/>\n </svg>\n <span class="feedback-text">Feedback</span>\n \n <div class="feedback-minimize-icon">\n <svg viewBox="0 0 256 256">\n <path d="M213.66,53.66,163.31,104H192a8,8,0,0,1,0,16H144a8,8,0,0,1-8-8V64a8,8,0,0,1,16,0V92.69l50.34-50.35a8,8,0,0,1,11.32,11.32ZM112,136H64a8,8,0,0,0,0,16H92.69L42.34,202.34a8,8,0,0,0,11.32,11.32L104,163.31V192a8,8,0,0,0,16,0V144A8,8,0,0,0,112,136Z"/>\n </svg>\n </div>\n \n <div class="feedback-expand-icon">\n <svg viewBox="0 0 256 256">\n <path d="M112,40V64.69L61.66,14.34A8,8,0,0,0,50.34,25.66L100.69,76H72a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V36A8,8,0,0,0,112,40Zm131.06,70.61a8,8,0,0,0-8.72,1.73L184,162.69V136a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8h48a8,8,0,0,0,0-16H195.31l50.35-50.34A8,8,0,0,0,243.06,110.61Z"/>\n </svg>\n </div>\n </button>\n ',this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}attachEvents(){const e=this.element.querySelector(".feedback-trigger-btn"),t=this.element.querySelector(".feedback-minimize-icon"),n=this.element.querySelector(".feedback-expand-icon");t.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault(),this.minimize()}),n.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault(),this.restore()}),e.addEventListener("click",e=>{e.target.closest(".feedback-minimize-icon")||e.target.closest(".feedback-expand-icon")||this.isMinimized||this.openPanel()}),e.addEventListener("mouseenter",()=>{this.state.isSubmitting||this.isMinimized||(e.style.transform="translateY(-2px)")}),e.addEventListener("mouseleave",()=>{this.isMinimized||(e.style.transform="translateY(0)")})}minimize(){this.isMinimized=!0,this.element.classList.add("minimized")}restore(){this.isMinimized=!1,this.element.classList.remove("minimized")}mount(e){super.mount(e)}updateText(e){const t=this.element?.querySelector(".feedback-text");t&&(t.textContent=e)}updatePosition(e){this.options.position=e,this.element&&(this.element.className=this.element.className.replace(/position-\w+-\w+/,`position-${e}`))}}class b extends u{constructor(e){super({...e,type:"inline"})}_render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-inline theme-${this.options.theme}`,e.innerHTML=`\n <div class="feedback-inline-content">\n <h3>Send us your feedback</h3>\n <form class="feedback-inline-form">\n <div class="feedback-form-group">\n <input \n type="text" \n name="title" \n placeholder="Title (optional)"\n value="${this.state.title}"\n />\n </div>\n <div class="feedback-form-group">\n <textarea \n name="content" \n placeholder="Your feedback..."\n required\n >${this.state.content}</textarea>\n </div>\n <div class="feedback-form-group">\n <input \n type="email" \n name="email" \n placeholder="Email (optional)"\n value="${this.state.email}"\n />\n </div>\n <button type="submit" class="feedback-btn feedback-btn-submit">\n Send Feedback\n </button>\n <div class="feedback-error" style="display: none;"></div>\n </form>\n </div>\n `,this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}_attachEvents(){const e=this.element.querySelector(".feedback-inline-form");e.addEventListener("submit",e=>{e.preventDefault(),this.submitFeedback()}),e.querySelector('input[name="title"]').addEventListener("input",e=>{this.state.title=e.target.value}),e.querySelector('textarea[name="content"]').addEventListener("input",e=>{this.state.content=e.target.value}),e.querySelector('input[name="email"]').addEventListener("input",e=>{this.state.email=e.target.value})}openModal(){const e=this.element.querySelector('textarea[name="content"]');e&&e.focus()}closeModal(){}_showSuccessMessage(){const e=this.element.querySelector(".feedback-inline-content"),t=e.innerHTML;e.innerHTML='\n <div class="feedback-success">\n <div class="feedback-success-icon">✓</div>\n <h3>Thank you!</h3>\n <p>Your feedback has been submitted successfully.</p>\n <button class="feedback-btn feedback-btn-reset">Send Another</button>\n </div>\n ';e.querySelector(".feedback-btn-reset").addEventListener("click",()=>{e.innerHTML=t,this._attachEvents(),this._resetForm()})}_showError(e){const t=this.element.querySelector(".feedback-error");t&&(t.textContent=e,t.style.display="block",setTimeout(()=>{t&&(t.style.display="none")},5e3))}_updateSubmitButton(){const e=this.element.querySelector(".feedback-btn-submit");e&&(e.textContent=this.state.isSubmitting?"Sending...":"Send Feedback",e.disabled=this.state.isSubmitting)}updateTitle(e){const t=this.element?.querySelector("h3");t&&(t.textContent=e)}setPlaceholder(e,t){const n=this.element?.querySelector(`[name="${e}"]`);n&&(n.placeholder=t)}}class v{constructor(e={}){this.currentView="home",this.isOpen=!1,this.unreadCount=0,this.activeConversationId=null,this.conversations=[],this.messages={},this.helpArticles=[],this.helpSearchQuery="",this.homeChangelogItems=[],this.changelogItems=[],this.teamName=e.teamName||"Support",this.teamAvatars=e.teamAvatars||[],this.welcomeMessage=e.welcomeMessage||"How can we help?",this.userContext=e.userContext||null,this.enableHelp=!1!==e.enableHelp,this.enableChangelog=!1!==e.enableChangelog,this._listeners=new Set}subscribe(e){return this._listeners.add(e),()=>this._listeners.delete(e)}_notify(e,t){this._listeners.forEach(n=>n(e,t,this))}setView(e){const t=this.currentView;this.currentView=e,this._notify("viewChange",{previousView:t,currentView:e})}setOpen(e){this.isOpen=e,this._notify("openChange",{isOpen:e})}setActiveConversation(e){this.activeConversationId=e,this._notify("conversationChange",{conversationId:e})}setConversations(e){this.conversations=e,this._updateUnreadCount(),this._notify("conversationsUpdate",{conversations:e})}addConversation(e){this.conversations.unshift(e),this._updateUnreadCount(),this._notify("conversationAdded",{conversation:e})}setMessages(e,t){this.messages[e]=t,this._notify("messagesUpdate",{conversationId:e,messages:t})}addMessage(e,t){this.messages[e]||(this.messages[e]=[]),this.messages[e].push(t);const n=this.conversations.find(t=>t.id===e);n&&(n.lastMessage=t.content,n.lastMessageTime=t.timestamp,t.isOwn||(n.unread=(n.unread||0)+1,this._updateUnreadCount())),this._notify("messageAdded",{conversationId:e,message:t})}markAsRead(e){const t=this.conversations.find(t=>t.id===e);t&&t.unread>0&&(t.unread=0,this._updateUnreadCount(),this._notify("conversationRead",{conversationId:e}))}_updateUnreadCount(){this.unreadCount=this.conversations.reduce((e,t)=>e+(t.unread||0),0),this._notify("unreadCountChange",{count:this.unreadCount})}setHelpArticles(e){this.helpArticles=e,this._notify("helpArticlesUpdate",{articles:e})}setHelpSearchQuery(e){this.helpSearchQuery=e,this._notify("helpSearchChange",{query:e})}setHomeChangelogItems(e){this.homeChangelogItems=e,this._notify("homeChangelogUpdate",{items:e})}setChangelogItems(e){this.changelogItems=e,this._notify("changelogUpdate",{items:e})}getActiveConversation(){return this.conversations.find(e=>e.id===this.activeConversationId)}getActiveMessages(){return this.messages[this.activeConversationId]||[]}getFilteredHelpArticles(){if(!this.helpSearchQuery)return this.helpArticles;const e=this.helpSearchQuery.toLowerCase();return this.helpArticles.filter(t=>t.title.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e))}reset(){this.currentView="home",this.activeConversationId=null,this.helpSearchQuery="",this._notify("reset",{})}}class y{constructor(e,t={}){this.state=e,this.options={position:t.position||"bottom-right",primaryColor:t.primaryColor||"#1c1c1e",...t},this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className=`messenger-launcher messenger-launcher-${this.options.position}`,this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe((e,t)=>{"openChange"===e&&this._updateIcon(),"unreadCountChange"===e&&this._updateBadge()}),this.element}_updateContent(){const e=this.state.unreadCount>0?`<span class="messenger-launcher-badge">${this.state.unreadCount>9?"9+":this.state.unreadCount}</span>`:"";this.element.innerHTML=`\n\t\t\t<button class="messenger-launcher-btn" aria-label="Open messenger" style="background: ${this.options.primaryColor};">\n\t\t\t\t<span class="messenger-launcher-icon messenger-launcher-icon-chat">\n\t\t\t\t\t<i class="ph ph-chat-circle-dots" style="font-size: 24px;"></i>\n\t\t\t\t</span>\n\t\t\t\t<span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 24px;"></i>\n\t\t\t\t</span>\n\t\t\t\t${e}\n\t\t\t</button>\n\t\t`}_attachEvents(){this.element.querySelector(".messenger-launcher-btn").addEventListener("click",()=>{this.state.setOpen(!this.state.isOpen)})}_updateIcon(){const e=this.element.querySelector(".messenger-launcher-icon-chat"),t=this.element.querySelector(".messenger-launcher-icon-close");this.state.isOpen?(e.style.display="none",t.style.display="flex",this.element.classList.add("messenger-launcher-open")):(e.style.display="flex",t.style.display="none",this.element.classList.remove("messenger-launcher-open"))}_updateBadge(){const e=this.element.querySelector(".messenger-launcher-badge");if(e&&e.remove(),this.state.unreadCount>0&&!this.state.isOpen){const e=document.createElement("span");e.className="messenger-launcher-badge",e.textContent=this.state.unreadCount>9?"9+":this.state.unreadCount,this.element.querySelector(".messenger-launcher-btn").appendChild(e)}}show(){this.element&&(this.element.style.display="block")}hide(){this.element&&(this.element.style.display="none")}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class x{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-nav",this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe(e=>{"viewChange"!==e&&"unreadCountChange"!==e||this._updateActiveTab()}),this.element}_getTabs(){const e=[{id:"home",label:"Home",icon:this._getHomeIcon()},{id:"messages",label:"Messages",icon:this._getMessagesIcon(),badge:this.state.unreadCount}];return this.state.enableHelp&&e.push({id:"help",label:"Help",icon:this._getHelpIcon()}),this.state.enableChangelog&&e.push({id:"changelog",label:"Changelog",icon:this._getChangelogIcon()}),e}_updateContent(){const e=this._getTabs().map(e=>{const t=this.state.currentView===e.id,n=e.badge&&e.badge>0?`<span class="messenger-nav-badge">${e.badge>9?"9+":e.badge}</span>`:"";return`\n\t\t\t\t<button class="messenger-nav-tab ${t?"active":""}" data-tab="${e.id}">\n\t\t\t\t\t<span class="messenger-nav-icon">${e.icon}</span>\n\t\t\t\t\t<span class="messenger-nav-label">${e.label}</span>\n\t\t\t\t\t${n}\n\t\t\t\t</button>\n\t\t\t`}).join("");this.element.innerHTML=e}_attachEvents(){this.element.addEventListener("click",e=>{const t=e.target.closest(".messenger-nav-tab");if(t){const e=t.dataset.tab;this.state.setView(e)}})}_updateActiveTab(){this.element.querySelectorAll(".messenger-nav-tab").forEach(e=>{const t=e.dataset.tab===this.state.currentView;if(e.classList.toggle("active",t),"messages"===e.dataset.tab){const t=e.querySelector(".messenger-nav-badge");if(t&&t.remove(),this.state.unreadCount>0){const t=document.createElement("span");t.className="messenger-nav-badge",t.textContent=this.state.unreadCount>9?"9+":this.state.unreadCount,e.appendChild(t)}}})}_getHomeIcon(){return'<i class="ph-duotone ph-house-simple" style="font-size: 24px;"></i>'}_getMessagesIcon(){return'<i class="ph-duotone ph-chat" style="font-size: 24px;"></i>'}_getHelpIcon(){return'<i class="ph-duotone ph-question" style="font-size: 24px;"></i>'}_getChangelogIcon(){return'<i class="ph-duotone ph-megaphone" style="font-size: 24px;"></i>'}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class w{constructor(e,t={}){this.state=e,this.options={position:t.position||"bottom-right",theme:t.theme||"dark",...t},this.element=null,this.navigationTabs=null,this.currentViewComponent=null,this.viewRegistry={},this._unsubscribe=null}registerView(e,t){this.viewRegistry[e]=t}render(){this.element=document.createElement("div"),this.element.className=`messenger-panel messenger-panel-${this.options.position} theme-${this.options.theme}`,this.element.innerHTML='\n\t\t\t<div class="messenger-panel-content">\n\t\t\t\t<div class="messenger-panel-views"></div>\n\t\t\t\t<div class="messenger-panel-nav"></div>\n\t\t\t</div>\n\t\t',this.navigationTabs=new x(this.state,this.options);return this.element.querySelector(".messenger-panel-nav").appendChild(this.navigationTabs.render()),this._renderCurrentView(),this._unsubscribe=this.state.subscribe(e=>{"viewChange"===e&&this._renderCurrentView()}),this.element}_renderCurrentView(){const e=this.element.querySelector(".messenger-panel-views");this.currentViewComponent&&this.currentViewComponent.destroy&&this.currentViewComponent.destroy(),e.innerHTML="";const t=this.viewRegistry[this.state.currentView];t?(this.currentViewComponent=new t(this.state,this.options),e.appendChild(this.currentViewComponent.render())):e.innerHTML=`<div class="messenger-view-placeholder">View not found: ${this.state.currentView}</div>`}show(){this.element&&(this.element.style.display="block",requestAnimationFrame(()=>{this.element.classList.add("open")}))}hide(){this.element&&(this.element.classList.remove("open"),setTimeout(()=>{this.element&&(this.element.style.display="none")},300))}setHeader(e){const t=this.element.querySelector(".messenger-panel-header");t&&(t.innerHTML=e)}destroy(){this._unsubscribe&&this._unsubscribe(),this.navigationTabs&&this.navigationTabs.destroy(),this.currentViewComponent&&this.currentViewComponent.destroy&&this.currentViewComponent.destroy(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class k{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-changelog-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"changelogUpdate"===e&&this._updateChangelogList()}),this.element}_updateContent(){const e=this._renderTeamAvatars();this.element.innerHTML=`\n\t\t\t<div class="messenger-changelog-header">\n\t\t\t\t<h2>Changelog</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-changelog-subheader">\n\t\t\t\t<span class="messenger-changelog-latest">Latest</span>\n\t\t\t\t<div class="messenger-changelog-team">\n\t\t\t\t\t<span>From ${this.state.teamName}</span>\n\t\t\t\t\t${e}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-changelog-body">\n\t\t\t\t<div class="messenger-changelog-list"></div>\n\t\t\t</div>\n\t\t`,this._updateChangelogList(),this._attachEvents()}_updateChangelogList(){const e=this.element.querySelector(".messenger-changelog-list"),t=this.state.changelogItems;0!==t.length?(e.innerHTML=t.map(e=>this._renderChangelogCard(e)).join(""),this._attachChangelogEvents()):e.innerHTML=this._renderEmptyState()}_renderChangelogCard(e){const t=e.tags&&e.tags.length>0?`<div class="messenger-changelog-tags">\n\t\t\t\t${e.tags.map(e=>`<span class="messenger-changelog-tag">${e}</span>`).join("")}\n\t\t\t</div>`:"",n=this._formatDate(e.publishedAt||e.date);return`\n\t\t\t<div class="messenger-changelog-card" data-changelog-id="${e.id}">\n\t\t\t\t${e.coverImage?`\n\t\t\t\t\t<div class="messenger-changelog-cover">\n\t\t\t\t\t\t<img src="${e.coverImage}" alt="${e.title}" onerror="this.style.display='none';" />\n\t\t\t\t\t</div>\n\t\t\t\t`:""}\n\t\t\t\t<div class="messenger-changelog-content">\n\t\t\t\t\t${t}\n\t\t\t\t\t<h3 class="messenger-changelog-title">${e.title}</h3>\n\t\t\t\t\t${e.description?`<p class="messenger-changelog-description">${this._truncateText(e.description,100)}</p>`:""}\n\t\t\t\t\t<div class="messenger-changelog-meta">\n\t\t\t\t\t\t<span class="messenger-changelog-date">${n}</span>\n\t\t\t\t\t\t<i class="ph ph-caret-right messenger-changelog-arrow" style="font-size: 16px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderTeamAvatars(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack messenger-avatar-stack-tiny">\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-tiny" style="background: #5856d6;">S</div>\n\t\t\t\t</div>\n\t\t\t';const t=["#5856d6","#007aff","#34c759"];return`<div class="messenger-avatar-stack messenger-avatar-stack-tiny">${e.slice(0,2).map((e,n)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar messenger-avatar-tiny" src="${e}" alt="Team member" style="z-index: ${2-n};" />`:`<div class="messenger-avatar messenger-avatar-tiny" style="background: ${t[n%t.length]}; z-index: ${2-n};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_renderEmptyState(){return'\n\t\t\t<div class="messenger-changelog-empty">\n\t\t\t\t<div class="messenger-changelog-empty-icon">\n\t\t\t\t\t<i class="ph ph-megaphone" style="font-size: 48px;"></i>\n\t\t\t\t</div>\n\t\t\t\t<h3>No changelog yet</h3>\n\t\t\t\t<p>Check back later for updates</p>\n\t\t\t</div>\n\t\t'}_formatDate(e){if(!e)return"";return new Date(e).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})}_truncateText(e,t){return e?e.length<=t?e:e.substring(0,t).trim()+"...":""}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)}),this._attachChangelogEvents()}_attachChangelogEvents(){this.element.querySelectorAll(".messenger-changelog-card").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.changelogId,n=this.state.changelogItems.find(e=>e.id===t);n&&n.url?window.open(n.url,"_blank"):this.options.onChangelogClick&&this.options.onChangelogClick(n)})})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class S{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-chat-view",this._updateContent(),this._unsubscribe=this.state.subscribe((e,t)=>{"messageAdded"===e&&t.conversationId===this.state.activeConversationId&&(this._appendMessage(t.message),this._scrollToBottom())}),this.element}_updateContent(){const e=this.state.getActiveConversation(),t=this.state.getActiveMessages(),n=0===t.length?this._renderEmptyState():t.map(e=>this._renderMessage(e)).join(""),s=this._renderConversationAvatar(e);this.element.innerHTML=`\n\t\t\t<div class="messenger-chat-header">\n\t\t\t\t<button class="messenger-back-btn" aria-label="Back">\n\t\t\t\t\t<i class="ph ph-caret-left" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t\t<div class="messenger-chat-header-info">\n\t\t\t\t\t${s}\n\t\t\t\t\t<span class="messenger-chat-title">${e?.title||"Chat with team"}</span>\n\t\t\t\t</div>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-chat-messages">\n\t\t\t\t${n}\n\t\t\t</div>\n\n\t\t\t<div class="messenger-chat-compose">\n\t\t\t\t<div class="messenger-compose-input-wrapper">\n\t\t\t\t\t<textarea class="messenger-compose-input" placeholder="Write a message..." rows="1"></textarea>\n\t\t\t\t</div>\n\t\t\t\t<button class="messenger-compose-send" aria-label="Send" disabled>\n\t\t\t\t\t<i class="ph ph-paper-plane-tilt" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t`,this._attachEvents(),this._scrollToBottom()}_renderEmptyState(){return`\n\t\t\t<div class="messenger-chat-empty">\n\t\t\t\t<div class="messenger-chat-empty-avatars">${this._renderTeamAvatars()}</div>\n\t\t\t\t<h3>Start the conversation</h3>\n\t\t\t\t<p>Send us a message and we'll get back to you as soon as possible.</p>\n\t\t\t</div>\n\t\t`}_renderMessage(e){const t=e.isOwn,n=t?"messenger-message-own":"messenger-message-received",s=this._formatMessageTime(e.timestamp);if(t)return`\n\t\t\t\t<div class="messenger-message ${n}">\n\t\t\t\t\t<div class="messenger-message-bubble">\n\t\t\t\t\t\t<div class="messenger-message-content">${this._formatMessageContent(e.content)}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-message-time">${s}</div>\n\t\t\t\t</div>\n\t\t\t`;return`\n\t\t\t<div class="messenger-message ${n}">\n\t\t\t\t<div class="messenger-message-avatar">${this._renderSenderAvatar(e.sender)}</div>\n\t\t\t\t<div class="messenger-message-wrapper">\n\t\t\t\t\t<div class="messenger-message-sender">${e.sender?.name||"Support"}</div>\n\t\t\t\t\t<div class="messenger-message-bubble">\n\t\t\t\t\t\t<div class="messenger-message-content">${this._formatMessageContent(e.content)}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-message-time">${s}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderSenderAvatar(e){if(e?.avatarUrl)return`<img class="messenger-avatar messenger-avatar-small" src="${e.avatarUrl}" alt="${e.name}" />`;return`<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(e?.name||"S").charAt(0).toUpperCase()}</div>`}_renderConversationAvatar(e){if(!e?.participants?.length)return'<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>';const t=e.participants[0];return t.avatarUrl?`<img class="messenger-avatar messenger-avatar-small" src="${t.avatarUrl}" alt="${t.name}" />`:`<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">${(t.name||"S").charAt(0).toUpperCase()}</div>`}_renderTeamAvatars(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack">\n\t\t\t\t\t<div class="messenger-avatar" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return`<div class="messenger-avatar-stack">${e.slice(0,3).map((e,n)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar" src="${e}" alt="Team member" style="z-index: ${3-n};" />`:`<div class="messenger-avatar" style="background: ${t[n%t.length]}; z-index: ${3-n};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_formatMessageTime(e){if(!e)return"";return new Date(e).toLocaleTimeString("en-US",{hour:"numeric",minute:"2-digit",hour12:!0})}_formatMessageContent(e){return e?e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n/g,"<br>"):""}_appendMessage(e){const t=this.element.querySelector(".messenger-chat-messages"),n=t.querySelector(".messenger-chat-empty");n&&n.remove();const s=this._renderMessage(e),i=document.createElement("div");i.innerHTML=s,t.appendChild(i.firstElementChild)}_scrollToBottom(){const e=this.element.querySelector(".messenger-chat-messages");e&&setTimeout(()=>{e.scrollTop=e.scrollHeight},50)}_attachEvents(){this.element.querySelector(".messenger-back-btn").addEventListener("click",()=>{this.state.setView("messages")}),this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)});const e=this.element.querySelector(".messenger-compose-input"),t=this.element.querySelector(".messenger-compose-send");e.addEventListener("input",()=>{e.style.height="auto",e.style.height=Math.min(e.scrollHeight,120)+"px",t.disabled=!e.value.trim()}),e.addEventListener("keydown",e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),this._sendMessage())}),t.addEventListener("click",()=>{this._sendMessage()})}_sendMessage(){const e=this.element.querySelector(".messenger-compose-input"),t=e.value.trim();if(!t)return;const n={id:"msg_"+Date.now(),content:t,isOwn:!0,timestamp:(new Date).toISOString()};this.state.addMessage(this.state.activeConversationId,n),e.value="",e.style.height="auto",this.element.querySelector(".messenger-compose-send").disabled=!0,this.options.onSendMessage&&this.options.onSendMessage(this.state.activeConversationId,n)}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class C{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-conversations-view",this._updateContent(),this._attachEvents(),this._unsubscribe=this.state.subscribe(e=>{"conversationsUpdate"!==e&&"conversationAdded"!==e&&"conversationRead"!==e||this._updateContent()}),this.element}_updateContent(){const e=this.state.conversations,t=this._renderAvatarStack();let n;n=0===e.length?'\n\t\t\t\t<div class="messenger-conversations-empty">\n\t\t\t\t\t<div class="messenger-conversations-empty-icon">\n\t\t\t\t\t\t<i class="ph ph-chat" style="font-size: 48px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h3>No conversations yet</h3>\n\t\t\t\t\t<p>Start a new conversation with our team</p>\n\t\t\t\t</div>\n\t\t\t':`\n\t\t\t\t<div class="messenger-conversations-list">\n\t\t\t\t\t${e.map(e=>this._renderConversationItem(e)).join("")}\n\t\t\t\t</div>\n\t\t\t`,this.element.innerHTML=`\n\t\t\t<div class="messenger-conversations-header">\n\t\t\t\t<h2>Messages</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-conversations-body">\n\t\t\t\t${n}\n\t\t\t</div>\n\n\t\t\t<div class="messenger-conversations-footer">\n\t\t\t\t<button class="messenger-new-message-btn">\n\t\t\t\t\t<div class="messenger-new-message-avatars">${t}</div>\n\t\t\t\t\t<span>Send us a message</span>\n\t\t\t\t\t<i class="ph ph-arrow-right" style="font-size: 16px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t`,this._attachEvents()}_renderConversationItem(e){const t=e.unread>0?"unread":"",n=this._formatTimeAgo(e.lastMessageTime),s=this._renderConversationAvatars(e.participants);return`\n\t\t\t<div class="messenger-conversation-item ${t}" data-conversation-id="${e.id}">\n\t\t\t\t<div class="messenger-conversation-avatars">\n\t\t\t\t\t${s}\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-conversation-content">\n\t\t\t\t\t<div class="messenger-conversation-header">\n\t\t\t\t\t\t<span class="messenger-conversation-title">${e.title||"Chat with team"}</span>\n\t\t\t\t\t\t<span class="messenger-conversation-time">${n}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-conversation-preview">\n\t\t\t\t\t\t${e.unread>0?'<span class="messenger-unread-dot"></span>':""}\n\t\t\t\t\t\t<span class="messenger-conversation-message">${this._truncateMessage(e.lastMessage)}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`}_renderConversationAvatars(e){if(!e||0===e.length)return'<div class="messenger-avatar messenger-avatar-medium" style="background: #5856d6;">S</div>';const t=e[0];return t.avatarUrl?`<img class="messenger-avatar messenger-avatar-medium" src="${t.avatarUrl}" alt="${t.name}" />`:`<div class="messenger-avatar messenger-avatar-medium" style="background: ${this._getAvatarColor(0)};">${(t.name||"S").charAt(0).toUpperCase()}</div>`}_renderAvatarStack(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack messenger-avatar-stack-small">\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-small" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar messenger-avatar-small" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';return`<div class="messenger-avatar-stack messenger-avatar-stack-small">${e.slice(0,2).map((e,t)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar messenger-avatar-small" src="${e}" alt="Team member" style="z-index: ${2-t};" />`:`<div class="messenger-avatar messenger-avatar-small" style="background: ${this._getAvatarColor(t)}; z-index: ${2-t};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_getAvatarColor(e){const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return t[e%t.length]}_formatTimeAgo(e){if(!e)return"";const t=new Date(e),n=new Date-t,s=Math.floor(n/6e4),i=Math.floor(n/36e5),r=Math.floor(n/864e5);return s<1?"now":s<60?`${s}m`:i<24?`${i}h`:r<7?`${r}d`:t.toLocaleDateString("en-US",{month:"short",day:"numeric"})}_truncateMessage(e){if(!e)return"No messages yet";return e.length<=50?e:e.substring(0,50)+"..."}_attachEvents(){const e=this.element.querySelector(".messenger-close-btn");e&&e.addEventListener("click",()=>{this.state.setOpen(!1)}),this.element.querySelectorAll(".messenger-conversation-item").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.conversationId;this.state.setActiveConversation(t),this.state.markAsRead(t),this.state.setView("chat")})});const t=this.element.querySelector(".messenger-new-message-btn");t&&t.addEventListener("click",()=>{this._startNewConversation()})}_startNewConversation(){const e={id:"conv_"+Date.now(),title:"New conversation",participants:[],lastMessage:null,lastMessageTime:(new Date).toISOString(),unread:0};this.state.addConversation(e),this.state.setActiveConversation(e.id),this.state.setView("chat")}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class _{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-help-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"helpArticlesUpdate"!==e&&"helpSearchChange"!==e||this._updateCollectionsList()}),this.element}_updateContent(){const e=this.state.helpSearchQuery||"",t=(this.state.helpArticles||[]).length;this.element.innerHTML=`\n\t\t\t<div class="messenger-help-header">\n\t\t\t\t<h2>Help</h2>\n\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-help-search">\n\t\t\t\t<div class="messenger-help-search-wrapper">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype="text"\n\t\t\t\t\t\tclass="messenger-help-search-input"\n\t\t\t\t\t\tplaceholder="Search for help"\n\t\t\t\t\t\tvalue="${e}"\n\t\t\t\t\t/>\n\t\t\t\t\t<i class="ph ph-magnifying-glass messenger-help-search-icon" style="font-size: 18px;"></i>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-help-body">\n\t\t\t\t<div class="messenger-help-collections-header">\n\t\t\t\t\t${t} collections\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-help-collections"></div>\n\t\t\t</div>\n\t\t`,this._updateCollectionsList(),this._attachEvents()}_updateCollectionsList(){const e=this.element.querySelector(".messenger-help-collections"),t=this.state.helpArticles||[],n=(this.state.helpSearchQuery||"").toLowerCase(),s=n?t.filter(e=>e.title.toLowerCase().includes(n)||e.description&&e.description.toLowerCase().includes(n)):t,i=this.element.querySelector(".messenger-help-collections-header");i&&(i.textContent=`${s.length} collections`),0!==s.length?(e.innerHTML=s.map(e=>this._renderCollectionItem(e)).join(""),this._attachCollectionEvents()):e.innerHTML=this._renderEmptyState()}_renderCollectionItem(e){const t=e.articleCount||0;return`\n\t\t\t<div class="messenger-help-collection" data-collection-id="${e.id}">\n\t\t\t\t<div class="messenger-help-collection-content">\n\t\t\t\t\t<h3 class="messenger-help-collection-title">${e.title}</h3>\n\t\t\t\t\t<p class="messenger-help-collection-desc">${e.description||""}</p>\n\t\t\t\t\t<span class="messenger-help-collection-count">${t} articles</span>\n\t\t\t\t</div>\n\t\t\t\t<i class="ph ph-caret-right messenger-help-collection-arrow" style="font-size: 20px;"></i>\n\t\t\t</div>\n\t\t`}_renderEmptyState(){return this.state.helpSearchQuery?'\n\t\t\t\t<div class="messenger-help-empty">\n\t\t\t\t\t<div class="messenger-help-empty-icon">\n\t\t\t\t\t\t<i class="ph ph-magnifying-glass" style="font-size: 48px;"></i>\n\t\t\t\t\t</div>\n\t\t\t\t\t<h3>No results found</h3>\n\t\t\t\t\t<p>Try a different search term</p>\n\t\t\t\t</div>\n\t\t\t':'\n\t\t\t<div class="messenger-help-empty">\n\t\t\t\t<div class="messenger-help-empty-icon">\n\t\t\t\t\t<i class="ph ph-question" style="font-size: 48px;"></i>\n\t\t\t\t</div>\n\t\t\t\t<h3>Help collections</h3>\n\t\t\t\t<p>No collections available yet</p>\n\t\t\t</div>\n\t\t'}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)});let e;this.element.querySelector(".messenger-help-search-input").addEventListener("input",t=>{clearTimeout(e),e=setTimeout(()=>{this.state.setHelpSearchQuery(t.target.value)},300)}),this._attachCollectionEvents()}_attachCollectionEvents(){this.element.querySelectorAll(".messenger-help-collection").forEach(e=>{e.addEventListener("click",()=>{const t=e.dataset.collectionId,n=this.state.helpArticles.find(e=>e.id===t);n&&n.url?window.open(n.url,"_blank"):this.options.onArticleClick&&this.options.onArticleClick(n)})})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class E{constructor(e,t={}){this.state=e,this.options=t,this.element=null,this._unsubscribe=null}render(){return this.element=document.createElement("div"),this.element.className="messenger-view messenger-home-view",this._updateContent(),this._unsubscribe=this.state.subscribe(e=>{"homeChangelogUpdate"!==e&&"conversationsUpdate"!==e||this._updateContent()}),this.element}_updateContent(){const e=this._renderAvatarStack(),t=this._renderRecentChangelog();this.element.innerHTML=`\n\t\t\t<div class="messenger-home-header">\n\t\t\t\t<div class="messenger-home-header-top">\n\t\t\t\t\t<div class="messenger-home-logo">\n\t\t\t\t\t\t${this.options.logoUrl?`<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />`:""}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="messenger-home-avatars">${e}</div>\n\t\t\t\t\t<button class="messenger-close-btn" aria-label="Close">\n\t\t\t\t\t\t<i class="ph ph-x" style="font-size: 20px;"></i>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class="messenger-home-welcome">\n\t\t\t\t\t<span class="messenger-home-greeting">Hello there.</span>\n\t\t\t\t\t<span class="messenger-home-question">${this.state.welcomeMessage}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class="messenger-home-body">\n\t\t\t\t<button class="messenger-home-message-btn">\n\t\t\t\t\t<span>Send us a message</span>\n\t\t\t\t\t<i class="ph ph-arrow-right" style="font-size: 16px;"></i>\n\t\t\t\t</button>\n\n\t\t\t\t${this._renderFeaturedCard()}\n\n\t\t\t\t${t}\n\t\t\t</div>\n\t\t`,this._attachEvents()}_renderAvatarStack(){const e=this.state.teamAvatars;if(!e||0===e.length)return'\n\t\t\t\t<div class="messenger-avatar-stack">\n\t\t\t\t\t<div class="messenger-avatar" style="background: #5856d6;">S</div>\n\t\t\t\t\t<div class="messenger-avatar" style="background: #007aff;">T</div>\n\t\t\t\t</div>\n\t\t\t';return`<div class="messenger-avatar-stack">${e.slice(0,3).map((e,t)=>"string"==typeof e&&e.startsWith("http")?`<img class="messenger-avatar" src="${e}" alt="Team member" style="z-index: ${3-t};" />`:`<div class="messenger-avatar" style="background: ${this._getAvatarColor(t)}; z-index: ${3-t};">${e.charAt(0).toUpperCase()}</div>`).join("")}</div>`}_getAvatarColor(e){const t=["#5856d6","#007aff","#34c759","#ff9500","#ff3b30"];return t[e%t.length]}_renderFeaturedCard(){if(!this.options.featuredContent)return"";const{title:e,description:t,imageUrl:n,action:s}=this.options.featuredContent;return`\n\t\t\t<div class="messenger-home-featured">\n\t\t\t\t${n?`<img src="${n}" alt="${e}" class="messenger-home-featured-image" onerror="this.style.display='none';" />`:""}\n\t\t\t\t<div class="messenger-home-featured-content">\n\t\t\t\t\t<h3>${e}</h3>\n\t\t\t\t\t<p>${t}</p>\n\t\t\t\t</div>\n\t\t\t\t${s?`<button class="messenger-home-featured-btn" data-action="${s.type}" data-value="${s.value}">${s.label}</button>`:""}\n\t\t\t</div>\n\t\t`}_renderRecentChangelog(){const e=this.state.homeChangelogItems;if(0===e.length)return"";return`\n\t\t\t<div class="messenger-home-changelog-section">\n\t\t\t\t${e.map(e=>`\n\t\t\t<div class="messenger-home-changelog-card" data-changelog-id="${e.id}">\n\t\t\t\t${e.coverImage?`\n\t\t\t\t\t<div class="messenger-home-changelog-cover">\n\t\t\t\t\t\t<img src="${e.coverImage}" alt="${e.title}" onerror="this.style.display='none';" />\n\t\t\t\t\t\t${e.coverText?`<span class="messenger-home-changelog-cover-text">${e.coverText}</span>`:""}\n\t\t\t\t\t</div>\n\t\t\t\t`:""}\n\t\t\t\t<div class="messenger-home-changelog-card-content">\n\t\t\t\t\t<h4 class="messenger-home-changelog-card-title">${e.title}</h4>\n\t\t\t\t\t<p class="messenger-home-changelog-card-desc">${e.description||""}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`).join("")}\n\t\t\t</div>\n\t\t`}_formatDate(e){if(!e)return"";const t=new Date(e),n=new Date,s=Math.floor((n-t)/864e5);return 0===s?"Today":1===s?"Yesterday":s<7?`${s}d ago`:t.toLocaleDateString("en-US",{month:"short",day:"numeric"})}_attachEvents(){this.element.querySelector(".messenger-close-btn").addEventListener("click",()=>{this.state.setOpen(!1)}),this.element.querySelector(".messenger-home-message-btn").addEventListener("click",()=>{this.state.setView("messages")}),this.element.querySelectorAll(".messenger-home-changelog-item").forEach(e=>{e.addEventListener("click",()=>{this.state.setView("changelog")})});const e=this.element.querySelector(".messenger-home-changelog-all");e&&e.addEventListener("click",()=>{this.state.setView("changelog")});const t=this.element.querySelector(".messenger-home-featured-btn");t&&t.addEventListener("click",()=>{const e=t.dataset.action,n=t.dataset.value;"url"===e?window.open(n,"_blank"):"view"===e&&this.state.setView(n)})}destroy(){this._unsubscribe&&this._unsubscribe(),this.element&&this.element.parentNode&&this.element.parentNode.removeChild(this.element)}}class $ extends u{constructor(e){super({...e,type:"messenger"}),this.messengerOptions={position:e.position||"bottom-right",theme:e.theme||"light",teamName:e.teamName||"Support",teamAvatars:e.teamAvatars||[],welcomeMessage:e.welcomeMessage||"How can we help?",enableHelp:!1!==e.enableHelp,enableChangelog:!1!==e.enableChangelog,logoUrl:e.logoUrl||"https://feedback-sdk.product7.io/p7.png",featuredContent:e.featuredContent||null,primaryColor:e.primaryColor||"#1c1c1e",onSendMessage:e.onSendMessage||null,onArticleClick:e.onArticleClick||null,onChangelogClick:e.onChangelogClick||null},this.messengerState=new v({teamName:this.messengerOptions.teamName,teamAvatars:this.messengerOptions.teamAvatars,welcomeMessage:this.messengerOptions.welcomeMessage,enableHelp:this.messengerOptions.enableHelp,enableChangelog:this.messengerOptions.enableChangelog,userContext:this.sdk?.apiService?.getUserContext()||null}),this.launcher=null,this.panel=null,this._handleOpenChange=this._handleOpenChange.bind(this)}_render(){const e=document.createElement("div");return e.className=`messenger-widget theme-${this.messengerOptions.theme}`,e.style.zIndex="999999",this.launcher=new y(this.messengerState,{position:this.messengerOptions.position,primaryColor:this.messengerOptions.primaryColor}),e.appendChild(this.launcher.render()),this.panel=new w(this.messengerState,{position:this.messengerOptions.position,theme:this.messengerOptions.theme,primaryColor:this.messengerOptions.primaryColor,logoUrl:this.messengerOptions.logoUrl,featuredContent:this.messengerOptions.featuredContent,onSendMessage:this.messengerOptions.onSendMessage||this._handleSendMessage.bind(this),onArticleClick:this.messengerOptions.onArticleClick,onChangelogClick:this.messengerOptions.onChangelogClick}),this.panel.registerView("home",E),this.panel.registerView("messages",C),this.panel.registerView("chat",S),this.panel.registerView("help",_),this.panel.registerView("changelog",k),e.appendChild(this.panel.render()),this.panel.hide(),e}_attachEvents(){this._stateUnsubscribe=this.messengerState.subscribe((e,t)=>{"openChange"===e&&this._handleOpenChange(t.isOpen)})}_handleOpenChange(e){e?(this.panel.show(),this.sdk.eventBus.emit("messenger:opened",{widget:this})):(this.panel.hide(),this.messengerState.reset(),this.sdk.eventBus.emit("messenger:closed",{widget:this}))}async _handleSendMessage(e,t){this.sdk.eventBus.emit("messenger:messageSent",{widget:this,conversationId:e,message:t}),this.apiService?.mock&&setTimeout(()=>{const t={id:"msg_"+Date.now(),content:"Thanks for your message! We'll get back to you soon.",isOwn:!1,timestamp:(new Date).toISOString(),sender:{name:"Support Team",avatarUrl:null}};this.messengerState.addMessage(e,t)},1500)}open(){this.messengerState.setOpen(!0)}close(){this.messengerState.setOpen(!1)}toggle(){this.messengerState.setOpen(!this.messengerState.isOpen)}navigateTo(e){this.messengerState.setView(e),this.messengerState.isOpen||this.open()}setConversations(e){this.messengerState.setConversations(e)}addMessage(e,t){this.messengerState.addMessage(e,t)}setHelpArticles(e){this.messengerState.setHelpArticles(e)}setHomeChangelogItems(e){this.messengerState.setHomeChangelogItems(e)}setChangelogItems(e){this.messengerState.setChangelogItems(e)}setUnreadCount(e){this.messengerState.unreadCount=e,this.messengerState._notify("unreadCountChange",{count:e})}getState(){return{isOpen:this.messengerState.isOpen,currentView:this.messengerState.currentView,unreadCount:this.messengerState.unreadCount,conversations:this.messengerState.conversations}}async loadInitialData(){try{const e=await this._fetchConversations();this.messengerState.setConversations(e)}catch(e){console.error("[MessengerWidget] Failed to load conversations:",e)}if(this.messengerOptions.enableHelp)try{const e=await this._fetchHelpArticles();this.messengerState.setHelpArticles(e)}catch(e){console.error("[MessengerWidget] Failed to load help articles:",e)}if(this.messengerOptions.enableChangelog)try{const{homeItems:e,changelogItems:t}=await this._fetchChangelog();this.messengerState.setHomeChangelogItems(e),this.messengerState.setChangelogItems(t)}catch(e){console.error("[MessengerWidget] Failed to load changelog:",e)}}async _fetchConversations(){return this.apiService?.mock?[{id:"conv_1",title:"Chat with Sarah",participants:[{name:"Sarah",avatarUrl:null}],lastMessage:"Sarah: Hi 👋 I'm Sarah. How can I help today?",lastMessageTime:new Date(Date.now()-294e4).toISOString(),unread:1},{id:"conv_2",title:"Chat with Tom",participants:[{name:"Tom",avatarUrl:null}],lastMessage:"Tom: The feature will be available next week.",lastMessageTime:new Date(Date.now()-5184e5).toISOString(),unread:0}]:[]}async _fetchHelpArticles(){return this.apiService?.mock?[{id:"collection_1",title:"Product Overview",description:"See how your AI-first customer service solution works.",articleCount:24,url:"#"},{id:"collection_2",title:"Getting Started",description:"Everything you need to know to get started with Product7.",articleCount:30,url:"#"},{id:"collection_3",title:"AI Agent",description:"Resolving customer questions instantly and accurately—from live chat to email.",articleCount:82,url:"#"},{id:"collection_4",title:"Channels",description:"Enabling the channels you use to communicate with customers, all from the Inbox.",articleCount:45,url:"#"},{id:"collection_5",title:"Billing & Payments",description:"Manage your subscription, invoices, and payment methods.",articleCount:12,url:"#"}]:[]}async _fetchChangelog(){return this.apiService?.mock?{homeItems:[{id:"changelog_5",title:"New integrations available",description:"Connect with more tools you love and streamline your workflow.",tags:["Integration"],coverImage:"https://feedback-sdk.product7.io/700x400__5_.png",coverText:null,publishedAt:new Date(Date.now()-12096e5).toISOString(),url:"#"},{id:"changelog_2",title:"A new era of Insights has arrived",description:"We announced Fin Insights, a groundbreaking, AI-powered product that gives you complete visibility into every customer conversation.",tags:["New feature","AI"],coverImage:"https://feedback-sdk.product7.io/Intercom_Messenger__1_.jpg",coverText:"Watch our major product launch on-demand",publishedAt:new Date(Date.now()-432e6).toISOString(),url:"#"},{id:"changelog_1",title:"The 2025 Customer Service Transformation Report",description:"Learn how AI has transformed customer service from the ground up—rewriting its economics and reshaping expectations.",tags:["Report"],coverImage:"https://feedback-sdk.product7.io/Main_Report_Email_Header.png",coverText:"Customer service trends as we know them are dead.",publishedAt:new Date(Date.now()-1728e5).toISOString(),url:"#"}],changelogItems:[{id:"changelog_4",title:"Enhanced conversation analytics",description:"Get deeper insights into your customer conversations with our new analytics dashboard.",tags:["Analytics"],coverImage:"https://feedback-sdk.product7.io/cgangelog-Frame%202087334450.jpg",coverText:null,publishedAt:new Date(Date.now()-864e6).toISOString(),url:"#"},{id:"changelog_3",title:"Escalation guidance for complex issues",description:"New AI-powered escalation guidance helps your team handle complex customer issues more effectively.",tags:["New feature","AI"],coverImage:"https://feedback-sdk.product7.io/cgangelog-image-escalation-guidance-event@2x.png",coverText:null,publishedAt:new Date(Date.now()-6048e5).toISOString(),url:"#"}]}:{homeItems:[],changelogItems:[]}}onMount(){this.loadInitialData()}onDestroy(){this._stateUnsubscribe&&this._stateUnsubscribe()}destroy(){this.launcher&&this.launcher.destroy(),this.panel&&this.panel.destroy(),super.destroy()}}class T extends u{constructor(e){super({...e,type:"survey"}),this.surveyOptions={surveyId:e.surveyId||null,surveyType:e.surveyType||"nps",position:e.position||"bottom-right",title:e.title||null,description:e.description||null,lowLabel:e.lowLabel||null,highLabel:e.highLabel||null,customQuestions:e.customQuestions||[],theme:e.theme||"light",onSubmit:e.onSubmit||null,onDismiss:e.onDismiss||null},this.surveyState={score:null,feedback:"",customAnswers:{},isVisible:!1}}_render(){const e=document.createElement("div");return e.className="feedback-survey-container",e.style.display="none",e}_attachEvents(){}show(){return this._renderSurvey(),this.surveyState.isVisible=!0,this.sdk.eventBus.emit("survey:shown",{widget:this,type:this.surveyOptions.surveyType}),this}hide(){return this._closeSurvey(),this}_renderSurvey(){this._closeSurvey();const e=this._getSurveyConfig(),t=this._getPositionStyles(),n="dark"===this.surveyOptions.theme?"background: #1a1a1a; color: #fff;":"background: #fff; color: #1d1d1f;";"center"===this.surveyOptions.position&&(this.backdropElement=document.createElement("div"),this.backdropElement.className="feedback-survey-backdrop",document.body.appendChild(this.backdropElement),this.backdropElement.addEventListener("click",()=>this._handleDismiss())),this.surveyElement=document.createElement("div"),this.surveyElement.className=`feedback-survey feedback-survey-${this.surveyOptions.position} theme-${this.surveyOptions.theme}`,this.surveyElement.style.cssText=`position: fixed; ${t} z-index: 10000; ${n} border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); padding: 24px; min-width: 320px; max-width: 400px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;`,this.surveyElement.innerHTML=`\n\t\t\t<button class="feedback-survey-close" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"}; line-height: 1;">&times;</button>\n\t\t\t<h3 class="feedback-survey-title" style="margin: 0 0 8px 0; font-size: 18px; font-weight: 600; padding-right: 24px;">${e.title}</h3>\n\t\t\t<p class="feedback-survey-description" style="color: ${"dark"===this.surveyOptions.theme?"#aaa":"#86868b"}; margin: 0 0 20px 0; font-size: 14px;">${e.description}</p>\n\t\t\t<div class="feedback-survey-content">${e.html}</div>\n\t\t\t<div class="feedback-survey-feedback" style="margin-top: 16px;">\n\t\t\t\t<textarea class="feedback-survey-textarea" placeholder="Any additional feedback? (optional)" style="width: 100%; padding: 12px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#333":"#d2d2d7"}; border-radius: 8px; font-size: 14px; resize: none; height: 80px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; font-family: inherit; box-sizing: border-box;"></textarea>\n\t\t\t</div>\n\t\t\t<button class="feedback-survey-submit" style="width: 100%; margin-top: 12px; padding: 12px; background: #007aff; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;">Submit</button>\n\t\t`,document.body.appendChild(this.surveyElement),this._attachSurveyEvents(),requestAnimationFrame(()=>{this.surveyElement.style.opacity="1",this.surveyElement.style.transform="center"===this.surveyOptions.position?"translate(-50%, -50%) scale(1)":"translateY(0)"})}_getSurveyConfig(){const e={nps:{title:this.surveyOptions.title||"How likely are you to recommend us?",description:this.surveyOptions.description||"On a scale of 0-10, how likely are you to recommend our product to a friend or colleague?",html:`\n\t\t\t\t\t<div class="feedback-survey-nps" style="display: flex; justify-content: space-between; gap: 4px;">\n\t\t\t\t\t\t${[...Array(11).keys()].map(e=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-nps-btn" data-score="${e}" style="width: 28px; height: 36px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 6px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 12px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"};">\n\t\t\t\t\t\t<span>${this.surveyOptions.lowLabel||"Not likely"}</span>\n\t\t\t\t\t\t<span>${this.surveyOptions.highLabel||"Very likely"}</span>\n\t\t\t\t\t</div>\n\t\t\t\t`},csat:{title:this.surveyOptions.title||"How satisfied are you?",description:this.surveyOptions.description||"How would you rate your overall satisfaction with our product?",html:`\n\t\t\t\t\t<div class="feedback-survey-csat" style="display: flex; justify-content: center; gap: 16px;">\n\t\t\t\t\t\t${["😞","😕","😐","🙂","😄"].map((e,t)=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-csat-btn" data-score="${t+1}" style="background: none; border: none; cursor: pointer; font-size: 36px; transition: transform 0.15s; padding: 8px;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div style="display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#888":"#86868b"};">\n\t\t\t\t\t\t<span>${this.surveyOptions.lowLabel||"Very dissatisfied"}</span>\n\t\t\t\t\t\t<span>${this.surveyOptions.highLabel||"Very satisfied"}</span>\n\t\t\t\t\t</div>\n\t\t\t\t`},ces:{title:this.surveyOptions.title||"How easy was it?",description:this.surveyOptions.description||"How easy was it to accomplish your task today?",html:`\n\t\t\t\t\t<div class="feedback-survey-ces" style="display: flex; justify-content: space-between; gap: 8px;">\n\t\t\t\t\t\t${["Very Difficult","Difficult","Neutral","Easy","Very Easy"].map((e,t)=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-ces-btn" data-score="${t+1}" style="flex: 1; padding: 12px 8px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 11px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t`},custom:{title:this.surveyOptions.title||"Quick Feedback",description:this.surveyOptions.description||"Help us improve by answering a few questions.",html:this._renderCustomQuestions()}};return e[this.surveyOptions.surveyType]||e.nps}_renderCustomQuestions(){return this.surveyOptions.customQuestions&&0!==this.surveyOptions.customQuestions.length?this.surveyOptions.customQuestions.map((e,t)=>`\n\t\t\t<div style="margin-bottom: 16px;">\n\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">${e.label}</label>\n\t\t\t\t${this._renderQuestionInput(e,t)}\n\t\t\t</div>\n\t\t`).join(""):`\n\t\t\t\t<div style="margin-bottom: 16px;">\n\t\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">What feature do you use most?</label>\n\t\t\t\t\t<select class="feedback-survey-select" data-question="feature" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"};">\n\t\t\t\t\t\t<option value="">Select a feature</option>\n\t\t\t\t\t\t<option value="feedback">Feedback Collection</option>\n\t\t\t\t\t\t<option value="surveys">Surveys</option>\n\t\t\t\t\t\t<option value="analytics">Analytics</option>\n\t\t\t\t\t\t<option value="integrations">Integrations</option>\n\t\t\t\t\t</select>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<label style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500;">How often do you use it?</label>\n\t\t\t\t\t<div class="feedback-survey-frequency" style="display: flex; gap: 8px;">\n\t\t\t\t\t\t${["Daily","Weekly","Monthly","Rarely"].map(e=>`\n\t\t\t\t\t\t\t<button class="feedback-survey-freq-btn" data-freq="${e}" style="flex: 1; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa"}; cursor: pointer; font-size: 12px; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; transition: all 0.15s;">${e}</button>\n\t\t\t\t\t\t`).join("")}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t`}_renderQuestionInput(e,t){switch(e.type){case"select":return`\n\t\t\t\t\t<select class="feedback-survey-select" data-question="${e.id||t}" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"};">\n\t\t\t\t\t\t<option value="">${e.placeholder||"Select an option"}</option>\n\t\t\t\t\t\t${e.options.map(e=>`<option value="${e.value}">${e.label}</option>`).join("")}\n\t\t\t\t\t</select>\n\t\t\t\t`;case"text":return`\n\t\t\t\t\t<input type="text" class="feedback-survey-input" data-question="${e.id||t}" placeholder="${e.placeholder||""}" style="width: 100%; padding: 10px; border: 1px solid ${"dark"===this.surveyOptions.theme?"#444":"#d2d2d7"}; border-radius: 8px; font-size: 14px; background: ${"dark"===this.surveyOptions.theme?"#2a2a2a":"#fff"}; color: ${"dark"===this.surveyOptions.theme?"#fff":"#1d1d1f"}; box-sizing: border-box;">\n\t\t\t\t`;default:return""}}_getPositionStyles(){const e={"bottom-right":"bottom: 24px; right: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;","bottom-left":"bottom: 24px; left: 24px; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;",center:"top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); opacity: 0; transition: all 0.3s ease;",bottom:"bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-width: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease;"};return e[this.surveyOptions.position]||e["bottom-right"]}_attachSurveyEvents(){if(!this.surveyElement)return;this.surveyElement.querySelector(".feedback-survey-close").addEventListener("click",()=>this._handleDismiss());this.surveyElement.querySelector(".feedback-survey-submit").addEventListener("click",()=>this._handleSubmit());this.surveyElement.querySelector(".feedback-survey-textarea").addEventListener("input",e=>{this.surveyState.feedback=e.target.value}),this._attachTypeSpecificEvents(),this._escapeHandler=e=>{"Escape"===e.key&&this._handleDismiss()},document.addEventListener("keydown",this._escapeHandler)}_attachTypeSpecificEvents(){const e=this.surveyOptions.surveyType;"nps"===e&&this.surveyElement.querySelectorAll(".feedback-survey-nps-btn").forEach(e=>{e.addEventListener("click",()=>this._selectNPS(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="#007aff")}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7")})}),"csat"===e&&this.surveyElement.querySelectorAll(".feedback-survey-csat-btn").forEach(e=>{e.addEventListener("click",()=>this._selectCSAT(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{e.style.transform="scale(1.1)"}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.transform="scale(1)")})}),"ces"===e&&this.surveyElement.querySelectorAll(".feedback-survey-ces-btn").forEach(e=>{e.addEventListener("click",()=>this._selectCES(parseInt(e.dataset.score))),e.addEventListener("mouseenter",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="#007aff")}),e.addEventListener("mouseleave",()=>{this.surveyState.score!==parseInt(e.dataset.score)&&(e.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7")})}),"custom"===e&&(this.surveyElement.querySelectorAll(".feedback-survey-freq-btn").forEach(e=>{e.addEventListener("click",()=>this._selectFrequency(e.dataset.freq))}),this.surveyElement.querySelectorAll(".feedback-survey-select").forEach(e=>{e.addEventListener("change",t=>{this.surveyState.customAnswers[e.dataset.question]=t.target.value})}),this.surveyElement.querySelectorAll(".feedback-survey-input").forEach(e=>{e.addEventListener("input",t=>{this.surveyState.customAnswers[e.dataset.question]=t.target.value})}))}_selectNPS(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-nps-btn").forEach(t=>{parseInt(t.dataset.score)===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}_selectCSAT(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-csat-btn").forEach(t=>{const n=parseInt(t.dataset.score);t.style.transform=n===e?"scale(1.2)":"scale(1)"})}_selectCES(e){this.surveyState.score=e,this.surveyElement.querySelectorAll(".feedback-survey-ces-btn").forEach(t=>{parseInt(t.dataset.score)===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}_selectFrequency(e){this.surveyState.customAnswers.frequency=e,this.surveyElement.querySelectorAll(".feedback-survey-freq-btn").forEach(t=>{t.dataset.freq===e?(t.style.background="#007aff",t.style.borderColor="#007aff",t.style.color="#fff"):(t.style.background="dark"===this.surveyOptions.theme?"#2a2a2a":"#f8f9fa",t.style.borderColor="dark"===this.surveyOptions.theme?"#444":"#d2d2d7",t.style.color="dark"===this.surveyOptions.theme?"#fff":"#1d1d1f")})}async _handleSubmit(){const e=this.surveyOptions.surveyType;if(("nps"===e||"csat"===e||"ces"===e)&&null===this.surveyState.score)return void this._showError("Please select a rating");const t={rating:this.surveyState.score,feedback:this.surveyState.feedback,answers:this.surveyState.customAnswers},n={type:e,score:this.surveyState.score,feedback:this.surveyState.feedback,customAnswers:this.surveyState.customAnswers,timestamp:(new Date).toISOString()};this.surveyOptions.onSubmit&&this.surveyOptions.onSubmit(n);try{const n=this.surveyOptions.surveyId||`local_${e}_${Date.now()}`;await this.apiService.submitSurveyResponse(n,t)}catch(e){console.error("[SurveyWidget] Failed to submit survey:",e)}this.sdk.eventBus.emit("survey:submitted",{widget:this,response:n}),this._closeSurvey(),this._showSuccessNotification()}async _handleDismiss(){if(this.surveyOptions.surveyId)try{await this.apiService.dismissSurvey(this.surveyOptions.surveyId)}catch(e){console.error("[SurveyWidget] Failed to dismiss survey:",e)}this.surveyOptions.onDismiss&&this.surveyOptions.onDismiss(),this.sdk.eventBus.emit("survey:dismissed",{widget:this}),this._closeSurvey()}_showError(e){const t=this.surveyElement.querySelector(".feedback-survey-error");t&&t.remove();const n=document.createElement("div");n.className="feedback-survey-error",n.style.cssText="color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center;",n.textContent=e;const s=this.surveyElement.querySelector(".feedback-survey-submit");s.parentNode.insertBefore(n,s),setTimeout(()=>n.remove(),3e3)}_showSuccessNotification(){const e=document.createElement("div");e.className="feedback-survey-success",e.style.cssText="\n\t\t\tposition: fixed;\n\t\t\ttop: 24px;\n\t\t\tright: 24px;\n\t\t\tbackground: #10b981;\n\t\t\tcolor: white;\n\t\t\tpadding: 16px 24px;\n\t\t\tborder-radius: 12px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tz-index: 10001;\n\t\t\tbox-shadow: 0 10px 40px rgba(0,0,0,0.2);\n\t\t\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n\t\t",e.innerHTML='\n\t\t\t<div style="display: flex; align-items: center; gap: 8px;">\n\t\t\t\t<span style="font-size: 18px;">✓</span>\n\t\t\t\t<span>Thank you for your feedback!</span>\n\t\t\t</div>\n\t\t',document.body.appendChild(e),setTimeout(()=>{e.style.opacity="0",e.style.transition="opacity 0.3s ease",setTimeout(()=>e.remove(),300)},3e3)}_closeSurvey(){this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null);const e=this.surveyElement,t=this.backdropElement;e&&(e.style.opacity="0",e.style.transform="center"===this.surveyOptions.position?"translate(-50%, -50%) scale(0.95)":"translateY(20px)",setTimeout(()=>{e&&e.parentNode&&e.parentNode.removeChild(e)},300),this.surveyElement=null),t&&(t.style.opacity="0",setTimeout(()=>{t&&t.parentNode&&t.parentNode.removeChild(t)},300),this.backdropElement=null),this.surveyState={score:null,feedback:"",customAnswers:{},isVisible:!1}}destroy(){this._closeSurvey(),super.destroy()}}class z extends u{constructor(e){super({...e,type:"tab"})}_render(){const e=document.createElement("div");return e.className=`feedback-widget feedback-widget-tab theme-${this.options.theme} position-${this.options.position}`,e.innerHTML='\n <div class="feedback-tab-trigger">\n <span class="feedback-tab-text">Feedback</span>\n </div>\n ',this.options.customStyles&&Object.assign(e.style,this.options.customStyles),e}_attachEvents(){const e=this.element.querySelector(".feedback-tab-trigger");e.addEventListener("click",this.openModal),e.addEventListener("mouseenter",()=>{this.state.isSubmitting||(e.style.transform=this._getHoverTransform())}),e.addEventListener("mouseleave",()=>{e.style.transform="none"})}_getHoverTransform(){const e=this.options.position;return e.includes("right")?"translateX(-5px)":e.includes("left")?"translateX(5px)":"none"}updateText(e){const t=this.element?.querySelector(".feedback-tab-text");t&&(t.textContent=e)}updatePosition(e){this.options.position=e,this.element&&(this.element.className=this.element.className.replace(/position-\w+-\w+/,`position-${e}`))}}class A{static widgets=new Map([["button",f],["tab",z],["inline",b],["survey",T],["messenger",$]]);static register(e,n){if("string"!=typeof e||!e.trim())throw new t("Widget type must be a non-empty string");if("function"!=typeof n)throw new t("Widget class must be a constructor function");this.widgets.set(e,n)}static create(e,n={}){const s=this.widgets.get(e);if(!s){const n=Array.from(this.widgets.keys()).join(", ");throw new t(`Unknown widget type: ${e}. Available types: ${n}`)}try{return new s(n)}catch(n){throw new t(`Failed to create widget of type '${e}': ${n.message}`,n)}}static getAvailableTypes(){return Array.from(this.widgets.keys())}static isTypeRegistered(e){return this.widgets.has(e)}static unregister(e){return this.widgets.delete(e)}static clear(){this.widgets.clear()}static getWidgetClass(e){return this.widgets.get(e)}}class L{constructor(e={}){this.config=this._validateAndMergeConfig(e),this.initialized=!1,this.widgets=new Map,this.eventBus=new d,this.apiService=new c({apiUrl:this.config.apiUrl,workspace:this.config.workspace,userContext:this.config.userContext,mock:this.config.mock,env:this.config.env}),this._bindMethods()}async init(){if(this.initialized)return{alreadyInitialized:!0};try{const e=await this.apiService.init(this.config.userContext);return e.config&&(this.config=m(e.config,this.config)),this.initialized=!0,this.eventBus.emit("sdk:initialized",{config:this.config,sessionToken:e.sessionToken}),{initialized:!0,config:e.config||{},sessionToken:e.sessionToken,expiresIn:e.expiresIn}}catch(e){throw this.eventBus.emit("sdk:error",{error:e}),new t(`Failed to initialize SDK: ${e.message}`,e)}}createWidget(e="button",n={}){if(!this.initialized)throw new t("SDK must be initialized before creating widgets. Call init() first.");const s=h("widget"),i={id:s,sdk:this,apiService:this.apiService,...this.config,...n};try{const t=A.create(e,i);return this.widgets.set(s,t),this.eventBus.emit("widget:created",{widget:t,type:e}),t}catch(e){throw new t(`Failed to create widget: ${e.message}`,e)}}getWidget(e){return this.widgets.get(e)}async getActiveSurveys(e={}){if(!this.initialized)throw new t("SDK must be initialized before fetching surveys. Call init() first.");try{return(await this.apiService.getActiveSurveys(e)).data||[]}catch(e){throw this.eventBus.emit("sdk:error",{error:e}),new t(`Failed to fetch active surveys: ${e.message}`,e)}}async showSurveyById(e,n={}){if(!this.initialized)throw new t("SDK must be initialized before showing surveys. Call init() first.");const s=(await this.getActiveSurveys()).find(t=>t.id===e);if(!s)throw new t(`Survey with ID '${e}' not found or not active`);return this.showSurvey({surveyId:s.id,surveyType:s.type,title:s.title,description:s.description,lowLabel:s.low_label,highLabel:s.high_label,customQuestions:s.questions,...n})}showSurvey(e={}){if(!this.initialized)throw new t("SDK must be initialized before showing surveys. Call init() first.");const n=this.createWidget("survey",{surveyId:e.surveyId,surveyType:e.surveyType||e.type||"nps",position:e.position||"bottom-right",theme:e.theme||this.config.theme||"light",title:e.title,description:e.description,lowLabel:e.lowLabel,highLabel:e.highLabel,customQuestions:e.customQuestions,onSubmit:e.onSubmit,onDismiss:e.onDismiss});return n.mount(),n.show(),n}getAllWidgets(){return Array.from(this.widgets.values())}destroyWidget(e){const t=this.widgets.get(e);return!!t&&(t.destroy(),this.widgets.delete(e),this.eventBus.emit("widget:removed",{widgetId:e}),!0)}destroyAllWidgets(){for(const e of this.widgets.values())e.destroy();this.widgets.clear(),this.eventBus.emit("widgets:cleared")}updateConfig(e){const t={...this.config};this.config=this._validateAndMergeConfig(e,this.config);for(const e of this.widgets.values())e.handleConfigUpdate(this.config);this.eventBus.emit("config:updated",{oldConfig:t,newConfig:this.config})}setUserContext(e){this.config.userContext=e,this.apiService&&this.apiService.setUserContext(e),this.eventBus.emit("user:updated",{userContext:e})}getUserContext(){return this.config.userContext||(this.apiService?this.apiService.getUserContext():null)}async reinitialize(e=null){return this.apiService.clearSession(),this.initialized=!1,e&&this.setUserContext(e),this.init()}on(e,t){return this.eventBus.on(e,t),this}off(e,t){return this.eventBus.off(e,t),this}once(e,t){return this.eventBus.once(e,t),this}emit(e,t){return this.eventBus.emit(e,t),this}destroy(){this.destroyAllWidgets(),this.eventBus.removeAllListeners(),this.apiService.clearSession(),this.initialized=!1,this.eventBus.emit("sdk:destroyed")}_validateAndMergeConfig(e,t={}){const n=m(m({apiUrl:null,workspace:null,userContext:null,position:"bottom-right",theme:"light",boardId:"general",autoShow:!0,debug:!1,mock:!1,env:"production"},t),e);if(!n.workspace)throw new i("Missing required configuration: workspace");return n.userContext&&this._validateUserContext(n.userContext),n}_validateUserContext(e){if(!e.user_id&&!e.email)throw new i("User context must include at least user_id or email");const t={user_id:"string",email:"string",name:"string",custom_fields:"object",company:"object"};for(const[n,s]of Object.entries(t))if(e[n]&&typeof e[n]!==s)throw new i(`User context field '${n}' must be of type '${s}'`)}_bindMethods(){this.createWidget=this.createWidget.bind(this),this.destroyWidget=this.destroyWidget.bind(this),this.updateConfig=this.updateConfig.bind(this)}static create(e){return new L(e)}static async createAndInit(e){const t=new L(e);return await t.init(),t}static extractUserContextFromAuth(e){return e?{user_id:e.sub||e.id||e.user_id,email:e.email,name:e.name||e.display_name||e.full_name,custom_fields:{role:e.role,plan:e.plan||e.subscription?.plan,...e.custom_fields||{}},company:e.company||e.organization?{id:e.company?.id||e.organization?.id,name:e.company?.name||e.organization?.name,monthly_spend:e.company?.monthly_spend}:void 0}:null}}function O(){if("undefined"!=typeof document&&!document.querySelector("#feedback-sdk-styles")){const e=document.createElement("style");e.id="feedback-sdk-styles",e.textContent="\n.feedback-widget {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n line-height: 1.4;\n z-index: 999999;\n box-sizing: border-box;\n}\n\n.feedback-widget *,\n.feedback-widget *::before,\n.feedback-widget *::after {\n box-sizing: border-box;\n}\n\n.feedback-widget-button {\n position: fixed;\n z-index: 999999;\n}\n\n.feedback-widget-button.position-bottom-right {\n bottom: 20px;\n right: 20px;\n}\n\n.feedback-widget-button.position-bottom-left {\n bottom: 20px;\n left: 20px;\n}\n\n.feedback-widget-button.position-top-right {\n top: 20px;\n right: 20px;\n}\n\n.feedback-widget-button.position-top-left {\n top: 20px;\n left: 20px;\n}\n\n.feedback-trigger-btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 48px;\n overflow: visible;\n border-radius: 9999px;\n border: none;\n padding: 12px 20px;\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.3s ease;\n color: white;\n background: #155EEF;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n width: fit-content;\n}\n\n.feedback-trigger-btn:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}\n\n.feedback-trigger-btn:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n}\n\n.feedback-trigger-btn:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-icon {\n flex-shrink: 0;\n}\n\n.feedback-minimize-icon,\n.feedback-expand-icon {\n position: absolute;\n top: -6px;\n right: -6px;\n width: 24px;\n height: 24px;\n padding: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.feedback-minimize-icon svg,\n.feedback-expand-icon svg {\n width: 16px;\n height: 16px;\n display: block;\n fill: #155EEF;\n}\n\n/* Show minimize icon on hover when expanded */\n.feedback-widget-button:not(.minimized) .feedback-trigger-btn:hover .feedback-minimize-icon {\n opacity: 1;\n}\n\n/* Minimized state - just icon */\n.feedback-widget-button.minimized .feedback-trigger-btn {\n padding: 12px;\n width: 48px;\n height: 48px;\n justify-content: center;\n}\n\n.feedback-widget-button.minimized .feedback-text {\n display: none;\n}\n\n.feedback-widget-button.minimized .feedback-minimize-icon {\n display: none;\n}\n\n/* Show expand icon on hover when minimized */\n.feedback-widget-button.minimized .feedback-trigger-btn:hover .feedback-expand-icon {\n opacity: 1;\n}\n\n/* Side Panel Styles */\n.feedback-panel {\n position: fixed;\n bottom: 80px;\n right: 24px;\n width: 420px;\n max-height: 500px;\n z-index: 1000000;\n transform: translateX(calc(100% + 24px));\n transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n font-family: inherit;\n}\n\n.feedback-panel.open {\n transform: translateX(0);\n}\n\n.feedback-panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.1);\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n z-index: 999999;\n}\n\n.feedback-panel-backdrop.show {\n opacity: 1;\n pointer-events: auto;\n}\n\n.feedback-panel-content {\n background: white;\n height: 100%;\n display: flex;\n flex-direction: column;\n border-radius: 16px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), \n 0 10px 10px -5px rgba(0, 0, 0, 0.04),\n 0 0 0 1px rgba(0, 0, 0, 0.05);\n}\n\n.feedback-panel.theme-dark .feedback-panel-content {\n background: #1F2937;\n color: white;\n}\n\n.feedback-panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 24px;\n border-bottom: 1px solid #E5E7EB;\n flex-shrink: 0;\n}\n\n.feedback-panel.theme-dark .feedback-panel-header {\n border-bottom-color: #374151;\n}\n\n.feedback-panel-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: #111827;\n}\n\n.feedback-panel.theme-dark .feedback-panel-header h3 {\n color: white;\n}\n\n.feedback-panel-close {\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #6B7280;\n padding: 4px;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n transition: all 0.2s ease;\n}\n\n.feedback-panel-close:hover {\n background: #F3F4F6;\n color: #111827;\n}\n\n.feedback-panel-close:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-panel.theme-dark .feedback-panel-close {\n color: #9CA3AF;\n}\n\n.feedback-panel.theme-dark .feedback-panel-close:hover {\n background: #374151;\n color: white;\n}\n\n.feedback-panel-body {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.feedback-form {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.feedback-form-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 20px;\n}\n\n.feedback-form-group:last-child {\n margin-bottom: 0;\n}\n\n.feedback-form-group label {\n font-size: 14px;\n font-weight: 500;\n line-height: 1.25;\n color: #374151;\n}\n\n.feedback-panel.theme-dark .feedback-form-group label {\n color: #D1D5DB;\n}\n\n.feedback-form-group input {\n height: 44px;\n width: 100%;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n padding: 10px 14px;\n font-size: 15px;\n font-weight: 400;\n line-height: 1.5;\n color: #1F2937;\n font-family: inherit;\n outline: none;\n transition: all 0.2s ease;\n}\n\n.feedback-form-group input::placeholder {\n font-size: 15px;\n color: #9CA3AF;\n}\n\n.feedback-form-group input:focus {\n border-color: #155EEF;\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.feedback-form-group input:focus-visible {\n outline: none;\n}\n\n.feedback-form-group textarea {\n min-height: 200px;\n width: 100%;\n resize: vertical;\n border-radius: 8px;\n border: 1px solid #D1D5DB;\n padding: 10px 14px;\n font-size: 15px;\n font-weight: 400;\n line-height: 1.5;\n color: #1F2937;\n font-family: inherit;\n outline: none;\n transition: all 0.2s ease;\n}\n\n.feedback-form-group textarea::placeholder {\n font-size: 15px;\n color: #9CA3AF;\n}\n\n.feedback-form-group textarea:focus {\n border-color: #155EEF;\n box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.feedback-form-group textarea:focus-visible {\n outline: none;\n}\n\n.feedback-panel.theme-dark .feedback-form-group input,\n.feedback-panel.theme-dark .feedback-form-group textarea {\n background: #374151;\n border-color: #4B5563;\n color: white;\n}\n\n.feedback-panel.theme-dark .feedback-form-group input::placeholder,\n.feedback-panel.theme-dark .feedback-form-group textarea::placeholder {\n color: #6B7280;\n}\n\n.feedback-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n border-radius: 8px;\n border: none;\n height: 44px;\n padding: 10px 18px;\n font-size: 15px;\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.feedback-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.feedback-btn:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n.feedback-btn-submit {\n background: #155EEF;\n color: white;\n width: 100%;\n}\n\n.feedback-btn-submit:hover:not(:disabled) {\n background: #4338ca;\n}\n\n.feedback-btn-submit:active:not(:disabled) {\n background: #3730a3;\n}\n\n.feedback-btn-cancel {\n background: transparent;\n color: #6B7280;\n border: 1px solid #D1D5DB;\n}\n\n.feedback-btn-cancel:hover:not(:disabled) {\n background: #F9FAFB;\n border-color: #9CA3AF;\n color: #374151;\n}\n\n.feedback-panel.theme-dark .feedback-btn-cancel {\n color: #D1D5DB;\n border-color: #4B5563;\n}\n\n.feedback-panel.theme-dark .feedback-btn-cancel:hover:not(:disabled) {\n background: #374151;\n}\n\n.feedback-form-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: auto;\n padding-top: 24px;\n}\n\n.feedback-error {\n color: #DC2626;\n font-size: 14px;\n font-weight: 400;\n margin-top: 8px;\n padding: 12px;\n background: #FEE2E2;\n border: 1px solid #FECACA;\n border-radius: 8px;\n display: none;\n}\n\n.feedback-error.show {\n display: block;\n}\n\n.feedback-panel.theme-dark .feedback-error {\n background: #7F1D1D;\n border-color: #991B1B;\n color: #FCA5A5;\n}\n\n.feedback-success-notification {\n position: fixed;\n top: 24px;\n right: 24px;\n z-index: 1000002;\n background: white;\n border: 1px solid #D1FAE5;\n border-radius: 12px;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n min-width: 320px;\n}\n\n.feedback-success-content {\n display: flex;\n align-items: center;\n padding: 16px 20px;\n gap: 12px;\n}\n\n.feedback-success-icon {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #10B981;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.feedback-success-content span {\n color: #065F46;\n font-weight: 500;\n font-size: 14px;\n flex: 1;\n}\n\n.feedback-success-close {\n background: none;\n border: none;\n color: #6B7280;\n cursor: pointer;\n font-size: 20px;\n padding: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.feedback-success-close:hover {\n background: #F3F4F6;\n color: #374151;\n}\n\n.feedback-success-close:focus-visible {\n outline: 2px solid #155EEF;\n outline-offset: 2px;\n}\n\n@keyframes slideInRight {\n from {\n transform: translateX(400px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.feedback-panel-backdrop {\n animation: fadeIn 0.3s ease;\n}\n\n@media (max-width: 768px) {\n .feedback-panel {\n width: 100%;\n top: auto;\n bottom: 0;\n right: 0;\n left: 0;\n height: 85vh;\n max-height: 85vh;\n transform: translateY(100%);\n border-radius: 20px 20px 0 0;\n }\n \n .feedback-panel.open {\n transform: translateY(0);\n }\n \n .feedback-panel-content {\n border-radius: 20px 20px 0 0;\n }\n \n .feedback-panel-header {\n padding: 20px;\n position: relative;\n }\n \n .feedback-panel-header::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 40px;\n height: 4px;\n background: #D1D5DB;\n border-radius: 2px;\n }\n \n .feedback-panel.theme-dark .feedback-panel-header::before {\n background: #4B5563;\n }\n \n .feedback-panel-body {\n padding: 20px;\n }\n \n .feedback-form-group textarea {\n min-height: 150px;\n }\n \n .feedback-widget-button {\n bottom: 16px;\n right: 16px;\n }\n \n .feedback-widget-button.position-bottom-left {\n left: 16px;\n }\n \n .feedback-success-notification {\n top: 16px;\n right: 16px;\n left: 16px;\n min-width: auto;\n }\n \n .feedback-minimize-icon,\n .feedback-expand-icon {\n top: -4px;\n right: -4px;\n width: 20px;\n height: 20px;\n }\n \n .feedback-minimize-icon svg,\n .feedback-expand-icon svg {\n width: 14px;\n height: 14px;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .feedback-trigger-btn,\n .feedback-btn,\n .feedback-panel,\n .feedback-panel-backdrop,\n .feedback-success-notification,\n .feedback-minimize-icon,\n .feedback-expand-icon {\n transition: none;\n animation: none;\n }\n}\n\n@media print {\n .feedback-widget,\n .feedback-panel,\n .feedback-panel-backdrop,\n .feedback-success-notification {\n display: none !important;\n }\n}\n\n/* ========================================\n Messenger Widget - Intercom-style Dark Theme\n ======================================== */\n\n.messenger-widget {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 14px;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.messenger-widget *,\n.messenger-widget *::before,\n.messenger-widget *::after {\n box-sizing: border-box;\n}\n\n/* ========================================\n Launcher Button\n ======================================== */\n\n.messenger-launcher {\n position: fixed;\n z-index: 999999;\n}\n\n.messenger-launcher-bottom-right {\n bottom: 20px;\n right: 20px;\n}\n\n.messenger-launcher-bottom-left {\n bottom: 20px;\n left: 20px;\n}\n\n.messenger-launcher-btn {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n border: none;\n background: #1c1c1e;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n}\n\n.messenger-launcher-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);\n}\n\n.messenger-launcher-btn:active {\n transform: scale(0.95);\n}\n\n.messenger-launcher-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.messenger-launcher-open .messenger-launcher-icon-chat {\n opacity: 0;\n transform: rotate(-90deg);\n}\n\n.messenger-launcher-open .messenger-launcher-icon-close {\n opacity: 1;\n transform: rotate(0deg);\n}\n\n.messenger-launcher-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n background: #ef4444;\n color: white;\n font-size: 11px;\n font-weight: 600;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 6px;\n border: 2px solid white;\n}\n\n/* ========================================\n Panel Container\n ======================================== */\n\n.messenger-panel {\n position: fixed;\n z-index: 999998;\n width: 400px;\n height: 680px;\n max-height: calc(100vh - 100px);\n display: none;\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.messenger-panel.open {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.messenger-panel-bottom-right {\n bottom: 90px;\n right: 20px;\n}\n\n.messenger-panel-bottom-left {\n bottom: 90px;\n left: 20px;\n}\n\n.messenger-panel-content {\n background: #1c1c1e;\n height: 100%;\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);\n}\n\n/* Light theme */\n.messenger-panel.theme-light .messenger-panel-content {\n background: #ffffff;\n}\n\n/* ========================================\n Views Container\n ======================================== */\n\n.messenger-panel-views {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.messenger-view {\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* ========================================\n Common Components\n ======================================== */\n\n/* Close Button */\n.messenger-close-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.6);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.messenger-close-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n.theme-light .messenger-close-btn {\n color: #86868b;\n}\n\n.theme-light .messenger-close-btn:hover {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n/* Back Button */\n.messenger-back-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.6);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n}\n\n.messenger-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n color: white;\n}\n\n/* Avatar Stack */\n.messenger-avatar-stack {\n display: flex;\n align-items: center;\n}\n\n.messenger-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: 2px solid #1c1c1e;\n background: #5856d6;\n color: white;\n font-size: 13px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: -8px;\n object-fit: cover;\n}\n\n.messenger-avatar:first-child {\n margin-left: 0;\n}\n\n.messenger-avatar-small {\n width: 28px;\n height: 28px;\n font-size: 11px;\n}\n\n.messenger-avatar-medium {\n width: 40px;\n height: 40px;\n font-size: 15px;\n font-weight: 600;\n}\n\n.messenger-avatar-tiny {\n width: 20px;\n height: 20px;\n font-size: 9px;\n border-width: 1.5px;\n margin-left: -6px;\n}\n\n.messenger-avatar-tiny:first-child {\n margin-left: 0;\n}\n\n.theme-light .messenger-avatar {\n border-color: #ffffff;\n}\n\n/* ========================================\n Home View\n ======================================== */\n\n.messenger-home-view {\n background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 40%);\n}\n\n.messenger-home-header {\n padding: 20px;\n background: linear-gradient(180deg, rgba(88, 86, 214, 0.2) 0%, transparent 100%);\n}\n\n.messenger-home-header-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.messenger-home-logo {\n width: 32px;\n height: 32px;\n}\n\n.messenger-home-logo img {\n width: 100%;\n height: 100%;\n border-radius: 8px;\n object-fit: cover;\n}\n\n.messenger-home-logo-default {\n width: 32px;\n height: 32px;\n background: linear-gradient(135deg, #5856d6, #007aff);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.messenger-home-avatars {\n flex: 1;\n display: flex;\n justify-content: flex-end;\n margin-right: 12px;\n}\n\n.messenger-home-welcome {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.messenger-home-greeting {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-home-question {\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-home-body {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n.messenger-home-message-btn {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: #2c2c2e;\n border: none;\n border-radius: 24px;\n color: white;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-bottom: 20px;\n}\n\n.messenger-home-message-btn:hover {\n background: #3c3c3e;\n transform: translateX(4px);\n}\n\n.messenger-home-message-btn svg {\n opacity: 0.6;\n}\n\n/* Featured Card */\n.messenger-home-featured {\n background: #2c2c2e;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 20px;\n}\n\n.messenger-home-featured-image {\n width: 100%;\n height: 120px;\n object-fit: cover;\n}\n\n.messenger-home-featured-content {\n padding: 16px;\n}\n\n.messenger-home-featured-content h3 {\n margin: 0 0 8px;\n font-size: 16px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-home-featured-content p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n}\n\n/* Changelog Section in Home */\n.messenger-home-changelog-section {\n margin-top: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.messenger-home-changelog-card {\n background: #2c2c2e;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-home-changelog-card:hover {\n background: #3c3c3e;\n transform: translateY(-2px);\n}\n\n.messenger-home-changelog-cover {\n width: 100%;\n height: 140px;\n overflow: hidden;\n position: relative;\n border-radius: 12px;\n margin: 12px 12px 0 12px;\n padding-bottom: 12px;\n width: calc(100% - 24px);\n}\n\n.messenger-home-changelog-cover img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 12px;\n}\n\n.messenger-home-changelog-cover-text {\n position: absolute;\n bottom: 12px;\n left: 12px;\n right: 12px;\n color: #ffffff;\n font-size: 14px;\n font-weight: 600;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n line-height: 1.3;\n}\n\n.messenger-home-changelog-card-content {\n padding: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-home-changelog-card-title {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 600;\n color: #ffffff;\n line-height: 1.3;\n}\n\n.messenger-home-changelog-card-desc {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ========================================\n Conversations View\n ======================================== */\n\n.messenger-conversations-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-conversations-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-conversations-body {\n flex: 1;\n overflow-y: auto;\n padding: 12px;\n}\n\n.messenger-conversations-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-conversations-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-conversations-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-conversations-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-conversation-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n border-radius: 12px;\n cursor: pointer;\n transition: background 0.2s ease;\n}\n\n.messenger-conversation-item:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-conversation-avatars {\n flex-shrink: 0;\n padding-top: 2px;\n}\n\n.messenger-conversation-content {\n flex: 1;\n min-width: 0;\n}\n\n.messenger-conversation-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n gap: 12px;\n}\n\n.messenger-conversation-title {\n font-size: 15px;\n font-weight: 400;\n color: #ffffff;\n line-height: 1.3;\n}\n\n.messenger-conversation-time {\n font-size: 13px;\n color: rgba(255, 255, 255, 0.5);\n flex-shrink: 0;\n}\n\n.messenger-conversation-preview {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.messenger-unread-dot {\n width: 8px;\n height: 8px;\n background: #ef4444;\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n.messenger-conversation-message {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n line-height: 1.4;\n}\n\n.messenger-conversation-item.unread .messenger-conversation-title {\n font-weight: 400;\n color: #ffffff;\n}\n\n.messenger-conversation-item.unread .messenger-conversation-message {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.messenger-conversations-footer {\n padding: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-new-message-btn {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: #2c2c2e;\n border: none;\n border-radius: 24px;\n color: white;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-new-message-btn:hover {\n background: #3c3c3e;\n}\n\n.messenger-new-message-btn span {\n flex: 1;\n text-align: left;\n}\n\n.messenger-new-message-btn svg {\n opacity: 0.6;\n}\n\n/* ========================================\n Chat View\n ======================================== */\n\n.messenger-chat-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-chat-header-info {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.messenger-chat-title {\n font-size: 16px;\n font-weight: 500;\n color: white;\n}\n\n.messenger-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.messenger-chat-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-chat-empty-avatars {\n margin-bottom: 16px;\n}\n\n.messenger-chat-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-chat-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n max-width: 240px;\n}\n\n/* Messages */\n.messenger-message {\n display: flex;\n gap: 8px;\n max-width: 85%;\n}\n\n.messenger-message-own {\n align-self: flex-end;\n flex-direction: column;\n align-items: flex-end;\n}\n\n.messenger-message-received {\n align-self: flex-start;\n}\n\n.messenger-message-wrapper {\n display: flex;\n flex-direction: column;\n}\n\n.messenger-message-sender {\n font-size: 12px;\n font-weight: 500;\n color: rgba(255, 255, 255, 0.6);\n margin-bottom: 4px;\n margin-left: 12px;\n}\n\n.messenger-message-bubble {\n padding: 12px 16px;\n border-radius: 18px;\n word-wrap: break-word;\n}\n\n.messenger-message-own .messenger-message-bubble {\n background: #007aff;\n color: white;\n border-bottom-right-radius: 4px;\n}\n\n.messenger-message-received .messenger-message-bubble {\n background: #2c2c2e;\n color: white;\n border-bottom-left-radius: 4px;\n}\n\n.messenger-message-content {\n font-size: 15px;\n line-height: 1.4;\n}\n\n.messenger-message-time {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.4);\n margin-top: 4px;\n padding: 0 4px;\n}\n\n.messenger-message-avatar {\n flex-shrink: 0;\n margin-top: auto;\n}\n\n/* Compose Area */\n.messenger-chat-compose {\n display: flex;\n align-items: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n background: #1c1c1e;\n}\n\n.messenger-compose-input-wrapper {\n flex: 1;\n background: #2c2c2e;\n border-radius: 20px;\n padding: 8px 16px;\n}\n\n.messenger-compose-input {\n width: 100%;\n background: transparent;\n border: none;\n outline: none;\n color: white;\n font-size: 15px;\n line-height: 1.4;\n resize: none;\n max-height: 120px;\n font-family: inherit;\n}\n\n.messenger-compose-input::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-compose-send {\n width: 40px;\n height: 40px;\n background: #007aff;\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n flex-shrink: 0;\n}\n\n.messenger-compose-send:hover:not(:disabled) {\n background: #0066d6;\n transform: scale(1.05);\n}\n\n.messenger-compose-send:disabled {\n background: #3c3c3e;\n color: rgba(255, 255, 255, 0.3);\n cursor: not-allowed;\n}\n\n/* ========================================\n Help View\n ======================================== */\n\n.messenger-help-header {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n position: relative;\n}\n\n.messenger-help-header h2 {\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-header .messenger-close-btn {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.messenger-help-search {\n padding: 0 16px 16px;\n}\n\n.messenger-help-search-wrapper {\n display: flex;\n align-items: center;\n background: #2c2c2e;\n border-radius: 12px;\n padding: 14px 16px;\n position: relative;\n}\n\n.messenger-help-search-icon {\n position: absolute;\n right: 16px;\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-search-input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: white;\n font-size: 16px;\n font-family: inherit;\n padding-right: 32px;\n}\n\n.messenger-help-search-input::placeholder {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-body {\n flex: 1;\n overflow-y: auto;\n padding: 0;\n}\n\n.messenger-help-collections-header {\n font-size: 17px;\n font-weight: 600;\n color: white;\n padding: 12px 16px 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-help-collections {\n padding: 0;\n}\n\n.messenger-help-collection {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n cursor: pointer;\n transition: background 0.2s ease;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-help-collection:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-help-collection-content {\n flex: 1;\n min-width: 0;\n}\n\n.messenger-help-collection-title {\n margin: 0 0 2px;\n font-size: 14px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-collection-desc {\n margin: 0 0 2px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.3;\n}\n\n.messenger-help-collection-count {\n font-size: 14px;\n color: rgba(255, 255, 255, 0.4);\n}\n\n.messenger-help-collection-arrow {\n color: rgba(255, 255, 255, 0.3);\n flex-shrink: 0;\n margin-left: 12px;\n}\n\n.messenger-help-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-help-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-help-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-help-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ========================================\n Changelog View\n ======================================== */\n\n.messenger-changelog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-changelog-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-changelog-subheader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.messenger-changelog-latest {\n font-size: 12px;\n font-weight: 600;\n color: rgba(255, 255, 255, 0.5);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.messenger-changelog-team {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.6);\n}\n\n.messenger-changelog-body {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.messenger-changelog-card {\n background: #2c2c2e;\n border-radius: 12px;\n overflow: hidden;\n margin-bottom: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.messenger-changelog-card:hover {\n background: #3c3c3e;\n transform: translateY(-2px);\n}\n\n.messenger-changelog-cover {\n height: 120px;\n overflow: hidden;\n}\n\n.messenger-changelog-cover img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.messenger-changelog-content {\n padding: 16px;\n}\n\n.messenger-changelog-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.messenger-changelog-tag {\n font-size: 11px;\n font-weight: 600;\n color: white;\n background: rgba(88, 86, 214, 0.3);\n padding: 4px 10px;\n border-radius: 12px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.messenger-changelog-title {\n margin: 0 0 8px;\n font-size: 14px;\n font-weight: 600;\n color: white;\n line-height: 1.3;\n}\n\n.messenger-changelog-description {\n margin: 0 0 12px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.6);\n line-height: 1.4;\n}\n\n.messenger-changelog-meta {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.messenger-changelog-date {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.messenger-changelog-arrow {\n color: rgba(255, 255, 255, 0.3);\n}\n\n.messenger-changelog-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n text-align: center;\n padding: 40px;\n}\n\n.messenger-changelog-empty-icon {\n color: rgba(255, 255, 255, 0.3);\n margin-bottom: 16px;\n}\n\n.messenger-changelog-empty h3 {\n margin: 0 0 8px;\n font-size: 18px;\n font-weight: 600;\n color: white;\n}\n\n.messenger-changelog-empty p {\n margin: 0;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.5);\n}\n\n/* ========================================\n Navigation Tabs\n ======================================== */\n\n.messenger-panel-nav {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n background: #1c1c1e;\n}\n\n.messenger-nav {\n display: flex;\n padding: 8px 12px;\n gap: 4px;\n}\n\n.messenger-nav-tab {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n padding: 8px 4px;\n background: none;\n border: none;\n cursor: pointer;\n border-radius: 8px;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.messenger-nav-tab:hover {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.messenger-nav-icon {\n color: rgba(255, 255, 255, 0.5);\n transition: color 0.2s ease;\n}\n\n.messenger-nav-home-icon {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.messenger-nav-home-icon > i:first-child {\n position: relative;\n}\n\n.messenger-nav-home-icon > i:last-child {\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n transition: color 0.2s ease, filter 0.2s ease;\n}\n\n.messenger-nav-tab:hover .messenger-nav-home-icon > i:last-child {\n color: #ffd700;\n filter: drop-shadow(0 0 4px #ffd700);\n}\n\n.messenger-nav-label {\n font-size: 14px;\n font-weight: 400;\n color: rgba(255, 255, 255, 0.5);\n transition: color 0.2s ease;\n}\n\n.messenger-nav-tab.active .messenger-nav-icon {\n color: white;\n}\n\n.messenger-nav-tab.active .messenger-nav-label {\n color: white;\n font-weight: 400;\n}\n\n.messenger-nav-badge {\n position: absolute;\n top: 4px;\n right: calc(50% - 16px);\n min-width: 16px;\n height: 16px;\n background: #ef4444;\n color: white;\n font-size: 10px;\n font-weight: 600;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n}\n\n/* ========================================\n Light Theme Overrides\n ======================================== */\n\n/* Panel */\n.theme-light .messenger-panel-content {\n background: #ffffff;\n}\n\n/* Home View */\n.theme-light .messenger-home-view {\n background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 40%);\n}\n\n.theme-light .messenger-home-header {\n background: linear-gradient(180deg, rgba(88, 86, 214, 0.1) 0%, transparent 100%);\n}\n\n.theme-light .messenger-home-greeting {\n color: #86868b;\n}\n\n.theme-light .messenger-home-question {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-message-btn {\n background: #f5f5f7;\n color: #1d1d1f;\n border: 1px solid #e0e0e0;\n}\n\n.theme-light .messenger-home-message-btn:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-home-message-btn svg,\n.theme-light .messenger-home-message-btn i {\n color: #86868b;\n}\n\n.theme-light .messenger-home-featured {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-home-featured-content h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-featured-content p {\n color: #86868b;\n}\n\n.theme-light .messenger-home-changelog-card {\n background: #f5f5f7;\n border: 1px solid #e0e0e0;\n}\n\n.theme-light .messenger-home-changelog-card-content {\n border-top-color: #e0e0e0;\n}\n\n.theme-light .messenger-home-changelog-card:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-home-changelog-card-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-home-changelog-card-desc {\n color: #6e6e73;\n}\n\n/* Close/Back buttons */\n.theme-light .messenger-close-btn,\n.theme-light .messenger-back-btn {\n color: #86868b;\n}\n\n.theme-light .messenger-close-btn:hover,\n.theme-light .messenger-back-btn:hover {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n/* Avatar */\n.theme-light .messenger-avatar {\n border-color: #ffffff;\n}\n\n/* Conversations View */\n.theme-light .messenger-conversations-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-header,\n.theme-light .messenger-help-header,\n.theme-light .messenger-changelog-header,\n.theme-light .messenger-chat-header {\n background: #ffffff;\n border-bottom-color: #e5e5e7;\n}\n\n.theme-light .messenger-conversations-header h2,\n.theme-light .messenger-help-header h2,\n.theme-light .messenger-changelog-header h2 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-conversations-body {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-footer {\n background: #ffffff;\n}\n\n.theme-light .messenger-conversations-empty-icon,\n.theme-light .messenger-chat-empty-avatars,\n.theme-light .messenger-help-empty-icon,\n.theme-light .messenger-changelog-empty-icon {\n color: #c7c7cc;\n}\n\n.theme-light .messenger-conversations-empty h3,\n.theme-light .messenger-chat-empty h3,\n.theme-light .messenger-help-empty h3,\n.theme-light .messenger-changelog-empty h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-conversations-empty p,\n.theme-light .messenger-chat-empty p,\n.theme-light .messenger-help-empty p,\n.theme-light .messenger-changelog-empty p {\n color: #86868b;\n}\n\n.theme-light .messenger-conversation-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n\n.theme-light .messenger-conversation-title {\n color: #1d1d1f !important;\n}\n\n.theme-light .messenger-conversation-item.unread .messenger-conversation-title {\n color: #1d1d1f !important;\n font-weight: 400;\n}\n\n.theme-light .messenger-conversation-time {\n color: #86868b !important;\n}\n\n.theme-light .messenger-conversation-message {\n color: #6e6e73 !important;\n}\n\n.theme-light .messenger-conversation-item.unread .messenger-conversation-message {\n color: #3a3a3c !important;\n}\n\n.theme-light .messenger-chat-title,\n.theme-light .messenger-help-article-title,\n.theme-light .messenger-changelog-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-article-desc,\n.theme-light .messenger-changelog-description {\n color: #86868b;\n}\n\n.theme-light .messenger-conversations-footer {\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-new-message-btn {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n.theme-light .messenger-new-message-btn:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-new-message-btn svg,\n.theme-light .messenger-new-message-btn i {\n color: #86868b;\n}\n\n/* Chat View */\n.theme-light .messenger-chat-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-header {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-chat-messages {\n background: #ffffff;\n}\n\n.theme-light .messenger-chat-empty h3 {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-chat-empty p {\n color: #86868b;\n}\n\n.theme-light .messenger-message-sender {\n color: #86868b;\n}\n\n.theme-light .messenger-message-received .messenger-message-bubble {\n background: #f5f5f7;\n color: #1d1d1f;\n}\n\n.theme-light .messenger-message-own .messenger-message-bubble {\n background: #007aff;\n color: #ffffff;\n}\n\n.theme-light .messenger-message-time {\n color: #86868b;\n}\n\n.theme-light .messenger-chat-compose {\n background: #ffffff;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-compose-input-wrapper {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-compose-input {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-compose-input::placeholder {\n color: #86868b;\n}\n\n.theme-light .messenger-compose-send:disabled {\n background: #e5e5e7;\n color: #c7c7cc;\n}\n\n/* Help View */\n.theme-light .messenger-help-view {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-body {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-search {\n background: #ffffff;\n}\n\n.theme-light .messenger-help-search-wrapper {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-help-search-icon {\n color: #86868b;\n}\n\n.theme-light .messenger-help-search-input {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-search-input::placeholder {\n color: #86868b;\n}\n\n.theme-light .messenger-help-collections-header {\n color: #1d1d1f;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-help-collection {\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-help-collection:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n\n.theme-light .messenger-help-collection-title {\n color: #1d1d1f;\n}\n\n.theme-light .messenger-help-collection-desc {\n color: #6e6e73;\n}\n\n.theme-light .messenger-help-collection-count {\n color: #86868b;\n}\n\n.theme-light .messenger-help-collection-arrow {\n color: #c7c7cc;\n}\n\n/* Changelog View */\n.theme-light .messenger-changelog-subheader {\n border-bottom-color: #e5e5e7;\n}\n\n.theme-light .messenger-changelog-latest {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-team {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-card {\n background: #f5f5f7;\n}\n\n.theme-light .messenger-changelog-card:hover {\n background: #e8e8ed;\n}\n\n.theme-light .messenger-changelog-tag {\n background: rgba(0, 122, 255, 0.15);\n color: #007aff;\n}\n\n.theme-light .messenger-changelog-date {\n color: #86868b;\n}\n\n.theme-light .messenger-changelog-arrow {\n color: #c7c7cc;\n}\n\n/* Navigation */\n.theme-light .messenger-panel-nav {\n background: #ffffff;\n border-top-color: #e5e5e7;\n}\n\n.theme-light .messenger-nav-icon {\n color: #86868b;\n}\n\n.theme-light .messenger-nav-label {\n color: #86868b;\n}\n\n.theme-light .messenger-nav-tab:hover {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.theme-light .messenger-nav-tab.active .messenger-nav-icon,\n.theme-light .messenger-nav-tab.active .messenger-nav-label {\n color: #007aff;\n}\n\n/* ========================================\n Responsive Design\n ======================================== */\n\n@media (max-width: 480px) {\n .messenger-panel {\n width: 100%;\n height: 100%;\n max-height: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n border-radius: 0;\n }\n\n .messenger-panel-content {\n border-radius: 0;\n }\n\n .messenger-launcher {\n bottom: 16px;\n right: 16px;\n }\n\n .messenger-launcher-bottom-left {\n left: 16px;\n }\n}\n\n/* ========================================\n Animations\n ======================================== */\n\n@keyframes messenger-slide-up {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n@keyframes messenger-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .messenger-launcher-btn,\n .messenger-panel,\n .messenger-nav-tab,\n .messenger-conversation-item,\n .messenger-help-article,\n .messenger-changelog-card {\n transition: none;\n }\n}\n",document.head.appendChild(e)}}function M(){if("undefined"!=typeof window&&window.FeedbackSDKConfig){O();const e={...window.FeedbackSDKConfig},t=new L(e);t.init().then(n=>{if(window.FeedbackSDK.instance=t,window.FeedbackSDKConfig.autoCreate){(Array.isArray(window.FeedbackSDKConfig.autoCreate)?window.FeedbackSDKConfig.autoCreate:[window.FeedbackSDKConfig.autoCreate]).forEach(e=>{try{t.createWidget(e.type||"button",e).mount(e.container)}catch(e){console.error("[FeedbackSDK] Failed to create widget:",e)}})}if("undefined"!=typeof CustomEvent){const s=new CustomEvent("FeedbackSDKReady",{detail:{sdk:t,config:e,initData:n}});window.dispatchEvent(s)}}).catch(t=>{if(console.error("[FeedbackSDK] Auto-initialization failed:",t),"undefined"!=typeof CustomEvent){const n=new CustomEvent("FeedbackSDKError",{detail:{error:t,config:e,phase:"initialization"}});window.dispatchEvent(n)}})}}const I={FeedbackSDK:L,BaseWidget:u,ButtonWidget:f,TabWidget:z,InlineWidget:b,SurveyWidget:T,MessengerWidget:$,WidgetFactory:A,EventBus:d,APIService:c,SDKError:t,APIError:n,WidgetError:s,ConfigError:i,ValidationError:r,helpers:p,create:e=>(O(),new L(e)),version:"1.0.0",instance:null,isReady:()=>Boolean(I.instance),getInstance:()=>I.instance,setUserContext:e=>{I.instance?I.instance.setUserContext(e):"undefined"!=typeof window&&(window.FeedbackSDKUserContext=e)},initWithUser:async(e,t)=>{O();const n={...e,userContext:t},s=new L(n);return await s.init(),"undefined"!=typeof window&&(window.FeedbackSDK.instance=s),s},onReady:e=>{"undefined"!=typeof window&&(I.isReady()?e(I.instance):window.addEventListener("FeedbackSDKReady",t=>{e(t.detail.sdk,t.detail)},{once:!0}))},onError:e=>{"undefined"!=typeof window&&window.addEventListener("FeedbackSDKError",t=>{e(t.detail.error,t.detail)})},extractUserContext:L.extractUserContextFromAuth};"undefined"!=typeof window&&(window.FeedbackSDK=I,"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",M):setTimeout(M,0))),e.APIError=n,e.APIService=c,e.BaseWidget=u,e.ButtonWidget=f,e.ConfigError=i,e.EventBus=d,e.FeedbackSDK=L,e.InlineWidget=b,e.MessengerWidget=$,e.SDKError=t,e.SurveyWidget=T,e.TabWidget=z,e.ValidationError=r,e.WidgetError=s,e.WidgetFactory=A,e.default=I,e.helpers=p,Object.defineProperty(e,"__esModule",{value:!0})});
2
2
  //# sourceMappingURL=feedback-sdk.min.js.map