.shoutbox { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
.shoutbox h1 { font-size: 24px; margin-bottom: 10px; }
.shoutbox-refresh { cursor: pointer; font-size: 18px; vertical-align: middle; }
.shoutbox-user-list h2, .shoutbox-conversation-list h2 { font-size: 18px; margin-bottom: 10px; }
.shoutbox-search-users, .shoutbox-search-conversations { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
.shoutbox-users, .shoutbox-conversations { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; }
.shoutbox-users li, .shoutbox-conversations li { padding: 10px; border-bottom: 1px solid #eee; }
.shoutbox-user, .shoutbox-sender { font-weight: bold; }
.shoutbox-preview { font-size: 12px; color: #666; margin: 5px 0; }
.shoutbox-time { font-size: 12px; color: #999; }
.shoutbox-start-chat { background: #0073aa; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.shoutbox-start-chat:hover { background: #005177; }
.shoutbox-content { list-style: none; padding: 0; max-height: 400px; overflow-y: auto; }
.shoutbox-content li { padding: 10px; border-bottom: 1px solid #eee; display: flex; flex-direction: column; align-items: flex-start; }
.shoutbox-message-own { align-items: flex-end; }
.shoutbox-username { font-weight: bold; }
.shoutbox-comment { margin: 5px 0; background: #f1f1f1; padding: 8px; border-radius: 10px; max-width: 80%; }
.shoutbox-message-own .shoutbox-comment { background: #d1ffd1; }
.shoutbox-comment-details { font-size: 12px; color: #666; }
.shoutbox-comment-reply { cursor: pointer; color: #0073aa; margin-right: 10px; }
.shoutbox-form h2 { cursor: pointer; font-size: 18px; margin-bottom: 10px; }
.shoutbox-form h2 span { float: right; }
.shoutbox-form form { display: none; }
.shoutbox-form label { display: block; margin-bottom: 5px; }
.shoutbox-form textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
.shoutbox-form input[type="submit"] { background: #0073aa; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.shoutbox-form input[type="submit"]:hover { background: #005177; }
/* Controls */
.shoutbox-controls { margin-bottom: 10px; }
.shoutbox-back, .shoutbox-delete-chat { background: #ccc; color: #000; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-right: 5px; }
.shoutbox-back:hover, .shoutbox-delete-chat:hover { background: #bbb; }
.shoutbox-notify-toggle { cursor: pointer; color: #0073aa; }
.shoutbox-unread { background: #f00; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 50%; margin-left: 5px; }

/* Mobile responsiveness */
@media (max-width: 600px) {
    .shoutbox { padding: 10px; }
    .shoutbox-content { max-height: 300px; }
}