/* ============================================
   LiveChat Online Status Indicator
   ============================================ */

/* Online status di header livechat (user-facing) */
.bc-chat .bc-header-agent .bc-status,
.bc-chat .bc-profile .bc-status {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

/* Green dot indicator untuk status Online */
.bc-chat .bc-header-agent .bc-status.bc-status-online::before,
.bc-chat .bc-profile .bc-status.bc-status-online::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse-online 2s ease-in-out infinite;
}

/* Grey dot untuk status Away/Offline */
.bc-chat .bc-header-agent .bc-status:not(.bc-status-online)::before,
.bc-chat .bc-profile .bc-status:not(.bc-status-online)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #9CA3AF;
    border-radius: 50%;
    opacity: 0.6;
}

/* Yellow dot untuk status Typing */
.bc-chat .bc-header-agent .bc-status.bc-status-typing::before,
.bc-chat .bc-profile .bc-status.bc-status-typing::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #F59E0B;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    animation: pulse-typing 1s ease-in-out infinite;
}

/* Pulsing animation untuk Online */
@keyframes pulse-online {
    0%, 100% {
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        transform: translateY(-50%) scale(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.8);
        transform: translateY(-50%) scale(1.1);
    }
}

/* Pulsing animation untuk Typing */
@keyframes pulse-typing {
    0%, 100% {
        box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.8);
        opacity: 0.8;
    }
}

/* Status text styling */
.bc-chat .bc-header-agent .bc-status.bc-status-online {
    color: #10B981;
    font-weight: 600;
}

.bc-chat .bc-header-agent .bc-status:not(.bc-status-online) {
    color: #9CA3AF;
    font-weight: 500;
}

.bc-chat .bc-header-agent .bc-status.bc-status-typing {
    color: #F59E0B;
    font-weight: 600;
}

/* Responsive - smaller dot on mobile */
@media (max-width: 768px) {
    .bc-chat .bc-header-agent .bc-status::before,
    .bc-chat .bc-profile .bc-status::before {
        width: 8px;
        height: 8px;
    }
    
    .bc-chat .bc-header-agent .bc-status,
    .bc-chat .bc-profile .bc-status {
        padding-left: 15px;
        font-size: 12px;
    }
}

/* Embed mode specific */
.bc-embed-mode .bc-header-agent .bc-status::before {
    left: 0;
}

/* Fix untuk profile layout */
.bc-chat .bc-header-agent .bc-profile > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bc-chat .bc-header-agent .bc-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
    display: block;
}