Merge inVerse into this repo

.gitignore

@@ -53,6 +53,7 @@ dist/converse-no-locales-no-otr.min.js
 dist/converse-no-otr.js
 dist/converse-no-otr.min.js
 dist/converse.min.js
+dist/inverse.min.js
 dist/converse-no-jquery.js
 dist/converse-no-jquery.min.js
 dist/converse-mobile.min.js

Makefile

@@ -1,4 +1,5 @@
 # You can set these variables from the command line.
+BOURBON_TEMPLATES = ./node_modules/bourbon/app/assets/stylesheets/ 
 BUILDDIR		= ./docs
 BUNDLE		  	?= ./.bundle/bin/bundle
 GRUNT		   	?= ./node_modules/.bin/grunt
@@ -116,18 +117,24 @@ dev: stamp-bundler stamp-npm
 ## Builds
 
 .PHONY: css
-css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css
+css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css
+
+css/inverse.css:: stamp-bundler sass
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/inverse/inverse.scss css/inverse.css
+
+css/inverse.min.css:: css/inverse.css
+	$(CLEANCSS) css/inverse.css > css/inverse.min.css
 
 css/converse-muc-embedded.css:: stamp-bundler sass
-	$(SASS) -I ./node_modules/bourbon/app/assets/stylesheets/ sass/_muc_embedded.scss css/converse-muc-embedded.css
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/_muc_embedded.scss css/converse-muc-embedded.css
 
 css/converse-muc-embedded.min.css:: stamp-bundler sass css/converse-muc-embedded.css
 	$(CLEANCSS) css/converse-muc-embedded.css > css/converse-muc-embedded.min.css
 
 css/converse.css:: stamp-bundler sass
-	$(SASS) -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse.scss css/converse.css
+	$(SASS) -I $(BOURBON_TEMPLATES) sass/converse.scss css/converse.css
 
-css/converse.min.css:: stamp-npm sass
+css/converse.min.css:: css/converse.css
 	$(CLEANCSS) css/converse.css > css/converse.min.css
 
 css/theme.min.css:: stamp-npm css/theme.css

css/inverse.css

