mockup.css is no more.

css/converse.css

@@ -773,11 +773,30 @@ body .brand-heading {
       border-radius: 4px; }
     #conversejs .flyout {
       border-radius: 4px; } }
-@media screen and (max-width: 767px) {
-  #conversejs.login {
-    margin: 0;
-    width: 100%;
-    height: 100%; } }
+@media screen and (min-width: 576px) {
+  #conversejs .offset-sm-2 {
+    margin-left: 16.666667%; } }
+@media screen and (min-width: 768px) {
+  #conversejs .offset-md-2 {
+    margin-left: 16.666667%; }
+
+  #conversejs .offset-md-3 {
+    margin-left: 25%; } }
+@media screen and (min-width: 992px) {
+  #conversejs .offset-lg-2 {
+    margin-left: 16.666667%; }
+
+  #conversejs .offset-lg-3 {
+    margin-left: 25%; } }
+@media screen and (min-width: 1200px) {
+  #conversejs .offset-xl-2 {
+    margin-left: 16.666667%; } }
+@media screen and (max-height: 450px) {
+  #conversejs {
+    left: 0; } }
+@media screen and (max-width: 480px) {
+  #conversejs {
+    width: auto; } }
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 4px;
@@ -1020,8 +1039,8 @@ body .brand-heading {
       margin: 0;
       padding: 0;
       position: relative; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage,
-  #conversejs .chatbox form.sendXMPPMessage {
+  #converse-embedded-chat .chatbox .sendXMPPMessage,
+  #conversejs .chatbox .sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     border-bottom-left-radius: 4px;
@@ -1035,15 +1054,15 @@ body .brand-heading {
     height: 95px;
     min-width: 200px; }
     @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
     @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
+    #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-left-radius: 4px;
@@ -1053,8 +1072,8 @@ body .brand-heading {
       width: 100%;
       border: none;
       resize: none; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
-    #conversejs .chatbox form.sendXMPPMessage .send-button {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
+    #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
       left: 3px;
       width: -webkit-calc(100% - 6px);
@@ -1064,63 +1083,63 @@ body .brand-heading {
       font-size: 80%;
       height: 27px;
       bottom: -30px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
-    #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
+    #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
       padding: 5px;
       height: 25px;
       display: block;
       background-color: #E7FBF0; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 14px;
         color: #777;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
         padding-right: 3px; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
         color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
           color: #578EA9; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
         color: #cf5300; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
         float: right; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
         margin-top: 1px;
         padding: 0 3px 0 3px; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
           bottom: 100%;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1128,71 +1147,71 @@ body .brand-heading {
           margin: 0;
           position: absolute;
           right: 0; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
             height: 100px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
             box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
             left: 0; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
               height: 30px;
               padding: 4px;
               z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
                 font-size: 20px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
             cursor: pointer;
             list-style: none;
             position: relative; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
               padding: 0.3em; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
             background-color: #DCF9F6; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
             display: block;
             padding: 7px; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
               display: block; }
   #converse-embedded-chat .chatbox .dragresize,
   #conversejs .chatbox .dragresize {
@@ -1221,6 +1240,21 @@ body .brand-heading {
       top: 0;
       left: 0; }
 
+@media screen and (max-width: 767px) {
+  #conversejs #login-dialog .pure-form.converse-form {
+    padding: 3em 2em 3em; }
+
+  > .chatbox {
+    width: calc(100% - 50px); }
+
+  .chatbox .chat-body .chat-message .chat-msg-author {
+    white-space: normal; }
+  .chatbox .box-flyout {
+    left: 50px;
+    bottom: 0;
+    width: calc(100% - 50px);
+    height: 100vh;
+    box-shadow: none; } }
 #converse-embedded-chat .chat-head,
 #conversejs:not(.fullscreen) .chat-head {
   border-top-left-radius: 4px;
@@ -1637,6 +1671,24 @@ body .brand-heading {
 #conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
   color: #818479; }
 
+@media screen and (max-width: 767px) {
+  #conversejs #controlbox .box-flyout {
+    width: 100%;
+    left: 0; }
+  #conversejs #controlbox .sidebar {
+    display: block; }
+  #conversejs #controlbox #users {
+    position: absolute;
+    top: 0;
+    left: 50px;
+    display: none;
+    width: calc(100% - 50px); }
+    #conversejs #controlbox #users.controlbox-pane {
+      height: 100vh; }
+  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
+    display: none; }
+  #conversejs.sidebar-open #controlbox #users {
+    display: block; } }
 #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
   font-size: 90%; }
 #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
@@ -1887,7 +1939,8 @@ body .brand-heading {
       height: calc(100% - 55px);
       background-color: white;
       border-top: 0;
-      width: 100%; }
+      width: 100%;
+      overflow: hidden; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
         color: white;
@@ -1914,10 +1967,10 @@ body .brand-heading {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
-        height: 100%;
         width: 100%;
         float: left;
-        min-width: 200px; }
+        min-width: 200px;
+        height: calc(100% - 95px); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051;
@@ -2054,14 +2107,14 @@ body .brand-heading {
         #converse-embedded-chat .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 form.sendXMPPMessage .chat-toolbar,
-  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
     background-color: #FFECE7; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
-  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
-  #conversejs .chatroom form.sendXMPPMessage .send-button {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: #E77051; }
   #converse-embedded-chat .chatroom .room-invite .invited-contact,
   #conversejs .chatroom .room-invite .invited-contact {
@@ -2069,6 +2122,9 @@ body .brand-heading {
     width: 100%;
     border: 1px solid #999; }
 
+@media screen and (max-width: 767px) {
+  #conversejs .chatbox .box-flyout .chatroom-body .chat-area {
+    height: calc(100vh - 55px); } }
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }
 #conversejs .chatbox.headlines .chat-body {

css/inverse.css

@@ -773,11 +773,30 @@ body .brand-heading {
       border-radius: 0; }
     #conversejs .flyout {
       border-radius: 0; } }
-@media screen and (max-width: 767px) {
-  #conversejs.login {
-    margin: 0;
-    width: 100%;
-    height: 100%; } }
+@media screen and (min-width: 576px) {
+  #conversejs .offset-sm-2 {
+    margin-left: 16.666667%; } }
+@media screen and (min-width: 768px) {
+  #conversejs .offset-md-2 {
+    margin-left: 16.666667%; }
+
+  #conversejs .offset-md-3 {
+    margin-left: 25%; } }
+@media screen and (min-width: 992px) {
+  #conversejs .offset-lg-2 {
+    margin-left: 16.666667%; }
+
+  #conversejs .offset-lg-3 {
+    margin-left: 25%; } }
+@media screen and (min-width: 1200px) {
+  #conversejs .offset-xl-2 {
+    margin-left: 16.666667%; } }
+@media screen and (max-height: 450px) {
+  #conversejs {
+    left: 0; } }
+@media screen and (max-width: 480px) {
+  #conversejs {
+    width: auto; } }
 body {
   width: 100%;
   height: 100%;
@@ -828,10 +847,6 @@ body {
   bottom: 0;
   left: 0;
   right: 0; }
-  #conversejs.fullscreen.login {
-    width: calc(100vw - 1em);
-    height: calc(100vh - 1em);
-    margin: 0.5em; }
   #conversejs.fullscreen form.pure-form.converse-form {
     margin: 1em; }
     #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
