/* LiveLoop jobs: the queue pop-up and the task manager (public/liveloop-jobs.js; owner, 2026-10-21). */
/* White with black text in every theme (owner, 2026-10-24: "you cant read anytign, white backgorund blakc
   text"). The dark version stayed dark under the site's light theme (html.light-mode, not html.light), where
   the theme's forced text and field colours made it unreadable. */
:root {
  --lljobs-bg: #ffffff;
  --lljobs-line: rgba(20, 16, 40, .16);
  --lljobs-ink: #111111;
  --lljobs-dim: #3d3950;
  --lljobs-accent: #6d28d9;
  --lljobs-field: #ffffff;
  --lljobs-soft: #f5f4f9;
  --lljobs-ok: #047857;
  --lljobs-bad: #b91c1c;
  --lljobs-wait: #5b3fa8;
}

.lljobs-backdrop {
  position: fixed; inset: 0; z-index: 19700; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 4, 10, .55);
}
.lljobs-dialog {
  display: flex; flex-direction: column; gap: 10px; width: min(860px, 100%); max-height: min(86dvh, 900px);
  padding: 16px; border: 1px solid var(--lljobs-line); border-radius: 16px; background: var(--lljobs-bg);
  color: var(--lljobs-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); font: 500 13px/1.45 Inter, system-ui, sans-serif;
  box-sizing: border-box;
}
.lljobs-dialog * { box-sizing: border-box; }
/* The site's control rule (style.css: button, select, input { min-height: 48px }) made every button here a tall box. */
.lljobs-dialog :is(button, select, input[type="text"]) { min-height: 0; }
.lljobs-dialog :is(p, li, h3, span, b, small, label, summary) { color: inherit; }
.lljobs-dialog .lljobs-muted, .lljobs-dialog .lljobs-quote { color: var(--lljobs-dim); }
.lljobs-manager { width: min(760px, 100%); }
.lljobs-head { display: flex; align-items: center; gap: 10px; }
.lljobs-head > b { flex: 1; font: 800 15px/1.2 Inter, system-ui, sans-serif; }
.lljobs-muted { margin: 0; color: var(--lljobs-dim); }
.lljobs-x {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--lljobs-line); background: transparent; color: var(--lljobs-dim); font-size: 16px; cursor: pointer;
}
.lljobs-x:hover { color: var(--lljobs-ink); }

.lljobs-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--lljobs-line); border-radius: 10px; }
.lljobs-dialog .lljobs-seg button {
  padding: 5px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--lljobs-dim);
  font: 700 12px Inter, system-ui, sans-serif; cursor: pointer;
}
.lljobs-dialog .lljobs-seg button[aria-pressed="true"] { background: var(--lljobs-accent); color: #fff; }
.lljobs-seg button:disabled { opacity: .4; cursor: not-allowed; }

.lljobs-steps { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding-right: 2px; }
.lljobs-step { display: flex; flex-direction: column; gap: 8px; }
.lljobs-split { padding: 10px; border: 1px dashed var(--lljobs-line); border-radius: 12px; }
.lljobs-split > header { display: flex; align-items: center; gap: 12px; color: var(--lljobs-dim); font-weight: 700; font-size: 12px; }
.lljobs-split > header span { flex: 1; }
.lljobs-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }

