/* Responsive styles */

/* Medium screens */
@media (max-width: 1024px) {
    /* Allow title to take available space */
    #note-title {
        max-width: none;
    }
    
    .btn-text {
        display: none;
    }
}

/* Small screens */
@media (max-width: 768px) {
    .sidebar { 
        position: fixed; /* Fixed to cover screen */
        top: 0;
        left: 0;
        height: 100%; 
        width: 85%; /* Cover most of the screen */
        max-width: 320px;
        transform: translateX(-100%); 
        margin-left: 0; 
        background-color: #16161e !important; /* Force solid background */
        box-shadow: 5px 0 15px rgba(0,0,0,0.5); 
        z-index: 9999; /* Very High z-index */
        transition: transform 0.3s ease;
    }
    
    .sidebar.open { 
        transform: translateX(0); 
    }
    
    /* Multiline file titles in sidebar */
    .file-title {
        white-space: normal; /* Allow wrapping */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        line-height: 1.2;
    }
    
    /* Overlay for mobile sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Dark blur effect base */
        backdrop-filter: blur(4px); /* Blur effect */
        z-index: 999; /* Below sidebar, above content */
    }

    .sidebar-overlay.active {
        display: block;
    }
    
    .btn-text { 
        display: none; 
    }
    
    /* Give title flexible width on mobile */
    #note-title { 
        width: 100%; 
        max-width: none;
        flex: 1;
        min-width: 0;
    }

    /* On mobile, show only one at a time */
    .hidden-mobile { 
        display: none; 
    }
    
    .show-mobile { 
        display: flex !important; 
        width: 100%; 
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .top-bar {
        padding: 0 10px;
    }
    
    .icon-btn {
        padding: 4px;
        font-size: 1rem;
    }
    
    .primary-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    #note-title {
        width: 100%;
        max-width: none;
        font-size: 1rem;
    }
}