/* =========================================================
   Jobs dashboard (ui/app.html), 2026-10 redesign.
   A production queue: one head row (brand, brand power, actions),
   one toolbar (tabs, search, filters), compact job rows with the
   design preview at the start and a status colored by meaning:
   brand = waiting on you, green = done, red = failed, grey = cancelled,
   moving = in progress. Loads after styles.css on app.html only.
   Type scale: 26 / 15 / 13 / 11. Tajawal 400 / 500 / 700.
   ========================================================= */

body.app-page {
  --dash-ink: #17132a;
  --dash-muted: #5b6474;
  --dash-line: #e7e6f0;
  --dash-line-strong: #d4d2e2;
  --dash-panel: #faf9fe;
  --dash-tag: #f2f1f7;
  --dash-accent: var(--brand-primary, #7c3aed);
  --dash-accent-ink: color-mix(in srgb, var(--dash-accent) 76%, #12091f);
  --dash-accent-soft: color-mix(in srgb, var(--dash-accent) 9%, #ffffff);
  --dash-accent-line: color-mix(in srgb, var(--dash-accent) 30%, #ffffff);
  --dash-ok: #166534;
  --dash-ok-soft: #e7f6ec;
  --dash-bad: #b42318;
  --dash-bad-soft: #fdecea;
  --dash-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.app-page ::selection {
  background: color-mix(in srgb, var(--dash-accent) 22%, #ffffff);
  color: var(--dash-ink);
}

/* ---------- Page head ---------- */
body.app-page .container > .stack > .page-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0 0 12px;
  padding: 0;
}

/* Empty notice holders above the title should not push the page down. */
body.app-page .app-content > :is(.report-notifications, .admin-event-notifications):not(:has(*)) {
  display: none;
}

/* Identity block: the logo spans two lines; brand name + edit on top, brand power underneath. */
body.app-page .page-title-main {
  flex: 0 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding-inline-start: 64px;
}

body.app-page .page-title-main .app-jobs-page-title,
body.app-page .page-title-main .app-jobs-page-title .jobs-title {
  min-width: 0;
  max-width: 100%;
}

body.app-page .page-title-main .app-jobs-page-title .jobs-title {
  gap: 6px;
}

body.app-page .page-title-main .app-jobs-page-title .jobs-title > span:not([class]) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-page .page-title-main .app-jobs-page-title .jobs-title-logo {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 15px;
  transform: translateY(-50%);
}

body.app-page .app-jobs-page-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dash-ink);
  margin: 0;
}

body.app-page .app-jobs-page-title .jobs-title {
  gap: 12px;
}

body.app-page .app-jobs-page-title .jobs-title-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(23, 19, 42, 0.06);
}

body.app-page .app-jobs-page-title .jobs-title-logo:has(img) {
  border-color: var(--dash-line);
  padding: 3px;
}

body.app-page .app-jobs-page-title .brand-edit-inline {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  border-radius: 10px;
  margin-inline-start: 0;
  color: var(--dash-muted);
  transition: background-color 0.16s var(--dash-ease), color 0.16s var(--dash-ease);
}

body.app-page .app-jobs-page-title .brand-edit-inline:hover {
  background: var(--dash-accent-soft);
  color: var(--dash-accent-ink);
}

body.app-page .app-jobs-page-title .brand-edit-inline:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 2px;
}

/* Brand power sits beside the title as brand metadata, not as a row of its own. */
body.app-page .page-title-main .card-brand-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

body.app-page .page-title-main .card-brand-power-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dash-muted);
}

/* Brand power reads as a quiet line of metadata, still a button that opens the score. */
body.app-page .page-title-main .brand-strength-indicator[data-variant] {
  /* Beats .brand-strength-inline's static !important so the reveal layer stays inside the button. */
  position: relative !important;
  isolation: isolate;
  height: 26px;
  min-width: 0;
  max-width: none;
  gap: 8px;
  padding: 0 8px;
  margin: 0;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  transition: background-color 0.16s var(--dash-ease);
}

body.app-page .page-title-main .brand-strength-indicator[data-variant]:hover {
  background: var(--dash-accent-soft) !important;
  transform: none;
}

body.app-page .page-title-main .brand-strength-indicator[data-variant]:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 1px;
}

