<style>
    /* General Reset */
    body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; }
    /* Chat Widget Styles */
    .chat-widget { position: fixed; bottom: 100px; right: 20px; z-index: 1000; }
    .chat-bubble { position: fixed; bottom: 20px; right: 20px; background-color: #007bff; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .chat-icon { color: #fff; font-size: 30px; }
    .chatbox { display: none; position: fixed; bottom: 100px; right: 20px; background: #fff; border: 1px solid #007bff; border-radius: 16px; padding: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); max-width: 320px; animation: fadeIn 0.5s ease-in-out; }
    .close-btn { background: none; border: none; color: #007bff; font-size: 20px; position: absolute; right: 10px; top: 10px; cursor: pointer; }
    .messages { max-height: 300px; overflow-y: auto; margin-bottom: 10px; }
    .message { margin: 10px 0; }
    .message.user { text-align: right; color: #007bff; }
    .message.coach { text-align: left; color: #333; }
    .user-input { display: flex; }
    .user-input input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 8px; }
    .user-input button { padding: 8px 12px; background-color: #c91459; border: none; border-radius: 8px; color: #fff; cursor: pointer; }
    .user-input button:hover { background-color: #a01247; }
</style>