@@ -0,0 +1,2720 @@
+/*!
+ * Converse.js (Web-based XMPP instant messaging client)
+ * http://conversejs.org
+ *
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
+ * Licensed under the Mozilla Public License
+ */
+/* 
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
+ */
+/* $font-path: "../fonticons/fonts/" !default; */
+@font-face {
+  font-family: 'Converse-js';
+  src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?wvi0ht");
+  src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+.icon-conversejs {
+  font-family: 'Converse-js';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-conversejs:before {
+  content: "\e600"; }
+
+#converse-embedded-chat .icon-address-book:before,
+#conversejs .icon-address-book:before {
+  content: "\270f"; }
+#converse-embedded-chat .icon-angry:before,
+#conversejs .icon-angry:before {
+  content: "\e03f"; }
+#converse-embedded-chat .icon-attachment:before,
+#conversejs .icon-attachment:before {
+  content: "\e032"; }
+#converse-embedded-chat .icon-away:before,
+#conversejs .icon-away:before {
+  content: "\25fb"; }
+#converse-embedded-chat .icon-blocked:before,
+#conversejs .icon-blocked:before {
+  content: "\2718"; }
+#converse-embedded-chat .icon-bold:before,
+#conversejs .icon-bold:before {
+  content: "\e04d"; }
+#converse-embedded-chat .icon-bubbles-2:before,
+#conversejs .icon-bubbles-2:before {
+  content: "\e016"; }
+#converse-embedded-chat .icon-bubbles-3:before,
+#conversejs .icon-bubbles-3:before {
+  content: "\e017"; }
+#converse-embedded-chat .icon-bubbles:before,
+#conversejs .icon-bubbles:before {
+  content: "\e015"; }
+#converse-embedded-chat .icon-camera-2:before,
+#conversejs .icon-camera-2:before {
+  content: "\2616"; }
+#converse-embedded-chat .icon-camera:before,
+#conversejs .icon-camera:before {
+  content: "\e003"; }
+#converse-embedded-chat .icon-cancel-circle:before,
+#conversejs .icon-cancel-circle:before {
+  content: "\e058"; }
+#converse-embedded-chat .icon-chat:before,
+#conversejs .icon-chat:before {
+  content: "\25fc"; }
+#converse-embedded-chat .icon-checkbox-checked:before,
+#conversejs .icon-checkbox-checked:before {
+  content: "\2611"; }
+#converse-embedded-chat .icon-checkbox-partial:before,
+#conversejs .icon-checkbox-partial:before {
+  content: "\2b28"; }
+#converse-embedded-chat .icon-checkbox-unchecked:before,
+#conversejs .icon-checkbox-unchecked:before {
+  content: "\2b27"; }
+#converse-embedded-chat .icon-checkmark:before,
+#conversejs .icon-checkmark:before {
+  content: "\2713"; }
+#converse-embedded-chat .icon-close:before,
+#conversejs .icon-close:before {
+  content: "\2715"; }
+#converse-embedded-chat .icon-closed:before,
+#conversejs .icon-closed:before {
+  content: "\25ba"; }
+#converse-embedded-chat .icon-cog:before,
+#conversejs .icon-cog:before {
+  content: "\e02f"; }
+#converse-embedded-chat .icon-cogs:before,
+#conversejs .icon-cogs:before {
+  content: "\e022"; }
+#converse-embedded-chat .icon-confused:before,
+#conversejs .icon-confused:before {
+  content: "\2368"; }
+#converse-embedded-chat .icon-cool:before,
+#conversejs .icon-cool:before {
+  content: "\e040"; }
+#converse-embedded-chat .icon-database:before,
+#conversejs .icon-database:before {
+  content: "\f1c0"; }
+#converse-embedded-chat .icon-dnd:before,
+#conversejs .icon-dnd:before {
+  content: "\e004"; }
+#converse-embedded-chat .icon-envelop:before,
+#conversejs .icon-envelop:before {
+  content: "\2709"; }
+#converse-embedded-chat .icon-evil:before,
+#conversejs .icon-evil:before {
+  content: "\261f"; }
+#converse-embedded-chat .icon-eye-blocked:before,
+#conversejs .icon-eye-blocked:before {
+  content: "\e031"; }
+#converse-embedded-chat .icon-eye:before,
+#conversejs .icon-eye:before {
+  content: "\e030"; }
+#converse-embedded-chat .icon-globe:before,
+#conversejs .icon-globe:before {
+  content: "\f0ac"; }
+#converse-embedded-chat .icon-grin:before,
+#conversejs .icon-grin:before {
+  content: "\e041"; }
+#converse-embedded-chat .icon-happy:before,
+#conversejs .icon-happy:before {
+  content: "\263b"; }
+#converse-embedded-chat .icon-headphones:before,
+#conversejs .icon-headphones:before {
+  content: "\266c"; }
+#converse-embedded-chat .icon-heart:before,
+#conversejs .icon-heart:before {
+  content: "\2764"; }
+#converse-embedded-chat .icon-hide-users:before,
+#conversejs .icon-hide-users:before {
+  content: "\e01c"; }
+#converse-embedded-chat .icon-home:before,
+#conversejs .icon-home:before {
+  content: "\e000"; }
+#converse-embedded-chat .icon-idcard-dark:before,
+#conversejs .icon-idcard-dark:before {
+  content: "\f2c2"; }
+#converse-embedded-chat .icon-idcard:before,
+#conversejs .icon-idcard:before {
+  content: "\f2c3"; }
+#converse-embedded-chat .icon-image:before,
+#conversejs .icon-image:before {
+  content: "\2b14"; }
+#converse-embedded-chat .icon-info-2:before,
+#conversejs .icon-info-2:before {
+  content: "i"; }
+#converse-embedded-chat .icon-info:before,
+#conversejs .icon-info:before {
+  content: "\2360"; }
+#converse-embedded-chat .icon-italic:before,
+#conversejs .icon-italic:before {
+  content: "\e04f"; }
+#converse-embedded-chat .icon-key-2:before,
+#conversejs .icon-key-2:before {
+  content: "\e029"; }
+#converse-embedded-chat .icon-key:before,
+#conversejs .icon-key:before {
+  content: "\e028"; }
+#converse-embedded-chat .icon-legal:before,
+#conversejs .icon-legal:before {
+  content: "\f0e3"; }
+#converse-embedded-chat .icon-lock:before,
+#conversejs .icon-lock:before {
+  content: "\e027"; }
+#converse-embedded-chat .icon-logout:before,
+#conversejs .icon-logout:before {
+  content: "\e601"; }
+#converse-embedded-chat .icon-minus:before,
+#conversejs .icon-minus:before {
+  content: "\e05a"; }
+#converse-embedded-chat .icon-music:before,
+#conversejs .icon-music:before {
+  content: "\266b"; }
+#converse-embedded-chat .icon-new-tab:before,
+#conversejs .icon-new-tab:before {
+  content: "\e053"; }
+#converse-embedded-chat .icon-newspaper:before,
+#conversejs .icon-newspaper:before {
+  content: "\e001"; }
+#converse-embedded-chat .icon-notebook:before,
+#conversejs .icon-notebook:before {
+  content: "\2710"; }
+#converse-embedded-chat .icon-notification:before,
+#conversejs .icon-notification:before {
+  content: "\e01f"; }
+#converse-embedded-chat .icon-offline:before,
+#conversejs .icon-offline:before {
+  content: "\e002"; }
+#converse-embedded-chat .icon-online:before,
+#conversejs .icon-online:before {
+  content: "\25fc"; }
+#converse-embedded-chat .icon-opened:before,
+#conversejs .icon-opened:before {
+  content: "\25bc"; }
+#converse-embedded-chat .icon-pencil:before,
+#conversejs .icon-pencil:before {
+  content: "\270e"; }
+#converse-embedded-chat .icon-phone-hang-up:before,
+#conversejs .icon-phone-hang-up:before {
+  content: "\260e"; }
+#converse-embedded-chat .icon-phone:before,
+#conversejs .icon-phone:before {
+  content: "\260f"; }
+#converse-embedded-chat .icon-play:before,
+#conversejs .icon-play:before {
+  content: "\25d9"; }
+#converse-embedded-chat .icon-plus:before,
+#conversejs .icon-plus:before {
+  content: "\271a"; }
+#converse-embedded-chat .icon-pushpin:before,
+#conversejs .icon-pushpin:before {
+  content: "\e012"; }
+#converse-embedded-chat .icon-quotes-left:before,
+#conversejs .icon-quotes-left:before {
+  content: "\e01d"; }
+#converse-embedded-chat .icon-radio-checked:before,
+#conversejs .icon-radio-checked:before {
+  content: "\2b26"; }
+#converse-embedded-chat .icon-radio-unchecked:before,
+#conversejs .icon-radio-unchecked:before {
+  content: "\2b25"; }
+#converse-embedded-chat .icon-remove:before,
+#conversejs .icon-remove:before {
+  content: "\2715"; }
+#converse-embedded-chat .icon-trash:before,
+#conversejs .icon-trash:before {
+  content: "\e02d"; }
+#converse-embedded-chat .icon-room-info:before,
+#conversejs .icon-room-info:before {
+  content: "\e059"; }
+#converse-embedded-chat .icon-sad:before,
+#conversejs .icon-sad:before {
+  content: "\2639"; }
+#converse-embedded-chat .icon-save:before,
+#conversejs .icon-save:before {
+  content: "\f0c7"; }
+#converse-embedded-chat .icon-search:before,
+#conversejs .icon-search:before {
+  content: "\e021"; }
+#converse-embedded-chat .icon-shocked:before,
+#conversejs .icon-shocked:before {
+  content: "\2364"; }
+#converse-embedded-chat .icon-show-users:before,
+#conversejs .icon-show-users:before {
+  content: "\e01e"; }
+#converse-embedded-chat .icon-smiley:before,
+#conversejs .icon-smiley:before {
+  content: "\263a"; }
+#converse-embedded-chat .icon-snowflake:before,
+#conversejs .icon-snowflake:before {
+  content: "\f2dc"; }
+#converse-embedded-chat .icon-spell-check:before,
+#conversejs .icon-spell-check:before {
+  content: "\e045"; }
+#converse-embedded-chat .icon-spinner:before,
+#conversejs .icon-spinner:before {
+  content: "\231b"; }
+#converse-embedded-chat .icon-strikethrough:before,
+#conversejs .icon-strikethrough:before {
+  content: "\e050"; }
+#converse-embedded-chat .icon-thumbs-up:before,
+#conversejs .icon-thumbs-up:before {
+  content: "\261d"; }
+#converse-embedded-chat .icon-tongue:before,
+#conversejs .icon-tongue:before {
+  content: "\e038"; }
+#converse-embedded-chat .icon-unavailable:before,
+#converse-embedded-chat .icon-underline:before,
+#conversejs .icon-unavailable:before,
+#conversejs .icon-underline:before {
+  content: "\e04e"; }
+#converse-embedded-chat .icon-unlocked:before,
+#conversejs .icon-unlocked:before {
+  content: "\e025"; }
+#converse-embedded-chat .icon-user:before,
+#conversejs .icon-user:before {
+  content: "\e01a"; }
+#converse-embedded-chat .icon-users:before,
+#conversejs .icon-users:before {
+  content: "\e01b"; }
+#converse-embedded-chat .icon-warning:before,
+#conversejs .icon-warning:before {
+  content: "\26a0"; }
+#converse-embedded-chat .icon-wink:before,
+#conversejs .icon-wink:before {
+  content: "\e03a"; }
+#converse-embedded-chat .icon-wondering:before,
+#conversejs .icon-wondering:before {
+  content: "\2369"; }
+#converse-embedded-chat .icon-wrench:before,
+#conversejs .icon-wrench:before {
+  content: "\e024"; }
+#converse-embedded-chat .icon-xa:before,
+#conversejs .icon-xa:before {
+  content: "\e602"; }
+#converse-embedded-chat .icon-youtube:before,
+#conversejs .icon-youtube:before {
+  content: "\e055"; }
+#converse-embedded-chat .icon-zoom-in:before,
+#conversejs .icon-zoom-in:before {
+  content: "\e02b"; }
+#converse-embedded-chat .icon-zoom-out:before,
+#conversejs .icon-zoom-out:before {
+  content: "\e02a"; }
+#converse-embedded-chat [data-icon]:before,
+#conversejs [data-icon]:before {
+  content: attr(data-icon);
+  font-family: 'Converse-js';
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+#converse-embedded-chat [class^="icon-"]:before, #converse-embedded-chat [class*=" icon-"]:before,
+#conversejs [class^="icon-"]:before,
+#conversejs [class*=" icon-"]:before {
+  background-position: 14px 14px;
+  background-image: none;
+  font-family: 'Converse-js';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  width: auto;
+  height: auto;
+  line-height: 1;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+#conversejs {
+  /*!
+  Pure v0.6.1-pre
+  Copyright 2014 Yahoo! Inc. All rights reserved.
+  Licensed under the BSD License.
+  https://github.com/yahoo/pure/blob/master/LICENSE.md
+  */
+  /*!
+  normalize.css v^3.0 | MIT License | git.io/normalize
+  Copyright (c) Nicolas Gallagher and Jonathan Neal
+  */
+  /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+  /**
+   * 1. Set default font family to sans-serif.
+   * 2. Prevent iOS and IE text size adjust after device orientation change,
+   *    without disabling user zoom.
+   */
+  /**
+   * Remove default margin.
+   */
+  /* HTML5 display definitions
+     ========================================================================== */
+  /**
+   * Correct `block` display not defined for any HTML5 element in IE 8/9.
+   * Correct `block` display not defined for `details` or `summary` in IE 10/11
+   * and Firefox.
+   * Correct `block` display not defined for `main` in IE 11.
+   */
+  /**
+   * 1. Correct `inline-block` display not defined in IE 8/9.
+   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+   */
+  /**
+   * Prevent modern browsers from displaying `audio` without controls.
+   * Remove excess height in iOS 5 devices.
+   */
+  /**
+   * Address `[hidden]` styling not present in IE 8/9/10.
+   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+   */
+  /* Links
+     ========================================================================== */
+  /**
+   * Remove the gray background color from active links in IE 10.
+   */
+  /**
+   * Improve readability of focused elements when they are also in an
+   * active/hover state.
+   */
+  /* Text-level semantics
+     ========================================================================== */
+  /**
+   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+   */
+  /**
+   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+   */
+  /**
+   * Address styling not present in Safari and Chrome.
+   */
+  /**
+   * Address variable `h1` font-size and margin within `section` and `article`
+   * contexts in Firefox 4+, Safari, and Chrome.
+   */
+  /**
+   * Address styling not present in IE 8/9.
+   */
+  /**
+   * Address inconsistent and variable font size in all browsers.
+   */
+  /**
+   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+   */
+  /* Embedded content
+     ========================================================================== */
+  /**
+   * Remove border when inside `a` element in IE 8/9/10.
+   */
+  /**
+   * Correct overflow not hidden in IE 9/10/11.
+   */
+  /* Grouping content
+     ========================================================================== */
+  /**
+   * Address margin not present in IE 8/9 and Safari.
+   */
+  /**
+   * Address differences between Firefox and other browsers.
+   */
+  /**
+   * Contain overflow in all browsers.
+   */
+  /**
+   * Address odd `em`-unit font size rendering in all browsers.
+   */
+  /* Forms
+     ========================================================================== */
+  /**
+   * Known limitation: by default, Chrome and Safari on OS X allow very limited
+   * styling of `select`, unless a `border` property is set.
+   */
+  /**
+   * 1. Correct color not being inherited.
+   *    Known issue: affects color of disabled elements.
+   * 2. Correct font properties not being inherited.
+   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+   */
+  /**
+   * Address `overflow` set to `hidden` in IE 8/9/10/11.
+   */
+  /**
+   * Address inconsistent `text-transform` inheritance for `button` and `select`.
+   * All other form control elements do not inherit `text-transform` values.
+   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+   * Correct `select` style inheritance in Firefox.
+   */
+  /**
+   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+   *    and `video` controls.
+   * 2. Correct inability to style clickable `input` types in iOS.
+   * 3. Improve usability and consistency of cursor style between image-type
+   *    `input` and others.
+   */
+  /**
+   * Re-set default cursor for disabled elements.
+   */
+  /**
+   * Remove inner padding and border in Firefox 4+.
+   */
+  /**
+   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+   * the UA stylesheet.
+   */
+  /**
+   * It's recommended that you don't attempt to style these elements.
+   * Firefox's implementation doesn't respect box-sizing, padding, or width.
+   *
+   * 1. Address box sizing set to `content-box` in IE 8/9/10.
+   * 2. Remove excess padding in IE 8/9/10.
+   */
+  /**
+   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+   * `font-size` values of the `input`, it causes the cursor style of the
+   * decrement button to change from `default` to `text`.
+   */
+  /**
+   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+   */
+  /**
+   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+   * Safari (but not Chrome) clips the cancel button when the search input has
+   * padding (and `textfield` appearance).
+   */
+  /**
+   * Define consistent border, margin, and padding.
+   */
+  /**
+   * 1. Correct `color` not being inherited in IE 8/9/10/11.
+   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+   */
+  /**
+   * Remove default vertical scrollbar in IE 8/9/10/11.
+   */
+  /**
+   * Don't inherit the `font-weight` (applied by a rule above).
+   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+   */
+  /* Tables
+     ========================================================================== */
+  /**
+   * Remove most spacing between table cells.
+   */
+  /*csslint important:false*/
+  /* ==========================================================================
+     Pure Base Extras
+     ========================================================================== */
+  /**
+   * Extra rules that Pure adds on top of Normalize.css
+   */
+  /**
+   * Always hide an element when it has the `hidden` HTML attribute.
+   */
+  /**
+   * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
+   * aspect ratio.
+   */
+  /*!
+  Pure v0.6.1-pre
+  Copyright 2014 Yahoo! Inc. All rights reserved.
+  Licensed under the BSD License.
+  https://github.com/yahoo/pure/blob/master/LICENSE.md
+  */
+  /*csslint box-model:false*/
+  /*
+  Box-model set to false because we're setting a height on select elements, which
+  also have border and padding. This is done because some browsers don't render
+  the padding. We explicitly set the box-model for select elements to border-box,
+  so we can ignore the csslint warning.
+  */
+  /*
+  Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+  since IE8 won't execute CSS that contains a CSS3 selector.
+  */
+  /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
+  /* May be able to remove this tweak as color inputs become more standardized across browsers. */
+  /*
+  Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+  since IE8 won't execute CSS that contains a CSS3 selector.
+  */
+  /*
+  Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+  since IE8 won't execute CSS that contains a CSS3 selector.
+  */
+  /*
+  Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
+  since IE8 won't execute CSS that contains a CSS3 selector.
+  */
+  /* Aligned Forms */
+  /* Rounded Inputs */
+  /* Grouped Inputs */
+  /* Inline help for forms */
+  /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
+  /* Block help for forms */
+  /*!
+  Pure v0.6.1-pre
+  Copyright 2014 Yahoo! Inc. All rights reserved.
+  Licensed under the BSD License.
+  https://github.com/yahoo/pure/blob/master/LICENSE.md
+  */
+  /* Firefox: Get rid of the inner focus border */
+  /*csslint outline-none:false*/
+  /* Firefox: Get rid of the inner focus border */
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+  #conversejs html {
+    font-family: sans-serif;
+    /* 1 */
+    -ms-text-size-adjust: 100%;
+    /* 2 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */ }
+  #conversejs body {
+    margin: 0; }
+  #conversejs article,
+  #conversejs aside,
+  #conversejs details,
+  #conversejs figcaption,
+  #conversejs figure,
+  #conversejs footer,
+  #conversejs header,
+  #conversejs hgroup,
+  #conversejs main,
+  #conversejs menu,
+  #conversejs nav,
+  #conversejs section,
+  #conversejs summary {
+    display: block; }
+  #conversejs audio,
+  #conversejs canvas,
+  #conversejs progress,
+  #conversejs video {
+    display: inline-block;
+    /* 1 */
+    vertical-align: baseline;
+    /* 2 */ }
+  #conversejs audio:not([controls]) {
+    display: none;
+    height: 0; }
+  #conversejs [hidden],
+  #conversejs template {
+    display: none; }
+  #conversejs a {
+    background-color: transparent; }
+  #conversejs a:active,
+  #conversejs a:hover {
+    outline: 0; }
+  #conversejs abbr[title] {
+    border-bottom: 1px dotted; }
+  #conversejs b,
+  #conversejs strong {
+    font-weight: bold; }
+  #conversejs dfn {
+    font-style: italic; }
+  #conversejs h1 {
+    font-size: 2em;
+    margin: 0.67em 0; }
+  #conversejs mark {
+    background: #ff0;
+    color: #000; }
+  #conversejs small {
+    font-size: 80%; }
+  #conversejs sub,
+  #conversejs sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline; }
+  #conversejs sup {
+    top: -0.5em; }
+  #conversejs sub {
+    bottom: -0.25em; }
+  #conversejs img {
+    border: 0; }
+  #conversejs svg:not(:root) {
+    overflow: hidden; }
+  #conversejs figure {
+    margin: 1em 40px; }
+  #conversejs hr {
+    box-sizing: content-box;
+    height: 0; }
+  #conversejs pre {
+    overflow: auto; }
+  #conversejs code,
+  #conversejs kbd,
+  #conversejs pre,
+  #conversejs samp {
+    font-family: monospace, monospace;
+    font-size: 1em; }
+  #conversejs button,
+  #conversejs input,
+  #conversejs optgroup,
+  #conversejs select,
+  #conversejs textarea {
+    color: inherit;
+    /* 1 */
+    font: inherit;
+    /* 2 */
+    margin: 0;
+    /* 3 */ }
+  #conversejs button {
+    overflow: visible; }
+  #conversejs button,
+  #conversejs select {
+    text-transform: none; }
+  #conversejs button,
+  #conversejs html input[type="button"],
+  #conversejs input[type="reset"],
+  #conversejs input[type="submit"] {
+    -webkit-appearance: button;
+    /* 2 */
+    cursor: pointer;
+    /* 3 */ }
+  #conversejs button[disabled],
+  #conversejs html input[disabled] {
+    cursor: default; }
+  #conversejs button::-moz-focus-inner,
+  #conversejs input::-moz-focus-inner {
+    border: 0;
+    padding: 0; }
+  #conversejs input {
+    line-height: normal; }
+  #conversejs input[type="checkbox"],
+  #conversejs input[type="radio"] {
+    box-sizing: border-box;
+    /* 1 */
+    padding: 0;
+    /* 2 */ }
+  #conversejs input[type="number"]::-webkit-inner-spin-button,
+  #conversejs input[type="number"]::-webkit-outer-spin-button {
+    height: auto; }
+  #conversejs input[type="search"] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    box-sizing: content-box;
+    /* 2 */ }
+  #conversejs input[type="search"]::-webkit-search-cancel-button,
+  #conversejs input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none; }
+  #conversejs fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em; }
+  #conversejs legend {
+    border: 0;
+    /* 1 */
+    padding: 0;
+    /* 2 */ }
+  #conversejs textarea {
+    overflow: auto; }
+  #conversejs optgroup {
+    font-weight: bold; }
+  #conversejs table {
+    border-collapse: collapse;
+    border-spacing: 0; }
+  #conversejs td,
+  #conversejs th {
+    padding: 0; }
+  #conversejs .hidden,
+  #conversejs [hidden] {
+    display: none !important; }
+  #conversejs .pure-img {
+    max-width: 100%;
+    height: auto;
+    display: block; }
+  #conversejs .pure-form input[type="text"],
+  #conversejs .pure-form input[type="password"],
+  #conversejs .pure-form input[type="email"],
+  #conversejs .pure-form input[type="url"],
+  #conversejs .pure-form input[type="date"],
+  #conversejs .pure-form input[type="month"],
+  #conversejs .pure-form input[type="time"],
+  #conversejs .pure-form input[type="datetime"],
+  #conversejs .pure-form input[type="datetime-local"],
+  #conversejs .pure-form input[type="week"],
+  #conversejs .pure-form input[type="number"],
+  #conversejs .pure-form input[type="search"],
+  #conversejs .pure-form input[type="tel"],
+  #conversejs .pure-form input[type="color"],
+  #conversejs .pure-form select,
+  #conversejs .pure-form textarea {
+    padding: 0.5em 0.6em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    vertical-align: middle;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  #conversejs .pure-form input:not([type]) {
+    padding: 0.5em 0.6em;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 3px #ddd;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  #conversejs .pure-form input[type="color"] {
+    padding: 0.2em 0.5em; }
+  #conversejs .pure-form input[type="text"]:focus,
+  #conversejs .pure-form input[type="password"]:focus,
+  #conversejs .pure-form input[type="email"]:focus,
+  #conversejs .pure-form input[type="url"]:focus,
+  #conversejs .pure-form input[type="date"]:focus,
+  #conversejs .pure-form input[type="month"]:focus,
+  #conversejs .pure-form input[type="time"]:focus,
+  #conversejs .pure-form input[type="datetime"]:focus,
+  #conversejs .pure-form input[type="datetime-local"]:focus,
+  #conversejs .pure-form input[type="week"]:focus,
+  #conversejs .pure-form input[type="number"]:focus,
+  #conversejs .pure-form input[type="search"]:focus,
+  #conversejs .pure-form input[type="tel"]:focus,
+  #conversejs .pure-form input[type="color"]:focus,
+  #conversejs .pure-form select:focus,
+  #conversejs .pure-form textarea:focus {
+    outline: 0;
+    border-color: #1A9707; }
+  #conversejs .pure-form input:not([type]):focus {
+    outline: 0;
+    border-color: #1A9707; }
+  #conversejs .pure-form input[type="file"]:focus,
+  #conversejs .pure-form input[type="radio"]:focus,
+  #conversejs .pure-form input[type="checkbox"]:focus {
+    outline: thin solid #1A9707;
+    outline: 1px auto #1A9707; }
+  #conversejs .pure-form .pure-checkbox,
+  #conversejs .pure-form .pure-radio {
+    margin: 0.5em 0;
+    display: block; }
+  #conversejs .pure-form input[type="text"][disabled],
+  #conversejs .pure-form input[type="password"][disabled],
+  #conversejs .pure-form input[type="email"][disabled],
+  #conversejs .pure-form input[type="url"][disabled],
+  #conversejs .pure-form input[type="date"][disabled],
+  #conversejs .pure-form input[type="month"][disabled],
+  #conversejs .pure-form input[type="time"][disabled],
+  #conversejs .pure-form input[type="datetime"][disabled],
+  #conversejs .pure-form input[type="datetime-local"][disabled],
+  #conversejs .pure-form input[type="week"][disabled],
+  #conversejs .pure-form input[type="number"][disabled],
+  #conversejs .pure-form input[type="search"][disabled],
+  #conversejs .pure-form input[type="tel"][disabled],
+  #conversejs .pure-form input[type="color"][disabled],
+  #conversejs .pure-form select[disabled],
+  #conversejs .pure-form textarea[disabled] {
+    cursor: not-allowed;
+    background-color: #eaeded;
+    color: #cad2d3; }
+  #conversejs .pure-form input:not([type])[disabled] {
+    cursor: not-allowed;
+    background-color: #eaeded;
+    color: #cad2d3; }
+  #conversejs .pure-form input[readonly],
+  #conversejs .pure-form select[readonly],
+  #conversejs .pure-form textarea[readonly] {
+    background-color: #eee;
+    /* menu hover bg color */
+    color: #777;
+    /* menu text color */
+    border-color: #ccc; }
+  #conversejs .pure-form input:focus:invalid,
+  #conversejs .pure-form textarea:focus:invalid,
+  #conversejs .pure-form select:focus:invalid {
+    color: #b94a48;
+    border-color: #e9322d; }
+  #conversejs .pure-form input[type="file"]:focus:invalid:focus,
+  #conversejs .pure-form input[type="radio"]:focus:invalid:focus,
+  #conversejs .pure-form input[type="checkbox"]:focus:invalid:focus {
+    outline-color: #e9322d; }
+  #conversejs .pure-form select {
+    /* Normalizes the height; padding is not sufficient. */
+    height: 2.25em;
+    border: 1px solid #ccc;
+    background-color: white; }
+  #conversejs .pure-form select[multiple] {
+    height: auto; }
+  #conversejs .pure-form label {
+    margin: 0.5em 0 0.2em; }
+  #conversejs .pure-form fieldset {
+    margin: 0;
+    padding: 0.35em 0 0.35em;
+    border: 0; }
+  #conversejs .pure-form legend {
+    display: block;
+    width: 100%;
+    padding: 0.3em 0;
+    margin-bottom: 0.3em;
+    color: #333;
+    border-bottom: 1px solid #e5e5e5; }
+  #conversejs .pure-form-stacked input[type="text"],
+  #conversejs .pure-form-stacked input[type="password"],
+  #conversejs .pure-form-stacked input[type="email"],
+  #conversejs .pure-form-stacked input[type="url"],
+  #conversejs .pure-form-stacked input[type="date"],
+  #conversejs .pure-form-stacked input[type="month"],
+  #conversejs .pure-form-stacked input[type="time"],
+  #conversejs .pure-form-stacked input[type="datetime"],
+  #conversejs .pure-form-stacked input[type="datetime-local"],
+  #conversejs .pure-form-stacked input[type="week"],
+  #conversejs .pure-form-stacked input[type="number"],
+  #conversejs .pure-form-stacked input[type="search"],
+  #conversejs .pure-form-stacked input[type="tel"],
+  #conversejs .pure-form-stacked input[type="color"],
+  #conversejs .pure-form-stacked input[type="file"],
+  #conversejs .pure-form-stacked select,
+  #conversejs .pure-form-stacked label,
+  #conversejs .pure-form-stacked textarea {
+    display: block;
+    margin: 0.25em 0; }
+  #conversejs .pure-form-stacked input:not([type]) {
+    display: block;
+    margin: 0.25em 0; }
+  #conversejs .pure-form-aligned input,
+  #conversejs .pure-form-aligned textarea,
+  #conversejs .pure-form-aligned select,
+  #conversejs .pure-form-aligned .pure-help-inline,
+  #conversejs .pure-form-message-inline {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    vertical-align: middle; }
+  #conversejs .pure-form-aligned textarea {
+    vertical-align: top; }
+  #conversejs .pure-form-aligned .pure-control-group {
+    margin-bottom: 0.5em; }
+  #conversejs .pure-form-aligned .pure-control-group label {
+    text-align: right;
+    display: inline-block;
+    vertical-align: middle;
+    width: 10em;
+    margin: 0 1em 0 0; }
+  #conversejs .pure-form-aligned .pure-controls {
+    margin: 1.5em 0 0 11em; }
+  #conversejs .pure-form input.pure-input-rounded,
+  #conversejs .pure-form .pure-input-rounded {
+    border-radius: 2em;
+    padding: 0.5em 1em; }
+  #conversejs .pure-form .pure-group fieldset {
+    margin-bottom: 10px; }
+  #conversejs .pure-form .pure-group input,
+  #conversejs .pure-form .pure-group textarea {
+    display: block;
+    padding: 10px;
+    margin: 0 0 -1px;
+    border-radius: 0;
+    position: relative;
+    top: -1px; }
+  #conversejs .pure-form .pure-group input:focus,
+  #conversejs .pure-form .pure-group textarea:focus {
+    z-index: 3; }
+  #conversejs .pure-form .pure-group input:first-child,
+  #conversejs .pure-form .pure-group textarea:first-child {
+    top: 1px;
+    border-radius: 4px 4px 0 0;
+    margin: 0; }
+  #conversejs .pure-form .pure-group input:first-child:last-child,
+  #conversejs .pure-form .pure-group textarea:first-child:last-child {
+    top: 1px;
+    border-radius: 4px;
+    margin: 0; }
+  #conversejs .pure-form .pure-group input:last-child,
+  #conversejs .pure-form .pure-group textarea:last-child {
+    top: -2px;
+    border-radius: 0 0 4px 4px;
+    margin: 0; }
+  #conversejs .pure-form .pure-group button {
+    margin: 0.35em 0; }
+  #conversejs .pure-form .pure-input-1 {
+    width: 100%; }
+  #conversejs .pure-form .pure-input-3-4 {
+    width: 75%; }
+  #conversejs .pure-form .pure-input-2-3 {
+    width: 66%; }
+  #conversejs .pure-form .pure-input-1-2 {
+    width: 50%; }
+  #conversejs .pure-form .pure-input-1-3 {
+    width: 33%; }
+  #conversejs .pure-form .pure-input-1-4 {
+    width: 25%; }
+  #conversejs .pure-form .pure-help-inline,
+  #conversejs .pure-form-message-inline {
+    display: inline-block;
+    padding-left: 0.3em;
+    color: #666;
+    vertical-align: middle;
+    font-size: 0.875em; }
+  #conversejs .pure-form-message {
+    display: block;
+    color: #666;
+    font-size: 0.875em; }
+  @media only screen and (max-width: 480px) {
+    #conversejs {
+      /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */ }
+      #conversejs .pure-form button[type="submit"] {
+        margin: 0.7em 0 0; }
+      #conversejs .pure-form input:not([type]),
+      #conversejs .pure-form input[type="text"],
+      #conversejs .pure-form input[type="password"],
+      #conversejs .pure-form input[type="email"],
+      #conversejs .pure-form input[type="url"],
+      #conversejs .pure-form input[type="date"],
+      #conversejs .pure-form input[type="month"],
+      #conversejs .pure-form input[type="time"],
+      #conversejs .pure-form input[type="datetime"],
+      #conversejs .pure-form input[type="datetime-local"],
+      #conversejs .pure-form input[type="week"],
+      #conversejs .pure-form input[type="number"],
+      #conversejs .pure-form input[type="search"],
+      #conversejs .pure-form input[type="tel"],
+      #conversejs .pure-form input[type="color"],
+      #conversejs .pure-form label {
+        margin-bottom: 0.3em;
+        display: block; }
+      #conversejs .pure-group input:not([type]),
+      #conversejs .pure-group input[type="text"],
+      #conversejs .pure-group input[type="password"],
+      #conversejs .pure-group input[type="email"],
+      #conversejs .pure-group input[type="url"],
+      #conversejs .pure-group input[type="date"],
+      #conversejs .pure-group input[type="month"],
+      #conversejs .pure-group input[type="time"],
+      #conversejs .pure-group input[type="datetime"],
+      #conversejs .pure-group input[type="datetime-local"],
+      #conversejs .pure-group input[type="week"],
+      #conversejs .pure-group input[type="number"],
+      #conversejs .pure-group input[type="search"],
+      #conversejs .pure-group input[type="tel"],
+      #conversejs .pure-group input[type="color"] {
+        margin-bottom: 0; }
+      #conversejs .pure-form-aligned .pure-control-group label {
+        margin-bottom: 0.3em;
+        text-align: left;
+        display: block;
+        width: 100%; }
+      #conversejs .pure-form-aligned .pure-controls {
+        margin: 1.5em 0 0 0; }
+      #conversejs .pure-form .pure-help-inline,
+      #conversejs .pure-form-message-inline,
+      #conversejs .pure-form-message {
+        display: block;
+        font-size: 0.75em;
+        /* Increased bottom padding to make it group with its related input element. */
+        padding: 0.2em 0 0.8em; } }
+  #conversejs .pure-button {
+    /* Structure */
+    display: inline-block;
+    zoom: 1;
+    line-height: normal;
+    white-space: nowrap;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  #conversejs .pure-button::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  #conversejs .pure-button {
+    font-family: inherit;
+    font-size: 100%;
+    padding: 0.5em 1em;
+    color: #444;
+    /* rgba not supported (IE 8) */
+    color: rgba(0, 0, 0, 0.8);
+    /* rgba supported */
+    border: 1px solid #999;
+    /*IE 6/7/8*/
+    border: none transparent;
+    /*IE9 + everything else*/
+    background-color: #E6E6E6;
+    text-decoration: none;
+    border-radius: 2px; }
+  #conversejs .pure-button-hover,
+  #conversejs .pure-button:hover,
+  #conversejs .pure-button:focus {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
+    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1));
+    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
+    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); }
+  #conversejs .pure-button:focus {
+    outline: 0; }
+  #conversejs .pure-button-active,
+  #conversejs .pure-button:active {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+    border-color: #000 \9; }
+  #conversejs .pure-button[disabled],
+  #conversejs .pure-button-disabled,
+  #conversejs .pure-button-disabled:hover,
+  #conversejs .pure-button-disabled:focus,
+  #conversejs .pure-button-disabled:active {
+    border: none;
+    background-image: none;
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+    filter: alpha(opacity=40);
+    -khtml-opacity: 0.40;
+    -moz-opacity: 0.40;
+    opacity: 0.40;
+    cursor: not-allowed;
+    box-shadow: none; }
+  #conversejs .pure-button-hidden {
+    display: none; }
+  #conversejs .pure-button::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+  #conversejs .pure-button-primary,
+  #conversejs .pure-button-selected,
+  #conversejs a.pure-button-primary,
+  #conversejs a.pure-button-selected {
+    background-color: #0078e7;
+    color: #fff; }
+  #conversejs *, #conversejs *:before, #conversejs *:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  #conversejs ul li {
+    height: auto; }
+  #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
+  #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
+  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
+  #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
+  #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline; }
+  #conversejs textarea,
+  #conversejs input[type=submit], #conversejs input[type=button],
+  #conversejs input[type=text], #conversejs input[type=password],
+  #conversejs button {
+    font-size: 15px;
+    padding: 0.25em;
+    min-height: 0; }
+  #conversejs strong {
+    font-weight: 700; }
+  #conversejs ol, #conversejs ul {
+    list-style: none; }
+  #conversejs li {
+    height: 10px; }
+  #conversejs ul, #conversejs ol, #conversejs dl {
+    font: inherit;
+    margin: 0; }
+  #conversejs a, #conversejs a:visited {
+    text-decoration: none;
+    color: #587BDD;
+    text-shadow: none; }
+
+body {
+  width: 100%;
+  height: 100%;
+  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #ffffff;
+  background-color: #17818B; }
+
+div.content {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  background-color: #17818B; }
+  div.content .inner-content {
+    text-align: center;
+    padding: 7%;
+    padding-left: -webkit-calc(5% + 250px);
+    padding-left: calc(5% + 250px); }
+    div.content .inner-content .brand-heading {
+      font-size: 600%;
+      margin-left: -10%; }
+    div.content .inner-content p.no-chats {
+      padding-right: 10%;
+      font-size: 120%; }
+
+#conversejs {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  bottom: 0;
+  color: #818479;
+  direction: ltr;
+  display: block;
+  font-size: 15px;
+  right: 0;
+  z-index: 1031; }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
+  #conversejs ::selection {
+    background-color: #DCF9F6; }
+  #conversejs ::-moz-selection {
+    background-color: #DCF9F6; }
+  #conversejs .circle {
+    border-radius: 50%; }
+  #conversejs .no-text-select {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  #conversejs .emoticon {
+    font-size: 15px; }
+  #conversejs .left {
+    float: left; }
+  #conversejs .right {
+    float: right; }
+  #conversejs .centered {
+    text-align: center;
+    display: block;
+    margin: 5em auto; }
+  #conversejs .hor_centered {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    clear: both; }
+  #conversejs .hidden {
+    display: none; }
+  #conversejs .locked {
+    padding-right: 22px; }
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg); } }
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg); }
+  to {
+    -moz-transform: rotate(359deg); } }
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+  #conversejs .spinner {
+    -webkit-animation: spin 2s infinite, linear;
+    -moz-animation: spin 2s infinite, linear;
+    animation: spin 2s infinite, linear;
+    display: block;
+    text-align: center;
+    margin: 5px; }
+    #conversejs .spinner:before {
+      font-size: 24px;
+      font-family: 'Converse-js' !important;
+      content: "\231b"; }
+  #conversejs .button-group,
+  #conversejs .input-button-group {
+    display: table; }
+  #conversejs .button-group {
+    width: 100%; }
+  #conversejs .input-button-group button,
+  #conversejs .input-button-group input {
+    display: table-cell; }
+  #conversejs .error {
+    color: red; }
+  #conversejs .reg-feedback {
+    font-size: 85%; }
+  #conversejs .reg-feedback,
+  #conversejs #converse-login .conn-feedback {
+    display: block;
+    text-align: center;
+    width: 100%; }
+  #conversejs a.restore-chat {
+    padding: 1px 0 1px 5px;
+    color: white;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  #conversejs a.restore-chat:visited {
+    color: white; }
+  #conversejs .activated {
+    display: block !important; }
+  #conversejs .pure-button {
+    border-radius: 4px; }
+  #conversejs .button-primary {
+    color: white;
+    background-color: #2AC611; }
+  #conversejs .button-secondary {
+    color: white;
+    background-color: #83A0D6; }
+  #conversejs .button-cancel {
+    color: white;
+    background-color: #D24E2B; }
+  #conversejs form.pure-form.converse-form {
+    background: white;
+    margin: 1em; }
+    #conversejs form.pure-form.converse-form legend {
+      color: #818479; }
+    #conversejs form.pure-form.converse-form label {
+      margin-top: 1em; }
+    #conversejs form.pure-form.converse-form input[type=text],
+    #conversejs form.pure-form.converse-form input[type=password],
+    #conversejs form.pure-form.converse-form input[type=number],
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      height: 2.2em; }
+    #conversejs form.pure-form.converse-form input[type=button],
+    #conversejs form.pure-form.converse-form input[type=submit] {
+      padding-left: 1em;
+      padding-right: 1em;
+      margin-right: 1em; }
+    #conversejs form.pure-form.converse-form input.error {
+      border: 1px solid red;
+      color: #818479; }
+    #conversejs form.pure-form.converse-form .form-help {
+      color: gray;
+      font-size: 85%;
+      padding-top: 0.5em; }
+      #conversejs form.pure-form.converse-form .form-help:hover {
+        color: #818479; }
+  #conversejs .chat-textarea-chatbox-selected {
+    border: 1px solid #578308;
+    margin: 0; }
+  #conversejs .chat-textarea-chatroom-selected {
+    border: 2px solid #587BDD;
+    margin: 0; }
+  #conversejs .dropdown dt,
+  #conversejs .dropdown ul {
+    margin: 0;
+    padding: 0; }
+
+#converse-embedded-chat .flyout,
+#conversejs .flyout {
+  border-radius: 0;
+  bottom: 6px;
+  display: block;
+  position: absolute; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .flyout,
+    #conversejs .flyout {
+      border-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .flyout,
+    #conversejs .flyout {
+      border-radius: 0; } }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .flyout,
+    #conversejs .flyout {
+      bottom: 0; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .flyout,
+    #conversejs .flyout {
+      bottom: 0; } }
+#converse-embedded-chat .chat-head,
+#conversejs .chat-head {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  color: #ffffff;
+  font-size: 100%;
+  height: 55px;
+  margin: 0;
+  padding: 0.5em;
+  position: relative; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .chat-head,
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  #converse-embedded-chat .chat-head .avatar,
+  #conversejs .chat-head .avatar {
+    margin-right: 0.5em;
+    border-radius: 50%;
+    float: left; }
+  #converse-embedded-chat .chat-head.chat-head-chatbox,
+  #conversejs .chat-head.chat-head-chatbox {
+    background-color: #F4A261; }
+  #converse-embedded-chat .chat-head .user-custom-message,
+  #conversejs .chat-head .user-custom-message {
+    color: white;
+    font-size: 75%;
+    font-style: italic;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    padding-top: 0.2em; }
+#converse-embedded-chat .chatbox-btn,
+#conversejs .chatbox-btn {
+  border-radius: 25%;
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: inline-block;
+  float: right;
+  font-size: 16px;
+  margin: 0 0.2em;
+  padding: 0.3em;
+  text-decoration: none; }
+  #converse-embedded-chat .chatbox-btn:active,
+  #conversejs .chatbox-btn:active {
+    position: relative;
+    top: 1px; }
+  #converse-embedded-chat .chatbox-btn.button-on,
+  #conversejs .chatbox-btn.button-on {
+    background-color: white;
+    color: #F4A261; }
+#converse-embedded-chat .chatbox,
+#conversejs .chatbox {
+  display: block;
+  text-align: left;
+  float: right;
+  height: 35px;
+  margin: 0 0.5em;
+  width: 100%; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .chatbox,
+    #conversejs .chatbox {
+      margin: 0;
+      width: 100%; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .chatbox,
+    #conversejs .chatbox {
+      margin: 0;
+      width: 100%; } }
+  #converse-embedded-chat .chatbox .box-flyout,
+  #conversejs .chatbox .box-flyout {
+    background-color: white;
+    box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+    height: 100%;
+    min-height: 50%;
+    min-width: 100%;
+    width: 100%;
+    z-index: 1; }
+    @media screen and (max-height: 450px) {
+      #converse-embedded-chat .chatbox .box-flyout,
+      #conversejs .chatbox .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
+    @media screen and (max-width: 480px) {
+      #converse-embedded-chat .chatbox .box-flyout,
+      #conversejs .chatbox .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
+  #converse-embedded-chat .chatbox .chat-title,
+  #conversejs .chatbox .chat-title {
+    color: white;
+    line-height: 15px;
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+    #converse-embedded-chat .chatbox .chat-title a,
+    #conversejs .chatbox .chat-title a {
+      color: white;
+      width: 100%; }
+  #converse-embedded-chat .chatbox .chat-body,
+  #conversejs .chatbox .chat-body {
+    background-color: white;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top: 0;
+    height: 289px;
+    height: -webkit-calc(100% - 55px);
+    height: calc(100% - 55px); }
+    @media screen and (max-height: 450px) {
+      #converse-embedded-chat .chatbox .chat-body,
+      #conversejs .chatbox .chat-body {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; } }
+    @media screen and (max-width: 480px) {
+      #converse-embedded-chat .chatbox .chat-body,
+      #conversejs .chatbox .chat-body {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; } }
+    #converse-embedded-chat .chatbox .chat-body p,
+    #conversejs .chatbox .chat-body p {
+      color: #818479;
+      font-size: 15px;
+      margin: 0;
+      padding: 5px; }
+    #converse-embedded-chat .chatbox .chat-body .chat-info,
+    #conversejs .chatbox .chat-body .chat-info {
+      color: #D24E2B;
+      margin: 0.3em; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
+      #conversejs .chatbox .chat-body .chat-info.chat-event {
+        clear: left;
+        font-style: italic; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.chat-error,
+      #conversejs .chatbox .chat-body .chat-info.chat-error {
+        color: #D24E2B;
+        font-weight: bold; }
+      #converse-embedded-chat .chatbox .chat-body .chat-info.chat-date,
+      #conversejs .chatbox .chat-body .chat-info.chat-date {
+        display: inline-block;
+        margin-top: 1em; }
+    #converse-embedded-chat .chatbox .chat-body .chat-image,
+    #conversejs .chatbox .chat-body .chat-image {
+      max-width: 100%;
+      max-height: 100%; }
+    #converse-embedded-chat .chatbox .chat-body .chat-action,
+    #conversejs .chatbox .chat-body .chat-action {
+      font-style: italic; }
+    #converse-embedded-chat .chatbox .chat-body .chat-message,
+    #conversejs .chatbox .chat-body .chat-message {
+      margin: 0.3em; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message span,
+      #conversejs .chatbox .chat-body .chat-message span {
+        display: inline-block; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
+          max-width: 100%;
+          font-weight: bold;
+          white-space: nowrap;
+          float: left;
+          text-overflow: ellipsis;
+          overflow: hidden; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
+          color: #1A9707; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
+          color: #587BDD; }
+        #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
+        #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
+          max-width: 100%;
+          word-wrap: break-word; }
+    #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
+    #conversejs .chatbox .chat-body .delayed .chat-msg-them {
+      color: #FB5D50; }
+    #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
+    #conversejs .chatbox .chat-body .delayed .chat-msg-me {
+      color: #7EABBB; }
+  #converse-embedded-chat .chatbox .new-msgs-indicator,
+  #conversejs .chatbox .new-msgs-indicator {
+    position: absolute;
+    width: 100%;
+    cursor: pointer;
+    background-color: #F4A261;
+    color: #FCFDFD;
+    padding: 0.3em;
+    font-size: 0.9em;
+    text-align: center;
+    z-index: 20; }
+  #converse-embedded-chat .chatbox .chat-content,
+  #conversejs .chatbox .chat-content {
+    position: relative;
+    padding: 0.5em;
+    font-size: 13px;
+    color: #818479;
+    overflow-y: auto;
+    border: 0;
+    background-color: #ffffff;
+    line-height: 1.3em;
+    height: 206px;
+    height: calc(100% - 96px); }
+  #converse-embedded-chat .chatbox .chat-content-sendbutton,
+  #conversejs .chatbox .chat-content-sendbutton {
+    height: calc(100% - 128px); }
+  #converse-embedded-chat .chatbox .dropdown,
+  #conversejs .chatbox .dropdown {
+    /* status dropdown styles */
+    background-color: #FCFDFD; }
+    #converse-embedded-chat .chatbox .dropdown dd,
+    #conversejs .chatbox .dropdown dd {
+      margin: 0;
+      padding: 0;
+      position: relative; }
+  #converse-embedded-chat .chatbox form.sendXMPPMessage,
+  #conversejs .chatbox form.sendXMPPMessage {
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    background-clip: padding-box;
+    background: white;
+    border-top: 1px solid #BBB;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: 95px;
+    min-width: 100%; }
+    @media screen and (max-height: 450px) {
+      #converse-embedded-chat .chatbox form.sendXMPPMessage,
+      #conversejs .chatbox form.sendXMPPMessage {
+        width: 100%; } }
+    @media screen and (max-width: 480px) {
+      #converse-embedded-chat .chatbox form.sendXMPPMessage,
+      #conversejs .chatbox form.sendXMPPMessage {
+        width: 100%; } }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
+    #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border: 0;
+      height: 70px;
+      padding: 0.5em;
+      width: 100%;
+      resize: none; }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
+    #conversejs .chatbox form.sendXMPPMessage .send-button {
+      position: absolute;
+      left: 3px;
+      width: -webkit-calc(100% - 6px);
+      width: calc(100% - 6px);
+      background-color: #F4A261;
+      color: white;
+      font-size: 80%;
+      height: 27px;
+      bottom: -30px; }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
+    #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+      box-sizing: border-box;
+      font-size: 15px;
+      margin: 0;
+      padding: 5px;
+      height: 25px;
+      display: block;
+      background-color: #FFF5EE; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
+        font-size: 15px;
+        color: #587BDD;
+        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 {
+        font-size: 12px;
+        padding-right: 3px;
+        text-shadow: 0 1px 0 white; }
+      #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 {
+        color: #D24E2B; }
+      #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 {
+        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 {
+        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 {
+        float: right; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+        display: inline-block;
+        list-style: none;
+        padding: 0 3px 0 3px;
+        cursor: pointer;
+        margin-top: 1px; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
+        cursor: pointer; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul {
+        background: #fff;
+        bottom: 100%;
+        box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
+        display: none;
+        font-size: 12px;
+        margin: 0;
+        position: absolute;
+        right: 0; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li {
+          cursor: pointer;
+          list-style: none;
+          position: relative; }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
+            color: #8f2831; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+        margin-left: 0; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
+        color: #587BDD;
+        padding-left: 5px; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
+          left: 0; }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
+            font-size: 15px;
+            padding: 5px;
+            z-index: 98; }
+          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
+          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
+            background-color: #DCF9F6; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
+        padding: 7px;
+        background-color: white;
+        display: block;
+        z-index: 99; }
+        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a,
+        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a {
+          -moz-transition: background-color 0.2s ease-in-out;
+          -webkit-transition: background-color 0.2s ease-in-out;
+          transition: background-color 0.2s ease-in-out;
+          display: block;
+          padding: 1px;
+          text-decoration: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover,
+      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
+        background-color: #DCF9F6; }
+  #converse-embedded-chat .chatbox .dragresize,
+  #conversejs .chatbox .dragresize {
+    background: transparent;
+    border: 0;
+    margin: 0;
+    position: absolute;
+    top: 0;
+    z-index: 20; }
+    #converse-embedded-chat .chatbox .dragresize-top,
+    #conversejs .chatbox .dragresize-top {
+      cursor: n-resize;
+      height: 5px;
+      width: 100%; }
+    #converse-embedded-chat .chatbox .dragresize-left,
+    #conversejs .chatbox .dragresize-left {
+      cursor: w-resize;
+      width: 5px;
+      height: 100%;
+      left: 0; }
+    #converse-embedded-chat .chatbox .dragresize-topleft,
+    #conversejs .chatbox .dragresize-topleft {
+      cursor: nw-resize;
+      width: 15px;
+      height: 15px;
+      top: 0;
+      left: 0; }
+
+#conversejs .chatbox-btn {
+  font-size: 17px; }
+#conversejs .flyout {
+  border: 1em solid #F4A261;
+  border-top: 0.8em solid #F4A261;
+  border-radius: 0;
+  bottom: 0;
+  bottom: 0; }
+#conversejs .chat-head {
+  font-size: 20px;
+  padding: 0; }
+  #conversejs .chat-head .user-custom-message {
+    font-size: 66%;
+    height: auto;
+    line-height: 16px; }
+  #conversejs .chat-head .avatar {
+    border-radius: 25%; }
+#conversejs .chatbox {
+  height: 100%;
+  margin: 0;
+  width: -webkit-calc(100% - 250px);
+  width: calc(100% - 250px);
+  margin: 0; }
+  #conversejs .chatbox .box-flyout {
+    width: -webkit-calc(100% - 250px);
+    width: calc(100% - 250px);
+    box-shadow: none;
+    min-width: auto; }
+  #conversejs .chatbox .chat-content {
+    padding: 0 1em 1em 1em; }
+  #conversejs .chatbox .chat-title {
+    line-height: 17px; }
+  #conversejs .chatbox form.sendXMPPMessage ul {
+    width: 100%; }
+  #conversejs .chatbox form.sendXMPPMessage .toggle-smiley {
+    padding-left: 0.5em; }
+    #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul li {
+      padding: 0.5em; }
+
+#conversejs #controlbox {
+  margin-right: 1em; }
+  @media screen and (max-width: 480px) {
+    #conversejs #controlbox {
+      margin: 0; } }
+  @media screen and (max-height: 450px) {
+    #conversejs #controlbox {
+      margin: 0; } }
+  #conversejs #controlbox .controlbox-head {
+    background-color: #577BDD;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    color: white;
+    height: 55px;
+    margin: 0;
+    padding: 6px 6px 6px 0; }
+    @media screen and (max-height: 450px) {
+      #conversejs #controlbox .controlbox-head {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; } }
+    @media screen and (max-width: 480px) {
+      #conversejs #controlbox .controlbox-head {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; } }
+  #conversejs #controlbox form.search-xmpp-contact {
+    margin: 0;
+    padding-left: 5px;
+    padding: 0 0 5px 5px; }
+    #conversejs #controlbox form.search-xmpp-contact input {
+      width: 8em; }
+  #conversejs #controlbox .msgs-indicator {
+    opacity: 0.6;
+    background-color: #D24E2B;
+    color: white;
+    font-size: 14px;
+    float: right;
+    font-weight: normal;
+    padding: 0 4px;
+    text-shadow: none; }
+  #conversejs #controlbox a.subscribe-to-user {
+    padding-left: 2em;
+    font-weight: bold; }
+  #conversejs #controlbox #converse-register {
+    background: white; }
+    #conversejs #controlbox #converse-register .title {
+      font-weight: bold; }
+    #conversejs #controlbox #converse-register .info {
+      font-style: italic;
+      color: green;
+      font-size: 85%;
+      margin: 5px 0; }
+    #conversejs #controlbox #converse-register .form-errors {
+      color: red;
+      display: none; }
+    #conversejs #controlbox #converse-register .provider-title {
+      font-size: 22px; }
+    #conversejs #controlbox #converse-register .provider-score {
+      width: 178px;
+      margin-bottom: 8px; }
+    #conversejs #controlbox #converse-register .form-help .url {
+      font-weight: bold;
+      color: #587BDD; }
+    #conversejs #controlbox #converse-register .input-group {
+      display: table;
+      margin: auto;
+      width: 100%; }
+      #conversejs #controlbox #converse-register .input-group span {
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+        max-width: 110px; }
+      #conversejs #controlbox #converse-register .input-group span, #conversejs #controlbox #converse-register .input-group input[name=username] {
+        display: table-cell;
+        text-align: left; }
+    #conversejs #controlbox #converse-register .instructions {
+      color: gray;
+      font-size: 85%; }
+      #conversejs #controlbox #converse-register .instructions:hover {
+        color: #818479; }
+  #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
+    margin-top: 2em; }
+    #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
+      height: auto;
+      white-space: normal; }
+    #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
+      color: #436F64; }
+    #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
+      width: 100%;
+      margin: 0.5em 0; }
+  #conversejs #controlbox #users .add-converse-contact {
+    margin: 0 1em 0.75em 1em; }
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
+  #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
+    width: 100%; }
+  #conversejs #controlbox #chatrooms .rooms-list-container {
+    text-align: left;
+    margin: 0 1em; }
+    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
+      display: block;
+      font-weight: bold;
+      color: #818479;
+      margin-top: 1em; }
+    #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
+      margin: 0.5em 0;
+      text-align: left; }
+      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
+        border: none;
+        color: #818479;
+        font-weight: normal;
+        padding: 0;
+        padding-bottom: 0.5em;
+        text-shadow: 0 1px 0 #FAFAFA; }
+      #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom {
+        border: none;
+        clear: both;
+        color: #818479;
+        display: block;
+        overflow: hidden;
+        padding: 0.3em 0;
+        text-shadow: 0 1px 0 #FAFAFA;
+        word-wrap: break-word; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom:hover {
+          background-color: #DCF9F6; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
+          max-width: 50%;
+          width: auto;
+          font-weight: bold; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
+          font-size: 15px; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.open-room {
+          float: left;
+          width: 68%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-right: 0.5em; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
+          color: #BBB; }
+          #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
+            color: #587BDD; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
+          font-size: 14px;
+          font-style: normal;
+          font-weight: normal; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom li.room-info {
+          display: block;
+          margin-left: 5px; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info {
+          margin: 0;
+          padding: 0;
+          display: block;
+          white-space: normal; }
+        #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info {
+          clear: left;
+          width: 100%; }
+  #conversejs #controlbox .dropdown {
+    /* Custom addition for CSP */ }
+    #conversejs #controlbox .dropdown a {
+      width: 143px;
+      display: inline-block; }
+    #conversejs #controlbox .dropdown li {
+      list-style: none;
+      padding-left: 0; }
+    #conversejs #controlbox .dropdown dd ul {
+      padding: 0;
+      list-style: none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border: 1px solid #B1BFC4;
+      width: 100%;
+      z-index: 21;
+      background-color: #FCFDFD; }
+      #conversejs #controlbox .dropdown dd ul li:hover {
+        background-color: #DCF9F6; }
+    #conversejs #controlbox .dropdown dd.search-xmpp {
+      display: none;
+      width: 100%; }
+    #conversejs #controlbox .dropdown dd.search-xmpp ul {
+      box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
+      #conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
+        background-color: #FCFDFD; }
+    #conversejs #controlbox .dropdown dt a span {
+      cursor: pointer;
+      display: block;
+      padding: 4px 7px 0 5px; }
+  #conversejs #controlbox #select-xmpp-status {
+    display: none;
+    float: right;
+    margin-right: 0.5em; }
+  #conversejs #controlbox #controlbox-tabs {
+    text-align: center;
+    display: inline;
+    overflow: hidden;
+    font-size: 12px;
+    list-style-type: none;
+    /* single tab */ }
+    #conversejs #controlbox #controlbox-tabs li {
+      float: left;
+      list-style: none;
+      padding-left: 0;
+      text-shadow: white 0 1px 0;
+      width: 40%; }
+      #conversejs #controlbox #controlbox-tabs li a {
+        background-color: white;
+        border-bottom: 1px solid #CCC;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
+        color: #818479;
+        display: block;
+        font-size: 14px;
+        height: 54px;
+        line-height: 54px;
+        margin: 0;
+        text-align: center;
+        text-decoration: none; }
+        #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
+          background-color: #F4A261; }
+        #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
+          background-color: #E76F51; }
+        #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
+          border-top-right-radius: 0; }
+        #conversejs #controlbox #controlbox-tabs li a:hover {
+          color: #818479; }
+          #conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
+            opacity: 0.8; }
+        #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
+          box-shadow: none;
+          border-bottom: 0;
+          height: 55px;
+          cursor: default;
+          color: #818479; }
+  #conversejs #controlbox .fancy-dropdown {
+    border: 1px solid #B1BFC4;
+    height: 25px;
+    border-radius: 0;
+    text-align: left;
+    padding: 0.3em 0.3em 0 0.3em; }
+    #conversejs #controlbox .fancy-dropdown .choose-xmpp-status,
+    #conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
+      text-shadow: 0 1px 0 #ffffff;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block; }
+    #conversejs #controlbox .fancy-dropdown.no-border {
+      border: 0; }
+  #conversejs #controlbox .xmpp-status {
+    padding: 0.3em 0.3em 0 0.3em; }
+  #conversejs #controlbox #fancy-xmpp-status-select {
+    padding: 0em; }
+    #conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message {
+      float: right;
+      clear: right;
+      width: 12px;
+      color: #587BDD; }
+    #conversejs #controlbox #fancy-xmpp-status-select fieldset {
+      padding: 0;
+      margin-top: -1px; }
+    #conversejs #controlbox #fancy-xmpp-status-select input {
+      height: 26px;
+      width: -webkit-calc(100% - 40px);
+      width: calc(100% - 40px);
+      padding: 0 0 0 0.5em; }
+    #conversejs #controlbox #fancy-xmpp-status-select input[type=submit] {
+      height: 26px;
+      width: 40px;
+      padding: 1px;
+      float: right; }
+  #conversejs #controlbox .controlbox-pane {
+    background-color: white;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 0;
+    font-size: 15px;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 289px;
+    height: -webkit-calc(100% - 55px);
+    height: calc(100% - 55px);
+    overflow-y: auto;
+    overflow-x: hidden; }
+    #conversejs #controlbox .controlbox-pane label {
+      font-size: 15px;
+      font-weight: bold;
+      height: auto;
+      margin: 4px; }
+    #conversejs #controlbox .controlbox-pane dd {
+      margin-left: 0;
+      margin-bottom: 0; }
+      #conversejs #controlbox .controlbox-pane dd.odd {
+        background-color: #DCEAC5; }
+  #conversejs #controlbox #users {
+    overflow-y: hidden; }
+  #conversejs #controlbox .add-xmpp-contact {
+    background: none;
+    padding: 1em 0.5em; }
+    #conversejs #controlbox .add-xmpp-contact input {
+      margin: 0 0 1rem;
+      width: 100%; }
+    #conversejs #controlbox .add-xmpp-contact button {
+      width: 100%; }
+  #conversejs #controlbox .xmpp-status-menu {
+    text-align: left;
+    box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
+    #conversejs #controlbox .xmpp-status-menu li {
+      padding: 2px; }
+      #conversejs #controlbox .xmpp-status-menu li a {
+        width: 100%;
+        padding: 0.3em; }
+  #conversejs #controlbox .xmpp-status-menu li a.logout,
+  #conversejs #controlbox .xmpp-status-menu li a.logout span {
+    color: #D24E2B; }
+  #conversejs #controlbox .set-xmpp-status {
+    background: none;
+    margin: 1em 1em 0.5em 1em; }
+    #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
+      z-index: 22; }
+#conversejs .toggle-controlbox {
+  background-color: #587BDD;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  color: #0a0a0a;
+  float: right;
+  height: 100%;
+  margin: 0 0.5em;
+  padding: 10px 8px 0 8px; }
+  #conversejs .toggle-controlbox span {
+    color: white; }
+
+#conversejs #controlbox {
+  min-width: 250px;
+  width: 200px;
+  float: left;
+  margin: 0; }
+  #conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading {
+    margin: 10% 0 0 0;
+    font-size: 600%;
+    color: #577BDD; }
+  #conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form {
+    margin-top: 4em; }
+  #conversejs #controlbox.fullscreen {
+    width: 100%; }
+    #conversejs #controlbox.fullscreen .box-flyout {
+      width: 100%; }
+  #conversejs #controlbox .box-flyout {
+    border: 0;
+    background-color: white;
+    min-width: 250px;
+    width: 200px;
+    z-index: 1;
+    background-color: #577BDD; }
+  #conversejs #controlbox .controlbox-head {
+    height: 63px;
+    padding: 6px 0 6px 0;
+    margin-top: 0.2em; }
+  #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
+    margin: 30%;
+    margin-top: 15%; }
+    #conversejs #controlbox #converse-register #available-chatrooms, #conversejs #controlbox #converse-login #available-chatrooms {
+      padding: 0 1em 2em 1em; }
+    #conversejs #controlbox #converse-register input[type=submit], #conversejs #controlbox #converse-login input[type=submit] {
+      width: auto;
+      margin-top: 1.5em; }
+  #conversejs #controlbox #controlbox-tabs {
+    /* single tab */ }
+    #conversejs #controlbox #controlbox-tabs li {
+      width: 50%; }
+      #conversejs #controlbox #controlbox-tabs li a {
+        height: 62px;
+        line-height: 62px;
+        font-size: 17px; }
+        #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
+          height: 63px; }
+  #conversejs #controlbox .controlbox-pane {
+    height: -webkit-calc(100% - 63px);
+    height: calc(100% - 63px); }
+
+#conversejs #converse-roster {
+  text-align: left;
+  width: 100%;
+  position: relative;
+  margin: 1em 0 0 0;
+  height: 194px;
+  height: calc(100% - 50px - 20px);
+  overflow: hidden;
+  padding: 0;
+  padding-bottom: 3em;
+  /* Custom addition for CSP */ }
+  #conversejs #converse-roster.no-contact-requests {
+    height: calc(100% - 25px - 20px); }
+  #conversejs #converse-roster #online-count {
+    display: none; }
+  #conversejs #converse-roster .search-xmpp ul li.chat-info {
+    padding-left: 10px; }
+  #conversejs #converse-roster .roster-filter-form {
+    margin: 0 1em 0.5em 1em;
+    width: 100%;
+    padding-right: 2em;
+    /* (jQ addClass:) if input has value: */
+    /* (jQ addClass:) if mouse is over the 'x' input area*/ }
+    #conversejs #converse-roster .roster-filter-form .roster-filter {
+      float: left;
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
+      border: 1px solid #999;
+      font-size: 15px;
+      height: 25px;
+      margin: 0;
+      padding: 0;
+      padding-left: 0.4em;
+      width: 53%; }
+    #conversejs #converse-roster .roster-filter-form .roster-filter.x {
+      background-position: right 3px center; }
+    #conversejs #converse-roster .roster-filter-form .roster-filter.onX {
+      cursor: pointer; }
+    #conversejs #converse-roster .roster-filter-form .roster-filter-state {
+      display: none; }
+    #conversejs #converse-roster .roster-filter-form .state-type {
+      float: left;
+      border: 1px solid #999;
+      font-size: calc(15px - 2px);
+      height: 25px;
+      margin: 0;
+      padding: 0;
+      padding-left: 0.4em;
+      width: 53%;
+      display: none; }
+    #conversejs #converse-roster .roster-filter-form .state-type-state {
+      display: inline-block; }
+    #conversejs #converse-roster .roster-filter-form .filter-type {
+      display: table-cell;
+      float: right;
+      font-size: calc(15px - 2px);
+      height: 25px;
+      padding: 0;
+      width: 47%;
+      border-radius: 0;
+      border: 1px solid; }
+  #conversejs #converse-roster .roster-contacts {
+    margin: 0;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: none; }
+    #conversejs #converse-roster .roster-contacts dt.roster-group {
+      border: none;
+      color: #818479;
+      display: none;
+      font-weight: normal;
+      margin-top: 0.5em;
+      padding: 0.5em 1em;
+      text-shadow: 0 1px 0 #FAFAFA; }
+      #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
+        background-color: #DCF9F6; }
+      #conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
+        color: #818479;
+        display: block;
+        width: 100%; }
+    #conversejs #converse-roster .roster-contacts dd {
+      border: none;
+      clear: both;
+      color: #818479;
+      background-color: #FCFDFD;
+      display: block;
+      height: 24px;
+      overflow-y: hidden;
+      padding: 0.3em 1em;
+      text-shadow: 0 1px 0 #FAFAFA;
+      line-height: 16px;
+      width: 100%;
+      height: 30px;
+      margin: 0;
+      padding: 0; }
+      #conversejs #converse-roster .roster-contacts dd .open-chat {
+        margin: auto;
+        padding: 0.5em 0em 0 1em;
+        width: 85%; }
+        #conversejs #converse-roster .roster-contacts dd .open-chat .pulse {
+          padding: 0;
+          margin: 0; }
+        #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs {
+          font-weight: bold; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
+            width: 70%; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse {
+            border: 0.7em solid #587BDD;
+            background: transparent;
+            border-radius: 60px;
+            height: 30px;
+            width: 30px;
+            -webkit-animation: pulse 3s ease-out;
+            -moz-animation: pulse 3s ease-out;
+            animation: pulse 3s ease-out;
+            -webkit-animation-iteration-count: infinite;
+            -moz-animation-iteration-count: infinite;
+            animation-iteration-count: infinite;
+            margin: 0;
+            padding: 0;
+            margin-top: -7px;
+            margin-left: -31px;
+            z-index: 1;
+            opacity: 0; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
+            border: 0.7em solid #587BDD; }
+        #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
+          opacity: 1;
+          margin-left: -3em;
+          border-radius: 10%; }
+        #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
+          padding: 0;
+          margin: 0;
+          max-width: 80%;
+          float: none;
+          height: 30px; }
+        #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
+          float: left;
+          display: inline-block;
+          height: 30px; }
+          #conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
+            color: #587BDD; }
+      #conversejs #converse-roster .roster-contacts dd:hover {
+        background-color: #DCF9F6; }
+      #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
+        padding-top: 0.5em;
+        margin-right: 1em;
+        margin-left: 0.3em;
+        margin-bottom: 0.3em;
+        float: right; }
+      #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat {
+        max-width: 70%; }
+        #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
+          width: 100%; }
+      #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
+        line-height: 16px;
+        width: 69%;
+        padding: 0; }
+      #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
+        font-size: 16px;
+        float: left;
+        color: #587BDD;
+        margin-right: 0.5em; }
+      #conversejs #converse-roster .roster-contacts dd.odd {
+        background-color: #DCEAC5;
+        /* Make this difference */ }
+      #conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+      #conversejs #converse-roster .roster-contacts dd span {
+        padding: 0;
+        height: 100%; }
+      #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
+        margin-left: 5px; }
+      #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
+        font-size: 10px;
+        float: right;
+        margin-right: 1em;
+        padding-top: 0.5em;
+        color: #BBB; }
+  #conversejs #converse-roster span.pending-contact-name {
+    line-height: 16px;
+    width: 100%; }
+
+#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
+  width: 80%; }
+
+#converse-embedded-chat .new-chatroom-nick,
+#conversejs .new-chatroom-nick {
+  margin: 1em auto; }
+#converse-embedded-chat .add-chatroom input[type="submit"],
+#converse-embedded-chat .add-chatroom input[type="button"],
+#conversejs .add-chatroom input[type="submit"],
+#conversejs .add-chatroom input[type="button"] {
+  margin: 0.3em 0; }
+#converse-embedded-chat .chat-head-chatroom,
+#conversejs .chat-head-chatroom {
+  background-color: #E76F51; }
+  #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
+  #conversejs .chat-head-chatroom .chatbox-btn.button-on {
+    background-color: white;
+    color: #E76F51; }
+  #converse-embedded-chat .chat-head-chatroom .chatroom-description,
+  #conversejs .chat-head-chatroom .chatroom-description {
+    color: white;
+    font-size: 80%;
+    font-style: italic;
+    height: 1.3em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    margin-top: 0.3em; }
+#converse-embedded-chat .chatroom,
+#conversejs .chatroom {
+  width: 300px; }
+  @media screen and (max-height: 450px) {
+    #converse-embedded-chat .chatroom,
+    #conversejs .chatroom {
+      width: 100%; } }
+  @media screen and (max-width: 480px) {
+    #converse-embedded-chat .chatroom,
+    #conversejs .chatroom {
+      width: 100%; } }
+  #converse-embedded-chat .chatroom .box-flyout,
+  #conversejs .chatroom .box-flyout {
+    min-width: 300px;
+    width: 300px; }
+    @media screen and (max-height: 450px) {
+      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs .chatroom .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
+    @media screen and (max-width: 480px) {
+      #converse-embedded-chat .chatroom .box-flyout,
+      #conversejs .chatroom .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
+    #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
+    #conversejs .chatroom .box-flyout .chatroom-body {
+      height: 289px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      height: -webkit-calc(100% - 55px);
+      height: calc(100% - 55px);
+      background-color: white;
+      border-top: 0;
+      width: 100%; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
+      #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
+        font-weight: bold; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
+        color: #1A9707; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
+      #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
+        padding: 2em 2em 0 2em; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
+        word-wrap: break-word;
+        height: 100%;
+        width: 70%;
+        float: left;
+        min-width: 100%; }
+        #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: #E76F51;
+          max-width: 70%; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+          padding: 0 0.5em 0 0.5em; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
+          min-width: 100%; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
+          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
+            min-width: 100%; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
+      #conversejs .chatroom .box-flyout .chatroom-body .occupants {
+        overflow-x: hidden;
+        overflow-y: hidden;
+        float: right;
+        vertical-align: top;
+        background-color: white;
+        border-left: 1px solid #818479;
+        border-bottom-right-radius: 0;
+        width: 30%;
+        height: 100%;
+        padding: 0.5em; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+          padding: 0.3em 0;
+          font-weight: bold; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
+          position: absolute;
+          bottom: 0.5em;
+          width: 25%;
+          width: -webkit-calc(30% - 1em);
+          width: calc(30% - 1em); }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
+          padding: 0.2em; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
+          padding: 0.3em 0;
+          overflow-x: hidden;
+          overflow-y: auto;
+          list-style: none; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
+            overflow-y: auto;
+            height: -webkit-calc(100% - 220px);
+            height: calc(100% - 220px); }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
+            padding-top: 0; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
+            cursor: default;
+            display: block;
+            font-size: 14px;
+            overflow: hidden;
+            padding: 0.2em 0.5em 0.2em 0;
+            text-overflow: ellipsis;
+            white-space: nowrap; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
+              padding-right: 0.5em; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
+              font-size: 10px; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
+              cursor: pointer; }
+              #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
+              #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
+                display: inline-block;
+                margin-right: 0.5em;
+                width: 0.5em;
+                height: 0.5em; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
+                  background-color: #1A9707; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
+                  background-color: red; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
+                  background-color: darkorange; }
+                #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
+                #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
+                  background-color: orange; }
+            #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
+            #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
+              color: #D24E2B; }
+      #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
+      #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+        background-color: white;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border: 0;
+        color: #818479;
+        font-size: 15px;
+        height: 289px;
+        width: 100%;
+        height: -webkit-calc(100% - 55px);
+        height: calc(100% - 55px);
+        overflow-y: auto;
+        position: absolute; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
+          font-size: 90%;
+          color: #D24E2B; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
+          display: block; }
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
+        #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
+          margin: 0 0.5em; }
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
+  #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
+    border-bottom-right-radius: 0; }
+  #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
+  #conversejs .chatroom form.sendXMPPMessage .send-button {
+    background-color: #E76F51; }
+  #converse-embedded-chat .chatroom .room-invite .invited-contact,
+  #conversejs .chatroom .room-invite .invited-contact {
+    margin: -1px 0 0 -1px;
+    width: 100%;
+    border: 1px solid #999; }
+
+#conversejs .chat-head-chatroom {
+  height: 55px;
+  font-size: 20px; }
+  #conversejs .chat-head-chatroom .chatroom-description {
+    font-size: 66%;
+    margin-top: 3px;
+    margin-top: 0.5em; }
+#conversejs .chatroom {
+  width: -webkit-calc(100% - 250px);
+  width: calc(100% - 250px); }
+  #conversejs .chatroom .box-flyout {
+    background-color: #E76F51;
+    border: 1em solid #E76F51;
+    border-top: 0.8em solid #E76F51;
+    width: -webkit-calc(100% - 250px);
+    width: calc(100% - 250px); }
+    #conversejs .chatroom .box-flyout .chatroom-body {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; }
+      #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
+        border-top-left-radius: 0;
+        min-width: auto; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+          border-top-left-radius: 0;
+          padding: 0 1em 1em 1em; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
+          max-width: 100%; }
+          #conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
+            max-width: 100%; }
+      #conversejs .chatroom .box-flyout .chatroom-body .occupants {
+        border-top-right-radius: 0;
+        padding: 1em; }
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+          font-size: 17px; }
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
+          bottom: 1em;
+          width: 25%;
+          width: -webkit-calc(30% - 2em);
+          width: calc(30% - 2em); }
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
+          padding: 0.5em; }
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
+            padding: 0.3em 0; }
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
+          height: -webkit-calc(100% - 212px);
+          height: calc(100% - 212px); }
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
+            font-size: 14px;
+            width: 100%; }
+  #conversejs .chatroom .room-invite span .invited-contact {
+    margin: 0 0 0.5em -1px; }
+
+#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
+  background-color: #2A9D8F; }
+#conversejs .chatbox.headlines .flyout {
+  border: 1em solid #2A9D8F;
+  border-top: 0.8em solid #2A9D8F; }
+
+#converse-embedded-chat,
+#conversejs {
+  /* Pointer */ }
+  #converse-embedded-chat [hidden],
+  #conversejs [hidden] {
+    display: none; }
+  #converse-embedded-chat .visually-hidden,
+  #conversejs .visually-hidden {
+    position: absolute;
+    clip: rect(0, 0, 0, 0); }
+  #converse-embedded-chat div.awesomplete,
+  #conversejs div.awesomplete {
+    display: inline-block;
+    position: relative; }
+  #converse-embedded-chat div.awesomplete > input,
+  #conversejs div.awesomplete > input {
+    display: block; }
+  #converse-embedded-chat div.awesomplete > ul,
+  #conversejs div.awesomplete > ul {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    min-width: 100%;
+    box-sizing: border-box;
+    list-style: none;
+    padding: 0;
+    border-radius: .3em;
+    margin: .2em 0 0;
+    background: rgba(255, 255, 255, 0.9);
+    background: linear-gradient(to bottom right, white, rgba(255, 255, 255, 0.8));
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
+    text-shadow: none; }
+  #converse-embedded-chat div.awesomplete > ul[hidden],
+  #converse-embedded-chat div.awesomplete > ul:empty,
+  #conversejs div.awesomplete > ul[hidden],
+  #conversejs div.awesomplete > ul:empty {
+    display: none; }
+  @supports (transform: scale(0)) {
+    #converse-embedded-chat div.awesomplete > ul,
+    #conversejs div.awesomplete > ul {
+      transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
+      transform-origin: 1.43em -.43em; }
+    #converse-embedded-chat div.awesomplete > ul[hidden],
+    #converse-embedded-chat div.awesomplete > ul:empty,
+    #conversejs div.awesomplete > ul[hidden],
+    #conversejs div.awesomplete > ul:empty {
+      opacity: 0;
+      transform: scale(0);
+      display: block;
+      transition-timing-function: ease; } }
+  #converse-embedded-chat div.awesomplete > ul:before,
+  #conversejs div.awesomplete > ul:before {
+    content: "";
+    position: absolute;
+    top: -.43em;
+    left: 1em;
+    width: 0;
+    height: 0;
+    padding: .4em;
+    background: white;
+    border: inherit;
+    border-right: 0;
+    border-bottom: 0;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg); }
+  #converse-embedded-chat div.awesomplete > ul > li,
+  #conversejs div.awesomplete > ul > li {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    position: relative;
+    padding: .2em .5em;
+    cursor: pointer; }
+  #converse-embedded-chat div.awesomplete > ul > li:hover,
+  #conversejs div.awesomplete > ul > li:hover {
+    background: #b8d3e0;
+    color: black; }
+  #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
+  #conversejs div.awesomplete > ul > li[aria-selected="true"] {
+    background: #3d6d8f;
+    color: white; }
+  #converse-embedded-chat div.awesomplete mark,
+  #conversejs div.awesomplete mark {
+    background: #eaff00; }
+  #converse-embedded-chat div.awesomplete li:hover mark,
+  #conversejs div.awesomplete li:hover mark {
+    background: #b5d100; }
+  #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
+  #conversejs div.awesomplete li[aria-selected="true"] mark {
+    background: #3d6b00;
+    color: inherit; }
+
+/*# sourceMappingURL=inverse.css.map */