body.app-page .page-title-main .bs-header-score strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dash-ink);
}

body.app-page .page-title-main .bs-header-score small {
  font-size: 11px;
  color: var(--dash-muted);
}

body.app-page .page-title-main .bs-segments-indicator {
  flex: 0 0 auto;
  width: 96px;
  min-width: 96px;
  gap: 3px;
}

body.app-page .page-title-main .bs-seg {
  height: 6px;
  background: #e6e4f0;
}

body.app-page .page-title-main .bs-seg-fill {
  background: var(--dash-accent);
}

body.app-page .page-title-main .bs-header-tier {
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: var(--dash-tag);
  color: #4b5263;
}

/* Brand power reveal (class added by app.js once per page open, after loading):
   segments fill in sequence, a light passes over the bar, the tier lands last. */
body.app-page .page-title-main .bs-header-score strong {
  font-variant-numeric: tabular-nums;
}

/* The wash lives on its own layer: the base button background is !important, which no animation can override. */
body.app-page .page-title-main .brand-strength-indicator.bs-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--dash-accent-soft);
  pointer-events: none;
  animation: bsRevealWash 1.7s var(--dash-ease) both;
}

body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-header-score strong {
  animation: bsRevealScore 1.5s var(--dash-ease) both;
}

body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg-fill {
  animation: bsRevealFill 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(2) .bs-seg-fill { animation-delay: 60ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(3) .bs-seg-fill { animation-delay: 120ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(4) .bs-seg-fill { animation-delay: 180ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(5) .bs-seg-fill { animation-delay: 240ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(6) .bs-seg-fill { animation-delay: 300ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(7) .bs-seg-fill { animation-delay: 360ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(8) .bs-seg-fill { animation-delay: 420ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(9) .bs-seg-fill { animation-delay: 480ms; }
body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg:nth-child(10) .bs-seg-fill { animation-delay: 540ms; }

body.app-page .page-title-main .bs-segments-indicator {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-segments-indicator::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: -24px;
  width: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  filter: blur(1px);
  pointer-events: none;
  animation: bsRevealSweep 0.7s cubic-bezier(0.45, 0, 0.2, 1) 0.62s both;
}

body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-header-tier {
  animation: bsRevealTier 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}

@keyframes bsRevealFill {
  from { transform: scaleX(0); }
}

@keyframes bsRevealWash {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes bsRevealScore {
  0%, 60% { color: var(--dash-accent-ink); }
}

@keyframes bsRevealSweep {
  from { inset-inline-start: -24px; opacity: 1; }
  85% { opacity: 1; }
  to { inset-inline-start: 100%; opacity: 0; }
}

@keyframes bsRevealTier {
  from { opacity: 0; transform: translateY(4px) scale(0.92); }
}

@keyframes bsRevealFade {
  from { opacity: 0.25; }
}

/* Actions */
/* Brand and actions read as one group on the start side (the right in Arabic):
   brand, a hairline, then Create (primary) and Autopilot beside it. */
body.app-page .page-title-row .app-jobs-cta-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 0;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--dash-line-strong);
  flex-wrap: nowrap;
}

body.app-page .page-title-row .create-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid var(--dash-accent);
  background: var(--dash-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 1px rgba(23, 19, 42, 0.08), 0 8px 18px -10px color-mix(in srgb, var(--dash-accent) 80%, transparent);
  transition: background-color 0.16s var(--dash-ease), box-shadow 0.2s var(--dash-ease), transform 0.16s var(--dash-ease);
}

body.app-page .page-title-row .create-cta::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.app-page .page-title-row .create-cta:hover {
  background: var(--dash-accent-ink);
  border-color: var(--dash-accent-ink);
  box-shadow: 0 1px 1px rgba(23, 19, 42, 0.08), 0 12px 22px -12px color-mix(in srgb, var(--dash-accent) 90%, transparent);
  transform: translateY(-1px);
}

body.app-page .page-title-row .create-cta:active {
  transform: translateY(0) scale(0.98);
}

body.app-page .page-title-row .adly-chat-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--dash-line-strong);
  background: #ffffff;
  color: var(--dash-ink);
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(23, 19, 42, 0.05);
  transition: border-color 0.16s var(--dash-ease), background-color 0.16s var(--dash-ease);
}

body.app-page .page-title-row .adly-chat-open-btn:hover {
  border-color: var(--dash-accent-line);
  background: var(--dash-accent-soft);
}

body.app-page .page-title-row .adly-chat-open-btn .adly-chat-open-avatar {
  width: 24px;
  height: 24px;
}

body.app-page .page-title-row .adly-chat-open-btn .adly-chat-open-experimental {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
}

body.app-page .page-title-row .create-cta:focus-visible,
body.app-page .page-title-row .adly-chat-open-btn:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 3px;
}

/* ---------- Jobs board (the framed card) ---------- */
body.app-page .container > .stack > section.card {
  padding: 0;
  border: 1px solid var(--dash-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 19, 42, 0.04), 0 18px 40px -28px rgba(23, 19, 42, 0.22);
}

/* Toolbar: tabs, search and the two filters in one band */
/* Two parts only: the tabs, and one filter unit (search + type + status) that never splits.
   One row when both fit side by side; otherwise tabs on top and the whole unit below. */
body.app-page section.card > .jobs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 16px;
  background: var(--dash-panel);
  border-bottom: 1px solid var(--dash-line);
  border-radius: 19px 19px 0 0;
}

body.app-page .jobs-toolbar .jobs-filters {
  flex: 1 1 540px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px) minmax(0, 190px);
  gap: 8px;
}

body.app-page .jobs-toolbar .jobs-source-tabs {
  grid-area: auto;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border-radius: 12px;
  background: #efedf6;
  border: 0;
}

body.app-page .jobs-toolbar .jobs-source-tabs .language-option {
  min-height: 34px;
  padding: 0 12px;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--dash-muted);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color 0.16s var(--dash-ease), color 0.16s var(--dash-ease), box-shadow 0.16s var(--dash-ease);
}

body.app-page .jobs-toolbar .jobs-source-tabs .language-option:hover {
  color: var(--dash-ink);
}

body.app-page .jobs-toolbar .jobs-source-tabs .language-option:has(input:checked) {
  background: #ffffff;
  color: var(--dash-ink);
  font-weight: 700;
  border: 0;
  box-shadow: 0 1px 2px rgba(23, 19, 42, 0.08), 0 2px 6px -2px rgba(23, 19, 42, 0.1);
}

body.app-page .jobs-toolbar .jobs-source-tabs .language-option:has(input:focus-visible) {
  outline: 2px solid var(--dash-accent);
  outline-offset: 1px;
}

body.app-page .jobs-toolbar .jobs-source-tabs .jobs-source-tab-icon {
  width: 15px;
  height: 15px;
}

body.app-page .jobs-toolbar .jobs-source-tabs .jobs-source-new-chip,
body.app-page .jobs-toolbar .jobs-source-tabs .jobs-source-unread-chip {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--dash-accent);
}

