Update mockups and tweak margin for chatroom in responsive mode

e487fe4e · JC Brand · d0387a65 · e487fe4e · e487fe4e · e487fe4e
Commit e487fe4e authored Apr 24, 2018 by JC Brand
9 changed files
--- a/css/converse.css
+++ b/css/converse.css
@@ -8047,6 +8047,8 @@ body.reset {
      #conversejs .converse-chatboxes .converse-chatroom {
        font-size: 14px; }
      #conversejs .converse-chatboxes .chatbox .box-flyout {
+        top: -100vh;
+        margin-left: 15px;
        left: 0;
        bottom: 0;
        border-radius: 0;
@@ -8229,44 +8231,44 @@ body.reset {
    line-height: 16px;
    width: 100%; }
-#converse-embedded-chat .add-chatroom input[type="submit"],
+#conversejs.converse-embedded .add-chatroom input[type="submit"],
-#converse-embedded-chat .add-chatroom input[type="button"],
+#conversejs.converse-embedded .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],
 #conversejs .add-chatroom input[type="button"] {
  margin: 0.3em 0; }
-#converse-embedded-chat .chat-head-chatroom,
+#conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
  background-color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatroom-topic,
+  #conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
  #conversejs .chat-head-chatroom .chatroom-topic {
    white-space: nowrap;
    overflow-y: hidden;
    text-overflow: ellipsis; }
-  #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
  #conversejs .chat-head-chatroom a.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
    color: white; }
-    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
      color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
+  #conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
  #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
    color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chat-title,
+  #conversejs.converse-embedded .chat-head-chatroom .chat-title,
  #conversejs .chat-head-chatroom .chat-title {
    color: #FF977C; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
    #conversejs .chat-head-chatroom .chat-title .chatroom-name {
      color: white; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
      font-size: 12px; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
    #conversejs .chat-head-chatroom .chat-title .chatroom-description {
      color: white;
      font-size: 80%;
@@ -8275,35 +8277,35 @@ body.reset {
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0.3em 0; }
-#converse-embedded-chat .chatroom,
+#conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
  width: 400px; }
  @media screen and (max-height: 450px) {
-    #converse-embedded-chat .chatroom,
+    #conversejs.converse-embedded .chatroom,
    #conversejs .chatroom {
      width: 100%; } }
  @media screen and (max-width: 480px) {
-    #converse-embedded-chat .chatroom,
+    #conversejs.converse-embedded .chatroom,
    #conversejs .chatroom {
      width: 100%; } }
-  #converse-embedded-chat .chatroom .box-flyout,
+  #conversejs.converse-embedded .chatroom .box-flyout,
  #conversejs .chatroom .box-flyout {
    overflow-y: hidden;
    background-color: #E77051;
    width: 100%; }
    @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs.converse-embedded .chatroom .box-flyout,
      #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh; } }
    @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs.converse-embedded .chatroom .box-flyout,
      #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh; } }
-    #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body,
    #conversejs .chatroom .box-flyout .chatroom-body {
      flex-direction: row;
      flex-flow: nowrap;
