@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono&display=swap');

body { font-family: 'Inter', sans-serif; }

.input-container-focus {
    box-shadow: 0 0 25px -5px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.5) !important;
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    #sidebar:not(.collapsed), #inspector-sidebar:not(.collapsed) {
        position: absolute;
        height: 100%;
        z-index: 50;
        box-shadow: 0 0 40px rgba(0,0,0,0.7);
    }
    #inspector-sidebar { right: 0; }
    #sidebar { left: 0; }
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #ffffff;
    transition: all 0.25s ease;
    text-decoration: none;
    font-weight: 500;
}

.sidebar-link:hover {
    background-color: rgba(74, 222, 128, 0.05);
    color: #f8fafc;
    transform: translateX(4px);
}

.sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

#sidebar.collapsed { width: 70px; }
#sidebar.collapsed .sidebar-text { display: none; }
#sidebar.collapsed h2 { font-size: 0; opacity: 0; }

#inspector-sidebar { 
    width: 320px; 
    overflow: hidden; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent);
}
#inspector-sidebar.collapsed { width: 0; border-left-color: transparent; }

.custom-scrollbar::-webkit-scrollbar { width: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 10px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

.pulse-green {
    box-shadow: 0 0 0 0 rgba(229, 232, 230, 0.3);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(0.95); } 70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { transform: scale(0.95); } }