body.app-page .jobs-toolbar .input,
body.app-page .jobs-toolbar .select {
  min-height: 40px;
  height: 40px;
  border: 1px solid var(--dash-line-strong);
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--dash-ink);
  font-size: 15px;
  font-weight: 400;
  box-shadow: 0 1px 1px rgba(23, 19, 42, 0.03);
  transition: border-color 0.16s var(--dash-ease), box-shadow 0.16s var(--dash-ease);
}

body.app-page .jobs-toolbar .input::placeholder {
  color: var(--dash-muted);
  opacity: 1;
}

body.app-page .jobs-toolbar .input:hover,
body.app-page .jobs-toolbar .select:hover {
  border-color: color-mix(in srgb, var(--dash-accent) 30%, var(--dash-line-strong));
}

body.app-page .jobs-toolbar .input:focus,
body.app-page .jobs-toolbar .select:focus {
  outline: none;
  border-color: var(--dash-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-accent) 16%, transparent);
}

body.app-page .jobs-toolbar #job-search {
  width: 100%;
  min-width: 0;
  padding: 0 14px 0 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: left 14px center;
}

html[dir="rtl"] body.app-page .jobs-toolbar #job-search {
  padding: 0 40px 0 14px;
  background-position: right 14px center;
}

body.app-page .jobs-toolbar .select {
  width: 100%;
  min-width: 0;
  padding: 0 36px 0 14px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: right 12px center;
}

