[REF] mail : include real time, and replace Timeline features

This commit add instant messaging features in mail module to make it a real team collaboration tool. Lots of these new features will replace Timeleine view (which is not removed in this commit). Many files have been moved, split or created for a better structure.

- My Channels : A user can be member of channel (mail.channel). These are discussion group, but also an aggregate of notification. Setting a channel as document follower, it will receive all the message (of the chatter) in real time, as information stream.

- A new Inbox : this aims to replace the timeline view. The user will see its channels grouped by 'slot', and receive the message in real time. Jump to the form view, invite people, create private discussion group, talk directly to another employee, ... are the main features. Your message can still be starred. The 'Inbox' will only contain your needaction.

- Needaction concept : a needaction is a message calling you to do something. If you follow a document as a person, the posted message will be 'needaction' for you. It can also be a message where you are mention with a '@my_name' (this feature is not added in this commit).

- The chatter doesn't change so much. It still allow you to see the discussion about the document, to star some message, and treat your needaction.

- Chat : the only way to have a minified conversation is from the Inbox Client Action. It allow you to keep an eye on a channel when working on document.

- Compose Message : it is now common to the Inbox, and the chatter. It offers shortcode substitution, attachments management, and optional subtype.

- UI : the chat window has been clean, they have a new look now.

To do so,
- Chatter code have been completely rewrite, independently of timeline view
- Add 'bus' as mail dependency, to insure real time
- A mail.message is broadcasted on the bus channel (db, mail.channel, channel_id), and a channel header on (db, res.partner, partner_id)
- Extracting mail_thread mixin used for Chatter and ChatMailThread (Inbox client action). This uniformize the programming structure with the server side
- Clean CSS style and use LESS instead of CSS
- Define a new messafe format (message_format method in mail_message.py), compatible with fetching and broadcasting
- Apply guideline coding conventions

This commit also break the module im_livechat, since im_chat models don't exists anymore and will be fixed in the next commit.

Thanks to Thibault Delavallee (tde) for the long debates and precious advices, Richard Mathot (rim) for the support, Simon Lejeune (sle) for the client action layout, and the Usability Team (apr, lle, bst yti) for the long testing.

Conflicts:
	addons/mail/models/mail_thread.py

4 files changed, 172 insertions, 373 deletions

diff --git a/addons/mail/static/src/css/mail.css b/addons/mail/static/src/css/mail.css
index 2d14d8f98b0..522495a8fac 100644
--- a/addons/mail/static/src/css/mail.css
+++ b/addons/mail/static/src/css/mail.css
@@ -4,7 +4,7 @@
         position: relative;
         color: white;
     }
-    
+
 
 /* ----------------------- TIMELINE ----------------------- */
 
