/* ==========================================
   Make it look like a real OLIOne note bubble
========================================== */
:root {
    --oli-green: #32893b;
    --oli-green-hover: #256e2c;
    --oli-green-light: #e8f5e9;
    --oli-border: #e0e0e0;
    --oli-gray: #6c757d;
}

/* ==========================================
   ROOT NOTE CONTAINER
========================================== */

.e-dialog.oli-note-bubble {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    overflow: visible !important;
    font-family: Poppins !important;
    background: white !important;
}


    /* ==========================================
   HEADER
========================================== */   

    .e-dialog.oli-note-bubble .e-dlg-header-content {
        background: var(--oli-green) !important;
        color: white !important;
        border-radius: 14px 14px 0 0 !important;
        padding: 10px 14px !important;
        border-bottom: none !important; 
    }

    /* Override Syncfusion header AND its children */

    .e-dialog.oli-note-bubble .e-dlg-header,
    .e-dialog.oli-note-bubble .e-dlg-header * {
        font-size: 13px !important;
        font-weight: 500 !important;
        font-family: Poppins !important;
        color: white !important; 
    }

    /* ==========================================
   LEFT ARROW
========================================== */

    .e-dialog.oli-note-bubble::before {
        content: "";
        position: absolute;
        top: 16px;
        left: -12px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 12px solid var(--oli-green);
    }


    /* ==========================================
   BODY
========================================== */

    .e-dialog.oli-note-bubble .e-dlg-content {
        padding: 14px !important;
        background: white !important;
    }


    /* ==========================================
   TEXTAREA
========================================== */

    .e-dialog.oli-note-bubble .note-textarea {
        width: 100%;
        min-height: 90px;
        border-radius: 10px;
        border: 2px solid var(--oli-border);
        padding: 10px;
        font-family: Poppins;
        font-size: 13px;
    }

        .e-dialog.oli-note-bubble .note-textarea:focus {
            border-color: var(--oli-green);
            box-shadow: 0 0 0 3px var(--oli-green-light);
        }


    /* ==========================================
   FOOTER
========================================== */

    .e-dialog.oli-note-bubble .e-footer-content {
        background: white !important;
        border-top: none !important; 
        padding: 10px 14px 14px 14px !important;
        display: flex !important;
        justify-content: flex-end !important; 
        gap: 10px;
    }


    /* ==========================================
   BUTTONS
========================================== */

    .e-dialog.oli-note-bubble .oli-btn-save {
        background: var(--oli-green) !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 6px 16px !important;
    }

        .e-dialog.oli-note-bubble .oli-btn-save:hover {
            background: var(--oli-green-hover) !important;
        }


    .e-dialog.oli-note-bubble .oli-btn-cancel {
        background: #eef0f2 !important;
        color: #333 !important;
        border-radius: 8px !important;
        padding: 6px 16px !important;
    }

        .e-dialog.oli-note-bubble .oli-btn-cancel:hover {
            background: #dde2e6 !important;
        }