/* Subtle hover effect on group items */
.group-item:hover {
    background: #eef1f3;
}

/* Style message bubbles differently for future improvements:
   You could identify user's own messages in JS and add a class "my-message" to style them differently */
.my-message {
    margin-left: auto;
    background: #d1ecf1;
    border: 1px solid #bee5eb;
}
/* Make the avatar and message bubble feel more unified */
.d-flex.justify-content-start .rounded-circle {
    align-self: flex-end;
}
.d-flex.justify-content-end .rounded-circle {
    align-self: flex-end;
}

/* Possibly differentiate own messages more clearly */
.my-message {
    background: #EDE3AD !important;
    border: 1px solid #EDE3AD !important;
}
.chat-message-bubble {
    min-width: 150px;
    max-width: 70%;
    overflow-wrap: break-word;
}

.filters {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.filters input[type="text"],
.filters select {
    padding: 5px;
    font-size: 14px;
    max-width: 200px;
}

.filters button {
    padding: 5px 10px;
    font-size: 14px;
}

.group-users {
    margin-top: 20px;
    border-collapse: collapse;
    width: 100%;
}

.group-users th, .group-users td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ccc;
}

.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination a {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid #ddd;
    text-decoration: none;
    background: #f9f9f9;
    color: #333;
}

.pagination a:hover {
    background: #007cba;
    color: #fff;
    border-color: #007cba;
}

.delete-message {
    color: #ffffff; 
    font-size: 0.8rem;
    background-color: #ff0000 !important;
    margin-top: 2px;
    align-self: center;  
    transition: opacity 0.2s ease-in-out;
    opacity: 0.7;
    padding: 4px !important;
}

.delete-message:hover {
    opacity: 1;
}