<div id="container">
  <div id="chat">
    <div id="app-wrapper">
      <div id="app">
        <div id="menu-wrapper" class="pane">
          <ul id="menu">
            <li class="active"><a href="#"><i class="fa fa-weixin" aria-hidden="true"></i><span>chat</span></a></li>
            <li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i><span>profil</span></a></li>
            <li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span>stats</span></a></li>
            <li class="logout"><a href="#"><i class="fa fa-power-off" aria-hidden="true"></i><span>quitter</span></a></li>
          </ul>
          <div class="toggle-menu"><a href="#"><i class="fa fa-angle-double-left" aria-hidden="true"></i><span>réduire</span></a></div>
        </div>

        <div id="content-wrapper">
          <div id="side" class="pane">
            <div id="user-infos">
              <div class="gravatar" style="background-image: url(&quot;https://secure.gravatar.com/avatar/6ae2903ae85c3dfc76586d9750dee348?s=80&amp;r=g&amp;d=identicon&quot;);"></div>
              <div class="username">florent
                <div class="status">connecté</div>
              </div>
            </div>

            <ul id="channel-list">
              <li class="active">
                <i class="fa fa-comment" aria-hidden="true"></i>
                <span class="username">Jean-DréDré</span>
                <div class="time">En ligne depuis 12m23s</div>
              </li>
              <li>
                <i class="fa fa-commenting" aria-hidden="true"></i>
                <span class="username">Pierre-Toussain</span>
                <div class="time">En ligne depuis 12m23s</div>
              </li>
              <li>
                <i class="fa fa-comment" aria-hidden="true"></i>
                <span class="username">Lapinou des rochers</span>
                <div class="time">En ligne depuis 12m23s</div>
              </li>
            </ul>
          </div>

          <div id="main" class="pane">
            <div class="channel closed">
              <div class="dialog pane">
                <div class="dialog-head">
                  <div class="action-back">
                    <div id="action-back">
                      <i class="fa fa-arrow-left"></i>
                    </div>
                  </div>
                  <div class="title"><span><h3>Discussion avec Jean-DréDré</h3><div class="state" style="display: none;"><i></i></div></span></div>
                  <div class="action-right"></div>
                </div>
                <ul id="messages">
                  <li class="message" class="from">
                    <div class="picture" style="background-image: url('https://secure.gravatar.com/avatar/54a10b09b48e5cfaf1ac0bf92c7d32f2?size=400');"></div>
                    <div class="message bubble"><span class="vaœlue">Bonjour Jean-DréDré, como esta en la casa ?</span> <span class="timestamp">14:25</span></div>
                  </li>
                  <li class="message to">
                    <div class="picture" style="background-image: url('https://secure.gravatar.com/avatar/6ae2903ae85c3dfc76586d9750dee348?s=80&r=g&d=identicon');"></div>
                    <div class="message bubble"><span class="vaœlue">J'ai des gros pbs avec mon poney</span> <span class="timestamp">14:26</span></div>
                  </li>
                </ul>
                <div id="send-message">
                  <form action="" method="POST"><input id="send" autocomplete="off" maxlength="510" type="text"> <button class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path opacity=".4" d="M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"></path></svg></button></form>
                </div>
              </div>
              <div class="infos pane">
                <div class="icon close"></div>

                <div id="customer-infos">
                  <div class="gravatar" style="background-image: url('https://secure.gravatar.com/avatar/54a10b09b48e5cfaf1ac0bf92c7d32f2?size=400');"></div>
                  <div class="username">Jean-DréDré</div>
                  <div class="badge badge-warning">17 septembre 1991</div>
                </div>
                <ul>
                  <li>Vierge</li>
                  <li>Intéressé par les bolides</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600');
@charset "UTF-8";

html,
body {
  background-color: #354351;
  color: #636b6f;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  font-size: 13px;
  min-width: 320px;
}