html[dir="rtl"] body.app-page .jobs-toolbar .select {
  padding: 0 14px 0 36px;
  background-position: left 12px center;
}

/* Board body: list and the open job side by side */
body.app-page section.card > .jobs-split {
  margin: 0;
  padding: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "list details";
  grid-template-rows: auto;
  column-gap: 16px;
}

body.app-page .jobs-list-col {
  gap: 12px;
}

body.app-page .job-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  container: joblist / inline-size;
}

/* ---------- Job row ---------- */
body.app-page .job-list .job-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "media title date"
    "media summary summary"
    "media status badges";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--dash-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
  transform: none;
  transition: border-color 0.16s var(--dash-ease), background-color 0.16s var(--dash-ease), box-shadow 0.2s var(--dash-ease);
}

body.app-page .job-list .job-item:hover {
  border-color: var(--dash-line-strong);
  background: #fdfcff;
  box-shadow: 0 6px 16px -12px rgba(23, 19, 42, 0.28);
  transform: none;
}

body.app-page .job-list .job-item:focus-visible {
  outline: 2px solid var(--dash-accent);
  outline-offset: 2px;
}

body.app-page .job-list .job-item.selected {
  border-color: color-mix(in srgb, var(--dash-accent) 55%, #ffffff);
  background: var(--dash-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-accent) 12%, transparent);
}

body.app-page .job-list .job-item.just-created {
  border-color: var(--dash-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-accent) 18%, transparent);
}

/* The card's wrappers step aside so their parts sit on one grid. */
body.app-page .job-list .job-item :is(.job-item-header, .job-item-meta-row, .job-item-body, .job-item-footer) {
  display: contents;
  direction: inherit;
}

body.app-page .job-list .job-item .job-item-title {
  grid-area: title;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dash-ink);
}

body.app-page .job-list .job-item .job-item-summary {
  grid-area: summary;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--dash-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

body.app-page .job-list .job-item .job-item-date {
  grid-area: date;
  justify-self: end;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--dash-muted);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  white-space: nowrap;
}

body.app-page .job-list .job-item .job-item-badges {
  grid-area: badges;
  justify-self: end;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

body.app-page .job-list .job-item .job-item-footer > :not(.job-thumbs) {
  grid-area: status;
  justify-self: start;
}

/* Tags: details about the job, so all one quiet grey (no brand or green fills); the status carries the colour. */
body.app-page .job-list .job-item :is(.new-badge, .linked-badge, .style-badge, .lang-badge, .super-mode-job-badge, .brand-badge, .automation-job-badge, .free-job-badge, .autopilot-badge) {
  min-height: 20px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: var(--dash-tag);
  color: #4b5263;
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

/* Every other tag in the row (MCP, Telegram, templates and the rest) gets the same grey. */
body.app-page .job-list .job-item .job-item-badges > :not(.size-indicator) {
  border-color: transparent;
  background: var(--dash-tag);
  color: #4b5263;
  box-shadow: none;
}

body.app-page .job-list .job-item .job-item-badges > * svg {
  color: currentColor;
}

body.app-page .job-list .job-item.selected :is(.lang-badge, .brand-badge) {
  background: #ffffff;
}

body.app-page .job-list .job-item .size-indicator {
  margin: 0 2px;
  border-color: #b9bccb;
  background: transparent;
}

/* Media: the design preview leads the row; extra outputs ride as small chips on its corner. */
body.app-page .job-list .job-item .job-thumbs {
  grid-area: media;
  grid-row: 1 / -1;
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  align-self: center;
}

body.app-page .job-list .job-item .job-thumbs > .job-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--dash-line);
  background: var(--dash-tag);
  object-fit: cover;
  box-sizing: border-box;
}

/* An image that fails to load must not spill its alt text out of the tile. */
body.app-page .job-list .job-item img.job-thumb {
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

body.app-page .job-list .job-item .job-thumbs > .job-thumb:nth-child(n+2) {
  position: absolute;
  inset-block-end: -6px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px -2px rgba(23, 19, 42, 0.3);
}

body.app-page .job-list .job-item .job-thumbs > .job-thumb:nth-child(2) { inset-inline-end: -8px; }
body.app-page .job-list .job-item .job-thumbs > .job-thumb:nth-child(3) { inset-inline-end: 14px; }
body.app-page .job-list .job-item .job-thumbs > .job-thumb:nth-child(n+4) { display: none; }

body.app-page .job-list .job-item .job-thumb.text {
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-accent-ink);
  background: var(--dash-accent-soft);
}

