ol.messages-list
  li.spacing
  li.message
    .message-bubble
      .message-text.
        iOS/iMessage gradient effect, with css/svg
  li.message
   .message-bubble
     .message-text.
       and good performance
  li.message
   .message-bubble
     .message-text.
       Scroll down to better see the effect.
  li.spacing
  li.message
   .message-bubble
     .message-text.
       well, since I need to add some messages here so it scrolls, i might as well explain how it works
  li.message
   .message-bubble
     .message-text.
       it's a bit tricky.
  li.spacing
  li.message
   .message-bubble
     .message-text.
       there's a big gradient background, that spans the entire window
  li.message
   .message-bubble
     .message-text.
       the white background you see is actually being added on each message 
  li.message
   .message-bubble
     .message-text.
       the bubble shape itself is not a blue bubble, but a white border with a transparent center
  li.spacing
  li.message
   .message-bubble
     .message-text.
       Effectively, each message is a "window" through which one can take a peek at the background
  li.spacing
  li.message
   .message-bubble
     .message-text.
       A little trick is used to give the bubble shape to the messages.
  li.message
   .message-bubble
     .message-text.
       they have an svg image as a border
  li.message
   .message-bubble
     .message-text.
       using the (little known?) "border-image-source" and "border-image-slice" css properties
  li.spacing
  li.message.message--friend
   .message-bubble
     .message-text.
       ok cool
  li.message.message--friend
   .message-bubble
     .message-text.
       why not use, like, background-attachment: fixed or something though?
  li.spacing
  li.message
   .message-bubble
     .message-text.
       for performance reasons
  li.message
   .message-bubble
     .message-text.
       fixed background makes the browser redraw things every time it scrolls
  li.message
   .message-bubble
     .message-text.
       while doing it this way makes the browser do only a composite operation
  li.message
   .message-bubble
     .message-text.
       that's it, just move things around instead of redrawing them
  li.spacing
  li.message
   .message-bubble
     .message-text.
       that's what I gather, anyway
  li.message
    .message-bubble
      .message-text.
        not completely sure
  li.message
   .message-bubble
     .message-text.
       might depend on the browser, gotta test a bit more
  li.spacing
  li.message.message--friend
   .message-bubble
     .message-text.
       ok cool
  li.spacing

body
  background #f0f0f0
  color white

.messages-list
  list-style-type none
  padding 0
  margin 0
  background linear-gradient(#43cdf6,#0087fe)
  width 340px
  margin 0 auto
  height 100vh
  max-height 450px
  overflow-y scroll
  box-sizing border-box
  border 1px solid #aeaeae

.spacing
  height 15px
  background white
  
.message
  display flex
  border-bottom 2px solid white
  border-right 5px solid white
  &::before
    content ""
    flex-grow 1
    background white
    
    
.message--friend
  display flex
  border-bottom 2px solid white
  border-right 5px solid white
  &::before
    content none
  &::after
    content ""
    flex-grow 1
    background white
    
.message-bubble
  padding 1px
  size=20px
  border-width size
  border-style solid
  border-right-width 43px*(size/31px)
  border-image-slice 31 43 31 31
  max-width 200px
  border-image-source url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIg0KCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9Ijk0cHgiIGhlaWdodD0iNjhweCIgdmlld0JveD0iMCAwIDk0IDY4IiBvdmVyZmxvdz0idmlzaWJsZSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTQgNjgiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGRlZnM+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzEuNzMzLDBIMHYzMS43MzNDMCwxNC4yMDgsMTQuMjA4LDAsMzEuNzMzLDB6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMCwzNi4yNjdWNjhoMzEuNzMzQzE0LjIwOCw2OCwwLDUzLjc5MiwwLDM2LjI2N3oiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik00OS44NjcsNjhIOTMuNWMtMTQuNjY3LDAtMjEuNDI2LTUuNjE1LTIzLjIzMS03LjQzNEM2NC43NTIsNjUuMjAzLDU3LjYzNyw2OCw0OS44NjcsNjh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDkuODY3LDBDNjcuMzkzLDAsODEuNiwxNC4yMDgsODEuNiwzMS43MzN2NC41MzNDODEuNiw2NSw5MSw2OCw5My41LDY4VjBINDkuODY3eiIvPg0KPC9zdmc+DQo=')

  
.message--friend .message-bubble
  padding 1px
  size=20px
  border-width size
  border-style solid
  border-left-width 43px*(size/31px)
  border-image-slice 31 31 31 43
  color black
  background #E5E6EA
  border-image-source url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5My41cHgiCgkgaGVpZ2h0PSI2OHB4IiB2aWV3Qm94PSIwIDAgOTMuNSA2OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTMuNSA2OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8zIj4KCTxyZWN0IHg9Ii04LjY2NyIgeT0iLTguNDkzIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMTEyIiBoZWlnaHQ9Ijg5LjMzMyIvPgo8L2c+CjxnIGlkPSJMYXllcl8yIj4KPC9nPgo8ZyBpZD0iTGF5ZXJfMSI+Cgk8cGF0aCBmaWxsPSIjRTVFNkVBIiBkPSJNNjEuNzY3LDBINDMuNjMzQzI2LjEwNywwLDExLjksMTQuMjA4LDExLjksMzEuNzMzdjQuNTMzQzExLjksNjUsMi41LDY4LDAsNjgKCQljMTQuNjY3LDAsMjEuNDI2LTUuNjE1LDIzLjIzMS03LjQzNEMyOC43NDgsNjUuMjAzLDM1Ljg2Myw2OCw0My42MzMsNjhoMTguMTMzQzc5LjI5Miw2OCw5My41LDUzLjc5Miw5My41LDM2LjI2N3YtNC41MzMKCQlDOTMuNSwxNC4yMDgsNzkuMjkyLDAsNjEuNzY3LDB6Ii8+CjwvZz4KPC9zdmc+Cg==')
  
.message-text
  margin-top -10px
  margin-bottom -9px
  font-family "San Francisco","Helvetica Neue","Helvetica","Arial",sans-serif
  line-height 1.3