/**
 * Chat Agent Header Status Indicator
 */

/* Status dot - positioned at bottom right of icon */
.chat-agent-status-dot {
    position: absolute;
    bottom: 8px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50% !important;
    transition: background-color 0.3s ease;
    z-index: 10;
}

/* Chat count badge - positioned at top right of icon */
#chat-agent-count {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 11;
}

/* Available status - green */
.chat-agent-status-dot[data-available="1"] {
    background-color: #28a745;
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.6);
}

/* Unavailable status - red */
.chat-agent-status-dot[data-available="0"] {
    background-color: #dc3545;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.6);
}

/* Pulse animation for chat queue count */
@keyframes chat-agent-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.chat-agent-pulse {
    animation: chat-agent-pulse 2s infinite;
}

/* Mobile: Adjust Chat Agent Icon Layout */
@media (max-width: 767px) {
    /* Prevent icon from breaking into new line */
    #header_chat_agent_bar a.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        white-space: nowrap !important;
    }

    /* Ensure icon and badges stay together */
    #chat-agent-icon {
        display: inline-block !important;
        position: relative !important;
    }

    /* Adjust badge positions for mobile */
    #chat-agent-count {
        position: absolute !important;
        top: 0 !important;
        right: -8px !important;
    }

    .chat-agent-status-dot {
        position: absolute !important;
        bottom: 0 !important;
        right: -5px !important;
    }
}