@@ -8313,60 +8315,60 @@ body.reset {
      border-top: 0;
      width: 100%;
      overflow: hidden; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .row,
      #conversejs .chatroom .box-flyout .chatroom-body .row {
        flex-direction: row; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
        font-weight: bold;
        color: #E77051; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
        color: #E77051;
        line-height: normal; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info.badge,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-info.badge {
          color: white; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
      #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
        font-weight: bold; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
        animation: colorchange-chatmessage-muc 1s;
        -webkit-animation: colorchange-chatmessage-muc 1s; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
        color: #3AA569; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
          background: #E77051; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
        background: #578EA9; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
      #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
        padding: 2em 2em 0 2em; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
        min-width: 250px; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
          background-color: #E77051;
          max-width: 70%; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
          height: 100%;
          padding: 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
          min-width: 100%; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
            min-width: 100%; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
      #conversejs .chatroom .box-flyout .chatroom-body .occupants {
        display: flex;
        flex-direction: column;
@@ -8378,48 +8380,48 @@ body.reset {
        border-left: 1px solid #777;
        border-bottom-right-radius: 4px;
        padding: 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
          padding: 0.3em 0;
          font-weight: bold; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
          width: 100%; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
            float: left;
            margin-right: 0.5em;
            padding-right: 0;
            font-size: 1em;
            cursor: help; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
          padding: 0; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
            padding: .5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
          padding: 0.5em 0 0 0;
          margin-bottom: 0.5em;
          overflow-x: hidden;
          overflow-y: auto;
          list-style: none; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
            overflow-y: auto;
            flex-basis: 0;
            flex-grow: 1; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
            padding-top: 0; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
              width: 100%; }
-              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
+              #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
                color: #777; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
            cursor: default;
            display: block;
@@ -8428,41 +8430,41 @@ body.reset {
            padding: 0.2em 0.5em 0.2em 0;
            text-overflow: ellipsis;
            white-space: nowrap; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
              margin-right: 0.5em; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
              font-size: 10px; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
              cursor: pointer; }
-              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
+              #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
                display: inline-block;
                margin-right: 0.5em;
                width: 0.5em;
                height: 0.5em; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
                  background-color: #1A9707; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
                  background-color: red; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
                  background-color: darkorange; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
                  background-color: orange; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
              color: #D24E2B; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
              color: #A8ABA1; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container,
      #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
        background-color: white;
        border-bottom-left-radius: 4px;
@@ -8474,44 +8476,44 @@ body.reset {
        width: 100%;
        overflow-y: auto;
        position: absolute; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
          font-size: 90%;
          color: #A53214; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
          height: 100%;
          width: 100%;
          margin-top: 2em; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
            display: block; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
          margin: 0 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
          background-color: #E77051; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
    background-color: white;
    border-top: 8px solid #E77051;
    color: #E77051; }
-    #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
+    #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
      color: #E77051; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
    border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
  #conversejs .chatroom .sendXMPPMessage .send-button {
    background-color: #E77051; }
-  #converse-embedded-chat .chatroom .room-invite .invited-contact,
+  #conversejs.converse-embedded .chatroom .room-invite .invited-contact,
  #conversejs .chatroom .room-invite .invited-contact {
    margin: -1px 0 0 -1px;
    width: 100%;

--- a/css/inverse.css
+++ b/css/inverse.css
@@ -8122,6 +8122,8 @@ body {
      #conversejs .converse-chatboxes .converse-chatroom {
        font-size: 14px; }
      #conversejs .converse-chatboxes .chatbox .box-flyout {
+        top: -100vh;
+        margin-left: 15px;
        left: 0;
        bottom: 0;
        border-radius: 0;
@@ -8372,44 +8374,44 @@ body {
 #conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
  width: 80%; }
-#converse-embedded-chat .add-chatroom input[type="submit"],
+#conversejs.converse-embedded .add-chatroom input[type="submit"],
-#converse-embedded-chat .add-chatroom input[type="button"],
+#conversejs.converse-embedded .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],
 #conversejs .add-chatroom input[type="button"] {
  margin: 0.3em 0; }
-#converse-embedded-chat .chat-head-chatroom,
+#conversejs.converse-embedded .chat-head-chatroom,
 #conversejs .chat-head-chatroom {
  background-color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatroom-topic,
+  #conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
  #conversejs .chat-head-chatroom .chatroom-topic {
    white-space: nowrap;
    overflow-y: hidden;
    text-overflow: ellipsis; }
-  #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
+  #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
  #conversejs .chat-head-chatroom a.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
  #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
    color: white; }
-    #converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
+    #conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
    #conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
      color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
+  #conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
  #conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
    color: #E77051; }
-  #converse-embedded-chat .chat-head-chatroom .chat-title,
+  #conversejs.converse-embedded .chat-head-chatroom .chat-title,
  #conversejs .chat-head-chatroom .chat-title {
    color: #FF977C; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
    #conversejs .chat-head-chatroom .chat-title .chatroom-name {
      color: white; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
    #conversejs .chat-head-chatroom .chat-title .chatroom-jid {
      font-size: 14px; }
