/* Responsive Design */

/* Small Screen (Mobile/Tablet < 800px) */
@media (max-width: 800px) {
    .app-container {
        /* On tablet/mobile, sidebar floats over canvas */
        display: block; /* Remove flex to allow absolute positioning context */
    }

    .sidebar {
        position: absolute;
        top: auto; /* Not top-aligned anymore */
        bottom: 0; /* Bottom-aligned */
        left: 0;
        width: 100%; /* Full width */
        height: 70vh; /* Occupy 70% of screen height */
        max-width: none; /* Reset max-width */
        margin-left: 0 !important; /* Reset desktop margin collapse */
        
        transform: translateY(100%); /* Hidden downwards */
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth spring-like */
        
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px 20px 0 0; /* Rounded top corners */
        box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
        z-index: 300;
    }
    
    /* Override collapsed class for mobile */
    .sidebar.collapsed {
        margin-left: 0;
        transform: translateY(100%);
    }

    .sidebar.open {
        transform: translateY(0); /* Slide up */
    }

    .sidebar-header {
        justify-content: center; /* Center title */
        position: relative;
        cursor: pointer; /* Clickable on mobile */
    }

    .sidebar-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }
    
    .logo {
        margin-top: 10px; /* Space for handle */
    }

    /* Mobile specific icons */
    .desktop-icon { display: none; }
    .mobile-icon { display: none; } /* Hide close icon on mobile */

    .close-btn {
        display: none; /* Hide close button container on mobile */
    }

    .sidebar-toggle {
        display: flex; /* Always show toggle on mobile */
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        position: absolute;
        top: 15px;
        left: 15px;
    }
    
    .mobile-only {
        display: block;
    }

    .canvas-area {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .top-bar {
        padding: 15px; /* Less padding on mobile */
        padding-left: 70px; /* Space for sidebar toggle + spacing */
        flex-direction: row; /* Horizontal layout */
        align-items: center; /* Center vertically */
        justify-content: flex-end; /* Push all to right */
        gap: 10px; /* Spacing between groups */
        pointer-events: none;
    }

    .top-bar-left {
        display: none; /* Sidebar toggle takes this visual space absolutely */
    }

    /* Override absolute positioning for vertical stack flow */
    .action-buttons, .right-actions {
        position: relative;
        pointer-events: auto;
    }

    .action-buttons {
        gap: 15px; /* Increase gap between buttons inside group */
        padding: 8px 15px;
        order: 1; 
    }

    .right-actions {
        order: 2;
    }

    .primary-btn {
        padding: 10px; /* Square-ish for icon */
        border-radius: 50%; /* Circle button on mobile */
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    
    .primary-btn .btn-text {
        display: none; /* Hide text on mobile, icon only */
    }
    
    .primary-btn i {
        margin: 0;
    }
    
    .shape-options {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .color-picker-container {
        gap: 8px;
    }
    
    .color-option {
        width: 28px;
        height: 28px;
    }
}