<section class="main-grid">  
  <aside class="main-side">
     <header class="common-header">
       <div class="common-header-start">
           <button class="u-flex js-user-nav">
             <img class="profile-image" src="http://bit.ly/3b6qNEw" alt="Elad Shechter">
             <div class="common-header-content">
                <h1 class="common-header-title">Elad Shechter</h1>
            </div>
           </button>       
       </div>
       <nav class="common-nav">
           <ul class="common-nav-list">
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon">πŸ•˜</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-status">πŸ’¬</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-menu" aria-label="menu"></span>
               </button>
             </li>
           </ul>
         </nav>
     </header>
    <section class="common-alerts"><!-- optional alert message --></section>
    <section class="common-search">
        <input type="search" class="text-input" placeholder="Search or start new chat">
    </section>
    <section class="chats">
      <ul class="chats-list">
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="Elad Shechter">
            <header class="chats-item-header">
              <h3 class="chats-item-title">CSS Masters Israel</h3>
              <time class="chats-item-time">12:30</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Beside it yo can follow my twitter account: @eladsc</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/507217425/rachelbyserge_400x400.jpg" alt="Rachel Bratt Tannenbaum">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Rachel Bratt Tannenbaum</h3>
              <time class="chats-item-time">12:05</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">When is our next meetup?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">1</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p240x240/67203290_10217514133916884_6721473094952681472_o.jpg?_nc_cat=100&_nc_sid=7206a8&_nc_ohc=re-hfG5q_CoAX-R1IpO&_nc_ht=scontent.fhfa1-2.fna&_nc_tp=6&oh=3596c17bfc18e539e8d604b2d106ac51&oe=5EE7B77C" alt="Yanai Edri">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Yanai Edri</h3>
              <time class="chats-item-time">12:05</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">See you at Yerucham!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://pbs.twimg.com/profile_images/1117382038238240769/v3zkFNFa_400x400.png" alt="Rotem Lurx Horovitz">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Rotem Lurx Horovitz</h3>
              <time class="chats-item-time">11:57</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Let's create a juniors meetup</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">3</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/2HMqGR7" alt="Yehuda Avrashi">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Yehuda Avrashi</h3>
              <time class="chats-item-time">11:48</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">It was a great plesure for me</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages">1</span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/2vVhJCm" alt="Itai Segal">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Itai Segal</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">The is very nice!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-9/88098818_10219217642444816_3909333207673208832_o.jpg?_nc_cat=107&_nc_sid=09cbfe&_nc_ohc=ehj_VHsfD1IAX_Y9ift&_nc_ht=scontent.fhfa1-2.fna&oh=a7b2660b2b9fe517667e9f4b545f2e75&oe=5EEAE76E" alt="Ronen Mars Bahteev">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Ronen Mars Bahteev</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Let's do a meetup at Bigpanda</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-1.fna.fbcdn.net/v/t1.0-1/p480x480/68945154_10157466813344784_6338834733429948416_n.jpg?_nc_cat=103&_nc_sid=7206a8&_nc_ohc=cNR0r4cFIgUAX8zz3be&_nc_ht=scontent.fhfa1-1.fna&_nc_tp=6&oh=4a5d70abaca1964b02be832d4cfe9608&oe=5EE8A96C" alt="Alon Gruss">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Alon Gruss</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Great!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li> 
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="http://bit.ly/37UWsGt" alt="Kalo Avi">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Kalo Avi</h3>
              <time class="chats-item-time">Yesterday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">I have an idea for you</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-9/64559952_10157202999688965_7161203821085982720_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=9r_P7Wc-c2cAX8Dm_s2&_nc_ht=scontent.ftlv1-2.fna&oh=e71d355d78c765711570abe73b7f1ccd&oe=5EF83FE2" alt="Bambi Haber">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Bambi Haber</h3>
              <time class="chats-item-time">Sunday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">This is awesome!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-1.fna.fbcdn.net/v/t31.0-1/p480x480/19693620_10155490124643377_7681015883106028225_o.jpg?_nc_cat=101&_nc_sid=7206a8&_nc_ohc=rCDyj2YlBTMAX-XWZBg&_nc_ht=scontent.ftlv1-1.fna&_nc_tp=6&oh=afadddfcf130358025985597b9d68cf4&oe=5EF7D029" alt="Alexey Karash">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Alexey Karash</h3>
              <time class="chats-item-time">Sunday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Whats up?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.ftlv1-2.fna.fbcdn.net/v/t1.0-1/c39.0.293.293a/61548973_10216380217710345_2070201909146288128_n.jpg?_nc_cat=103&_nc_sid=7206a8&_nc_ohc=pf7EiIN0TOcAX-LOpBw&_nc_ht=scontent.ftlv1-2.fna&oh=2b68b7b82e2115ba9b9c621bb8b0a6ba&oe=5EF8135C" alt="Ofer Shelly">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Ofer Shelly</h3>
              <time class="chats-item-time">Saturday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">It was a great talk</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-1.fna.fbcdn.net/v/t1.0-1/p240x240/90769650_10216328789027525_1768456314591117312_n.jpg?_nc_cat=106&_nc_sid=7206a8&_nc_ohc=fjJvGGteAKYAX9k6im5&_nc_ht=scontent.fhfa1-1.fna&_nc_tp=6&oh=e14fad9bc5b2592409d9d4af1c06740f&oe=5EEAC512" alt="Moshe Harush">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Moshe Harush</h3>
              <time class="chats-item-time">Friday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Open for freelance?</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
        <li class="chats-item">
          <div class="chats-item-button js-chat-button" role="button" tabindex="0">
            <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p240x240/75456831_2576866162543789_1837376370594807808_o.jpg?_nc_cat=100&_nc_sid=7206a8&_nc_ohc=yJMv0hFAm04AX-e7PZh&_nc_ht=scontent.fhfa1-2.fna&_nc_tp=6&oh=a3cd6b3f25e25fd47e4d211d4fda2ea6&oe=5EE87E2B" alt="Guy Sarkinsky">
            <header class="chats-item-header">
              <h3 class="chats-item-title">Guy Sarkinsky</h3>
              <time class="chats-item-time">Friday</time>
            </header>
            <div class="chats-item-content">
              <p class="chats-item-last">Thanks a lot!</p>
              <ul class="chats-item-info">
                <li class="chats-item-info-item u-hide"><span class="icon-silent">πŸ”‡</span></li>
                <li class="chats-item-info-item"><span class="unread-messsages"></span></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </aside>  
  <main class="main-content">
    <header class="common-header">
       <div class="common-header-start">  
         <button class="common-button is-only-mobile u-margin-end js-back"><span class="icon icon-back">β¬…</span></button>
         <button class="u-flex js-side-info-button">
             <img class="profile-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="CSS Masters Israel">
             <div class="common-header-content">
               <h2 class="common-header-title">CSS Masters Israel</h2>
               <p class="common-header-status">Online</p>
             </div>
           </button>       
       </div>
       <nav class="common-nav">
           <ul class="common-nav-list">
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon">πŸ”Ž</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button">
                 <span class="icon icon-attach">πŸ“Ž</span>
               </button>
             </li>
             <li class="common-nav-item">
               <button class="common-button u-animation-click js-side-info-button">
                 <span class="icon icon-menu" aria-label="menu"></span>
               </button>
             </li>
           </ul>
         </nav>
     </header>
    <div class="messanger">
      <ol class="messanger-list">
        <li class="common-message is-time">
          <p class="common-message-content">
            Today
          </p>          
        </li>
        <li class="common-message is-you">
          <p class="common-message-content">
            This is my CSS/HTML Revers Engineering forΒ WhatsApp
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:11</time>
        </li>
        <li class="common-message is-you">
          <p class="common-message-content">
            Just take a look
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:12</time>
        </li> 
        <li class="common-message is-other">        
          <p class="common-message-content">
            Who are you?
          </p>
          <time datetime>14:33</time>          
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">            
            I’m Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture.<br><br>

