/** * video-jobs.css — the "jobs tray" chip (Video Studio UX Round 2, §1, 2026-07-09). * Component: src/public/js/video-jobs.js (window.CBVideoJobs). * * Design source of truth: css/outreach-dashboard.css, same palette video- * tools.css already copied (Alex 2026-07-09: "that styling is spot on"). The * chip mounts to from ANY app.html page — most of which sit outside * outreach-dashboard.css's `#page-outreach-dashboard` token scope — so, like * video-tools.css, this file uses EXPLICIT colours lifted from that same * palette rather than `var(--...)` tokens that would resolve to nothing here. * * Fixed bottom-right, content-sized (never full width/height) so it can * never trap a click on the rest of the page — no overlay, no backdrop. * z-index sits below the Polish tray's modal overlay (video-tools.css * .cbvt-overlay is 4000) so an open modal always wins. */ .cbvj-tray { position: fixed; right: 20px; bottom: 20px; z-index: 3500; max-width: min(340px, calc(100vw - 32px)); font-family: inherit; } .cbvj-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); } .cbvj-header, .cbvj-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; } .cbvj-header.cbvj-clickable, .cbvj-row.cbvj-clickable { cursor: pointer; } .cbvj-header.cbvj-clickable:hover, .cbvj-row.cbvj-clickable:hover { background: #faf9ff; } .cbvj-ico-wrap { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .cbvj-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #ece9f7; border-top-color: #6a4cf1; animation: cbvj-spin 0.8s linear infinite; } @keyframes cbvj-spin { to { transform: rotate(360deg); } } .cbvj-ico { font-size: 14px; font-weight: 700; line-height: 1; } .cbvj-ico-done { color: #1c8e5a; } .cbvj-ico-fail { color: #c0423a; } .cbvj-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cbvj-primary { font-size: 12.5px; font-weight: 600; color: #15172b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbvj-secondary { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cbvj-stale { color: #b15dde; font-weight: 600; } .cbvj-dismiss { flex: none; border: none; background: transparent; color: #9ca3af; font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; font-family: inherit; } .cbvj-dismiss:hover { color: #374151; } .cbvj-chevron { flex: none; color: #9ca3af; font-size: 10px; transition: transform 0.15s ease; } .cbvj-chevron.open { transform: rotate(180deg); } .cbvj-list { border-top: 1px solid #f0f0f3; max-height: 260px; overflow-y: auto; } .cbvj-list .cbvj-row { border-bottom: 1px solid #f4f4f7; } .cbvj-list .cbvj-row:last-child { border-bottom: none; } @media (max-width: 480px) { .cbvj-tray { right: 10px; left: 10px; bottom: 10px; max-width: none; } }