.phonecall {
        max-width: 550px;
        margin: 20px auto;
}

.speech-bubble {
        position: relative;
        width: 70%;
        margin: 15px;
        padding: 10px;
        border-radius: 10px;
        clear: both;
}

.speech-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
}

.caller {
        float: right;
        background-color: #DCF8C6;
}

.caller::before {
        right: auto;
        left: -10px;
        bottom: -10px;
        border-color: #DCF8C6 transparent transparent transparent;
}

.callee {
	float: left;
	background-color: #E5E5EA;
}

.callee::before {
        left: auto;
        right: -10px;
        bottom: -10px;
        border-color: #E5E5EA transparent transparent transparent;
}

.name {
        font-weight: bold;
        position: absolute;
        top: -20px; background:transparent;
}

.name.caller {
        right: calc(100% + 10px);
}

.name.callee {
        left: calc(100% + 10px);
}



.Phonecall {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 20px auto;
}

/* Each message row layout */
.Phonecall .speech-bubble {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-end;
  gap: 10px;
  position: relative;
}

/* Flip name and message for even messages */
.Phonecall .speech-bubble:nth-child(even) {
  grid-template-columns: 1fr auto;
}

/* Name block */
.Phonecall .speech-bubble .name {
  font-weight: bold;
  white-space: nowrap;
  font-size: 14px;
}

/* Message bubble block */
.Phonecall .speech-bubble .msg {
  padding: 10px 14px;
  border-radius: 12px;
  background-color: #E5E5EA;
  position: relative;
  max-width: 100%;
  line-height: 1.4;
}

/* Tail base */
.Phonecall .speech-bubble .msg::before {
  content: '';
  position: absolute;
  bottom: -10px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
}

/* Tail for odd messages (callee, left side) */
.Phonecall .speech-bubble:nth-child(odd) .msg {
  background-color: #E5E5EA;
}
.Phonecall .speech-bubble:nth-child(odd) .msg::before {
  right: -10px;
  border-color: #E5E5EA transparent transparent transparent;
}

/* Tail for even messages (caller, right side) */
.Phonecall .speech-bubble:nth-child(even) .msg {
  background-color: #DCF8C6;
}
.Phonecall .speech-bubble:nth-child(even) .msg::before {
  left: -10px;
  border-color: #DCF8C6 transparent transparent transparent;
}