/* wkx-library-live.css — All Samples live rows (wkx-library-live.js).
 * Scoped to the All Samples view. A new row fades in with a soft blue wash
 * that fades out over ~4 s (the selection keeps its violet); the
 * "N new samples" pill floats over the list without taking layout space.
 */
.wkl-view-all .wkl-table-wrap {
  /* The view keeps the viewport still itself when rows go in above it;
     the browser's own scroll anchoring would correct it a second time. */
  overflow-anchor: none;
}

.wkl-view-all .wkl-row.wkl-row-live td {
  animation: wkl-live-wash 4s ease-out both;
}
.wkl-view-all .wkl-row.wkl-row-live td:first-child {
  animation: wkl-live-wash 4s ease-out both, wkl-live-edge 4s ease-out both;
}
.wkl-view-all .wkl-row.wkl-row-live.is-selected td { animation: none; }

@keyframes wkl-live-wash {
  0%   { background-color: rgba(59, 130, 246, 0.16); opacity: 0.35; }
  12%  { background-color: rgba(59, 130, 246, 0.14); opacity: 1; }
  100% { background-color: rgba(59, 130, 246, 0); opacity: 1; }
}
@keyframes wkl-live-edge {
  0%, 60% { box-shadow: inset 2px 0 0 rgba(124, 180, 255, 0.85); }
  100%    { box-shadow: inset 2px 0 0 rgba(124, 180, 255, 0); }
}

/* Zero-height sticky rail: showing / hiding the pill never moves the list. */
.wkl-view-all .wkl-live-pill-wrap {
  position: sticky;
  top: 10px;
  z-index: 6;
  height: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}
.wkl-view-all .wkl-live-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(124, 180, 255, 0.35);
  border-radius: 999px;
  background: rgba(21, 24, 42, 0.94);
  color: var(--wkl-blue-2, #7cb4ff);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  animation: wkl-live-pill-in 180ms ease-out;
}
.wkl-view-all .wkl-live-pill[hidden] { display: none; }
.wkl-view-all .wkl-live-pill:hover { border-color: rgba(124, 180, 255, 0.6); background: rgba(29, 34, 58, 0.96); }
.wkl-view-all .wkl-live-pill:focus-visible { outline: 2px solid var(--wkl-blue-2, #7cb4ff); outline-offset: 2px; }
.wkl-view-all .wkl-live-pill-arrow { font-size: 13px; line-height: 1; }

@keyframes wkl-live-pill-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wkl-view-all .wkl-row.wkl-row-live td,
  .wkl-view-all .wkl-row.wkl-row-live td:first-child { animation: none; background-color: rgba(59, 130, 246, 0.08); }
  .wkl-view-all .wkl-live-pill { animation: none; }
}