/** * 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. */ .cblj-tray { position: fixed; right: 20px; bottom: 20px; z-index: 3500; 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; } }