body.app-page .job-list .job-item .job-thumbs > .job-thumb.text:first-child {
  font-size: 15px;
}

body.app-page .job-list .job-item .job-thumb.job-thumb-more {
  font-size: 11px;
  color: var(--dash-accent-ink);
  background: var(--dash-accent-soft);
}

/* Video output: a drawn play mark instead of the film emoji. */
body.app-page .job-list .job-item .job-thumb.video-thumb {
  font-size: 0;
  color: #ffffff;
  background: var(--dash-accent);
}

body.app-page .job-list .job-item .job-thumb.video-thumb::before {
  content: "";
  width: 40%;
  height: 40%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* No output yet: a quiet tile keeps every row on the same rhythm. */
body.app-page .job-list .job-item:not(:has(.job-thumbs))::before {
  content: "";
  grid-area: media;
  grid-row: 1 / -1;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px dashed var(--dash-line-strong);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a98ad' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Cpath d='m20.5 15-4.5-4.5L5 20.5'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
    var(--dash-panel);
  box-sizing: border-box;
}

/* Being made (data-making, set by app.js): the usual placeholder tile, with a soft neutral grey vertical band
   sweeping across it like a scanner drawing the image (a white one over the source photo when there is one). */
body.app-page .job-list .job-item[data-making]:not(:has(.job-thumbs))::after {
  content: "";
  grid-area: media;
  grid-row: 1 / -1;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(23, 19, 42, 0.03) 38%,
      rgba(23, 19, 42, 0.1) 50%,
      rgba(23, 19, 42, 0.03) 62%,
      transparent 100%) -100% 0 / 60% 100% no-repeat;
  animation: dashMakeScan 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

body.app-page .job-list .job-item[data-making] .job-thumbs::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 38%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.15) 62%,
      transparent 100%) -100% 0 / 60% 100% no-repeat;
  animation: dashMakeScan 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}

@keyframes dashMakeScan {
  from { background-position: -100% 0; }
  to { background-position: 200% 0; }
}

@media (max-width: 700px) {
  body.app-page .job-list .job-item[data-making]:not(:has(.job-thumbs))::after,
  body.app-page .job-list .job-item[data-making] .job-thumbs::after {
    width: 52px;
    height: 52px;
  }
}

/* ---------- Status pill: outline and words only (no fill), coloured by what it asks of the user; the tags stay grey.
   brand = waiting on you or scheduled, green = done, red = failed, grey = in progress or cancelled. */
body.app-page .job-list .job-item .status-pill,
body.app-page .job-list .job-item .loading-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 28px;
  max-width: 100%;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--dash-accent-line);
  border-radius: 999px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  /* A long status ("Adding words, music and caption") wraps inside its own column instead of running over the chips. */
  white-space: normal;
  text-align: start;
  /* Default: the job is waiting on the user (review, approve, publish). */
  background: transparent;
  color: var(--dash-accent-ink);
}

body.app-page .job-list .job-item .status-pill .stage-icon,
body.app-page .job-list .job-item .status-pill .status-pill-failed-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: currentColor;
  stroke: currentColor;
}

