/** * launch-jobs.css — the background website-build toast (Alex 2026-07-13). * Component: src/public/js/launch-jobs.js (window.CBLaunchJobs). * * Deliberately the SAME look as the Video Studio jobs tray (css/video-jobs.css) * — Alex: "use that same UI, use that same design". Kept as its own cblj-* * class set (not shared with cbvj-*) so it's fully isolated from the live video * chip: this touches the core website-builder flow, and a shared stylesheet * edit could regress video. Same explicit palette (lifted from * outreach-dashboard.css) because the chip mounts to from Launch Studio * pages that sit outside any token scope. * * Fixed bottom-right, content-sized so it never traps a click on the rest of * the page — no overlay, no backdrop. z-index below any modal overlay. */ /* ⚠️ THE SAME CORNER AS video-jobs.css's .cbvj-tray, WHICH IS AT THE SAME COORDINATES AND USED TO BE AT THE SAME z-index (3500). Two fixed elements with identical position and identical stacking order are ordered by DOM insertion — i.e. by which script happened to append first, which is not a decision anybody made. 3501 makes it a decision: a build/upload the coach is watching sits over a video that is processing on its own. They still OVERLAP rather than stack, because neither knows the other's height. Stacking needs one owner for the corner — see item T2 in docs/projects/courses/WORKING-LIST.md. This is the deterministic floor under that, not a substitute for it. */ .cblj-tray { position: fixed; right: 20px; bottom: 20px; z-index: 3501; max-width: min(340px, calc(100vw - 32px)); font-family: inherit; } .cblj-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 32px rgba(13, 8, 25, 0.18), 0 2px 8px rgba(13, 8, 25, 0.08); } .cblj-header, .cblj-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; } .cblj-header.cblj-clickable, .cblj-row.cblj-clickable { cursor: pointer; } .cblj-header.cblj-clickable:hover, .cblj-row.cblj-clickable:hover { background: #faf9ff; } .cblj-ico-wrap { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .cblj-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #ece9f7; border-top-color: #6a4cf1; animation: cblj-spin 0.8s linear infinite; } @keyframes cblj-spin { to { transform: rotate(360deg); } } .cblj-ico { font-size: 14px; font-weight: 700; line-height: 1; } .cblj-ico-done { color: #1c8e5a; } .cblj-ico-fail { color: #c0423a; } .cblj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cblj-primary { font-size: 12.5px; font-weight: 600; color: #15172b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cblj-secondary { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cblj-stale { color: #b15dde; font-weight: 600; } .cblj-retry-hint { color: #b15dde; font-weight: 600; } .cblj-dismiss { flex: none; border: none; background: transparent; color: #9ca3af; font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; font-family: inherit; } .cblj-dismiss:hover { color: #374151; } .cblj-chevron { flex: none; color: #9ca3af; font-size: 10px; transition: transform 0.15s ease; } .cblj-chevron.open { transform: rotate(180deg); } .cblj-list { border-top: 1px solid #f0f0f3; max-height: 260px; overflow-y: auto; } .cblj-list .cblj-row { border-bottom: 1px solid #f4f4f7; } .cblj-list .cblj-row:last-child { border-bottom: none; } @media (max-width: 480px) { .cblj-tray { right: 10px; left: 10px; bottom: 10px; max-width: none; } } /* ══════════════════════════════════════════════════════════════════════ ONE OWNER FOR THE BOTTOM-RIGHT CORNER ⚠️ Alex, 2026-08-03, with a screenshot: "Still toast is getting covered up by older toast. Maybe it's worth just dealing with the website toast because that's the main one that's being used... so it works well with the [course] toast as they're the two main toasts that have similar sort of use cases." THREE things were fixed to the same corner and none of them knew about the others: .cblj-tray right:20 bottom:20 z 3501 running work (website + course) .cbvj-tray right:20 bottom:20 z 3500 video jobs #cbat-root right:16 bottom:16 z 9997 standing nudges z-index only decides WHO WINS an overlap. It cannot make two boxes sit side by side, because neither knows the other's height — so the nudge at 9997 sat on top of live work at 3501, which is exactly the wrong way round and exactly what the screenshot shows. This is the stack they all mount into. It is a flex COLUMN-REVERSE, so DOM order maps to distance from the corner and `order` gives the rank outright: work nearest the corner (where the eye goes), nudges above it. Nothing overlaps because a flex column cannot overlap itself. Deliberately NOT the full CBSurface rework (T2's original scope, ~727 showToast call sites). Alex: "I don't [want] some big rework." Three elements move into a container; none of them changes what it says or when. `pointer-events` is off on the container and back on for the children, so the empty column never eats a click on the page beneath it. */ #cb-corner { position: fixed; right: 20px; bottom: 20px; z-index: 9997; /* the highest of the three, so the stack as a whole keeps the precedence the nudge chip had */ display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: none; max-width: min(340px, calc(100vw - 32px)); } #cb-corner > * { pointer-events: auto; } /* Rank, lowest number = nearest the corner (column-reverse). Work outranks a suggestion about work: a coach watching a build must never have it hidden by a chip telling them to go and do something else. */ #cb-corner > .cblj-tray { order: 1; } /* running website / course build */ #cb-corner > .cbvj-tray { order: 2; } /* running video jobs */ #cb-corner > #cbat-root { order: 3; } /* standing nudges */ /* Inside the stack these are ordinary blocks — the container owns the corner now, so their own fixed positioning would fight it. */ #cb-corner > .cblj-tray, #cb-corner > .cbvj-tray, #cb-corner > #cbat-root { position: static; right: auto; bottom: auto; left: auto; top: auto; max-width: 100%; } @media (max-width: 640px) { #cb-corner { right: 10px; left: 10px; bottom: 10px; max-width: none; align-items: stretch; } }