/* ============================================
   FOCUS ASSISTANT - Universal Styles
   ============================================
   Works on: tutor.html, advanced_learning.html, course.html
   Author: Synapse AI
   Version: 1.0
   ============================================ */

/* ========== MESSAGE ANIMATIONS ========== */
@keyframes focusMessageSlideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes focusMessageSlideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

/* ========== ACTIVE BUTTON STYLE ========== */
#focusAssistBtn.active,
.nav-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.6) !important;
    animation: focusPulseActive 2s infinite;
}

@keyframes focusPulseActive {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.9);
    }
}

/* ========== PREVIEW HIGHLIGHT ========== */
.focus-preview {
    transition: outline 0.2s ease;
}

/* ========== FOCUSED ELEMENTS ========== */
/* Ensure focused elements stay above overlay */
[style*="z-index: 9999"] {
    position: relative !important;
}

/* ========== OVERLAY ========== */
#focusOverlay {
    animation: focusOverlayFadeIn 0.3s ease;
}

@keyframes focusOverlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========== MESSAGE STYLING ========== */
#focusMessage {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.3px;
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 768px) {
    #focusMessage {
        font-size: 13px;
        padding: 12px 20px;
        top: 60px;
    }
}

/* ========== DARK MODE COMPATIBILITY ========== */
.dark-mode #focusMessage {
    /* Message stays the same in dark mode */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

/* ========== ACCESSIBILITY ========== */
/* High contrast mode support */
@media (prefers-contrast: high) {
    #focusAssistBtn.active {
        outline: 3px solid white;
        outline-offset: 2px;
    }
    
    .focus-preview {
        outline-width: 4px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #focusMessage,
    #focusOverlay,
    .focus-preview {
        animation: none !important;
        transition: none !important;
    }
    
    [style*="z-index: 9999"] {
        scroll-behavior: auto !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    #focusOverlay,
    #focusMessage {
        display: none !important;
    }
}