/* ============================================================================ AMAC Suite — Notification Center widget v1.0.0 (shared, suite-wide) ---------------------------------------------------------------------------- Pairs with amac-notification-center-v1.js. Scoped to .amac-notif-* so it cannot collide with any app's styles. Navy suite palette (#022544), matching the Feedback + AI-chat widgets. Self-themes: light defaults + a [data-theme="dark"] override block (the suite sets data-theme on ), so it works in every app whether or not that app defines suite theme vars. Two surfaces share the inner markup (.amac-notif-head / -body / -app / etc.): • Home BANNER → #amac-home-notifications.amac-notif-banner (in-flow card) • App BELL → fixed bottom-right FAB above the Feedback + AI-chat stack, opening .amac-notif-panel. ========================================================================= */ :root { --amac-notif-navy: #022544; --amac-notif-accent: #1d6fb8; --amac-notif-card: #ffffff; --amac-notif-head-bg: #f4f7fa; --amac-notif-feature-bg: #f8fafc; --amac-notif-ink: #14242f; --amac-notif-muted: #5b6b78; --amac-notif-faint: #8194a3; --amac-notif-border: rgba(2, 37, 68, 0.12); --amac-notif-border-2: rgba(2, 37, 68, 0.08); --amac-notif-hover: rgba(2, 37, 68, 0.045); --amac-notif-chip-bg: rgba(2, 37, 68, 0.07); --amac-notif-info: #1d6fb8; --amac-notif-info-bg: #e6f1fb; --amac-notif-warn: #b06f12; --amac-notif-warn-bg: #fbeeda; --amac-notif-crit: #be2f1c; --amac-notif-crit-bg: #fcebe9; } [data-theme="dark"] { --amac-notif-navy: #0a3a63; --amac-notif-accent: #4a9be0; --amac-notif-card: #0e1c2a; --amac-notif-head-bg: #10233a; --amac-notif-feature-bg: #122334; --amac-notif-ink: #e6eef5; --amac-notif-muted: #9fb3c4; --amac-notif-faint: #7e93a4; --amac-notif-border: rgba(255, 255, 255, 0.12); --amac-notif-border-2: rgba(255, 255, 255, 0.07); --amac-notif-hover: rgba(255, 255, 255, 0.05); --amac-notif-chip-bg: rgba(255, 255, 255, 0.10); --amac-notif-info: #6fb2ec; --amac-notif-info-bg: rgba(29, 111, 184, 0.22); --amac-notif-warn: #e0a64b; --amac-notif-warn-bg: rgba(176, 111, 18, 0.24); --amac-notif-crit: #ef7a6c; --amac-notif-crit-bg: rgba(190, 47, 28, 0.26); } /* ---- shared inner shell ------------------------------------------------- */ .amac-notif-banner, .amac-notif-panel { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--amac-notif-ink); -webkit-font-smoothing: antialiased; } .amac-notif-banner[hidden], .amac-notif-panel[hidden], .amac-notif-bell-badge[hidden] { display: none !important; } .amac-notif-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--amac-notif-head-bg); border-bottom: 1px solid var(--amac-notif-border); } .amac-notif-head-title { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .amac-notif-bell-ico { font-size: 16px; } .amac-notif-summary { font-size: 12px; color: var(--amac-notif-info); background: var(--amac-notif-info-bg); padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .amac-notif-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .amac-notif-markall { border: 0; background: transparent; color: var(--amac-notif-accent); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .amac-notif-markall:hover { background: var(--amac-notif-hover); text-decoration: underline; } /* ---- app group ---------------------------------------------------------- */ .amac-notif-app { border-bottom: 1px solid var(--amac-notif-border-2); } .amac-notif-app:last-child { border-bottom: 0; } .amac-notif-app-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 0; background: transparent; cursor: pointer; color: var(--amac-notif-ink); text-align: left; } .amac-notif-app-head:hover { background: var(--amac-notif-hover); } .amac-notif-app-ico { font-size: 17px; width: 24px; text-align: center; flex: none; } .amac-notif-app-name { font-weight: 600; font-size: 14px; } .amac-notif-app-count { font-size: 12px; color: var(--amac-notif-muted); background: var(--amac-notif-chip-bg); padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center; } .amac-notif-app-critical .amac-notif-app-count { color: var(--amac-notif-crit); background: var(--amac-notif-crit-bg); } .amac-notif-chevron { margin-left: auto; color: var(--amac-notif-faint); font-size: 13px; } /* ---- feature + items ---------------------------------------------------- */ .amac-notif-features { padding: 0 0 6px; } .amac-notif-feature { padding: 2px 0 4px; } .amac-notif-feature-head { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 48px; } .amac-notif-feature-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--amac-notif-faint); } .amac-notif-feature-count { font-size: 11px; color: var(--amac-notif-faint); } .amac-notif-items { list-style: none; margin: 0; padding: 0; } .amac-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 12px 7px 48px; cursor: pointer; position: relative; } .amac-notif-item:hover { background: var(--amac-notif-hover); } .amac-notif-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--amac-notif-info); } .amac-notif-sev-warn .amac-notif-dot { background: var(--amac-notif-warn); } .amac-notif-sev-critical .amac-notif-dot { background: var(--amac-notif-crit); } .amac-notif-item-main { min-width: 0; flex: 1; } .amac-notif-item-title { font-size: 13px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .amac-notif-item-msg { font-size: 12px; color: var(--amac-notif-muted); line-height: 1.35; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .amac-notif-pill { font-size: 10.5px; font-weight: 600; color: var(--amac-notif-warn); background: var(--amac-notif-warn-bg); padding: 0 7px; border-radius: 5px; white-space: nowrap; } .amac-notif-sev-critical .amac-notif-pill { color: var(--amac-notif-crit); background: var(--amac-notif-crit-bg); } .amac-notif-item-time { font-size: 12px; color: var(--amac-notif-faint); flex: none; margin-top: 1px; } .amac-notif-dismiss { border: 0; background: transparent; color: var(--amac-notif-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex: none; opacity: 0; transition: opacity .12s ease; margin-top: -1px; } .amac-notif-item:hover .amac-notif-dismiss, .amac-notif-item:focus-within .amac-notif-dismiss { opacity: 1; } .amac-notif-dismiss:hover { color: var(--amac-notif-crit); } .amac-notif-more { list-style: none; padding: 5px 12px 5px 48px; font-size: 12px; color: var(--amac-notif-accent); cursor: pointer; } .amac-notif-more:hover { text-decoration: underline; } /* ---- empty state -------------------------------------------------------- */ .amac-notif-empty { padding: 26px 16px; text-align: center; color: var(--amac-notif-muted); font-size: 13px; } .amac-notif-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amac-notif-info-bg); color: var(--amac-notif-info); font-size: 17px; margin-bottom: 8px; } /* ---- HOME BANNER (in-flow card) ----------------------------------------- */ .amac-notif-banner { display: block; background: var(--amac-notif-card); border: 1px solid var(--amac-notif-border); border-radius: 14px; overflow: hidden; margin: 0 0 18px; box-shadow: 0 1px 2px rgba(2, 37, 68, 0.05); } /* ---- APP BELL (fixed FAB, above Feedback + AI-chat) --------------------- */ .amac-notif-bellwrap { } .amac-notif-bell { position: fixed; right: 18px; bottom: 112px; z-index: 2147481800; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--amac-notif-navy); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(2, 37, 68, 0.35); transition: transform .12s ease, background .12s ease; } .amac-notif-bell:hover { transform: translateY(-1px); background: var(--amac-notif-accent); } .amac-notif-bell:active { transform: translateY(0); } .amac-notif-bell:focus-visible { outline: 3px solid var(--amac-notif-accent); outline-offset: 2px; } .amac-notif-bell-glyph { font-size: 20px; line-height: 1; } .amac-notif-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--amac-notif-crit); color: #fff; font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--amac-notif-navy); box-sizing: border-box; } .amac-notif-panel { position: fixed; right: 18px; bottom: 168px; z-index: 2147481850; width: 380px; max-width: calc(100vw - 24px); max-height: min(70vh, 580px); overflow-y: auto; background: var(--amac-notif-card); border: 1px solid var(--amac-notif-border); border-radius: 14px; box-shadow: 0 14px 40px rgba(2, 37, 68, 0.28); } .amac-notif-panel .amac-notif-head { position: sticky; top: 0; z-index: 1; } /* ---- settings view (per-user category toggles) -------------------------- */ .amac-notif-gear, .amac-notif-back { border: 0; background: transparent; color: var(--amac-notif-muted); font-size: 16px; cursor: pointer; padding: 2px 7px; border-radius: 6px; line-height: 1; } .amac-notif-gear:hover, .amac-notif-back:hover { background: var(--amac-notif-hover); color: var(--amac-notif-ink); } .amac-notif-back { font-size: 22px; margin: -2px 4px -2px -2px; } .amac-notif-settings-note { padding: 10px 14px; font-size: 12.5px; line-height: 1.4; color: var(--amac-notif-muted); border-bottom: 1px solid var(--amac-notif-border-2); } .amac-notif-settings-note strong { color: var(--amac-notif-ink); } .amac-notif-settings-msg { padding: 8px 14px; font-size: 12.5px; color: var(--amac-notif-warn); background: var(--amac-notif-warn-bg); } .amac-notif-cat-apphead { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; } .amac-notif-cat-apphead .amac-notif-app-ico { font-size: 17px; width: 24px; text-align: center; flex: none; } .amac-notif-cat-apphead .amac-notif-app-name { font-weight: 600; font-size: 14px; } .amac-notif-cat { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 48px; } .amac-notif-cat:hover { background: var(--amac-notif-hover); } .amac-notif-cat-label { font-size: 13px; line-height: 1.3; flex: 1; min-width: 0; } .amac-notif-switch { position: relative; width: 38px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: var(--amac-notif-border); transition: background .15s ease; } .amac-notif-switch.on { background: var(--amac-notif-accent); } .amac-notif-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform .15s ease; } .amac-notif-switch.on .amac-notif-switch-knob { transform: translateX(16px); } .amac-notif-switch:focus-visible { outline: 2px solid var(--amac-notif-accent); outline-offset: 2px; } @media (max-width: 600px) { .amac-notif-bell { right: 12px; bottom: 120px; } .amac-notif-panel { right: 12px; left: 12px; bottom: 176px; width: auto; max-width: none; max-height: 72vh; } .amac-notif-banner { border-radius: 12px; } } @media print { .amac-notif-bellwrap, .amac-notif-banner { display: none !important; } }