/* ================================================================
   Karak Social Login — User Avatar Menu  v1.3.0
   ================================================================
   Structure:
     1. CSS custom properties (all colour/size tokens)
     2. BASE — shared styles for BOTH floating and inline modes
     3. FLOATING mode  (.lsl-avatar-menu:not(.lsl-pos-inline))
     4. INLINE / SHORTCODE mode  (.lsl-pos-inline)
     5. Dropdown panel — shared
     6. Panel edge-detection: .lsl-drop-left variant (set by JS)
     7. Dropdown internals (header, links, logout)
     8. Guest pill
     9. Responsive
   ================================================================ */


/* ── 1. CSS custom properties ────────────────────────────────── */
.lsl-avatar-menu {
    --lsl-menu-z:          99999;
    --lsl-bubble-size:     40px;
    --lsl-bubble-radius:   50%;
    --lsl-bubble-bg:       #0a66c2;
    --lsl-bubble-color:    #fff;
    --lsl-bubble-shadow:   none;
    --lsl-bubble-shadow-h: none;

    --lsl-panel-bg:        #ffffff;
    --lsl-panel-radius:    14px;
    --lsl-panel-shadow:    0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    --lsl-panel-width:     260px;
    --lsl-panel-gap:       8px;

    --lsl-header-bg:       #f7f9fc;
    --lsl-link-hover:      #f0f4ff;
    --lsl-link-hover-text: #0a66c2;
    --lsl-link-color:      #1d2433;
    --lsl-link-icon-color: #0a66c2;
    --lsl-logout-color:    #c0392b;
    --lsl-logout-hover:    #fff5f5;
    --lsl-badge-bg:        #e8f0fe;
    --lsl-badge-color:     #1a56db;
    --lsl-online-color:    #22c55e;
    --lsl-divider:         #eef0f4;
    --lsl-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    /* Avatar border — overridable via colour settings */
    --lsl-bubble-border:   rgba(0,0,0,0.12);
    --lsl-bubble-border-h: rgba(0,0,0,0.28);
}


/* ── 2. BASE — applies to every avatar menu regardless of mode ── */
.lsl-avatar-menu {
    /* Do NOT set position here — each mode sets its own */
    z-index: var(--lsl-menu-z);
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    /* Isolation creates a new stacking context so the dropdown can
       escape overflow:hidden on theme headers */
    isolation: isolate;
}


/* ── 3. FLOATING mode ────────────────────────────────────────── */
.lsl-avatar-menu:not(.lsl-pos-inline) {
    position: fixed !important;
}
.lsl-pos-top-right    { top: 18px !important; right: 18px !important; }
.lsl-pos-top-left     { top: 18px !important; left:  18px !important; }
.lsl-pos-bottom-right { bottom: 18px !important; right: 18px !important; }
.lsl-pos-bottom-left  { bottom: 18px !important; left:  18px !important; }

/* Floating panel positions */
.lsl-pos-top-right .lsl-dropdown,
.lsl-pos-bottom-right .lsl-dropdown { right: 0 !important; left: auto !important; }
.lsl-pos-top-left .lsl-dropdown,
.lsl-pos-bottom-left .lsl-dropdown  { left:  0 !important; right: auto !important; }

.lsl-pos-top-right .lsl-dropdown,
.lsl-pos-top-left .lsl-dropdown     { top: calc(var(--lsl-bubble-size) + var(--lsl-panel-gap)) !important; bottom: auto !important; }
.lsl-pos-bottom-right .lsl-dropdown,
.lsl-pos-bottom-left .lsl-dropdown  { bottom: calc(var(--lsl-bubble-size) + var(--lsl-panel-gap)) !important; top: auto !important; }

.lsl-pos-top-right .lsl-dropdown,
.lsl-pos-bottom-right .lsl-dropdown { transform-origin: top right !important; }
.lsl-pos-top-left .lsl-dropdown,
.lsl-pos-bottom-left .lsl-dropdown  { transform-origin: top left !important; }
.lsl-pos-bottom-right .lsl-dropdown { transform-origin: bottom right !important; }
.lsl-pos-bottom-left .lsl-dropdown  { transform-origin: bottom left !important; }


