:root {
        --widget-blue: #dc2626;
        --widget-blue-hover: #b91c1c;
        --widget-grey: #f3f4f6;
        --widget-border: #e5e7eb;
        --widget-red: #ef4444;
        --widget-yellow-bg: #fefce8;
        --widget-yellow-text: #854d0e;
    }

    #note-widget-trigger {
        position: fixed;
        bottom: 20px;
        right: 74px; /* offset from analyst chat button */
        width: 44px;
        height: 44px;
        background-color: #111;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 9998;
        transition: transform 0.2s ease, background-color 0.2s;
    }
    /* Hide floating notes button everywhere — accessed via nav on desktop, bottom bar on mobile */
    #note-widget-trigger { display: none !important; }
    #note-widget-trigger:hover {
        background-color: #333;
        transform: scale(1.08);
    }
    #note-widget-trigger svg {
        pointer-events: none;
        width: 18px;
        height: 18px;
    }

    #note-widget-panel {
        position: fixed;
        bottom: 145px;
        right: 20px;
        width: 340px;
        height: 480px;
        max-height: calc(100vh - 160px);
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid #d1d5db;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
        z-index: 9999;
        display: none;
        flex-direction: column;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    .widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .75rem 1rem;
        background-color: #111;
        border-bottom: 1px solid var(--widget-border);
        flex-shrink: 0;
    }
    .widget-header h3 { color: #fff !important; }
    #note-widget-close { color: rgba(255,255,255,.6) !important; }
    #note-widget-close:hover { color: #fff !important; }
    .widget-header h3 {
        font-size: 1.25rem;
		font-family: 'Georgia', 'Times New Roman', serif;
        font-weight: 600;
        margin: 0;
        color: #1f2937;
    }
    #note-widget-close {
        background: none;
        border: none;
        font-size: 2rem;
        font-weight: 300;
        color: #6b7280;
        cursor: pointer;
        line-height: 1;
    }

    #note-widget-list-view,
    #note-widget-editor-view {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .widget-list-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--widget-border);
        flex-shrink: 0;
        gap: 0.5rem;
    }
    
    #note-widget-new-btn,
    #note-widget-back-btn,
    #note-widget-save-btn {
        background-color: var(--widget-blue);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    #note-widget-new-btn:hover,
    #note-widget-back-btn:hover,
    #note-widget-save-btn:hover {
        background-color: var(--widget-blue-hover);
    }
    #note-widget-back-btn {
        flex-grow: 0; /* "Back" button should be small */
    }
    #note-widget-save-btn.local {
        background-color: #b91c1c;
    }
    
    /* "View All" Button Style */
    #note-widget-all-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--widget-grey);
        color: #374151;
        border: 1px solid var(--widget-border);
        border-radius: 8px;
        padding: 0.6rem;
        cursor: pointer;
        line-height: 1;
    }
    #note-widget-all-btn:hover {
        background-color: #e5e7eb;
    }

    #note-widget-delete-btn {
        background: none;
        border: none;
        color: var(--widget-red);
        font-size: 1.2rem;
        cursor: pointer;
    }

    /* Local Storage Info Box */
    .widget-list-header-info {
        padding: 0;
        background-color: var(--widget-yellow-bg);
        color: var(--widget-yellow-text);
        font-size: 0.875rem;
        text-align: center;
        line-height: 1.4;
    }
    .widget-list-header-info p {
        padding: 0.75rem 1rem;
        margin: 0;
    }

    .widget-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }
    #note-widget-editor-view .widget-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
		overflow:hidden;
    }

    .widget-loading,
    .widget-no-drafts {
        padding: 2rem 1rem;
        text-align: center;
        color: #6b7280;
    }

    .widget-draft-item {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
        border: none;
        background: #fff;
        border-radius: 6px;
        margin-bottom: 0.5rem;
        cursor: pointer;
        border: 1px solid #fff;
    }
    .widget-draft-item:hover {
        background-color: var(--widget-grey);
        border-color: var(--widget-border);
    }
    .widget-draft-item h4 {
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 0.25rem 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .widget-draft-item p {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0;
        font-style: italic;
    }
    
    #note-widget-title-input,
    #note-widget-content-input {
        width: -webkit-fill-available;
        border: 1px solid var(--widget-border);
        border-radius: 8px;
        padding: 0.75rem;
        font-size: 1rem;
        font-family: inherit;
    }
    #note-widget-title-input {
        font-weight: 600;
    }
    #note-widget-content-input {
        flex-grow: 1;
        min-height: 200px;
        resize: none;
    }
    
    /* Mobile-specific adjustments */
    @media (max-width: 600px) {
        #note-widget-panel {
            width: 95%;
            height: 70vh;
            bottom: 10px;
            right: 2.5%;
        }
    }