/**
 * Message Fix CSS
 * Provides enhanced styling for Django message alerts and notification badges
 * Fixes overlay issues and ensures proper positioning
 */

/* Message container styling */
.messages-container {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important; /* Even higher than everything else */
    pointer-events: none !important; /* Allow clicking through the container */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-height: calc(100vh - 160px) !important; /* Prevent taking up too much screen */
    overflow-y: auto !important;
}

/* Individual message styling */
.message {
    background-color: white !important;
    color: #333 !important;
    width: 80% !important;
    max-width: 600px !important;
    margin-bottom: 10px !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    pointer-events: auto !important; /* Make the message itself clickable */
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    animation: message-slide-down 0.5s forwards, message-fade-out 0.5s 7s forwards !important;
}

/* Close button for messages */
.message .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message .close-button:hover {
    color: #333;
}

/* Message type styling */
.message-success {
    border-left: 5px solid #4CAF50;
}

.message-error {
    border-left: 5px solid #F44336;
}

.message-warning {
    border-left: 5px solid #FF9800;
}

.message-info {
    border-left: 5px solid #2196F3;
}

/* Message icon styling */
.message-icon {
    margin-right: 15px;
    font-size: 20px;
}

.message-success .message-icon {
    color: #4CAF50;
}

.message-error .message-icon {
    color: #F44336;
}

.message-warning .message-icon {
    color: #FF9800;
}

.message-info .message-icon {
    color: #2196F3;
}

/* Enhanced notification badge styling - generic class */
.notification-badge {
    width: 20px !important;
    height: 20px !important;
    background-color: #FF5400 !important; /* Orange brand color */
    color: white !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    visibility: visible !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    border: 2px solid #fff !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    z-index: 9999 !important;
}

/* Fixed header notification badge */
#fixed-notification-badge {
    position: fixed !important;
    top: 12px !important; 
    right: 85px !important;
    width: 22px !important;
    height: 22px !important;
}

/* User profile notification badge */
.user-notification-badge {
    position: absolute !important;
    top: 0 !important;
    right: 12px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Conversation list notification badge - improved positioning */
.conversation-meta .notification-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    margin-right: 5px !important;
    width: 18px !important;
    height: 18px !important;
    margin-left: auto !important; /* Push to the right side */ 
    margin-top: 2px !important; /* Better vertical alignment */
    margin-bottom: 2px !important;
}

/* Notification circle in header */
.notification-counter {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background-color: #FF5400 !important; /* Orange brand color */
    color: white !important;
    font-size: 11px !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    z-index: 9999 !important;
}

/* Standalone notification badge (added with JS) */
.standalone-notification-badge {
    position: fixed !important;
    top: 15px !important;
    right: 120px !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #FF5400 !important; /* Brand orange */
    border-radius: 50% !important;
    border: 3px solid white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 10000 !important; /* Extremely high z-index */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Wrapper badge for the notification wrapper */
.notification-wrapper-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #FF5400 !important; /* Brand orange */
    border-radius: 50% !important;
    border: 2px solid white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 10000 !important;
}

/* Ensure notification wrapper has relative positioning */
.notification-wrapper {
    position: relative !important;
}

/* Animations */
@keyframes message-slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message-fade-out {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}