/* Done */
body.app-page .job-list .job-item .status-pill:is(.has-networks, :has(use[href$="#icon-check-circle"])) {
  background: transparent;
  border-color: color-mix(in srgb, var(--dash-ok) 40%, #ffffff);
  color: var(--dash-ok);
}

body.app-page .job-list .job-item .status-pill .status-pill-networks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 8px;
  margin-inline-start: 2px;
  border-inline-start: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Scheduled: on its way, nothing to do */
body.app-page .job-list .job-item .status-pill:has(use[href$="#icon-clock"]) {
  background: transparent;
  border-color: var(--dash-accent-line);
  color: var(--dash-accent-ink);
}

/* Cancelled, and anything still being made */
body.app-page .job-list .job-item .status-pill:has(use[href$="#icon-ban"]),
body.app-page .job-list .job-item[data-making] .status-pill {
  background: transparent;
  border-color: var(--dash-line-strong);
  color: var(--dash-muted);
}

/* Failed */
body.app-page .job-list .job-item .status-pill.is-failed {
  background: transparent;
  border-color: color-mix(in srgb, var(--dash-bad) 40%, #ffffff);
  color: var(--dash-bad);
}

/* In progress: grey pill with a small grey spinner instead of the hourglass emoji */
body.app-page .job-list .job-item .loading-pill {
  background: transparent;
  border-color: var(--dash-line-strong);
  color: var(--dash-muted);
}

body.app-page .job-list .job-item .loading-pill .loading-hourglass {
  display: none;
}

body.app-page .job-list .job-item .loading-pill::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(23, 19, 42, 0.12);
  border-top-color: var(--dash-muted);
  animation: dashSpin 0.8s linear infinite;
}

body.app-page .job-list .job-item .loading-pill .elapsed-timer {
  color: var(--dash-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes dashSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Pagination ---------- */
body.app-page .jobs-list-col .pagination {
  margin-top: 4px;
  gap: 8px;
  justify-content: center;
}

body.app-page .jobs-list-col .pagination .button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--dash-line-strong);
  background: #ffffff;
  color: var(--dash-ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

body.app-page .jobs-list-col .pagination .button:hover:not(:disabled) {
  border-color: var(--dash-accent-line);
  background: var(--dash-accent-soft);
}

body.app-page .jobs-list-col .pagination .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.app-page .jobs-list-col .pagination #jobs-page {
  min-width: 64px;
  text-align: center;
  font-size: 13px;
  color: var(--dash-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Open job panel ---------- */
body.app-page .job-details-col .job-details-card.card {
  top: 16px;
  border: 1px solid var(--dash-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 19, 42, 0.04);
}

/* Nothing picked yet: a calm prompt that points at the list. */
body.app-page .job-details-card #job-details:has(> .muted:only-child) {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

body.app-page .job-details-card #job-details:has(> .muted:only-child)::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 13.5h5M8 16.5h8'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    var(--dash-accent-soft);
}

body.app-page .job-details-card #job-details > .muted:only-child {
  max-width: 28ch;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dash-muted);
}

/* ---------- Automations tab empty state ---------- */
body.app-page .job-list .jobs-automations-empty {
  align-items: center;
  text-align: center;
  padding: 40px 16px;
  border: 1px dashed var(--dash-line-strong);
  border-radius: 14px;
  background: var(--dash-panel);
}

body.app-page .job-list .jobs-automations-empty .muted {
  font-size: 15px;
  color: var(--dash-muted);
}

body.app-page .job-list .jobs-automations-empty-cta {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1279px) {
  /* Narrower desktops keep the head on one line: Autopilot drops its "experimental" chip. */
  body.app-page .page-title-row .adly-chat-open-btn .adly-chat-open-experimental {
    display: none;
  }

}

@media (max-width: 980px) {
  body.app-page section.card > .jobs-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "list" "details";
  }

  /* On small screens a job opens in its own sheet, so the empty side panel is not shown. */
  body.app-page .job-details-col:has(#job-details > .muted:only-child) {
    display: none;
  }
}

