/* Базовые стили для круглой аватарки */
.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	background-image: url('../../images/avatar.jpg'); /*при начальной загрузке до входа в профиль*/
    flex-shrink: 0; /* Чтобы аватарка не сжималась в узких блоках */
	cursor: pointer;
}
/* Стили конкретно для серой заглушки с буквой */
.avatar-placeholder {
    background-color: #e2e8f0; /* Мягкий серый цвет (как в современных UI) */
    border: 2px solid #cbd5e1; /* Небольшая рамка для объема */
}
/* Стили для самой буквы */
.avatar-letter {
    color: #475569; /* Темно-серый цвет для хорошей читаемости */
    font-size: 18px;
    font-weight: 600; /* Полужирный шрифт */
    font-family: sans-serif;
    user-select: none; /* Запрещаем выделение буквы мышкой */
}
.user-menu {
	display: none;
}
.header-profile-block {
	display: inline-block;
	vertical-align: middle;
	margin-left: 3%;
    position: relative;  /* Опорная точка для абсолютного меню */
	text-align: right;	
}
.header-profile-block hr {
    width: 100%;                  /* Линия заполнит всю ширину родительского текста */
    margin: 2px 0;               /* Вертикальные отступы для красоты */
}

/* Выпадающее меню */
.dropdown-content {
  position: absolute;  /* Исключает меню из расчета высоты родителя */
  top: 120%;           /* Прижимает меню строго к нижнему краю иконки */
  right: 0;             /* Выравнивает по левому краю иконки */
  z-index: 10;         /* Отображает меню поверх других элементов */
  
  /* Стили внешнего вида меню (пример) */
  width: max-content; /* размер по тексту */
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background-color: rgba(165, 185, 210, 0.65); /* цвет как у меню */
  padding: 5px;
}