(CSS) iMessage 스타일 채팅창

<div class="chat-room">
    <p class="from-them">다음 뉴스입니다.

</p>
    <p class="from-them">앞으로 부처님오신날과 성탄절에도 대체공휴일이 적용됩니다.

</p>
    <p class="from-me">인사혁신처는 이 같은 내용을 담은 '관공서의 공휴일에 관한 규정' 개정안을 내일(16일) 입법예고한다고 오늘(15일) 밝혔습니다.

</p>
    <p class="from-them">해당 개정안은 부처님오신날, 기독탄신일에 대해 대체 공휴일을 적용하는 내용이 포함돼있습니다.

</p>
    <p class="from-me">이번 대체공휴일 확대 대상일은 국민의 휴식권 보장과 중소기업 부담, 경제에 미치는 영향 등을 종합적으로 고려해 관계부처 간 협의를 통해 정했다고 혁신처는 설명했습니다.

</p>
    <p class="from-me">김승호 처장은 "이번 개정안이 국민에게 적정한 휴식권을 보장하고 소비진작, 지역경제 등 경기 활성화에 도움이 될 수 있기를 바란다"고 밝혔습니다.

</p>
    <p class="from-me">MBC 뉴스입니다.

</p>
</div>

.chat-room {
  border: 1px solid #000;
  background-color: #fff;
  border: 1px solid #e5e5ea;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  font-family: "SanFrancisco";
  font-size: 1.25rem;
  margin: 0 auto 1rem;
  max-width: 600px;
  padding: 0.5rem 1.5rem;
}
.chat-room p {
  border-radius: 1.15rem;
  line-height: 1.25;
  max-width: 75%;
  padding: 0.5rem 0.875rem;
  position: relative;
  word-wrap: break-word;
}
.chat-room p::before,
.chat-room p::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}

/* 상대방 */
.chat-room p.from-them {
  align-items: flex-start;
  background-color: #e5e5ea;
  color: #000;
  width: fit-content;
}
.chat-room p.from-them::after {
  background-color: #fff;
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
}
.chat-room p.from-them::before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid #e5e5ea;
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}

/* 나 */
.chat-room p.from-me {
  align-self: flex-end;
  background-color: #248bf5;
  color: #fff;
}
.chat-room p.from-me::after {
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform: translate(-30px, -2px);
  width: 10px;
}
.chat-room p.from-me::before {
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #248bf5;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}