@@ -23,7 +23,7 @@
 
     .o_web_client .o_timeline.o_timeline_inbox {
         padding-top: 15px;
-        padding-bottom: 15px; 
+        padding-bottom: 15px;
     }
 
     .o_web_client .o_timeline.o_timeline_inbox .oe_thread {
@@ -117,7 +117,7 @@
         }
 
         .o_web_client .o_timeline .o_timeline_thread_parent .o_timeline_parent_message .o_timeline_parent_subject .o_timeline_nb_unread_msg {
-            font-weight: bold; 
+            font-weight: bold;
         }
 
         .o_web_client .o_timeline .o_timeline_thread_parent .o_timeline_parent_message .o_timeline_parent_author {
@@ -140,10 +140,10 @@
 
         /* avatar */
 
-        .o_web_client .o_timeline .o_timeline_thread_parent .o_timeline_parent_message .o_timeline_parent_avatar {                           
-            left:0; 
-            top: 0; 
-            bottom: 0; 
+        .o_web_client .o_timeline .o_timeline_thread_parent .o_timeline_parent_message .o_timeline_parent_avatar {
+            left:0;
+            top: 0;
+            bottom: 0;
             width: 30px;
             overflow: hidden;
             padding-right: 3px;
@@ -188,7 +188,7 @@
         .o_web_client .o_timeline .o_timeline_thread_parent .o_timeline_parent_followers {
             display: inline-block;
             min-width: 45px;
-            margin-right: 10px; 
+            margin-right: 10px;
             color: #337ab7;
         }
 
@@ -337,7 +337,7 @@
 
         .o_web_client .o_timeline button.oe_full,
         .o_web_client .o_timeline button.oe_attach {
-            background: transparent; 
+            background: transparent;
             color: #337ab7;
             box-shadow: none;
             border: none;
@@ -456,22 +456,22 @@
 
         @-webkit-keyframes oe_mail_attach_loading_anim {
             0% { background: #4BBD00 }
-            50% { background: #009123 } 
+            50% { background: #009123 }
             100% { background: #4BBD00 }
         }
         @-moz-keyframes oe_mail_attach_loading_anim {
             0% { background: #4BBD00 }
-            50% { background: #009123 } 
+            50% { background: #009123 }
             100% { background: #4BBD00 }
         }
         @-o-keyframes oe_mail_attach_loading_anim {
             0% { background: #4BBD00 }
-            50% { background: #009123 } 
+            50% { background: #009123 }
             100% { background: #4BBD00 }
         }
         @keyframes oe_mail_attach_loading_anim {
             0% { background: #4BBD00 }
-            50% { background: #009123 } 
+            50% { background: #009123 }
             100% { background: #4BBD00 }
         }
 
@@ -482,29 +482,29 @@
             left: 0px;
             right: 0px;
             max-height: 64px;
-            background: rgba(0,0,0,0.8); 
+            background: rgba(0,0,0,0.8);
             color: white;
             border-radius: 1px;
             border-top-left-radius: 0px;
             border-top-right-radius: 0px;
             opacity: 0;
-            -webkit-transition: opacity 0.2s linear; 
-               -moz-transition: opacity 0.2s linear; 
-                 -o-transition: opacity 0.2s linear; 
-                    transition: opacity 0.2s linear; 
+            -webkit-transition: opacity 0.2s linear;
+               -moz-transition: opacity 0.2s linear;
+                 -o-transition: opacity 0.2s linear;
+                    transition: opacity 0.2s linear;
         }
 
         .oe_attachment.oe_preview:hover .oe_name {
             opacity: 1;
-            -webkit-transition: opacity 0.2s linear; 
-               -moz-transition: opacity 0.2s linear; 
-                 -o-transition: opacity 0.2s linear; 
-                    transition: opacity 0.2s linear; 
+            -webkit-transition: opacity 0.2s linear;
+               -moz-transition: opacity 0.2s linear;
+                 -o-transition: opacity 0.2s linear;
+                    transition: opacity 0.2s linear;
         }
 
         .o_web_client .o_timeline .o_timeline_msg_footer button.oe_attach {
             width: 24px;
-            margin-bottom: 5px; 
+            margin-bottom: 5px;
             filter: none;
         }
 
@@ -521,7 +521,7 @@
             cursor: pointer;
         }
 
-        .o_web_client .o_timeline .o_timeline_msg_footer .oe_attachment_file .oe_form_binary_file { 
+        .o_web_client .o_timeline .o_timeline_msg_footer .oe_attachment_file .oe_form_binary_file {
             display: inline;
             position: relative;
             margin-left: -100px;
@@ -538,7 +538,7 @@
             vertical-align: middle;
         }
 
-        .o_web_client .o_timeline .oe_hidden_input_file, 
+        .o_web_client .o_timeline .oe_hidden_input_file,
         .o_web_client .o_timeline .oe_hidden_input_file form {
             display: inline;
             cursor: pointer;
@@ -557,26 +557,26 @@
             text-shadow: 1px 0px white, -1px 0px white, 0px 1px white, 0px -1px white;
             cursor: pointer;
             opacity: 0;
-            -webkit-transition: opacity 0.2s linear; 
-               -moz-transition: opacity 0.2s linear; 
-                 -o-transition: opacity 0.2s linear; 
-                    transition: opacity 0.2s linear; 
+            -webkit-transition: opacity 0.2s linear;
+               -moz-transition: opacity 0.2s linear;
+                 -o-transition: opacity 0.2s linear;
+                    transition: opacity 0.2s linear;
         }
 
         .o_web_client .o_timeline .o_timeline_msg_composer .oe_attachment:hover .oe_delete .fa {
             opacity: 1;
-            -webkit-transition: opacity 0.2s linear; 
-               -moz-transition: opacity 0.2s linear; 
-                 -o-transition: opacity 0.2s linear; 
-                    transition: opacity 0.2s linear; 
+            -webkit-transition: opacity 0.2s linear;
+               -moz-transition: opacity 0.2s linear;
+                 -o-transition: opacity 0.2s linear;
+                    transition: opacity 0.2s linear;
         }
 
-    /* ------------ expandable message ------------ */ 
+    /* ------------ expandable message ------------ */
 
-        .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_expandable, 
-        .o_web_client .o_timeline .o_timeline_parent_expandable {  
+        .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_expandable,
+        .o_web_client .o_timeline .o_timeline_parent_expandable {
             color: #A4A4A4;
-            cursor: pointer; 
+            cursor: pointer;
             margin-bottom: 0px;
             min-height: 30px;
             height: 30px;
@@ -637,10 +637,10 @@
         /* 2. avatar (message_left) */
 
         .o_web_client .o_timeline .o_timeline_msg .o_timeline_msg_left {
-            float: left;                            
-            left:0; 
-            top: 0; 
-            bottom: 0; 
+            float: left;
+            left:0;
+            top: 0;
+            bottom: 0;
             width: 45px;
             overflow: hidden;
         }
@@ -677,11 +677,11 @@
             -ms-border-bottom-right-radius: 4px;
             -o-border-bottom-right-radius: 4px;
             border-bottom-right-radius: 4px;
-            position: relative;                 
-            background: white;                  
-            margin-left: 53px;                  
-            padding: 5px 5px 11px 7px;  
-            box-shadow: 0px 1px #CACACA;      
+            position: relative;
+            background: white;
+            margin-left: 53px;
+            padding: 5px 5px 11px 7px;
+            box-shadow: 0px 1px #CACACA;
         }
 
         .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_comment .o_timeline_msg_center:after,   /*********/
@@ -704,7 +704,7 @@
             background-color: #DADADA;
         }
         .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_comment.o_timeline_msg_nobody .o_timeline_msg_center:after,
-        .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_email.o_timeline_msg_nobody .o_timeline_msg_center:after { 
+        .o_web_client .o_timeline .o_timeline_msg.o_timeline_msg_email.o_timeline_msg_nobody .o_timeline_msg_center:after {
             border-right-color: #DADADA;
         }
 
@@ -717,7 +717,7 @@
 
         .o_web_client .o_timeline .o_timeline_msg .o_timeline_msg_content .o_timeline_header {
             font-weight: normal;
-            margin-bottom: 11px; 
+            margin-bottom: 11px;
         }
 
         .o_web_client .o_timeline .o_timeline_msg .o_timeline_msg_content .o_timeline_header a {
@@ -733,7 +733,7 @@
             margin-right: 5px;
         }
 
-        /* message header - votes */ 
+        /* message header - votes */
 
         .o_web_client .o_timeline .o_timeline_vote {
             display: inline-block;
@@ -927,8 +927,8 @@
         text-overflow: ellipsis;
     }
 
-    .o_web_client .o_timeline_followers button.o_timeline_follower .o_timeline_follow, 
-    .o_web_client .o_timeline_followers button.o_timeline_follower .o_timeline_unfollow, 
+    .o_web_client .o_timeline_followers button.o_timeline_follower .o_timeline_follow,
+    .o_web_client .o_timeline_followers button.o_timeline_follower .o_timeline_unfollow,
     .o_web_client .o_timeline_followers button.o_timeline_follower .o_timeline_following {
         display: none;
     }
diff --git a/addons/mail/static/src/css/mail_channel.css b/addons/mail/static/src/css/mail_channel.css
index 51b04a4a9fc..923cdffe726 100644
--- a/addons/mail/static/src/css/mail_channel.css
+++ b/addons/mail/static/src/css/mail_channel.css
@@ -1,32 +1,3 @@
-/* ------------------------------ */
-/* Group Form                     */
-/* ------------------------------ */
-
-/* Resize sheet width */ 
-.o_web_client .oe_form_sheetbg.o_web_client_mail_channel_sheet {
-  min-height: 0px;
-  max-height: none;
-}
- 
-.o_web_client .oe_form_sheetbg.o_web_client_mail_channel_sheet .oe_form_sheet {
-  min-height: 0px;
-  max-height: none;
-  padding: 0px 18px;
-}
-
-.o_web_client .oe_form_sheetbg.o_web_client_mail_channel_sheet .oe_avatar {
-  padding-top: 3px;
-}
-
-/* Resize footer width */
-.o_web_client .oe_form div.oe_mail_channel_footer {
-  max-width: 80%;
-}
-
-/* Resize group description */
-.o_web_client .oe_form_sheetbg.o_web_client_mail_channel_sheet .oe_form_field_text > textarea {
-  height: 60px;
-}
 
 /* ------------------------------ */
 /* Group Kanban                   */
diff --git a/addons/mail/static/src/css/mail_chat_backend.css b/addons/mail/static/src/css/mail_chat_backend.css
index d01577eb56a..d896befbf5e 100644
--- a/addons/mail/static/src/css/mail_chat_backend.css
+++ b/addons/mail/static/src/css/mail_chat_backend.css
@@ -1,12 +1,10 @@
+
 .oe_im {
     position: fixed;
-    background-color: #eaeaea;
-    width: 250px;
+    background-color: #E8EBEF;
+    width: 220px;
     border-left: 1px solid #AEB9BD;
     z-index: 500;
-    -webkit-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
-    -moz-box-shadow:    -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
-    box-shadow:         -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
 }
 
 @media print {
@@ -23,92 +21,66 @@
     top: -8px;
 }
 
-/* search stuff */
-.oe_im_frame_header {
-    position: relative;
-    padding: 16px;
-}
-.oe_im_frame_header .oe_im_searchbox {
-    width: 200px;
-    padding: 1px 21px 1px 19px;
-    font-size: 13px;
-    border: none;
-    border-bottom: 1px solid #c6c6c6;
-    background: none;
-    margin-left: 20px;
-    height: 38px;
-}
-.oe_im_frame_header .oe_im_searchbox:focus {
-    outline: none;
-}
-.oe_im_frame_header .oe_im_search_icon {
-    position: absolute;
-    color: #888;
-    top: 28px;
-    left: 8px;
-    font-size: 16px;    
-    font-weight: 300 !important;
-}
-.oe_im_frame_header .oe_im_search_clear {
-    display: none;
-    position: absolute;
-    right: 11px;
-    top: 4px;
-    font-size: 26px;
-    color: #b6b6b6;
-    cursor: pointer;
-}
-.oe_im_frame_header .oe_im_search_clear:hover {
-    color: #888;
-}
 
-/* users */
 
-.oe_im_users {
-    padding-bottom: 38px;
+
+/*
+INSTANT MESSAGING VIEW
+*/
+.o_mail_chat_im_container{
+    margin: 0;
     height: 100%;
+}
+.o_mail_chat_im_row{
+    height: inherit;
+}
+.o_mail_chat_im_container .o_mail_chat_im_sidebar{
+    background-color: #f5f5f5;
+    height: inherit;
     overflow-y: scroll;
 }
-.oe_im_user {
-    position: relative;
-    padding: 2px 8px;
-    cursor: pointer;
-    font-size: 13px;
-    margin-bottom: 10px;
-}
-.oe_im_user:hover {
-  background: lightGrey;
-}
-.oe_im_user_clip {
-    display: inline-block;
-    width: 26px;
-    height: 26px;
-    margin-right: 4px;
-    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.25);
-    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-}
-.oe_im_user_avatar {
-    width: 26px;
-    height: auto;
-}
-.oe_im_user_name {
-    width: 162px;
-    line-height: 26px;
-    padding-right: 15px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    position: relative;
+
+.o_mail_chat_im_container .o_mail_chat_im_content{
+    height: inherit;
+}
+/* content of conversation */
+.o_mail_chat_im_container .o_mail_chat_im_content_wrap_conversation{
+    height: inherit;
+}
+.o_mail_chat_im_container .o_mail_chat_im_content_wrap_conversation .o_mail_chat_im_messages{
+    height: 80%;
+    overflow-y: scroll;
+}
+.o_mail_chat_im_container .o_mail_chat_im_content_wrap_conversation .o_mail_compose_message{
+    height: 20%;
+    padding:10px;
+    background-color: #f5f5f5;
+}
+.o_mail_chat_im_container .o_mail_chat_im_messages .o_mail_chat_im_message{
+    margin: 0;
+}
+/* content of personal inbox and starred */
+.o_mail_chat_im_container .o_mail_chat_im_content_wrap_personal{
+    height: inherit;
+    overflow-y: scroll;
 }
 
-.oe_im_user_online {
-    display: none;
-    position: absolute;
-    top: 9.5px;
-    right: 11px;
-    width: 11px;
-    height: 11px;
-    vertical-align: middle;
-    border: 0;
+/* message row */
+.o_mail_chat_im_container .o_mail_chat_im_message .o_mail_chat_im_star{
+    opacity: 0.5;
+    color: black;
 }
+.o_mail_chat_im_container .o_mail_chat_im_message .o_mail_chat_im_star:hover{
+    opacity: 1;
+    cursor: pointer;
+}
+.o_mail_chat_im_container .o_mail_chat_im_message .o_mail_chat_im_star.o_mail_starred{
+    color: orange;
+}
+
+
+
+
+.o_mail_chat_im_search_partner{
+    height: 50px;
+}
\ No newline at end of file
diff --git a/addons/mail/static/src/css/mail_chat_common.css b/addons/mail/static/src/css/mail_chat_common.css
index 1ad2981eb41..97119ed506c 100644
--- a/addons/mail/static/src/css/mail_chat_common.css
+++ b/addons/mail/static/src/css/mail_chat_common.css
@@ -1,92 +1,51 @@
 
-
-
-.openerp_style { /* base style of openerp */
-  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-  color: #4c4c4c;
-  font-size: 13px;
-  background: white;
-}
-
-/* button */
-
-.oe_chat_button {
-    position: fixed;
-    bottom: 0px;
-    right: 6px;
-    display: inline-block;
-    min-width: 100px;
-    background-color: rgba(60, 60, 60, 0.6);
-    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    padding: 10px;
-    color: white;
-    text-shadow: rgb(59, 76, 88) 1px 1px 0px;
-    border: 1px solid rgb(80, 80, 80);
-    border-bottom: 0px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    cursor: pointer;
-    z-index:500;
+/* emoji size */
+.o_mail_emoji img{
+    height: 20px;
 }
 
-/* conversations */
+// ------------------------------------------------------------------
+// Chat Window
+// ------------------------------------------------------------------
 
-.oe_im_chatview {
-    position: fixed;
-    overflow: hidden;
-    margin-bottom: 5px;
-    margin-right: 6px;
-    background-color: #fff;
-    border: 1px solid #DEDEDE;
-    width: 240px;
-    z-index:500;
-}
 @media screen and (max-width:360px) {
-    .oe_im_chatview {
+    .o_mail_chat_im_window {
         width: 100%;
         margin-right: 0;
     }
-    .oe_im_chatview .oe_im_chatview_content {
+    .o_mail_chat_im_window .o_mail_chat_im_window_content {
         width: 100% !important;
     }
-    .oe_im_chatview .oe_im_chatview_input {
+    .o_mail_chat_im_window .o_mail_chat_im_window_input {
         width: 100% !important;
     }
 }
-.oe_im_chatview .oe_im_chatview_disconnected {
-    display:none;
-    z-index: 100;
-    width: 100%;
-    background: #E8EBEF;
-    padding: 5px;
-    font-size: 11px;
-    color: #999;
-    line-height: 14px;
-    height: 28px;
-    overflow: hidden;
-}
-.oe_im_chatview.oe_im_chatview_disconnected_status .oe_im_chatview_disconnected {
-    display: block;
-}
 
 
+.o_mail_chat_im_window {
+    position: fixed;
+    overflow: hidden;
+    margin-bottom: 5px;
+    margin-right: 6px;
+    background: rgba(250, 250, 250, 0.95);
+    border: 1px solid #DEDEDE;
+    width: 240px;
+    z-index:500;
+}
 
-/* ####### Chat View : Header ####### */
-.oe_im_chatview_header {
+/* HEADER */
+.o_mail_chat_im_window .o_mail_chat_im_window_header {
     padding: 3px 6px 2px;
+    cursor: pointer;
     background: #DEDEDE;
     background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
     background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
     border-radius: 3px 3px 0 0;
     -moz-border-radius: 3px 3px 0 0;
     -webkit-border-radius: 3px 3px 0 0;
-    border-bottom: 1px solid #AEB9BD;
-    cursor: pointer;
 }
 
-.oe_im_chatview_header .header_name{
+.o_mail_chat_im_window .o_mail_chat_im_window_header_name {
     max-width: 75%;
     word-wrap: break-word;
     display: inline-block;
@@ -96,164 +55,61 @@
     text-overflow: ellipsis;
 }
 
-.oe_im_chatview_header .right_buttons {
+.o_mail_chat_im_window .o_mail_chat_im_window_header_buttons{
     float: right;
 }
-.oe_im_chatview_header .right_buttons > * {
-    display: inline-block;
-    border: 0;
-    cursor: pointer;
-    color: gray ;
-    background: transparent;
-    font-size: 16px;
-    line-height: 16px;
-    margin-left: 5px;
-    -webkit-appearance: none;
-}
-
-.oe_im_chatview_header .right_buttons .dropdown-menu{
-    right: 0;
-    left: auto;
-}
-.oe_im_chatview_header .right_buttons .dropdown-menu > li{
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: normal;
-    line-height: 1.428571429;
-    color: #4c4c4c;
-    white-space: nowrap;
-}
-
 
 
-.oe_im_chatview .oe_im_chatview_content {
-    overflow: auto;
-    height: 287px;
-    width: 240px;
-}
-.oe_im_chatview.oe_im_chatview_disconnected_status .oe_im_chatview_content {
-    height: 249px;
+/* CONTENT (messages, ...) */
+.o_mail_chat_im_window .o_mail_chat_im_window_content {
+    height: 280px;
+    overflow-y: scroll;
 }
-.oe_im_chatview .oe_im_chatview_footer {
-    position: relative;
-    padding: 3px;
-    border-top: 1px solid #AEB9BD;
-    background: #DEDEDE;
-    background: -moz-linear-gradient(#FCFCFC, #DEDEDE);
-    background: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#DEDEDE));
-    -moz-border-radius: 0 0 3px 3px;
-    -webkit-border-radius: 0 0 3px 3px;
-    border-radius: 0 0 3px 3px;
+
+.o_mail_chat_im_window .o_mail_chat_im_messages .o_mail_chat_im_window_date_sperator{
+    padding: 5px;
+    padding-right: 10px;
+    text-align: right;
+    font-weight: bold;
 }
-.oe_im_chatview .oe_im_chatview_input {
-    width: 222px;
-    font-family: Lato, Helvetica, sans-serif;
-    font-size: 13px;
-    color: #333;
-    padding: 1px 5px;
-    border: 1px solid #AEB9BD;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,0.2);
-    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
+
+.o_mail_chat_im_window .o_mail_chat_im_message{
+    margin: auto;
+    margin-bottom: 5px;
 }
-.oe_im_chatview .oe_im_chatview_message_bubble {
-    background: white;
-    position: relative;
-    min-height: 32px;
-    padding: 3px;
-    margin: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+
+.o_mail_chat_im_window .o_mail_chat_im_message .o_mail_chat_im_message_avatar{
+    width: 20%;
+    display: inline-block;
+    vertical-align: top;
 }
 
-/* Smiley size */
-.oe_im_chatview .oe_im_chatview_bubble_item img{
-    width: 18px;
+.o_mail_chat_im_window .o_mail_chat_im_message .o_mail_chat_im_message_avatar img{
+    width: 80%;
+    float: right;
 }
 
-.oe_im_chatview .oe_im_chatview_technical_bubble {
-    background: #D8D8D8;
-    position: relative;
-    min-height: 32px;
-    padding: 3px;
-    margin: 3px;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+.o_mail_chat_im_window .o_mail_chat_im_message .o_mail_chat_im_message_core{
+    width: 75%;
+    display: inline-block;
+    padding: 5px;
 
-    font-style:italic;
+    background: white;
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    max-width:100%;
 }
 
-.oe_im_chatview .oe_im_chatview_clip {
-    position: relative;
-    float: left;
-    width: 26px;
-    height: 26px;
-    margin-right: 4px;
-    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.25);
-    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
-}
-.oe_im_chatview .oe_im_chatview_avatar {
-    float: left;
-    width: 26px;
-    height: auto;
-    clip: rect(0, 26px, 26px, 0);
-    max-width: 100%;
-    width: auto 9;
-    height: auto;
-    vertical-align: middle;
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-}
-.oe_im_chatview .oe_im_chatview_time {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    margin: 3px;
-    text-align: right;
-    line-height: 13px;
-    font-size: 11px;
-    color: #999;
-    width: 60px;
-    overflow: hidden;
-}
-.oe_im_chatview .oe_im_chatview_from {
-    margin: 0 0 2px 0;
-    line-height: 14px;
-    font-weight: bold;
-    font-size: 12px;
-    width: 140px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    color: #3A87AD;
-}
-.oe_im_chatview .oe_im_chatview_bubble_list {
-}
-.oe_im_chatview .oe_im_chatview_bubble_item {
-    margin: 0 0 2px 30px;
-    line-height: 14px;
-    word-wrap: break-word;
+.o_mail_chat_im_window .o_mail_chat_im_message .o_mail_chat_im_message_core p{
+    margin: 0;
 }
 
-.oe_im_chatview_online {
-    margin-top: -4px;
-    width: 11px;
-    height: 11px;
+/* FOOTER */
+.o_mail_chat_im_window .o_mail_chat_im_window_footer {
+    padding:3px;
+    background: #DEDEDE;
 }
 
-.oe_im_chatview .oe_im_chatview_date_separator {
-    background: transparent;
-    position: relative;
-    padding: 3px;
-    color: #aaa;
-    margin: 3px;
-    text-align: right;
-    font-size: 12px;
-}
\ No newline at end of file
+.o_mail_chat_im_window .o_mail_chat_im_window_footer .o_mail_chat_im_window_input {
+    width: 100%;
+}