/* Draggable Dark Mode Toggle Button - Professional Design */

.draggable-dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 
                0 4px 6px rgba(0, 0, 0, 0.06), 
                inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 9999;
    user-select: none;
    touch-action: none;
    border: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hover effect - macOS-inspired subtle lift */
.draggable-dark-mode-toggle:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 
                0 10px 10px rgba(0, 0, 0, 0.04), 
                inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Active/pressed effect - macOS-inspired press */
.draggable-dark-mode-toggle:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Dark mode styling - Apple-inspired dark appearance */
body.dark-mode .draggable-dark-mode-toggle {
    background: rgba(40, 40, 40, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 
                0 4px 6px rgba(0, 0, 0, 0.2), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Icons container */
.toggle-icon-container {
    position: relative;
    width: 24px;
    height: 24px;
}

/* Base styling for both icons */
.toggle-icon-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Sun icon (visible in dark mode) */
.sun-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
    stroke: #FF9500; /* Apple's orange/gold color */
    fill: none;
}

/* Moon icon (visible in light mode) */
.moon-icon {
    opacity: 1;
    transform: scale(1) rotate(0);
    stroke: #007AFF; /* Apple's blue color */
    fill: none;
}

/* Icon states in dark mode */
body.dark-mode .sun-icon {
    opacity: 1;
    transform: scale(1) rotate(0);
}

body.dark-mode .moon-icon {
    opacity: 0;
    transform: scale(0.5) rotate(45deg);
}

/* Grabbing cursor during dragging */
.draggable-dark-mode-toggle.dragging {
    cursor: grabbing;
    opacity: 0.9;
}

/* Apple-inspired subtle glow animation when the button is first shown */
@keyframes apple-pulse {
    0% { 
        box-shadow: 0 2px 10px rgba(0, 122, 255, 0.1),
                    0 4px 6px rgba(0, 122, 255, 0.06),
                    inset 0 0 0 1px rgba(0, 122, 255, 0.1);
    }
    50% { 
        box-shadow: 0 2px 14px rgba(0, 122, 255, 0.3),
                    0 6px 10px rgba(0, 122, 255, 0.15),
                    inset 0 0 0 1px rgba(0, 122, 255, 0.2); 
    }
    100% { 
        box-shadow: 0 2px 10px rgba(0, 122, 255, 0.1),
                    0 4px 6px rgba(0, 122, 255, 0.06),
                    inset 0 0 0 1px rgba(0, 122, 255, 0.1);
    }
}

/* Dark mode version of the pulse */
@keyframes apple-pulse-dark {
    0% { 
        box-shadow: 0 2px 10px rgba(255, 149, 0, 0.1),
                    0 4px 6px rgba(255, 149, 0, 0.06),
                    inset 0 0 0 1px rgba(255, 149, 0, 0.1);
    }
    50% { 
        box-shadow: 0 2px 14px rgba(255, 149, 0, 0.3),
                    0 6px 10px rgba(255, 149, 0, 0.15),
                    inset 0 0 0 1px rgba(255, 149, 0, 0.2); 
    }
    100% { 
        box-shadow: 0 2px 10px rgba(255, 149, 0, 0.1),
                    0 4px 6px rgba(255, 149, 0, 0.06),
                    inset 0 0 0 1px rgba(255, 149, 0, 0.1);
    }
}

.draggable-dark-mode-toggle.pulse {
    animation: apple-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) 3;
}

body.dark-mode .draggable-dark-mode-toggle.pulse {
    animation: apple-pulse-dark 2s cubic-bezier(0.4, 0, 0.2, 1) 3;
}

/* Make sure button stays in viewport */
@media (max-width: 768px) {
    .draggable-dark-mode-toggle {
        width: 42px;
        height: 42px;
    }
    
    .toggle-icon-container {
        width: 20px;
        height: 20px;
    }
    
    .toggle-icon-container svg {
        width: 20px;
        height: 20px;
    }
}