.toast-notification{position:absolute;right:2;width:40%;max-width:20rem;padding:1rem;box-shadow:0 10px 10px rgba(0,0,0,.1);border-radius:.5rem}.toast-notification-dark{background-color:#1a1a1a;color:#f3f4f6}.toast-notification-light{background-color:#fff}.toast-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.toast-header h4{margin-bottom:.25rem;font-size:1rem;font-weight:700}.toast-header .mark-all-read{font-size:.875rem;color:#6b7280}.toast-header .close-btn{display:flex;justify-content:center;align-items:center;background-color:#fff;color:#9ca3af;border-radius:50%;padding:.25rem;cursor:pointer}.toast-header .close-btn:hover{background-color:#f3f4f6}.toast-header .close-btn svg{width:1rem;height:1rem}.notification-list{max-height:24rem;overflow-y:auto}.notification-item{display:flex;align-items:center;margin-bottom:1rem;cursor:pointer}.notification-item .avatar{position:relative;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff}.notification-item .avatar.bg-green{background-color:#34d399}.notification-item .avatar.bg-gray{background-color:#d1d5db}.notification-item .notification-info{margin-left:1rem;font-size:.875rem}.notification-item .notification-info .name{font-weight:600;color:#111827}.notification-item .notification-info .message{color:#6b7280}.notification-item .notification-info .time{color:#3b82f6}.notification-item .new-message{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;display:flex;justify-content:center;align-items:center;background-color:#3b82f6;border-radius:50%}.notification-item .new-message svg{width:.75rem;height:.75rem;color:#fff}