body {  
    font-family: Arial, sans-serif;  
    margin: 20px;  
    background-color: #f0f0f0;  
}  
.emunote-notepad-container {  
    max-width: 600px;  
    margin: 0 auto;  
    background-color: #fff;  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  
.emunote-notes-list-container {  
    position: fixed;  
    bottom: 20px;  
    right: 20px;  
    width: 250px;  
    background-color: #fff;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    transition: all 0.3s ease;  
    z-index: 1000;  
}  
.emunote-notes-list-container.collapsed {  
    width: 60px;  
    height: 60px;  
    border-radius: 50%;  
    background-color: #007bff;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
    overflow: hidden;  
}  
.emunote-notes-list-container.expanded {  
    width: 250px;  
    max-height: 400px;  
    border-radius: 8px;  
    background-color: #fff;  
}  
.emunote-notes-header {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    cursor: pointer;  
    background-color: #007bff;  
    color: #fff;  
    font-size: 24px;  
    height: 60px;  
}  
.emunote-notes-list-container.collapsed .emunote-notes-header {  
    background-color: transparent;  
}  
.emunote-notes-list-container.expanded .emunote-notes-header {  
    background-color: #007bff;  
    padding: 10px;  
    border-radius: 8px 8px 0 0;  
    justify-content: space-between;  
    font-size: 16px;  
    font-weight: bold;  
    height: auto;  
}  
.emunote-notes-header:hover {  
    background-color: #0056b3;  
}  
.emunote-notes-content {  
    display: none;  
    padding: 10px;  
}  
.emunote-notes-list-container.expanded .emunote-notes-content {  
    display: block;  
}  
.emunote-close-btn {  
    background: none;  
    border: none;  
    color: #fff;  
    font-size: 16px;  
    cursor: pointer;  
    display: none;  
    padding: 0 10px;  
}  
.emunote-notes-list-container.expanded .emunote-close-btn {  
    display: block;  
}  
.emunote-close-btn:hover {  
    color: #ff4d4d;  
}  
#emunote_noteTitle {  
    width: 100%;  
    padding: 8px;  
    margin-bottom: 10px;  
    font-size: 16px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    box-sizing: border-box;  
}  
#emunote_noteInput {  
    width: 100%;  
    min-height: 300px;  
    padding: 10px;  
    font-size: 16px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    margin-bottom: 10px;  
    outline: none;  
    overflow-y: auto;  
    white-space: pre-wrap;  
    box-sizing: border-box;  
}  
.emunote-button-panel {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 10px;  
    background-color: #f8f9fa;  
    padding: 10px;  
    border-radius: 4px;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
    flex-wrap: wrap;  
}  
.emunote-action-panel {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    gap: 10px;  
    margin-top: 10px;  
    background-color: #f8f9fa;  
    padding: 10px;  
    border-radius: 4px;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
    flex-wrap: wrap;  
}  
#emunote_searchNotes {  
    width: 100%;  
    padding: 8px;  
    margin-bottom: 10px;  
    font-size: 14px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    box-sizing: border-box;  
}  
button {  
    padding: 8px 15px;  
    border: none;  
    border-radius: 4px;  
    background-color: #007bff;  
    color: #fff;  
    cursor: pointer;  
    font-size: 14px;  
}  
button:hover {  
    background-color: #0056b3;  
}  
/* Mobile-specific styles */  
@media (max-width: 600px) {  
    .emunote-button-panel button {  
        padding: 6px 10px; /* Reduced padding for mobile */  
        font-size: 12px; /* Slightly smaller font for better fit */  
    }  
    .emunote-button-panel {  
        gap: 5px; /* Reduced gap for tighter spacing */  
        padding: 5px; /* Reduced panel padding */  
    }  
}  
.emunote-dropdown {  
    position: relative;  
    display: inline-block;  
}  
.emunote-dropdown-btn {  
    padding: 8px 15px;  
    border: none;  
    border-radius: 4px;  
    background-color: #007bff;  
    color: #fff;  
    cursor: pointer;  
    font-size: 14px;  
}  
.emunote-dropdown-btn:hover {  
    background-color: #0056b3;  
}  
.emunote-dropdown-content {  
    display: none;  
    position: absolute;  
    background-color: #fff;  
    min-width: 120px;  
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  
    z-index: 1;  
    border-radius: 4px;  
}  
.emunote-dropdown-content button {  
    display: block;  
    width: 100%;  
    padding: 8px;  
    border: none;  
    background-color: #fff;  
    color: #333;  
    text-align: left;  
    font-size: 14px;  
    cursor: pointer;  
}  
.emunote-dropdown-content button:hover {  
    background-color: #f0f0f0;  
}  
.emunote-dropdown:hover .emunote-dropdown-content {  
    display: block;  
}  
#emunote_clearBtn {  
    background-color: #dc3545;  
    color: #fff;  
}  
#emunote_clearBtn:hover {  
    background-color: #b02a37;  
}  
#emunote_copyBtn {  
    background-color: #28a745;  
    color: #fff;  
}  
#emunote_copyBtn:hover {  
    background-color: #218838;  
}  
#emunote_copyMessage {  
    display: none;  
    text-align: center;  
    color: #28a745;  
    font-size: 14px;  
    margin: 5px 0;  
}  
#emunote_notesList {  
    list-style: none;  
    padding: 0;  
    max-height: 300px;  
    overflow-y: auto;  
}  
#emunote_notesList li {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding: 8px;  
    cursor: pointer;  
    border-bottom: 1px solid #eee;  
}  
#emunote_notesList li:hover {  
    background-color: #f0f0f0;  
}  
#emunote_notesList li.active {  
    background-color: #007bff;  
    color: #fff;  
}  
#emunote_notesList li.active button {  
    background-color: #fff;  
    color: #dc3545;  
}  
#emunote_notesList li button {  
    padding: 4px 8px;  
    font-size: 12px;  
    background-color: #dc3545;  
    color: #fff;  
    border-radius: 4px;  
}  
#emunote_notesList li button:hover {  
    background-color: #b02a37;  
}