A bit more about myself:<br>
- Writer of various globally known CSS articles<br>
- CSS speaker.<br>
- Founder of CSS Masters Israel Community<br><br>

            You can see more of my stuff on my website <a href="https://eladsc.com/" tarhet="_blank">eladsc.com</a>
        
          </p>
          <span class="status is-seen">βœ”οΈβœ”οΈ</span>
          <time datetime>14:41</time>
        </li>
        <li class="common-message is-other">        
          <p class="common-message-content">
            Who's those peoples on the contact list?
          </p>
          <time datetime>14:33</time>          
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            These are friends from our comunity "<a href="https://www.facebook.com/groups/css.masters.israel/" target="_blank">CSS Masters Israel</a>".<br>
            Beside it we have anoather global comunity channel, called" <a href="https://www.facebook.com/groups/css.master/" target="_blank">CSS Masters</a>", if you love CSS, you are all welcome to join.
          </p>
           <span class="status">βœ”οΈβœ”οΈ</span>
          <time datetime>14:34</time>
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            If you want to know how I created reverse engineering to WhatsApp web, you can read my article 
            <a href="https://blog.animaapp.com/reverse-engineering-whatsapp-webs-css-9239293009f4?utm_medium=blog&utm_source=elad-css&utm_content=reverse-whatsapp&utm_campaign=css-reverse" target="_blank">"Reverse Engineering WhatsApp Web'sΒ CSS"</a>
          </p>
          <span class="status">βœ”οΈ</span>
          <time datetime>14:43</time>
        </li>
        <li class="common-message is-you">        
          <p class="common-message-content">
            Beside it you can follow me on twitter:<br>
            <a class="twitter" href="https://twitter.com/eladsc"><span class="twitter-user">@eladsc</span></a>
          </p>
          <span class="status">βœ”οΈ</span>
          <time datetime>14:43</time>
        </li>
    </ol>
    </div>    
    <div class="message-box">
      <button class="common-button"><span class="icon">πŸ˜ƒ</span></button>
      <div class="text-input" id="message-box" placeholder="Type a message" contenteditable></div>
      <button id="voice-button" class="common-button"><span class="icon">🎀</span></button>
      <button id="submit-button" class="common-button"><span class="icon">➀</span></button>
    </div>  
  </main>
  <aside class="main-info u-hide">    
      <header class="common-header">
        <button class="common-button js-close-main-info"><span class="icon">❌</span></button>
        <div class="common-header-content">
          <h3 class="common-header-title">Info</h3>
        </div>
      </header>
      <div class="main-info-content">
        <section class="common-box">
          <img class="main-info-image" src="https://scontent.fhfa1-2.fna.fbcdn.net/v/t1.0-1/p100x100/10325799_276849335820343_269039155920934591_n.png?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=fxci6qYcSvoAX-bZfj2&_nc_ht=scontent.fhfa1-2.fna&oh=ad1c246e7e4a52c607aafd99ed7217a2&oe=5EEAF8B0" alt="CSS Masters Israel">
          <h4 class="big-title">CSS Masters Israel</h4>
          <p class="info-text">Created 6/11/2013 at 22:45</p>
        </section>
        <section class="common-box">
          <h5 class="section-title">Description</h5>
          <p>Out main channel of the comunity is on Fecbook: <a href="https://www.facebook.com/groups/css.masters.israel/">http://bit.ly/2Up8On5</a></p>
        </section>
        <section class="common-box">
          <h5 class="section-title">Other content</h5>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto odit voluptatem magnam sequi dolorem soluta assumenda ipsum iusto culpa velit repudiandae vitae minus minima corporis labore sit, molestias, a ut!</p>
        </section>
    </div>
  </aside>
