function loadConversation(window) {
  const pageSrc = 'https://converse.microcast.ai/6c8c81b6-23c0-4968-984d-7e3ce7a38c05/5cf505fc-5488-4202-818d-d7945cb77164/converse';
  const buttonEnabled = false;
  const popupConfig = {"paddingX":11,"minHeight":401,"widthPercent":45,"borderRadius":0,"shadow":{"thickness":0,"position":"full"},"maxHeight":901,"minWidth":301,"position":"bottom-right","paddingY":41,"maxWidth":901,"heightPercent":65};
  const mobilePopupConfig = {"paddingX":11,"minHeight":401,"widthPercent":60,"shadow":{"thickness":0,"position":"full"},"maxHeight":901,"minWidth":301,"position":"bottom-right","paddingY":41,"maxWidth":901,"heightPercent":80};
  const minimizedConfig = {"paddingX":11,"width":240,"position":"bottom-right","paddingY":11,"height":66};
  const autoOpenConfig = {"enabled":false};
  const initialWindowState = 'MINIMIZED';
    
  const document = window.document;
  console.log('Microcasting Conversation Embed');
  document.head.insertAdjacentHTML("beforeend", `
<style>
.microcastingAi-div {
  display:flex;
visibility:hidden;
position:fixed;
transition:height 1s, min-height 1s, width 1s, visibility 1s, opacity 1s, left 1s, right 1s, top 1s, bottom 1s;
opacity:0;
background-color:transparent;
z-index:1000000;
justify-content:center;
align-items:center;
color:white;
font-size:24px;
box-shadow:0px 0px 0px 0px undefined;
border-radius:0px
}

.microcastingAi-div.minimized {
  overflow: 'hidden',
}

.microcastingAi-iframe-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.1);
z-index: 22000000;
display: none;
}

.microcastingAiTriggerButton {
border:none;
display:block;
margin-left:auto;
margin-right:auto
}

@media only screen and (max-width: 480px) {
.microcastingAi-div {
display:flex;
visibility:hidden;
position:fixed;
transition:height 1s, min-height 1s, width 1s, visibility 1s, opacity 1s, left 1s, right 1s, top 1s, bottom 1s;
opacity:0;
background-color:transparent;
z-index:1000000;
justify-content:center;
align-items:center;
color:white;
font-size:24px;
box-shadow:0px 0px 0px 0px undefined;
border-radius:0px
}
}


.microcastingAi-resize-handle {
  position: absolute;
  display: flex;
  width: 30px;
  height: 30px;
  clip-path: polygon(30% 0, 80% 50%, 30% 100%);
  display: none;
}

.microcastingAi-resize-handle::before {
    left: 12px; /* Position of the first line */
}

.microcastingAi-resize-handle::after {
    right: 12px; /* Position of the second line */
}

.microcastingAi-resize-handle-top-right {
  transform: rotate(-45deg);
  cursor: ne-resize;
  top: -4px;
  right: -4px;
}
.microcastingAi-resize-handle-top-left {
  transform: rotate(-135deg);
  cursor: nw-resize;
  top: -4px;
  left: -4px;
}
.microcastingAi-resize-handle-bottom-right {
  transform: rotate(45deg);
  cursor: se-resize;
  bottom: -4px;
  right: -4px;
}
.microcastingAi-resize-handle-bottom-left {
  transform: rotate(135deg);
  cursor: sw-resize;
  bottom: -4px;
  left: -4px;
}
.microcastingAi-resize-handle::before,
.microcastingAi-resize-handle::after {
    content: '';
    display: block;
    width: 2px; /* Line width */
    height: 100%;
    background-color: lightgrey;
    position: absolute;
}

.microcastingAi-div.minimized .microcastingAi-resize-handle {
  display: none;
}

/* Suggested Prompts – Storefront column layout */
.microcasting-suggested-prompts-container {
  margin: 24px 0;
  padding: 0;
}

.microcasting-suggested-prompts-header {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  text-align: left;
  line-height: 1.3;
}

.microcasting-suggested-prompts-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.microcasting-suggested-prompt-btn {
  display: block;
  width: 100%;
  background: #ffffff;
  color: #0d6efd;
  border: 1px solid #0d6efd;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.microcasting-suggested-prompt-btn:hover {
  background: #0d6efd;
  color: #fff;
}

.microcasting-suggested-prompt-btn:active {
  background: #0a58ca;
  border-color: #0a58ca;
  color: #fff;
}

.microcasting-suggested-prompt-btn:focus {
  outline: 2px solid #0a58ca;
  outline-offset: 2px;
}
</style>
`)

  const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
  const setPosition = (element, position) => {
    // console.log('setPosition', position);
    element.style.top = `${position.top}px`;
    element.style.right = `${position.right}px`;
    element.style.bottom = `${position.bottom}px`;
    element.style.left = `${position.left}px`;
  }
  const setStyle = (element, props) => {
    Object.assign(element.style, props);
  }
  const calcPosition = (windowSize, popupConfig, popupSize) => {
    // console.log('calcPosition', { windowSize, popupConfig, popupSize });
    if (!popupSize) {
      popupSize = {
        height: clamp(windowSize.height * popupConfig.heightPercent / 100, popupConfig.minHeight, popupConfig.maxHeight),
        width: clamp(windowSize.width * popupConfig.widthPercent / 100, popupConfig.minWidth, popupConfig.maxWidth),
      };
    };
    // console.log('popupSize', popupSize);
    let calculatedPosition = undefined;
    switch (popupConfig.position) {
      case 'top-left':
        calculatedPosition = {
          top: popupConfig.paddingX,
          bottom: windowSize.height - popupConfig.paddingY - popupSize.height,
          left: popupConfig.paddingY,
          right: windowSize.width - popupConfig.paddingX - popupSize.width,
        };
        break;
      case 'top-center':
        calculatedPosition = {
          top: popupConfig.paddingY,
          bottom: windowSize.height - popupConfig.paddingY - popupSize.height,
          left: (windowSize.width - popupSize.width) / 2,
          right: (windowSize.width - popupSize.width) / 2,
        };
        break;
      case 'top-right':
        calculatedPosition = {
          top: popupConfig.paddingY,
          bottom: windowSize.height - popupConfig.paddingY - popupSize.height,
          left: windowSize.width - popupConfig.paddingX - popupSize.width,
          right: popupConfig.paddingX,
        };
        break;
      case 'bottom-left':
        calculatedPosition = {
          top: windowSize.height - popupConfig.paddingY - popupSize.height,
          bottom: popupConfig.paddingY,
          left: popupConfig.paddingX,
          right: windowSize.width - popupConfig.paddingX - popupSize.width,
        };
        break;
      case 'bottom-center':
        calculatedPosition = {
          top: windowSize.height - popupConfig.paddingY - popupSize.height,
          bottom: popupConfig.paddingY,
          left: (windowSize.width - popupSize.width) / 2,
          right: (windowSize.width - popupSize.width) / 2,
        };
        break;
      case 'bottom-right':
        calculatedPosition = {
          top: windowSize.height - popupConfig.paddingY - popupSize.height,
          bottom: popupConfig.paddingY,
          right: popupConfig.paddingX,
          left: windowSize.width - popupConfig.paddingX - popupSize.width,
        };
        break;
      default:
        calculatedPosition = undefined;
        break;
    };
    // console.log('calculatedPosition', calculatedPosition);
    const width = calculatedPosition.right - calculatedPosition.left;
    const height = calculatedPosition.bottom - calculatedPosition.top;
    // make sure its bigger than minWidth and minHeight
    calculatedPosition.width = Math.max(width, popupConfig.minWidth);
    calculatedPosition.height = Math.max(height, popupConfig.minHeight);
    // make sure its smaller than maxWidth and maxHeight
    calculatedPosition.width = Math.min(width, popupConfig.maxWidth);
    calculatedPosition.height = Math.min(height, popupConfig.maxHeight);
    // make sure its not outside the window
    calculatedPosition.left = Math.max(calculatedPosition.left, 0);
    calculatedPosition.top = Math.max(calculatedPosition.top, 0);
    calculatedPosition.right = Math.min(calculatedPosition.right, windowSize.width);
    calculatedPosition.bottom = Math.min(calculatedPosition.bottom, windowSize.height);
    // console.log('final calculatedPosition', calculatedPosition);
    return calculatedPosition;
  };

  const div = document.createElement('div');
  div.className = "microcastingAi-div";
  div.id = "microcastingAi-div";
  document.body.appendChild(div);

  const iframeCover = document.createElement('div');
  iframeCover.className = "microcastingAi-iframe-cover";
  div.appendChild(iframeCover);

  let startMouseX, startMouseY, startPosition, popupPosition;
  
  let startTransition = div.style.transition;

  const resize = (e) => {
    const diffX = e.clientX - startMouseX;
    const diffY = e.clientY - startMouseY;
    
    // handle vertical resize
    if (resizeFrom.startsWith('top')) {
      const newTop = startPosition.top + diffY;
      popupPosition.top = windowSize.height  - newTop - startPosition.bottom > popupConfig.minHeight
        ? newTop : windowSize.height - popupConfig.minHeight - startPosition.bottom;
    } else if (resizeFrom.startsWith('bottom')) {
      const newBottom = startPosition.bottom - diffY;
      popupPosition.bottom = windowSize.height - newBottom - startPosition.top > popupConfig.minHeight
        ? newBottom : windowSize.height - popupConfig.minHeight - startPosition.top;
    }

    // handle horizontal resize
    if (resizeFrom.endsWith('left')) {
      const newLeft = startPosition.left + diffX;
      popupPosition.left = windowSize.width - newLeft - startPosition.right > popupConfig.minWidth
        ? newLeft : windowSize.width - startPosition.right - popupConfig.minWidth;
    } else if (resizeFrom.endsWith('right')) {
      const newRight = startPosition.right - diffX;
      popupPosition.right = windowSize.width - newRight - startPosition.left > popupConfig.minWidth
        ? newRight : windowSize.width - startPosition.left - popupConfig.minWidth;
    }
    setPosition(div, popupPosition);
  };
  //       popupPosition.right = windowSize.width  - newRight - startPosition.left > popupConfig.minWidth
  //         ? newRight : windowSize.width - popupConfig.minWidth - startPosition.left;

  //       const newTop = startPosition.top + diffY;
  //       popupPosition.top = windowSize.height  - newTop - startPosition.bottom > popupConfig.minHeight
  //         ? newTop : windowSize.height - popupConfig.minHeight - startPosition.bottom;
  //       break;
  //     case 'top-left':
  //       popupPosition.left = startPosition.left + diffX;
  //       popupPosition.top = startPosition.top + diffY;
  //       break;
  //     case 'bottom-right':
  //       popupPosition.right = startPosition.right - diffX;
  //       popupPosition.bottom = startPosition.bottom - diffY;
  //       break;
  //     case 'bottom-left':
  //       popupPosition.left = startPosition.left + diffX;
  //       popupPosition.bottom = startPosition.bottom - diffY;
  //       break;
  //   }
  //   setPosition(div, popupPosition);
  // };
  
  const stopResize = () => {
    div.style.transition = startTransition;
    iframeCover.style.display = 'none';
    // localStorage.setItem('microcastingAi.position', JSON.stringify(popupPosition));
    window.removeEventListener('mousemove', resize)
  }

  const startResize = (e, from) => {
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;

    div.style.transition = 'none';
    iframeCover.style.display = 'block';
    // console.log('Drag start', e);
    startMouseX = e.clientX;
    startMouseY = e.clientY;
    startPosition = { ...popupPosition };
    resizeFrom = from;
    
    window.addEventListener('mousemove', resize);
    window.addEventListener('mouseup', stopResize);

    return false;
  }

  const addResizeHandle = (from) => {
    const resizeHandle = document.createElement('div');
    resizeHandle.classList.add("microcastingAi-resize-handle", `microcastingAi-resize-handle-${from}`);
    resizeHandle.id = `microcastingAi-resize-handle-${from}`;
    resizeHandle.onmousedown = (e) =>{
      return startResize(e, from);
    };
    div.appendChild(resizeHandle);
  }

  addResizeHandle('top-right');
  addResizeHandle('top-left');
  addResizeHandle('bottom-right');
  addResizeHandle('bottom-left');

  // create an iframe
  const iframe = document.createElement('iframe');
  iframe.className = "microcastingAi-iframe";
  iframe.id = "microcastingAi-iframe";
  // Allow microphone access inside the embedded conversation
  iframe.setAttribute('allow', 'microphone');
  
  setStyle(iframe, {
    border: 'none',
    width: '100%',
    height: '100%',
  });
  iframe.src = pageSrc;
  // put the iframe in the div
  div.appendChild(iframe);

  const postMessage = (type, details) => {
    iframe.contentWindow.postMessage(
      {
        source: 'microcastingAIClient',
        type,
        details,
      },
      '*',
    );
  };

  const closeWindow = () => {
    windowState = 'CLOSED';
    div.style.visibility = 'hidden';
    div.style.opacity = 0;
    localStorage.removeItem("microcastingAi.windowOpen");
  }

  const expandWindow = () => {
    windowState = 'OPEN';
    div.classList.remove('minimized');
    div.style.visibility = 'visible';
    div.style.opacity = 1;
    postMessage('setOpen');
    updatePosition(false);
    localStorage.setItem('microcastingAi.windowOpen', Date.now());
    localStorage.removeItem('microcastingAi.windowMinimized');
  }
  const openWindow = expandWindow;
  
  const minimizeWindow = () => {
    windowState = 'MINIMIZED';
    div.classList.add('minimized');
    div.style.visibility = 'visible';
    div.style.opacity = 1;
    updatePosition(false);
    postMessage('setMinimized');
    localStorage.setItem('microcastingAi.windowMinimized', Date.now());
    localStorage.removeItem('microcastingAi.windowOpen');
  }

  const toggleWindow = () => {
    if (div.style.visibility === 'visible') {
      closeWindow();
    } else {
      expandWindow();
    }
  }

  if (buttonEnabled) {
    // add a button to the page that floats in the lower right corner
    // create a button
    const button = document.createElement('image' === 'svg' ? 'button' : 'input');
    if ('image' === 'svg') {
      button.innerHTML = '' || `
      <svg
        viewBox="0 0 24 24"
        data-testid="VoiceChatIcon">
        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H6l-2 2V4h16z"></path>
        <path d="M11.25 5h1.5v10h-1.5zM8.5 7H10v6H8.5zM6 9h1.5v2H6zm8-2h1.5v6H14zm2.5 2H18v2h-1.5z"></path>
      </svg>
      `;
    } else {
      // image button
      button.type = 'image';
      button.src = 'https://mcn-library-huwdev-enn.s3.amazonaws.com/4d770227-a5c0-48b8-b49d-37a50ecd69df/original' || 'https://via.placeholder.com/48';
    }
    button.className = "microcastingAiTriggerButton";
    button.id = "microcastingAiTriggerButton";
    if ('none' === 'beforeID') {
      // inject the button into a div before element with id
      // find element with id recentlyViewed-default
      const target = document.getElementById('recentlyViewed-default');
      // append putton after the target
      target.parentNode.insertBefore(button, target);
    } else {
      // default is floating
      // add the button to the page
      document.body.appendChild(button);
    }

    // add an event listener to the button to show/hide the div
    button.addEventListener('click', toggleWindow);
  }

  let windowSize = {
    width: document.body.clientWidth,
    height: window.innerHeight,
  };
  const storedPosition = undefined; // localStorage.getItem('microcastingAi.position');
  let desktopPosition = storedPosition ? JSON.parse(storedPosition) : calcPosition(windowSize, popupConfig);

  if (initialWindowState === 'MINIMIZED') {
    div.classList.add('minimized');
  }
  let windowState = initialWindowState;
  let hasSetInitialWindowState = false;
  
  const updatePosition = (noTransitions = true) => {
    // console.log('updatePosition', { windowState, noTransitions });
    const windowSize = {
      width: document.body.clientWidth,
      height: window.innerHeight,
    };
    const isMobile = windowSize.width < 480;
    if (windowState === 'CLOSED') {
      return;
    }
    if (windowState === 'MINIMIZED') {
      popupPosition = calcPosition(
        windowSize,
        minimizedConfig,
        { height: minimizedConfig.height, width: minimizedConfig.width },
      );
    } else if (isMobile) {
      popupPosition = calcPosition(windowSize, mobilePopupConfig);
    } else {
      popupPosition = desktopPosition;
    }
    // suppress transition if resizing
    div.style.transition = noTransitions ? 'none': startTransition;
    
    setPosition(div, popupPosition);
    // div.style.transition = startTransition;
  }
  
  const handleWindowResize = () => {
    const newSize = {
      width: document.body.clientWidth,
      height: window.innerHeight,
    };
    const delta = {
      x: newSize.width - windowSize.width,
      y: newSize.height - windowSize.height,
    };
    // console.log('handleWindowResize', { delta, popupConfig });
    if (popupConfig.position.startsWith('top-')) {
      //console.log('top-', delta.y);
      desktopPosition.bottom = desktopPosition.bottom + delta.y;
    } else if (popupConfig.position.startsWith('bottom-')) { 
      // console.log('bottom-', delta.y);
      desktopPosition.top = desktopPosition.top + delta.y;
    }
    if (popupConfig.position.endsWith('-left')) {
      desktopPosition.right = desktopPosition.right + delta.x;
    } else if (popupConfig.position.endsWith('-right')) { 
      desktopPosition.left = desktopPosition.left + delta.x;
    } else if (popupConfig.position.endsWith('-center')) { 
      desktopPosition.left = desktopPosition.left + delta.x / 2;
      desktopPosition.right = desktopPosition.right + delta.x / 2;
    }
    if (windowState === 'OPEN') {
      popupPosition = desktopPosition;
    } else if (windowState === 'MINIMIZED') {
      minimizedPosition = calcPosition(newSize, minimizedConfig, { height: minimizedConfig.height, width: minimizedConfig.width });
      popupPosition = minimizedPosition;
    } else if (windowState === 'CLOSED') {
      return;
    }
    windowSize = newSize;
    updatePosition(true);
  }

  window.addEventListener('resize', handleWindowResize);

  const setWindowState = () => {
    // Only apply the initial window state on first render. This ensures the widget does not minimize after a conversation reset.
    if (!hasSetInitialWindowState) {
      if (initialWindowState === 'MINIMIZED') {
      // console.log('Setting minimized');
        minimizeWindow();
      } else if (initialWindowState === 'OPEN') {
        expandWindow();
      }
      hasSetInitialWindowState = true;
    }
    // No action on subsequent calls; preserve current window state.
  };
  updatePosition(false);
  // setWindowState();
  
  const handlers = {
    tracking: (data) => {
      // console.log('tracking', data);

      // if its the start event, open the window
      if (data.trackData.event === 'conversationAI_ready') {
        // wait 2 seconds before opening the window
        setTimeout(() => {
          setWindowState();
          const pathnameSegments = window.location.pathname.toLowerCase().split('/').filter(Boolean);
          const isProductPage = pathnameSegments.some(segment => ['products', 'product'].includes(segment)) && pathnameSegments.length >= 2;

          const productID = isProductPage
            ? pathnameSegments[pathnameSegments.length - 1] || pathnameSegments[pathnameSegments.length - 2]
            : undefined;
          postMessage(
            'customerContext',
            {
              currentPage: {
                url: window.location.href,
                title: document.title,
                description: document.description,
                isProduct: isProductPage,
                product: productID ? { id: productID, name: '' } : undefined,
              },
            },
          );
        }, 100);
      }
      if (window.gtag || window.dataLayer) {
        const event = data.trackData.event;
        const gaData = { ...data.trackData };
        delete gaData.event;
        delete gaData.source;
        if (window.gtag) {
          window.gtag('event', event, gaData);
        }
        if (window.dataLayer) {
          window.dataLayer.push({
            event,
            ...gaData,
          });
        }
      }
      // set user id, conversation id, session id, last request time
      const userID = localStorage.getItem('microcommerce_user_id');
      const conversationID = localStorage.getItem('microcommerce_conversation_id');
      const sessionID = localStorage.getItem('microcommerce_session_id');
      const lastRequestTime = localStorage.getItem('microcommerce_last_request_time');
      const now = Date.now();
      const newCustomer = !userID;
      localStorage.setItem('microcommerce_last_request_time', now);
      // if no session id, or last request time is more than 30 minutes ago, create a new session id
      if (!sessionID || now - lastRequestTime > 30 * 60 * 1000) {
        localStorage.setItem('microcommerce_session_id', crypto.randomUUID());
        localStorage.setItem('microcommerce_session_start_time', now);
        // set autoOpen time if appropriate
        if (autoOpenConfig.enabled && (newCustomer || !autoOpenConfig.newCustomerOnly)) {
          console.log('setting autoOpen time', now + autoOpenConfig.openDelay * 1000);
          localStorage.setItem('microcommerce_auto_open_time', now + autoOpenConfig.openDelay * 1000);
        } else {
          // console.log('not setting autoOpen time');
        }
      }
      if (!userID) {
        localStorage.setItem('microcommerce_user_id', crypto.randomUUID());
      }
      if (!conversationID) {
        localStorage.setItem('microcommerce_conversation_id', crypto.randomUUID());
      }

      // check autoOpen
      const autoOpenTime = localStorage.getItem('microcommerce_auto_open_time');
      if (autoOpenTime) {
        setTimeout(() => {
          localStorage.removeItem('microcommerce_auto_open_time');
          handlers.tracking({ trackData: { event: 'conversationAI_auto_open' } });
          expandWindow();
        }, Math.max(autoOpenTime - now, 1000));
      }
    },
    closeWindow: () => {
      closeWindow();
      handlers.tracking({ trackData: { event: 'conversationAI_close_window' } });
    },
    expandWindow: () => {
      // console.log('expandWindow');
      handlers.tracking({ trackData: { event: 'conversationAI_open_window' } });
      expandWindow();
    },
    minimizeWindow: () => {
      // console.log('minimizeWindow');
      handlers.tracking({ trackData: { event: 'conversationAI_minimize_window' } });
      minimizeWindow();
    },
  };
  const eventListener = (event) => {
    if (event.data.source === 'microcastingAI') {
      if (handlers && handlers[event.data.type]) {
          handlers[event.data.type](event.data);
      }
      
      // Handle anywhere widget from iframe
      if (event.data.type === 'anywhereWidgetReady') {
        renderAnywhereWidget(event.data.details);
      }
      // Handle suggested prompts from iframe
      if (event.data.type === 'suggestedPromptsReady') {
        renderSuggestedPrompts(event.data.details);
      }
    }
  };
  window.addEventListener('message', eventListener);

  // Function to render suggested prompts in the main HTML
  const renderSuggestedPrompts = (details) => {
    const container = document.getElementById('microcasting-suggested-prompts-root');
    if (!container) {
      // console.log('Suggested prompts container not found');
      return;
    }

    // console.log('Rendering suggested prompts:', prompts);    
    // Get configurable text and styling from the event details
    const { prompts, header: headerText, styles: styleConfig, customCss } = details;
    
    // Apply custom CSS if provided
    if (customCss) {
      const styleId = 'microcasting-suggested-prompts-custom-css';
      let customStyleElement = document.getElementById(styleId);
      if (!customStyleElement) {
        customStyleElement = document.createElement('style');
        customStyleElement.id = styleId;
        document.head.appendChild(customStyleElement);
      }
      customStyleElement.textContent = customCss;
    }
    
    // Generate dynamic styles based on configuration
    const generateStyles = () => {
      const styles = [];
      
      // Header styles
      if (styleConfig.header) {
        if (styleConfig.header.fontSize) {
          styles.push(`.microcasting-suggested-prompts-header { font-size: ${styleConfig.header.fontSize}px; }`);
        }
        if (styleConfig.header.color) {
          styles.push(`.microcasting-suggested-prompts-header { color: ${styleConfig.header.color}; }`);
        }
      }
      
      // Button styles
      if (styleConfig.button) {
        if (styleConfig.button.fontSize) {
          styles.push(`.microcasting-suggested-prompt-btn { font-size: ${styleConfig.button.fontSize}px; }`);
        }
        if (styleConfig.button.color) {
          styles.push(`.microcasting-suggested-prompt-btn { color: ${styleConfig.button.color}; }`);
        }
        if (styleConfig.button.backgroundColor) {
          styles.push(`.microcasting-suggested-prompt-btn { background: ${styleConfig.button.backgroundColor}; }`);
        }
        if (styleConfig.button.borderRadius) {
          styles.push(`.microcasting-suggested-prompt-btn { border-radius: ${styleConfig.button.borderRadius}px; }`);
        }
        if (styleConfig.button.padding) {
          styles.push(`.microcasting-suggested-prompt-btn { padding: ${styleConfig.button.padding}px 14px; }`);
        }
        
        // Border styles
        if (styleConfig.button.borderWidth) {
          styles.push(`.microcasting-suggested-prompt-btn { border-width: ${styleConfig.button.borderWidth}px; }`);
        }
        if (styleConfig.button.borderColor) {
          styles.push(`.microcasting-suggested-prompt-btn { border-color: ${styleConfig.button.borderColor}; }`);
        }
        
        // Hover styles
        if (styleConfig.button.hover) {
          if (styleConfig.button.hover.color) {
            styles.push(`.microcasting-suggested-prompt-btn:hover { color: ${styleConfig.button.hover.color}; }`);
          }
          if (styleConfig.button.hover.backgroundColor) {
            styles.push(`.microcasting-suggested-prompt-btn:hover { background: ${styleConfig.button.hover.backgroundColor}; }`);
          }
          if (styleConfig.button.hover.borderColor) {
            styles.push(`.microcasting-suggested-prompt-btn:hover { border-color: ${styleConfig.button.hover.borderColor}; }`);
          }
        }
      }
      
      // Container styles
      if (styleConfig.container) {
        if (styleConfig.container.margin) {
          styles.push(`.microcasting-suggested-prompts-container { margin: ${styleConfig.container.margin}px 0; }`);
        }
        if (styleConfig.container.alignment) {
          const textAlign = styleConfig.container.alignment;
          styles.push(`.microcasting-suggested-prompts-container { text-align: ${textAlign}; }`);
          if (textAlign === 'center') {
            styles.push(`.microcasting-suggested-prompts-buttons { align-items: center; }`);
          } else if (textAlign === 'right') {
            styles.push(`.microcasting-suggested-prompts-buttons { align-items: flex-end; }`);
          }
        }
      }
      
      // Button gap
      if (styleConfig.button && styleConfig.button.gap) {
        styles.push(`.microcasting-suggested-prompts-buttons { gap: ${styleConfig.button.gap}px; }`);
      }
      
      return styles.join('\n');
    };
    
    // Apply dynamic styles
    const dynamicStyles = generateStyles();
    if (dynamicStyles) {
      const styleId = 'microcasting-suggested-prompts-dynamic-css';
      let dynamicStyleElement = document.getElementById(styleId);
      if (!dynamicStyleElement) {
        dynamicStyleElement = document.createElement('style');
        dynamicStyleElement.id = styleId;
        document.head.appendChild(dynamicStyleElement);
      }
      dynamicStyleElement.textContent = dynamicStyles;
    }
    
    // Create the prompts HTML using CSS classes
    const promptsHTML = `
      <div class="microcasting-suggested-prompts-container">
        <h3 class="microcasting-suggested-prompts-header">${headerText}</h3>
        <div class="microcasting-suggested-prompts-buttons">
          ${prompts.map(prompt => `
            <button 
              class="microcasting-suggested-prompt-btn"
              data-prompt="${prompt}"
            >
              ${prompt}
            </button>
          `).join('')}
        </div>
      </div>
    `;
    
    container.innerHTML = promptsHTML;
    
    // Add click handlers
    container.querySelectorAll('.microcasting-suggested-prompt-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const prompt = e.target.getAttribute('data-prompt');
        handlePromptClick(prompt);
      });
    });
  };

  // Function to render anywhere widget in the main HTML
  const renderAnywhereWidget = (details) => {
    const container = document.getElementById('microcasting-anywhere-widget-root');
    if (!container) {
      console.log('Anywhere widget container not found');
      return;
    }
    console.log('Rendering anywhere widget:', details);
    const { header, hint, styles: styleConfig, customCss, sendButtonText } = details;

    // Apply custom CSS if provided
    if (customCss) {
      const styleId = 'microcasting-anywhere-widget-custom-css';
      let customStyleElement = document.getElementById(styleId);
      if (!customStyleElement) {
        customStyleElement = document.createElement('style');
        customStyleElement.id = styleId;
        document.head.appendChild(customStyleElement);
      }
      customStyleElement.textContent = customCss;
    }

    // Generate dynamic styles based on configuration
    const generateAnywhereWidgetStyles = () => {
      const styles = [];
      // Header styles
      if (styleConfig.header) {
        if (styleConfig.header.fontSize) {
          styles.push(`.microcasting-anywhere-widget-header { font-size: ${styleConfig.header.fontSize}px; }`);
        }
        if (styleConfig.header.fontWeight) {
          styles.push(`.microcasting-anywhere-widget-header { font-weight: ${styleConfig.header.fontWeight}; }`);
        }
        if (styleConfig.header.color) {
          styles.push(`.microcasting-anywhere-widget-header { color: ${styleConfig.header.color}; }`);
        }
        if (styleConfig.header.alignment) {
          styles.push(`.microcasting-anywhere-widget-header { text-align: ${styleConfig.header.alignment}; }`);
        }
        if (styleConfig.header.margin) {
          styles.push(`.microcasting-anywhere-widget-header { margin: ${styleConfig.header.margin}; }`);
        }
      }
      // Input styles
      if (styleConfig.input) {
        if (styleConfig.input.fontSize) {
          styles.push(`.microcasting-anywhere-widget-input { font-size: ${styleConfig.input.fontSize}px; }`);
        }
        if (styleConfig.input.color) {
          styles.push(`.microcasting-anywhere-widget-input { color: ${styleConfig.input.color}; }`);
        }
        if (styleConfig.input.backgroundColor) {
          styles.push(`.microcasting-anywhere-widget-input { background: ${styleConfig.input.backgroundColor}; }`);
        }
        if (styleConfig.input.borderColor) {
          styles.push(`.microcasting-anywhere-widget-input { border-color: ${styleConfig.input.borderColor}; }`);
        }
        if (styleConfig.input.borderWidth) {
          styles.push(`.microcasting-anywhere-widget-input { border-width: ${styleConfig.input.borderWidth}px; }`);
        }
        if (styleConfig.input.borderRadius) {
          styles.push(`.microcasting-anywhere-widget-input { border-radius: ${styleConfig.input.borderRadius}px; }`);
        }
        if (styleConfig.input.padding) {
          styles.push(`.microcasting-anywhere-widget-input { padding: ${styleConfig.input.padding}; }`);
        }
        if (styleConfig.input.margin) {
          styles.push(`.microcasting-anywhere-widget-input { margin: ${styleConfig.input.margin}; }`);
        }
        if (styleConfig.input.focus) {
          if (styleConfig.input.focus.borderColor) {
            styles.push(`.microcasting-anywhere-widget-input:focus { border-color: ${styleConfig.input.focus.borderColor}; }`);
          }
          if (styleConfig.input.focus.backgroundColor) {
            styles.push(`.microcasting-anywhere-widget-input:focus { background: ${styleConfig.input.focus.backgroundColor}; }`);
          }
        }
      }
      // Button styles
      if (styleConfig.button) {
        if (styleConfig.button.fontSize) {
          styles.push(`.microcasting-anywhere-widget-send-btn { font-size: ${styleConfig.button.fontSize}px; }`);
        }
        if (styleConfig.button.color) {
          styles.push(`.microcasting-anywhere-widget-send-btn { color: ${styleConfig.button.color}; }`);
        }
        if (styleConfig.button.backgroundColor) {
          styles.push(`.microcasting-anywhere-widget-send-btn { background: ${styleConfig.button.backgroundColor}; }`);
        }
        if (styleConfig.button.borderColor) {
          styles.push(`.microcasting-anywhere-widget-send-btn { border-color: ${styleConfig.button.borderColor}; }`);
        }
        if (styleConfig.button.borderWidth) {
          styles.push(`.microcasting-anywhere-widget-send-btn { border-width: ${styleConfig.button.borderWidth}px; }`);
        }
        if (styleConfig.button.borderRadius) {
          styles.push(`.microcasting-anywhere-widget-send-btn { border-radius: ${styleConfig.button.borderRadius}px; }`);
        }
        if (styleConfig.button.padding) {
          styles.push(`.microcasting-anywhere-widget-send-btn { padding: ${styleConfig.button.padding}; }`);
        }
        if (styleConfig.button.margin) {
          styles.push(`.microcasting-anywhere-widget-send-btn { margin: ${styleConfig.button.margin}; }`);
        }
        if (styleConfig.button.hover) {
          if (styleConfig.button.hover.backgroundColor) {
            styles.push(`.microcasting-anywhere-widget-send-btn:hover { background: ${styleConfig.button.hover.backgroundColor}; }`);
          }
          if (styleConfig.button.hover.color) {
            styles.push(`.microcasting-anywhere-widget-send-btn:hover { color: ${styleConfig.button.hover.color}; }`);
          }
          if (styleConfig.button.hover.borderColor) {
            styles.push(`.microcasting-anywhere-widget-send-btn:hover { border-color: ${styleConfig.button.hover.borderColor}; }`);
          }
        }
      }
      // SVG icon styles (MUI-like)
      styles.push(`.microcasting-anywhere-widget-send-btn svg {\n  user-select: none;\n  width: 1.5em;\n  height: 1.5em;\n  display: inline-block;\n  fill: currentColor;\n  flex-shrink: 0;\n  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  font-size: 1.5rem;\n}`);
      // Palo Alto ready: Professional, centered, modern look
      styles.push(`.microcasting-anywhere-widget-container {\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 4px 24px rgba(0,0,0,0.07);\n  padding: 32px 32px 24px 32px;\n  max-width: 420px;\n  margin: 40px auto;\n  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;\n}`);
      styles.push(`.microcasting-anywhere-widget-header {\n  font-size: 2rem;\n  font-weight: 500;\n  margin-bottom: 24px;\n  text-align: center;\n  color: #222;\n}`);
      styles.push(`.microcasting-anywhere-widget-input-row {\n  display: flex;\n  align-items: stretch;\n  gap: 0;\n}`);
      styles.push(`.microcasting-anywhere-widget-input {\n  flex: 1;\n  font-size: 1.3rem;\n  padding: 12px 18px;\n  border: 2px solid #bbb;\n  border-right: none;\n  border-radius: 8px 0 0 8px;\n  outline: none;\n  background: #f7f7f7;\n  transition: border-color 0.2s;\n}`);
      styles.push(`.microcasting-anywhere-widget-input:focus {\n  border-color: #1976d2;\n  background: #fff;\n}`);
      styles.push(`.microcasting-anywhere-widget-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #1976d2;\n  color: #fff;\n  border: 2px solid #1976d2;\n  border-radius: 0 8px 8px 0;\n  padding: 0 18px;\n  font-size: 1.5rem;\n  cursor: pointer;\n  transition: background 0.2s, border-color 0.2s;\n  border-left: none;\n}`);
      styles.push(`.microcasting-anywhere-widget-send-btn:disabled {\n  background: #b0b0b0;\n  border-color: #b0b0b0;\n  cursor: not-allowed;\n}`);
      // Container styles
      if (styleConfig.container) {
        if (styleConfig.container.backgroundColor) {
          styles.push(`.microcasting-anywhere-widget-container { background: ${styleConfig.container.backgroundColor}; }`);
        }
        if (styleConfig.container.borderColor) {
          styles.push(`.microcasting-anywhere-widget-container { border-color: ${styleConfig.container.borderColor}; }`);
        }
        if (styleConfig.container.borderWidth) {
          styles.push(`.microcasting-anywhere-widget-container { border-width: ${styleConfig.container.borderWidth}px; }`);
        }
        if (styleConfig.container.borderRadius) {
          styles.push(`.microcasting-anywhere-widget-container { border-radius: ${styleConfig.container.borderRadius}px; }`);
        }
        if (styleConfig.container.padding) {
          styles.push(`.microcasting-anywhere-widget-container { padding: ${styleConfig.container.padding}; }`);
        }
        if (styleConfig.container.margin) {
          styles.push(`.microcasting-anywhere-widget-container { margin: ${styleConfig.container.margin}; }`);
        }
        if (styleConfig.container.boxShadow) {
          styles.push(`.microcasting-anywhere-widget-container { box-shadow: ${styleConfig.container.boxShadow}; }`);
        }
        if (styleConfig.container.width) {
          styles.push(`.microcasting-anywhere-widget-container { width: ${styleConfig.container.width}; }`);
        }
        if (styleConfig.container.maxWidth) {
          styles.push(`.microcasting-anywhere-widget-container { max-width: ${styleConfig.container.maxWidth}; }`);
        }
      }
      return styles.join('\n');
    };
    const dynamicStyles = generateAnywhereWidgetStyles();
    if (dynamicStyles) {
      const styleId = 'microcasting-anywhere-widget-dynamic-css';
      let dynamicStyleElement = document.getElementById(styleId);
      if (!dynamicStyleElement) {
        dynamicStyleElement = document.createElement('style');
        dynamicStyleElement.id = styleId;
        document.head.appendChild(dynamicStyleElement);
      }
      dynamicStyleElement.textContent = dynamicStyles;
    }
    
    // Create the widget HTML using CSS classes
    // Palo Alto ready: input with id/name, button with vanilla SVG, SVG configurable via details.sendButtonSvg
    const sendButtonSvg = details.sendButtonSvg || `
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"></path>
      </svg>
    `;
    const widgetHTML = `
      <div class="microcasting-anywhere-widget-container">
        <h3 class="microcasting-anywhere-widget-header">${header}</h3>
        <div class="microcasting-anywhere-widget-input-row">
          <input
            class="microcasting-anywhere-widget-input"
            type="text"
            id="microcasting-anywhere-widget-input"
            name="microcasting-anywhere-widget-input"
            placeholder="${hint}" />
          <button class="microcasting-anywhere-widget-send-btn" aria-label="Send" type="submit" disabled>
            ${sendButtonSvg}
          </button>
        </div>
      </div>
    `;
    container.innerHTML = widgetHTML;

    // Add send logic
    const input = container.querySelector('.microcasting-anywhere-widget-input');
    const sendBtn = container.querySelector('.microcasting-anywhere-widget-send-btn');
    if (input && sendBtn) {
      const updateSendBtnState = () => {
        sendBtn.disabled = input.value.trim() === '';
      };
      input.addEventListener('input', updateSendBtnState);
      input.addEventListener('change', updateSendBtnState);
      updateSendBtnState();

      const sendQuestion = () => {
        const value = input.value.trim();
        if (!value) return;
        if (window.microcastingAi?.openWindow) {
          window.microcastingAi.openWindow();
        }
        window.microcastingAi?.postMessage('sendPrompt', { prompt: value });
        input.value = '';
        updateSendBtnState();
      };
      sendBtn.addEventListener('click', sendQuestion);
      input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          sendQuestion();
        }
      });
    }
  };

  // Function to handle prompt clicks
  const handlePromptClick = (prompt) => {
    // console.log('Prompt clicked:', prompt);
    
    // Open the chat window and send the prompt
    if (window.microcastingAi?.openWindow) {
      window.microcastingAi.openWindow();
    }
    window.microcastingAi?.postMessage('sendPrompt', {
      prompt: prompt,
    });
  };

  try {
    
  } catch (e) {
    console.error('Error in custom init logic', e);
  }
  try {
    const result =  {
      toggleWindow,
      openWindow,
      closeWindow,
      expandWindow,
      minimizeWindow,
      postMessage,
      handlers,
    };
    window.microcastingAi = result;
    return result;
  } catch (e) {
    console.error('Error setting up microcastingAi', e);
    return undefined;
  }
};
window.microcastingAi = loadConversation(window);
console.log('microcastingAi', window.microcastingAi);