{source}
<div id="kjrsos-chat-launcher" class="kjrsos-chat-button" aria-label="Open Kjrsos Mentor Chat"
  title="Chat with your Kjrsos Mentor">
  <span class="kjrsos-chat-label">MENTOR</span>
</div>
<div id="kjrsos-chat-window-container" class="kjrsos-chat-window hidden">
  <iframe id="kjrsos-chatbot-iframe" src="/ai-mentor-dev/ai_mentor_chat_dev.html" frameborder="0"></iframe>
</div>
<style>
/* --- MENTOR Button --- */
.kjrsos-chat-button {
  width: 70px;
  height: 70px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 12px;
  cursor: pointer;
  background-color: #3d3d3d;
  border: 1px solid #757575;
  box-shadow: inset 1px 1px 2px 0px rgba(255, 255, 255, 0.2), inset -1px -1px 2px 0px rgba(0, 0, 0, 0.4);
  
  /* v1.1: Button ABOVE chat window */
  z-index: 10000002;
  
  transition: transform 0.2s ease-in-out;
  background-image: url('https://kjrsos.com/media/plg_jspeed/cache/images/097605f2c7c0c7da9f5a94861dd9f1bb79423fe4.webp');
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center 30%;
}

.kjrsos-chat-button:hover {
  transform: scale(1.05);
}

/* "MENTOR" text overlay */
.kjrsos-chat-label {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #C0C0C0; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* --- Chat Window --- */
.kjrsos-chat-window {
  position: fixed; 
  bottom: 50px; 
  right: 20px; 
  width: 90%; 
  max-width: 400px;
  height: 100vh; 
  max-height: 800px; 
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  border-radius: 15px; 
  overflow: hidden; 
  
  /* v1.1: Chat window BELOW button */
  z-index: 10000001;
  
  /* v1.1: Smooth open/close animation */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 1;
  transform: translateY(0);
}

.kjrsos-chat-window.hidden { 
  display: block !important;  /* Override to allow animation */
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.kjrsos-chat-window iframe { 
  width: 100%; 
  height: 100%; 
  border: none; 
}
</style>
<script>
/**
 * KJRSOS Chat Launcher
 * Version: 1.1.0
 * Date: December 31, 2025
 * 
 * v1.1.0 Changes:
 * - Added message listener for chatbot iframe communication
 * - Chatbot can now request close (for Cinematic Mode)
 * - Fixed z-index so MENTOR button stays on top
 * - Smooth open/close animation
 */
document.addEventListener('DOMContentLoaded', function() {
  const chatLauncher = document.getElementById('kjrsos-chat-launcher');
  const chatWindowContainer = document.getElementById('kjrsos-chat-window-container');
  const chatIframe = document.getElementById('kjrsos-chatbot-iframe');
  
  if (!chatLauncher || !chatWindowContainer) {
    console.warn('[Chat Launcher] Required elements not found');
    return;
  }
  
  // Click handler for MENTOR button
  chatLauncher.addEventListener('click', function() {
    toggleChat();
  });
  
  // v1.1: Listen for messages from chatbot iframe
  window.addEventListener('message', function(event) {
    // Security: only accept messages from same origin
    if (event.origin !== window.location.origin) return;
    if (!event.data || typeof event.data !== 'object') return;
    
    switch (event.data.type) {
      case 'kjrsos-close-chatbot':
        console.log('[Chat Launcher] Close requested (cinematic mode)');
        closeChat();
        break;
        
      case 'kjrsos-open-chatbot':
        console.log('[Chat Launcher] Open requested');
        openChat();
        break;
        
      case 'kjrsos-toggle-chatbot':
        toggleChat();
        break;
    }
  });
  
  function openChat() {
    chatWindowContainer.classList.remove('hidden');
    chatLauncher.setAttribute('aria-expanded', 'true');
    if (chatIframe) {
      chatIframe.focus();
    }
  }
  
  function closeChat() {
    chatWindowContainer.classList.add('hidden');
    chatLauncher.setAttribute('aria-expanded', 'false');
  }
  
  function toggleChat() {
    if (chatWindowContainer.classList.contains('hidden')) {
      openChat();
    } else {
      closeChat();
    }
  }
  
  // Expose API for other scripts
  window.KJRSOSChatLauncher = {
    open: openChat,
    close: closeChat,
    toggle: toggleChat,
    isOpen: function() {
      return !chatWindowContainer.classList.contains('hidden');
    }
  };
  
  console.log('[Chat Launcher] Ready v1.1.0 - API: window.KJRSOSChatLauncher');
});
</script>
{/source}