/* Milo v0.4.92 — Telegram-style grouped bubbles and tails. */

/* Normal separation between independent message groups. */
.msgLine{
  margin-top:8px!important;
  margin-bottom:8px!important;
}

/* Consecutive messages from one sender sit almost flush, like Telegram. */
.messages > .msgLine.group-first{margin-bottom:1px!important}
.messages > .msgLine.group-middle{margin-top:1px!important;margin-bottom:1px!important}
.messages > .msgLine.group-last{margin-top:1px!important}

.msgLine .bubble{
  position:relative;
  border-radius:18px!important;
  padding-top:9px!important;
  padding-bottom:8px!important;
}

/* Rounded outer corners; the side facing the tail is tighter. */
.msgLine:not(.mine) .bubble{border-bottom-left-radius:5px!important}
.msgLine.mine .bubble{
  border-bottom-right-radius:5px!important;
  border-bottom-left-radius:18px!important;
}

/* Tighten only the joined corners inside a consecutive run. */
.msgLine:not(.mine).group-first .bubble,
.msgLine:not(.mine).group-middle .bubble{border-bottom-left-radius:7px!important}
.msgLine:not(.mine).group-middle .bubble,
.msgLine:not(.mine).group-last .bubble{border-top-left-radius:7px!important}
.msgLine.mine.group-first .bubble,
.msgLine.mine.group-middle .bubble{border-bottom-right-radius:7px!important}
.msgLine.mine.group-middle .bubble,
.msgLine.mine.group-last .bubble{border-top-right-radius:7px!important}

/* Tail only on the final message of a run (or a single message). */
.msgLine .bubble::before{content:none!important}
.msgLine.group-single:not(.mine) .bubble::before,
.msgLine.group-last:not(.mine) .bubble::before,
.msgLine.group-single.mine .bubble::before,
.msgLine.group-last.mine .bubble::before{
  content:""!important;
  position:absolute;
  bottom:0;
  width:9px;
  height:12px;
  background:inherit;
  z-index:0;
}
.msgLine.group-single:not(.mine) .bubble::before,
.msgLine.group-last:not(.mine) .bubble::before{
  left:-4px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:2px;
  transform:skewX(-22deg);
  transform-origin:bottom right;
}
.msgLine.group-single.mine .bubble::before,
.msgLine.group-last.mine .bubble::before{
  right:-4px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:2px;
  transform:skewX(22deg);
  transform-origin:bottom left;
}
.msgLine .bubble::after{content:none!important}
/* Do not override absolutely positioned role badge. */
.msgLine .bubble > *:not(.groupAuthorRole){position:relative;z-index:1}
.msgLine[data-group-author-ready="1"] .bubble{overflow:visible}

@media(max-width:760px){
  .msgLine{margin-top:7px!important;margin-bottom:7px!important}
  .messages > .msgLine.group-first{margin-bottom:1px!important}
  .messages > .msgLine.group-middle{margin-top:1px!important;margin-bottom:1px!important}
  .messages > .msgLine.group-last{margin-top:1px!important}

  .msgLine .bubble{
    border-radius:17px!important;
    padding-top:8px!important;
    padding-bottom:7px!important;
  }
  .msgLine:not(.mine) .bubble{border-bottom-left-radius:5px!important}
  .msgLine.mine .bubble{border-bottom-right-radius:5px!important;border-bottom-left-radius:17px!important}
}