replypier/frontend/public/webclient/replypier.min.js

(()=>{var ve=(re,oe,t)=>new Promise(($,p)=>{var G=y=>{try{P(t.next(y))}catch(R){p(R)}},q=y=>{try{P(t.throw(y))}catch(R){p(R)}},P=y=>y.done?$(y.value):Promise.resolve(y.value).then(G,q);P((t=t.apply(re,oe)).next())});var ze=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48" fill="none"><path d="M29 20 39 6 42 21Z" fill="#568B73"/><path d="M4 16 32 26 23 43H15Z" fill="#2E6A5C"/><path d="M35 26 60 16 49 43H27Z" fill="#8BB49C"/></svg>
`;window.replypierId;window.replypierBaseUrl;window.ReplyPier;window.replypierConfig;(function(){function re(e){return/^#[0-9A-F]{6}$/i.test(e)}function oe(){return typeof window!="undefined"&&window.replypierBaseUrl?window.replypierBaseUrl:typeof window!="undefined"&&window.APP_CONFIG&&window.APP_CONFIG.API_URL?window.APP_CONFIG.API_URL:"https://api.replypier.site/api/v1"}let t={baseUrl:oe(),containerId:"replypier-container",backdropId:"replypier-backdrop",buttonId:"replypier-button",chatBubbleColor:"#f34611",loadingContainerId:"replypier-loading",tokenKey:"rpid",tokenProvider:null,containerBottom:100,containerRight:20,containerWidth:400,containerHeight:560,launcherBottom:20,launcherRight:20,side:"right",displayMode:"floating",launcher:!0,sidebarWidth:420,searchBarWidth:320,searchPlaceholder:"\u6709\u95EE\u9898\u968F\u65F6\u95EE\u6211\u2026",zIndex:999999,trigger:null,hotkey:!0,surfaceIsPalette:null,chatStyle:null,chatInitiationMessages:[],initiationMessageId:"replypier-initiation",initiationShownKey:"rpim_shown",unreadCount:0,hasOpened:!1},$={};function p(e,i){t[e]=i,$[e]=!0}let G=["floating","sidebar-left","sidebar-right","search-bar"],q=["ASK_ANYTHING","AURORA"],P=680,y=620,R=140,A={width:!1,height:!1},N=0;function V(){return t.surfaceIsPalette===!1?!1:(q.indexOf(t.chatStyle)!==-1||t.displayMode==="search-bar")&&t.displayMode!=="sidebar-left"&&t.displayMode!=="sidebar-right"}function Z(){let e=document.getElementById(t.containerId);if(!e)return;if(!V()||!N){e.style.height="";return}let i=Math.min(ae().height,Math.round(window.innerHeight*.76));e.style.height=Math.max(R,Math.min(i,N))+"px"}function ae(){return{width:A.width?t.containerWidth:P,height:A.height?t.containerHeight:y}}function Be(e){if(!e||typeof e!="object")return;let i=function(n,o){$[n]||(t[n]=o)};G.indexOf(e.mode)!==-1&&i("displayMode",e.mode),(e.side==="left"||e.side==="right")&&i("side",e.side),typeof e.launcher=="boolean"&&i("launcher",e.launcher),h(e.width)&&(i("containerWidth",Math.max(280,e.width)),$.containerWidth||(A.width=!0)),h(e.height)&&(i("containerHeight",Math.max(400,e.height)),$.containerHeight||(A.height=!0)),h(e.sidebar_width)&&i("sidebarWidth",Math.max(280,e.sidebar_width)),typeof e.search_placeholder=="string"&&e.search_placeholder&&i("searchPlaceholder",e.search_placeholder.slice(0,80)),h(e.offset_bottom)&&i("launcherBottom",Math.max(0,e.offset_bottom)),h(e.offset_side)&&i("launcherRight",Math.max(0,e.offset_side)),h(e.z_index)&&i("zIndex",Math.max(1,Math.floor(e.z_index)))}function ke(){let e=V(),i=e?ae():{width:t.containerWidth,height:t.containerHeight};return{type:"WIDGET_DISPLAY",mode:e?"ask-ai":t.displayMode,width:i.width,height:i.height,hotkey:t.hotkey!==!1}}let l=null,F=[],X=!1,g=null,L=null,x=!1;function J(e){l?e():x||F.push(e)}let Q={},se=!1;function _(e,i){let n=Q[e];!n||!n.length||n.slice().forEach(function(o){try{o(i)}catch(c){}})}function Pe(e){let i=/^#?([0-9a-f]{6})$/i.exec((e||"").trim());if(!i)return"#0B0C10";let n=parseInt(i[1],16);return(.299*(n>>16&255)+.587*(n>>8&255)+.114*(n&255))/255>.6?"#0B0C10":"#FFFFFF"}let le=!1,E=null,de=[];function ee(){if(le)return;le=!0,E&&(clearTimeout(E),E=null);let e=document.getElementById(t.buttonId);e&&e.classList.remove("replypier-pending"),de.splice(0).forEach(i=>{try{i()}catch(n){}})}function O(){let e=document.getElementById(t.buttonId);if(!e)return;let i=e.querySelector(".rp-badge");if(!i)return;let n=t.hasOpened?t.unreadCount:(t.chatInitiationMessages||[]).length;i.textContent=n>99?"99+":String(n),i.style.display=n>0&&!e.classList.contains("active")?"flex":"none"}function H(){let e=t.displayMode,i=e==="sidebar-left"||e==="sidebar-right",n=e==="sidebar-left"?"left":e==="sidebar-right"?"right":t.side,o=e==="search-bar"?48:64,c=q.indexOf(t.chatStyle)===-1,a=V(),d=ae(),v=document.createElement("style");v.id="replypier-styles",v.textContent=`
      /* ===== Rounded-square launcher (design comp) ===== */
      #${t.buttonId} {
        position: fixed;
        bottom: ${t.launcherBottom}px;
        ${n}: ${t.launcherRight}px;
        width: 64px;
        height: 64px;
        border-radius: 20px 20px 20px 6px;
        background: ${t.chatBubbleColor};
        color: ${Pe(t.chatBubbleColor)};
        box-shadow: 0 16px 40px -8px ${t.chatBubbleColor}cc, inset 0 0 0 1px rgba(255,255,255,0.08);
        cursor: pointer;
        z-index: ${t.zIndex};
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s cubic-bezier(.34,1.3,.5,1), opacity 320ms ease;
        animation: replypier-float 4s ease-in-out infinite;
      }
      #${t.buttonId}.active { animation: none; }
      /* Stay fully invisible until the org's real brand color is known (or the
         widget errors out / times out) \u2014 avoids ever flashing the wrong color. */
      #${t.buttonId}.replypier-pending {
        opacity: 0;
        pointer-events: none;
      }
      #${t.buttonId}:hover { transform: scale(1.06); }

      /* Expanding rings (closed state only) */
      #${t.buttonId} .rp-ring {
        position: absolute;
        inset: 0;
        border-radius: 20px 20px 20px 6px;
        border: 1.5px solid ${t.chatBubbleColor};
        animation: replypier-ring 2.4s ease-out infinite;
        pointer-events: none;
      }
      #${t.buttonId} .rp-ring.r2 { animation-delay: 1.2s; }
      #${t.buttonId}.active .rp-ring { display: none; }

      /* Pulsing 3-dot mark (closed). Absolutely centered so it stays pinned to the
         button's center regardless of the button's display mode (flex on desktop,
         block when .mobile-closed) or viewport. */
      #${t.buttonId} .rp-dots {
        display: flex;
        gap: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #${t.buttonId} .rp-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        animation: replypier-pulse 1.5s ease-in-out infinite;
      }
      #${t.buttonId} .rp-dot:nth-child(2) { animation-delay: .18s; }
      #${t.buttonId} .rp-dot:nth-child(3) { animation-delay: .36s; }
      #${t.buttonId}.active .rp-dots { display: none; }

      /* Chevron (open) \u2014 absolutely centered, pinned to the button center. */
      #${t.buttonId} .rp-chevron {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        color: currentColor;
      }
      #${t.buttonId}.active .rp-chevron { display: block; }

      /* Unread badge = number of nudges */
      #${t.buttonId} .rp-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #FF8A73;
        color: #0B0C10;
        font: 700 11.5px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
        align-items: center;
        justify-content: center;
        border: 2px solid #F5F3EE;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        display: none;
      }
      #${t.buttonId}.active .rp-badge { display: none; }

      #${t.buttonId}.loading .rp-dots,
      #${t.buttonId}.loading .rp-chevron { visibility: hidden; }
      #${t.buttonId}.loading:after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        top: 50%;
        left: 50%;
        margin: -8px 0 0 -8px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: replypier-spin 0.6s linear infinite;
      }

      /* Search-bar trigger content: hidden unless search-bar mode (below) shows it. */
      #${t.buttonId} .rp-search { display: none; }

      ${e==="search-bar"?`
      @media (min-width: 769px) {
        /* ===== Search-bar mode: the launcher becomes a search-input-like bar.
           Same element, same click/toggle/badge logic. Mobile keeps the bubble. ===== */
        #${t.buttonId} {
          width: ${t.searchBarWidth}px;
          height: 48px;
          border-radius: 24px;
          padding: 0 16px;
          background: #ffffff;
          color: #374151;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), inset 0 0 0 1.5px ${t.chatBubbleColor}55;
          animation: none;
          justify-content: flex-start;
          box-sizing: border-box;
        }
        #${t.buttonId}:hover { transform: scale(1.02); }
        #${t.buttonId} .rp-ring,
        #${t.buttonId} .rp-dots,
        #${t.buttonId} .rp-chevron,
        #${t.buttonId}.active .rp-chevron { display: none; }
        /* Dark spinner \u2014 the stock white one vanishes on the white bar. */
        #${t.buttonId}.loading .rp-search { visibility: hidden; }
        #${t.buttonId}.loading:after {
          border-color: rgba(0, 0, 0, 0.15);
          border-top-color: ${t.chatBubbleColor};
        }
        #${t.buttonId} .rp-search {
          display: flex;
          align-items: center;
          gap: 10px;
          min-width: 0;
          width: 100%;
        }
        #${t.buttonId} .rp-search svg {
          flex-shrink: 0;
          color: ${t.chatBubbleColor};
        }
        #${t.buttonId} .rp-search-placeholder {
          font: 400 14px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
          color: #6b7280;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      `:""}

      @keyframes replypier-spin { to { transform: rotate(360deg); } }
      @keyframes replypier-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
      @keyframes replypier-ring { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
      @keyframes replypier-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

      @media (prefers-reduced-motion: reduce) {
        #${t.buttonId},
        #${t.buttonId} .rp-ring,
        #${t.buttonId} .rp-dot,
        .initiation-orb { animation: none !important; }
        /* Open and close in place: no slide, scale or fade for people who asked for less motion. */
        #${t.buttonId},
        #${t.containerId},
        #${t.backdropId} { transition: none !important; }
      }

      #${t.containerId} {
        position: fixed;
        /* The window sits above the launcher; when the launcher is moved (via
           ReplyPier.init position / setPosition) the window shifts by the same
           delta so the two stay together. Mobile is full-screen (media query below)
           and is unaffected. */
        bottom: ${(t.containerBottom||100)+((t.launcherBottom||20)-20)}px;
        ${n}: ${(t.containerRight||20)+((t.launcherRight||20)-20)}px;
        width: ${t.containerWidth||384}px;
        max-width: calc(100vw - 48px);
        height: ${t.containerHeight}px;
        max-height: calc(100vh - 132px);
        background: transparent;
        z-index: ${t.zIndex};
        overflow: hidden;
        /* Animated open/close with slide + fade */
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px) scale(0.98);
        transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 360ms;
        border: none;
        padding: 0;
        margin: 0;
        pointer-events: none;
      }

      #${t.containerId}.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: auto;
      }

      /* Backdrop element: always in the DOM, so keep it out of the host page's flow
         even when it is not in use \u2014 an unstyled div in <body> adds a phantom row to
         a flex/grid body layout. */
      #${t.backdropId} {
        position: fixed;
        inset: 0;
        display: none;
      }

      ${a?`
      /* ===== Ask AI: centered command palette (\u2318K), the pattern people expect from
         an "Ask anything" surface \u2014 dimmed page, top-anchored so the eye lands on
         the input rather than the middle of the screen. ===== */
      #${t.containerId} {
        top: 12vh;
        bottom: auto;
        left: 50%;
        right: auto;
        width: min(${d.width}px, calc(100vw - 32px));
        max-width: none;
        /* A cross-document iframe can't size its embedder, so this is a starting
           height only: the palette measures its content and posts WIDGET_RESIZE,
           which sets an inline height (clamped to this ceiling). height:100% against
           an auto-height parent would collapse to the 150px replaced default. */
        height: min(${d.height}px, 76vh);
        max-height: 76vh;
        transform: translate(-50%, -8px) scale(0.98);
        z-index: ${t.zIndex+1};
        transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
                    height 200ms cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s linear 360ms;
      }
      #${t.containerId}.active {
        transform: translate(-50%, 0) scale(1);
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
                    height 200ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      #${t.containerId} .replypier-iframe {
        border-radius: 16px;
      }
      #${t.backdropId} {
        display: block;
        background: rgba(9, 9, 14, 0.45);
        backdrop-filter: blur(2px);
        z-index: ${t.zIndex};
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 0s linear 220ms;
      }
      #${t.backdropId}.active {
        opacity: 1;
        visibility: visible;
        transition: opacity 220ms ease;
      }
      /* The palette dims the page and closes on backdrop click / Esc, so the launcher
         would just be a stray button floating over the dim. */
      #${t.buttonId}.active {
        display: none;
      }
      @media (max-width: 768px) {
        /* Full-screen on phones like every other mode. The main mobile block below
           pins the edges but never resets transform \u2014 without this the centering
           translate would shove the panel half a screen to the left. */
        #${t.containerId},
        #${t.containerId}.active { transform: none !important; }
        #${t.backdropId} { display: none; }
      }
      `:""}

      ${i?`
      /* ===== Sidebar mode: full-height drawer hugging the ${n} edge ===== */
      #${t.containerId} {
        top: 0;
        bottom: auto;
        ${n}: 0;
        ${n==="left"?"right: auto;":"left: auto;"}
        width: ${t.sidebarWidth}px;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        transform: translateX(${n==="left"?"-100%":"100%"});
        box-shadow: ${n==="left"?"":"-"}12px 0 40px rgba(0, 0, 0, 0.12);
      }
      #${t.containerId}.active {
        transform: translateX(0);
      }
      #${t.containerId} .replypier-iframe {
        border-radius: 0;
      }
      ${c?`
      /* The drawer's own header chevron closes it, so keeping the launcher on screen
         would just park a duplicate button beside the panel. Hide it while open. */
      #${t.buttonId}.active {
        display: none;
      }
      `:`
      /* ASK_ANYTHING / AURORA draw no in-panel chevron, and the drawer would paint over
         the launcher (later sibling, equal z-index) \u2014 leaving nothing to click. Keep it
         reachable: slide it out beside the drawer edge, one layer up. */
      #${t.buttonId} {
        z-index: ${t.zIndex+1};
        transition: transform 0.3s cubic-bezier(.34,1.3,.5,1), opacity 320ms ease,
                    left 360ms cubic-bezier(0.22, 1, 0.36, 1), right 360ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      #${t.buttonId}.active {
        ${n}: ${t.sidebarWidth+20}px;
      }
      `}
      `:""}

      /* Clean border around the widget container */
      /* The widget panel (inside the iframe) draws its own theme-aware border, so the
         container no longer adds one \u2014 avoids a double border (and a white line on dark themes). */

        .replypier-iframe {
                width: 100%;
        height: 100%;
        border: none;
        padding: 0;
        margin: 0;
        display: block;
        border-radius: 24px;
        /* Rely on corner shadows from container */
        box-shadow: none;
      }

      #replypier-mobile-close {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: ${t.zIndex+1};
        transition: all 0.3s ease;
      }

      #replypier-mobile-topbar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        z-index: ${t.zIndex};
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
      }

      #replypier-mobile-topbar.active {
        display: flex;
      }

      #replypier-mobile-topbar .topbar-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }

      /* Only ASK_ANYTHING (which has no in-panel header chevron) uses the floating
         mobile-close; other styles close via the header chevron, so don't double up. */
      .ask-anything-mobile #replypier-mobile-close.active {
        display: flex;
      }

      @media (max-width: 768px) {
        #${t.containerId} {
          width: 100vw !important;
          height: 100vh !important;
          height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
          /* Reset the desktop max-width/height clamp \u2014 without this the desktop rule's
             max-width: calc(100vw - 48px) / max-height: calc(100vh - 132px) keeps the
             window a floating panel instead of going full-screen on mobile. */
          max-width: 100vw !important;
          max-height: 100vh !important;
          max-height: 100dvh !important;
          top: 0 !important;
          left: 0 !important;
          bottom: 0 !important;
          right: 0 !important;
          border-radius: 0 !important;
          position: fixed !important;
          margin: 0 !important;
          padding: 0 !important;
        }

        #${t.containerId}.active {
          bottom: 0 !important;
        }

        .replypier-iframe {
          border-radius: 0 !important;
          width: 100vw !important;
          height: 100vh !important;
          height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
        }

        #${t.buttonId} {
          display: none;
        }

        #${t.buttonId}.mobile-closed {
          /* flex (not block) keeps the launcher's centering context; the dots/chevron
             are absolutely centered regardless, but this keeps it consistent. */
          display: flex !important;
          width: 56px !important;
          height: 56px !important;
          /* Respect the configured position on mobile too, so the closed launcher can
             clear a fixed bottom nav bar (the main reason to move it up). */
          bottom: ${t.launcherBottom}px !important;
          ${n}: ${t.launcherRight}px !important;
        }

        .ask-anything-mobile #replypier-mobile-close.active {
          display: flex !important;
        }

        #replypier-mobile-close:hover {
          opacity: 0.7;
        }

        /* ASK_ANYTHING style specific mobile topbar */
        .ask-anything-mobile #replypier-mobile-topbar.active {
          display: flex !important;
        }

        .ask-anything-mobile #replypier-mobile-close.active {
          top: 15px !important;
          right: 15px !important;
          z-index: ${t.zIndex+2} !important;
        }

        /* When topbar is visible, push iframe down to avoid overlap */
        .ask-anything-mobile .replypier-iframe {
          top: 60px !important;
          height: calc(100vh - 60px) !important;
          height: calc(100dvh - 60px) !important;
        }
      }

      @media (min-width: 769px) {
        #replypier-mobile-close {
          display: none !important;
        }
      }

      /* Chat Initiation Message Styles */
      #${t.initiationMessageId} {
        position: fixed !important;
        /* Sit above the launcher (+12px gap) and align to its edge on the active side,
           so it never overlaps the icon regardless of the configured position/mode. */
        bottom: ${(t.launcherBottom||20)+o+12}px !important;
        ${n}: ${t.launcherRight||20}px !important;
        max-width: 260px !important;
        background: white !important;
        padding: 12px 36px 12px 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1) !important;
        z-index: ${t.zIndex-1} !important;
        cursor: pointer !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(0.95);
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border: none !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        line-height: 1.4 !important;
        text-align: left !important;
        vertical-align: baseline !important;
        overflow: visible !important;
      }
      /* Clamp the nudge text to 4 lines with an ellipsis so a long welcome/initiation
         message can never balloon the bubble over the page or into the launcher.
         Applied to the text node only, so the orb (left:-34px) is never clipped. */
      #${t.initiationMessageId} .initiation-message-text {
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
      }

      /* Siri-style orb avatar beside the nudge (design comp) */
      .initiation-orb {
        position: absolute !important;
        left: -34px !important;
        bottom: 2px !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 50% !important;
        background: conic-gradient(from 0deg, #C9F24E, #9D8CFF, #5FE3D6, #FF8A73, #C9F24E) !important;
        box-shadow: 0 4px 14px rgba(157, 140, 255, 0.4) !important;
        animation: replypier-orb-spin 6s linear infinite !important;
        z-index: 1 !important;
      }
      @keyframes replypier-orb-spin { to { transform: rotate(360deg); } }
      ${n==="left"?`
      /* On the left edge the orb (which protrudes 34px past the bubble) would clip
         off-screen \u2014 mirror it to the bubble's page-facing side. */
      .initiation-orb {
        left: auto !important;
        right: -34px !important;
      }
      `:""}

      #${t.initiationMessageId}.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        animation: replypier-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

      @keyframes replypier-bounce-in {
        0% {
          opacity: 0;
          transform: translateY(20px) scale(0.8);
        }
        50% {
          transform: translateY(-5px) scale(1.02);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      #${t.initiationMessageId}:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.14);
      }

      #${t.initiationMessageId}::after {
        content: '' !important;
        position: absolute !important;
        bottom: -7px !important;
        ${n}: 30px !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        background: white !important;
        transform: rotate(45deg) !important;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.06) !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        z-index: -1 !important;
      }

      .initiation-message-text {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #374151 !important;
        margin: 0 !important;
        padding: 0 4px 0 0 !important;
        position: relative !important;
        z-index: 1 !important;
        min-height: 18px !important;
        box-sizing: border-box !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        text-align: left !important;
        vertical-align: baseline !important;
        font-weight: normal !important;
        font-style: normal !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
      }

      .initiation-message-text::after {
        content: '|';
        animation: blink 1s step-end infinite;
        margin-left: 2px;
        color: ${t.chatBubbleColor};
        font-weight: 500;
      }

      .initiation-message-text.typing-complete::after {
        display: none;
      }

      @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
      }

      .initiation-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        opacity: 0.5 !important;
        transition: all 0.2s ease !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        outline: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
      }

      .initiation-close:hover {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.08) !important;
        transform: scale(1.05) !important;
      }

      .initiation-close::before,
      .initiation-close::after {
        content: '' !important;
        position: absolute !important;
        width: 9px !important;
        height: 1.5px !important;
        min-width: 9px !important;
        min-height: 1.5px !important;
        max-width: 9px !important;
        max-height: 1.5px !important;
        background: #4a5568 !important;
        border-radius: 1px !important;
        top: 50% !important;
        left: 50% !important;
        margin: -0.75px 0 0 -4.5px !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
      }

      .initiation-close::before {
        transform: rotate(45deg) !important;
      }

      .initiation-close::after {
        transform: rotate(-45deg) !important;
      }

      @media (max-width: 768px) {
        #${t.initiationMessageId} {
          display: none !important;
        }
      }

      /* Error UI Styles */
      .replypier-error-ui {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 24px;
        overflow: hidden;
        position: relative;
      }

      .replypier-error-ui::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
        pointer-events: none;
      }

      .replypier-error-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px 24px;
        text-align: center;
        position: relative;
        z-index: 1;
        max-width: 90%;
      }

      .replypier-error-close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: rgba(120, 120, 140, 0.12);
        color: #4b5563;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease;
      }
      .replypier-error-close:hover {
        background: rgba(120, 120, 140, 0.22);
      }

      .replypier-error-icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        border-radius: 20px;
        margin-bottom: 20px;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
      }

      .replypier-error-icon {
        width: 36px;
        height: 36px;
        color: #6366f1;
      }

      .replypier-error-title {
        font-size: 20px;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 12px 0;
        letter-spacing: -0.01em;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }

      .replypier-error-message {
        font-size: 14px;
        line-height: 1.6;
        color: #64748b;
        margin: 0 0 20px 0;
        max-width: 280px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }

      .replypier-error-retry {
        min-width: 104px;
        min-height: 44px;
        padding: 10px 24px;
        margin: 0 0 22px;
        border: 0;
        border-radius: 12px;
        background: #4f46e5;
        color: #fff;
        font: 600 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        cursor: pointer;
      }
      .replypier-error-retry:hover:not(:disabled) {
        background: #4338ca;
      }
      .replypier-error-retry:focus-visible {
        outline: 3px solid #818cf8;
        outline-offset: 3px;
      }
      .replypier-error-retry:disabled {
        opacity: 0.7;
        cursor: wait;
      }

      .replypier-error-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        color: #94a3b8;
        opacity: 0.8;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }
      .replypier-error-footer-link {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
      }
      .replypier-error-footer-link:hover {
        text-decoration: underline;
      }

      @media (max-width: 768px) {
        .replypier-error-ui {
          border-radius: 0;
        }

        .replypier-error-card {
          padding: 24px 20px;
        }

        .replypier-error-icon-wrapper {
          width: 64px;
          height: 64px;
          border-radius: 16px;
        }

        .replypier-error-icon {
          width: 32px;
          height: 32px;
        }

        .replypier-error-title {
          font-size: 18px;
        }

        .replypier-error-message {
          max-width: 260px;
        }
      }

      ${t.launcher?"":`
      /* Launcher hidden by config \u2014 the site opens the chat with its own trigger or
         the JS API. Last in the sheet so it also beats the mobile .mobile-closed
         re-show (display: flex !important at equal specificity). */
      #${t.buttonId}, #${t.buttonId}.mobile-closed { display: none !important; }
      `}
    `;let m=document.getElementById("replypier-styles");m&&m.remove(),document.head.appendChild(v),$e()}function $e(){let e=document.getElementById(t.buttonId);if(!e)return;let i=e.querySelector(".rp-search-placeholder");i&&i.textContent!==t.searchPlaceholder&&(i.textContent=t.searchPlaceholder)}function M(e){if(typeof e!="string")return null;let i=e.trim();return!i||i==="undefined"||i==="null"?null:i}function pe(){return M(window.replypierToken)||M(localStorage.getItem(t.tokenKey))}function ce(e){let i=M(e);if(!i)return null;let n=i.split(".")[1];if(!n)return null;try{let o=JSON.parse(atob(n.replace(/-/g,"+").replace(/_/g,"/")));return o.sub||o.customer_id||null}catch(o){return null}}function te(e){e&&localStorage.setItem(t.tokenKey,e)}function W(){localStorage.removeItem(t.tokenKey)}function U(){return window.innerWidth<=768}function Re(e){return e?e.replace(/\uFFFD/g,"").replace(/[��]/g,"").replace(/[\x00-\x1F\x7F-\x9F]/g,"").trim():""}function Ne(){if(!t.chatInitiationMessages||t.chatInitiationMessages.length===0)return null;let e=Math.floor(Math.random()*t.chatInitiationMessages.length),i=t.chatInitiationMessages[e];return i?Re(i):null}function Fe(){return U()||!t.launcher||!t.chatInitiationMessages||t.chatInitiationMessages.length===0?!1:!sessionStorage.getItem(t.initiationShownKey)}function he(){sessionStorage.setItem(t.initiationShownKey,"true")}function Oe(){let e=Ne();if(!e)return null;let i=document.createElement("div");return i.id=t.initiationMessageId,i.innerHTML=`
      <span class="initiation-orb"></span>
      <button class="initiation-close" aria-label="\u5173\u95ED"></button>
      <p class="initiation-message-text"></p>
    `,i.dataset.fullMessage=e,i}function He(e,i,n=50){let o=e.querySelector(".initiation-message-text");if(!o)return;let c=0,a=setInterval(()=>{c<i.length?(o.textContent+=i.charAt(c),c++):(clearInterval(a),o.classList.add("typing-complete"),e.typeInterval=null)},n);e.typeInterval=a}function We(e,i){if(!e||!Fe())return;document.body.appendChild(e),setTimeout(()=>{e.classList.add("show"),setTimeout(()=>{let o=e.dataset.fullMessage;o&&He(e,o,40)},300)},1500),e.addEventListener("click",o=>{o.target.classList.contains("initiation-close")||(e.typeInterval&&clearInterval(e.typeInterval),ue(e),i(),he())});let n=e.querySelector(".initiation-close");n&&n.addEventListener("click",o=>{o.stopPropagation(),e.typeInterval&&clearInterval(e.typeInterval),ue(e),he()})}function ue(e){e&&(e.classList.remove("show"),setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},400))}function me(){x=!1,H();let e=document.createElement("div");e.id=t.buttonId,e.classList.add("replypier-pending"),e.innerHTML=`
      <span class="rp-ring"></span>
      <span class="rp-ring r2"></span>
      <div class="rp-dots"><span class="rp-dot"></span><span class="rp-dot"></span><span class="rp-dot"></span></div>
      <span class="rp-chevron">&#8964;</span>
      <span class="rp-search">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path></svg>
        <span class="rp-search-placeholder"></span>
      </span>
      <span class="rp-badge"></span>
    `,E=setTimeout(ee,8e3);let i=document.createElement("div");i.id=t.containerId;let n=document.createElement("div");n.id="replypier-mobile-close",n.innerHTML=`
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 12H19" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    `;let o=document.createElement("div");o.id="replypier-mobile-topbar",o.innerHTML=`
      <h3 class="topbar-title">\u804A\u5929</h3>
      <div style="width: 44px;"></div>
    `;let c=document.createElement("div");c.id=t.backdropId,document.body.appendChild(e),document.body.appendChild(c),document.body.appendChild(i),document.body.appendChild(n),document.body.appendChild(o),O(),$e();let a=!1,d=null,v=!1,m=null;function b(){a=!a,i.classList.toggle("active"),c.classList.toggle("active",a),e.classList.toggle("active"),n.classList.toggle("active"),a&&(t.hasOpened=!0,t.unreadCount=0),d&&d.contentWindow&&d.contentWindow.postMessage({type:"WIDGET_VISIBILITY",open:a},"*"),O(),a&&m&&(ue(m),m=null,he()),U()?a?(e.classList.remove("mobile-closed"),e.style.animation=""):(e.classList.add("mobile-closed"),e.style.animation="replypier-float 4s ease-in-out infinite",o.classList.remove("active"),document.body.classList.remove("ask-anything-mobile")):a&&n.classList.remove("active"),a&&d&&d.contentWindow.postMessage({type:"SCROLL_TO_BOTTOM"},"*"),_(a?"open":"close")}let K=null,ge=!1;function qe(r){let s=String(r||"").slice(0,2e3);s&&(ge&&d&&d.contentWindow?d.contentWindow.postMessage({type:"PREFILL_MESSAGE",text:s},"*"):K=s)}let Y=0;function Ae(){for(Y++;i.firstChild;)i.removeChild(i.firstChild);d=null,g=null,L=null,ge=!1,se=!1,K=null,v=!1,e.classList.remove("loading"),N=0,Z()}function Ve(){a&&b(),Ae(),t.unreadCount=0,t.hasOpened=!1,O(),D()}function Ze(){a&&b(),Ae(),window.removeEventListener("resize",Te),window.removeEventListener("message",_e),m&&(m.typeInterval&&clearInterval(m.typeInterval),T(m),m=null),[e,c,i,n,o].forEach(T),T(document.getElementById("replypier-styles")),document.body.classList.remove("ask-anything-mobile"),le=!1,E&&(clearTimeout(E),E=null),de.length=0,t.unreadCount=0,t.hasOpened=!1,l=null,F.length=0,X=!1,x=!0}function Xe(r,s){let w=document.createElement("div");w.className="replypier-error-ui";let I=document.createElement("div");I.className="replypier-error-card";let k=document.createElement("button");k.type="button",k.className="replypier-error-close",k.setAttribute("aria-label","\u5173\u95ED\u804A\u5929"),k.textContent="\xD7",k.addEventListener("click",function(){a&&b()}),w.appendChild(k);let u=document.createElement("div");u.className="replypier-error-icon-wrapper";let f=document.createElementNS("http://www.w3.org/2000/svg","svg");f.setAttribute("class","replypier-error-icon"),f.setAttribute("viewBox","0 0 24 24"),f.setAttribute("aria-hidden","true"),f.setAttribute("fill","none"),f.setAttribute("stroke","currentColor"),f.setAttribute("stroke-width","1.5"),f.setAttribute("stroke-linecap","round"),f.setAttribute("stroke-linejoin","round");let C=document.createElementNS("http://www.w3.org/2000/svg","path");C.setAttribute("d","M5 4h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-4 3v-3H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z");let z=document.createElementNS("http://www.w3.org/2000/svg","path");z.setAttribute("d","M8 10h8M8 13h5"),f.appendChild(C),f.appendChild(z),u.appendChild(f);let ye=document.createElement("h2");ye.className="replypier-error-title",ye.textContent="\u5BA2\u670D\u6682\u65F6\u65E0\u6CD5\u8FDE\u63A5";let xe=document.createElement("p");xe.className="replypier-error-message",xe.textContent=r;let S=document.createElement("button");S.type="button",S.className="replypier-error-retry",S.textContent="\u91CD\u8BD5",S.addEventListener("click",function(){S.disabled=!0,S.textContent="\u6B63\u5728\u91CD\u8BD5\u2026",s()});let ne=document.createElement("div");ne.className="replypier-error-footer";let we=document.createElement("span");we.innerHTML=ze;let Ie=we.querySelector("svg");Ie.setAttribute("width","20"),Ie.setAttribute("height","16"),Ie.setAttribute("aria-hidden","true");let B=document.createElement("a");return B.href="https://replypier.site",B.target="_blank",B.rel="noopener noreferrer",B.className="replypier-error-footer-link",B.textContent="\u7531 ReplyPier \u63D0\u4F9B\u652F\u6301",ne.appendChild(we),ne.appendChild(B),I.appendChild(u),I.appendChild(ye),I.appendChild(xe),I.appendChild(S),I.appendChild(ne),w.appendChild(I),w}function Le(r){T(r);let s=Xe("\u8BF7\u68C0\u67E5\u7F51\u7EDC\u540E\u91CD\u8BD5\uFF0C\u6216\u7A0D\u540E\u518D\u6765\u3002",function(){D(s)});i.appendChild(s),ee()}function