@@ -851,7 +866,7 @@ body {
       margin-right: 1em; }
 
 @media screen and (max-width: 767px) {
-  #conversejs.fullscreen.login {
+  #conversejs.fullscreen {
     background-color: white;
     margin: 0;
     width: 100%;
@@ -1098,8 +1113,8 @@ body {
       margin: 0;
       padding: 0;
       position: relative; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage,
-  #conversejs .chatbox form.sendXMPPMessage {
+  #converse-embedded-chat .chatbox .sendXMPPMessage,
+  #conversejs .chatbox .sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     border-bottom-left-radius: 0;
@@ -1113,15 +1128,15 @@ body {
     height: 99px;
     min-width: 100%; }
     @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
     @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
+    #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border-bottom-left-radius: 0;
@@ -1131,8 +1146,8 @@ body {
       width: 100%;
       border: none;
       resize: none; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
-    #conversejs .chatbox form.sendXMPPMessage .send-button {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
+    #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
       left: 3px;
       width: -webkit-calc(100% - 6px);
@@ -1142,63 +1157,63 @@ body {
       font-size: 80%;
       height: 27px;
       bottom: -30px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
-    #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
+    #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
       padding: 5px;
       height: 29px;
       display: block;
       background-color: #E7FBF0; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
         color: #777;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
         padding-right: 3px; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
         color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
           color: #578EA9; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
         color: #cf5300; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
         float: right; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
         margin-top: 1px;
         padding: 0 3px 0 3px; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
           bottom: 100%;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1206,71 +1221,71 @@ body {
           margin: 0;
           position: absolute;
           right: 0; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
             height: 150px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
             box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
             left: 0; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
               height: 32px;
               padding: 4px;
               z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
                 font-size: 26px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
             cursor: pointer;
             list-style: none;
             position: relative; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
               padding: 0.3em; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
             background-color: #DCF9F6; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
             display: block;
             padding: 7px; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
               display: block; }
   #converse-embedded-chat .chatbox .dragresize,
   #conversejs .chatbox .dragresize {
@@ -1299,6 +1314,21 @@ body {
       top: 0;
       left: 0; }
 
+@media screen and (max-width: 767px) {
+  #conversejs #login-dialog .pure-form.converse-form {
+    padding: 3em 2em 3em; }
+
+  > .chatbox {
+    width: calc(100% - 50px); }
+
+  .chatbox .chat-body .chat-message .chat-msg-author {
+    white-space: normal; }
+  .chatbox .box-flyout {
+    left: 50px;
+    bottom: 0;
+    width: calc(100% - 50px);
+    height: 100vh;
+    box-shadow: none; } }
 #conversejs.fullscreen .chatbox-btn {
   font-size: 18px;
   margin: 0 0.3em; }
@@ -1733,6 +1763,24 @@ body {
 #conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
   color: #818479; }
 
+@media screen and (max-width: 767px) {
+  #conversejs #controlbox .box-flyout {
+    width: 100%;
+    left: 0; }
+  #conversejs #controlbox .sidebar {
+    display: block; }
+  #conversejs #controlbox #users {
+    position: absolute;
+    top: 0;
+    left: 50px;
+    display: none;
+    width: calc(100% - 50px); }
+    #conversejs #controlbox #users.controlbox-pane {
+      height: 100vh; }
+  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
+    display: none; }
+  #conversejs.sidebar-open #controlbox #users {
+    display: block; } }
 #conversejs.fullscreen #controlbox {
   width: 100%;
   float: left;
@@ -2043,7 +2091,8 @@ body {
       height: calc(100% - 62px);
       background-color: white;
       border-top: 0;
-      width: 100%; }
+      width: 100%;
+      overflow: hidden; }
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
         color: white;
@@ -2070,10 +2119,10 @@ body {
       #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
         word-wrap: break-word;
-        height: 100%;
         width: 100%;
         float: left;
-        min-width: 100%; }
+        min-width: 100%;
+        height: calc(100% - 95px); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
           background-color: #E77051;
@@ -2210,14 +2259,14 @@ body {
         #converse-embedded-chat .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 form.sendXMPPMessage .chat-toolbar,
-  #conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
+  #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
     background-color: #FFECE7; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
-  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom .sendXMPPMessage .chat-textarea {
     border-bottom-right-radius: 0; }
-  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
-  #conversejs .chatroom form.sendXMPPMessage .send-button {
+  #converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
+  #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: #E77051; }
   #converse-embedded-chat .chatroom .room-invite .invited-contact,
   #conversejs .chatroom .room-invite .invited-contact {
@@ -2225,6 +2274,9 @@ body {
     width: 100%;
     border: 1px solid #999; }
 
+@media screen and (max-width: 767px) {
+  #conversejs .chatbox .box-flyout .chatroom-body .chat-area {
+    height: calc(100vh - 55px); } }
 #conversejs.fullscreen .chat-head-chatroom {
   height: 62px;
   font-size: 20px; }

mockup/chatbox.html

@@ -7,143 +7,142 @@
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
 <body>
-	<div class="container-fluid">
-		<div id="conversejs" class="fullscreen chatbox">
-			<div id="controlbox" class="chatbox">
-				<div class="flyout box-flyout">
-					<div class="controlbox-panes">
-						<div class="row">
-							<div class="col-xl-2 col-md-3">
+     <div class="container-fluid">
+          <div id="conversejs" class="fullscreen">
+               <div id="controlbox" class="chatbox">
+                    <div class="flyout box-flyout">
+                         <div class="controlbox-panes">
+                              <div class="row">
+                                   <div class="col-xl-2 col-md-3">
                                 <div class="sidebar"></div>
                                 <div id="users" class="controlbox-pane"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
 