/* ── 4. INLINE / SHORTCODE mode ─────────────────────────────── */

/*
 * .lsl-pos-inline is set on the wrapper in both shortcode and
 * inline-selector placements. The wrapper sits naturally inside
 * whatever element the theme puts it in (header, nav bar, etc.).
 *
 * Key rules:
 *   • position: relative  — so the dropdown can absolute-position
 *                           relative to the bubble, not the viewport
 *   • NO fixed / absolute on the wrapper itself
 *   • overflow: visible   — overrides any theme overflow:hidden
 *                           on parent elements (done via JS as well)
 */
.lsl-avatar-menu.lsl-pos-inline {
    position: relative !important;
    /* Override the :not(.lsl-pos-inline) rule above just in case */
    top:    auto !important;
    right:  auto !important;
    bottom: auto !important;
    left:   auto !important;
    /* Vertical alignment inside flex/inline-flex header rows */
    vertical-align: middle !important;
    align-self: center !important;
    /* Shrink bubble slightly for header use */
    --lsl-bubble-size: 36px;
    --lsl-bubble-shadow: none;
}

/* Inline dropdown: always opens downward, aligns RIGHT edge of bubble
   by default; JS adds .lsl-drop-left when near the right viewport edge */
.lsl-pos-inline .lsl-dropdown {
    top:    calc(var(--lsl-bubble-size) + var(--lsl-panel-gap)) !important;
    bottom: auto !important;
    right:  0 !important;
    left:   auto !important;
    transform-origin: top right !important;
}

/* Edge-detection: flip to open left-aligned when JS detects overflow */
.lsl-pos-inline.lsl-drop-left .lsl-dropdown {
    right: auto !important;
    left:  0 !important;
    transform-origin: top left !important;
}

/* No scale transform on the wrapper in inline mode — let the header
   define the scale context */
.lsl-avatar-menu.lsl-pos-inline .lsl-avatar-trigger:hover,
.lsl-avatar-menu.lsl-pos-inline .lsl-avatar-trigger:focus-visible {
    transform: none !important;
}


/* ── 5. Avatar trigger button (shared) ───────────────────────── */
.lsl-avatar-menu .lsl-avatar-trigger {
    position: relative !important;
    display:  flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:  var(--lsl-bubble-size) !important;
    height: var(--lsl-bubble-size) !important;
    border-radius: var(--lsl-bubble-radius) !important;
    /* Transparent background — photo fills the circle; fallback SVG uses it */
    background:    transparent !important;
    color:         var(--lsl-bubble-color) !important;
    /* Light border around the avatar photo */
    border: 2px solid var(--lsl-bubble-border, rgba(0,0,0,0.12)) !important;
    padding: 0 !important;
    margin:  0 !important;
    cursor:  pointer !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, opacity 0.15s ease !important;
    outline: none !important;
    overflow: hidden !important;
    text-decoration: none !important;
    font-family: var(--lsl-font) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}
/* Hover: subtle opacity change only — no shadow, no scale */
/* No hover effect on avatar trigger */
.lsl-avatar-menu .lsl-avatar-trigger:hover {
    border-color: var(--lsl-bubble-border, rgba(0,0,0,0.12)) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}
.lsl-avatar-menu .lsl-avatar-trigger:focus-visible {
    outline: 2px solid var(--lsl-bubble-bg) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}


