/* 🎨 Icon Styling and Utilities */

/* Icon containers */
.bot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.bot-icon img {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

/* Hover effects for bot icons */
.bot-card:hover .bot-icon img {
    transform: translateY(-2px) scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

/* Logo styling - simplified to match cleaner header */
.logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.logo img {
	filter: none;
	transition: transform 0.3s ease;
}

.logo:hover img {
	transform: none;
}

/* Icon utilities */
.icon-small {
    width: 24px !important;
    height: 24px !important;
}

.icon-medium {
    width: 32px !important;
    height: 32px !important;
}

.icon-large {
    width: 48px !important;
    height: 48px !important;
}

.icon-xl {
    width: 64px !important;
    height: 64px !important;
}

/* Icon filters for different themes */
.icon-blue-filter {
    filter: hue-rotate(200deg) saturate(1.2);
}

.icon-purple-filter {
    filter: hue-rotate(280deg) saturate(1.1);
}

.icon-green-filter {
    filter: hue-rotate(120deg) saturate(1.3);
}

/* Responsive icon sizing */
@media (max-width: 768px) {
    .bot-icon img {
        width: 40px;
        height: 40px;
    }
    
    .logo img {
        width: 28px;
        height: 28px;
    }
}

/* Animation classes */
.icon-bounce {
    animation: iconBounce 2s ease-in-out infinite;
}

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

.icon-float {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}