@font-face {font-family: 'NotifUnicode';src: url(unicode-normal.ttf) format('truetype');font-style: normal;font-weight: 400;font-display: swap;}@font-face {font-family: 'NotifUnicode';src: url(unicode-bold.ttf) format('truetype');font-style: normal;font-weight: 700;font-display: swap;}:root {--notif-primary: #007aff;--notif-bg: #ffffff;--notif-panel: #ffffff;--notif-border: #d9e0ea;--notif-text: #162235;--notif-subtext: #5b6472;--notif-success: #34c759;--notif-danger: #ff3b30;--notif-warn: #f59e0b;--notif-shadow: 0 16px 34px rgba(16, 24, 40, 0.16);--notif-item-hover: #f5f8fc;--notif-item-unread: #eef6ff;}:root[data-notif-theme='dark'] {--notif-primary: #3b82f6;--notif-bg: #0f1115;--notif-panel: #171a21;--notif-border: #2a2f3a;--notif-text: #e8ebf2;--notif-subtext: #98a2b3;--notif-success: #34c759;--notif-danger: #ff3b30;--notif-warn: #fbbf24;--notif-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);--notif-item-hover: rgba(255, 255, 255, 0.04);--notif-item-unread: rgba(59, 130, 246, 0.14);}#notif-root {position: fixed;right: 18px;bottom: 18px;z-index: 9999;font-family: 'NotifUnicode', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;}.notif-fab {width: 54px;height: 54px;border-radius: 50%;background: var(--notif-primary);color: #fff;display: flex;align-items: center;justify-content: center;box-shadow: var(--notif-shadow);cursor: pointer;position: relative;transition:
transform 0.15s ease,
box-shadow 0.15s ease;}.notif-fab:hover {transform: translateY(-2px);box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4);}.notif-count {position: absolute;top: -6px;right: -4px;min-width: 20px;height: 20px;padding: 0 6px;border-radius: 999px;background: #ff3b30;color: #fff;font-size: 12px;font-weight: 700;display: flex;align-items: center;justify-content: center;}.notif-panel {position: absolute;right: 0;bottom: 64px;width: 340px;max-height: 440px;background: var(--notif-panel);color: var(--notif-text);border: 1px solid var(--notif-border);border-radius: 16px;box-shadow: var(--notif-shadow);opacity: 0;transform: translateY(8px) scale(0.985);visibility: hidden;pointer-events: none;transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0s linear 0.22s;overflow: hidden;}.notif-panel.open {opacity: 1;transform: translateY(0) scale(1);visibility: visible;pointer-events: auto;transition-delay: 0s;}.notif-panel-header {padding: 14px 16px;font-weight: 600;border-bottom: 1px solid var(--notif-border);display: flex;justify-content: space-between;align-items: center;}.notif-actions {display: flex;align-items: center;gap: 8px;}.notif-panel-header button {background: transparent;border: none;color: var(--notif-subtext);cursor: pointer;font-size: 13px;line-height: 1;transition:
color 0.18s ease,
transform 0.18s ease;}.notif-panel-header button:hover {color: var(--notif-primary);transform: translateY(-1px);}.notif-list {max-height: 380px;overflow-y: auto;}.notif-item {padding: 12px 14px;border-bottom: 1px solid var(--notif-border);cursor: pointer;border-left: 3px solid transparent;transition:
background-color 0.2s ease,
opacity 0.2s ease,
transform 0.24s ease;will-change: transform, opacity;}.notif-item:last-child {border-bottom: none;}.notif-item:hover {background: var(--notif-item-hover);transform: translateY(-1px);}.notif-item.unread {background: var(--notif-item-unread);}.notif-item.read {opacity: 0.95;}.notif-item.escalated,
.notif-item.lvl-error {border-left-color: var(--notif-danger);}.notif-item.lvl-warn {border-left-color: var(--notif-warn);}.notif-item.lvl-success {border-left-color: var(--notif-success);}.notif-item-head {display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;}.notif-kind {font-size: 11px;color: var(--notif-subtext);}.notif-item.link-type .notif-kind {color: var(--notif-primary);}.notif-item.ack-type .notif-kind {color: var(--notif-warn);}.notif-item-actions {display: flex;align-items: center;gap: 6px;}.notif-inline-btn {background: transparent;color: var(--notif-subtext);border: 1px solid var(--notif-border);border-radius: 8px;font-size: 11px;padding: 2px 6px;cursor: pointer;transition:
color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease;}.notif-inline-btn:hover {color: var(--notif-primary);border-color: var(--notif-primary);transform: translateY(-1px);}.notif-item.incoming {animation: notif-item-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);}@keyframes notif-item-in {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}.notif-title-wrap {display: flex;align-items: center;gap: 8px;}.notif-unread-dot,
.notif-read-dot {width: 8px;height: 8px;border-radius: 999px;flex: 0 0 auto;}.notif-unread-dot {background: var(--notif-primary);}.notif-read-dot {background: var(--notif-border);}.notif-title {font-size: 14px;font-weight: 600;}.notif-body {font-size: 13px;color: var(--notif-subtext);margin-top: 4px;}.notif-time {font-size: 11px;color: var(--notif-subtext);}.notif-time-row {margin-top: 6px;display: flex;justify-content: space-between;align-items: center;gap: 10px;}.notif-state-label {font-size: 11px;color: var(--notif-subtext);}.notif-panel-footer {border-top: 1px solid var(--notif-border);padding: 8px 10px;display: flex;justify-content: flex-end;}.notif-top-btn {display: none;font-size: 12px;border: 1px solid var(--notif-border);background: transparent;color: var(--notif-subtext);border-radius: 10px;padding: 4px 8px;cursor: pointer;}.notif-top-btn.show {display: inline-flex;}.notif-empty {padding: 24px 12px;text-align: center;color: var(--notif-subtext);font-size: 13px;}.notif-toast-stack {position: fixed;right: 18px;bottom: 90px;display: flex;flex-direction: column;gap: 10px;z-index: 9998;}.notif-toast {width: 320px;background: var(--notif-bg);color: var(--notif-text);border: 1px solid var(--notif-border);border-radius: 14px;padding: 12px 14px;box-shadow: var(--notif-shadow);display: flex;gap: 10px;transform: translateY(8px);opacity: 0;animation: toast-in 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;cursor: pointer;}.notif-toast.success {border-color: rgba(52, 199, 89, 0.4);}.notif-toast.error {border-color: rgba(255, 59, 48, 0.4);}@keyframes toast-in {to {transform: translateY(0);opacity: 1;}}.notif-toast .dot {width: 8px;height: 8px;border-radius: 999px;background: var(--notif-primary);margin-top: 6px;}.notif-toast.success .dot {background: var(--notif-success);}.notif-toast.error .dot {background: var(--notif-danger);}.notif-toast-summary {border-style: dashed;border-color: var(--notif-primary);}