/* Mobile fixes to ensure notes have proper spacing and visual separation */
@media (max-width: 767px) {
    /* Enhanced note item styling for mobile */
    .note-item {
        margin-bottom: 1.5rem !important;
        padding: 1.25rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        background-color: var(--elevated-background) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }
    
    /* Ensure notes have clear separation */
    .notes-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0.5rem !important;
    }
    
    /* Ensure note content is properly formatted */
    .note-summary, .note-transcription {
        margin-top: 1rem !important;
        padding-top: 0.75rem !important;
        border-top: 1px solid var(--border-color) !important;
    }
    
    /* Ensure note header has proper spacing */
    .note-header {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    /* Ensure collapsible content is properly styled */
    .collapsible-content {
        padding: 0.75rem !important;
        margin-top: 0.5rem !important;
        background-color: rgba(0, 0, 0, 0.2) !important;
        border-radius: 8px !important;
    }
}