[x-cloak] { display: none !important; }

/* Prevent scrollbar-induced layout shift (especially in Firefox) */
html {
    overflow-y: scroll;
}

/* Navigation gradient backdrop */
.nav-gradient {
    background: linear-gradient(to bottom, rgb(243 244 246) 0%, rgb(243 244 246) 85%, transparent 100%);
}
.dark .nav-gradient {
    background: linear-gradient(to bottom, rgb(3 7 18) 0%, rgb(3 7 18) 85%, transparent 100%);
}

/* Smooth transitions for sidebar */
.sidebar-backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
}

.sidebar-scroll {
    max-height: calc(100vh - 80px);
}

/* Custom scrollbar for sidebar */
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dark .sidebar-scroll::-webkit-scrollbar-track {
    background: #374151;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.dark .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #6b7280;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.dark .sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Dark mode icon visibility via CSS to prevent layout shift */
.dark-mode-icon-sun { display: none; }
.dark-mode-icon-moon { display: block; }
.dark .dark-mode-icon-sun { display: block; }
.dark .dark-mode-icon-moon { display: none; }

/* 404 page floating bubble animation */
@keyframes float404 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}