/* =========================
   PROFILE
========================= */

.profile-dropdown {
    position: relative;
    display: inline-block;
    z-index: 9999;
}


/* =========================
   PROFILE BUTTON
========================= */

.profile-btn {

    display: flex;
    align-items: center;
    gap: var(--space-sm);

    padding: var(--padding-xs);

    border: none;
    border-radius: var(--radius-xs);

    cursor: pointer;

    background: var(--gradient-dark);
    color: var(--text-primary);

    font-weight: bold;

    transition: var(--transition-default);
}


/* =========================
   PROFILE IMAGE / FALLBACK
========================= */

.profile-img,
.profile-fallback {

    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.profile-img {

    object-fit: cover;

    border:
    var(--space-two)
    solid
    var(--border-primary);
}


.profile-fallback {

    background: var(--gradient-accent);

    font-size: 15px;
    font-weight: bold;

    color: var(--text-primary);

    border:
    var(--space-two)
    solid
    var(--border-primary);
}


/* =========================
   NAME
========================= */

.profile-name {

    font-size: var(--text-fs-sm);

    white-space: nowrap;

    color: var(--text-primary);
}


/* =========================
   DROPDOWN MENU
========================= */

.dropdown-menu {

    position: absolute;

    top: 115%;
    right: 0;

    width: 240px;

    background: var(--bg-secondary);

    backdrop-filter: var(--blur-glass);

    border-radius: var(--radius-sm);

    padding: var(--padding-xs);

    overflow: hidden;


    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);


    transition: var(--transition-default);


    box-shadow: var(--glow-secondary);

    border:
    1px solid
    var(--border-subtle);


    z-index: 9999;
}


.dropdown-menu.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================
   HEADER
========================= */

.dropdown-header {

    padding: var(--padding-sm);

    font-size: var(--text-fs-sm);

    color: var(--text-muted);

    background: var(--bg-glass);
}


/* =========================
   DIVIDER
========================= */

.dropdown-divider {

    height: 1px;
    margin-top: var(--space-xs);
    background: var(--border-subtle);
}


/* =========================
   GUEST MENU
========================= */

#guestMenu {

    position: absolute;

    top: 115%;
    right: 0;

    width: 220px;


    background: var(--bg-secondary);

    backdrop-filter: var(--blur-glass);


    border-radius: var(--radius-lg);


    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);


    transition: var(--transition-default);


    z-index: 999;
}


#guestMenu.active {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}