/**
 * Authentication-based UI hiding styles
 * Hides friend and chat UI elements when user is not authenticated
 */

/* Base auth-hidden class */
.auth-hidden {
    display: none !important;
}

/* Sidebar friend button - hide when not authenticated */
body:not(.authenticated) #sidebarFriendsBtn {
    display: none;
}

/* Header action buttons - hide friend/chat buttons when not authenticated */
body:not(.authenticated) #messageBtn,
body:not(.authenticated) #friendRequestBtn {
    display: none;
}

/* Compact actions menu - hide friend/chat actions when not authenticated */
body:not(.authenticated) #actFriends,
body:not(.authenticated) #actChat {
    display: none;
}

/* Friend section - hide entire section when not authenticated */
body:not(.authenticated) #friendsSection {
    display: none;
}

/* Friend search inputs - hide when not authenticated */
body:not(.authenticated) #friendSearchInput,
body:not(.authenticated) #friendSearchBtn,
body:not(.authenticated) #addFriendGlobalBtn {
    display: none;
}

/* Friend and message badges - hide when not authenticated */
body:not(.authenticated) #messageBadge,
body:not(.authenticated) #friendRequestBadge {
    display: none;
}

/* Chat panels and friend panels - hide when not authenticated */
body:not(.authenticated) #chatPanel,
body:not(.authenticated) #friendPanel {
    display: none;
}

/* When authenticated, show all elements */
body.authenticated .auth-hidden {
    display: block !important;
}

/* Flex elements should use flex display when shown */
body.authenticated .auth-hidden.header-actions,
body.authenticated .auth-hidden.action-btn {
    display: flex !important;
}

/* Inline elements should use inline display when shown */
body.authenticated .auth-hidden.badge {
    display: inline !important;
}

/* Welcome section - show only when not authenticated */
body.authenticated #welcomeSection {
    display: none;
}

/* Auth-required sections - hide when not authenticated */
body:not(.authenticated) .auth-required {
    display: none;
}

/* Add some visual feedback for loading states */
.auth-loading {
    opacity: 0.5;
    pointer-events: none;
}

.auth-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive adjustments for auth-related elements */
@media (max-width: 768px) {
    body:not(.authenticated) .actions-menu .auth-hidden {
        display: none;
    }
    
    body.authenticated .actions-menu .auth-hidden {
        display: block !important;
    }
}