@import "../../../../../styles/index.scss";

.deleted-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  background-color: $offWhiteColor;
  border-radius: $borderRadius;
  max-width: fit-content;

  .deleted-message-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: $lightGrayColor;
    font-size: 14px;

    .delete-icon {
      font-size: 16px;
      color: $lightGrayColor;
    }

    .deleted-text {
      font-style: italic;
    }
  }

  .deleted-timestamp {
    font-size: 12px;
    color: $inputInfoColor;
    display: flex;
    justify-content: flex-end;
  }

  // User deleted message (right-aligned)
  &.user-deleted-message {
    margin-left: auto;
    margin-right: 0;

    .deleted-timestamp {
      justify-content: flex-end;
    }
  }

  // Assistant deleted message (left-aligned)
  &.assistant-deleted-message {
    margin-left: 0;
    margin-right: auto;

    .deleted-timestamp {
      justify-content: flex-end;
    }
  }
}
