diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss
index dcc4b83b..4b40a7b8 100644
--- a/src/styles/components/_buddylist.scss
+++ b/src/styles/components/_buddylist.scss
@@ -18,168 +18,181 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #buddylist {
-position: absolute;
-top: 0px;
-right: 0px;
-bottom: 0px;
-width:285px;
-z-index:50;
-}
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 285px;
+  z-index: 50;
+}
+
 #buddylist:before {
-position:absolute;
-width:25px;
-height:55px;
-line-height:55px;
-margin: auto;
-left: 0px;
-top:0px;
-bottom:0px;
-content:"\f100";
-font-family: 'FontAwesome';
-color:rgba(0,0,0,0.3);
-font-size:1.8em;
-text-align:center;
-cursor:pointer;
-pointer-events:auto;
-background:$componentbg;
-border-left:1px solid $bordercolor;
-border-top:1px solid $bordercolor;
-border-bottom:1px solid $bordercolor;
--webkit-border-top-left-radius: 6px;
--webkit-border-bottom-left-radius: 6px;
--moz-border-radius-topleft: 6px;
--moz-border-radius-bottomleft: 6px;
-border-top-left-radius: 6px;
-border-bottom-left-radius: 6px;
-display:none;
-}
+  background: $componentbg;
+  border-left: 1px solid $bordercolor;
+  border-top: 1px solid $bordercolor;
+  border-bottom: 1px solid $bordercolor;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+  bottom: 0;
+  color: $buddylist-background;
+  content: "\f100";
+  cursor: pointer;
+  display: none;
+  font-family: FontAwesome;
+  font-size: 1.8em;
+  height: 55px;
+  left: 0;
+  line-height: 55px;
+  margin: auto;
+  pointer-events: auto;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 25px;
+}
+
 .withBuddylist #buddylist:before {
-content:"\f101";
+  content: "\f101";
 }
+
 .withBuddylistAutoHide #buddylist:before {
-display:block;
+  display: block;
 }
+
 .buddylist {
-position:absolute;
-left:25px;
-right:0px;
-top:0px;
-bottom:0px;
-overflow-x: hidden;
-overflow-y: auto;
-border-top: 1px solid $bordercolor;
-background: $componentbg;
-pointer-events:auto;
-}
-.buddylist .buddycontainer {
--webkit-user-select: none;
-position: relative;
-pointer-events:auto;
-}
-.buddylist .buddylistloading, .buddylist .buddylistempty {
-padding:.4em;
-font-size:1.4em;
-text-align:center;
-display:none;
-position:absolute;
-left:0px;
-right:0px;
-bottom:0px;
-top:0px;
-margin:auto;
-height:2em;
-color:rgba(0,0,0,0.3);
-}
-.buddylist.loading .buddylistloading {
-display:block;
-}
-.buddylist.empty .buddylistempty {
-display:block;
-}
+  background: $componentbg;
+  border-top: 1px solid $bordercolor;
+  bottom: 0;
+  left: 25px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  pointer-events: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.buddylist {
+  &.loading {
+    .buddylistloading {
+      display:block;
+    }
+  }
+  &.empty {
+    .buddylistempty {
+      display:block;
+    }
+  }
+  .buddycontainer {
+    pointer-events: auto;
+    position: relative;
+    user-select: none;
+  }
+  .buddylistloading,
+  .buddylistempty {
+    bottom: 0;
+    color: $buddylist-background;
+    display: none;
+    font-size: 1.4em;
+    height: 2em;
+    left: 0;
+    margin: auto;
+    padding:.4em;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+  }
+}
+
 .buddy {
-overflow: hidden;
-height: 66px;
-display: block;
-border-bottom: 1px solid $bordercolor;
-position: relative;
-cursor: pointer;
-text-align: left;
-width: 100%;
-font-size: 13px;
-background: $sidepanebg;
--webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
+  background: $sidepanebg;
+  border-bottom: 1px solid $bordercolor;
+  cursor: pointer;
+  display: block;
+  font-size: 13px;
+  height: 66px;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  @include tap-highlight-color($tap-highlight);
+}
+
 .buddy:hover {
-background: $componentbg;
-}
-.buddy > .buddyimage {
-float:left;
-height: 46px;
-width: 46px;
-overflow: hidden;
-margin: 10px;
-position: relative;
-border-radius: 2px;
-background: $actioncolor1;
-text-align:center;
-}
-.buddy > .buddyimage > i {
-line-height:46px;
-color:$actioncolor2;
-}
-.buddy > .buddyimage > img {
-position: absolute;
-left:0px;
-right:0px;
-bottom:0px;
-top:0px;
-display:block;
-}
-.buddy > .buddy1 {
-position: absolute;
-left: 65px;
-white-space: nowrap;
-overflow: hidden;
-right: 4px;
-height: 28px;
-color: $componentfg1;
-font-weight:bold;
-font-size:14px;
-top: 24px;
-text-overflow: ellipsis;
-}
-.buddy.withSubline > .buddy1 {
-top: 15px;
-}
-.buddy > .buddy2 {
-position: absolute;
-left: 65px;
-white-space: nowrap;
-overflow: hidden;
-right: 0px;
-color: $componentfg2;
-top: 33px;
+  background: $componentbg;
 }