inverse.html

@@ -0,0 +1,52 @@
+<!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</title>
+    <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
+    <link type="text/css" rel="stylesheet" media="screen" href="css/inverse.css" />
+    <script src="node_modules/requirejs/require.js"></script>
+    <script src="src/config.js"></script>
+    <script src="inverse.js"></script>
+</head>
+<body>
+    <div class="content">
+        <div class="inner-content">
+        <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
+        <p class="no-chats">
+            You don't have any chats open.<br/></br/>
+            Start a new conversation by clicking on a contact or a room in the left navigation.
+        </p>
+        </div>
+    </div>
+<script>
+    require(['inverse'], function (converse) {
+        converse.initialize({
+            auto_away: 300,
+            i18n: 'en',
+            notify_all_room_messages: [
+                'discuss@conference.conversejs.org'
+            ],
+            whitelisted_plugins: [
+                'converse-inverse',
+                'converse-roomslist',
+                'converse-singleton',
+            ],
+            hide_open_bookmarks: true,
+            blacklisted_plugins: ['converse-minimize', 'converse-dragresize'],
+            chatview_avatar_width: 42,
+            chatview_avatar_height: 42,
+            auto_reconnect: true,
+            bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+            message_carbons: true,
+            message_archiving: 'always',
+            sticky_controlbox: true,
+            roster_groups: true,
+            show_controlbox_by_default: true,
+            debug: true
+        });
+    });
+</script>
+</body>
+</html>