-			<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
-				<div class="row">
-					<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
-						<div class="flyout box-flyout">
-							<div class="chat-head chat-head-chatbox d-flex">
-								<div><canvas height="44" width="44" class="avatar"></canvas></div>
-								<div class="chat-title w-100">JC Brand
-									<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-								</div>
-								<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-								<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
-							</div>
+               <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
+                    <div class="row">
+                         <div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
+                              <div class="flyout box-flyout">
+                                   <div class="chat-head chat-head-chatbox d-flex">
+                                        <div><canvas height="44" width="44" class="avatar"></canvas></div>
+                                        <div class="chat-title w-100">JC Brand
+                                             <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
+                                        </div>
+                                        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+                                        <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
+                                   </div>
 
-							<div class="chat-body">
-								<div class="chat-content">
-									<div class="chat-info">
-										<span class="badge badge-info">This is an info message</span></div>
-									<div class="chat-info">
-										<span class="badge badge-danger">This is an error message</span></div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-me">09:35&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-me">me:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Hello world
-											<span class="fa fa-smile-o"></span>
-										</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-them">19:25&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-them">Benedict-John:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Dagsê</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-me">19:39&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-me">me:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-me">19:42&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-me">me:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-									</div>
-									<div class="chat-info chat-event">
-										<span class="badge badge-success">JC Brand is busy</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-me">19:43&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-me">me:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Another message to check that scrolling works.</span>
-									</div>
-								</div>
+                                   <div class="chat-body">
+                                        <div class="chat-content">
+                                             <div class="chat-info">
+                                                  <span class="badge badge-info">This is an info message</span></div>
+                                             <div class="chat-info">
+                                                  <span class="badge badge-danger">This is an error message</span></div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-me">09:35&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-me">me:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Hello world
+                                                       <span class="fa fa-smile-o"></span>
+                                                  </span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-them">19:25&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-them">Benedict-John:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Dagsê</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-me">19:39&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-me">me:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-me">me:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                                             </div>
+                                             <div class="chat-info chat-event">
+                                                  <span class="badge badge-success">JC Brand is busy</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-me">19:43&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-me">me:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                                             </div>
+                                        </div>
 
-								<form class="sendXMPPMessage">
-									<div class="form-group">
-										<ul class="chat-toolbar no-text-select">
-											<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
-												<div class="emoji-picker-container toolbar-menu collapsed"></div>
-											</li>
+                                        <form class="sendXMPPMessage">
+                                             <div class="form-group">
+                                                  <ul class="chat-toolbar no-text-select">
+                                                       <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
+                                                            <div class="emoji-picker-container toolbar-menu collapsed"></div>
+                                                       </li>
 
-											<li class="toggle-clear">
-												<a class="fa fa-trash" title="Clear all messages"></a>
-											</li>
+                                                       <li class="toggle-clear">
+                                                            <a class="fa fa-trash" title="Clear all messages"></a>
+                                                       </li>
 
-											<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
-												<span class="chat-toolbar-text">unencrypted</span>
-												<span class="fa fa-unlock"></span>
-												<ul class="toolbar-menu collapsed">
-													<li>
-														<a class="start-otr" href="#">Start encrypted conversation</a>
-													</li>
-													<li>
-														<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
-													</li>
-												</ul>
-											</li>
-										</ul>
-									</div>
-									<div class="form-group">
-										<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
-									</div>
-								</form>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                                                       <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
+                                                            <span class="chat-toolbar-text">unencrypted</span>
+                                                            <span class="fa fa-unlock"></span>
+                                                            <ul class="toolbar-menu collapsed">
+                                                                 <li>
+                                                                      <a class="start-otr" href="#">Start encrypted conversation</a>
+                                                                 </li>
+                                                                 <li>
+                                                                      <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
+                                                                 </li>
+                                                            </ul>
+                                                       </li>
+                                                  </ul>
+                                             </div>
+                                             <div class="form-group">
+                                                  <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
+                                             </div>
+                                        </form>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
+          </div>
 
-		<!-- Contact Profile Modal -->
-		<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
-			<div class="modal-dialog" role="document">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
-						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-							<span aria-hidden="true">&times;</span>
-						</button>
-					</div>
-					<div class="modal-body">
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-					</div>
-				</div>
-			</div>
-		</div>
+          <!-- Contact Profile Modal -->
+          <div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
+               <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                         <div class="modal-header">
+                              <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
+                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                   <span aria-hidden="true">&times;</span>
+                              </button>
+                         </div>
+                         <div class="modal-body">
+                         </div>
+                         <div class="modal-footer">
+                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                         </div>
+                    </div>
+               </div>
+          </div>
 
         <div class="modals"></div>
-	</div>
+     </div>
 </body>
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>

mockup/chatroom.html

@@ -7,7 +7,6 @@
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
 <body>

mockup/converse.html

@@ -7,283 +7,282 @@
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
 <body style="background-color: #578EA9">
-	<div class="converse-bg container">
-		<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
-	</div>
+     <div class="converse-bg container">
+          <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
+     </div>
 
-	<div id="conversejs" class="chatbox">
-		<div id="controlbox" class="chatbox">
-			<div class="flyout box-flyout">
-				<div class="controlbox-panes">
-					<div class="row">
-						<div class="col-12">
+     <div id="conversejs" class="chatbox">
+          <div id="controlbox" class="chatbox">
+               <div class="flyout box-flyout">
+                    <div class="controlbox-panes">
+                         <div class="row">
+                              <div class="col-12">
                             <div class="sidebar"></div>
                             <div id="users" class="controlbox-pane"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
+          </div>
 
-		<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
-			<div class="flyout box-flyout">
-				<div class="chat-head chat-head-chatbox d-flex">
-					<div><canvas height="32" width="32" class="avatar"></canvas></div>
-					<div class="chat-title w-100">JC Brand
-						<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-					</div>
-					<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-					<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
-				</div>
+          <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
+               <div class="flyout box-flyout">
+                    <div class="chat-head chat-head-chatbox d-flex">
+                         <div><canvas height="32" width="32" class="avatar"></canvas></div>
+                         <div class="chat-title w-100">JC Brand
+                              <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
+                         </div>
+                         <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+                         <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
+                    </div>
 
