.date-separator {
  align-items: center;
  color: #858b96;
  display: flex;
  font-size: 12px;
  font-weight: 650;
  gap: 12px;
  margin: 9px 0 24px;
}

.date-separator::before,
.date-separator::after {
  background: #e0e4eb;
  content: "";
  flex: 1;
  height: 1px;
}

.date-separator span { white-space: nowrap; }
.user-message { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; max-width: 78%; }
.message.user .user-message .bubble { max-width: 100%; }
.message-actions { display: flex; gap: 4px; margin: 5px 5px 0; opacity: .55; transition: opacity .15s; }
.message.user:hover .message-actions,
.message-actions:focus-within { opacity: 1; }
.message-actions button { background: transparent; border: 0; border-radius: 7px; color: #697181; cursor: pointer; font-size: 11px; padding: 3px 7px; }
.message-actions button:hover { background: #e8ebf1; color: #303846; }

@media (max-width: 760px) {
  .user-message { max-width: 90%; }
  .message.user .user-message .bubble { max-width: 100%; }
}