sass/inverse/_bookmarks.scss

@@ -0,0 +1,17 @@
+#conversejs {
+    #controlbox {
+        #chatrooms {
+            .bookmarks-list {
+                dl.rooms-list.bookmarks {
+                    dd.available-chatroom {
+                        a {
+                            &.open-room {
+                                width: 80%;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

sass/inverse/_chatbox.scss

@@ -0,0 +1,55 @@
+#conversejs {
+    .chatbox-btn {
+        font-size: $font-size-large;
+    }
+    .flyout {
+        border: 1em solid $chat-head-color;
+        border-top: 0.8em solid $chat-head-color;
+        border-radius: 0;
+        bottom: 0;
+        bottom: 0;
+    }
+    .chat-head {
+        font-size: 20px;
+        padding: 0;
+        .user-custom-message {
+            font-size: 66%;
+            height: auto;
+            line-height: $line-height;
+        }
+        .avatar {
+            border-radius: 25%;
+        }
+    }
+    .chatbox {
+        height: 100%;
+        margin: 0;
+        @include calc(width, '100% - #{$controlbox-width}');
+        margin: 0;
+        .box-flyout {
+            @include calc(width, '100% - #{$controlbox-width}');
+            box-shadow: none;
+            min-width: auto;
+        }
+        .chat-content {
+            padding: 0 $padding $padding $padding;
+        }
+        .chat-title {
+            line-height: 17px;
+        }
+
+        form.sendXMPPMessage {
+            ul {
+                width: 100%;
+            }
+            .toggle-smiley {
+                padding-left: 0.5em;
+                ul {
+                    li {
+                        padding: 0.5em;
+                    }
+                }
+            }
+        }
+    }
+}

sass/inverse/_chatrooms.scss

@@ -0,0 +1,75 @@
+#conversejs {
+    .chat-head-chatroom {
+        height: $chatroom-head-height;
+        font-size: 20px;
+
+        .chatroom-description {
+            font-size: 66%;
+            margin-top: 3px;
+            margin-top: 0.5em;
+        }
+    }
+
+    .chatroom {
+        @include calc(width, '100% - #{$controlbox-width}');
+        .box-flyout {
+            background-color: $chatroom-head-color;
+            border: 1em solid $chatroom-head-color;
+            border-top: 0.8em solid $chatroom-head-color;
+            @include calc(width, '100% - #{$controlbox-width}');
+            .chatroom-body {
+                @include border-top-radius($chatbox-border-radius);
+                .chat-area {
+                    border-top-left-radius: $chatbox-border-radius;
+                    min-width: auto;
+                    .chat-content {
+                        border-top-left-radius: $chatbox-border-radius;
+                        padding: 0 $padding $padding $padding;
+                    }
+                    &.full {
+                        max-width: 100%;
+                        .new-msgs-indicator {
+                            max-width: 100%;
+                        }
+                    }
+                }
+                .occupants {
+                    border-top-right-radius: $chatbox-border-radius;;
+                    padding: $padding;
+                    .occupants-heading {
+                        font-size: $font-size-large;
+                    }
+                    .chatroom-features {
+                        bottom: $padding;
+                        width: 25%;
+                        @include calc(width, '30% - 2em');
+                    }
+                    .awesomplete {
+                        ul {
+                            padding: 0.5em;
+                            li {
+                                padding: 0.3em 0;
+                            }
+                        }
+                    }
+                    ul {
+                        &.occupant-list {
+                            @include calc(height, '100% - 212px');
+                            li {
+                                font-size: $font-size-small;
+                                width: 100%;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .room-invite {
+            span {
+                .invited-contact {
+                    margin: 0 0 0.5em -1px;
+                }
+            }
+        }
+    }
+}

sass/inverse/_controlbox.scss

@@ -0,0 +1,68 @@
+#conversejs {
+    #controlbox {
+        min-width: $controlbox-width;
+        width: 200px;
+        float: left;
+        margin: 0;
+
+        #login-dialog, #register {
+            .brand-heading {
+                margin: 10% 0 0 0;
+                font-size: 600%;
+                color: #577BDD;
+            }
+            .converse-form {
+                margin-top: 4em;
+            }
+        }
+
+        &.fullscreen {
+            width: 100%;
+            .box-flyout {
+                width: 100%;
+            }
+        }
+        .box-flyout {
+            border: 0;
+            background-color: white;
+            min-width: $controlbox-width;
+            width: 200px;
+            z-index: 1;
+            background-color: $controlbox-head-color;
+        }
+        .controlbox-head {
+            height: $controlbox-head-height;
+            padding: 6px 0 6px 0;
+            margin-top: 0.2em;
+        }
+        #converse-register, #converse-login {
+            margin: 30%;
+            margin-top: 15%;
+            #available-chatrooms {
+                padding: 0 1em 2em 1em;
+            }
+            input[type=submit] {
+                width: auto;
+                margin-top: 1.5em;
+            }
+        }
+        #controlbox-tabs {
+            /* single tab */
+            li {
+                width: 50%;
+                a {
+                    height: $controlbox-head-height - 1px;
+                    line-height: $controlbox-head-height - 1px;
+                    &.current,
+                    &.current:hover {
+                        height: $controlbox-head-height;
+                    }
+                    font-size: $font-size-large;
+                }
+            }
+        }
+        .controlbox-pane {
+            @include calc(height, '100% - #{$controlbox-head-height}');
+        }
+    }
+}

sass/inverse/_core.scss

@@ -0,0 +1,223 @@
+body {
+  width: 100%;
+  height: 100%;
+  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #ffffff;
+  background-color: $global-background-color;
+}
+
+div.content {
+    height: 100vh;
+    width: 100vw;
+    position: fixed;
+    background-color: $global-background-color;
+
+    .inner-content {
+        text-align: center;
+        padding: 7%;
+        @include calc(padding-left, '5% + #{$controlbox-width}');
+
+        .brand-heading {
+            font-size: 600%;
+            margin-left: -10%;
+        }
+        p.no-chats {
+            padding-right: 10%;
+            font-size: 120%;
+        }
+    }
+}
+
+#conversejs {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    bottom: 0;
+    color: $text-color;
+    direction: ltr;
+    display: block;
+    font-size: $font-size;
+    right: 0;
+    z-index: 1031; // One more than bootstrap navbar
+    @media screen and (max-height: $mobile-landscape-height) {
+        width: 100%;
+        width: 100vw;
+    }
+    @media screen and (max-width: $mobile-portrait-length) {
+        width: 100%;
+        width: 100vw;
+    }
+
+    ::selection {
+        background-color: $highlight-color;
+    }
+    ::-moz-selection {
+        background-color: $highlight-color;
+    }
+    .circle {
+        border-radius: 50%;
+    }
+    .no-text-select {
+        -webkit-touch-callout: none;
+        @include user-select(none);
+    }
+    .emoticon {
+        font-size: $font-size;
+    }
+    .left {
+        float: left;
+    }
+    .right {
+        float: right;
+    }
+    .centered {
+        text-align: center;
+        display: block;
+        margin: 5em auto;
+    }
+    .hor_centered {
+        text-align: center;
+        display: block;
+        margin: 0 auto;
+        clear: both;
+    }
+    .hidden {
+        display: none;
+    }
+    .locked {
+        padding-right: 22px;
+    }
+
+    @include keyframes(spin) {
+        from {
+            @include transform(rotate(0deg));
+        }
+        to {
+            @include transform(rotate(359deg));
+        }
+    }
+
+    .spinner {
+        @include animation(spin 2s infinite, linear);
+        display: block;
+        text-align: center;
+        margin: 5px;
+        &:before {
+            font-size: 24px;
+            font-family: 'Converse-js' !important;
+            content: "\231b";
+        }
+    }
+
+    .button-group,
+    .input-button-group {
+        display: table;
+    }
+    .button-group {
+        width: 100%;
+    }
+    .input-button-group button,
+    .input-button-group input {
+        display: table-cell;
+    }
+
+    .error {
+        color: red;
+    }
+    .reg-feedback {
+        font-size: 85%;
+    }
+
+    .reg-feedback,
+    #converse-login .conn-feedback {
+        display: block;
+        text-align: center;
+        width: 100%;
+    }
+
+    a.restore-chat {
+        padding: 1px 0 1px 5px;
+        color: $chat-head-text-color;
+        line-height: 15px;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    a.restore-chat:visited {
+        color: $chat-head-text-color;
+    }
+
+    .activated {
+        display: block !important;
+    }
+    .pure-button {
+        border-radius: $button-border-radius;
+    }
+    .button-primary {
+        color: white;
+        background-color: $primary-color;
+    }
+    .button-secondary {
+        color: white;
+        background-color: $secondary-color;
+    }
+    .button-cancel {
+        color: white;
+        background-color: $warning-color;
+    }
+
+    form {
+        &.pure-form.converse-form {
+            background: white;
+            margin: 1em;
+            legend {
+                color: $text-color;
+            }
+            label {
+                margin-top: 1em;
+            }
+            input[type=text],
+            input[type=password],
+            input[type=number],
+            input[type=button],
+            input[type=submit] {
+                height: 2.2em;
+            }
+            input[type=button],
+            input[type=submit] {
+                padding-left: 1em;
+                padding-right: 1em;
+                margin-right: 1em;
+            }
+            input.error {
+                border: 1px solid red;
+                color: $text-color;
+            }
+            .form-help {
+                color: gray;
+                font-size: 85%;
+                padding-top: 0.5em;
+                &:hover {
+                    color: $text-color;
+                }
+            }
+        }
+    }
+
+    .chat-textarea-chatbox-selected {
+        border: 1px solid #578308;
+        margin: 0;
+    }
+    .chat-textarea-chatroom-selected {
+        border: 2px solid $link-color;
+        margin: 0;
+    }
+
+    .dropdown dt,
+    .dropdown ul {
+        margin: 0;
+        padding: 0;
+    }
+}

sass/inverse/_headline.scss

@@ -0,0 +1,14 @@
+#conversejs {
+    .chatbox.headlines {
+        .chat-head {
+            &.chat-head-chatbox {
+                background-color: $headline-head-color;
+            }
+        }
+        .flyout {
+            border: 1em solid $headline-head-color;
+            border-top: 0.8em solid $headline-head-color;
+        }
+    }
+}
+

sass/inverse/_minimized_chats.scss

@@ -0,0 +1,59 @@
+#conversejs {
+    #minimized-chats {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        color: $inverse-link-color;
+        display: none;
+        float: right;
+        font-weight: bold;
+        height: 100%;
+        margin: 0 $chat-gutter;
+        padding: 0;
+        width: 130px;
+
+        #toggle-minimized-chats {
+            border-top-left-radius: $chatbox-border-radius;
+            border-top-right-radius: $chatbox-border-radius;
+            background-color: $link-color;
+            color: white;
+            position: relative;
+            padding: 10px 0 0 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+        }
+
+        .minimized-chats-flyout {
+            height: auto;
+            bottom: $bottom-gutter-height;
+            .chat-head {
+                padding: 0.3em;
+                border-radius: $chatbox-border-radius;
+                width: $minimized-chats-width;
+                height: 35px;
+                margin-bottom: 0.2em;
+                box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
+            }
+            &.minimized {
+                height: auto;
+            }
+        }
+
+        .unread-message-count,
+        .chat-head-message-count {
+            font-weight: bold;
+            background-color: white;
+            border: 1px solid;
+            text-shadow: 1px 1px 0 $text-shadow-color;
+            color: $warning-color;
+            border-radius: 5px;
+            padding: 2px 4px;
+            font-size: 16px;
+            text-align: center;
+            position: absolute;
+            right: 116px;
+            bottom: 10px;
+        }
+    }
+}