-				<div class="chat-body">
-					<div class="chat-content">
-						<div class="chat-info">
-							<span class="badge badge-info">This is an info message</span></div>
-						<div class="chat-info">
-							<span class="badge badge-danger">This is an error message</span></div>
-						<div class="chat-message">
-							<span class="chat-msg-author chat-msg-me">09:35&nbsp;
-								<canvas height="24" width="24" class="avatar"></canvas>
-								<span class="chat-msg-me">me:&nbsp;</span>
-							</span>
-							<span class="chat-msg-content">Hello world
-								<span class="fa fa-smile-o"></span>
-							</span>
-						</div>
-						<div class="chat-message">
-							<span class="chat-msg-author chat-msg-them">19:25&nbsp;
-								<canvas height="24" width="24" class="avatar"></canvas>
-								<span class="chat-msg-them">Benedict-John:&nbsp;</span>
-							</span>
-							<span class="chat-msg-content">Dagsê</span>
-						</div>
-						<div class="chat-message">
-							<span class="chat-msg-author chat-msg-me">19:39&nbsp;
-								<canvas height="24" width="24" class="avatar"></canvas>
-								<span class="chat-msg-me">me:&nbsp;</span>
-							</span>
-							<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
-						</div>
-						<div class="chat-message">
-							<span class="chat-msg-author chat-msg-me">19:42&nbsp;
-								<canvas height="24" width="24" class="avatar"></canvas>
-								<span class="chat-msg-me">me:&nbsp;</span>
-							</span>
-							<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-						</div>
-						<div class="chat-info chat-event">
-							<span class="badge badge-success">JC Brand is busy</span>
-						</div>
-						<div class="chat-message">
-							<span class="chat-msg-author chat-msg-me">19:43&nbsp;
-								<canvas height="24" width="24" class="avatar"></canvas>
-								<span class="chat-msg-me">me:&nbsp;</span>
-							</span>
-							<span class="chat-msg-content">Another message to check that scrolling works.</span>
-						</div>
-					</div>
+                    <div class="chat-body">
+                         <div class="chat-content">
+                              <div class="chat-info">
+                                   <span class="badge badge-info">This is an info message</span></div>
+                              <div class="chat-info">
+                                   <span class="badge badge-danger">This is an error message</span></div>
+                              <div class="chat-message">
+                                   <span class="chat-msg-author chat-msg-me">09:35&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-me">me:&nbsp;</span>
+                                   </span>
+                                   <span class="chat-msg-content">Hello world
+                                        <span class="fa fa-smile-o"></span>
+                                   </span>
+                              </div>
+                              <div class="chat-message">
+                                   <span class="chat-msg-author chat-msg-them">19:25&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-them">Benedict-John:&nbsp;</span>
+                                   </span>
+                                   <span class="chat-msg-content">Dagsê</span>
+                              </div>
+                              <div class="chat-message">
+                                   <span class="chat-msg-author chat-msg-me">19:39&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-me">me:&nbsp;</span>
+                                   </span>
+                                   <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
+                              </div>
+                              <div class="chat-message">
+                                   <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-me">me:&nbsp;</span>
+                                   </span>
+                                   <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                              </div>
+                              <div class="chat-info chat-event">
+                                   <span class="badge badge-success">JC Brand is busy</span>
+                              </div>
+                              <div class="chat-message">
+                                   <span class="chat-msg-author chat-msg-me">19:43&nbsp;
+                                        <canvas height="24" width="24" class="avatar"></canvas>
+                                        <span class="chat-msg-me">me:&nbsp;</span>
+                                   </span>
+                                   <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                              </div>
+                         </div>
 
-					<form class="sendXMPPMessage">
-						<div class="form-group">
-							<ul class="chat-toolbar no-text-select">
-								<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
-									<div class="emoji-picker-container toolbar-menu collapsed"></div>
-								</li>
+                         <form class="sendXMPPMessage">
+                              <div class="form-group">
+                                   <ul class="chat-toolbar no-text-select">
+                                        <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
+                                             <div class="emoji-picker-container toolbar-menu collapsed"></div>
+                                        </li>
 
-								<li class="toggle-clear">
-									<a class="fa fa-trash" title="Clear all messages"></a>
-								</li>
+                                        <li class="toggle-clear">
+                                             <a class="fa fa-trash" title="Clear all messages"></a>
+                                        </li>
 
-								<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
-									<span class="chat-toolbar-text">unencrypted</span>
-									<span class="fa fa-unlock"></span>
-									<ul class="toolbar-menu collapsed">
-										<li>
-											<a class="start-otr" href="#">Start encrypted conversation</a>
-										</li>
-										<li>
-											<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
-										</li>
-									</ul>
-								</li>
-							</ul>
-						</div>
-						<div class="form-group">
-							<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
+                                        <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
+                                             <span class="chat-toolbar-text">unencrypted</span>
+                                             <span class="fa fa-unlock"></span>
+                                             <ul class="toolbar-menu collapsed">
+                                                  <li>
+                                                       <a class="start-otr" href="#">Start encrypted conversation</a>
+                                                  </li>
+                                                  <li>
+                                                       <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
+                                                  </li>
+                                             </ul>
+                                        </li>
+                                   </ul>
+                              </div>
+                              <div class="form-group">
+                                   <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
+                              </div>
+                         </form>
+                    </div>
+               </div>
+          </div>
 
-		<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
-			<div class="flyout box-flyout">
-				<div class="chat-head chat-head-chatroom d-flex">
-					<div class="w-100">
-						<div class="chat-title">Chatroom</div>
-						<p class="chatroom-topic">May the force be with you</p>
-					</div>
-					<a class="chatbox-btn fa fa-wrench"></a>
-					<a class="chatbox-btn fa fa-minus"></a>
-					<a class="chatbox-btn fa fa-close"></a>
-				</div>
+          <div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
+               <div class="flyout box-flyout">
+                    <div class="chat-head chat-head-chatroom d-flex">
+                         <div class="w-100">
+                              <div class="chat-title">Chatroom</div>
+                              <p class="chatroom-topic">May the force be with you</p>
+                         </div>
+                         <a class="chatbox-btn fa fa-wrench"></a>
+                         <a class="chatbox-btn fa fa-minus"></a>
+                         <a class="chatbox-btn fa fa-close"></a>
+                    </div>
 
-				<div class="chat-body chatroom-body">
-					<div class="row">
-						<div class="col-md-9 col-8">
-							<div class="chat-area">
-								<div class="chat-content">
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-room">18:50&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-room">luke:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">leia: hi :)</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-room">19:40&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-room">leia:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-									</div>
-									<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-room">19:40&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-me">19:42&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-me">me:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-									</div>
-									<div class="chat-message">
-										<span class="chat-msg-author chat-msg-room">19:43&nbsp;
-											<canvas height="24" width="24" class="avatar"></canvas>
-											<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-										</span>
-										<span class="chat-msg-content">Another message to check that scrolling works.</span>
-									</div>
-								</div>
-								<form class="sendXMPPMessage">
-									<div class="form-group">
-										<ul class="chat-toolbar no-text-select">
-											<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-											<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-											<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
-										</ul>
-									</div>
-									<div class="form-group">
-										<textarea class="chat-textrea form-control" placeholder="Message"></textarea>
-									</div>
-								</form>
-							</div>
-						</div>
+                    <div class="chat-body chatroom-body">
+                         <div class="row">
+                              <div class="col-md-9 col-8">
+                                   <div class="chat-area">
+                                        <div class="chat-content">
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-room">18:50&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-room">luke:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">leia: hi :)</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-room">leia:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                             </div>
+                                             <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-me">me:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                                             </div>
+                                             <div class="chat-message">
+                                                  <span class="chat-msg-author chat-msg-room">19:43&nbsp;
+                                                       <canvas height="24" width="24" class="avatar"></canvas>
+                                                       <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                                  </span>
+                                                  <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                                             </div>
+                                        </div>
+                                        <form class="sendXMPPMessage">
+                                             <div class="form-group">
+                                                  <ul class="chat-toolbar no-text-select">
+                                                       <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
+                                                       <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
+                                                       <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
+                                                  </ul>
+                                             </div>
+                                             <div class="form-group">
+                                                  <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
+                                             </div>
+                                        </form>
+                                   </div>
+                              </div>
 