@media (max-width: 700px) {
  body.app-page .container > .stack > .page-title-row {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    padding-inline: 12px;
  }

  body.app-page .container {
    margin-top: 12px;
  }

  body.app-page .page-title-main {
    min-height: 48px;
    padding-inline-start: 58px;
  }

  body.app-page .page-title-main .app-jobs-page-title .jobs-title-logo {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  body.app-page .app-jobs-page-title {
    font-size: 22px;
  }

  body.app-page .page-title-main .app-jobs-page-title .brand-edit-inline {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
  }

  body.app-page .page-title-main .bs-segments-indicator {
    width: 76px;
    min-width: 76px;
  }

  body.app-page .page-title-row .app-jobs-cta-row {
    flex: 1 1 100%;
    width: 100%;
    padding-inline: 0;
    border: 0;
  }

  body.app-page .page-title-row .create-cta,
  body.app-page .page-title-row .adly-chat-open-btn {
    flex: 1 1 0;
    min-height: 48px;
    min-width: 0;
    padding-inline: 12px;
    justify-content: center;
    white-space: nowrap;
  }

  body.app-page .page-title-row .create-cta {
    flex-grow: 1.4;
  }

  body.app-page .container > .stack > section.card {
    border-radius: 18px;
  }

  /* Two rows: the Jobs / Automations switch, then search + type + status side by side. */
  body.app-page section.card > .jobs-toolbar {
    gap: 8px;
    padding: 10px;
    border-radius: 17px 17px 0 0;
  }

  body.app-page .jobs-toolbar .jobs-source-tabs {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.app-page .jobs-toolbar .jobs-filters {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 92px) minmax(0, 92px);
    gap: 6px;
  }

  body.app-page .jobs-toolbar .jobs-source-tabs .language-option {
    justify-content: center;
    min-height: 34px;
  }

  body.app-page .jobs-toolbar .input,
  body.app-page .jobs-toolbar .select {
    min-height: 44px;
    height: 44px;
    font-size: 15px;
  }

  body.app-page .jobs-toolbar #job-search {
    padding: 0 10px 0 34px;
    background-position: left 10px center;
    background-size: 16px 16px;
  }

  html[dir="rtl"] body.app-page .jobs-toolbar #job-search {
    padding: 0 34px 0 10px;
    background-position: right 10px center;
  }

  body.app-page .jobs-toolbar .select {
    width: 100%;
    padding: 0 26px 0 10px;
    background-position: right 8px center;
    background-size: 14px 14px;
    text-overflow: ellipsis;
  }

  html[dir="rtl"] body.app-page .jobs-toolbar .select {
    padding: 0 10px 0 26px;
    background-position: left 8px center;
  }

  /* On phones the list sits on a soft lavender ground so each white card reads as its own block. */
  body.app-page section.card > .jobs-split {
    padding: 12px;
    background: #f4f3f9;
    border-radius: 0 0 17px 17px;
  }

  body.app-page .job-list .job-item {
    border-color: #e3e1ec;
    box-shadow: 0 1px 2px rgba(23, 19, 42, 0.05), 0 2px 6px -3px rgba(23, 19, 42, 0.08);
  }

  body.app-page .job-list .job-item {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 12px;
  }

  body.app-page .job-list .job-item .job-thumbs,
  body.app-page .job-list .job-item .job-thumbs > .job-thumb:first-child,
  body.app-page .job-list .job-item:not(:has(.job-thumbs))::before {
    width: 52px;
    height: 52px;
  }

  /* Status gets its own line on narrow rows; tags follow underneath. */
  body.app-page .job-list .job-item {
    grid-template-areas:
      "media title date"
      "media summary summary"
      "media status status"
      "media badges badges";
  }

  body.app-page .job-list .job-item .job-item-badges {
    justify-self: start;
    justify-content: flex-start;
  }

  body.app-page .job-list .job-item .job-item-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-page .page-title-row .create-cta:hover { transform: none; }
  /* The reveal still happens, as a fade with no movement. */
  body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-seg-fill,
  body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-header-tier {
    animation-name: bsRevealFade;
  }
  body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-segments-indicator::after {
    display: none;
  }
  body.app-page .page-title-main .brand-strength-indicator.bs-reveal .bs-header-score strong {
    animation: none;
  }
  body.app-page .job-list .job-item .loading-pill::before {
    animation: none;
  }
  body.app-page .job-list .job-item[data-making]:not(:has(.job-thumbs))::after,
  body.app-page .job-list .job-item[data-making] .job-thumbs::after {
    display: none;
  }
}

/* A narrow list (small laptop with the job open beside it, or a phone): status and tags each get their own line. */
@container joblist (max-width: 480px) {
  body.app-page .job-list .job-item {
    grid-template-areas:
      "media title date"
      "media summary summary"
      "media status status"
      "media badges badges";
  }

  body.app-page .job-list .job-item .job-item-badges {
    justify-self: start;
    justify-content: flex-start;
  }
}

/* Light logo on a transparent background: the tile takes the brand colour (set by app.js), no white edge. */
body.app-page .app-jobs-page-title .jobs-title-logo.is-on-brand {
  border-color: transparent;
}