-    #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
+    #conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
    #conversejs .chat-head-chatroom .chat-title .chatroom-description {
      color: white;
      font-size: 80%;
@@ -8418,35 +8420,35 @@ body {
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0.3em 0; }
-#converse-embedded-chat .chatroom,
+#conversejs.converse-embedded .chatroom,
 #conversejs .chatroom {
  width: 300px; }
  @media screen and (max-height: 450px) {
-    #converse-embedded-chat .chatroom,
+    #conversejs.converse-embedded .chatroom,
    #conversejs .chatroom {
      width: 100%; } }
  @media screen and (max-width: 480px) {
-    #converse-embedded-chat .chatroom,
+    #conversejs.converse-embedded .chatroom,
    #conversejs .chatroom {
      width: 100%; } }
-  #converse-embedded-chat .chatroom .box-flyout,
+  #conversejs.converse-embedded .chatroom .box-flyout,
  #conversejs .chatroom .box-flyout {
    overflow-y: hidden;
    background-color: #E77051;
    width: 100%; }
    @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs.converse-embedded .chatroom .box-flyout,
      #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh; } }
    @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs.converse-embedded .chatroom .box-flyout,
      #conversejs .chatroom .box-flyout {
        height: 400px;
        width: 100%;
        height: 100vh; } }
-    #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
+    #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body,
    #conversejs .chatroom .box-flyout .chatroom-body {
      flex-direction: row;
      flex-flow: nowrap;
@@ -8456,60 +8458,60 @@ body {
      border-top: 0;
      width: 100%;
      overflow: hidden; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .row,
      #conversejs .chatroom .box-flyout .chatroom-body .row {
        flex-direction: row; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
        font-weight: bold;
        color: #E77051; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
        color: #E77051;
        line-height: normal; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info.badge,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-info.badge {
          color: white; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
      #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
        font-weight: bold; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
        animation: colorchange-chatmessage-muc 1s;
        -webkit-animation: colorchange-chatmessage-muc 1s; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
        color: #3AA569; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
          background: #E77051; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
        background: #578EA9; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
      #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
        padding: 2em 2em 0 2em; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area,
      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
        min-width: 100%; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
          background-color: #E77051;
          max-width: 70%; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
          height: 100%;
          padding: 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
          min-width: 100%; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
            min-width: 100%; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
      #conversejs .chatroom .box-flyout .chatroom-body .occupants {
        display: flex;
        flex-direction: column;
@@ -8521,48 +8523,48 @@ body {
        border-left: 1px solid #777;
        border-bottom-right-radius: 4px;
        padding: 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
          padding: 0.3em 0;
          font-weight: bold; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
          width: 100%; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
            float: left;
            margin-right: 0.5em;
            padding-right: 0;
            font-size: 1em;
            cursor: help; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
          padding: 0; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
            padding: .5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
          padding: 0.5em 0 0 0;
          margin-bottom: 0.5em;
          overflow-x: hidden;
          overflow-y: auto;
          list-style: none; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
            overflow-y: auto;
            flex-basis: 0;
            flex-grow: 1; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
            padding-top: 0; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
              width: 100%; }
-              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
+              #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
                color: #777; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
            cursor: default;
            display: block;
@@ -8571,41 +8573,41 @@ body {
            padding: 0.2em 0.5em 0.2em 0;
            text-overflow: ellipsis;
            white-space: nowrap; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
              margin-right: 0.5em; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
              font-size: 10px; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
              cursor: pointer; }
-              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
+              #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
                display: inline-block;
                margin-right: 0.5em;
                width: 0.5em;
                height: 0.5em; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
                  background-color: #1A9707; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
                  background-color: red; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
                  background-color: darkorange; }
-                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
+                #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
                  background-color: orange; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
              color: #E77051; }
-            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
+            #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
              color: #A8ABA1; }
-      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
+      #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container,
      #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
        background-color: white;
        border-bottom-left-radius: 4px;
@@ -8617,82 +8619,95 @@ body {
        width: 100%;
        overflow-y: auto;
        position: absolute; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
          font-size: 90%;
          color: #A53214; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
          height: 100%;
          width: 100%;
          margin-top: 2em; }
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
            display: block; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
          margin: 0 0.5em; }
