/* ===========================================
   Header account menu: avatar chip + popover
   (partials/_user_menu.html). Uses the global .popover open/close
   behaviour from ui.js; .toggle-switch is reused.
   =========================================== */

.user-menu-anchor { position: relative; }

/* `.top-nav .user-menu button` (layout.css) styles every header button with
   a border and padding — the chip and menu items opt out explicitly. */
.top-nav .user-menu .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 3px 10px 3px 3px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.top-nav .user-menu .user-chip:hover { background: var(--surface); }
.user-chip-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-chev { width: 14px; height: 14px; fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--c-text-on-dark);
    background: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-secondary-bold) 100%);
}
.user-avatar.lg { width: 40px; height: 40px; font-size: 1rem; }
/* Profile picture over the letter initial; a failed load removes the img. */
.user-avatar { position: relative; overflow: hidden; }
.user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.user-popover {
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: var(--r-lg);
    background: var(--raised);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
    z-index: 1100;
}
.user-popover.open { opacity: 1; visibility: visible; transform: none; }

.user-popover-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.75rem;
}
.user-popover-name { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.user-popover-sub { font-size: 0.78rem; color: var(--text-muted); }

.user-popover-linked {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.25rem;
}
.user-popover-loading { font-size: 0.8rem; color: var(--text-muted); }
.user-popover-identity { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-primary); min-width: 0; }
/* Identity picture: profile photo over the platform logo (fallback), with a
   small brand badge in the corner. */
.ident-pic { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.ident-pic img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ident-fallback { position: absolute; inset: 3px; width: 22px; height: 22px; }
.ident-badge { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--raised); box-shadow: 0 0 0 2px var(--raised); }
.ident-pic:not(:has(img)) .ident-badge { display: none; }
.user-popover-ident-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-muted-inline { color: var(--text-muted); }
.user-popover-empty { font-size: 0.82rem; }

.user-popover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    cursor: default;
}
label.user-popover-row { cursor: pointer; }
.user-popover-label { display: inline-flex; align-items: center; gap: 0.6rem; }

.top-nav .user-menu .user-popover-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.5rem;
    border: none;
    border-radius: var(--r-md);
    background: none;
    color: var(--text-primary);
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.top-nav .user-menu .user-popover-item:hover { background: var(--surface-alt); }
.top-nav .user-menu .user-popover-item.danger { color: var(--c-danger); }

.user-popover-label svg,
.user-popover-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Logged-out theme button: SVG sun/moon. */
.theme-toggle svg { width: 16px; height: 16px; }

/* Phones: avatar only. */
@media (max-width: 600px) {
    .top-nav .user-menu .user-chip { padding: 2px; border-color: transparent; }
    .user-chip-name, .user-chip-chev { display: none; }
    .user-avatar { width: 32px; height: 32px; font-size: 0.85rem; }
    .user-popover { position: fixed; top: 3.4rem; right: 0.5rem; max-height: calc(100dvh - 4rem); }
    .user-popover-head { padding-bottom: 0.5rem; }
    .user-popover-row, .top-nav .user-menu .user-popover-item { padding-block: 0.45rem; }
}

/* ===========================================
   Header language pill + popover (partials/_language_picker.html)
   =========================================== */

.top-nav .user-menu .lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.top-nav .user-menu .lang-pill:hover { background: var(--surface); color: var(--text-primary); }
.lang-pill svg { width: 16px; height: 16px; }

/* The popover is a <form>: undo the header's `.user-menu form` row layout. */
.top-nav .user-menu .lang-popover { width: 300px; display: flex; flex-direction: column; align-items: stretch; gap: 1px; }

.top-nav .user-menu .lang-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--r-md);
    background: none;
    color: var(--text-primary);
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}
.top-nav .user-menu .lang-item:hover { background: var(--surface-alt); }
.top-nav .user-menu .lang-item span { white-space: nowrap; }
.top-nav .user-menu .lang-item .lang-native { flex: 1; color: var(--text-primary); font-size: 0.88rem; }
.top-nav .user-menu .lang-item .lang-en { color: var(--text-muted); font-size: 0.78rem; }
.lang-item .lang-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-primary); visibility: hidden; }
.lang-item.current .lang-check { visibility: visible; }
.lang-item.current .lang-native { font-weight: 600; }
.top-nav .user-menu .lang-item.auto { border-bottom: 1px solid var(--border-light); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 2px; }

@media (max-width: 600px) {
    .top-nav .user-menu .lang-pill { padding: 5px 8px; }
}