body h1, body h2, body em { color: #eee; font-size: 30px; text-align: center; margin: 20px 0 0 0; -webkit-font-smoothing: antialiased; text-shadow: 0px 1px #000; }

h3 { font-size: 100%; }

html, body, #chat { height: 100%; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 100%; }

#app-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#app {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
  -webkit-transform-origin: center center 0;
          transform-origin: center center 0;
  width: 80%;
  height: calc(100% - 60px);
  top: 30px;
  max-width: 1200px;
  box-shadow: 0 0px 40px 10px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0px 40px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  display: -webkit-flex;
  transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
  z-index: 2;
}

#app input:focus,
#app button:focus,
#app select:focus {
  outline: -webkit-focus-ring-color auto 0px;
}

#menu-wrapper {
  position: relative;
  width: 80px;
  height: 100%;
  background-color: #DDDDDD;
  background: -webkit-gradient(linear, left top, left bottom, from(#24313f), to(#314459));
  background: linear-gradient(to bottom, #24313f 0%, #314459 100%);       transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
}

#content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-flex;
}

#side {
  position: relative;
  width: 240px;
  min-width: 240px;
  height: 100%;
  background-color: #D1D1D1;
  
  box-shadow: 0 0px 40px 10px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0px 40px 10px rgba(0, 0, 0, 0.05);
  
  transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
}

#main {
  position: relative;
  width: 80%;
  height: 100%;
  background-color: #F1F1F1;
  transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
}

.pane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#menu-wrapper.open { width: 180px; }

#menu-wrapper a { position: relative; display: flex; align-items: center; width: 100%; height: 100%; color: #FFF; text-decoration: none; padding: 15px; }
#menu-wrapper a i { position: relative; left: 14px; transition: all 0.2s ease-in-out, border 0s; -webkit-transition: all 0.2s ease-in-out, border 0s; }
#menu-wrapper.open a i { left: 8px; }


#menu-wrapper a:hover { background-color: #5F98FC; }
#menu-wrapper li:hover { opacity: 1; }
#menu-wrapper .toggle-menu { position: absolute;  width: 100%; height: 38px; bottom: 0px; }
#menu-wrapper .toggle-menu i { transform: rotate(180deg); transition: all 0.2s ease-in-out, border 0s; -webkit-transition: all 0.2s ease-in-out, border 0s; }
#menu-wrapper.open .toggle-menu i { transform: rotate(0deg); }

#menu-wrapper a span { position: relative; left: 14px; text-transform: uppercase; transition: all 0.2s ease-in-out 0.1s; -webkit-transition: all 0.2s ease-in-out 0.1s; font-size: 60%; opacity: 0; }
#menu-wrapper.open span { left: 24px; opacity: 1; }

#menu { margin: 0; -webkit-padding-start: 0px; }

#menu li { position: relative; width: 100%; height: 56px; padding: 0px; font-size: 160%; color: #FFF; opacity: 0.8; margin-bottom: 1px; }
#menu li:first-child { height: 68px; }
#menu li.active { opacity: 1; }
#menu li.active:before { position: absolute; content: ''; width: 100%; height: 100%; border-left: solid 3px #5F98FC; }
#menu li.logout { font-size: 120%; }
#menu li.logout a i { padding-left: 2px; }

#user-infos { width: 100%; padding: 14px; background-color: #D3D3D3; }

#user-infos .gravatar {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  background-size: cover;
  margin-right: 15px;
  float: left;
}

#user-infos .username {
  color: #24313F;
  font-size: 16px;
}

#user-infos .username .status {
  font-size: 11px;
  color: #00A100;
}

#channel-list { position: relative; width: 100%; height: 72px; -webkit-padding-start: 0px; margin: 0; }
#channel-list li { background-color: #DDD; display: flex; padding: 10px; margin-bottom: 1px; cursor: hand; cursor: pointer; flex-wrap: wrap; }
#channel-list li.active { background-color: #eaeaea; }
#channel-list li .fa { padding: 4px; }
#channel-list li .username { color: #111; }
#channel-list li.active .username { font-weight: bold; }
#channel-list li > * { flex-basis: 1 1; }
#channel-list li .time { font-size: 82%; padding-left: 20px; }

