/* User menu dropdown - Shared Component */
.user-menu {
    position: relative;
    display: inline-block;
}

.user-menu-trigger {
    background: none;
    border: none;
    color: var(--fg);
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: all 0.1s ease;
    font-family: inherit;
}

.user-menu-trigger:hover {
    color: var(--accent);
    font-weight: 700;
    background-color: transparent;
}

.user-menu-trigger .chevron {
    transition: transform 0.2s ease;
}

.user-menu.open .user-menu-trigger .chevron {
    transform: rotate(180deg);
}

.user-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    z-index: 1000;
    margin-top: 0.5rem;
}

.user-menu.open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 0.9rem;
}

.user-menu-divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--line);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 16px;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.1s ease, color 0.1s ease;
    border-bottom: 1px solid var(--line);
}

/* When `.user-menu-item` is applied to a real <button> (e.g. the Clear-history
   or Settings entries inside the dropdown), the browser's native button
   styling (system grey background, beveled border, fixed width, centered
   text) leaks through and breaks the visual continuity with the <a> rows.
   Reset just enough so a <button> looks like the same flex row as the
   anchors. Kept here (next to the base rule) so any future button entry
   gets the same treatment without each caller having to remember it. */
button.user-menu-item {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

button.user-menu-item:last-child {
    border-bottom: none;
}

.user-menu-item:last-child {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

.user-menu-item:hover {
    background-color: rgba(100, 116, 139, 0.08);
    color: var(--fg);
    text-decoration: none;
}

/* Logout link styling */
.logout-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #d73a49 !important;
    font-weight: 500;
    transition: all 0.1s ease;
    /* Match padding with other user menu items */
    padding: 12px 16px;
}

.logout-link:hover {
    color: #c12e3a !important;
    background-color: rgba(215, 58, 73, 0.12);
    font-weight: 700;
}

@media (max-width: 768px) {
    /* Mobile adjustments for user menu */
    .user-menu-dropdown {
        left: 0;
        right: 0;
        min-width: auto;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .user-menu-trigger,
    .logout-link {
        justify-content: center;
        text-align: center;
    }
}