
    (function () {
      var rail = document.getElementById('chatRoleNavigation');
      if (!rail) return;
      var clientItems = [
        ['Home', '/client-home', 'i-home'], ['Marketplace', '/marketplace', 'i-store'],
        ['Saved', '/client-home?view=saved', 'i-bookmark'], ['Messages', '/chats', 'i-chat'],
        ['Calendar', '/bookings', 'i-calendar'], ['Notifications', '/notifications', 'i-bell'],
        ['Profile', '/profile', 'i-user-circle']
      ];
      var hostItems = [
        ['Home', '/host-home', 'i-home'], ['Marketplace', '/marketplace', 'i-store'],
        ['Messages', '/chats', 'i-chat'], ['Calendar', '/bookings', 'i-calendar'],
        ['Notifications', '/notifications', 'i-bell'], ['List a space', '/list', 'i-plus'],
        ['My listings', '/host-home?view=my-listings', 'i-store'],
        ['Analytics', '/analytics', 'i-chart']
      ];
      function icon(id) { return '<svg class="icon"><use href="#' + id + '"/></svg>'; }
      function render(role) {
        var isHost = role === 'host';
        var items = isHost ? hostItems : clientItems;
        rail.setAttribute('data-role', isHost ? 'host' : 'client');
        rail.setAttribute('aria-label', isHost ? 'Host navigation' : 'Client navigation');
        var mainItems = items.filter(function (item) { return ['Home', 'Messages', 'Calendar', 'Analytics'].indexOf(item[0]) !== -1; });
        var systemItems = items.filter(function (item) { return item[0] === 'Profile'; });
        rail.innerHTML = '<div class="rail-top">' + mainItems.map(function (item) {
          var active = item[1] === '/chats' ? ' active' : '';
          return '<a class="rail-btn' + active + '" href="' + item[1] + '" title="' + item[0] + '" aria-label="' + item[0] + '"' + (active ? ' aria-current="page"' : '') + '>' + icon(item[2]) + '</a>';
        }).join('') + '</div><div class="rail-bottom"><a class="rail-btn settings-btn" href="/settings" title="Settings" aria-label="Settings">' + icon('i-gear') + '</a>' + systemItems.map(function (item) {
          return '<a class="rail-btn" href="' + item[1] + '" title="' + item[0] + '" aria-label="' + item[0] + '">' + icon(item[2]) + '</a>';
        }).join('') + '</div>';
      }
      window.VaroomChatNavigation = { setRole: render };
      var cachedRole = '';
      try { cachedRole = window.sessionStorage.getItem('varoom_user_role') || ''; } catch (e) {}
      render(cachedRole === 'host' ? 'host' : 'client');
    })();
  


  const infoCol = document.getElementById('infoCol');
  const infoToggleBtn = document.getElementById('toggle-info-panel');
  const infoCloseBtn = document.getElementById('infoCloseBtn');
  function toggleInfoPanel(){
    if (window.matchMedia('(max-width:760px)').matches) return;
    infoCol.classList.toggle('collapsed');
    infoToggleBtn.classList.toggle('active', !infoCol.classList.contains('collapsed'));
    infoToggleBtn.setAttribute('aria-expanded', String(!infoCol.classList.contains('collapsed')));
  }
  infoToggleBtn.addEventListener('click', toggleInfoPanel);
  infoCloseBtn.addEventListener('click', toggleInfoPanel);



