.user-status {
    position: absolute;
    border-radius: 50%;
    z-index: 10;
    /* border и позиционирование будут заданы для конкретных размеров */
}

.user-status.online {
    background-color: #22c55e;
}

.user-status.offline {
    background-color: #9ca3af;
}

/* Размеры индикатора */
.user-status.sm {
    width: 14px; 
    height: 14px;
    bottom: 0px; /* Смещение вниз для частичного наложения */
    right: 0px; /* Смещение вправо для частичного наложения */
}

.user-status.md {
    width: 55px; /* Увеличен до 60px */
    height: 55px; /* Увеличен до 60px */
    border: 9px solid white; /* Обводка 9px */
    bottom: -10px; /* Корректировка позиционирования для 60px и 9px обводки */
    right: -10px; /* Корректировка позиционирования для 60px и 9px обводки */
}

.user-status.lg {
    width: 32px;
    height: 32px;
    border: 3px solid white;
    bottom: -5px; 
    right: -5px; 
}

/* Адаптивные стили для индикатора статуса */
@media (max-width: 768px) {
    .user-status.md {
        width: 34px;
        height: 34px;
        border: 4px solid white;
        bottom: -4px;
        right: -4px;
    }
}

@media (max-width: 480px) {
    .user-status.md {
        width: 24px;
        height: 24px;
        border: 3px solid white;
        bottom: -3px;
        right: -3px;
    }
}