mnMsg: undefined/*lowest message ID we've seen so far (for history loading)*/,
      pageIsActive: 'visible'===document.visibilityState,
      changesSincePageHidden: 0,
      notificationBubbleColor: 'white',
      totalMessageCount: 0, // total # of inbound messages
      //! Number of messages to load for the history buttons
      loadMessageCount: Math.abs(F.config.chatInitSize || 20),
      /* Alignment of 'my' messages: must be 'left' or 'right'. Note
         that 'right' is conventional for mobile chat apps but can be
         difficult to read in wide windows (desktop/tablet landscape
         mode). Can be toggled via settings popup. */
      msgMyAlign: (window.innerWidth<window.innerHeight) ? 'right' : 'left',
      ajaxInflight: 0,
      /** Enables (if yes is truthy) or disables all elements in
       * this.disableDuringAjax. */
      enableAjaxComponents: function(yes){
        D[yes ? 'enable' : 'disable'](this.disableDuringAjax);
        return this;
      },

      cssClass: ['fossil-tooltip', 'chat-settings-popup'],
      adjustY: function(y){
        const rect = settingsButton.getBoundingClientRect();
        return rect.top + rect.height + 2;
      }
    });
    settingsPopup.installClickToHide();

    /* Settings menu entries... */
    const settingsOps = [{
      label: "Toggle page body",
      callback: function f(){
        if(undefined === f.isHidden){
          f.isHidden = false;
          f.elemsToToggle = [];
          document.body.childNodes.forEach(function(e){
            if(!e.classList) return/*TEXT nodes and such*/;
            else if(!e.classList.contains('content')){
              f.elemsToToggle.push(e);
            }
          });
        }
        if(f.isHidden){
          D.removeClass(f.elemsToToggle, 'hidden');
          D.removeClass(document.body, 'chat-only-mode');
        }else{
          D.addClass(f.elemsToToggle, 'hidden');
          D.addClass(document.body, 'chat-only-mode');
        }
        f.isHidden = !f.isHidden;
      }
    },{
      label: "Toggle left/right layout",
      callback: function f(){
        if('right'===Chat.msgMyAlign) Chat.msgMyAlign = 'left';
        else Chat.msgMyAlign = 'right';
        const msgs = Chat.e.messagesWrapper.querySelectorAll('.message-row');
        msgs.forEach(function(row){
          if(row.dataset.xfrom!==Chat.me) return;
          row.querySelector('legend').setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign) row.style.justifyContent = "flex-end";
          else row.style.justifyContent = "flex-start";
        });
      }
    }];

    settingsOps.forEach(function(op){
      const btn = D.append(D.span(), op.label);
      D.append(settingsPopup.e, btn);
      op.callback.button = btn;
      if('function'===op.init) op.init();
      btn.addEventListener('click', function(ev){
        settingsPopup.hide();
        op.callback.call(this,ev);
      });

    });
    settingsButton.addEventListener('click',()=>settingsPopup.show(settingsButton), false);


    /* Find an ideal X position for the popup, directly under the settings
       button, based on the size of the popup... */
    settingsPopup.show(document.body);
    popupSize = settingsPopup.e.getBoundingClientRect();
    settingsPopup.hide();
    settingsPopup.options.adjustX = function(x){
      const rect = settingsButton.getBoundingClientRect();

        const eWho = D.create('legend'),
              row = D.addClass(D.fieldset(eWho), 'message-row');
        row.dataset.msgid = m.msgid;
        row.dataset.xfrom = m.xfrom;
        row.dataset.timestamp = m.mtime;
        Chat.injectMessageElem(row,atEnd);
        eWho.addEventListener('click', handleLegendClicked, false);
        if( m.xfrom==Chat.me ){
          eWho.setAttribute('align', Chat.msgMyAlign);
          if('right'===Chat.msgMyAlign){
            row.style.justifyContent = "flex-end";
          }else{
            row.style.justifyContent = "flex-start";
          }
        }else{
          eWho.setAttribute('align', 'left');
        }
        eWho.style.backgroundColor = m.uclr;
        eWho.classList.add('message-user');
        let whoName = m.xfrom;
        var d = new Date(m.mtime + "Z");

  filter: invert(100%);
}
body.chat #chat-settings-button {
}
body.chat .chat-settings-popup {
  font-size: 0.8em;
  text-align: left;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
}
body.chat .chat-settings-popup > span {
  margin: 0.25em 0.2em;
  padding: 0.5em;
  white-space: nowrap;
  cursor: pointer;
  border: 1px outset;
  border-radius: 0.25em;
}
body.chat #chat-messages-wrapper {
  display: flex;
  flex-direction: column;
}
body.chat.chat-only-mode{
}

  flex-direction: row;
  margin-bottom: 0.25em;
  align-items: center;
}
body.chat #chat-input-line > input[type=submit] {
  flex: 1 5 auto;
  max-width: 6em;
  margin: 0 1em;
}
body.chat #chat-input-line > input[type=text] {
  flex: 5 1 auto;
}
body.chat #chat-input-file-area  {
  display: flex;
  flex-direction: row;