/**
 * 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 <body> 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 > #cb-upload-chip { order: 0; }   /* a file actually moving now     */
#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.
   `!important` because two of these carry INLINE positioning for the case
   where there is no stack to join, and an inline style outranks a plain rule
   — which is exactly how the nudge chip came to sit on top of the upload
   chip while both were nominally in this container. */
#cb-corner > .cblj-tray,
#cb-corner > .cbvj-tray,
#cb-corner > #cbat-root,
#cb-corner > #cb-upload-chip {
  position: static !important;
  right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
  max-width: 100% !important;
  z-index: auto !important;
}

/* ≤1024px the Help launcher (support-widget.js) takes this exact corner, so
   the WHOLE stack steps left of it — one rule for the container, rather than
   each child having its own idea of where the Help button is (which is how
   one of them ended up floating free of the stack entirely). */
@media (max-width: 1024px) {
  #cb-corner { right: 122px; max-width: calc(100vw - 138px); }
}

@media (max-width: 640px) {
  #cb-corner { right: 122px; left: 10px; bottom: 10px; max-width: none; align-items: stretch; }
}

/* ── MOVING IT OUT OF THE WAY ───────────────────────────────────────────────
   Alex, 2026-09-01, on his phone with an upload sitting over the video
   trimmer's controls: "You need to be able to move the toast for the video
   progress anywhere on the screen so I could just tap it and reposition it."

   The dock moves as one, because everything in it stacks by the rules above
   and a per-chip position would rebuild the overlap this container exists to
   prevent. app-shell.js owns the behaviour; this owns how it looks and the
   one thing that makes a thumb-drag work at all — touch-action: none, without
   which the browser claims the gesture for scrolling and the dock never
   moves. */
#cb-corner { touch-action: none; }

/* Once it has been put somewhere, it stops being a corner: no stretching to
   the full width of a phone, and no media query reaching in to reset the side
   it was moved away from. Inline left/top carry the position itself. */
#cb-corner.cb-corner-free {
  right: auto;
  bottom: auto;
  width: max-content;
  max-width: min(340px, calc(100vw - 20px));
  align-items: flex-end;
}
#cb-corner.cb-corner-dragging { cursor: grabbing; user-select: none; }

/* The handle. Ranked above every chip (column-reverse: highest order sits at
   the top), so it is the same grab point wherever the stack has grown to. */
#cb-corner-grip {
  order: 99;
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(21, 23, 43, 0.82);
  color: #fff;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  cursor: grab;
  box-shadow: 0 6px 18px rgba(13, 8, 25, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#cb-corner-grip:hover { background: rgba(21, 23, 43, 0.95); }
#cb-corner-grip:focus-visible { outline: 2px solid #9d86ff; outline-offset: 2px; }
.cb-corner-grip-t { font-size: 11.5px; opacity: 0.85; }

@media (max-width: 640px) {
  /* Bigger where it is tapped rather than clicked. */
  #cb-corner-grip { min-height: 40px; padding: 8px 15px; font-size: 13px; }
}