Added content wrapper to bubble

Fix corners on media bubbles
Fix margin between posts with reply markups

src/components/chat/bubbles.ts

@@ -536,7 +536,7 @@ export default class ChatBubbles {
     
     if(!bubble) return;
 
-    if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) {
+    if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble-content')) {
       if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
         return;
       }
@@ -1101,7 +1101,7 @@ export default class ChatBubbles {
       
       const div = document.createElement('div');
       div.className = 'bubble service is-date';
-      div.innerHTML = `<div class="bubble__container"><div class="service-msg">${str}</div></div>`;
+      div.innerHTML = `<div class="bubble-content"><div class="service-msg">${str}</div></div>`;
       ////////this.log('need to render date message', dateTimestamp, str);
 
       const container = document.createElement('div');
@@ -1536,15 +1536,20 @@ export default class ChatBubbles {
     //messageDiv.innerText = message.message;
 
     let bubbleContainer: HTMLDivElement;
+    let contentWrapper: HTMLElement;
     
     // bubble
     if(!bubble) {
+      contentWrapper = document.createElement('div');
+      contentWrapper.classList.add('bubble-content-wrapper');
+      
       bubbleContainer = document.createElement('div');
-      bubbleContainer.classList.add('bubble__container');
+      bubbleContainer.classList.add('bubble-content');
       
       bubble = document.createElement('div');
       bubble.classList.add('bubble');
-      bubble.appendChild(bubbleContainer);
+      contentWrapper.appendChild(bubbleContainer);
+      bubble.appendChild(contentWrapper);
 
       if(!our && !message.pFlags.out) {
         //this.log('not our message', message, message.pFlags.unread);
@@ -1561,12 +1566,14 @@ export default class ChatBubbles {
       const classNames = ['bubble'].concat(save.filter(c => wasClassNames.includes(c)));
       bubble.className = classNames.join(' ');
 
-      bubbleContainer = bubble.lastElementChild as HTMLDivElement;
-      bubbleContainer.innerHTML = '';
+      contentWrapper = bubble.lastElementChild as HTMLElement;
+      bubbleContainer = contentWrapper.firstElementChild as HTMLDivElement;
+      contentWrapper.innerHTML = '';
+      contentWrapper.appendChild(bubbleContainer);
       //bubbleContainer.style.marginBottom = '';
-      const animationDelay = bubbleContainer.style.animationDelay;
-      bubbleContainer.style.cssText = '';
-      bubbleContainer.style.animationDelay = animationDelay;
+      const animationDelay = contentWrapper.style.animationDelay;
+      contentWrapper.style.cssText = '';
+      contentWrapper.style.animationDelay = animationDelay;
 
       if(bubble === this.firstUnreadBubble) {
         bubble.classList.add('is-first-unread');
@@ -1648,6 +1655,8 @@ export default class ChatBubbles {
       entities: totalEntities
     });
 
+    let canHaveTail = true;
+    
     if(totalEntities && !messageMedia) {
       let emojiEntities = totalEntities.filter((e) => e._ == 'messageEntityEmoji');
       let strLength = messageMessage.length;
@@ -1672,6 +1681,7 @@ export default class ChatBubbles {
         }
 
         bubble.classList.add('is-message-empty', 'emoji-big');
+        canHaveTail = false;
       } else {
         messageDiv.innerHTML = richText;
       }
@@ -1755,11 +1765,9 @@ export default class ChatBubbles {
         this.appInlineBotsManager.callbackButtonClick(this.peerId, message.mid, button);
       });
 
-      const offset = rows.length * 45 + 'px';
-      bubbleContainer.style.marginBottom = offset;
-      containerDiv.style.bottom = '-' + offset;
-
-      bubbleContainer.prepend(containerDiv);
+      canHaveTail = false;
+      bubble.classList.add('with-reply-markup');
+      contentWrapper.append(containerDiv);
     }
     
     const isOutgoing = message.pFlags.is_outgoing/*  && this.peerId != rootScope.myId */;
@@ -1804,10 +1812,14 @@ export default class ChatBubbles {
           const photo = messageMedia.photo;
           ////////this.log('messageMediaPhoto', photo);
 
+          if(!messageMessage) {
+            canHaveTail = false;
+          }
+          
           bubble.classList.add('hide-name', 'photo');
           
           const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
-          if(message.grouped_id && Object.keys(storage).length != 1 && albumMustBeRenderedFull) {
+          if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
             bubble.classList.add('is-album', 'is-grouped');
             wrapAlbum({
               groupId: message.grouped_id, 
@@ -1822,7 +1834,7 @@ export default class ChatBubbles {
             break;
           }
           
-          const withTail = !isAndroid && !message.message && !withReplies && USE_MEDIA_TAILS;
+          const withTail = !isAndroid && canHaveTail && !withReplies && USE_MEDIA_TAILS;
           if(withTail) bubble.classList.add('with-media-tail');
           wrapPhoto({
             photo, 
@@ -1967,6 +1979,7 @@ export default class ChatBubbles {
           
           if(doc.sticker/*  && doc.size <= 1e6 */) {
             bubble.classList.add('sticker');
+            canHaveTail = false;
             
             if(doc.animated) {
               bubble.classList.add('sticker-animated');
@@ -1993,12 +2006,16 @@ export default class ChatBubbles {
             });
 
             break;
-          } else if(doc.type == 'video' || doc.type == 'gif' || doc.type == 'round'/*  && doc.size <= 20e6 */) {
+          } else if(doc.type === 'video' || doc.type === 'gif' || doc.type === 'round'/*  && doc.size <= 20e6 */) {
             //this.log('never get free 2', doc);
 
-            bubble.classList.add('hide-name', doc.type == 'round' ? 'round' : 'video');
+            if(doc.type === 'round' || !messageMessage) {
+              canHaveTail = false;
+            }
+            
+            bubble.classList.add('hide-name', doc.type === 'round' ? 'round' : 'video');
             const storage = this.appMessagesManager.groupedMessagesStorage[message.grouped_id];
-            if(message.grouped_id && Object.keys(storage).length != 1 && albumMustBeRenderedFull) {
+            if(message.grouped_id && Object.keys(storage).length !== 1 && albumMustBeRenderedFull) {
               bubble.classList.add('is-album', 'is-grouped');
   
               wrapAlbum({
@@ -2011,7 +2028,7 @@ export default class ChatBubbles {
                 loadPromises
               });
             } else {
-              const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && !withReplies && USE_MEDIA_TAILS;
+              const withTail = !isAndroid && !isApple && doc.type !== 'round' && canHaveTail && !withReplies && USE_MEDIA_TAILS;
               if(withTail) bubble.classList.add('with-media-tail');
               wrapVideo({
                 doc, 
@@ -2047,7 +2064,7 @@ export default class ChatBubbles {
             lastContainer && lastContainer.append(timeSpan.cloneNode(true));
 
             bubble.classList.remove('is-message-empty');
-            messageDiv.classList.add((doc.type != 'photo' ? doc.type || 'document' : 'document') + '-message');
+            messageDiv.classList.add((doc.type !== 'photo' ? doc.type || 'document' : 'document') + '-message');
             processingWebPage = true;
             
             break;
@@ -2225,7 +2242,7 @@ export default class ChatBubbles {
         
         //this.log('exec loadDialogPhoto', message);
 
-        bubbleContainer.append(avatarElem);
+        contentWrapper.append(avatarElem);
       }
     } else {
       bubble.classList.add('hide-name');
@@ -2268,6 +2285,10 @@ export default class ChatBubbles {
       });
     }
 
+    if(canHaveTail) {
+      bubble.classList.add('can-have-tail');
+    }
+
     return bubble;
   }
 
@@ -2612,19 +2633,19 @@ export default class ChatBubbles {
             const animationPromise = deferredPromise<void>();
             let lastMsDelay = 0;
             mids.forEach((mid, idx) => {
-              const bubble = this.bubbles[mid];
+              const contentWrapper = this.bubbles[mid].lastElementChild as HTMLElement;
       
               lastMsDelay = ((idx + offsetIndex) || 0.1) * delay;
               //lastMsDelay = (idx || 0.1) * 1000;
               //if(idx || isSafari) {
                 // ! 0.1 = 1ms задержка для Safari, без этого первое сообщение над самым нижним может появиться позже другого с animation-delay, LOL !
-                bubble.style.animationDelay = lastMsDelay + 'ms';
+                contentWrapper.style.animationDelay = lastMsDelay + 'ms';
               //}
     
-              bubble.classList.add('zoom-fade');
-              bubble.addEventListener('animationend', () => {
-                bubble.style.animationDelay = '';
-                bubble.classList.remove('zoom-fade');
+              contentWrapper.classList.add('zoom-fade');
+              contentWrapper.addEventListener('animationend', () => {
+                contentWrapper.style.animationDelay = '';
+                contentWrapper.classList.remove('zoom-fade');
   
                 if(idx === (mids.length - 1)) {
                   animationPromise.resolve();

src/components/chat/contextMenu.ts

@@ -31,11 +31,11 @@ export default class ChatContextMenu {
         this.init = null;
       }
 
-      let bubble: HTMLElement, bubbleContainer: HTMLElement;
+      let bubble: HTMLElement, contentWrapper: HTMLElement;
 
       try {
-        bubbleContainer = findUpClassName(e.target, 'bubble__container');
-        bubble = bubbleContainer ? bubbleContainer.parentElement : findUpClassName(e.target, 'bubble');
+        contentWrapper = findUpClassName(e.target, 'bubble-content-wrapper');
+        bubble = contentWrapper ? contentWrapper.parentElement : findUpClassName(e.target, 'bubble');
       } catch(e) {}
 
       // ! context menu click by date bubble (there is no pointer-events)
@@ -51,7 +51,7 @@ export default class ChatContextMenu {
       if(!mid) return;
 
       // * если открыть контекстное меню для альбома не по бабблу, и последний элемент не выбран, чтобы показать остальные пункты
-      if(chat.selection.isSelecting && !bubbleContainer) {
+      if(chat.selection.isSelecting && !contentWrapper) {
         const mids = this.chat.getMidsByMid(mid);
         if(mids.length > 1) {
           const selectedMid = chat.selection.selectedMids.has(mid) ? mid : mids.find(mid => chat.selection.selectedMids.has(mid));
@@ -83,7 +83,7 @@ export default class ChatContextMenu {
         if(chat.selection.isSelecting && !button.withSelection) {
           good = false;
         } else {
-          good = bubbleContainer || isTouchSupported ? 
+          good = contentWrapper || isTouchSupported ? 
             button.verify() : 
             button.notDirect && button.verify() && button.notDirect();
         }
@@ -112,7 +112,7 @@ export default class ChatContextMenu {
 
         chat.log('touchend', e);
 
-        const good = ['bubble', 'bubble__container', 'message', 'time', 'inner'].find(c => className.match(new RegExp(c + '($|\\s)')));
+        const good = ['bubble', 'bubble-content-wrapper', 'bubble-content', 'message', 'time', 'inner'].find(c => className.match(new RegExp(c + '($|\\s)')));
         if(good) {
           cancelEvent(e);
           //onContextMenu((e as TouchEvent).changedTouches[0]);

src/components/scrollable.ts

@@ -14,7 +14,7 @@ console.log(height);
 */
 
 /*
-Array.from($0.querySelectorAll('.bubble__container')).forEach(_el => {
+Array.from($0.querySelectorAll('.bubble-content')).forEach(_el => {
 	//_el.style.display = '';	
 	//return;
 

src/scss/partials/_chat.scss

@@ -1019,7 +1019,7 @@ $chat-helper-size: 39px;
 	}
 
 	&.is-selecting {
-		&:not(.backwards) .is-in .bubble__container {
+		&:not(.backwards) .is-in .bubble-content-wrapper {
 			transform: translateX(2.5rem);
 		}
 
@@ -1107,9 +1107,8 @@ $chat-helper-size: 39px;
 		.is-in {
 			//margin-left: 45px;
 
-			.bubble__container {
-				margin-left: 45px;
-				//margin-left: 3rem; #DO JS3
+			.bubble-content-wrapper {
+				margin-left: 45px; //margin-left: 3rem; #DO JS3
 
 				@include respond-to(handhelds) {
 					max-width: calc(100% - var(--message-handhelds-margin));
@@ -1120,11 +1119,11 @@ $chat-helper-size: 39px;
 
 	&.is-channel:not(.is-chat) {
 		.bubble {
-			&__container {
+			&-content-wrapper {
 				max-width: 100%;
 			}
 
-			&.with-beside-button .bubble__container {
+			&.with-beside-button .bubble-content-wrapper {
 				max-width: calc(100% - var(--message-beside-button-margin)) !important;
 			}
 		}

src/scss/partials/_chatBubble.scss

@@ -62,6 +62,11 @@ $bubble-margin: .25rem;
   z-index: 1;
   margin: 0 auto $bubble-margin;
   user-select: none;
+  display: flex;
+
+  --background-color: #fff;
+  --accent-color: $color-blue;
+  --secondary-color: $color-gray;
 
   &.is-highlighted, &.is-selected, /* .bubbles.is-selecting */ & {
     &:after {
@@ -72,7 +77,7 @@ $bubble-margin: .25rem;
       top: -#{$bubble-margin / 2};
       bottom: -#{$bubble-margin / 2};
       content: " ";
-      z-index: 1;
+      z-index: -1;
     }
   }
 
@@ -172,16 +177,6 @@ $bubble-margin: .25rem;
 		}
   }
 
-  &.zoom-fade /* .bubble__container */ {
-    //transform: scale(.8) translateZ(0);
-    transform: scale3d(.8, .8, 1);
-    //transform: scale(.8);
-    opacity: 0;
-    transform-origin: center;
-    animation: zoom-opacity-fade-in .2s linear forwards;
-    animation-delay: 0;
-  }
-
   &-select-checkbox {
     z-index: 3;
     position: absolute;
@@ -218,7 +213,7 @@ $bubble-margin: .25rem;
     }
   }
   
-  &__container {
+  &-content {
     //min-width: 60px;
     min-width: 56px;
     max-width: 100%;
@@ -231,8 +226,8 @@ $bubble-margin: .25rem;
     width: max-content;
     height: fit-content;
     z-index: 2;
-    transition: .2s transform;
     user-select: none;
+    background-color: var(--background-color);
 
     body.animation-level-0 & {
       transition: none;
@@ -246,42 +241,9 @@ $bubble-margin: .25rem;
     html.is-touch body:not(.no-select) .bubbles.is-selecting & { // * need no-select on body because chat-input transforms in channels
       user-select: text;
     }
-
-    @include respond-to(not-handhelds) {
-      max-width: 85%;
-    }
-
-    @include respond-to(handhelds) {
-      max-width: calc(100% - var(--message-handhelds-margin));
-    }
-
-    > .user-avatar {
-      position: absolute;
-      margin-left: -45px;
-      //left: -3rem; # DO JS3
-      cursor: pointer;
-
-      .bubbles.is-selecting & {
-        transform: scale3d(1, 1, 1);
-        transform-origin: bottom;
-        transition: transform var(--layer-transition);
-
-        body.animation-level-0 & {
-          transition: none;
-        }
-      }
-
-      .bubbles.is-selecting:not(.backwards) & {
-        transform: scale3d(.76, .76, 1);
-      }
-
-      // @include respond-to(handhelds) {
-      //   left: -45px;
-      // }
-    }
   }
 
-  /* &.with-beside-button &__container {
+  /* &.with-beside-button &-content {
     @include respond-to(handhelds) {
       max-width: calc(100% - var(--message-handhelds-margin)) !important;
     }
@@ -292,7 +254,7 @@ $bubble-margin: .25rem;
     //padding: $bubble-margin 0;
     max-width: var(--messages-container-width);
 
-    .bubble__container {
+    .bubble-content {
       /* justify-self: center; */
       margin: 0 auto;
       max-width: 100%;
@@ -319,7 +281,7 @@ $bubble-margin: .25rem;
       .bubbles-inner:not(.is-scrolling) & {
         //transition-delay: 1.35s;
 
-        .bubble__container {
+        .bubble-content {
           cursor: default;
         }
       }
@@ -329,8 +291,8 @@ $bubble-margin: .25rem;
       } */
     }
 
-    .chat.type-chat & .bubble__container,
-    .chat.type-discussion & .bubble__container {
+    .chat.type-chat & .bubble-content,
+    .chat.type-discussion & .bubble-content {
       cursor: pointer;
       pointer-events: all;
     }
@@ -361,10 +323,6 @@ $bubble-margin: .25rem;
     }
   }
 
-  .message strong {
-    font-weight: 500 !important;
-  }
-
   /* &.is-group-first {
     padding-top: 10px;
   } */
@@ -395,7 +353,7 @@ $bubble-margin: .25rem;
 
   &:not(.forwarded) {
     &:not(.is-group-first) {
-      .bubble__container > .name, .document-wrapper > .name {
+      .bubble-content > .name, .document-wrapper > .name {
         display: none;
       }
 
@@ -405,7 +363,7 @@ $bubble-margin: .25rem;
     }
   }
 
-  &:not(.is-group-last) .bubble__container > .user-avatar {
+  &:not(.is-group-last) .bubble-content-wrapper > .user-avatar {
     display: none;
   }
 
@@ -429,7 +387,7 @@ $bubble-margin: .25rem;
   }
   
   &.photo, &.video {
-    .bubble__container {
+    .bubble-content {
       width: min-content;
     }
     
@@ -472,7 +430,7 @@ $bubble-margin: .25rem;
   &.emoji-big {
     font-size: 0;
 
-    .bubble__container {
+    .bubble-content {
       background: none!important;
       box-shadow: none;
       line-height: 1;
@@ -491,7 +449,7 @@ $bubble-margin: .25rem;
       }
     }
 
-    &.sticker .bubble__container {
+    &.sticker .bubble-content {
       max-width: 140px !important;
       max-height: 140px !important;
     }
@@ -503,8 +461,6 @@ $bubble-margin: .25rem;
     img.emoji {
       height: 64px;
       width: 64px;
-      /* height: 96px;
-      width: 96px; */
     }
   }
   
@@ -514,8 +470,6 @@ $bubble-margin: .25rem;
     img.emoji {
       height: 48px;
       width: 48px;
-      /* height: 64px;
-      width: 64px; */
     }
   } 
   
@@ -525,13 +479,11 @@ $bubble-margin: .25rem;
     img.emoji {
       height: 32px;
       width: 32px;
-      /* height: 48px;
-      width: 48px; */
     }
   }
   
   &.sticker, &.round, &.emoji-big {
-    .bubble__container {
+    .bubble-content {
       cursor: pointer;
       background: none!important;
       box-shadow: none;
@@ -561,7 +513,7 @@ $bubble-margin: .25rem;
       border-radius: 0;
     }
 
-    .bubble__container {
+    .bubble-content {
       max-width: 200px !important;
       max-height: 200px !important;
     }
@@ -719,24 +671,10 @@ $bubble-margin: .25rem;
     }
   }
 
-  //&.video {
-    //.attachment {
-      //max-height: fit-content;
-      
-      /*img {
-        width: 100%;
-        height: 100%;
-      }*/
-    //}
-  //}
-  
   &.round {
     .attachment {
       max-height: 200px;
       max-width: 200px;
-      //max-height: fit-content;
-      //-webkit-clip-path: ellipse(100px 100px at center);
-      //clip-path: ellipse(100px 100px at center);
     }
   }
 
@@ -750,8 +688,6 @@ $bubble-margin: .25rem;
     .preview {
       max-height: unquote('min(400px, 100%)');
       max-width: unquote('min(480px, 100%)');
-      /* max-height: 100%;
-      max-width: 100%; */
       border-radius: 4px;
       margin-bottom: 3px;
       overflow: hidden;
@@ -763,8 +699,6 @@ $bubble-margin: .25rem;
       
       img, video {
         max-width: 100%;
-        /* width: 100%;
-        height: 100%; */
       }
     }
     
@@ -804,11 +738,6 @@ $bubble-margin: .25rem;
   
   .web, .reply {
     font-size: var(--messages-secondary-text-size);
-    //transition: anim(background-color);
-    
-    /* &:hover {
-      cursor: pointer;
-    } */
     
     .name, .reply-title {
       font-weight: 500 !important;
@@ -817,7 +746,7 @@ $bubble-margin: .25rem;
   }
 
   &.is-square-photo {
-    .bubble__container {
+    .bubble-content {
       width: fit-content;
     }
 
@@ -847,7 +776,7 @@ $bubble-margin: .25rem;
   }
 
   &.is-vertical-photo {
-    .bubble__container {
+    .bubble-content {
       width: fit-content;
     }
   }
@@ -897,10 +826,7 @@ $bubble-margin: .25rem;
   
   .message {
     font-size: var(--messages-text-size);
-    //padding: 0 9px .2675rem 9px;
     padding: 0 9px 6px 9px;
-    /* overflow: hidden;
-    text-overflow: ellipsis; */
     max-width: 100%;
     color: #000;
     line-height: 1.3125; // 21 / 16
@@ -908,13 +834,7 @@ $bubble-margin: .25rem;
     white-space: pre-wrap; // * fix spaces on line begin
     position: relative;
 
-    /* * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    } */
-    
     &:last-child {
-      //padding-top: .2675rem;
       padding-top: 6px;
     }
   }
@@ -1036,7 +956,7 @@ $bubble-margin: .25rem;
   }
 
   &.is-multiple-documents {
-    /* .bubble__container {
+    /* .bubble-content {
       position: unset;
     } */
 
@@ -1382,7 +1302,7 @@ $bubble-margin: .25rem;
     user-select: none;
   }
   
-  &__container > .name, .document-wrapper > .name {
+  &-content > .name, .document-wrapper > .name {
     /* padding: .2675rem 9px 0 9px; */
     /* padding: .32rem 9px 0 9px; */
     padding: 5px 9px 0 9px;
@@ -1398,13 +1318,13 @@ $bubble-margin: .25rem;
     //white-space: nowrap;
   }
 
-  &:not(.is-group-first) .bubble__container > .name .name {
+  &:not(.is-group-first) .bubble-content > .name .name {
     display: none;
   }
   
   &:not(.webpage) {
     &.photo, &.video {
-      .bubble__container > .name {
+      .bubble-content > .name {
         //padding-bottom: .2675rem;
         padding-bottom: 6px;
       }
@@ -1433,7 +1353,7 @@ $bubble-margin: .25rem;
     }
   }
   
-  &:not(.sticker):not(.emoji-big):not(.round).is-group-last .bubble__container:after {
+  &.can-have-tail.is-group-last .bubble-content:after {
     position: absolute;
     //bottom: 0;
     width: 11px;
@@ -1447,14 +1367,14 @@ $bubble-margin: .25rem;
 
   &.photo, &.video {
     &.is-message-empty.is-group-last:not(.with-replies) {
-      .bubble__container:after {
+      .bubble-content:after {
         display: none;
       }
     }
   }
 
   &.is-message-empty.is-group-last.with-media-tail {
-    .bubble__container:after {
+    .bubble-content:after {
       display: none;
     }
 
@@ -1566,7 +1486,7 @@ $bubble-margin: .25rem;
       display: none;
     }
 
-    &.is-in .bubble__container {
+    &.is-in .bubble-content {
       margin-left: 0;
     }
   }
@@ -1582,9 +1502,62 @@ $bubble-margin: .25rem;
   }
 }
 
+.bubble-content-wrapper {
+  transition: transform var(--layer-transition);
+  transform: scale(1) translateX(0);
+
+  &.zoom-fade /* .bubble-content */ {
+    //transform: scale(.8) translateZ(0);
+    transform: scale3d(.8, .8, 1);
+    //transform: scale(.8);
+    opacity: 0;
+    transform-origin: center;
+    animation: zoom-opacity-fade-in .2s linear forwards;
+    animation-delay: 0;
+  }
+
+  @include respond-to(not-handhelds) {
+    max-width: 85%;
+  }
+
+  @include respond-to(handhelds) {
+    max-width: calc(100% - var(--message-handhelds-margin));
+  }
+
+  > .user-avatar {
+    position: absolute;
+    margin-left: -45px;
+    //left: -3rem; # DO JS3
+    bottom: 0;
+    cursor: pointer;
+
+    .bubbles.is-selecting & {
+      transform: scale3d(1, 1, 1);
+      transform-origin: bottom;
+      transition: transform var(--layer-transition);
+
+      body.animation-level-0 & {
+        transition: none;
+      }
+    }
+
+    .bubbles.is-selecting:not(.backwards) & {
+      transform: scale3d(.76, .76, 1);
+    }
+
+    // @include respond-to(handhelds) {
+    //   left: -45px;
+    // }
+  }
+}
+
 .bubble.service {
   align-self: center;
 
+  .bubble-content {
+    background-color: transparent;
+  }
+  
   .service-msg {
     color: #fff;
     background-color: rgba(0, 0, 0, .24);
@@ -1624,36 +1597,34 @@ $bubble-margin: .25rem;
 }
 
 .bubble.is-in {
-  .bubble__container {
-    margin-right: auto;
-    background-color: #ffffff;
-    
+  .bubble-content {
     &, .poll-footer-button {
       border-radius: 6px 12px 12px 6px;
     }
   }
     
   &.is-group-first {
-    .bubble__container, .poll-footer-button {
-      border-radius: 12px 12px 12px 6px;
+    .bubble-content, .poll-footer-button {
+      border-top-left-radius: 12px;
     }
   }
 
   &.is-group-last {
-    .bubble__container, .poll-footer-button {
-      border-radius: 6px 12px 12px 0px;
-      //border-radius: 12px 12px 12px 0px;
-    }
+    &.can-have-tail {
+      .bubble-content, .poll-footer-button {
+        border-bottom-left-radius: 0;
+      }
   
-    .bubble__container:after {
-      margin-left: -8.4px;
-      background-image: url('assets/img/msg-tail-left.svg');
+      .bubble-content:after {
+        margin-left: -8.4px;
+        background-image: url('assets/img/msg-tail-left.svg');
+      }
     }
-  }
 
-  &.is-group-first.is-group-last {
-    .bubble__container, .poll-footer-button {
-      border-radius: 12px 12px 12px 0px;
+    &:not(.can-have-tail) {
+      .bubble-content, .poll-footer-button {
+        border-bottom-left-radius: 12px;
+      }
     }
   }
 
@@ -1690,11 +1661,6 @@ $bubble-margin: .25rem;
   
   .quote {
     border-left: 2px $color-blue solid;
-    
-    /* * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    } */
   }
 
   .quote .name, .reply-title/* , .reply i */ {
@@ -1712,13 +1678,13 @@ $bubble-margin: .25rem;
   }
 
   &.is-message-empty.is-group-last {
-    &:not(.with-media-tail):not(.with-replies) {
+    /* &:not(.with-media-tail):not(.with-replies) {
       &.photo, &.video {
-        .bubble__container {
+        .bubble-content {
           border-bottom-left-radius: 6px;
         }
       }
-    }
+    } */
 
     &.with-media-tail {
       .attachment {
@@ -1744,26 +1710,11 @@ $bubble-margin: .25rem;
   } */
 }
 
-/* @include respond-to(handhelds) {
-  .bubble.is-in {
-    margin-right: auto;
-  }
-
-  .bubble.is-out {
-    margin-left: auto;
-  }
-} */
-
 .bubble.is-out {
-  .bubble__container {
-    margin-left: auto;
-    background-color: #eeffde;
-
-    > .user-avatar {
-      left: auto;
-      right: -2.5rem;
-    }
+  flex-direction: row-reverse;
+  --background-color: #eeffde;
 
+  .bubble-content {
     &, .poll-footer-button {
       border-radius: 12px 6px 6px 12px;
     }
@@ -1773,26 +1724,35 @@ $bubble-margin: .25rem;
     }
   }
 
+  /* .bubble-content-wrapper {
+    > .user-avatar {
+      left: auto;
+      right: -2.5rem;
+    }
+  } */
+    
   &.is-group-first {
-    .bubble__container, .poll-footer-button {
-      border-radius: 12px 12px 6px 12px;
+    .bubble-content, .poll-footer-button {
+      border-top-right-radius: 12px;
     }
   }
     
   &.is-group-last {
-    .bubble__container, .poll-footer-button {
-      border-radius: 12px 6px 0px 12px;
-    }
+    &.can-have-tail {
+      .bubble-content, .poll-footer-button {
+        border-bottom-right-radius: 0;
+      }
       
-    .bubble__container:after {
-      right: -8.4px;
-      background-image: url('assets/img/msg-tail-right.svg');
+      .bubble-content:after {
+        right: -8.4px;
+        background-image: url('assets/img/msg-tail-right.svg');
+      }
     }
-  }
 
-  &.is-group-first.is-group-last {
-    .bubble__container, .poll-footer-button {
-      border-radius: 12px 12px 0px 12px;
+    &:not(.can-have-tail) {
+      .bubble-content, .poll-footer-button {
+        border-bottom-right-radius: 12px;
+      }
     }
   }
     
@@ -1920,13 +1880,13 @@ $bubble-margin: .25rem;
   }
 
   &.is-message-empty.is-group-last {
-    &:not(.with-media-tail) {
+    /* &:not(.with-media-tail) {
       &.photo, &.video {
-        .bubble__container {
+        .bubble-content {
           border-bottom-right-radius: 6px;
         }
       }
-    }
+    } */
 
     &.with-media-tail {
       .attachment {
@@ -2030,7 +1990,6 @@ $bubble-margin: .25rem;
 }
 
 .reply-markup {
-  position: absolute;
   width: 100%;
 
   &-row {