<!-- Chatbot Widget Start -->
<style>
#chatbot-widget-btn {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: #FFD600;
  color: #333;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-size: 28px;
  cursor: pointer;
}
#chatbot-widget-btn .chatbot-bubble-close {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #FFD600;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
#chatbot-widget-window {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 340px;
  max-width: 95vw;
  height: 420px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  z-index: 10000;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
#chatbot-header {
  background: #FFD600;
  color: #333;
  padding: 12px;
  font-weight: bold;
  text-align: center;
}
#chatbot-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  font-size: 15px;
  background: #f9f9f9;
}
#chatbot-input-area {
  display: flex;
  border-top: 1px solid #eee;
  background: #fff;
}
#chatbot-input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 15px;
  outline: none;
}
#chatbot-send-btn {
  background: #FFD600;
  color: #333;
  border: none;
  padding: 0 18px;
  font-size: 15px;
  cursor: pointer;
}
#chatbot-close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #333;
  font-size: 20px;
  cursor: pointer;
}
.chatbot-bot-msg {
  display: inline-block;
  background: #FFF9C4;
  color: #333;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  max-width: 85%;
  text-align: left;
}
</style>
<div id="chatbot-widget-btn" title="Chat with us">💬<span class="chatbot-bubble-close" title="Hide">&times;</span></div>
<div id="chatbot-widget-window">
  <div id="chatbot-header">
    Soulmates Chatbot
    <button id="chatbot-close-btn" title="Close">&times;</button>
  </div>
  <div id="chatbot-messages"></div>
  <form id="chatbot-input-area" autocomplete="off">
    <input id="chatbot-input" type="text" placeholder="Type your message..." required />
    <button id="chatbot-send-btn" type="submit">Send</button>
  </form>
</div>
<script>
(function() {
  var btn = document.getElementById('chatbot-widget-btn');
  var win = document.getElementById('chatbot-widget-window');
  var closeBtn = document.getElementById('chatbot-close-btn');
  var bubbleCloseBtn = btn.querySelector('.chatbot-bubble-close');
  var form = document.getElementById('chatbot-input-area');
  var input = document.getElementById('chatbot-input');
  var messages = document.getElementById('chatbot-messages');

  btn.onclick = function(e) {
    // Prevent click on close X from opening the chat
    if (e.target.classList.contains('chatbot-bubble-close')) return;
    win.style.display = 'flex';
    input.focus();
  };
  closeBtn.onclick = function() {
    win.style.display = 'none';
  };
  bubbleCloseBtn.onclick = function(e) {
    e.stopPropagation();
    btn.style.display = 'none';
    win.style.display = 'none';
  };
  form.onsubmit = function(e) {
    e.preventDefault();
    var userMsg = input.value.trim();
    if (!userMsg) return;
    appendMsg('You', userMsg, 'right');
    input.value = '';
    messages.scrollTop = messages.scrollHeight;
    appendMsg('Bot', '<em>Thinking...</em>', 'left', true);
    fetch('/soulmates/soulmates/_server/chatbot_gemini.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'message=' + encodeURIComponent(userMsg)
    })
    .then(r => r.json())
    .then(function(data) {
      removeThinking();
      appendMsg('Bot', data.reply || 'Sorry, I could not understand.', 'left');
      messages.scrollTop = messages.scrollHeight;
    })
    .catch(function() {
      removeThinking();
      appendMsg('Bot', 'Sorry, there was an error.', 'left');
    });
  };
  function appendMsg(sender, text, align, thinking) {
    var div = document.createElement('div');
    div.style.margin = '8px 0';
    div.style.textAlign = align;
    if(sender === 'Bot') {
      div.innerHTML = '<b>' + sender + ':</b> <span class="chatbot-bot-msg">' + text + '</span>';
    } else {
      div.innerHTML = '<b>' + sender + ':</b> ' + text;
    }
    if (thinking) div.id = 'chatbot-thinking';
    messages.appendChild(div);
  }
  function removeThinking() {
    var t = document.getElementById('chatbot-thinking');
    if (t) t.remove();
  }
  // Show welcome message on load
  appendMsg('Bot', 'Hi! I am your Soulmates AI assistant. How can I help you today?', 'left');
})();
</script>
<!-- Chatbot Widget End -->