/* CHILI OS notifications — toast stack (top-right of the OS shell).
   Layers over workspace.css tokens. */
.ws-toasts{position:fixed;top:64px;right:18px;z-index:var(--ws-z-toast,300);display:flex;flex-direction:column;gap:10px;width:320px;max-width:calc(100vw - 36px);pointer-events:none}
.ws-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 12px;background:var(--ws-surface);border:1px solid var(--ws-border-strong);border-left:3px solid var(--ws-text-3);border-radius:var(--ws-r-md);box-shadow:var(--ws-shadow-lg);animation:wsToastIn .2s var(--ws-ease,ease)}
.ws-toast.ok{border-left-color:var(--ws-up)}
.ws-toast.bad{border-left-color:var(--ws-down)}
.ws-toast.warn{border-left-color:var(--ws-gold)}
.ws-toast.info{border-left-color:var(--ws-accent)}
.ws-toast.out{animation:wsToastOut .2s var(--ws-ease,ease) forwards}
@keyframes wsToastIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes wsToastOut{to{opacity:0;transform:translateX(14px)}}
.ws-toast .wt-ic{font-size:15px;line-height:1.3;flex-shrink:0}
.ws-toast .wt-body{flex:1;min-width:0}
.ws-toast .wt-title{font-size:var(--ws-fs-13);font-weight:var(--ws-fw-semi);color:var(--ws-text)}
.ws-toast .wt-sub{font-size:var(--ws-fs-12);color:var(--ws-text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-toast .wt-x{border:none;background:transparent;color:var(--ws-text-3);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;flex-shrink:0}
.ws-toast .wt-x:hover{color:var(--ws-text)}
@media (prefers-reduced-motion:reduce){.ws-toast,.ws-toast.out{animation:none}}

/* ── Notification center (topbar bell + panel) ── */
.ws-notif{position:relative}
.ws-notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ws-down);color:#fff;font-size:10px;font-weight:var(--ws-fw-bold);line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--ws-surface)}
.ws-notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 36px);max-height:60vh;overflow-y:auto;background:var(--ws-surface);border:1px solid var(--ws-border-strong);border-radius:var(--ws-r-lg);box-shadow:var(--ws-shadow-lg);padding:6px;z-index:var(--ws-z-toast,300);display:none}
.ws-notif.open .ws-notif-panel{display:block;animation:wsToastIn .12s var(--ws-ease,ease)}
.ws-notif-row{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:var(--ws-r-md)}
.ws-notif-row:hover{background:var(--ws-surface-2)}
.ws-notif-row .nr-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--ws-text-3)}
.ws-notif-row.ok .nr-dot{background:var(--ws-up)}
.ws-notif-row.bad .nr-dot{background:var(--ws-down)}
.ws-notif-row.warn .nr-dot{background:var(--ws-gold)}
.ws-notif-row.info .nr-dot{background:var(--ws-accent)}
.ws-notif-row .nr-body{flex:1;min-width:0}
.ws-notif-row .nr-title{font-size:var(--ws-fs-13);font-weight:var(--ws-fw-semi);color:var(--ws-text)}
.ws-notif-row .nr-sub{font-size:var(--ws-fs-12);color:var(--ws-text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-notif-row .nr-time{font-size:var(--ws-fs-11);color:var(--ws-text-3);flex-shrink:0;margin-top:2px}
.ws-notif-empty{padding:18px 9px;text-align:center;font-size:var(--ws-fs-12);color:var(--ws-text-3)}
.ws-notif-clear{width:100%;margin-top:4px;border:none;border-top:1px solid var(--ws-border);background:transparent;color:var(--ws-text-3);font-size:var(--ws-fs-12);font-weight:var(--ws-fw-med);padding:8px;cursor:pointer;border-radius:0 0 var(--ws-r-md) var(--ws-r-md)}
.ws-notif-clear:hover{color:var(--ws-text);background:var(--ws-surface-2)}
.ws-notif-alerts{display:flex;align-items:center;gap:8px;padding:9px;margin-top:2px;border-top:1px solid var(--ws-border);font-size:var(--ws-fs-12);color:var(--ws-text-2);cursor:pointer}
.ws-notif-alerts input{accent-color:var(--ws-accent);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.ws-notif-alerts .na-txt{font-weight:var(--ws-fw-med);color:var(--ws-text)}
.ws-notif-alerts .na-sub{margin-left:auto;color:var(--ws-text-3);font-size:var(--ws-fs-11)}
.ws-notif-prefs{border-top:1px solid var(--ws-border);margin-top:2px}
.ws-notif-prefs .ws-notif-alerts{border-top:none;padding-top:6px;padding-bottom:6px}
.ws-notif-prefs-note{padding:2px 9px 8px;font-size:var(--ws-fs-11);color:var(--ws-text-3);line-height:1.4}
