Update mockups and tweak margin for chatroom in responsive mode

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"],
-#converse-embedded-chat .add-chatroom input[type="button"],
+#conversejs.converse-embedded .add-chatroom input[type="submit"],
+#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,
-          #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 label,
+          #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],
-        #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=button],
+        #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%;

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"],
-#converse-embedded-chat .add-chatroom input[type="button"],
+#conversejs.converse-embedded .add-chatroom input[type="submit"],
+#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,
-          #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 label,
+          #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],
-        #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=button],
+        #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 {

mockup/chatbox.html

@@ -36,11 +36,9 @@
                                 </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 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>
 

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 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 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.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                    <li class="participant occupant" title="Click to mention leia in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="moderator occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
+                                    <li class="moderator occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
+                                    <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</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+										<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>

mockup/user-panel.html

@@ -1,7 +1,7 @@
 <!-- <div id="users" class="controlbox-pane"> -->
 <div class="userinfo">
-    <div class="d-flex">
-        <canvas height="20" width="20" class="avatar align-self-center"></canvas>
+    <div class="profile d-flex">
+        <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>

sass/_chatrooms.scss

@@ -1,4 +1,4 @@
-#converse-embedded-chat,
+#conversejs.converse-embedded,
 #conversejs {
     .add-chatroom {
         input[type="submit"],

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;

sass/inverse/_chatrooms.scss

@@ -1,4 +1,5 @@
-#conversejs.fullscreen {
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
 
     .chat-head-chatroom {
         height: $chatroom-head-height;

sass/inverse/inverse.scss

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