+
+.buddy {
+  &.withSubline .display-name {
+    top: 15px;
+  }
+  &.hovered .buddyactions {
+    right: 0;
+  }
+  .avatar {
+    background: $actioncolor1;
+    border-radius: 2px;
+    float: left;
+    height: 46px;
+    margin: 10px;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    width: 46px;
+    .#{$fa-css-prefix} {
+      color: $actioncolor2;
+      line-height: 46px;
+    }
+    img {
+      bottom: 0;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  .display-name {
+    color: $componentfg1;
+    font-weight: bold;
+    font-size: 14px;
+    height: 28px;
+    left: 65px;
+    position: absolute;
+    overflow: hidden;
+    right: 4px;
+    text-overflow: ellipsis;
+    top: 24px;
+    white-space: nowrap;
+  }
+  .browser {
+    color: $componentfg2;
+    left: 65px;
+    overflow: hidden;
+    position: absolute;
+    right: 0px;
+    top: 33px;
+    white-space: nowrap;
+  }
+}
+
 .buddy .buddyactions {
-position:absolute;
-right:-125px;
-top:0px;
-bottom:0px;
-background:rgba(255,255,255,0.5);
-z-index:5;
-line-height:66px;
-padding:0 10px;
-transition-property: right;
--webkit-transition-property: right;
-transition-duration: .3s;
--webkit-transition-duration: .3s;
-white-space:nowrap;
-text-align:right;
-}
-.buddy .buddyactions i {
-font-size:2em;
-}
-.buddy.hovered .buddyactions {
-right:0px;
+  background: $buddylist-action-background;
+  bottom: 0px;
+  line-height: 66px;
+  position: absolute;
+  right: -125px;
+  padding: 0 10px;
+  text-align: right;
+  top: 0px;
+  transition-property: right;
+  transition-duration: .3s;
+  white-space: nowrap;
+  z-index: 5;
+  .#{$fa-css-prefix} {
+    font-size: 2em;
+  }
 }
diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss
index 019c0d7d..6ec2c2a7 100644
--- a/src/styles/components/_chat.scss
+++ b/src/styles/components/_chat.scss
@@ -18,499 +18,491 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #chat {
-position: absolute;
-bottom:0px;
-right:260px;
-width:260px;
-top:0px;
-pointer-events: none;
-z-index:45;
--webkit-perspective: 1000;
--moz-perspective: 1000;
--o-perspective: 1000;
-perspective: 1000;
+  bottom: 0;
+  perspective: 1000;
+  pointer-events: none;
+  position: absolute;
+  right: 260px;
+  top: 0;
+  width: 260px;
+  z-index: 45;
 }
+
 .withChat #chat .chatcontainer {
-left:0px;
+  left:0px;
 }
