/* ====================================
   SPECIAL MESSAGE STYLES
   $ = Important (green, large font)
   ! = Alert (red background)
==================================== */

/* Important Messages ($ prefix) */
.message-important {
    border: 3px solid #00ff00 !important;
    border-radius: 8px;
    padding: 15px !important;
    background: rgba(0, 255, 0, 0.05) !important;
    animation: pulse-green 2s infinite;
}

.message-important .message-text {
    font-size: 3em !important;
    color: #00ff00 !important;
    font-weight: bold;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.message-important .message-username {
    color: #00ff00 !important;
    font-size: 1.2em;
}

.message-important .message-time {
    color: #00ff00 !important;
}

/* Pulse animation for important messages */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    }
}

/* Alert Messages (! prefix) */
.message-alert {
    background: #ff0000 !important;
    border-radius: 8px;
    padding: 12px !important;
    border: 2px solid #ff3333 !important;
}

.message-alert .message-text {
    color: #ffffff !important;
    font-weight: bold;
}

.message-alert .message-username {
    color: #ffcccc !important;
}

.message-alert .message-time {
    color: #ffcccc !important;
}

.message-alert .message-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
    margin-bottom: 8px;
}

/* Ensure buttons are visible on special messages */
.message-important .message-actions-top button,
.message-alert .message-actions-top button {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.message-important .message-actions-top button:hover,
.message-alert .message-actions-top button:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}