:root{--notify-width: clamp(280px, 90vw, 400px);--notify-spacing: 1rem;--notify-z-index: 1000;--notify-transition: opacity 0.3s ease, transform 0.3s ease;--notify-padding: 1rem;--notify-border-radius: 0.75rem;--notify-font-size: 1rem;--notify-font-family: sans-serif;--notify-color-bg: #ffffff;--notify-color-text: #333333;--notify-color-shadow: rgba(0, 0, 0, 0.1);--notify-close-size: 1.25rem;--notify-close-color: #444;--notify-close-color-hover: #000;--notif-center-remove-transition: opacity 0.3s ease, transform 0.3s ease;--notif-center-bg-transition: background 0.2s ease;--notif-center-transform: transform 0.3s ease;--notif-center-width: clamp(300px, 90vw, 400px);--notif-center-height: 100vh;--notif-center-bg: rgba(255, 255, 255, 0.85);--notif-center-blur: 12px;--notif-center-shadow: rgba(0, 0, 0, 0.2);--notif-center-x-padding: 1rem;--notif-center-y-padding: 1rem;--notif-center-z-index: 1050;--notif-border: #000;--notif-unread-border: #bd0b0b;--notif-border-unread: ;--notif-item-close: #666;--notif-item-close-hover: #000;--notif-item-bg: #ffffff;--notif-item-unread-bg: #ffffff;--notif-item-text: #222;--notif-item-radius: 0.75rem;--notif-item-padding: 1rem;--notif-item-shadow: rgba(0, 0, 0, 0.1);--notif-close-size: 1.5rem;--notif-close-color: #444;--notif-close-color-hover: #000;--notif-bell-size: 3rem;--notif-bell-bg: #ffffff;--notif-bell-color: #333;--notif-bell-shadow: rgba(0, 0, 0, 0.2);--notif-bell-z-index: 1040;--notif-bell-radius: 50%;--notif-bell-hover-bg: #f0f0f0;--notif-badge-bg: #d32f2f;--notif-badge-color: #ffffff;--notif-badge-size: 1.25rem;--notif-badge-font-size: 0.75rem;--notif-badge-border: none}.notify-container{position:fixed;display:flex;gap:var(--notify-spacing);width:var(--notify-width);z-index:var(--notify-z-index);pointer-events:none}.notify-container.left{left:var(--notify-spacing);align-items:flex-start}.notify-container.right{right:var(--notify-spacing);align-items:flex-end}.notify-container.center{left:50%;transform:translateX(-50%);align-items:center}.notify-container.top{flex-direction:column;top:var(--notify-spacing)}.notify-container.top .notify.enter{transform:translateY(-10px)}.notify-container.top .notify.exit{transform:translateY(-10px)}.notify-container.bottom{flex-direction:column-reverse;bottom:var(--notify-spacing)}.notify-container.bottom .notify.enter{transform:translateY(10px)}.notify-container.bottom .notify.exit{transform:translateY(10px)}.notify-container .notify{position:relative;background-color:var(--notify-color-bg);color:var(--notify-color-text);box-shadow:0 4px 8px var(--notify-color-shadow);border-radius:var(--notify-border-radius);padding:var(--notify-padding);font-size:var(--notify-font-size);font-family:var(--notify-font-family);width:100%;pointer-events:auto;transition:var(--notify-transition);opacity:1}.notify-container .notify .avatar{width:2rem;height:2rem;border-radius:50%;object-fit:cover;float:left;margin-right:.5rem}.notify-container .notify .close{position:absolute;top:.5rem;right:.75rem;background:rgba(0,0,0,0);border:none;font-size:var(--notify-close-size);cursor:pointer;line-height:1;color:var(--notify-close-color);padding:0;margin:0}.notify-container .notify .close:hover{color:var(--notify-close-color-hover)}.notify-container .notify.clickable{cursor:pointer}.notify-container .notify.clickable:hover{background-color:var(--notify-color-bg-hover, rgba(0, 0, 0, 0.05))}.notify-container .notify.enter{opacity:0}.notify-container .notify.show{opacity:1;transform:translateY(0)}.notify-container .notify.exit{opacity:0}.notify-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.35);display:flex;justify-content:flex-end;align-items:flex-start;padding:1rem;z-index:var(--notif-center-z-index);transition:var(--notif-center-bg-transition)}.notify-overlay.hidden{background-color:rgba(0,0,0,0);pointer-events:none}.notify-overlay .notify-center{position:fixed;top:0;right:0;width:var(--notif-center-width);height:var(--notif-center-height);background-color:var(--notif-center-bg);backdrop-filter:blur(var(--notif-center-blur));box-shadow:-4px 0 12px var(--notif-center-shadow);padding-top:var(--notif-center-y-padding);padding-bottom:var(--notif-center-y-padding);padding-left:var(--notif-center-x-padding);padding-right:var(--notif-center-x-padding);display:flex;flex-direction:column;z-index:var(--notif-center-z-index);transform:translateX(100%);transition:var(--notif-center-transform)}.notify-overlay .notify-center.open{transform:translateX(0%)}.notify-overlay .notify-center .header{display:flex;justify-content:space-between;align-items:center}.notify-overlay .notify-center .options{display:flex}.notify-overlay .notify-center .options>button{background:none;border:none;font-size:var(--notif-close-size);color:var(--notif-close-color);cursor:pointer}.notify-overlay .notify-center .options>button>svg{align-items:center;display:flex}.notify-overlay .notify-center .options>button:hover{color:var(--notif-close-color-hover)}.notify-overlay .notify-center .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;scrollbar-width:thin;scrollbar-color:#999 rgba(0,0,0,0)}.notify-overlay .notify-center .list::-webkit-scrollbar{width:6px}.notify-overlay .notify-center .list::-webkit-scrollbar-thumb{background:#aaa;border-radius:3px}.notify-overlay .notify-center .item{display:flex;justify-content:space-between;align-items:flex-start;background-color:var(--notif-item-bg);color:var(--notif-item-text);border-radius:var(--notif-item-radius);padding:var(--notif-item-padding);box-shadow:0 2px 6px var(--notif-item-shadow);font-size:.95rem;transition:var(--notif-center-remove-transition);border-left-style:solid;border-left-color:var(--notif-border)}.notify-overlay .notify-center .item .avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;background-size:cover;background-position:center;margin-right:10px}.notify-overlay .notify-center .item.unread{background-color:var(--notif-item-unread-bg);border-left-color:var(--notif-unread-border)}.notify-overlay .notify-center .item.removing{opacity:0;transform:translateY(-10px);pointer-events:none !important}.notify-overlay .notify-center .item.clickable{cursor:pointer}.notify-overlay .notify-center .item.clickable:hover{background-color:var(--notif-hover, rgba(0, 0, 0, 0.05))}.notify-overlay .notify-center .item .content{flex-grow:1;display:flex;flex-direction:column}.notify-overlay .notify-center .item .title{font-weight:bold;margin-bottom:.25rem}.notify-overlay .notify-center .item .message{font-size:.95rem}.notify-overlay .notify-center .item .notify-close{background:none;border:none;font-size:1.25rem;line-height:1;color:var(--notif-item-close);cursor:pointer;padding:.25rem}.notify-overlay .notify-center .item .notify-close:hover{color:var(--notif-item-close-hover)}@media(max-width: 600px){.notify-center{border-radius:0;width:100vw;padding:0px !important}.notify-center .header{padding-top:var(--notif-center-y-padding)}.notify-center .header,.notify-center .list{padding-left:var(--notif-center-x-padding);padding-right:var(--notif-center-x-padding)}}.notify-bell{position:fixed;bottom:1.5rem;right:1.5rem;width:var(--notif-bell-size);height:var(--notif-bell-size);background-color:var(--notif-bell-bg);color:var(--notif-bell-color);border:none;border-radius:var(--notif-bell-radius);box-shadow:0 4px 8px var(--notif-bell-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:var(--notif-bell-z-index);font-size:1.4rem;transition:var(--notif-center-bg-transition)}.notify-bell:hover{background-color:var(--notif-bell-hover-bg)}.notify-bell .badge{position:absolute;top:0;right:0;transform:translate(25%, -25%);background-color:var(--notif-badge-bg);color:var(--notif-badge-color);border:var(--notif-badge-border);border-radius:999px;min-width:var(--notif-badge-size);height:var(--notif-badge-size);font-size:var(--notif-badge-font-size);font-weight:bold;display:flex;align-items:center;justify-content:center;padding:0 .3em;pointer-events:none}.notify-bell .badge[data-value="0"]{display:none}