-        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
          background-color: #E77051; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
    background-color: white;
    border-top: 8px solid #E77051;
    color: #E77051; }
-    #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
+    #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
    #conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
      color: #E77051; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
    border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
  #conversejs .chatroom .sendXMPPMessage .send-button {
    background-color: #E77051; }
-  #converse-embedded-chat .chatroom .room-invite .invited-contact,
+  #conversejs.converse-embedded .chatroom .room-invite .invited-contact,
  #conversejs .chatroom .room-invite .invited-contact {
    margin: -1px 0 0 -1px;
    width: 100%;
    border: 1px solid #999; }
-#conversejs.fullscreen .chat-head-chatroom {
+#conversejs.converse-fullscreen .chat-head-chatroom,
+#conversejs.converse-mobile .chat-head-chatroom {
  height: 62px;
  font-size: 20px; }
-  #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
+  #conversejs.converse-fullscreen .chat-head-chatroom .chat-title .chatroom-description,
+  #conversejs.converse-mobile .chat-head-chatroom .chat-title .chatroom-description {
    font-size: 65%; }
-#conversejs.fullscreen .chatroom .box-flyout {
+#conversejs.converse-fullscreen .chatroom .box-flyout,
+#conversejs.converse-mobile .chatroom .box-flyout {
  background-color: #E77051;
  border: 1.2em solid #E77051;
  border-top: 0.8em solid #E77051;
  width: 100%; }
-  #conversejs.fullscreen .chatroom .box-flyout .chatroom-body {
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
+  #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
-    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chatroom-form-container {
      border-radius: 4px; }
-    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area {
      border-top-left-radius: 4px;
      min-width: auto; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
        border-top-left-radius: 4px;
        padding: 0 1em 1em 1em; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full {
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
        max-width: 100%; }
-        #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
+        #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+        #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
          max-width: 100%; }
-    #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants {
+    #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
+    #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
      border-top-right-radius: 4px;
      padding: 1em; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
        font-size: 18px; }
-      #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
+      #conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
+      #conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
        font-size: 14px; }