.lljobs-task {
  display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--lljobs-line);
  border-radius: 12px; background: var(--lljobs-soft);
}
.lljobs-task-head { display: flex; align-items: center; gap: 8px; }
.lljobs-task-head > b { flex: 0 0 auto; color: var(--lljobs-dim); font: 800 11px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.lljobs-task-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lljobs-dialog :is(input[type="text"], select, textarea) {
  min-width: 0; padding: 7px 9px; border: 1px solid var(--lljobs-line); border-radius: 9px;
  background: var(--lljobs-field); color: var(--lljobs-ink); font: 500 12.5px/1.4 Inter, system-ui, sans-serif;
}
.lljobs-role { flex: 1; }
.lljobs-task-row select { flex: 1 1 140px; max-width: 240px; }
.lljobs-instruction { width: 100%; resize: vertical; min-height: 60px; }

.lljobs-chip, .lljobs-adds button, .lljobs-clear {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--lljobs-line); background: #ffffff; color: var(--lljobs-ink);
  font: 700 11.5px Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap;
}
.lljobs-chip:hover, .lljobs-adds button:hover:not(:disabled), .lljobs-clear:hover { background: #ede9fe; }
.lljobs-adds button:disabled { opacity: .4; cursor: not-allowed; }
.lljobs-danger { border-color: rgba(255, 120, 120, .45); color: var(--lljobs-bad); background: #fef2f2; }
.lljobs-link { padding: 0; border: 0; background: none; color: var(--lljobs-wait); font: 700 12px Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; }

.lljobs-assets { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 10px; background: var(--lljobs-soft); }
.lljobs-assets[hidden] { display: none; }
.lljobs-asset { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lljobs-asset-num { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: #ede9fe; font: 800 10.5px Inter, system-ui, sans-serif; }
.lljobs-asset-thumb { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: #e7e5ef; }
.lljobs-asset-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lljobs-asset small { color: var(--lljobs-dim); }

.lljobs-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lljobs-note { font-size: 12px; }
.lljobs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--lljobs-line); }
.lljobs-quote { flex: 1; min-width: 200px; color: var(--lljobs-dim); font-size: 12px; }
.lljobs-quote[data-short="true"] { color: var(--lljobs-bad); }
.lljobs-go {
  padding: 9px 16px; border-radius: 10px; border: 1px solid #5b21b6; background: #6d28d9; color: #fff;
  font: 800 13px Inter, system-ui, sans-serif; cursor: pointer;
}
.lljobs-go:disabled { opacity: .55; cursor: progress; }

.lljobs-jobs { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.lljobs-job { border: 1px solid var(--lljobs-line); border-radius: 12px; padding: 10px; }
.lljobs-job > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.lljobs-job > header b { flex: 1; }
.lljobs-where { padding: 2px 7px; border-radius: 6px; background: #ede9fe; font: 800 10.5px Inter, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.lljobs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lljobs-row { display: flex; gap: 10px; padding: 8px; border-radius: 10px; background: var(--lljobs-soft); }
.lljobs-row-main { flex: 1; min-width: 0; }
.lljobs-row-main p { margin: 3px 0 0; overflow-wrap: anywhere; }
.lljobs-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.lljobs-row-title small { color: var(--lljobs-dim); }
.lljobs-row details { margin-top: 4px; }
.lljobs-row summary { cursor: pointer; color: var(--lljobs-dim); font-size: 12px; }
.lljobs-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lljobs-error { color: var(--lljobs-bad); }
.lljobs-status {
  flex: 0 0 auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
  font: 800 10.5px/1.5 Inter, system-ui, sans-serif; color: var(--lljobs-dim);
}
[data-status="running"] > .lljobs-status, [data-status="running"] > header > .lljobs-status { color: var(--lljobs-wait); }
[data-status="done"] > .lljobs-status, [data-status="done"] > header > .lljobs-status { color: var(--lljobs-ok); }
[data-status="failed"] > .lljobs-status, [data-status="failed"] > header > .lljobs-status { color: var(--lljobs-bad); }

#liveloop-tasks-btn { position: relative; }
#liveloop-tasks-btn .lljobs-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 4px;
  border-radius: 9px; background: var(--lljobs-accent); color: #fff; font: 800 10px Inter, system-ui, sans-serif;
}
#liveloop-tasks-btn .lljobs-badge[hidden] { display: none; }
#liveloop-cloud-banner {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid rgba(196, 181, 253, .45); background: rgba(91, 63, 168, .18); color: #e9e2ff;
  font: 600 12px/1.4 Inter, system-ui, sans-serif;
}
body.liveloop-cloud-job #liveloop-chat .live-chat-send { opacity: .5; }

@media (max-width: 640px) {
  .lljobs-backdrop { padding: 8px; }
  .lljobs-dialog { padding: 12px; max-height: 92dvh; }
  .lljobs-task-row select { max-width: none; }
}

/* Crew mode (2026-10-21) */
.lljobs-compile { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 10px; border-radius: 10px; border: 1px dashed var(--lljobs-line); }
.lljobs-compile > b { font: 800 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--lljobs-dim); }
.lljobs-compile p { margin: 0; overflow-wrap: anywhere; }
.lljobs-compile select { max-width: 200px; }
.lljobs-ok { color: var(--lljobs-ok); }
.lljobs-watch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lljobs-dim); cursor: pointer; }
.lljobs-crew-adds[hidden], .lljobs-adds[hidden], .lljobs-where-seg[hidden] { display: none; }

/* Live frame 2 (2026-10-21): Send to Frame 1 / Frame 2 / Both, above the composer while Split preview is open */
#liveloop-send-to { display: inline-flex; align-items: center; margin: 0 0 6px; }
#liveloop-send-to .lljobs-send-to-label { padding: 0 8px; font: 700 11px Inter, system-ui, sans-serif; color: var(--lljobs-dim); }

/* How it works (2026-10-21) */
.lljobs-guide-backdrop { z-index: 19750; }
.lljobs-guide { width: min(720px, 100%); }
.lljobs-guide-body { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.lljobs-guide-body h3 { margin: 0 0 4px; font: 800 13px/1.3 Inter, system-ui, sans-serif; color: var(--lljobs-ink); }
.lljobs-guide-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--lljobs-ink); }
.lljobs-guide-body li { line-height: 1.5; }
.lljobs-help { font-weight: 800; }
.lljobs-blank-note { margin: 0; }
.lljobs-blank-note[hidden] { display: none; }
.lljobs-go:disabled { cursor: not-allowed; }