{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}
is...
Learning Awareness
Finding Connection
Healing & Empowering Us
Our Horses & Our World