/* ── Avatar image ── */
.lsl-avatar-menu .lsl-avatar-img {
    width:  var(--lsl-bubble-size) !important;
    height: var(--lsl-bubble-size) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ── SVG person-icon fallback (shown when no photo is available) ── */
.lsl-avatar-menu .lsl-avatar-svg-fallback {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:  var(--lsl-bubble-size) !important;
    height: var(--lsl-bubble-size) !important;
    background: var(--lsl-bubble-bg) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    user-select: none !important;
}
.lsl-avatar-menu .lsl-avatar-svg-fallback .lsl-avatar-svg {
    width:  60% !important;
    height: 60% !important;
    display: block !important;
    stroke: var(--lsl-bubble-color) !important;
}

/* ── Initials (used in dropdown header only, not the trigger) ── */
.lsl-avatar-menu .lsl-avatar-initials {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:  44px !important;
    height: 44px !important;
    font-size:   17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color:        var(--lsl-bubble-color) !important;
    background:   var(--lsl-bubble-bg) !important;
    border-radius: 50% !important;
    font-family: var(--lsl-font) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    user-select: none !important;
    flex-shrink: 0 !important;
}
.lsl-avatar-menu .lsl-avatar-initials--lg {
    width:     44px !important;
    height:    44px !important;
    font-size: 17px !important;
}

/* Online dot hidden by default — can be re-enabled per-deployment via CSS var */
.lsl-avatar-menu .lsl-avatar-online {
    display: none !important;
}


/* ── 6. Dropdown panel (shared, absolute to trigger wrapper) ─── */
.lsl-avatar-menu .lsl-dropdown {
    position:   absolute !important;
    width:      var(--lsl-panel-width) !important;
    background: var(--lsl-panel-bg) !important;
    border-radius: var(--lsl-panel-radius) !important;
    box-shadow:    var(--lsl-panel-shadow) !important;
    overflow: hidden !important;
    /* CRITICAL: z-index must be higher than sticky header z-index
       (typically 100–1000). We use the CSS var which defaults to 99999. */
    z-index: var(--lsl-menu-z) !important;
    /* Hidden by default */
    opacity:        0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.94) translateY(-4px) !important;
    transition:
        opacity    0.18s ease,
        visibility 0.18s ease,
        transform  0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Open state */
.lsl-avatar-menu.lsl-open .lsl-dropdown {
    opacity:        1 !important;
    visibility:     visible !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}


/* ── 7. Dropdown internals ───────────────────────────────────── */

/* Profile header */
.lsl-avatar-menu .lsl-dropdown-header {
    display:     flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background:   var(--lsl-header-bg) !important;
    border-bottom: 1px solid var(--lsl-divider) !important;
}
.lsl-avatar-menu .lsl-dh-avatar {
    flex-shrink: 0 !important;
    width:  44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    background: var(--lsl-bubble-bg) !important;
}
.lsl-avatar-menu .lsl-dh-avatar img {
    width:  44px !important;
    height: 44px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
.lsl-avatar-menu .lsl-dh-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
.lsl-avatar-menu .lsl-dh-name {
    font-family: var(--lsl-font) !important;
    font-size:   14px !important;
    font-weight: 600 !important;
    color: #1d2433 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.lsl-avatar-menu .lsl-dh-email {
    font-family: var(--lsl-font) !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.lsl-avatar-menu .lsl-dh-role-badge {
    display:     inline-flex !important;
    align-items: center !important;
    margin-top: 4px !important;
    padding: 2px 8px !important;
    background:    var(--lsl-badge-bg) !important;
    color:         var(--lsl-badge-color) !important;
    border-radius: 20px !important;
    font-family: var(--lsl-font) !important;
    font-size:   11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    width: fit-content !important;
}

/* Nav links */
.lsl-avatar-menu .lsl-dropdown-links {
    list-style: none !important;
    margin:  0 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--lsl-divider) !important;
}
.lsl-avatar-menu .lsl-dropdown-links li {
    margin:  0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.lsl-avatar-menu .lsl-dropdown-link {
    display:     flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 16px !important;
    font-family: var(--lsl-font) !important;
    font-size:   13.5px !important;
    font-weight: 500 !important;
    color:           var(--lsl-link-color) !important;
    text-decoration: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.lsl-avatar-menu .lsl-dropdown-link:hover,
.lsl-avatar-menu .lsl-dropdown-link:focus-visible {
    background: var(--lsl-link-hover) !important;
    color:      var(--lsl-link-hover-text) !important;
    outline: none !important;
}
.lsl-avatar-menu .lsl-dropdown-link:focus-visible {
    outline: 2px solid var(--lsl-bubble-bg) !important;
    outline-offset: -2px !important;
}

/* Link icons */
.lsl-avatar-menu .lsl-link-icon {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width:  18px !important;
    height: 18px !important;
    color: var(--lsl-link-icon-color) !important;
}
.lsl-avatar-menu .lsl-link-icon svg {
    display: block !important;
    width:  15px !important;
    height: 15px !important;
}

/* Logout row */
.lsl-avatar-menu .lsl-dropdown-footer {
    padding: 4px 0 !important;
}
.lsl-avatar-menu .lsl-logout-link {
    display:     flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: var(--lsl-font) !important;
    font-size:   13.5px !important;
    font-weight: 500 !important;
    color:           var(--lsl-logout-color) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}
.lsl-avatar-menu .lsl-logout-link:hover,
.lsl-avatar-menu .lsl-logout-link:focus-visible {
    background: var(--lsl-logout-hover) !important;
    outline: none !important;
}
.lsl-avatar-menu .lsl-logout-link .lsl-link-icon {
    color: var(--lsl-logout-color) !important;
}


/* ── 8. Guest / signed-out pill ─────────────────────────────── */
.lsl-avatar-menu--guest .lsl-guest-trigger {
    display:     flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px 0 8px !important;
    height: var(--lsl-bubble-size) !important;
    border-radius: 22px !important;
    background:      var(--lsl-bubble-bg) !important;
    color:           var(--lsl-bubble-color) !important;
    border: 2px solid var(--lsl-bubble-border, rgba(0,0,0,0.12)) !important;
    text-decoration: none !important;
    font-family: var(--lsl-font) !important;
    font-size:   13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
.lsl-avatar-menu--guest .lsl-guest-trigger:hover,
.lsl-avatar-menu--guest .lsl-guest-trigger:focus,
.lsl-avatar-menu--guest .lsl-guest-trigger:active {
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    background: var(--lsl-bubble-bg) !important;
    color: var(--lsl-bubble-color, #fff) !important;
    text-decoration: none !important;
    outline: none !important;
}
/* Force label text color — prevents theme a:hover from hiding it */
.lsl-avatar-menu--guest .lsl-guest-trigger .lsl-guest-label {
    color: var(--lsl-bubble-color, #fff) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.lsl-avatar-menu--guest .lsl-guest-trigger:hover .lsl-guest-label,
.lsl-avatar-menu--guest .lsl-guest-trigger:focus .lsl-guest-label {
    color: var(--lsl-bubble-color, #fff) !important;
}
/* Guest icon SVG inherits bubble color */
.lsl-avatar-menu--guest .lsl-guest-icon .lsl-avatar-svg {
    stroke: var(--lsl-bubble-color) !important;
}
/* No hover change in inline context eitherxt */
.lsl-pos-inline.lsl-avatar-menu--guest .lsl-guest-trigger:hover {
    transform: none !important;
    filter: brightness(1.1);
}
.lsl-avatar-menu--guest .lsl-guest-icon {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.lsl-avatar-menu--guest .lsl-guest-icon svg,
.lsl-avatar-menu--guest .lsl-guest-icon .lsl-avatar-svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: var(--lsl-bubble-color, #fff) !important;
    fill: none !important;
}


/* ── 9. Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .lsl-avatar-menu {
        --lsl-bubble-size:  36px;
        --lsl-panel-width:  min(240px, 90vw);
    }
    .lsl-pos-top-right,
    .lsl-pos-bottom-right { right: 12px !important; }
    .lsl-pos-top-left,
    .lsl-pos-bottom-left  { left:  12px !important; }
    .lsl-pos-top-right,
    .lsl-pos-top-left     { top:    12px !important; }
    .lsl-pos-bottom-right,
    .lsl-pos-bottom-left  { bottom: 12px !important; }
}