/* notification-center.css — the top-bar bell, its recent list, and the arrival popups. * * Shell-level, not Chaos: the bell and its popups span every app, so they cannot live in an app's * stylesheet. The Notifications PAGE is a Chaos surface and its styles stay in apps/chaos.css. * * These lived in core.css, which index.html does not link — it is loaded only by controls-lab. So * every rule here was inert: the badge fell back to inline text beside the bell, and the recent list * lost its `position: fixed` and landed in normal document flow at the end of , which is what * put a scrollbar on the page instead of a panel under the bell. */ /* ── Notification Center: the top-bar bell, its list, and arrival popups ────────────────────── Shell-level rather than app-level: the bell lives in the top bar and the popups appear over whatever app is open, so neither can be scoped to one app's stylesheet. */ .nc-bell { position: relative; } /* A count, drawn as a count: a filled circle over the bell rather than a number beside it. The ring in the button's own colour is what separates it from the glyph underneath — without it the badge and the bell read as one smudge at this size. */ .nc-bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; border: 2px solid var(--bg-primary); background: var(--accent-magenta, var(--accent)); color: #fff; font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; } /* Deliberately the same surface as `.account-menu` in shell.css — same background, radius, shadow and padding. They sit inches apart in the same bar, and two popups from one header that do not match read as two different products. */ .nc-recent { position: fixed; top: var(--header-popup-top); z-index: 10002; min-width: 280px; max-width: 360px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); overflow: hidden; } /* Matches `.account-name` in shell.css — 13px, 600, primary — because the two popups sit inches apart and a muted 11px label next to a 13px one reads as a lesser panel rather than a sibling. Centred: it names the panel rather than labelling a column, and the rows below it are the only things with a left edge worth aligning to. */ .nc-recent-heading { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: center; } .nc-recent-empty { padding: 14px 12px; font-size: 12px; color: var(--text-muted); } /* The app mark is load-bearing: with no grouping, it is the only thing saying where a row came from. */ .nc-recent-kind { grid-area: kind; display: flex; align-items: center; color: var(--text-secondary); } /* Dimmer than the kind, because it answers a question the reader is not usually asking. */ .nc-recent-app { grid-area: app; display: flex; align-items: center; color: var(--text-muted); } /* App manifests draw at 22px for the rail. Overriding the attributes here rather than editing the markup keeps one copy of each app's icon. */ .nc-recent-app svg { width: 14px; height: 14px; } .nc-recent-row { display: grid; grid-template-areas: "kind sentence app" "kind title app"; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; width: 100%; padding: 8px 12px; /* No rule between rows: hover is what separates them, and a line under every one turned five notifications into a table. */ border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; } .nc-recent-row { border-radius: 6px; } /* Unread: the app mark on the right turns blue. The page uses a bar and a tint; this surface uses the mark it already draws, in the SAME blue, because the two are different shapes of list — a bar reads as an edge marker on a full-width table and crowds a 12px gutter in a narrow popover. The shared token is what keeps them one signal: the shape differs, the colour cannot drift. Nothing is added to the row, so nothing moves when a row is read — only the mark's colour changes, and it is already there on every row. The mark now says two things at once: which app, and unread. That is affordable because it is the only coloured thing in the row, so a change reads as a state rather than as decoration — and because colour is not carrying it alone. The bold sentence below is the redundant cue, which is what a reader who cannot separate blue from grey is left with. No tint, deliberately. A tinted row plus a hover tint gave three background states to tell apart — read, unread, hovered — and the gap between the first two was smaller than the one hover made, so hovering a READ row looked more unread than an unread row did. Hover therefore owns the background outright and says one thing: where the cursor is. */ /* The bar lives in the popup's own 6px padding, NOT on the row's edge. `.nc-recent` insets every row by 6px, and that gutter was empty — so the bar goes where the page's border-left would read from, without the row having to give up any of its 12px of text padding. Hence `left: -6px`: the row is the positioning context, so -6px lands flush against the popup's inner edge. Full height rather than a fixed one, so it tracks a two-line row. A 2px radius because this bar floats inside a 12px-radius popover, where the page's hard corners would read as a rendering artefact rather than a marker. */ .nc-recent-row { position: relative; } .nc-recent-unread::before { content: ""; position: absolute; left: -6px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--notif-unread-bar); } .nc-recent-unread .nc-recent-app { color: var(--notif-unread-bar); } .nc-recent-unread .nc-recent-sentence { font-weight: 600; } .nc-recent-row:hover { background: var(--bg-hover); } .nc-recent-sentence { grid-area: sentence; font-size: 12px; } .nc-recent-title { grid-area: title; font-size: 11px; color: var(--text-muted); } /* The footer's two bulk actions, pushed to opposite edges: Mark all read leads because it is the gentler action and the one reached for repeatedly, Clear all sits at the far end so neither is hit by aiming at the other. The rule that used to live on the button — a full-width centred link with a top border — moves here, because the border belongs to the footer rather than to either button. */ .nc-recent-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border); } .nc-recent-all { padding: 8px 12px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 11px; text-align: center; cursor: pointer; } .nc-recent-all:hover:not(:disabled) { background: var(--bg-hover); } /* Off reads as off — the same half-opacity, not-allowed pattern the app page's bulk actions use, and for the same reason: an accent-coloured control under a pointer cursor that refuses to act is worse than one that is plainly unavailable. The hover is gated too, or the row still lights up under the cursor while disabled and undoes the whole signal. */ .nc-recent-all:disabled { opacity: 0.5; cursor: not-allowed; } /* The popup stack sits in the top-right corner, over everything, and does not take pointer events except on the popups themselves — an empty corner must stay clickable. */ .nc-popup-stack { position: fixed; top: 56px; right: 16px; z-index: 10003; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .nc-popup { position: relative; pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; width: 300px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--bg-panel); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); cursor: pointer; animation: nc-popup-in 140ms ease-out; } @keyframes nc-popup-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .nc-popup:hover { background: var(--bg-hover); } .nc-popup-body { flex: 1; min-width: 0; } .nc-popup-sentence { font-size: 12px; color: var(--text-primary); } .nc-popup-title { margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nc-popup-close { flex-shrink: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; } .nc-popup-close:hover { color: var(--text-primary); } /* ══════════════════════════════════════════════════ The Notification Center page (AB#13311) ══════════════════════════════════════════════════ Moved out of apps/chaos.css, where these sat while the page was Chaos's. The page is a shared component now — Chaos and Chat both mount it — and an app stylesheet loads only with its own app, so a page styled from chaos.css renders unstyled everywhere else. Here rather than in a third file because this IS the notification-center control's stylesheet: it already carries the bell and its popups, and index.html already links it for every app. Chaos's per-trigger settings dialog stayed behind in apps/chaos.css, with the dialog chrome it depends on — the same split the JS made when the component moved (arc D-3). */ /* The page wears the house content-page look (AB#13390), so Notifications sits beside Prompts, Files, Scheduled and Assistants rather than looking like a panel that wandered in. The values below are COPIED from controls/content-page.css and content-page-tabs.css rather than shared with them: this file may not restyle `.lp-content-*`, because those classes are the other pages and a change here must not reach them. The cost is two places to edit if the house style moves; the alternative was giving the notification surfaces a stake in every content page. Scoped to the page classes only. `.nc-recent*` (the bell popover), `.nc-popup*` (the toasts) and `.nc-settings*` (the trigger dialog) share this file and NOT these rules, so none of them move. */ .nc-panel { display: flex; flex-direction: column; height: 100%; /* --bg-primary, as every content page — not the --bg-panel a docked panel would use. */ background: var(--bg-primary); /* The page's own margin. Wider than content-page's 32px rather than narrower: a notification row is one line of text across a full-width pane, and without a real gutter the sentence and its timestamp end up at opposite edges of the screen with a stretch of nothing between them. The rows have their own truncation, so the width they lose here costs them nothing. */ padding: 24px 100px 0; box-sizing: border-box; } /* The title row: the page's name, and the things that act on the whole page. Both were absent — the name because a title was once cut for vertical space, the actions because they lived at the end of the tab strip. Restored and gathered here so the shape matches the sibling pages, where the name sits left and the actions sit right on one line above the tabs (AB#13390). */ .nc-head-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .nc-title { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.01em; } /* The bulk actions, now in the title row rather than the tab strip. `margin-left: auto` is gone with the strip that needed it — the title row spaces them itself. */ .nc-actions { display: flex; align-items: center; gap: 8px; } /* Buttons, not accent-coloured text — and the SOLID variant, which is what the sibling pages actually put in this position ("+ New prompt" on Prompts). The bordered variant was the first cut here, on the reasoning that three solid buttons would each claim to be the primary one; on screen beside Prompts it simply read as a different page, which is the whole thing this is fixing. It inverts with the theme — near-white on dark, near-black on light — because it is painted in --text-primary on --bg-panel rather than in a fixed colour. */ .nc-mark-all { padding: 8px 16px; border-radius: var(--radius, 8px); border: 1px solid var(--text-primary); background: var(--text-primary); color: var(--bg-panel); font-size: 13px; font-weight: 600; line-height: 1; font-family: inherit; cursor: pointer; transition: filter 120ms ease, opacity 120ms ease; } /* Hover belongs to controls that would do something. This applied unconditionally, so an off button still reacted under the pointer. Now a button, it lifts the way the sibling pages' buttons do rather than underlining the way a link does. */ .nc-mark-all:hover:not(:disabled) { filter: brightness(1.12); } .nc-mark-all:active:not(:disabled) { filter: brightness(0.95); } /* Off reads as off. There was no disabled rule at all, so Mark all as read and Clear all kept the accent colour and the pointer cursor while refusing to do anything — a control that looks live and is not, which is worse than one that is simply absent. The house pattern, the same as every `.lani-btn-*` and `.btn-*`: half opacity, not-allowed cursor. Left as a