/* "Watch video" on viz pages — header link and floating pill to the DSA Revision playlist (video-widget.js) */

.vw-btn svg, .vw-pill svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

.vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600; font-size: 0.8125rem; line-height: 1.2;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  color: #cfe3ff;
  background: linear-gradient(180deg, rgba(56, 139, 253, 0.22), rgba(56, 139, 253, 0.12));
  border: 1px solid rgba(88, 166, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.vw-btn em { font-style: normal; font-weight: 500; font-size: 0.75rem; color: #8db8f2; }
.vw-btn:hover { color: #fff; background: linear-gradient(180deg, rgba(56, 139, 253, 0.32), rgba(56, 139, 253, 0.18)); border-color: #58a6ff; }
.vw-btn:focus-visible, .vw-pill:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
.vw-btn-solo { margin-left: auto; }

/* Floating pill, left of the notes button */
.vw-pill {
  position: fixed;
  right: 86px;
  bottom: 28px;
  z-index: 9997;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, 0.6);
  background: rgba(22, 27, 34, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #cfe3ff;
  font-weight: 600; font-size: 0.8125rem; line-height: 1;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
}
.vw-pill.show { opacity: 1; transform: none; pointer-events: auto; }
.vw-pill:hover { border-color: #58a6ff; color: #fff; }
.vw-pill svg { color: #58a6ff; }

@media (max-width: 720px) {
  /* Watch video + Practice now share one row; status stays full width below. */
  .vp-header-actions { flex-direction: row; flex-wrap: wrap; }
  .vp-header-actions .vw-btn, .vp-header-actions .vp-practice-link { flex: 1 1 0; width: auto; min-width: 0; box-sizing: border-box; }
  .vp-header-actions .vp-progress-wrap { flex-basis: 100%; }
  .vw-btn-solo { width: 100%; }
  .vw-pill { right: 76px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .vw-pill { transition: none; }
}