</section>
/****** More of My Resets *******/
*,
*::before,
*::after{box-sizing:border-box;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; margin:0; cursor:pointer; text-align:inherit;}
img{display:block; max-width:100%;}

/* Responsive Variables */
$break1: "(max-width:767px)";
$break2: "(min-width:768px) and (max-width:1023px)";
$break2open:"(min-width:768px)";
$break3: "(min-width:1024px) and (max-width:1439px)";
$break3open:"(min-width:1024px)";
$break4open: "(min-width:1440px)";

.is-only-mobile{
  @media #{$break2open}{display:none!important;}
}

/* Multi direcrtion Languages Support Variables*/
$start-direction: left !default;
$end-direction:   right !default;

/* colors */
:root{
  --white:#fff;
  --dark-gray:#333;
  --main-gray:#ededed;
  --light-gray:#f7f7f7;
  --dark-green:#009688;
  --info-message:rgba(225,245,254,.92); /* blue messages */
}
/*mixin*/
@mixin trim{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block;}
@mixin scroll{overflow-y:auto; scrollbar-width:thin; /*-webkit-overflow-scrolling:touch;*/}

/*scrolls*/
 ::-webkit-scrollbar {width:6px!important; height:6px!important; background-color:#f5f5f5;}
 ::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.2);}
 ::-webkit-scrollbar-track {background-color:rgba(255, 255, 255, 0.08);}   

