/*
 * Profile Menu Control
 * Rendered by partials/controls/profile-menu.php
 */

/* ── Wrapper ──────────────────────────────────────────────────── */
.profile-menu-ctrl {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Site header flex layout ──────────────────────────────────── */
.site-header .site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}
.site-header .site-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.site-header .site-header-title h1 {
    margin: 0;
    /*font-size: calc(var(--user-font-size, 1rem) * 1.25);*/
    white-space: nowrap;
}
.site-header .site-header-title h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.6;
    white-space: nowrap;
}

/* ── Trigger button ───────────────────────────────────────────── */
.profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    width: 100%;
}
.profile-btn               { color: var(--chat-profile-btn-color); }
.profile-btn:hover,
.profile-btn:focus         { color: var(--chat-profile-btn-hover); }

.profile-btn > :first-child { flex: 1 1 auto; text-align: right; }

/* ── Account info ─────────────────────────────────────────────── */
.profile-account {
    display: flex;
    flex-direction: column;
}
.profile-username {
    font-weight: 600;
    font-size: calc(var(--user-font-size, 1rem) * 1.0);
}
.profile-status {
    text-transform: capitalize;
    filter: var(--chat-profile-status-filter);
}

/* ── Avatar ───────────────────────────────────────────────────── */
.profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border-width: 2px;
    border-style: solid;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* LFG active: teal pulse */
.profile-avatar.lfg-active {
    border-color: #2dd4bf;
    animation: pm-pulse-lfg 1.6s ease-out infinite;
}
@keyframes pm-pulse-lfg {
    0%   { box-shadow: 0 0 0px  0px rgba(45, 212, 191, 0.7); }
    70%  { box-shadow: 0 0 12px 10px rgba(45, 212, 191, 0.2); }
    100% { box-shadow: 0 0 0px  0px rgba(45, 212, 191, 0); }
}

/* Tasks active: amber pulse (higher priority — applied when tasks active regardless of LFG) */
.profile-avatar.tasks-active {
    border-color: #f59e0b;
    animation: pm-pulse-tasks 1.6s ease-out infinite;
}
@keyframes pm-pulse-tasks {
    0%   { box-shadow: 0 0 0px  0px rgba(245, 158, 11, 0.7); }
    70%  { box-shadow: 0 0 12px 10px rgba(245, 158, 11, 0.2); }
    100% { box-shadow: 0 0 0px  0px rgba(245, 158, 11, 0); }
}

/* ── Dropdown ─────────────────────────────────────────────────── */
.profile-menu-ctrl .profile-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    z-index: var(--chat-z-dropdown, 200);
    background: var(--chat-bg-secondary, #1e1e2e);
    border: 1px solid var(--chat-border-accent, #3a4354);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.3rem 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.profile-menu-ctrl .profile-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Menu items ───────────────────────────────────────────────── */
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-size: calc(var(--user-font-size, 1rem) * 0.9);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    color: var(--chat-text-primary, #e0e0e0);
    white-space: nowrap;
}
.profile-menu-item:hover,
.profile-menu-item:focus {
    background: var(--chat-menu-item-hover);
    outline: none;
}

.profile-menu-ctrl .divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--chat-menu-divider);
}