@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-hover {
        transition: all 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    .slide-up {
        animation: slideUp 0.3s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .menu-item-hover {
        @apply relative overflow-hidden;
    }
    .menu-item-hover::after {
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 content-[''];
    }
    .menu-item-hover:hover::after {
        @apply w-full;
    }
    
    /* 确保每个菜单项作为独立容器 */
    .menu-item-container {
        @apply relative inline-flex items-center;
    }
    /* 修复按钮悬停区域问题 */
    .menu-item-actions {
        @apply ml-1 opacity-0 transition-opacity duration-200;
    }
    .group:hover .menu-item-actions {
        @apply opacity-100;
    }
    
    /* URL显示优化 */
    .url-truncate {
        /* 限制最大宽度 */
        max-width: 250px;
        /* 超出部分显示省略号 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 悬停时显示完整URL */
        position: relative;
    }
    
    /* 响应式调整 - 在小屏幕上进一步限制宽度 */
    @media (max-width: 768px) {
        .url-truncate {
            max-width: 150px;
        }
    }
    
    /* 悬停时显示完整URL的提示 */
    .url-truncate:hover::after {
        content: attr(data-url);
        position: absolute;
        bottom: 100%;
        left: 0;
        background: #333;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 10;
        max-width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
