<style>
  #chatbot-container {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10000;
    pointer-events: none;
    overflow: visible; /* NEW - Allow tooltip to show outside */
  }

  #chatbot-frame {
    border: none;
    background: transparent;
    pointer-events: auto;
    overflow: visible; /* NEW - Allow tooltip to show outside iframe */
    
    /* Larger size to accommodate tooltip */
    width: 400px;
    height: 250px;
    
    transition: all 0.3s ease;
  }

  /* When chat is open */
  #chatbot-frame.chat-open {
    width: 390px;
    height: 530px;
  }

  /* Mobile responsive */
  @media (max-width: 600px) {
    #chatbot-frame {
      width: 320px;
      height: 200px;
    }
    
    #chatbot-frame.chat-open {
      width: 100vw;
      height: 95vh;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
    #chatbot-container.chat-open {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
</style>

<div id="chatbot-container">
  <iframe 
    id="chatbot-frame" 
    src="https://kas2kas.online/chatbot/index.html"
    allow="clipboard-write"
    title="KAS AI Chatbot">
  </iframe>
</div>

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== "https://kas2kas.online") return;
    
    const frame = document.getElementById('chatbot-frame');
    const container = document.getElementById('chatbot-container');
    
    if (event.data && event.data.type === 'chatOpened') {
      frame.classList.add('chat-open');
      container.classList.add('chat-open');
    } else if (event.data && event.data.type === 'chatClosed') {
      frame.classList.remove('chat-open');
      container.classList.remove('chat-open');
    }
  });
</script>