/* typography */ 
html{font-size: 1px;/*for using REM units*/}
body{font-family:Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif; font-size:16rem; line-height:1.3; color:var(--dark-gray);}

/* background */
html{background:linear-gradient(to bottom, var(--dark-green) 1px, var(--dark-green) 130px, #dddbd1 131px, #d2dbdc 100%); background-repeat:no-repeat; min-height:100vh;}

/* utilities classes (always with !important)*/
.u-flex{display:flex!important;}
.u-flex-column{flex-direction:column!important;}
.u-margin-end{margin-#{$end-direction}:10px!important;}
.u-hide{display:none!important;}

/* animation */
@keyframes clickableAnimation {
  0% {transform:scale(1);}
  95% {transform:scale(1);}
  96% {transform:scale(1.5) rotate(-30deg);}
  97% {transform:scale(1.5) rotate(30deg);}
  100% {transform:scale(1);}
}
.u-animation-click{animation: clickableAnimation 20s ease-in-out -17s infinite;}

/*icons*/
.icon-back{transform:scale(1.4); transform-origin:center;}
.icon-status{filter:grayscale(1) opacity(0.3) invert(1);}
.icon-silent{filter:grayscale(1) opacity(0.3);}
.icon-attach{/*transform:rotateZ(70deg); transform-origin:center*/;}
.icon-menu{
  text-align:center;
  &::before{
    content:""; display:inline-block; vertical-align:middle; width:4px; height:4px;  border-radius:50%;
    background-color:var(--dark-gray); box-shadow:0px -6px var(--dark-gray), 0px 6px var(--dark-gray);
  }
}

/* Grid Layout */
.main-grid{ 
  --private-block-margins:0; /* private variables are for local componenet use */  
  position:fixed; #{$start-direction}:0; #{$end-direction}:0; top:var(--private-block-margins); bottom:var(--private-block-margins);
  box-shadow:0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); overflow:hidden;
  > *{
     @media #{$break1}, #{$break2}, #{$break3}{max-height:100vh;}
     @media #{$break4open}{max-height:calc(100vh - 40px);}
  }
  @media #{$break2open}{ display:grid; grid-template-areas:"side-a main side-b"; grid-template-columns:minmax(260px, 30%) 1fr auto;}
  @media #{$break4open}{--private-block-margins:20px; width:1396px; margin:0 auto;}
  /*logic styles*/
  &.is-main-info-open{    
    @media #{$break1}{
      .main-side{display:none;}
      .main-content{display:none;}
      .main-info{width:100%; height:100%;}
    }
    @media #{$break2}{
      grid-template-areas:"side-a side-b"; grid-template-columns:minmax(260px, 30%) 1fr;
      .main-content{display:none;}
      .main-info{width:auto;}
    }
  }
  &.is-message-open{
    @media #{$break1}{
      .main-content{transform:translateX(-100%);}
    }
  }
}
.main-side{grid-area:side-a;}
.main-content{grid-area:main;}
.main-info{grid-area:side-b;}