sass/inverse/_normalize.scss

@@ -0,0 +1,69 @@
+#conversejs {
+    @import "../pure/base";
+    @import "../pure/forms";
+    @import "../pure/buttons";
+
+    @include box-sizing(border-box);
+    *, *:before, *:after {
+        @include box-sizing(border-box);
+    }
+
+    @media screen and (max-width: $mobile-portrait-length) {
+        margin: 0;
+        right: 10px;
+        left: 10px;
+        bottom: 5px;
+    }
+    @media screen and (max-height: $mobile-landscape-height) {
+        margin: 0;
+        right: 10px;
+        left: 10px;
+        bottom: 5px;
+    }
+
+    ul li { height: auto; }
+    div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
+    pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend, table, caption, tbody,
+    tfoot, thead, tr, th, td, article, aside, canvas, details,
+    embed, figure, figcaption, footer, header, hgroup, menu,
+    nav, output, ruby, section, summary, time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+    }
+
+    textarea,
+    input[type=submit], input[type=button],
+    input[type=text], input[type=password],
+    button {
+        font-size: $font-size;
+        padding: 0.25em;
+        min-height: 0;
+    }
+
+    strong {
+        font-weight: 700;
+    }
+
+    ol, ul {
+        list-style: none;
+    }
+
+    li {
+        height: 10px;
+    }
+
+    ul, ol, dl {
+        font: inherit;
+        margin: 0;
+    }
+
+    a, a:visited {
+        text-decoration: none;
+        color: $link-color;
+        text-shadow: none;
+    }
+}