-#conversejs.fullscreen .chatroom .room-invite span .invited-contact {
+#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
+#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
  margin: 0 0 0.5em -1px; }
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {

--- a/mockup/chatbox.html
+++ b/mockup/chatbox.html
@@ -36,13 +36,11 @@
                                </div>
                            </div>
                        </div>
-                        <div class="col-3">
                        <div class="chatbox-buttons row no-gutters">
                            <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
                            <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
                        </div>
                    </div>
-                    </div>
                    <div class="chat-body">
                        <div class="chat-content">

--- a/mockup/chatroom.html
+++ b/mockup/chatroom.html
@@ -9,7 +9,7 @@
 </head>
 <body class="reset">
-    <div id="conversejs" class="fullscreen">
+    <div id="conversejs" class="fullscreen converse-fullscreen">
        <div class="sidebar"></div>
        <div class="converse-chatboxes row no-gutters">
            <div id="controlbox" class="chatbox">
@@ -27,18 +27,22 @@
                            <div class="chat-title">Chatroom with a very long name</div>
                            <p class="chatroom-topic">May the force be with you</p>
                        </div>
-                        <div class="col-sm-3 col-lg-2">
                        <div class="chatbox-buttons row no-gutters">
                            <a class="chatbox-btn fa fa-minus"></a>
                            <a class="chatbox-btn fa fa-close"></a>
                            <a class="chatbox-btn fa fa-wrench"></a>
                        </div>
                    </div>
-                    </div>
                    <div class="chat-body chatroom-body row no-gutters">
                            <div class="chat-area col-md-9 col-8">
                                <div class="chat-content">
+									<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-24T00:00:00+02:00">Tuesday Apr 24th 2018</time>
+									<div class="message chat-info chat-event" data-isodate="2018-04-24T18:07:24+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-24T18:07:26+02:00" data-msgid="4fb4d101-8124-4f2a-8dfb-2615896b8316">
+										<span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
+										<span class="chat-msg-content">ee</span>
+										<div class="chat-msg-media"></div>
+									</div>
                                    <div class="chat-message">
                                        <span class="chat-msg-author chat-msg-room">18:50&nbsp;
                                            <canvas height="24" width="24" class="avatar"></canvas>
@@ -101,50 +105,92 @@
                                </form>
                                <ul class="occupant-list">
-                                    <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
+                                    <li class="moderator occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
-                                    <li class="participant occupant" title="Click to mention leia in your message.">
+                                    <li class="moderator occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
-                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Obi-Wan Kenobi</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+										<div class="occupant-status occupant-online circle" title="Online"></div>R2-D2</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>R5-D4</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Darth Sidious</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Anakin Skywalker</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Luke Skywalker</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Han Solo</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>TC-14</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Booster Terrik</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Mirax Terrik</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Mod Terrik</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Tessek</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Darth Vader</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Supreme Chancellor Finis Valorum</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Nahdar Vebb</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>General Maximilian Veers</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Tahiri Veila</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Asajj Ventress</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Vergere</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>King Veruna</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Vima-Da-Boda</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Quinlan Vos</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Yoda</li>
                                </ul>
                                <div class="chatroom-features">
                                    <p class="occupants-heading">Features</p>

--- a/mockup/user-panel.html
+++ b/mockup/user-panel.html
 <!-- <div id="users" class="controlbox-pane"> -->
 <div class="userinfo">
-    <div class="d-flex">
+    <div class="profile d-flex">
-        <canvas height="20" width="20" class="avatar align-self-center"></canvas>
+        <canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
        <span class="username w-100 align-self-center">Walter White</span>
        <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
        <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
@@ -23,19 +23,19 @@
        <div class="rooms-list">
            <div class="available-chatroom d-flex flex-row">
                <span class="badge badge-info msgs-indicator">1</span>
-                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
+                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">public</a>
                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
                <a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
            </div>
            <div class="available-chatroom d-flex flex-row">
-                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
+                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">team</a>
                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
            </div>
            <div class="available-chatroom d-flex flex-row">
-                <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
+                <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="chatroom.html">test</a>
                <a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
            </div>
@@ -86,17 +86,17 @@
            <ul>
                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
                <li class="away current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
                <li class="dnd current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
@@ -108,12 +108,12 @@
                <span class="fa fa-caret-down"></span> Family</a>
            <ul>
                <li class="away current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
                <li class="offline current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
@@ -125,12 +125,12 @@
                <span class="fa fa-caret-down"></span> Friends</a>
            <ul>
                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>
@@ -142,7 +142,7 @@
                <span class="fa fa-caret-down"></span> Ungrouped</a>
            <ul>
                <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                        <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
                    <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                </li>

--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
-#converse-embedded-chat,
+#conversejs.converse-embedded,
 #conversejs {
    .add-chatroom {
        input[type="submit"],

--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -449,6 +449,9 @@
            .chatbox { 
                .box-flyout {
+                    top: -100vh;
+                    margin-left: 15px; // Counteracts Bootstrap margins, but
+                                       // not clear why needed...
                    left: 0;
                    bottom: 0;
                    border-radius: 0;

--- a/sass/inverse/_chatrooms.scss
+++ b/sass/inverse/_chatrooms.scss
-#conversejs.fullscreen {
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
    .chat-head-chatroom {
        height: $chatroom-head-height;

--- a/sass/inverse/inverse.scss
+++ b/sass/inverse/inverse.scss
@@ -36,7 +36,6 @@
    @import "bootstrap/scss/popover";
    @import "bootstrap/scss/utilities";
 }
-@import "../fonts";
 @import "../core";
 @import "core";
 @import "../profile";