/* Mobile UI Fixes - All Issues Resolved */

/* ===== MOBILE CONTROLS IN HEADER ===== */
@media (max-width: 900px) {
    /* Mobile Controls Container */
    .mobile-controls {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 10001 !important;
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    /* Individual Control Buttons */
    .mobile-hamburger-menu,
    .mobile-bot-chat,
    .mobile-theme-toggle-btn {
        background: rgba(10, 25, 47, 0.95) !important;
        border: 2px solid var(--primary-color) !important;
        border-radius: 12px !important;
        padding: 0 !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: all 0.3s ease !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
    }
    
    /* Light theme mobile controls */
    html.light-theme .mobile-hamburger-menu,
    html.light-theme .mobile-bot-chat,
    html.light-theme .mobile-theme-toggle-btn,
    body.light-theme .mobile-hamburger-menu,
    body.light-theme .mobile-bot-chat,
    body.light-theme .mobile-theme-toggle-btn {
        background: rgba(248, 249, 250, 0.95) !important;
        border-color: var(--border-color) !important;
    }
    
    /* Mobile Theme Toggle Button */
    .mobile-theme-toggle-btn {
        background: none !important;
        border: none !important;
        font-size: 1.2rem !important;
        color: var(--theme-toggle-icon) !important;
    }
    
    .mobile-theme-toggle-btn .fa-sun {
        display: none;
    }
    
    .mobile-theme-toggle-btn .fa-moon {
        display: block;
        color: #ffd700;
    }
    
    /* Light theme toggle icons */
    html.light-theme .mobile-theme-toggle-btn .fa-sun,
    body.light-theme .mobile-theme-toggle-btn .fa-sun {
        display: block;
        color: #f59e0b;
    }
    
    html.light-theme .mobile-theme-toggle-btn .fa-moon,
    body.light-theme .mobile-theme-toggle-btn .fa-moon {
        display: none;
    }
    
    /* Bot Chat Button */
    .mobile-bot-chat {
        font-size: 1.2rem !important;
        color: #ffffff !important;
    }
    
    html.light-theme .mobile-bot-chat,
    body.light-theme .mobile-bot-chat {
        color: var(--text-primary) !important;
    }
    
    /* Hide desktop chatbot widget on mobile */
    .chatbot-widget {
        display: none !important;
    }
    
    /* Remove theme toggle from mobile menu */
    .mobile-theme-toggle {
        display: none !important;
    }
}

/* ===== REMOVE YOUTUBE VIDEO ROTATION ANIMATION ===== */
.project-video:hover iframe,
.project-video:hover video,
.project-video iframe,
.project-video video {
    transform: none !important;
    transition: none !important;
}

.project-card:hover .project-video iframe,
.project-card:hover .project-video video {
    transform: none !important;
}

/* Override enhanced animations */
.project-video {
    overflow: hidden;
}

.project-video::after {
    display: none !important;
}

/* ===== AUTHOR PHOTO CENTERING ===== */
.profile-img,
.author-image,
img.author-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.image-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Mobile specific author image fixes */
@media (max-width: 768px) {
    .about-image {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .profile-img {
        position: static !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto !important;
    }
}

/* ===== PURPLE POPUP OVERLAY FIX ===== */
.welcome-popup {
    background: rgba(138, 43, 226, 0.85) !important; /* Purple overlay */
}

.welcome-content {
    background: white !important;
    color: #333333 !important;
}

/* Dark mode welcome content */
html.light-theme .welcome-content,
body.light-theme .welcome-content {
    background: white !important;
    color: #333333 !important;
}

[data-theme="dark"] .welcome-content,
html:not(.light-theme) .welcome-content {
    background: #1a1a2e !important;
    color: #ffffff !important;
}

/* ===== MOBILE VIEWPORT FIX ===== */
@media (max-width: 576px) {
    body {
        min-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .header {
        width: 100% !important;
        position: fixed !important;
    }
    
    .nav {
        padding: 0 10px !important;
    }
    
    .mobile-controls {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        gap: 6px !important;
    }
    
    .mobile-hamburger-menu,
    .mobile-bot-chat,
    .mobile-theme-toggle-btn {
        width: 42px !important;
        height: 42px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .mobile-controls {
        top: 5px !important;
        right: 5px !important;
        gap: 5px !important;
    }
    
    .mobile-hamburger-menu,
    .mobile-bot-chat,
    .mobile-theme-toggle-btn {
        width: 38px !important;
        height: 38px !important;
    }
    
    .hamburger-bar {
        width: 16px !important;
    }
}

/* ===== ENSURE VISIBILITY ===== */
.mobile-hamburger-menu *,
.mobile-bot-chat *,
.mobile-theme-toggle-btn * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force display of mobile controls */
@media (max-width: 900px) {
    .mobile-controls {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}