Fossil

}

body.chat div.content {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 85vh /* rough approximate */;
  /*max-height: 85vh*/ /* rough approximate */
  /* ^^^^ This breaks Safari badly - we'll have to calc this from JS */;
}
body.chat.chat-bottom-up div.content {
  flex-direction: column-reverse;
}
body.chat.chat-only-mode div.content {
  max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/;
  /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
  /* ^^^^ Safari hates this: we re-calc it in JS */
  /* Some skins set margins and a max-width on div.content, but we
     needn't(?) honor those in chat-only mode. */
  margin: 0;
  width: 100%;
  max-width: 100%;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid black;
  padding: 0.5em 1em 0 0.5em;
  margin-bottom: 0.5em;
  z-index: 100
    /* see notes in #chat-messages-wrapper. The various popups require a
       z-index higher than this one. */;
  flex: 0 0 auto;
  flex: 1 1 auto;
}
body.chat.chat-bottom-up #chat-input-area {
  border-bottom: none;
  border-top: 1px solid black;
  margin-bottom: 0;
  margin-top: 0.5em;
}