-.withChat.withChatMaximized #chat {
-left:0px;
-width:auto;
-	.chatcontainer {
-		width:auto;
-	}
-}
-.chatcontainer {
-position:absolute;
-top:0px;
-left:260px;
-right:0px;
-bottom:0px;
-width:260px;
-overflow:hidden;
--webkit-transition: left 200ms ease-in-out;
--moz-transition: left 200ms ease-in-out;
--ms-transition: left 200ms ease-in-out;
--o-transition: left 200ms ease-in-out;
-transition: left 200ms ease-in-out;
-background: #e7e7e7;
-}
-.chatlist {
-position:absolute;
-top:0px;
-left:100%;
-bottom:0px;
-width:100%;
-background: #e7e7e7;
--webkit-transition: left 200ms ease-in-out;
--moz-transition: left 200ms ease-in-out;
--ms-transition: left 200ms ease-in-out;
--o-transition: left 200ms ease-in-out;
-transition: left 200ms ease-in-out;
-	.list-group {
-		margin-top:-1px;
-		margin-bottom:-1px;
-		max-height:100%;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-	.list-group-item {
-		border-right:none;
-		border-left:none;
-		-webkit-border-radius: 0px;
-        -moz-border-radius: 0px;
-        border-radius: 0px;
-        position:relative;
-	}
-	.list-group-item .fa-lg {
-		display:inline-block;
-		width:18px;
-		text-align:center;
-	}
-	.list-group-item .badge {
-		background: #84b819;
-		border: 1px solid white;
-		font-size:.8em;
-	}
-	.list-group-item {
-		padding-right: 30px;
-	}
-	.list-group-item.disabled {
-		color:#aaa;
-	}
-	.list-group-item > .item-btn {
-		position:absolute;
-		right:12px;
-		cursor: pointer;
-		display:none;
-	}
-	.list-group-item:hover > .item-btn {
-		display:inline;
-	}
 
-}
-.chatpane {
-position:absolute;
-top:0px;
-right:0px;
-bottom:0px;
-width:100%;
--webkit-transition: 0.3s;
--webkit-transform-style: preserve-3d;
--moz-transition: 0.3s;
--moz-transform-style: preserve-3d;
--o-transition: 0.3s;
--o-transform-style: preserve-3d;
-transition: 0.3s;
-transform-style: preserve-3d;
--webkit-backface-visibility: hidden;
--moz-backface-visibility: hidden;
--o-backface-visibility: hidden;
-backface-visibility: hidden;
-}
-.showchatlist .chatpane {
-right:100%;
-}
-.showchatlist .chatlist {
-left:0px;
-}
 .withChat .chatpane.flip {
--webkit-transform: rotateY(360deg);
--moz-transform: rotateY(360deg);
--o-transform: rotateY(360deg);
-transform: rotateY(360deg);
-}
-.chat {
-pointer-events: auto;
-position:absolute;
-top:0px;
-bottom:0px;
-right:0px;
-left:0px;
-background: #e7e7e7;
-overflow:hidden;
-display:none;
-}
-.chat.visible {
-}
-.chat.visible.active {
-display:block;
-}
-.chat .chatbody {
-position:absolute;
-bottom:-1px;
-left:0px;
-right:0px;
-top: 36px;
-border-right:1px solid $bordercolor;
-}
-.chat.active .chatbody {
-}
-.chat .chatheader {
-position:absolute;
-left:0px;
-right:0px;
-top:0px;
-background: $componentbg;
-padding:0px 4px 0px 8px;
-border-top: 1px solid $bordercolor;
-border-bottom: 1px solid $bordercolor;
-border-right: 1px solid $bordercolor;
-height:36px;
-line-height:34px;
-}
-.chat.active .chatheader {
-}
-.chat .chatheader .chatstatusicon {
-position:absolute;
-left:0px;
-top:0px;
-font-size:1.4em;
-width:36px;
-height:36px;
-display:block;
-text-align:center;
-cursor: pointer;
-}
-.chat .chatheader .chatheadertitle {
-padding-left:28px;
-display:inline;
-}
-.chat .chatheader .ctrl {
-position:absolute;
-top:0px;
-right:1px;
-color:rgba(0,0,0,0.3);
-}
-.chat .chatheader span {
-display: inline-block;
-max-width:60%;
-text-overflow:ellipsis;
-white-space:nowrap;
-overflow:hidden;
-pointer-events: none;
-vertical-align: middle;
-}
-.chat .chatheader .ctrl i {
-padding:6px;
-cursor: pointer;
-}
-.chat .outputbox {
-position:absolute;
-left:0px;
-right:0px;
-top:0px;
-bottom:75px;
-}
-.chat .output {
-overflow-x: hidden;
-overflow-y: auto;
-padding: 0.4em 0;
-height:100%;
-}
-.chat .output > i {
-font-size:0.8em;
-color: #aaa;
-display:block;
-padding:6px 0;
-text-align:center;
-clear:both;
-}
-.chat .output > i.p2p {
-padding:6px 0;
-font-weight: bold;
-}
-.chat .output .message {
-background: #fff;
-border: 1px solid #e5e5ef;
-border-radius: 6px;
-margin-bottom: 2px;
-position: relative;
-word-wrap: break-word;
-padding:8px;
-margin-left:20px;
-margin-right:4px;
-clear:both;
-display:block;
-}
-
-.chat .output .message .timestamp {
-font-size:0.8em;
-color: #aaa;
-text-align:right;
-position:absolute;
-top:8px;
-right:8px;
+  transform: rotateY(360deg);
 }
 
-.chat.with_pictures .output .message.is_self .timestamp {
-right:58px;
+.withChat.withChatMaximized #chat {
+  left: 0;
+  width: auto;
+    .chatcontainer {
+      width: auto;
+    }
 }
 
-.chat .output .message > ul {
-list-style-type: none;
-margin:0;
-padding-left:0;
+.chatcontainer {
+  background: $chat-background;
+  bottom: 0;
+  left: 260px;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: left 200ms ease-in-out;
+  width: 260px;
 }
 
-.chat .output .message > ul > li {
-line-height:1.1em;
-margin:4px 0;
-padding-left:1.2em;
-position:relative;
+.showchatlist {
+  .chatpane {
+    right: 100%;
+  }
+  .chatlist {
+    left: 0;
+  }
 }
 
-.chat .message li:before {
-font-family: 'FontAwesome';
-content: '\f075';
-color:#ccc;
-position:absolute;
-left:0px;
-width:12px;
-text-align:center;
+.chatlist {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  width: 100%;
+  background: $chat-background;
+  transition: left 200ms ease-in-out;
+  .list-group {
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    max-height: 100%;
+  }
+  .list-group-item {
+    border-right: none;
+    border-left: none;
+    border-radius: 0;
+    position: relative;
+  }
+  .list-group-item.newmessage {
+    animation: newmessage 1s ease -0.3s infinite;
+  }
+  .list-group-item .fa-lg {
+    display: inline-block;
+    text-align: center;
+    width: 18px;
+  }
+  .list-group-item .badge {
+    background: $chat-badge;
+    border: 1px solid white;
+    font-size: .8em;
+  }
+  .list-group-item {
+    padding-right: 30px;
+  }
+  .list-group-item.disabled {
+    color: $chat-disabled;
+  }
+  .list-group-item > .item-btn {
+    cursor: pointer;
+    display:none;
+    position:absolute;
+    right:12px;
+  }
+  .list-group-item:hover > .item-btn {
+    display:inline;
+  }
 }
 
-.chat .message.is_self li:before {
-moz-transform: scale(-1, 1);
--webkit-transform: scale(-1, 1);
-transform: scale(-1, 1);
-color:#ccc;
+.chatpane {
+  backface-visibility: hidden;
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: 0.3s;
+  transform-style: preserve-3d;
+  width: 100%;
 }
 
-.chat .message li.unread:before {
-content: '\f0eb';
-color: #FE9A2E;
+.chat {
+  background: $chat-background;
+  display: none;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  pointer-events: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
-.chat .message li.sending:before {
-content: '\f0ec';
+.chat {
+  &.active {
+    &.visible {
+      display:block;
+    }
+    .chatbody {
+      // nothing
+    }
+    .chatheader {
+      // nothing
+    }
+  }
 }
 
-.chat .message li.sent:before {
-content: '\f003';
-color:#5882FA;
+.chatbody {
+  border-right: 1px solid $bordercolor;
+  bottom: -1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 36px;
 }
 
-.chat .message li.delivered:before {
-content: '\f019';
-color:#5882FA;
+.chatheader {
+  background: $componentbg;
+  border-top: 1px solid $bordercolor;
+  border-bottom: 1px solid $bordercolor;
+  border-right: 1px solid $bordercolor;
+  height: 36px;
+  left: 0;
+  line-height: 34px;
+  padding: 0 4px 0 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  .chatstatusicon {
+    cursor: pointer;
+    display: block;
+    font-size: 1.4em;
+    height: 36px;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 36px;
+  }
+  .chatheadertitle {
+    padding-left: 28px;
+    display: inline;
+  }
+  .ctrl {
+    color: $chat-ctrl;
+    position: absolute;
+    right: 1px;
+    top: 0;
+    .#{$fa-css-prefix} {
+      cursor: pointer;
+      padding: 6px;
+    }
+  }
+  span {
+    display: inline-block;
+    max-width: 60%;
+    overflow: hidden;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
 }
 
-.chat .message li.received:before {
-content: '\f06e';
-color:#84b819;
+.chat .outputbox {
+  bottom: 75px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
-.chat .message li.read:before {
-content: '\f00c';
-color:#ccc;
+.chat .output {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0.4em 0;
+  > i {
+    clear: both;
+    color: #aaa;
+    display: block;
+    font-size: 0.8em;
+    padding: 6px 0;
+    text-align: center;
+    &.p2p {
+      padding: 6px 0;
+      font-weight: bold;
+    }
+  }
 }
 
-.chat .output .message .buddyimage {
-position: absolute;
-top: 4px;
-width:46px;
-height:46px;
-left: 4px;
-overflow: hidden;
-border-radius: 2px;
-background: $actioncolor1;
-text-align:center;
-}
-.chat .output .message.is_self .buddyimage {
-right: 4px;
-left: auto;
-}
-.chat .output .message .buddyimage > i {
-line-height:46px;
-color:$actioncolor2;
-}
-.chat .output .message .buddyimage > img {
-position: absolute;
-left:0px;
-right:0px;
-bottom:0px;
-top:0px;
-display:block;
+.chat.with_pictures .output .message.is_self .timestamp {
+  right: 58px;
 }
-
 .chat.with_pictures .output .message.is_remote {
-padding-left: 58px;
-}
-
-.chat .output .message:before, .chat .output .message:after {
-content:"";
-position:absolute;
-border-style: solid;
-width:0;
-display:block;
-}
-.chat .output .message.is_remote:before {
-top:4px;
-bottom:auto;
-left:-16px;
-border-width: 10px 17px 10px 0;
-border-color: transparent #fff;
+  padding-left: 58px;
 }
-.chat .output .message.is_remote:after {
-top:5px;
-bottom:auto;
-left:-15px;
-border-width: 9px 15px 9px 0;
-border-color: transparent #fff;
-}
-.chat .output .message.is_self:before {
-top:4px;
-bottom:auto;
-right:-16px;
-border-width: 10px 0 10px 17px;
-border-color: transparent #fff;
-}
-.chat .output .message.is_self:after {
-top:5px;
-bottom:auto;
-right:-15px;
-border-width: 9px 0 9px 15px;
-border-color: transparent #fff;
+.chat.with_pictures .output .message.is_self {
+  padding-right:54px;
 }
 
-.chat .output .message.with_name {
-}
 
-.chat .output .message.is_self {
-background: #fff;
-margin-right:20px;
-margin-left:4px;
-padding-right:0px;
-}
-.chat.with_pictures .output .message.is_self {
-padding-right:54px;
+.chat .message {
+  background: #fff;
+  border: 1px solid #e5e5ef;
+  border-radius: 6px;
+  clear: both;
+  display: block;
+  margin-bottom: 2px;
+  padding: 8px;
+  position: relative;
+  margin-left: 20px;
+  margin-right: 4px;
+  word-wrap: break-word;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 0;
+  }
+  li {
+    line-height: 1.1em;
+    margin: 4px 0;
+    padding-left: 1.2em;
+    position: relative;
+    &:before {
+      color: #ccc;
+      content: '\f075';
+      font-family: FontAwesome;
+      left: 0;
+      text-align: center;
+      position: absolute;
+      width: 12px;
+    }
+  }
+  .timestamp {
+    color: $chat-timestamp;
+    font-size: 0.8em;
+    position: absolute;
+    right: 8px;
+    text-align: right;
+    top: 8px;
+  }
 }
 
-.chat .output .message strong {
-display:block;
-padding-bottom:2px;
-margin-right:40px;
-white-space:nowrap;
-overflow:hidden;
-text-overflow:ellipsis;
+.chat .message {
+  &.is_self li:before {
+    color:#ccc;
+    transform: scale(-1, 1);
+  }
+  li {
+    &.unread:before {
+      content: '\f0eb';
+      color: #FE9A2E;
+    }
+    &.sending:before {
+      content: '\f0ec';
+    }
+    &.sent:before {
+      content: '\f003';
+      color:#5882FA;
+    }
+    &.delivered:before {
+      content: '\f019';
+      color:#5882FA;
+    }
+    &.received:before {
+      content: '\f06e';
+      color:#84b819;
+    }
+    &.read:before {
+      content: '\f00c';
+      color:#ccc;
+    }
+  }
 }
 
-.chat .chatbodybottom {
-	background: #e7e7e7;
-	position: absolute;
-	left:0px;
-	bottom:1px;
-	right:0px;
-	margin:0 auto;
+.chat .message {
+  &.is_self .avatar {
+    right: 4px;
+    left: auto;
+  }
+  .avatar {
+    position: absolute;
+    top: 4px;
+    width:46px;
+    height:46px;
+    left: 4px;
+    overflow: hidden;
+    border-radius: 2px;
+    background: $actioncolor1;
+    text-align:center;
+    .#{$fa-css-prefix} {
+      line-height:46px;
+      color:$actioncolor2;
+    }
+    img {
+      position: absolute;
+      left:0px;
+      right:0px;
+      bottom:0px;
+      top:0px;
+      display:block;
+    }
+  }
 }
 
-.chat .typinghint {
-padding:2px 6px 0 6px;
-white-space: nowrap;
-overflow: hidden;
-font-size:.8em;
-color: #aaa;
-height:14px;
-}
-.chat .inputbox {
-position:relative;
-}
-.chat .inputbox .btn {
-position:absolute;
-right:6px;
-top:1px;
-padding: 0.5em 1em;
-display:none;
-}
-.chat .inputbox > div {
-border-top:1px solid $bordercolor;
-}
-.chat .input {
-display:block;
-resize: none;
-width:100%;
-height:54px;
-max-height:54px; /* FF hack */
-margin:0px;
--webkit-border-radius: 0px;
--moz-border-radius: 0px;
-border-radius: 0px;
-border-color:transparent;
--webkit-box-shadow: none;
--moz-box-shadow: none;
-box-shadow: none;
-}
-.chat .input.active, .chat .input:active, .chat .input:focus {
-border-color:#66afe9;
+.chat .message {
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+    width: 0;
+    display: block;
+  }
+  &.is_remote {
+    &:before {
+      top: 4px;
+      bottom: auto;
+      left: -16px;
+      border-width: 10px 17px 10px 0;
+      border-color: transparent #fff;
+    }
+    &:after {
+      top:5px;
+      bottom:auto;
+      left:-15px;
+      border-width: 9px 15px 9px 0;
+      border-color: transparent #fff;
+    }
+  }
+  &.is_self {
+    background: #fff;
+    margin-right:20px;
+    margin-left:4px;
+    padding-right:0px;
+    &:before {
+      top:4px;
+      bottom:auto;
+      right:-16px;
+      border-width: 10px 0 10px 17px;
+      border-color: transparent #fff;
+    }
+    &:after {
+      top:5px;
+      bottom:auto;
+      right:-15px;
+      border-width: 9px 0 9px 15px;
+      border-color: transparent #fff;
+    }
+  }
+  &.with_name {
+    // none
+  }
 }
 
-@keyframes newmessage {
-	0% {background-color: rgba(132,184,25,1.0);}
-	50% {background-color: $componentbg;}
-	100% {background-color: rgba(132,184,25,1.0);}
+.chat .output .message strong {
+  display:block;
+  padding-bottom:2px;
+  margin-right:40px;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
 }
 
-@-webkit-keyframes newmessage {
-	0% {background-color: rgba(132,184,25,1.0);}
-	50% {background-color: $componentbg;}
-	100% {background-color: rgba(132,184,25,1.0);}
+.chat {
+  .chatbodybottom {
+    background: #e7e7e7;
+    position: absolute;
+    left:0px;
+    bottom:1px;
+    right:0px;
+    margin:0 auto;
+  }
+  .typinghint {
+    padding:2px 6px 0 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size:.8em;
+    color: #aaa;
+    height:14px;
+  }
+  .inputbox {
+    position:relative;
+    .btn {
+      position:absolute;
+      right:6px;
+      top:1px;
+      padding: 0.5em 1em;
+      display:none;
+    }
+    > div {
+      border-top:1px solid $bordercolor;
+    }
+  }
+  .input {
+    display:block;
+    resize: none;
+    width:100%;
+    height:54px;
+    max-height:54px; /* FF hack */
+    margin:0px;
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    border-radius: 0px;
+    border-color:transparent;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    &:active,
+    &:focus {
+      border-color:#66afe9;
+    }
+  }
 }
 
-.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage {
-animation: newmessage 1s ease -0.3s infinite;
--webkit-animation: newmessage 1s ease -0.3s infinite;
+@keyframes newmessage {
+  0% {background-color: rgba(132,184,25,1.0);}
+  50% {background-color: $componentbg;}
+  100% {background-color: rgba(132,184,25,1.0);}
 }
 
-.chat.newmessage .chatheadertitle:after {
-content: "***";
-position:absolute;
-top:2px;
-right:32px;
+.chat.newmessage {
+  .chatheadertitle:after {
+    content: "***";
+    position: absolute;
+    right: 32px;
+    top: 2px;
+  }
+  .chatheader {
+    animation: newmessage 1s ease -0.3s infinite;
+  }
 }
 
 @media all and (max-height: 210px) {
-	.chat .inputbox {
-		height: auto;
-	}
-	.chat .input {
-		max-height: 2.5em;
-	}
-	.chat .outputbox {
-		bottom:45px;
-	}
-	.chat .chatbodybottom {
-		height: auto;
-	}
-	.chat .typinghint {
-		display: none;
-	}
-	.chat .chatheader {
-		display: none;
-	}
-	.chat .chatbody {
-		border-top: 1px solid $bordercolor;
-		top: 0px;
-	}
-}
\ No newline at end of file
+  .chat .inputbox {
+    height: auto;
+  }
+  .chat .input {
+    max-height: 2.5em;
+  }
+  .chat .outputbox {
+    bottom:45px;
+  }
+  .chat .chatbodybottom {
+    height: auto;
+  }
+  .chat .typinghint {
+    display: none;
+  }
+  .chat .chatheader {
+    display: none;
+  }
+  .chat .chatbody {
+    border-top: 1px solid $bordercolor;
+    top: 0px;
+  }
+}
diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss
index ed188269..ceb6ee47 100644
--- a/src/styles/global/_mixins.scss
+++ b/src/styles/global/_mixins.scss
@@ -10,3 +10,8 @@
     @content;
   }
 }
+
+// not handled by autoprefixer
+@mixin tap-highlight-color($color) {
+  -webkit-tap-highlight-color: $color;
+}
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index b24989c6..706013b6 100644
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@@ -45,6 +45,17 @@ $video-onlyaudio-background: #666;
 $video-onlyaudio: rgba(255,255,255,.3);
 $video-overlayactions: rgba(0,0,0,.9);
 
+$buddylist-background: rgba(0,0,0,.3);
+$buddylist-action-background: rgba(255,255,255,0.5);
+
+$chat-background: #e7e7e7;
+$chat-disabled: #aaa;
+$chat-badge: #84b819;
+$chat-ctrl: rgba(0,0,0,.3);
+$chat-timestamp: #aaa;
+
+$tap-highlight: rgba(0, 0, 0, 0);
+
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
@@ -66,8 +77,7 @@ $minbarheight: 44px;
 // ** Fontawsome changed variables **
 // original at libs/fontawesome/_variables.scss
 // --------------------------
-
-
+$fa-css-prefix:       fa;
 
 // ** Bootstrap changed variables **
 // original at libs/bootstrap/_variables.scss
diff --git a/static/js/controllers/chatroomcontroller.js b/static/js/controllers/chatroomcontroller.js
index d7ddd6ec..b3341029 100644
--- a/static/js/controllers/chatroomcontroller.js
+++ b/static/js/controllers/chatroomcontroller.js
@@ -299,7 +299,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
                     title.html(displayName(from, true));
                     extra_css += "with_name ";
                     var imgSrc = buddyImageSrc(from);
-                    picture = $('<div class="buddyimage"><i class="fa fa-user fa-3x"/><img/></div>');
+                    picture = $('<div class="avatar"><i class="fa fa-user fa-3x"/><img/></div>');
                     if (imgSrc) {
                         picture.find("img").attr("src", imgSrc);
                     }
diff --git a/static/partials/buddy.html b/static/partials/buddy.html
index 701a0cd9..69aa87d8 100644
--- a/static/partials/buddy.html
+++ b/static/partials/buddy.html
@@ -1,5 +1,5 @@
-<div class="buddy withSubline">
-    <div class="buddyimage"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div>
-    <div class="buddy1">{{session.Id|displayName}}</div>
-    <div class="buddy2"><i ng-show="session.Userid" class="fa fa-star-o"></i> {{session.Ua}}</div>
-</div>
\ No newline at end of file
+<div class="buddy withSubline" ng-click="doDefault(user.Id)">
+    <div class="avatar"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div>
+    <div class="display-name">{{user.Id|displayName}}</div>
+    <div class="browser">{{user.Ua}}</div>
+</div>