```php
```

### Key Updates in `joebot.php`
- **Enqueue Function**: The `joebot_enqueue_scripts` function uses `wp_enqueue_style` and `wp_enqueue_script` to load `joebot-styles.css` and `joebot-scripts.js` from the plugin directory (`plugin_dir_url(__FILE__)` ensures correct file paths).
- **Nonce for Security**: Added a nonce (`wp_create_nonce('joebot_nonce')`) to the `joebot_ajax` object and included `check_ajax_referer` in the AJAX handlers to enhance security.
- **Default Motivational Text**: Added a fallback text (`Stay inspired and keep pushing forward!`) in the `joebot_get_motivational_text` function for consistency with the JavaScript fallback.
- **Shortcode**: Kept the `[joebot]` shortcode, which outputs the chatbot HTML structure, making it compatible with Elementor’s Shortcode widget.

### Steps to Install on Your Elementor-Based Website
1. **Create Plugin Directory and Upload Files**:
   - Access your WordPress site via FTP (e.g., FileZilla) or a file manager plugin (e.g., WP File Manager).
   - Navigate to `wp-content/plugins/`.
   - Create a folder named `joebot`.
   - Upload the following files to `wp-content/plugins/joebot/`:
     - `joebot.php` (use the content above).
     - `joebot-scripts.js` (from the previous response with `bottom: 80px` and `left: -10px`).
     - `joebot-styles.css` (from the previous response with `bottom: 80px` and `left: -10px`).
   - Ensure file permissions are set to 644 for files and 755 for the directory.

2. **Activate the Plugin**:
   - Log in to your WordPress admin dashboard.
   - Go to **Plugins > Installed Plugins**.
   - Find **JoeBot Chatbot** in the list and click **Activate**.

3. **Add the Chatbot to Your Elementor Page**:
   - **Using the Shortcode** (Recommended for Elementor):
     - Edit the page where you want the chatbot to appear in Elementor (e.g., **Pages > All Pages > Edit with Elementor**).
     - Drag the **Shortcode** widget from the Elementor sidebar to the desired section.
     - In the Shortcode widget settings, enter `[joebot]`.
     - Save and publish the page.
   - **Alternative: Using Custom HTML** (if you prefer manual HTML):
     - Drag the **HTML** widget to the page.
     - Paste the HTML from the `joebot_shortcode` function (as shown in the previous response):
       ```html
       <div class="chatbot">
           <div class="chatbot-icon"></div>
           <div class="chatbot-window">
               <div class="chatbot-header">
                   <span>JoeBot - Your AI Mentor</span>
                   <button class="minimize-button">-</button>
                   <button class="close-button">×</button>
               </div>
               <button class="secondary-close-button">X</button>
               <div class="chatbot-messages"></div>
               <div class="typing-indicator" style="display: none;">Typing...</div>
               <div class="chatbot-suggestions"></div>
               <input type="text" class="chatbot-input" id="chatbot-input" name="chatbot-input" placeholder="Ask JoeBot anything...">
               <div class="chatbot-contact-form" style="display: none; padding: 10px;">
                   <input type="text" class="joebot-contact-name" placeholder="Your Name" style="width: 100%; margin-bottom: 10px; padding: 5px;">
                   <input type="email" class="joebot-contact-email" placeholder="Your Email" style="width: 100%; margin-bottom: 10px; padding: 5px;">
                   <button class="joebot-contact-submit" style="background: #FF6200; color: #000000; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">Submit</button>
               </div>
           </div>
       </div>
       ```
     - Save and publish the page.
   - **Site-Wide (Elementor Pro)**:
     - Go to **Templates > Theme Builder > Footer > Add New**.
     - Add the Shortcode widget with `[joebot]` or the HTML widget with the code above.
     - Publish the template with conditions set to “Entire Site” or specific pages.

4. **Configure Motivational Text (Optional)**:
   - Go to **Settings > JoeBot Settings** in the WordPress dashboard.
   - Enter a custom motivational text (e.g., “Empower your dreams!”) and save changes.

5. **Test the Chatbot**:
   - Visit the front end of your site where the shortcode or HTML was added.
   - Verify that:
     - The chatbot icon appears in the bottom-right corner.
     - Clicking the icon opens the chatbot window with the welcome message (updated for 10:09 AM SAST, May 27, 2025).
     - The motivational line appears at `bottom: 80px` and `left: -10px` and animates correctly.
     - The typing indicator doesn’t flash unexpectedly.
   - Use browser developer tools (F12) to check for errors in the console and inspect the `.motivational-line` positioning.

### Important Notes
- **No Need to Add JavaScript Directly**: The `joebot.php` file enqueues `joebot-scripts.js` using `wp_enqueue_script`, so you don’t need to add the JavaScript code directly to `joebot.php` or anywhere else.
- **File Placement**: Ensure `joebot-scripts.js` and `joebot-styles.css` are in the `wp-content/plugins/joebot/` directory alongside `joebot.php`. The `plugin_dir_url(__FILE__)` function in the enqueue script points to these files.
- **Elementor Compatibility**: The `[joebot]` shortcode or HTML widget works seamlessly with Elementor Free or Pro. The Shortcode widget is preferred for simplicity.
- **Image URL**: The `.chatbot-icon` in `joebot-styles.css` references an image (`https://edtreprenuer.com/wp-content/uploads/2025/05/Picture3.png`). If this image isn’t accessible on your new site, upload a new image to your WordPress media library and update the `background` property in `joebot-styles.css`:
  ```css
  .chatbot-icon {
      background: url('YOUR_NEW_IMAGE_URL') center/cover;
      /* ... other styles ... */
  }
  ```
- **Troubleshooting**:
  - If the chatbot doesn’t load, check that the plugin is activated and the shortcode `[joebot]` is added correctly.
  - Verify that `joebot-scripts.js` and `joebot-styles.css` are loading by viewing the page source (look for `<script>` and `<link>` tags).
  - If AJAX fails, ensure no security plugins (e.g., Wordfence) are blocking `admin-ajax.php`.

If you need help with specific steps (e.g., uploading files via FTP, adjusting the motivational line further, or troubleshooting Elementor issues), let me know!