-						<div class="col-md-3 col-4">
-							<div class="occupants w-100">
-								<p class="occupants-heading">Occupants:</p>
-								<form class="pure-form room-invite">
-									<div class="form-control">
-										<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
-									</div>
-									<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
-								</form>
+                              <div class="col-md-3 col-4">
+                                   <div class="occupants w-100">
+                                        <p class="occupants-heading">Occupants:</p>
+                                        <form class="pure-form room-invite">
+                                             <div class="form-control">
+                                                  <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
+                                             </div>
+                                             <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
+                                        </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>
-								</ul>
+                                        <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>
+                                        </ul>
 
-								<div class="chatroom-features">
-									<p class="occupants-heading">Features</p>
-									<ul class="features-list">
-										<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
-										<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
-										<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
-										<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
-										<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
-										<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                                        <div class="chatroom-features">
+                                             <p class="occupants-heading">Features</p>
+                                             <ul class="features-list">
+                                                  <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
+                                                  <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
+                                                  <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
+                                                  <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
+                                                  <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
+                                                  <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
+                                             </ul>
+                                        </div>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
+          </div>
 
-		<div id="minimized-chats">
-			<a id="toggle-minimized-chats" href="#">Minimized
-				<span id="minimized-count">(0)</span>
-				<span class="badge badge-light">322</span>
-			</a>
-			<div class="flyout minimized-chats-flyout">
-				<div class="chat-head chat-head-chatroom d-flex">
-					<span class="badge badge-light">3</span>
-					<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-				<div class="chat-head chat-head-chatbox d-flex">
-					<span class="badge badge-light">42</span>
-					<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-				<div class="chat-head chat-head-chatroom d-flex">
-					<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-				<div class="chat-head chat-head-chatbox d-flex">
-					<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-				<div class="chat-head chat-head-chatbox d-flex">
-					<span class="badge badge-light">842</span>
-					<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-				<div class="chat-head chat-head-chatbox d-flex">
-					<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
-					<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-				</div>
-			</div>
-		</div>
-	</div>
+          <div id="minimized-chats">
+               <a id="toggle-minimized-chats" href="#">Minimized
+                    <span id="minimized-count">(0)</span>
+                    <span class="badge badge-light">322</span>
+               </a>
+               <div class="flyout minimized-chats-flyout">
+                    <div class="chat-head chat-head-chatroom d-flex">
+                         <span class="badge badge-light">3</span>
+                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+                    <div class="chat-head chat-head-chatbox d-flex">
+                         <span class="badge badge-light">42</span>
+                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+                    <div class="chat-head chat-head-chatroom d-flex">
+                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+                    <div class="chat-head chat-head-chatbox d-flex">
+                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+                    <div class="chat-head chat-head-chatbox d-flex">
+                         <span class="badge badge-light">842</span>
+                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+                    <div class="chat-head chat-head-chatbox d-flex">
+                         <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
+                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    </div>
+               </div>
+          </div>
+     </div>
 
-	<!-- Contact Profile Modal -->
-	<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				</div>
-			</div>
-		</div>
-	</div>
+     <!-- Contact Profile Modal -->
+     <div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+               <div class="modal-content">
+                    <div class="modal-header">
+                         <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
+                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                              <span aria-hidden="true">&times;</span>
+                         </button>
+                    </div>
+                    <div class="modal-body">
+                    </div>
+                    <div class="modal-footer">
+                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    </div>
+               </div>
+          </div>
+     </div>
 
     <div class="modals"></div>
 </body>

mockup/css/mockup.css

@@ -1,112 +0,0 @@
-@media screen and (max-width: 767px) {
-  #conversejs.fullscreen.chatbox > .chatbox,
-  #conversejs.fullscreen.chatbox .chatroom {
-    width: calc(100% - 50px);
-  }
-  #conversejs.fullscreen.chatbox.sidebar-open #controlbox #users {
-    display: block;
-  }
-  #conversejs.fullscreen.chatbox.sidebar-open > .chatbox:not(#controlbox),
-  #conversejs.fullscreen.chatbox.sidebar-open .chatroom {
-    display: none;
-  }
-  #conversejs.fullscreen.chatbox .chatbox .box-flyout {
-    left: 0;
-  }
-  #conversejs.login {
-    margin: 1em;
-  }
-  #conversejs.login #controlbox {
-    margin: 0;
-  }
-  #conversejs.login #controlbox .controlbox-pane {
-    font-size: 1.15em;
-  }
-  #conversejs.login #controlbox.chatbox {
-    width: 100%;
-  }
-  #conversejs.login .chatbox .box-flyout {
-    height: calc(100vh - 20px);
-    width: 100%;
-    bottom: 0;
-    left: 0;
-  }
-  #conversejs.sidebar-open #controlbox #users {
-    display: block;
-  }
-  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
-    display: none;
-  }
-  #conversejs #controlbox #users {
-    position: absolute;
-    top: 0;
-    left: 50px;
-    display: none;
-    width: calc(100% - 50px);
-  }
-  #conversejs #controlbox .box-flyout {
-    width: 100%;
-    left: 0;
-  }
-  #conversejs #controlbox .sidebar {
-    display: block;
-  }
-  #conversejs #users.controlbox-pane {
-    height: 100vh;
-  }
-  #conversejs #login-dialog .pure-form.converse-form {
-    padding: 3em 2em 3em;
-  }
-  #conversejs > .chatbox {
-    width: calc(100% - 50px);
-  }
-  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-    white-space: normal;
-  }
-  #conversejs .chatbox .box-flyout {
-    left: 50px;
-    bottom: 0;
-    width: calc(100% - 50px);
-    height: 100vh;
-    box-shadow: none;
-  }
-  #conversejs .chatbox .box-flyout .chatroom-body .chat-area {
-    height: calc(100vh - 55px);
-  }
-}
-@media screen and (min-width: 576px) {
-  #conversejs .offset-sm-2 {
-    margin-left: 16.666667%;
-  }
-}
-@media screen and (min-width: 768px) {
-  #conversejs .offset-md-2 {
-    margin-left: 16.666667%;
-  }
-  #conversejs .offset-md-3 {
-    margin-left: 25%;
-  }
-}
-@media screen and (min-width: 992px) {
-  #conversejs .offset-lg-2 {
-    margin-left: 16.666667%;
-  }
-  #conversejs .offset-lg-3 {
-    margin-left: 25%;
-  }
-}
-@media screen and (min-width: 1200px) {
-  #conversejs .offset-xl-2 {
-    margin-left: 16.666667%;
-  }
-}
-@media screen and (max-height: 450px) {
-  #conversejs {
-    left: 0;
-  }
-}
-@media screen and (max-width: 480px) {
-  #conversejs {
-    width: auto;
-  }
-}

