/* ===========================================================================
   Profile menu — dropdown under the navbar user chip.
   =========================================================================== */

.up { position: relative; }

/* the chip is a button now: strip the default button look */
button.up-trigger {
    border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer;
    padding: 4px 8px; border-radius: 12px; color: inherit;
}
button.up-trigger:hover { background: #f5f6f8; }
button.up-trigger[aria-expanded="true"] { background: #f5f6f8; }

/* The navbar is its own (sticky, z-index:10) stacking layer; lift it above the page while open. */
.app-navbar:has(.up-menu) { z-index: 3000; }

.up-backdrop { position: fixed; inset: 0; z-index: 3000; background: transparent; }

.up-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 3001;
    width: 230px; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 32px rgba(20, 20, 40, .22), 0 0 0 1px rgba(20, 20, 40, .04);
    animation: up-pop .14s ease-out;
}
/* little notch pointing at the chip */
.up-menu::before {
    content: ""; position: absolute; top: -6px; right: 28px; width: 12px; height: 12px;
    background: #eef0f3; transform: rotate(45deg); border-radius: 2px 0 0 0;
}
@keyframes up-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.up-menu__role {
    position: relative;
    padding: 8px 16px; background: #eef0f3; border-radius: 12px 12px 0 0;
    font-size: .88rem; font-weight: 600; color: #8a8f99;
}

.up-menu__item {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    border: 0; background: none; cursor: pointer; text-decoration: none;
    padding: 13px 16px; font-family: inherit; font-size: 1.02rem; color: #2b2f36;
}
.up-menu__item + .up-menu__item { border-top: 1px solid #eef0f3; }
.up-menu__item:hover { background: #faf3f5; color: var(--primary-color); }
.up-menu__item:last-child { border-radius: 0 0 12px 12px; }

@media (max-width: 520px) { .up-menu { width: 210px; } }