/* ===================================
   ONLINE STATUS INDICATOR STYLES
   =================================== */

.user-online-status-wrapper {
    margin-top: 8px;
    margin-bottom: 5px;
}

.user-online-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #888;
}

.user-online-status .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

/* Online - Green pulsing dot */
.user-online-status.online .status-dot {
    background-color: #4caf50;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    animation: online-pulse 2s infinite;
}

@keyframes online-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

.user-online-status.online .status-text {
    color: #4caf50;
    font-weight: 500;
}

/* Offline - Gray dot */
.user-online-status.offline .status-dot {
    background-color: #9e9e9e;
}

.user-online-status.offline .status-text {
    color: #888;
}

/* Messages/Chat specific styles */
.chat-user-list .user-online-status {
    font-size: 11px;
    margin-top: 3px;
}

.chat-user-list .user-online-status .status-dot {
    width: 8px;
    height: 8px;
}

/* Avatar badge for online status (optional, for small indicators on avatars) */
.avatar-online-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4caf50;
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    animation: online-pulse 2s infinite;
}

.avatar-container {
    position: relative;
}

/* Aggiornamento dinamico tempi */
.user-online-status[data-timestamp],
.user-status-text[data-timestamp] {
    transition: opacity 0.3s ease;
}