.profile-popup {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1e2433;
border-top: 1px solid rgba(74, 158, 255, 0.1);
border-radius: 20px 20px 0 0;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
max-height: 80vh;
overflow-y: auto;
}

.profile-popup.open {
transform: translateY(0);
opacity: 1;
}

.profile-popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(4px);
}

.profile-popup-overlay.show {
opacity: 1;
visibility: visible;
}

.profile-popup-content {
padding: 0;
}

.profile-popup-header {
padding: 20px 20px 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
}

.profile-popup-user-info {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}

.profile-popup-avatar {
flex-shrink: 0;
}

.profile-popup-user-details {
flex: 1;
min-width: 0;
}

.profile-popup-username {
font-size: 18px;
font-weight: 600;
color: white;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.profile-popup-email {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.profile-popup-close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
}

.profile-popup-close:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}

.profile-popup-menu {
padding: 16px 20px 20px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}

.profile-popup-item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
font-weight: 500;
background: none;
border: none;
width: 100%;
text-align: left;
}

.profile-popup-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateX(4px);
}

.profile-popup-item:active {
transform: scale(0.98);
}

.profile-popup-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

.profile-popup-logout {
color: #ef4444;
}

.profile-popup-logout:hover {
background: rgba(239, 68, 68, 0.1);
color: #fca5a5;
}

.profile-popup-divider {
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin: 8px 0;
}

@media (min-width: 768px) {
.profile-popup {
left: 50%;
right: auto;
width: 400px;
transform: translateX(-50%) translateY(100%);
border-radius: 16px 16px 0 0;
}

.profile-popup.open {
transform: translateX(-50%) translateY(0);
}

.profile-popup-header {
padding: 24px 24px 20px 24px;
}

.profile-popup-menu {
padding: 20px 24px 24px 24px;
}

.profile-popup-item {
padding: 18px;
font-size: 15px;
}
}