sass/inverse/_variables.scss

@@ -0,0 +1,94 @@
+/* 
+    Color scheme helpers:
+    https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
+    http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
+ */
+$global-background-color: #17818B !default;
+
+$link-color: #587BDD !default;
+$inverse-link-color: white !default;
+$link-shadow-color: #FAFAFA !default;
+$text-shadow-color: #FAFAFA !default;
+$text-color: #818479 !default;
+$light-text-color: #A8ABA1 !default;
+$border-color: #CCC !default;
+$icon-color: #114327 !default;
+$save-button-color: #436F64 !default;
+$chat-textarea-height: 70px !default;
+$send-button-height: 27px !default;
+$send-button-margin: 3px !default;
+$message-them-color: #1A9707 !default;
+$roster-height: 194px !default;
+$roster-item-height: 30px !default;
+
+$chat-head-color: #F4A261 !default;
+$chat-head-text-color: white !default;
+$chat-head-inverse-text-color: white !default;
+$chat-head-height: 55px !default;
+$controlbox-head-height: 63px !default;
+$chatroom-head-height: 55px !default;
+
+$input-focus-color: #1A9707 !default;
+$highlight-color: #DCF9F6 !default;
+
+$controlbox-head-color: #577BDD !default;
+$controlbox-dropdown-height: 25px !default;
+
+$primary-color: #2AC611 !default;
+$secondary-color: #83A0D6 !default;
+$warning-color: #D24E2B !default;
+
+$light-background-border-color: #B1BFC4 !default;
+$light-background-color: #FCFDFD !default;
+
+$toolbar-height: 25px !default;
+$toolbar-color: #FFF5EE !default;
+
+$moderator-color: #D24E2B !default;
+$online-color: #1A9707 !default;
+$error-color: #D24E2B !default;
+$subdued-color: #BBB !default;
+
+$button-border-radius: 4px !default;
+$chatbox-border-radius: 0 !default;
+$bottom-gutter-height: 35px !default;
+$chatbox-hover-height: 6px !default;
+
+$mobile_landscape_height: 450px !default;
+$mobile_portrait_length: 480px !default;
+
+$font-size-tiny: 10px !default;
+$font-size-small: 14px !default;
+$font-size: 15px !default;
+$font-size-large: 17px !default;
+$legend-font-size: 17px !default;
+
+$line-height:  16px !default;
+
+$controlbox-width: 250px !default;
+$chat-width: 100% !default;
+$chat-height: 100%;
+$chat-gutter: 0.5em !default;
+$minimized-chats-width: 130px !default;
+
+$padding: 1em;
+
+$mobile-chat-width: 100% !default;
+$mobile-chat-height: 400px !default;
+$small-mobile-chat-height: 300px !default;
+
+/* $font-path: "../fonticons/fonts/" !default; */
+$font-path: "https://cdn.conversejs.org/fonticons/fonts/" !default;
+
+$chatroom-width: 300px !default;
+$chatroom-head-color: #E76F51 !default;
+$chatroom-color-light: #FF977C !default;
+$chatroom-color-dark: #D24E2B !default;
+
+$headline-head-color: #2A9D8F !default;
+
+$box-close-button-padding-top: 4px !default;
+$box-close-button-padding-bottom: 4px !default;
+$box-close-button-padding-left: 4px !default;
+$box-close-button-padding-right: 4px !default;
+$box-close-font-size: 16px !default;

