<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Chat Embed</title>


<style>
  .chat-wrapper{
    max-width: 100%;
    margin: 2rem auto;
    padding: 1rem;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .chat-wrapper h2{ font-size:1.6rem; font-weight:600; margin-bottom:.5rem; }
  .chat-wrapper p { font-size:1rem; color:#555; margin-bottom:1.5rem; }

  /* Viewport/cropping box */
  .chat-shell{
    position: relative;
    width: 100%;
    overflow: hidden;           /* default; JS may switch to auto */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
    height: 100% !important;
    min-height: 600px;
  }

  /* Iframe fills the shell 1:1 (no scaling) */
  #zipchatFrame{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: top center;
    transform: none !important; /* prevent any injected transforms */
  }

  @media (max-width: 768px){
    .chat-wrapper{ padding:.5rem; }
    .chat-shell { min-height: 70vh; }
    .chat-wrapper h2 { display: none }
    .chat-wrapper p  { display: none }
  }
</style>


<style>
  .restricted-blur-layer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: auto;                 /* block interaction with the page */
    background: rgba(12, 76, 131, 0.35);  /* tinted veil */
    backdrop-filter: blur(6px);
  }
  .restricted-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 76, 131, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;                        /* above blur layer */
  }
  .restricted-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 420px;
    width: 90%;
    padding: 2rem 1.5rem;
    text-align: center;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    animation: restrictedPopIn 0.25s ease;
  }
  .restricted-modal h2 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #0c4c83;
  }
  .restricted-modal p {
    margin: 1rem 0 1.5rem;
    color: #444;
    font-size: 1rem;
    line-height: 1.4;
  }
  .restricted-btn {
    display: inline-block;
    background: #f9ae42;
    color: #fff;
    font-weight: 600;
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .restricted-btn:hover {
    background: #e89a24;
    transform: translateY(-2px);
  }
  @keyframes restrictedPopIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  /* Prevent body scroll while restricted */
  html.restricted-lock,
  body.restricted-lock {
    overflow: hidden !important;
  }
</style>
</head>
<body>

<div class="chat-wrapper">
  <h2>Consult with your career coach</h2>
  <p>Our AI model has been expertly trained with comprehensive knowledge of aviation and the unique pathways of a pilot’s career.</p>

  <div class="chat-shell" id="chatShell">
    <iframe
      id="zipchatFrame"
      src="https://app.zipchat.ai/iframe/?widget_token=MSLiDJTaq1YY71N7qHnx"
      allow="clipboard-write">
    </iframe>
  </div>
</div>


<script>
(function () {
  const shell = document.getElementById('chatShell');

  function fitIframeContainer() {
    if (!shell) return;

    // Keep at least the min-height, but prefer filling available viewport
    const shellTopInViewport = shell.getBoundingClientRect().top;
    const availableViewportH = Math.max(320, window.innerHeight - shellTopInViewport - 16);

    // If the viewport has room, use it; otherwise stick to min-height
    const targetH = Math.max(shell.style.minHeight ? parseInt(shell.style.minHeight,10) || 0 : 600, availableViewportH);

    shell.style.height = targetH + 'px';

    // If content grows taller than the shell (depends on iframe content),
    // allow inner scrolling; otherwise hide it
    // (We can't read the iframe's content height due to cross-origin, so we default to auto.)
    shell.style.overflowY = 'auto';
  }

  window.addEventListener('resize', fitIframeContainer, { passive: true });
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", fitIframeContainer, { once: true });
  } else {
    fitIframeContainer();
  }
})();
</script>


<script>
(function(){
  "use strict";

  // Selector that exists ONLY when user is logged in on the host site
  var AVATAR_SELECTOR = ".userAvatarImage_userAvatar__O4D2T";
  var REGISTER_URL = "https://www.aviationcv.com/user/login";

  var BLUR_LAYER_CLASS = "restricted-blur-layer";
  var OVERLAY_CLASS = "restricted-overlay";
  var LOCK_CLASS = "restricted-lock";
  var overlayEl = null;
  var blurLayerEl = null;

  function isLoggedIn() {
    return !!document.querySelector(AVATAR_SELECTOR);
  }

  function ensureBlurLayer() {
    if (!blurLayerEl) {
      blurLayerEl = document.createElement("div");
      blurLayerEl.className = BLUR_LAYER_CLASS;
      document.body.appendChild(blurLayerEl);
    }
  }

  function ensureOverlay() {
    if (!overlayEl) {
      overlayEl = document.createElement("div");
      overlayEl.className = OVERLAY_CLASS;
      overlayEl.innerHTML =
        '<div class="restricted-modal">' +
          '<h2>Restricted Content</h2>' +
          '<p>Content you are trying to view is only for registered users.<br> Please register or log in to continue.</p>' +
          '<a href="' + REGISTER_URL + '" class="restricted-btn">Register Now</a>' +
        '</div>';
      document.body.appendChild(overlayEl);
    }
  }

  function restrictContent() {
    ensureBlurLayer();
    ensureOverlay();
    document.documentElement.classList.add(LOCK_CLASS);
    document.body.classList.add(LOCK_CLASS);
  }

  function allowContent() {
    if (overlayEl && overlayEl.parentNode) overlayEl.parentNode.removeChild(overlayEl);
    if (blurLayerEl && blurLayerEl.parentNode) blurLayerEl.parentNode.removeChild(blurLayerEl);
    overlayEl = null;
    blurLayerEl = null;
    document.documentElement.classList.remove(LOCK_CLASS);
    document.body.classList.remove(LOCK_CLASS);
  }

  function applyRestriction() {
    if (isLoggedIn()) allowContent();
    else restrictContent();
  }

  // Debounce via rAF to avoid thrashing during big DOM updates
  var rafId = null;
  function scheduleApply() {
    if (rafId) return;
    rafId = requestAnimationFrame(function(){
      rafId = null;
      applyRestriction();
    });
  }

  function init() {
    applyRestriction();

    // Observe for SPA/dynamic changes (avatar may appear later)
    var observer = new MutationObserver(scheduleApply);
    observer.observe(document.documentElement, { childList: true, subtree: true });

    // Also check when tab becomes visible again (user might log in elsewhere)
    document.addEventListener("visibilitychange", scheduleApply, { passive: true });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init, { once: true });
  } else {
    init();
  }
})();
</script>

</body>
</html>