mockup/fullscreen-login.html

@@ -7,81 +7,80 @@
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
 <body>
-	<div class="container converse-bg">
-		<h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
-	</div>
+     <div class="container converse-bg">
+          <h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
+     </div>
 
-	<div class="container-fluid">
-		<div id="conversejs" class="fullscreen login">
-			<div id="controlbox" class="chatbox">
-				<div class="flyout box-flyout">
-					<div class="controlbox-panes">
-						<div id="login-dialog" class="controlbox-pane">
-							<div class="row">
-								<div class="brand-heading-container col-12">
-									<h1 class="brand-heading">
-										<i class="icon-conversejs"></i> inVerse</h1>
-									<p>
-										<a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
-								</div>
-							</div>
+     <div class="container-fluid">
+          <div id="conversejs" class="fullscreen">
+               <div id="controlbox" class="chatbox">
+                    <div class="flyout box-flyout">
+                         <div class="controlbox-panes">
+                              <div id="login-dialog" class="controlbox-pane">
+                                   <div class="row">
+                                        <div class="brand-heading-container col-12">
+                                             <h1 class="brand-heading">
+                                                  <i class="icon-conversejs"></i> inVerse</h1>
+                                             <p>
+                                                  <a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+                                        </div>
+                                   </div>
 
-							<div class="row">
-								<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-									<form id="converse-login" class="pure-form converse-form">
-										<div class="form-group">
-											<label for="jid">XMPP Username:</label>
-											<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
-										</div>
-										<div class="form-group">
-											<label for="password">Password:</label>
-											<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-										</div>
+                                   <div class="row">
+                                        <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
+                                             <form id="converse-login" class="pure-form converse-form">
+                                                  <div class="form-group">
+                                                       <label for="jid">XMPP Username:</label>
+                                                       <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                                  </div>
+                                                  <div class="form-group">
+                                                       <label for="password">Password:</label>
+                                                       <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                                  </div>
                                         <fieldset class="buttons">
                                             <p><input class="btn btn-primary" type="submit" value="Log In"></p>
                                             <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
                                         </fieldset>
-									</form>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                                             </form>
+                                        </div>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
+          </div>
 
-		<!-- Register Modal -->
-		<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
-			<div class="modal-dialog" role="document">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title" id="registerModalLabel">Register</h5>
-						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-							<span aria-hidden="true">&times;</span>
-						</button>
-					</div>
-					<div class="modal-body">
-						<form id="converse-register">
-							<div class="form-group">
-								<label for="domain">Your XMPP provider's domain name:</label>
-								<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
-							</div>
-							<p>Tip: A list of public XMPP providers is available
-								<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
-							<input class="btn btn-primary" type="submit" value="Fetch registration form">
-						</form>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+          <!-- Register Modal -->
+          <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
+               <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                         <div class="modal-header">
+                              <h5 class="modal-title" id="registerModalLabel">Register</h5>
+                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                   <span aria-hidden="true">&times;</span>
+                              </button>
+                         </div>
+                         <div class="modal-body">
+                              <form id="converse-register">
+                                   <div class="form-group">
+                                        <label for="domain">Your XMPP provider's domain name:</label>
+                                        <input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
+                                   </div>
+                                   <p>Tip: A list of public XMPP providers is available
+                                        <a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
+                                   <input class="btn btn-primary" type="submit" value="Fetch registration form">
+                              </form>
+                         </div>
+                         <div class="modal-footer">
+                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
 </body>
 
 </html>

mockup/head.html

@@ -1,17 +0,0 @@
-<!doctype html>
-<html class="no-js" lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>inVerse Mockups</title>
-	<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
-	<link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
-	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
-		crossorigin="anonymous"></script>
-	<script src="js/bootstrap.bundle.min.js"></script>
-	<script>
-		$(function () {
-			$('[data-toggle="popover"]').popover()
-		});
-	</script>

mockup/less/mockup.less