.channel { position: relative; width: 100%; height: 100%; display: flex; display: -webkit-flex; }
.channel .dialog { position: relative; width: 100%; height: 100%; background-color: #eaeaea; padding: 0; }
.channel .infos { position: absolute; width: 40%; right: -40%; height: 100%; }
.channel .infos .icon { left: -40px; top: 20px; }
.channel.closed .infos .icon { border: solid 2px #BBB; border-radius: 50%; }
.channel.closed .infos .close::before { -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 34%; left: 6px; margin-top: 3%; margin-left: 0px; }
.channel.closed .infos .close::after { -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; border-radius: 50%; left: 9px; top: 30%; }
.channel.closed .infos .icon:hover { border-color: #548dcb; }

.channel .infos .icon, .channel .infos .close::before, .channel .infos .close::after, .channel .pane { transition: all 0.2s ease-in-out, border 0s; -webkit-transition: all 0.2s ease-in-out, border 0s; }

.channel.opened .infos.pane { right: 0; background-color: #D1D1D1; }
.channel.opened .dialog.pane { width: 60%; }
.channel.opened .infos .icon { width: 20px; height: 20px; right: 8px; left: inherit; border: transparent; z-index: 1; }
.channel.opened .infos .close:hover::before, .channel.opened .infos .close:hover::after { border-color: #777; }

.channel .dialog .dialog-head { position: relative; height: 68px; background-color: transparent; display: flex; display: -webkit-flex; justify-content: space-between; }
.channel .dialog .dialog-head .action-back, .channel .dialog .dialog-head .action-right { padding: 0 15px; cursor: hand; cursor: pointer; }
.channel .dialog .dialog-head > div { display: flex; display: -webkit-flex; flex-direction: column; justify-content: space-around; text-align: center; }

@media screen and (max-width: 1280px) {
  #app { width: 90%; height: 90%; flex-direction: column-reverse; }
  #menu-wrapper { flex-direction: row; width: 100%; height: 48px; }
  #menu-wrapper.open { width: 100%; }
  #menu-wrapper.open #menu { width: auto; }
  #menu { display: flex; display: -webkit-flex; }
  #menu li { width: auto; height: 45px !important; border-right: solid 0px #2E4053; }
  #menu li span { opacity: 1; left: 30px; padding-right: 50px; }
  #menu li.logout { position: absolute; right: 0px; border-left: solid 0px #2E4053; }
  #menu-wrapper .toggle-menu { display: none; }
  #menu li.active:before { border-left: 0 none; border-bottom: solid 3px #5F98FC; }
}

@media screen and (max-width: 1280px) {
  #app { width: 100%; height: 100%; top: 0px; border-radius: 0; }
}

@media screen and (max-width: 768px) {
  .infos.pane { width: 100%; right: -100%; }
  .channel.opened .dialog.pane { width: 100%; }
  #menu li.logout a i { left: 0px }
  #menu li.logout a span { display: none; }
}

#main .channel #action-back { display: none; }
@media screen and (max-width: 512px) {
  #menu-wrapper #menu { justify-content: space-around; }
  #menu-wrapper #menu li:first-child a i { left: 2px; }
  #menu-wrapper #menu li a i { left: 0px; }
  #menu-wrapper #menu li span { display: none; }
  #menu-wrapper #menu li.logout { width: 42px; }
  
  #content-wrapper #main { position: absolute; width: 100%; left: 0px; }
  #main .channel #action-back { display: block; }
  #side { left: -240px; z-index: 1; }
  #content-wrapper.opened #side { left: 0; }
  #content-wrapper.opened #main { filter: blur(2px); }
}

.close { position: absolute; display: inline-block; width: 22px; height: 22px; overflow: hidden; cursor: hand; cursor: pointer; }
.close:hover::before, .close:hover::after { background: #548dcb; }
.close::before, .close::after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #BBB; }
.close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#messages { width: 100%; height: calc(100% - 132px); list-style-type: none; margin: 0; padding: 0; padding-bottom: 10px; display: flex; display: -webkit-flex; justify-content: flex-end; flex-direction: column; }



#send-message { padding: 0px; position: absolute; bottom: 0; width: 100%; background-color: #FFF; }
#send-message form { position: relative; width: 100%; display: flex; display: -webkit-flex; }
#send-message form input { border: 0; padding: 10px; width: 100%; margin-right: .5%; }
#send-message form button { border: none; padding: 10px; color: #FFF; background-color: transparent; cursor: hand; cursor: pointer; }
#send-message form button:focus, #send-message form button:active, #send-message form button:hover { background-color: transparent; } 
#send-message form button:hover svg path { opacity: 0.8; fill: #548dcb; }

li {
  padding: 5px 10px;
  display: flex;
  display: -webkit-flex;
}

li .message {
  background: #FFF;
  color: #333;
  font-size: 15px;
  margin-left: 10px;
  display: inline-block;
  max-width: calc(100% - 100px);
  white-space: normal;
}

li .message .timestamp {
  color: #BBB;
  font-size: 70%;
  padding-left: 20px;
  padding-top: 6px;
  display: inline-block;
}

li .picture {
  width: 51px;
  height: 51px;
  min-width: 51px; min-height: 51px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  background-size: cover;
  float: left;
  margin-right: 0px;
}

li.from + li.from .picture, li.from + li.from .message:before {
  visibility: hidden;
}

li.to {
  flex-direction: row-reverse;
}

li.to .message {
  margin-left: 0px;
  background: #548dcb;
  color: #FFFFFF;
  margin-right: 10px;
}

li.to .message .timestamp {
  color: #EDEDED;
}

li.to .message:before {
  border-right-color: transparent;
  border-left-color: #548dcb;
  right: -12px;
  left: auto;
}

li.to .picture {
  margin-right: 0;
  margin-left: 8px;
  float: right;
}

li.to + li.to .picture, li.to + li.to .message:before {
  visibility: hidden;
}

li.predictive {
  justify-content: center;
}

li.predictive .message {
  border: 0 none;
  padding-left: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  font-style: italic;
  font-weight: lighter;
}

li.predictive .whisper {
  width: 51px;
  height: 51px;
  padding: 15px 0px 15px 15px;
  display: inline-block;
  float: left;
  margin-right: 0px;
}

li.predictive .message .value span {
  font-weight: bold;
}

li.predictive .message:before {
  display: none;
}

.bubble {
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0px 12px 4px rgba(150, 150, 150, 0.17);
  background-color: #FFFFFF;
  padding: 16px;
  position: relative;
}

.to .bubble {
  box-shadow: 0 0px 12px 4px rgba(150, 150, 150, 0.27);
}

.bubble:before {
  content: " ";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px transparent solid;
  border-right-color: #FFF;
}

#customer-infos { position: relative; width: 100%; padding: 14px; background-color: #eaeaea;  background: -webkit-gradient(linear, left top, left bottom, from(#24313f), to(#314459));
  background: linear-gradient(to bottom, #24313f 0%, #314459 100%);   }

#customer-infos .gravatar {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  background-size: cover;
  margin-right: 15px;
  float: left;
}

#customer-infos .username {
  color: #FFF;
  font-size: 16px;
}

#customer-infos .username .status {
  font-size: 11px;
  color: #00A100;
}

#customer-infos .username ul { font-size: 76%; -webkit-padding-start: 46px;}

.badge { padding: 4px; }
.badge.badge-warning { font-weight: normal; }

(function($) {
  $('.channel .infos .icon').click(function() {
    $(this).parents('.channel').toggleClass('closed opened');
  });
  
  $('#menu-wrapper .toggle-menu').click(function() {
    $('#menu-wrapper').toggleClass('open');
  });
  
  $('.action-back').click(function(e) {
    $('#content-wrapper').toggleClass('opened');
    e.stopImmediatePropagation();
  });
  
  $(document).on('click', '#content-wrapper.opened #main', function(e) {
    $('.action-back').click();
  });
  
  // CHAT
  $('#channel-list li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
})(jQuery);