sass/inverse/inverse.scss

@@ -0,0 +1,24 @@
+/*!
+ * Converse.js (Web-based XMPP instant messaging client)
+ * http://conversejs.org
+ *
+ * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
+ * Licensed under the Mozilla Public License
+ */
+
+@import "bourbon";
+@import "variables";
+@import "../fonts";
+@import "normalize";
+@import "core";
+@import "../chatbox";
+@import "chatbox";
+@import "../controlbox";
+@import "controlbox";
+@import "../roster";
+@import "../bookmarks";
+@import "bookmarks";
+@import "../chatrooms";
+@import "chatrooms";
+@import "headline";
+@import "../awesomplete"

src/config.js

@@ -45,6 +45,7 @@ require.config({
 
         // Converse
         "converse":                 "src/converse",
+        "inverse":                  "src/inverse",
 
         "converse-bookmarks":       "src/converse-bookmarks",
         "converse-chatview":        "src/converse-chatview",
@@ -52,6 +53,7 @@ require.config({
         "converse-core":            "src/converse-core",
         "converse-dragresize":      "src/converse-dragresize",
         "converse-headline":        "src/converse-headline",
+        "converse-inverse":         "src/converse-inverse",
         "converse-mam":             "src/converse-mam",
         "converse-minimize":        "src/converse-minimize",
         "converse-muc":             "src/converse-muc",

src/converse-inverse.js

@@ -0,0 +1,122 @@
+// Converse.js (A browser based XMPP chat client)
+// http://conversejs.org
+//
+// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
+// Licensed under the Mozilla Public License (MPLv2)
+//
+/*global Backbone, define, window */
+
+(function (root, factory) {
+    define(["converse-core",
+            "converse-chatview",
+            "converse-controlbox",
+            "converse-muc",
+            "converse-singleton"
+    ], factory);
+}(this, function (converse) {
+    "use strict";
+    var $ = converse.env.jQuery,
+        Strophe = converse.env.Strophe,
+        _ = converse.env._;
+
+    converse.plugins.add('converse-inverse', {
+
+        overrides: {
+            // overrides mentioned here will be picked up by converse.js's
+            // plugin architecture they will replace existing methods on the
+            // relevant objects or classes.
+            //
+            // new functions which don't exist yet can also be added.
+
+            areDesktopNotificationsEnabled: function () {
+                // Call with "ignore_hidden" as true, so that it doesn't check
+                // if the windowState is hidden.
+                return this.__super__.areDesktopNotificationsEnabled.call(this, true);
+            },
+
+            shouldNotifyOfMessage: function (message) {
+                var _converse = this.__super__._converse;
+                var result = this.__super__.shouldNotifyOfMessage.apply(this, arguments);
+                return result && _converse.isMessageToHiddenChat(message);
+            },
+
+            ControlBoxView: {
+                close: function (ev) {
+                    if (ev && ev.preventDefault) {
+                        ev.preventDefault();
+                    }
+                    // The controlbox cannot be closed.
+                },
+
+                hide: function (ev) {
+                    if (ev && ev.preventDefault) {
+                        ev.preventDefault();
+                    }
+                    // The controlbox cannot be hidden
+                },
+
+                renderContactsPanel: function () {
+                    this.__super__.renderContactsPanel.apply(this, arguments);
+                    this.el.classList.remove("fullscreen");
+                    return this;
+                },
+
+                renderRegistrationPanel: function () {
+                    this.__super__.renderRegistrationPanel.apply(this, arguments);
+
+                    // TODO: put into template
+                    var div = document.createElement('div');
+                    div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
+                    var el = document.getElementById('converse-register');
+                    el.parentNode.insertBefore(div.firstChild, el);
+                    return this;
+                },
+
+                renderLoginPanel: function () {
+                    this.__super__.renderLoginPanel.apply(this, arguments);
+                    this.el.classList.add("fullscreen");
+
+                    // TODO: put into template
+                    var div = document.createElement('div');
+                    div.innerHTML = '<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>';
+                    var el = document.getElementById('converse-login');
+                    el.parentNode.insertBefore(div.firstChild, el);
+                    return this;
+                }
+            },
+
+            ChatRoomView: {
+                afterShown: function (focus) {
+                    /* Make sure chat rooms are scrolled down when opened
+                     */
+                    this.scrollDown();
+                    if (focus) {
+                        this.focus();
+                    }
+                    return this.__super__.afterShown.apply(this, arguments);
+                }
+            }
+        },
+
+        initialize: function () {
+            var _converse = this._converse;
+
+            this.updateSettings({
+                sticky_controlbox: true,
+                sounds_path: '/node_modules/converse.js/sounds/', // New default
+                notification_icon: '/node_modules/converse.js/logo/conversejs128.png', // New default
+            });
+
+            _converse.isMessageToHiddenChat = function (message) {
+                var jid = Strophe.getBareJidFromJid(message.getAttribute('from'));
+                var model = _converse.chatboxes.get(jid);
+                if (!_.isNil(model)) {
+                    return model.get('hidden');
+                }
+                // Not having a chat box is assume to be practically the same
+                // as it being hidden.
+                return true;
+            }
+        }
+    });
+}));

src/inverse.js

@@ -0,0 +1,36 @@
+/* Converse.js components configuration
+ *
+ * This file is used to tell require.js which components (or plugins) to load
+ * when it generates a build.
+ */
+if (typeof define !== 'undefined') {
+    /* When running tests, define is not defined. */
+    define("inverse", [
+        "converse-core",
+        /* START: Removable components
+        * --------------------
+        * Any of the following components may be removed if they're not needed.
+        */
+        "converse-chatview",    // Renders standalone chat boxes for single user chat
+        "converse-controlbox",  // The control box
+        "converse-bookmarks",   // XEP-0048 Bookmarks
+        "converse-roomslist",   // Show currently open chat rooms
+        "converse-mam",         // XEP-0313 Message Archive Management
+        "converse-muc",         // XEP-0045 Multi-user chat
+        "converse-vcard",       // XEP-0054 VCard-temp
+        "converse-otr",         // Off-the-record encryption for one-on-one messages
+        "converse-register",    // XEP-0077 In-band registration
+        "converse-ping",        // XEP-0199 XMPP Ping
+        "converse-notification",// HTML5 Notifications
+        "converse-headline",    // Support for headline messages
+
+        "converse-inverse",     // Inverse plugin for converse.js
+        /* END: Removable components */
+
+    ], function(converse) {
+        var $ = converse.env.jQuery;
+        window.converse = converse;
+        $(window).trigger('converse-loaded', converse);
+        return converse;
+    });
+}