/* user-notes.css - Updated Version 1.0.1 */

.user-note-box {
    margin: 20px 0;
    position: relative;
}

.user-note-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.user-note-textarea:focus {
    outline: none;
    border-color: #0073aa;
}

.user-note-textarea:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.user-note-status {
    margin-top: 8px;
    font-size: 12px;
    min-height: 18px;
}

.user-note-saving {
    color: #0073aa;
}

.user-note-saved {
    color: #46b450;
}

.user-note-error {
    color: #dc3232;
}

.user-note-logged-out {
    opacity: 0.7;
}

/* Login message box - appears once at top */
.user-note-login-message-box {
    margin: 20px 0 30px 0;
}

.user-note-login-message-box .user-note-login-message {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 15px 20px;
    border-radius: 4px;
    margin: 0;
    font-size: 16px;
}

.user-note-login-message-box a {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
}

.user-note-login-message-box a:hover {
    text-decoration: underline;
}
```

## To Implement:

**Yes, changes are live immediately!** Just:

1. **Edit `user-notes-manager.php`** - Replace the entire contents with the artifact above
2. **Edit `assets/user-notes.css`** - Replace with the CSS code above
3. **Refresh your page** - Changes will be live instantly

No need to deactivate/reactivate the plugin!

## How to Use on Your Pages:
```
[user_note_login_message]

1. What quietly brought me here today?
[user_note id="intro-q1" placeholder="Save your thoughts here..."]

2. When do I feel most like myself?
[user_note id="intro-q2" placeholder="Save your thoughts here..."]