/* STILI ESCLUSIVI PER AI LAB */
body { 
    background: #050505; 
    color: white; 
    font-family: 'Inter', sans-serif; 
    /* 100dvh = Dynamic Viewport Height, ignora la barra url di Safari/Chrome! */
    height: 100dvh; 
    width: 100vw;
    display: flex; 
    overflow: hidden; 
    position: relative;
}

.control-panel { 
    background: #0a0a0a; 
    border-right: 1px solid #222; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; 
}

.font-space { font-family: 'Space Grotesk', sans-serif; }

.cyber-loader {
    width: 64px; height: 64px; border: 4px solid #fff; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite;
}
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#preview-content { font-family: system-ui, -apple-system, sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- MOBILE APP-LIKE EXPERIENCE --- */
@media (max-width: 768px) {
    body { display: block; }
    
    .control-panel { 
        width: 100% !important; 
        height: 100dvh; 
        position: absolute; 
        inset: 0; 
        border-right: none; 
        z-index: 20;
    }
    
    main { 
        position: absolute; 
        inset: 0; 
        width: 100%; 
        height: 100dvh; 
        z-index: 30; 
        transform: translateX(100%); 
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
        background: #050505;
        box-shadow: -15px 0 40px rgba(0,0,0,0.8); /* Ombra profonda per stacco */
    }

    /* Effetto slide Parallasse stile iPhone */
    .view-active-preview .control-panel { 
        transform: translateX(-25%); 
        opacity: 0.3;
    }
    
    .view-active-preview main { 
        transform: translateX(0); 
    }
}