/* Small additions on top of the real app's own watchlater.css — only the
   bits that are unique to the demo shell (badge link, warning chip). */

.demo-badge {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.demo-badge:hover {
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

/* Centered in the header bar itself (header already has position:relative
   in watchlater.css), same technique as the queue bar's centered collapse
   icon — a fixed spot regardless of how wide header-left/header-right end
   up being. Text stays on one line (the component's own default). */
#demo-warning-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Flashed when a non-functional demo button (Remove & Next / Remove video) is
   clicked — an Apple-style "wrong password" shake, feedback that the click
   registered but does nothing real. Each step keeps the -50%/-50% centering
   and only offsets the shake on top of it, so it shakes in place rather
   than jumping off-center. */
@keyframes demo-chip-shake {
  10%, 90% { transform: translate(calc(-50% - 3px), -50%); }
  20%, 80% { transform: translate(calc(-50% + 5px), -50%); }
  30%, 50%, 70% { transform: translate(calc(-50% - 9px), -50%); }
  40%, 60% { transform: translate(calc(-50% + 9px), -50%); }
}
#demo-warning-chip.flash {
  animation: demo-chip-shake 0.5s ease;
}

/* #player-view has no [hidden] toggling in the demo — it's the only view */