/* User Messages Section */
.user-messages {
    margin-top: 20px;
    background-color: #ffe4e1; /* Light pink background */
    padding: 15px;
    border-radius: 20px;
    color: #5a0033;
    text-align: center;
    box-shadow: 0 4px 6px rgba(255, 105, 180, 0.3);
}

.user-messages h3 {
    color: #ff69b4;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-messages .section-icon {
    width: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

.user-messages form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-messages .form-group {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

.user-messages label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #5a0033;
}

.user-messages input,
.user-messages textarea {
    width: 100%;
    padding: 8px;
    border: 2px solid #ff69b4;
    border-radius: 10px;
    background-color: #fff0f8;
    font-family: 'Patrick Hand', cursive;
    font-size: 1em;
    color: #5a0033;
}

.user-messages input:focus,
.user-messages textarea:focus {
    outline: none;
    border-color: #ff1493;
}

.submit-message-button {
    padding: 10px 20px;
    background-color: #ff69b4;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.submit-message-button:hover {
    background-color: #ff1493;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(255, 105, 180, 0.4);
}

.submit-message-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.messages-display {
    margin-top: 20px;
    text-align: left;
}

.messages-display h4 {
    color: #ff69b4;
    margin-bottom: 10px;
}

.message-item {
    background-color: #fff0f8;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(255, 105, 180, 0.2);
}

.message-item .message-name {
    font-weight: bold;
    color: #5a0033;
}

.message-item .message-text {
    margin-top: 5px;
    color: #333;
}

.message-item .message-time {
    font-size: 0.8em;
    color: #777;
    text-align: right;
}

/* Character Count Styling */
.char-count {
    font-size: 0.9em;
    color: #5a0033; /* Default color */
    margin-top: 5px;
    text-align: right;
}

/* When remaining characters are low */
.char-count.warning {
    color: #FFA500; /* Orange */
}

.char-count.danger {
    color: #FF0000; /* Red */
}