/* elements */
.profile-image{flex-shrink:0; display:block; height:40px; border-radius:50%;}
.big-title{margin:5px 0; font-size:19rem;}
.section-title{color:var(--dark-green); font-size:14rem; margin-bottom:10px;}
.info-text{font-size:14rem; color:rgba(0,0,0,.45);}
.status{
  letter-spacing:-14px; filter:grayscale(1);
  &.is-seen{filter:grayscale(0);}
}
.text-input{
  -moz-appearance:none; -webkit-appearance:none; appearance:none;
  background-color:var(--white); padding:10px; margin:5px 10px; border-radius:20px; border-width:0;
  &:focus{outline:none;}
}
.common-search{
  display:flex; flex-shrink:0; background:var(--light-gray); position:relative; transition:0.2s;
  &::before{content:"πŸ”Ž"; position:absolute; #{$start-direction}:30px; top:15px; filter:grayscale(1) opacity(0.5);}
  &:focus-within{background-color:var(--white);}
  .text-input{flex:1; padding-#{$start-direction}:50px; margin:8px 16px;}
}
.unread-messsages{
  display:block; min-width:20px; padding:3px; border-radius:12px; margin:0 5px; background-color:#3cdf7a;
  color:var(--white); font-size:12rem; font-weight:bold; text-align:center;  
  &:empty{display:none;}
}
.common-button{
    padding:8px;
    &:hover, &:focus{
      outline:none;
      .icon{filter: grayscale(1) opacity(1);}
    }
    .icon{display:block; width:24px; height:24px; font-size:18px; vertical-align:middle; text-align:center; filter: grayscale(1) opacity(0.5); transition:0.2s;}
}
.twitter{
  display:block; color:rgba(29,161,242,1.00);
  &-label{margin-#{$end-direction}:10px; }
  &-user{font-size:20px;}
}

/*** components ***/
.common-header{
  --common-header-border-color:#e0e0e0;
  display:flex; background-color:var(--main-gray); height:60px; padding:10px 16px; flex-shrink:0;
  &-content{@include trim();}
  &-title{@include trim();}
  &-start{display:flex; margin-#{$end-direction}:auto;}
  &-content{margin:auto 15px; line-height:1.5;}
}
.common-nav{
  &-list{display:flex;}
  &-item{margin-#{$start-direction}:10px;}
}

/*main*/
.main-content{
  display:flex; flex-direction:column;
  .common-header{border-#{$start-direction}:solid 1px var(--common-header-border-color);}
  @media #{$break1}{
    position:fixed; #{$end-direction}:-100%; top:0; bottom:0; width:100%; transition:transform 0.4s;
  }
}
.messanger{
  @include scroll();
  flex:1; background-color:#e5ddd5;
  &-list{display:flex; flex-direction:column; padding:20px 7%;}
}
.common-message{
  position:relative; background-color:var(--white); width:-moz-fit-content; width:fit-content; max-width:500px; padding:8px; border-radius:8px; box-shadow:0 1px 0.5px rgba(0,0,0,.13); margin-bottom:10px;
  time{font-size:11rem; color:rgba(0,0,0,.45); float:$end-direction; margin-top:8px;}
  .status{float:$end-direction; padding-#{$end-direction}:10px; text-align:end;}
  &::before{
    position:absolute; #{$start-direction}:-10px; top:0;
    content:""; display:block; border:solid; border-width:0px 16px 16px 0px; border-color:transparent; border-#{$end-direction}-color:var(--white); 
  } 
  &.is-you{
    --user-color-message:#cfe9ba;
    align-self:flex-end; background-color:var(--user-color-message);
    &::before{
      #{$start-direction}:auto; #{$end-direction}:-28px; border-width:0px 16px 16px 16px; border-color:transparent; border-#{$start-direction}-color:var(--user-color-message); 
    }
    + .is-you::before{display:none;}
  }
  &.is-other + .is-other::before{display:none;}
  &.is-time{
    align-self:center; background-color:var(--info-message); color:rgba(74,74,74,.88); font-size:12rem; text-transform:uppercase;
    &::before{display:none;}
  }
}
.message-box{
  display:flex; flex-shrink:0;
  background-color:#f0f0f0; padding:5px 10px;
  .text-input{
    flex:1;
    &:empty::before{content:"Type a message"; font-size:15rem; opacity:0.5;}
  }
}

/*side (users)*/
.main-side{display:flex; flex-direction:column; background-color:var(--white);}
.chats{
   @include scroll(); background-color:var(--white);
  &-item{
    /* layout grid */
    &-button{
      display:grid; grid-template-columns:50px 1fr; grid-column-gap:15px; padding:0 15px; cursor:pointer;
      grid-template-areas:"image header" 
                          "image content";
      &:focus{background-color:#ebebeb; outline:none;}
    }
    .profile-image{grid-area:image;}
    &-header{grid-area:header;}
    &-content{grid-area:content;}
    /*** end grid ***/
    .profile-image{flex-shrink:0; height:50px; margin:auto;}
    &-header{@include trim; display:flex; padding-top:10px;}
    &-title{@include trim; flex:1; font-weight:bold; margin-#{$end-direction}:10px;}
    &-time{font-size:12rem; opacity:0.6;}
    &-last{
      flex:1; opacity:0.6;
      display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; 
    }
    
    &-content{display:flex; padding-bottom:10px; border-bottom:solid 1px #f2f2f2;}    
    &-info{display:flex;}
    /*overrides last item*/
    &:last-child{
      .chats-item-content{border-bottom-width:0;}
    }
  }
}

/*side (chat info)*/
.main-info{
  display:flex; flex-direction:column; background-color:var(--white); width:300px;
  .common-header{border-#{$start-direction}:solid 1px var(--common-header-border-color);}  
  &-content{@include scroll(); background-color:var(--light-gray);}
  &-image{display:block; max-width:200px; margin:0 auto; margin-bottom:20px; border-radius:50%;}
}
.common-box{
  background-color:var(--white); padding:20px;  box-shadow:0 1px 3px rgba(0,0,0,.08); margin-bottom:10px;
  p{font-size:14rem; color:#4a4a4a;}
}

/* CSS Logilcs */
#message-box{
  &:empty ~ #submit-button{display:none;} /*when textbox empty show microhpone*/
  &:not(:empty) ~ #voice-button{display:none;}/*when textbox with texy show submit button*/
}
View Compiled
/*JS isnt my experty πŸ˜‰*/
$(document).ready(function() {
  $(".js-chat-button, .js-back").on("click", function(){
    $(".main-grid").toggleClass("is-message-open");
  });
  
  $(".js-side-info-button, .js-close-main-info").on("click", function(){
      $(".main-grid").toggleClass("is-main-info-open");
      $(".main-info").toggleClass("u-hide");
  });
});


    /* image empty error replace with emoji */
    document.addEventListener("DOMContentLoaded", function(event) {
        document.querySelectorAll('img').forEach(function(img){
            img.onerror = function(){this.src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='50' height='50' viewport='0 0 100 100' style='fill:black;font-size:50px;opacity:0.5;filter:grayscale(1)'><filter id='grayscale'><feColorMatrix type='saturate' values='0.10'/></filter><text y='85%'>πŸ‘Ά</text></svg>";};
        })
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js