Move Scss for chat rooms into separate file.

css/converse.css

@@ -649,32 +649,6 @@
   #conversejs a.close-chatbox-button:active {
     position: relative;
     top: 1px; }
-  #conversejs .chatroom-form-container {
-    height: 100%;
-    color: #6C4C44;
-    overflow-y: auto;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px; }
-  #conversejs .chatroom-form {
-    padding: 1em; }
-    #conversejs .chatroom-form .instructions {
-      color: gray;
-      font-size: 95%; }
-    #conversejs .chatroom-form input {
-      width: 100%;
-      padding: 5px;
-      text-align: center; }
-    #conversejs .chatroom-form legend {
-      font-size: 16px;
-      font-weight: bold;
-      margin: 10px 0 15px 0; }
-    #conversejs .chatroom-form label {
-      height: 30px;
-      font-weight: bold;
-      display: block;
-      clear: both; }
-      #conversejs .chatroom-form label label input, #conversejs .chatroom-form label label select {
-        float: right; }
   #conversejs .requesting-xmpp-contact .request-actions {
     margin-left: 0.5em;
     float: right; }
@@ -873,78 +847,6 @@
       cursor: pointer;
       display: block;
       padding: 4px 7px 0 5px; }
-  #conversejs .chatroom {
-    width: 300px; }
-    @media screen and (max-width: 480px) {
-      #conversejs .chatroom {
-        width: 100%; }
-        #conversejs .chatroom .box-flyout {
-          min-width: 100%;
-          width: 100%; } }
-    #conversejs .chatroom .box-flyout {
-      min-width: 300px;
-      width: 300px; }
-      #conversejs .chatroom .box-flyout .chatroom-body {
-        height: 289px;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-        height: -webkit-calc(100% - 44px);
-        height: calc(100% - 44px);
-        background-color: white;
-        border-top: 0;
-        display: table;
-        table-layout: fixed;
-        width: 100%; }
-        #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
-          word-wrap: break-word;
-          display: table-cell;
-          height: 100%;
-          min-width: 200px; }
-          #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
-            padding: 0.5em 0.5em 0 0.5em; }
-        #conversejs .chatroom .box-flyout .chatroom-body .participants {
-          display: table-cell;
-          vertical-align: top;
-          background-color: white;
-          overflow-y: auto;
-          overflow-x: hidden;
-          border-left: 1px solid #AAA;
-          border-bottom-right-radius: 4px;
-          width: 100px;
-          height: 100%; }
-          #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden {
-            display: none; }
-          #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list {
-            list-style: none; }
-            #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li {
-              cursor: default;
-              display: block;
-              font-size: 12px;
-              font-weight: bold;
-              overflow: hidden;
-              padding: 2px 5px;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              width: 100px; }
-              #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
-                color: #8f2831; }
-          #conversejs .chatroom .box-flyout .chatroom-body .participants label {
-            font-size: 12px;
-            font-style: italic;
-            margin: 5px;
-            display: block; }
-    #conversejs .chatroom label {
-      margin-left: 2px;
-      font-size: 12px; }
-    #conversejs .chatroom .chat-textarea {
-      border-bottom-right-radius: 0; }
-    #conversejs .chatroom .invited-contact {
-      margin: -1px 0 0 -1px;
-      width: 100px;
-      border: 1px solid #999; }
-    #conversejs .chatroom .invited-contact.tt-input {
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
-  #conversejs .chatroom-form,
   #conversejs .controlbox-pane {
     background-color: white;
     border-bottom-left-radius: 4px;
@@ -1315,4 +1217,115 @@
       top: 0;
       left: 0; }
 
