/* ==========================================================================
   EduInvesting Light Mode - Toggle Button Styles (mobile-optimized)
   ========================================================================== */

#eilm-toggle-btn {
    position: fixed;
    z-index: 999999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(20, 22, 28, 0.85);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.18s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        width 0.2s ease,
        opacity 0.25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    /* Prevent iOS tap highlight + accidental text selection */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

#eilm-toggle-btn:hover {
    transform: translateY(-1px);
    background: rgba(30, 33, 41, 0.95);
}

#eilm-toggle-btn:active {
    transform: translateY(0) scale(0.97);
}

#eilm-toggle-btn:focus-visible {
    outline: 2px solid #4f8cff;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   POSITION VARIANTS — desktop defaults (use safe-area insets so the button
   never sits underneath the iOS home bar / notch even on landscape)
   -------------------------------------------------------------------------- */
.eilm-toggle.eilm-pos-bottom-right {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right:  calc(24px + env(safe-area-inset-right, 0px));
}
.eilm-toggle.eilm-pos-bottom-left {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left:   calc(24px + env(safe-area-inset-left, 0px));
}
.eilm-toggle.eilm-pos-top-right {
    top:   calc(24px + env(safe-area-inset-top, 0px));
    right: calc(24px + env(safe-area-inset-right, 0px));
}
.eilm-toggle.eilm-pos-top-left {
    top:  calc(24px + env(safe-area-inset-top, 0px));
    left: calc(24px + env(safe-area-inset-left, 0px));
}

/* --------------------------------------------------------------------------
   ICONS
   -------------------------------------------------------------------------- */
#eilm-toggle-btn .eilm-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Default (dark mode active) — show sun (click to go light) */
#eilm-toggle-btn .eilm-icon-moon { display: none; }
#eilm-toggle-btn .eilm-icon-sun  { display: block; }
#eilm-toggle-btn .eilm-label-light { display: inline; }
#eilm-toggle-btn .eilm-label-dark  { display: none; }

/* Light mode active — show moon (click to go dark) */
html.eilm-light #eilm-toggle-btn {
    background: #ffffff;
    color: #16181d;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
html.eilm-light #eilm-toggle-btn .eilm-icon-moon { display: block; }
html.eilm-light #eilm-toggle-btn .eilm-icon-sun  { display: none; }
html.eilm-light #eilm-toggle-btn .eilm-label-light { display: none; }
html.eilm-light #eilm-toggle-btn .eilm-label-dark  { display: inline; }

/* If label is shown, expand button width */
#eilm-toggle-btn:has(.eilm-label) { width: auto; min-width: 48px; }

/* --------------------------------------------------------------------------
   ENTRY ANIMATION
   -------------------------------------------------------------------------- */
#eilm-toggle-btn { animation: eilm-fade-in 0.4s ease-out; }
@keyframes eilm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   HIDE-ON-SCROLL STATE (toggled by JS on mobile only)
   -------------------------------------------------------------------------- */
#eilm-toggle-btn.eilm-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}
.eilm-toggle.eilm-pos-top-right.eilm-hidden,
.eilm-toggle.eilm-pos-top-left.eilm-hidden,
.eilm-toggle.eilm-mpos-top-right.eilm-hidden,
.eilm-toggle.eilm-mpos-top-left.eilm-hidden {
    transform: translateY(-20px);
}

/* ==========================================================================
   MOBILE BREAKPOINT (≤600px)
   ========================================================================== */
@media (max-width: 600px) {

    /* Compact mode: smaller button + smaller icon, hide text label even if enabled */
    #eilm-toggle-btn.eilm-mobile-compact {
        width: 40px;
        height: 40px;
        padding: 0;
    }
    #eilm-toggle-btn.eilm-mobile-compact .eilm-icon {
        width: 18px;
        height: 18px;
    }
    #eilm-toggle-btn.eilm-mobile-compact .eilm-label {
        display: none;
    }

    /* Default mobile button (when compact is off) — still slightly smaller than desktop */
    #eilm-toggle-btn:not(.eilm-mobile-compact) {
        width: 44px;
        height: 44px;
    }

    /* Tighter offsets on small screens */
    .eilm-toggle.eilm-pos-bottom-right {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        right:  calc(16px + env(safe-area-inset-right, 0px));
    }
    .eilm-toggle.eilm-pos-bottom-left {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left:   calc(16px + env(safe-area-inset-left, 0px));
    }
    .eilm-toggle.eilm-pos-top-right {
        top:   calc(12px + env(safe-area-inset-top, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
    }
    .eilm-toggle.eilm-pos-top-left {
        top:  calc(12px + env(safe-area-inset-top, 0px));
        left: calc(16px + env(safe-area-inset-left, 0px));
    }

    /* Mobile-only position overrides — win over desktop position class */
    .eilm-toggle.eilm-mpos-bottom-right {
        top: auto !important;
        left: auto !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        right:  calc(16px + env(safe-area-inset-right, 0px)) !important;
    }
    .eilm-toggle.eilm-mpos-bottom-left {
        top: auto !important;
        right: auto !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        left:   calc(16px + env(safe-area-inset-left, 0px)) !important;
    }
    .eilm-toggle.eilm-mpos-top-right {
        bottom: auto !important;
        left: auto !important;
        top:   calc(12px + env(safe-area-inset-top, 0px)) !important;
        right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    }
    .eilm-toggle.eilm-mpos-top-left {
        bottom: auto !important;
        right: auto !important;
        top:  calc(12px + env(safe-area-inset-top, 0px)) !important;
        left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    }
}

/* Very small screens (≤380px) — extra tight */
@media (max-width: 380px) {
    #eilm-toggle-btn.eilm-mobile-compact {
        width: 38px;
        height: 38px;
    }
}

/* Reduced motion — kill animations for users who ask for it */
@media (prefers-reduced-motion: reduce) {
    #eilm-toggle-btn,
    #eilm-toggle-btn .eilm-icon {
        animation: none !important;
        transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease !important;
    }
}