@@ -1,192 +0,0 @@
-// overrides for the base css of converse/inverse
-
-@link-color: #007bff;
-@bg-color: #578ea9;
-
-body {
-	.brand-heading {
-		margin: auto;
-        font-size: 6em;
-        font-weight: bold;
-		.icon-conversejs {
-            font-size: 0.88em;
-        }
-	}
-}
-
-.converse-bg {
-	position:relative; height:100vh; text-align:center; color:#fff;
-	.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
-}
-
-#conversejs {
-
-	&.fullscreen {
-		width:100%; height:100%; right:0; bottom:0; color:@text-color;
-		&.login {
-			width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
-			#controlbox #login-dialog {
-				height:100%; border-radius:5px;
-				.brand-heading { font-size:6em; }
-				.converse-form { margin:0; padding:3em 2em 3em; }
-			}
-		}
-		&.chatbox {
-			margin:0;
-			.chatbox { width:100%; }
-			.chatbox .box-flyout { width:100%; height:100vh; }
-		}
-		#controlbox {
-			width:100%; margin-right:0;
-			.box-flyout { width:100%; }
-			.controlbox-pane { height:100vh; border-radius:0; }
-		}
-		.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
-	}
-
-	.chatbox {
-		.chat-content { padding:0.5em; }
-		.chat-body {
-			background:#fff;
-			.chat-message {
-				margin:0.3em;
-				canvas { vertical-align:middle; background:#777; }
-				.chat-msg-me canvas { background:@bg-color; }
-				.chat-msg-them canvas { background:#e77051; }
-				.chat-msg-author { float:none; }
-			}
-		}
-		form.sendXMPPMessage {
-			textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
-			.chat-toolbar {
-				a, li.toggle-toolbar-menu { color:@text-color; }
-			}
-		}
-	}
-
-	.chatroom .box-flyout .chatroom-body {
-		.chat-area {
-			min-width:100%; height:395px;
-			.chat-content { padding:0.5em; }
-		}
-		.chat-info { color:#fff; line-height:normal; }
-		.occupants {
-			.chatroom-features { bottom:0; width:auto; }
-			ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
-		}
-	}
-
-	#users {
-		position:relative;
-		#chatrooms {
-			padding-bottom:5px; border-bottom:1px solid #aaa;
-			.rooms-list-container dl.rooms-list {
-				.available-chatroom, .open-chatroom { padding:0.1em 0; }
-				a + a { line-height:22px; }
-			}
-		}
-		#chatrooms, #contacts { margin-top:0.75em; }
-		.userinfo {
-			padding-bottom:10px; border-bottom:1px solid #aaa;
-			.username { margin-left:5px; }
-			.d-flex { margin-bottom:2px; }
-		}
-		&.controlbox-pane { height:450px; text-align:left; }
-		.chatbox-btn { margin:0; color:@link-color; }
-	}
-}
-
-@media screen and (max-width: 575px) {
-	body {
-		.brand-heading { font-size:3.75em; }
-	}
-
-	#conversejs {
-		&.fullscreen.login, & {
-			#controlbox #login-dialog .brand-heading { font-size:3.75em; }
-		}
-		.chatbox .chat-body { border-radius:7px; }
-		.flyout { border-radius:4px; }
-	}
-}
-
-@media screen and (max-width: 767px) {
-	#conversejs {
-		left:0; margin:0;
-		&.fullscreen {
-			&.chatbox {
-				> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
-				&.sidebar-open {
-					#controlbox #users { display:block; }
-					> .chatbox:not(#controlbox), .chatroom { display:none; }
-				}
-				.chatbox .box-flyout { left:0; }
-			}
-		}
-		&.login {
-			margin:10px;
-			#controlbox {
-				margin:0;
-				.controlbox-pane { font-size:1.15em; }
-				&.chatbox { width:100%; }
-			}
-			.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
-		}
-		&.sidebar-open {
-			#controlbox #users { display:block; }
-			> .chatbox:not(#controlbox) { display:none; }
-		}
-
-		#controlbox {
-			#users {
-				position:absolute; top:0; left:50px; display:none;
-				width:calc(~"100% - 50px");
-			}
-			.box-flyout { width:100%; left:0; }
-			.sidebar { display:block; }
-		}
-
-		#users.controlbox-pane { height:100vh; }
-		#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
-		> .chatbox { width:calc(~"100% - 50px"); }
-		.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
-		.chatbox .box-flyout {
-			left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
-			.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
-		}
-	}
-}
-
-@media screen and (min-width: 576px) {
-	#conversejs {
-		.offset-sm-2 { margin-left: 16.666667%; }
-	}
-}
-
-@media screen and (min-width: 768px) {
-	#conversejs {
-		.offset-md-2 { margin-left: 16.666667%; }
-		.offset-md-3 { margin-left: 25%; }
-	}
-}
-
-@media screen and (min-width: 992px) {
-	#conversejs {
-		.offset-lg-2 { margin-left: 16.666667%; }
-		.offset-lg-3 { margin-left: 25%; }
-	}
-}
-
-@media screen and (min-width: 1200px) {
-	#conversejs {
-		.offset-xl-2 { margin-left: 16.666667%; }
-	}
-}
-
-@media screen and (max-height: 450px) {
-	#conversejs { left:0; }
-}
-
-@media screen and (max-width: 480px) {
-	#conversejs { width:auto; }
-}

mockup/overlayed-login.html

@@ -15,7 +15,7 @@
 		<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
 	</div>
 
-	<div id="conversejs" class="login">
+	<div id="conversejs">
 		<div id="controlbox" class="chatbox">
 			<div class="flyout box-flyout">
 				<div class="controlbox-panes">

sass/_chatbox.scss

@@ -235,7 +235,7 @@
                 position: relative;
             }
         }
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             -moz-background-clip: padding;
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
@@ -253,6 +253,7 @@
             @media screen and (max-width: $mobile-portrait-length) {
                 width: 100%;
             }
+
             .chat-textarea {
                 border-top-left-radius: 0;
                 border-top-right-radius: 0;
@@ -263,6 +264,7 @@
                 border: none;
                 resize: none;
             }
+
             .send-button {
                 position: absolute;
                 left: $send-button-margin;
@@ -438,3 +440,33 @@
         }
     }
 }
+
+@media screen and (max-width: 767px) {
+    #conversejs  {
+        #login-dialog {
+            .pure-form.converse-form {
+                padding: 3em 2em 3em;
+            }
+        }
+    }
+
+    > .chatbox {
+        width: calc(100% - 50px);
+    }
+    .chatbox {
+        .chat-body {
+            .chat-message {
+                .chat-msg-author {
+                    white-space: normal;
+                }
+            }
+        }
+        .box-flyout {
+            left: 50px;
+            bottom: 0;
+            width: calc(100% - 50px);
+            height: 100vh;
+            box-shadow: none;
+        }
+    }
+}

sass/_chatrooms.scss

@@ -68,6 +68,8 @@
                 background-color: white;
                 border-top: 0;
                 width: 100%;
+                overflow: hidden;
+
                 .chat-info {
                     color: white;
                     line-height: normal;
@@ -97,10 +99,11 @@
                 }
                 .chat-area {
                     word-wrap: break-word; 
-                    height: 100%;
                     width: 100%;
                     float: left;
                     min-width: $chat-width;
+                    height: calc(100% - 95px);
+
                     .new-msgs-indicator {
                         background-color: $chatroom-head-color;
                         max-width: 70%;
@@ -243,7 +246,7 @@
             }
         }
 
-        form.sendXMPPMessage {
+        .sendXMPPMessage {
             .chat-toolbar {
                 background-color: $chatroom-toolbar-color;
             }
@@ -264,3 +267,17 @@
         }
     }
 }
+
+@media screen and (max-width: 767px) {
+    #conversejs  {
+        .chatbox {
+            .box-flyout {
+                .chatroom-body {
+                    .chat-area {
+                        height: calc(100vh - 55px);
+                    }
+                }
+            }
+        }
+    }
+}

sass/_controlbox.scss

@@ -514,3 +514,42 @@
         }
     }
 }
+
+@media screen and (max-width: 767px) {
+    #conversejs {
+        #controlbox {
+            .box-flyout {
+                width: 100%;
+                left: 0;
+            }
+
+            .sidebar {
+                display: block;
+            }
+
+            #users {
+                position: absolute;
+                top: 0;
+                left: 50px;
+                display: none;
+                width: calc(100% - 50px);
+
+                &.controlbox-pane {
+                    height: 100vh;
+                }
+            }
+
+        }
+
+        &.sidebar-open {
+            > .chatbox:not(#controlbox) {
+                display: none;
+            }
+            #controlbox {
+                #users {
+                    display: block;
+                }
+            }
+        }
+    }
+}