(function () {
  'use strict';

  var MOBILE_QUERY = '(max-width:760px)';
  var MAX_ATTACHMENTS = 10;
  var IMAGE_EXT = /\.(jpe?g|png|gif|webp|heic|heif|avif|bmp)$/i;
  var SVG_NS = 'http://www.w3.org/2000/svg';

  var root      = document.documentElement;
  var shell     = document.querySelector('.app-shell');
  var chatCol   = document.querySelector('.chat-col');
  var messages  = document.querySelector('.messages');
  var composer  = document.querySelector('.chat-input-area');
  if (!shell || !chatCol || !messages || !composer) return;

  var ta         = composer.querySelector('textarea');
  var sendBtn    = composer.querySelector('.send-message');
  var attachBtn  = composer.querySelector('.mobile-attach');
  var menu       = document.getElementById('mobileAttachMenu');
  var tray       = document.getElementById('composerTray');
  var note       = document.getElementById('composerNote');
  var photoInput = document.getElementById('composerPhotoInput');
  var fileInput  = document.getElementById('composerFileInput');
  if (!ta || !sendBtn || !attachBtn || !menu || !tray || !note || !photoInput || !fileInput) return;

  var mq = window.matchMedia(MOBILE_QUERY);
  function isMobile() { return mq.matches; }

  var vv = window.visualViewport || null;
  var pending = [];      // { id, kind:'image'|'file', file, url }
  var uid = 0;
  var forcedRole = null;
  var sending = false;
  var stick = true;      // is the message list scrolled to (near) the bottom?
  var noteTimer = 0;

  /* ---------------- role: clients = photos only, hosts = photos + files + listings ---------------- */
  // Fails closed: anything that is not exactly "host" is treated as a client.
  // Set it with  window.VaroomComposer.setRole('host')  or  data-role="host"  on <body>, <html> or .chat-col.
  function getRole() {
    var raw = forcedRole ||
      chatCol.getAttribute('data-role') ||
      (document.body && document.body.getAttribute('data-role')) ||
      root.getAttribute('data-role') ||
      window.VAROOM_ROLE || '';
    return String(raw).toLowerCase() === 'host' ? 'host' : 'client';
  }

  /* ---------------- small helpers ---------------- */
  function makeIcon(id) {
    var svg = document.createElementNS(SVG_NS, 'svg');
    svg.setAttribute('class', 'icon');
    var use = document.createElementNS(SVG_NS, 'use');
    use.setAttribute('href', '#' + id);
    svg.appendChild(use);
    return svg;
  }
  function formatSize(bytes) {
    if (!bytes && bytes !== 0) return '';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  }
  function isImageFile(f) {
    return /^image\//i.test(f.type || '') || IMAGE_EXT.test(f.name || '');
  }
  // keep the keyboard open when tapping composer buttons (mouse events are synthesized after touchend)
  function keepFocus(el) {
    el.addEventListener('mousedown', function (e) { if (isMobile()) e.preventDefault(); });
  }

  /* ---------------- message list stays pinned to the bottom ---------------- */
  messages.addEventListener('scroll', function () {
    stick = (messages.scrollHeight - messages.scrollTop - messages.clientHeight) < 80;
  }, { passive: true });
  function keepBottom() {
    if (!stick || !isMobile()) return;
    requestAnimationFrame(function () { messages.scrollTop = messages.scrollHeight; });
  }
  if (window.ResizeObserver) {
    var ro = new ResizeObserver(keepBottom);
    ro.observe(composer);
    ro.observe(messages);
  }

  /* ---------------- textarea auto-grow ---------------- */
  function autoGrow() {
    if (!isMobile()) { ta.style.height = ''; ta.style.overflowY = ''; return; }
    ta.style.height = '0px';
    var max = parseFloat(window.getComputedStyle(ta).maxHeight);
    if (!max || isNaN(max)) max = 132;
    var full = ta.scrollHeight;
    ta.style.height = Math.min(full, max) + 'px';
    ta.style.overflowY = full > max ? 'auto' : 'hidden';
  }

  /* ---------------- send-button state ---------------- */
  function updateState() {
    var ready = ta.value.trim().length > 0 || pending.length > 0;
    composer.classList.toggle('can-send', ready);
    composer.classList.toggle('has-text', ready);   // kept for existing code that reads this class
    sendBtn.setAttribute('aria-disabled', ready ? 'false' : 'true');
    attachBtn.setAttribute('aria-label', getRole() === 'host' ? 'Attach photos, files or a listing' : 'Add photos');
    menu.querySelector('[data-attach="files"]').hidden = getRole() !== 'host';
    menu.querySelector('[data-attach="listing"]').hidden = getRole() !== 'host';
  }

  /* ---------------- notice ---------------- */
  function showNote(text) {
    note.textContent = text;
    note.hidden = false;
    clearTimeout(noteTimer);
    noteTimer = setTimeout(function () { note.hidden = true; }, 3500);
  }

  /* ---------------- attachment tray ---------------- */
  function renderTray() {
    while (tray.firstChild) tray.removeChild(tray.firstChild);
    pending.forEach(function (item) {
      var el = document.createElement('div');
      if (item.kind === 'image') {
        el.className = 'composer-thumb';
        var img = document.createElement('img');
        img.src = item.url;
        img.alt = item.file.name || 'Photo';
        el.appendChild(img);
      } else {
        el.className = 'composer-file';
        var ico = document.createElement('span');
        ico.className = 'composer-file-ico';
        ico.appendChild(makeIcon('i-file-text'));
        var meta = document.createElement('span');
        meta.className = 'composer-file-meta';
        var nm = document.createElement('span');
        nm.className = 'composer-file-name';
        nm.textContent = item.file.name || 'File';
        var sz = document.createElement('span');
        sz.className = 'composer-file-size';
        sz.textContent = formatSize(item.file.size);
        meta.appendChild(nm);
        meta.appendChild(sz);
        el.appendChild(ico);
        el.appendChild(meta);
      }
      var rm = document.createElement('button');
      rm.type = 'button';
      rm.className = 'composer-rm';
      rm.setAttribute('aria-label', 'Remove ' + (item.file.name || 'attachment'));
      rm.appendChild(makeIcon('i-close'));
      keepFocus(rm);
      rm.addEventListener('click', function () { removeItem(item.id); });
      el.appendChild(rm);
      tray.appendChild(el);
    });
    tray.hidden = pending.length === 0;
  }
  function removeItem(id) {
    pending = pending.filter(function (p) {
      if (p.id === id && p.url) URL.revokeObjectURL(p.url);
      return p.id !== id;
    });
    renderTray();
    updateState();
  }
  function clearPending() {
    pending.forEach(function (p) { if (p.url) URL.revokeObjectURL(p.url); });
    pending = [];
    renderTray();
  }

  function addFiles(list, kind) {
    if (!isMobile()) return;
    var role = getRole();
    var incoming = Array.prototype.slice.call(list || []);
    var rejected = 0, overflow = 0;

    incoming.forEach(function (f) {
      var image = isImageFile(f);
      var okForRole = role === 'host' || image;          // clients: photos only
      var okForKind = kind === 'photos' ? image : true;   // the photo picker only takes images
      if (!okForRole || !okForKind) { rejected++; return; }
      if (pending.length >= MAX_ATTACHMENTS) { overflow++; return; }
      uid += 1;
      pending.push({
        id: uid,
        kind: image ? 'image' : 'file',
        file: f,
        url: image ? URL.createObjectURL(f) : null
      });
    });

    renderTray();
    updateState();
    if (overflow) showNote('You can attach up to ' + MAX_ATTACHMENTS + ' items at a time.');
    else if (rejected) showNote(role === 'host' ? 'Some items were skipped.' : 'Only photos can be attached.');
  }

  photoInput.addEventListener('change', function () {
    var files = Array.prototype.slice.call(photoInput.files || []);
    photoInput.value = '';            // lets the same photo be picked again
    if (files.length > 0 && typeof window.openMediaPreview === 'function') {
      window.openMediaPreview(files[0]);
    } else if (files.length > 0) {
      document.dispatchEvent(new CustomEvent('varoom:open-media-preview', { detail: { file: files[0] } }));
    } else {
      addFiles(files, 'photos');
    }
  });
  fileInput.addEventListener('change', function () {
    var files = Array.prototype.slice.call(fileInput.files || []);
    fileInput.value = '';
    if (getRole() !== 'host') { showNote('Only photos can be attached.'); return; }
    addFiles(files, 'files');
  });

  /* ---------------- attachment menu ---------------- */
  function openMenu()  { menu.hidden = false; attachBtn.setAttribute('aria-expanded', 'true'); }
  function closeMenu() { menu.hidden = true;  attachBtn.setAttribute('aria-expanded', 'false'); }

  attachBtn.addEventListener('click', function () {
    if (!isMobile()) return;
    if (menu.hidden) openMenu(); else closeMenu();
  });

  menu.addEventListener('click', function (e) {
    if (!isMobile()) return;
    var btn = e.target.closest ? e.target.closest('[data-attach]') : null;
    if (!btn) return;
    var action = btn.getAttribute('data-attach');
    closeMenu();
    if (getRole() !== 'host' && action !== 'photos') return;   // hard guard
    if (action === 'photos') {
      photoInput.click();
    } else if (action === 'files') {
      fileInput.click();
    } else if (action === 'listing') {
      // reuse the existing "Share listing" flow (hidden on mobile, still clickable), and announce it
      var listingBtn = composer.querySelector('.attach-icons button[title="Share listing"]');
      if (listingBtn) listingBtn.click();
      composer.dispatchEvent(new CustomEvent('varoom:composer-share-listing', { bubbles: true }));
    }
  });

  document.addEventListener('pointerdown', function (e) {
    if (menu.hidden) return;
    if (menu.contains(e.target) || attachBtn.contains(e.target)) return;
    closeMenu();
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !menu.hidden) closeMenu();
  });

  /* ---------------- sending ---------------- */
  function send() {
    if (!isMobile() || sending) return;
    var role = getRole();
    var text = ta.value.trim();
    var attachments = pending
      .filter(function (p) { return role === 'host' || p.kind === 'image'; })
      .map(function (p) { return { kind: p.kind, file: p.file }; });
    if (!text && !attachments.length) return;

    sending = true;
    var hadFocus = document.activeElement === ta;
    closeMenu();

    // Listen for this to do the real send (Supabase insert / upload):
    //   document.addEventListener('varoom:composer-send', e => { e.detail.text; e.detail.attachments; e.detail.role })
    composer.dispatchEvent(new CustomEvent('varoom:composer-send', {
      bubbles: true, cancelable: true,
      detail: { text: text, attachments: attachments, role: role }
    }));

    // clear right away; the 0ms delay only lets other click handlers on this button read the text first
    setTimeout(function () {
      ta.value = '';
      clearPending();
      autoGrow();
      updateState();
      stick = true;
      keepBottom();
      if (hadFocus) ta.focus();
      sending = false;
    }, 0);
  }
  sendBtn.addEventListener('click', send);

  keepFocus(sendBtn);
  keepFocus(attachBtn);
  keepFocus(menu);

  ta.addEventListener('input', function () {
    if (!isMobile()) return;
    autoGrow();
    updateState();
  });

  /* ---------------- keyboard / visual viewport ---------------- */
  function resetViewport() {
    root.style.removeProperty('--vvh');
    root.style.removeProperty('--vv-top');
    shell.classList.remove('kb-open');
    ta.style.height = '';
    ta.style.overflowY = '';
    closeMenu();
  }
  function syncViewport() {
    if (!isMobile()) { resetViewport(); return; }
    var h = vv ? vv.height : window.innerHeight;
    var top = vv ? Math.max(0, vv.offsetTop) : 0;
    if (vv && vv.scale > 1.05) {       // user pinch-zoomed: don't fight it
      root.style.removeProperty('--vvh');
      root.style.removeProperty('--vv-top');
      shell.classList.remove('kb-open');
      return;
    }
    root.style.setProperty('--vvh', Math.round(h) + 'px');
    root.style.setProperty('--vv-top', Math.round(top) + 'px');
    var kbOpen = document.activeElement === ta && (window.innerHeight - h) > 100;
    shell.classList.toggle('kb-open', kbOpen);
    keepBottom();
  }
  if (vv) {
    vv.addEventListener('resize', syncViewport);
    vv.addEventListener('scroll', syncViewport);
  }
  window.addEventListener('resize', syncViewport);
  window.addEventListener('orientationchange', function () { setTimeout(syncViewport, 250); });
  ta.addEventListener('focus', function () {
    syncViewport();
    setTimeout(syncViewport, 150);     // iOS animates the keyboard in
    setTimeout(syncViewport, 400);
  });
  ta.addEventListener('blur', function () {
    syncViewport();
    setTimeout(syncViewport, 150);
  });

  function onBreakpointChange() {
    if (!isMobile()) resetViewport();
    else { syncViewport(); autoGrow(); }
    updateState();
  }
  if (mq.addEventListener) mq.addEventListener('change', onBreakpointChange);
  else if (mq.addListener) mq.addListener(onBreakpointChange);

  /* ---------------- tiny public API ---------------- */
  window.VaroomComposer = {
    setRole: function (r) { forcedRole = r || null; updateState(); },
    getRole: getRole,
    clear: function () { ta.value = ''; clearPending(); autoGrow(); updateState(); },
    focus: function () { ta.focus(); }
  };

  syncViewport();
  updateState();
})();
