/* EMERGENCY FIX FOR DESKTOP SETTINGS BUTTON */
/* This file ensures the desktop settings button is visible on desktop screens */
/* Add this as the LAST stylesheet to override everything */

/* Force show desktop settings button on screens >= 768px (tablets and up) */
@media (min-width: 768px) {
    .desktop-settings-btn,
    button.desktop-settings-btn,
    button#desktopSettingsBtn,
    .settings-toggle.desktop-settings-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1001 !important;
        cursor: pointer !important;
    }
}

/* Force hide on mobile (below 768px) */
@media (max-width: 767px) {
    .desktop-settings-btn,
    button.desktop-settings-btn,
    button#desktopSettingsBtn,
    .settings-toggle.desktop-settings-btn {
        display: none !important;
    }
}

/* Ensure settings panel appears on tablet and desktop (768px+) */
@media (min-width: 768px) {
    .settings-panel.active,
    #settingsPanel.active {
        right: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 2001 !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    .settings-panel {
        position: fixed !important;
        top: 70px !important;
        right: -400px !important;
        bottom: auto !important;
        left: auto !important;
        width: 380px !important;
        max-width: 90vw !important;
        height: auto !important;
        max-height: calc(100vh - 90px) !important;
        border-radius: 16px !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
        z-index: 2001 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* Ensure content doesn't spill out */
    }
}