@ <form accept-encoding="utf-8" id="chat-form" autocomplete="off">
  @   <div id='chat-input-line'>
  @     <input type="text" name="msg" id="chat-input-single" \
  @      placeholder="Type message here." autocomplete="off">
  @     <textarea rows="8" id="chat-input-multi" \
  @      placeholder="Type message here" class="hidden"></textarea>
  @     <input type="submit" value="Send" id="chat-message-submit">
  @     <button id="chat-scroll-bottom">&darr;</button>
  @     <button id="chat-scroll-top">&uarr;</button>
  @     <span id="chat-settings-button" class="settings-icon"></span>
  @   </div>
  @   <div id='chat-input-file-area'>
  @     <div class='file-selection-wrapper'>
  @       <div class='help-buttonlet'>
  @        Select a file to upload, drag/drop a file into this spot,
  @        or paste an image from the clipboard if supported by

    let dbg = document.querySelector('#debugMsg');
    if(dbg){
      /* This can inadvertently influence our flexbox layouts, so move
         it out of the way. */
      D.append(document.body,dbg);
    }
  })();
  const ForceResizeKludge = 0 ? function(){} : (function f(){
    /* Workaround for Safari mayhem regarding use of vh CSS units....
       We tried to use vh units to set the content area size for the
       chat layout, but Safari chokes on that, so we calculate that
       height here: 85% when in "normal" mode and 95% in chat-only
       mode. Larger than ~95% is too big for Firefox on Android,
       causing the input area to move off-screen. */
    if(!f.eHead){
      f.eHead = document.querySelector('body > div.header');
      f.eMenu = document.querySelector('body > div.mainmenu');
      f.eFoot = document.querySelector('body > div.footer');
      f.contentArea = E1('div.content');
      f.extra = 0;
      f.measure = function(e){
        if(e){
          const m = window.getComputedStyle(e);
          f.extra += parseFloat(m.height);
        }
      };
    }
    const bcl = document.body.classList;
    const resized = function(){
      const wh = window.innerHeight,
            com = bcl.contains('chat-only-mode');
      var ht;
      if(com){
        ht = wh - 10/*fudge value*/;
      }else{
        f.extra = 0;
        [f.eHead, f.eMenu, f.eFoot].forEach(f.measure);
        ht = wh - f.extra - 10/*fudge value*/;
      }
      f.contentArea.style.height =
        f.contentArea.style.maxHeight = (ht>=100 ? ht : 100)+"px";
      if(false){
        console.debug("resized.",wh, f.extra, ht,
                      window.getComputedStyle(f.contentArea).maxHeight,
                      f.contentArea);
      }
    };
    var doit;
    window.addEventListener('resize',function(ev){
      clearTimeout(doit);
      doit = setTimeout(resized, 100);
    }, false);
    resized();

          document.body.scroll(0,document.body.height);
        }else{
          D.removeClass(f.elemsToToggle, 'hidden');
          D.removeClass(document.body, 'chat-only-mode');
        }
        ForceResizeKludge();
        return this;
      },
      /** Tries to scroll the message area to...
          <0 = top of the message list, >1 = bottom of the message list,
          0 == the newest message (normally the same position as >1).
      */
      scrollMessagesTo: function(where){
        if(where<0){
          Chat.e.messagesWrapper.scrollTop = 0;
        }else if(where>0){
          Chat.e.messagesWrapper.scrollTop = Chat.e.messagesWrapper.scrollHeight;
        }else if(Chat.e.newestMessage){
          Chat.e.newestMessage.scrollIntoView();
        }
      },
      toggleChatOnlyMode: function(){
        return this.chatOnlyMode(!this.isChatOnlyMode());
      },
      settings:{
        get: (k,dflt)=>F.storage.get(k,dflt),
        getBool: (k,dflt)=>F.storage.getBool(k,dflt),

    };
    settingsPopup.options.adjustY = function(y){
      const rect = settingsButton.getBoundingClientRect();
      return rect.top - popupSize.height -2;
    };
  })()/*#chat-settings-button setup*/;

  (function(){ /* buttons to scroll to the begin/end of the messages. */
    E1('#chat-scroll-bottom').addEventListener('click',function(ev){
      ev.preventDefault();
      Chat.scrollMessagesTo(1);
      return false;
    });
    E1('#chat-scroll-top').addEventListener('click',function(ev){
      ev.preventDefault();
      Chat.scrollMessagesTo(-1);
      return false;
    });
  })();
  
  /** Callback for poll() to inject new content into the page.  jx ==
      the response from /chat-poll. If atEnd is true, the message is
      appended to the end of the chat list, else the beginning (the
      default). */
  const newcontent = function f(jx,atEnd){
    if(!f.processPost){

/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  padding: 0.5em 1em;
  border-bottom: none;
  border-top: 1px solid black;

  margin: 0.5em 1em 0 1em;
  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
body.chat:not(.chat-only-mode) #chat-input-area{
  /* Safari user reports that 2em is necessary to keep the file selection
     widget from overlapping the page footer, whereas a margin of 0 is fine
     for FF/Chrome (and 2em is a *huge* waste of space for those). */
  margin-bottom: 2em;
}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;
  align-items: flex-start;
}
body.chat #chat-input-line > input[type=submit],
body.chat #chat-input-line > #chat-settings-button,
body.chat #chat-input-line > button {
  flex: 1 5 auto;
  max-width: 6em;
  margin: 0 0.25em;
}
body.chat #chat-input-line > button {
  max-width: 4em;
}
body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
}
body.chat #chat-input-line > input[type=text],
body.chat #chat-input-line > textarea {
  flex: 5 1 auto;
}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area  {