+#conversejs .chatroom {
+  width: 300px; }
+  @media screen and (max-width: 480px) {
+    #conversejs .chatroom {
+      width: 100%; }
+      #conversejs .chatroom .box-flyout {
+        min-width: 100%;
+        width: 100%; } }
+  #conversejs .chatroom .box-flyout {
+    min-width: 300px;
+    width: 300px; }
+    #conversejs .chatroom .box-flyout .chatroom-body {
+      height: 289px;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      height: -webkit-calc(100% - 44px);
+      height: calc(100% - 44px);
+      background-color: white;
+      border-top: 0;
+      display: table;
+      table-layout: fixed;
+      width: 100%; }
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
+        word-wrap: break-word;
+        display: table-cell;
+        height: 100%;
+        min-width: 200px; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+          padding: 0.5em 0.5em 0 0.5em; }
+      #conversejs .chatroom .box-flyout .chatroom-body .participants {
+        display: table-cell;
+        vertical-align: top;
+        background-color: white;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border-left: 1px solid #AAA;
+        border-bottom-right-radius: 4px;
+        width: 100px;
+        height: 100%; }
+        #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden {
+          display: none; }
+        #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list {
+          list-style: none; }
+          #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li {
+            cursor: default;
+            display: block;
+            font-size: 12px;
+            font-weight: bold;
+            overflow: hidden;
+            padding: 2px 5px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100px; }
+            #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
+              color: #8f2831; }
+      #conversejs .chatroom .box-flyout .chatroom-body label {
+        display: block;
+        font-size: 12px;
+        font-style: italic;
+        margin-left: 2px;
+        margin: 0.5em; }
+      #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+        background-color: white;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border: 0;
+        color: #6C4C44;
+        font-size: 14px;
+        height: 289px;
+        height: -webkit-calc(100% - 44px);
+        height: calc(100% - 44px);
+        overflow-y: auto;
+        position: absolute;
+        text-align: center;
+        width: 100%; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
+          padding: 1em; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form .instructions {
+            color: gray;
+            font-size: 95%; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input {
+            width: 100%;
+            padding: 0.5em;
+            text-align: left; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=checkbox] {
+            width: auto;
+            margin: auto; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=button] {
+            width: 50%;
+            margin-top: 1em;
+            text-align: center; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form legend {
+            font-size: 16px;
+            font-weight: bold;
+            margin: 10px 0 15px 0; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label {
+            font-weight: bold;
+            display: block;
+            clear: both;
+            margin-top: 1em; }
+            #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select {
+              float: right; }
+  #conversejs .chatroom .chat-textarea {
+    border-bottom-right-radius: 0; }
+  #conversejs .chatroom .invited-contact {
+    margin: -1px 0 0 -1px;
+    width: 100px;
+    border: 1px solid #999; }
+  #conversejs .chatroom .invited-contact.tt-input {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
+
 /*# sourceMappingURL=converse.css.map */

mockup/chatroom2.html

@@ -116,7 +116,7 @@
                 <p class="chatroom-topic"></p>
                 <p></p>
             </div>
-            <div class="chat-body">
+            <div class="chatroom-body">
                 <div class="chatroom-form-container">
                     <form class="chatroom-form">
                         <!-- TODO: Make this a long form that scrolls -->

sass/_chatrooms.scss

@@ -0,0 +1,137 @@
+#conversejs {
+    .chatroom {
+        width: $chatroom-width;
+        @media screen and (max-width: $mobile-landscape-length) {
+            width: $mobile-chat-width;
+            .box-flyout {
+                min-width: $mobile-chat-width;
+                width: $mobile-chat-width;
+            }
+        }
+        .box-flyout {
+            min-width: $chatroom-width;
+            width: $chatroom-width;
+            .chatroom-body {
+                height: 289px;
+                @include border-bottom-radius($chatbox-border-radius);
+                @include calc(height, '100% - #{$chat-head-height}');
+                background-color: white;
+                border-top: 0;
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+
+                .chat-area {
+                    word-wrap: break-word; 
+                    display: table-cell;
+                    height: 100%;
+                    min-width: $chat-width;
+                    .chat-content {
+                        padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
+                    }
+                }
+                .participants {
+                    display: table-cell;
+                    vertical-align: top;
+                    background-color: white;
+                    overflow-y: auto;
+                    overflow-x: hidden;
+                    border-left: 1px solid #AAA;
+                    border-bottom-right-radius: $chatbox-border-radius;
+                    width: 100px;
+                    height: 100%;
+                    &.hidden {
+                        display: none;
+                    }
+                    .participant-list {
+                        list-style: none;
+                        li {
+                            cursor: default;
+                            display: block;
+                            font-size: 12px;
+                            font-weight: bold;
+                            overflow: hidden;
+                            padding: 2px 5px;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            width: 100px;
+                            &.moderator {
+                                color: #8f2831;
+                            }
+                        }
+                    }
+                }
+                label {
+                    display: block;
+                    font-size: 12px;
+                    font-style: italic;
+                    margin-left: 2px;
+                    margin: 0.5em;
+                }
+                .chatroom-form-container {
+                    background-color: white;
+                    border-bottom-left-radius: $chatbox-border-radius;
+                    border-bottom-right-radius: $chatbox-border-radius;
+                    border: 0;
+                    color: $text-color;
+                    font-size: $font-size;
+                    height: 289px;
+                    @include calc(height, '100% - #{$chat-head-height}');
+                    overflow-y: auto;
+                    position: absolute;
+                    text-align: center;
+                    width: 100%;
+
+                    .chatroom-form {
+                        padding: 1em;
+
+                        .instructions {
+                            color: gray;
+                            font-size: 95%;
+                        }
+                        input {
+                            width: 100%;
+                            padding: 0.5em;
+                            text-align: left;
+                        }
+                        input[type=checkbox] {
+                            width: auto;
+                            margin: auto;
+                        }
+                        input[type=submit], input[type=button] {
+                            width: 50%;
+                            margin-top: 1em;
+                            text-align: center;
+                        }
+                        legend {
+                            font-size: $legend-font-size;
+                            font-weight: bold;
+                            margin: 10px 0 15px 0;
+                        }
+                        label {
+                            font-weight: bold;
+                            display: block;
+                            clear: both;
+                            margin-top: 1em;
+
+                            label input, label select {
+                                float: right;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .chat-textarea {
+            border-bottom-right-radius: 0;
+        }
+        .invited-contact {
+            margin: -1px 0 0 -1px;
+            width: 100px;
+            border: 1px solid #999;
+        }
+        .invited-contact.tt-input {
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
+        }
+    }
+}

sass/_core.scss

@@ -31,7 +31,6 @@
 }
 
 #conversejs {
-  @import "variables";
   ::selection {
     background-color: $highlight-color;
   }
@@ -678,42 +677,6 @@
     top: 1px;
   }
 
-  .chatroom-form-container {
-    height: 100%;
-    color: $text-color;
-    overflow-y: auto;
-    border-bottom-right-radius: $chatbox-border-radius;
-    border-bottom-left-radius: $chatbox-border-radius;
-  }
-
-  .chatroom-form {
-    padding: 1em;
-    .instructions {
-      color: gray;
-      font-size: 95%;
-    }
-    input {
-      width: 100%;
-      padding: 5px;
-      text-align: center;
-    }
-    legend {
-      font-size: $legend-font-size;
-      font-weight: bold;
-      margin: 10px 0 15px 0;
-    }
-    label {
-      height: 30px;
-      font-weight: bold;
-      display: block;
-      clear: both;
-
-      label input, label select {
-        float: right;
-      }
-    }
-  }
-
   .requesting-xmpp-contact .request-actions {
     margin-left: 0.5em;
     float: right;
@@ -985,94 +948,6 @@
     }
   }
 
-    .chatroom {
-        width: $chatroom-width;
-        @media screen and (max-width: $mobile-landscape-length) {
-            width: $mobile-chat-width;
-            .box-flyout {
-                min-width: $mobile-chat-width;
-                width: $mobile-chat-width;
-            }
-        }
-        .box-flyout {
-            min-width: $chatroom-width;
-            width: $chatroom-width;
-            .chatroom-body {
-                height: 289px;
-                @include border-bottom-radius($chatbox-border-radius);
-                @include calc(height, '100% - #{$chat-head-height}');
-                background-color: white;
-                border-top: 0;
-                display: table;
-                table-layout: fixed;
-                width: 100%;
-                .chat-area {
-                    word-wrap: break-word; 
-                    display: table-cell;
-                    height: 100%;
-                    min-width: $chat-width;
-                    .chat-content {
-                        padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
-                    }
-                }
-                .participants {
-                    display: table-cell;
-                    vertical-align: top;
-                    background-color: white;
-                    overflow-y: auto;
-                    overflow-x: hidden;
-                    border-left: 1px solid #AAA;
-                    border-bottom-right-radius: $chatbox-border-radius;
-                    width: 100px;
-                    height: 100%;
-                    &.hidden {
-                        display: none;
-                    }
-                    .participant-list {
-                        list-style: none;
-                        li {
-                            cursor: default;
-                            display: block;
-                            font-size: 12px;
-                            font-weight: bold;
-                            overflow: hidden;
-                            padding: 2px 5px;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            width: 100px;
-                            &.moderator {
-                                color: #8f2831;
-                            }
-                        }
-                    }
-                    label {
-                        font-size: 12px;
-                        font-style: italic;
-                        margin: 5px;
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        label {
-            margin-left: 2px;
-            font-size: 12px;
-        }
-        .chat-textarea {
-            border-bottom-right-radius: 0;
-        }
-        .invited-contact {
-            margin: -1px 0 0 -1px;
-            width: 100px;
-            border: 1px solid #999;
-        }
-        .invited-contact.tt-input {
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
-        }
-    }
-
-    .chatroom-form,
     .controlbox-pane {
         background-color: white;
         border-bottom-left-radius: $chatbox-border-radius;

sass/converse.scss

@@ -9,3 +9,4 @@
 @import "bourbon";
 @import "variables";
 @import "core";
+@import "chatrooms";