/**
 * Cross-tab Navigation Enhancements
 * Improves UX for sidebar links that navigate between tabs
 */

/* Enhanced sidebar link styling for better interaction feedback */
.sidebar-link {
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.sidebar-link:hover {
    background-color: #f8fafc;
    color: #4f46e5;
    transform: translateX(2px);
}

.sidebar-link:active {
    transform: translateX(1px);
}

/* Add visual indicator for cross-tab navigation */
.sidebar-link.category-filter::after {
    content: "→";
    position: absolute;
    right: 45px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #6b7280;
    font-size: 0.875rem;
}

.sidebar-link.category-filter:hover::after {
    opacity: 1;
}

/* Tooltip for sidebar links */
.sidebar-link[title] {
    position: relative;
}

.sidebar-link.category-filter {
    position: relative;
}

.sidebar-link.category-filter:hover::before {
    content: "Click to view in Forum tab";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    animation: tooltipFadeIn 0.3s ease forwards;
    pointer-events: none;
}

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

/* Popular topics links styling */
.sidebar-section:last-child .sidebar-link:hover::before {
    content: "View all topics in Forum";
}

/* Enhanced count badges */
.sidebar-link .count {
    background: #e5e7eb;
    color: #374151;
    transition: all 0.2s ease;
}

.sidebar-link:hover .count {
    background: #4f46e5;
    color: white;
}

/* Loading state for cross-tab navigation */
.cross-tab-loading {
    position: relative;
    pointer-events: none;
}

.cross-tab-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: inherit;
}

.cross-tab-loading::before {
    content: "⟳";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: spin 1s linear infinite;
    color: #4f46e5;
}

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

/* Tab transition effects */
.forum-content, .chat-content {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.forum-content:not(.active), .chat-content:not(.active) {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.forum-content.active, .chat-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Studio tab active state enhancement */
.studio-tab {
    transition: all 0.2s ease;
}

.studio-tab.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}

/* Filter button enhancement for cross-tab filtering */
.filter-button {
    transition: all 0.3s ease;
}

.filter-button.cross-tab-activated {
    animation: highlightFilter 0.6s ease;
}

@keyframes highlightFilter {
    0% { 
        background: #4f46e5;
        transform: scale(1);
    }
    50% { 
        background: #6366f1;
        transform: scale(1.05);
    }
    100% { 
        background: #4f46e5;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar-link.category-filter::after {
        display: none;
    }
    
    .sidebar-link.category-filter:hover::before {
        display: none;
    }
}

/* Accessibility improvements */
.sidebar-link:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    background-color: #f8fafc;
}

.sidebar-link[aria-pressed="true"] {
    background-color: #eef2ff;
    color: #4f46e5;
}

/* Success feedback for cross-tab navigation */
.cross-tab-success {
    animation: successPulse 0.8s ease;
}

@keyframes successPulse {
    0% { 
        background-color: #dcfce7;
        border-color: #22c55e;
    }
    50% { 
        background-color: #f0fdf4;
        border-color: #16a34a;
    }
    100% { 
        background-color: transparent;
        border-color: transparent;
    }
}