<div class="demo">
  <div class="phone-frame">
    <div class="chat-screen" id="chatScreen">
      <div class="chat-header">Support chat</div>
      <div class="chat-messages" id="chatMessages">
        <div class="msg them">Hi! How can we help today?</div>
        <div class="msg me">My export keeps failing at 90%.</div>
        <div class="msg them">Got it — checking that now. On a phone, try focusing the input below: it stays pinned above the (simulated) keyboard instead of sliding underneath it.</div>
      </div>
      <form class="chat-input-bar" id="chatInputBar">
        <input type="text" id="chatInput" placeholder="Type a message…" autocomplete="off" />
        <button type="submit" class="chat-send" aria-label="Send message">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </form>
    </div>
  </div>
  <p class="vv-hint">On a real mobile browser, VisualViewport tracks the software keyboard's height directly, so the input bar sits exactly above it — never hidden underneath.</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.phone-frame { width: 300px; height: 500px; border-radius: 32px; border: 8px solid #0f172a; background: #0f172a; overflow: hidden; box-shadow: 0 30px 60px rgba(15,23,42,0.25); }
.chat-screen { height: 100%; display: flex; flex-direction: column; background: #fff; position: relative; }

.chat-header { padding: 14px 16px; font-size: 13px; font-weight: 800; color: #111827; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }

.chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; }
.msg.them { align-self: flex-start; background: #f1f5f9; color: #334155; border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; }

.chat-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid #f1f5f9;
  background: #fff;
  flex-shrink: 0;
  /* transform, not top/bottom, is what actually moves the bar when the
     keyboard resizes the visual viewport — see the JS for why. */
  transition: transform 0.15s ease;
}
.chat-input-bar input { flex: 1; padding: 10px 13px; border: 1.5px solid #e2e8f0; border-radius: 999px; font-size: 13px; font-family: inherit; }
.chat-input-bar input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.chat-send { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: #4f46e5; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-send:hover { background: #4338ca; }

.vv-hint { font-size: 11px; color: #94a3b8; text-align: center; max-width: 280px; line-height: 1.6; }

const inputBar = document.getElementById('chatInputBar');
const chatInput = document.getElementById('chatInput');
const chatMessages = document.getElementById('chatMessages');
const chatForm = document.getElementById('chatInputBar');

// The core problem this solves: on mobile, opening the software keyboard
// shrinks the VISUAL viewport (what's actually visible on screen) while the
// LAYOUT viewport (what CSS position:fixed measures against) often stays the
// same size — so a naively fixed-position input bar can end up rendered
// UNDERNEATH the keyboard, invisible, even though CSS thinks it's still
// pinned to the bottom of the screen.
//
// window.visualViewport reports the REAL visible area, and fires 'resize'
// whenever the keyboard opens, closes, or changes height — giving exactly
// the signal needed to reposition the bar correctly.
function repositionInputBar() {
  if (!window.visualViewport) return; // graceful no-op on unsupported browsers

  const viewport = window.visualViewport;
  // The gap between the layout viewport's bottom and the visual viewport's
  // bottom is exactly the space currently occupied by the keyboard (or any
  // other viewport-shrinking browser UI).
  const keyboardHeight = window.innerHeight - viewport.height - viewport.offsetTop;
  const offset = Math.max(0, keyboardHeight);

  // translateY, not changing 'bottom', is deliberate: a fixed-position
  // element's own positioning is already relative to the layout viewport,
  // so nudging it up by exactly the keyboard's height with a transform
  // avoids fighting that base positioning with a second, conflicting
  // positioning system.
  inputBar.style.transform = offset > 0 ? `translateY(-${offset}px)` : 'none';
}

if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', repositionInputBar);
  window.visualViewport.addEventListener('scroll', repositionInputBar);
}

chatInput.addEventListener('focus', () => {
  // Give the keyboard's opening animation a moment to actually resize the
  // visual viewport before recalculating — checking immediately on focus
  // can read a stale, pre-resize viewport height on some browsers.
  setTimeout(repositionInputBar, 50);
});

chatInput.addEventListener('blur', () => {
  inputBar.style.transform = 'none';
});

chatForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = chatInput.value.trim();
  if (!text) return;

  const msg = document.createElement('div');
  msg.className = 'msg me';
  msg.textContent = text;
  chatMessages.appendChild(msg);
  chatMessages.scrollTop = chatMessages.scrollHeight;
  chatInput.value = '';
});