sass/_core.scss

@@ -47,18 +47,18 @@ body {
         width: 100vw;
     }
 
-	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;
-	}
-	::-moz-placeholder { /* Firefox 19+ */
+     }
+     ::-moz-placeholder { /* Firefox 19+ */
         color: $subdued-color;
-	}
-	:-ms-input-placeholder { /* IE 10+ */
+     }
+     :-ms-input-placeholder { /* IE 10+ */
         color: $subdued-color;
-	}
-	:-moz-placeholder { /* Firefox 18- */
+     }
+     :-moz-placeholder { /* Firefox 18- */
         color: $subdued-color;
-	}
+     }
     ::placeholder {
         color: $subdued-color;
     }
@@ -70,7 +70,7 @@ body {
         background-color: $highlight-color;
     }
 
-	canvas {
+     canvas {
         background:#000;
         border-radius:4px;
         margin: 2px 0;
@@ -80,30 +80,30 @@ body {
         border-radius: 50%;
     }
 
-	.sidebar {
-		display: none;
+     .sidebar {
+          display: none;
         position: absolute;
         width: 50px;
         height: 100vh;
         padding: 10px 0;
-		background-color: $controlbox-head-color;
+          background-color: $controlbox-head-color;
         text-align: center;
 
-		.chatbox-btn {
-			float: none;
+          .chatbox-btn {
+               float: none;
             margin: 0;
             font-size: 1.35em;
-			&.fa-vcard {
+               &.fa-vcard {
                 margin-top: 1em;
             }
-		}
-		.bottom {
+          }
+          .bottom {
             position: absolute;
             bottom: 1em;
         }
-	}
+     }
 
-	.badge {
+     .badge {
         padding: 0.25em 0.4em;
         line-height: 1;
     }
@@ -132,33 +132,33 @@ body {
     }
 
     @keyframes colorchange-chatmessage {
-		0%   {background-color: rgba(141, 216, 174, 1);}
-		25%  {background-color: rgba(141, 216, 174, 0.75);}
-		50%  {background-color: rgba(141, 216, 174, 0.5);}
-		75%  {background-color: rgba(141, 216, 174, 0.25);}
-		100% {background-color: transparent;}
+          0%   {background-color: rgba(141, 216, 174, 1);}
+          25%  {background-color: rgba(141, 216, 174, 0.75);}
+          50%  {background-color: rgba(141, 216, 174, 0.5);}
+          75%  {background-color: rgba(141, 216, 174, 0.25);}
+          100% {background-color: transparent;}
     }
     @-webkit-keyframes colorchange-chatmessage {
-		0%   {background-color: rgba(141, 216, 174, 1);}
-		25%  {background-color: rgba(141, 216, 174, 0.75);}
-		50%  {background-color: rgba(141, 216, 174, 0.5);}
-		75%  {background-color: rgba(141, 216, 174, 0.25);}
-		100% {background-color: transparent;}
+          0%   {background-color: rgba(141, 216, 174, 1);}
+          25%  {background-color: rgba(141, 216, 174, 0.75);}
+          50%  {background-color: rgba(141, 216, 174, 0.5);}
+          75%  {background-color: rgba(141, 216, 174, 0.25);}
+          100% {background-color: transparent;}
     }
 
     @keyframes colorchange-chatmessage-muc {
-		0%   {background-color: rgba(255, 181, 162, 1);}
-		25%  {background-color: rgba(255, 181, 162, 0.75);}
-		50%  {background-color: rgba(255, 181, 162, 0.5);}
-		75%  {background-color: rgba(255, 181, 162, 0.25);}
-		100% {background-color: transparent;}
+          0%   {background-color: rgba(255, 181, 162, 1);}
+          25%  {background-color: rgba(255, 181, 162, 0.75);}
+          50%  {background-color: rgba(255, 181, 162, 0.5);}
+          75%  {background-color: rgba(255, 181, 162, 0.25);}
+          100% {background-color: transparent;}
     }
     @-webkit-keyframes colorchange-chatmessage-muc {
-		0%   {background-color: rgba(255, 181, 162, 1);}
-		25%  {background-color: rgba(255, 181, 162, 0.75);}
-		50%  {background-color: rgba(255, 181, 162, 0.5);}
-		75%  {background-color: rgba(255, 181, 162, 0.25);}
-		100% {background-color: transparent;}
+          0%   {background-color: rgba(255, 181, 162, 1);}
+          25%  {background-color: rgba(255, 181, 162, 0.75);}
+          50%  {background-color: rgba(255, 181, 162, 0.5);}
+          75%  {background-color: rgba(255, 181, 162, 0.25);}
+          100% {background-color: transparent;}
     }
 
 
@@ -402,12 +402,40 @@ body {
     }
 }
 
-@media screen and (max-width: 767px) {
-    #conversejs {
-        &.login {
-            margin: 0;
-            width: 100%;
-            height: 100%;
-        }
-    }
+
+@media screen and (min-width: 576px) {
+  #conversejs .offset-sm-2 {
+    margin-left: 16.666667%;
+  }
+}
+@media screen and (min-width: 768px) {
+  #conversejs .offset-md-2 {
+    margin-left: 16.666667%;
+  }
+  #conversejs .offset-md-3 {
+    margin-left: 25%;
+  }
+}
+@media screen and (min-width: 992px) {
+  #conversejs .offset-lg-2 {
+    margin-left: 16.666667%;
+  }
+  #conversejs .offset-lg-3 {
+    margin-left: 25%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  #conversejs .offset-xl-2 {
+    margin-left: 16.666667%;
+  }
+}
+@media screen and (max-height: 450px) {
+  #conversejs {
+    left: 0;
+  }
+}
+@media screen and (max-width: 480px) {
+  #conversejs {
+    width: auto;
+  }
 }

sass/inverse/_core.scss

@@ -44,12 +44,6 @@ body {
     left: 0;
     right: 0;
 
-    &.login {
-        width: calc(100vw - 1em);
-        height: calc(100vh - 1em);
-        margin: 0.5em;
-    }
-
     form {
         &.pure-form.converse-form {
             margin: 1em;
@@ -77,11 +71,9 @@ body {
 
 @media screen and (max-width: 767px) {
     #conversejs.fullscreen {
-        &.login {
-            background-color: white;
-            margin: 0;
-            width: 100%;
-            height: 100%;
-        }
+        background-color: white;
+        margin: 0;
+        width: 100%;
+        height: 100%;
     }
 }