.badge .fa-circle {
  font-size: 8px;
  vertical-align: middle;
}
pre#logbox::-webkit-scrollbar {
  width: 10px;
}
pre#logbox::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 5px;
}

/* Scraper status indicator */
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.pulse-dot.green { background: #7CFC00; }
.pulse-dot.red { background: #ff4444; }
.pulse-dot.animate { animation: pulse 1.1s ease-in-out infinite; }
.pulse-dot.pause { animation-play-state: paused; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Scraper live log tail */
.logtail {
  height: 220px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.logtail::-webkit-scrollbar { width: 8px; }
.logtail::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 4px; }

/* ---- /videos work surface ---- */
/* Collapsible setup panels: a <summary> styled as a card header. */
details.card > summary.setup-summary {
  cursor: pointer;
  list-style: none;
  padding: .5rem .75rem;
  font-weight: 600;
}
details.card > summary.setup-summary::-webkit-details-marker { display: none; }
details.card > summary.setup-summary::before {
  content: "\f078";                 /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: .4rem;
  font-size: .7em;
  transition: transform .15s ease;
}
details.card[open] > summary.setup-summary::before {
  transform: rotate(90deg);
}
details.card > summary.setup-summary:hover { background: rgba(255, 255, 255, .04); }

/* Bulk post bar sits at the top of the work surface. Deliberately NOT sticky:
   a tall sticky form overlays the library and swallows clicks on the clips
   underneath it. */
.postbar {
  border-left: 3px solid var(--bs-success);
}
.postbar .card-header { background: rgba(255, 255, 255, .04); }

/* Library grid: clip tiles. */
.vid-thumb { background: rgba(255, 255, 255, .06); }
.card .form-check-input { margin-top: .35rem; }

/* Selecting a clip must be obvious, and the whole picture is a hit target. */
.vid-pick-surface { cursor: pointer; }
.vid-selected {
  outline: 3px solid var(--bs-success);
  outline-offset: -3px;
  box-shadow: 0 0 0 .35rem rgba(var(--bs-success-rgb), .25) !important;
}
.vid-selected .vid-tick { background: var(--bs-success) !important; color: #000; }