/* =========================================================
   menus.css: the playlist menu (js/playlist-menu.js) and the toast's
   action button (js/toast.js, e.g. Undo)
   ========================================================= */

.ctx-menu {
  position: fixed;

  z-index: 1450;

  min-width: 220px;
  max-width: 280px;

  padding: 6px;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);

  background: var(--surface-alt);

  box-shadow: var(--shadow-md);

  opacity: 0;
  transform: scale(0.96);

  transition:
    opacity 150ms cubic-bezier(0.4, 0, 1, 1),
    transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

.ctx-menu.is-open {
  opacity: 1;
  transform: none;

  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

.ctx-title {
  padding: 8px 10px 6px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: var(--text-muted);

  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ctx-item {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;
  padding: 9px 10px;

  border: none;
  border-radius: var(--radius-sm);
  outline: none;

  background: transparent;
  color: var(--text);

  font: inherit;
  font-size: var(--fs-body);
  text-align: left;

  cursor: pointer;
}

.ctx-item svg {
  width: 16px;
  height: 16px;

  flex-shrink: 0;

  color: var(--text-muted);
}

.ctx-item:hover,
.ctx-item:focus-visible,
.ctx-item:focus {
  background: var(--surface);
}

.ctx-item.is-danger,
.ctx-item.is-danger svg {
  color: var(--error);
}

.ctx-separator {
  height: 1px;

  margin: 4px 6px;

  background: var(--border);
}

/* Toast with an action (Undo) */
.toast.has-action {
  display: flex;
  align-items: center;

  gap: 16px;
  padding: 8px 8px 8px 20px;
}

.toast-action {
  padding: 6px 14px;

  border: none;
  border-radius: var(--radius-pill);

  background: transparent;
  color: var(--pink);

  font: inherit;
  font-weight: 800;

  cursor: pointer;
}

.toast-action:hover {
  background: var(--pink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .ctx-menu,
  .ctx-menu.is-open {
    transform: none;
  }
}

/* Toasts ignore the pointer so they never block what's under them;
   one with a button has to take clicks while it's showing. */
.toast.has-action.visible {
  pointer-events: auto;
}

/* Create menu (js/playlist-menu.js): a name and a short line saying
   what each option does, so "Playlist with AI" explains itself. */
.ctx-item.has-hint {
  align-items: flex-start;

  padding-top: 10px;
  padding-bottom: 10px;
}

.ctx-item.has-hint svg {
  margin-top: 2px;
}

.ctx-item-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.ctx-item-hint {
  color: var(--text-muted);

  font-size: var(--fs-body-sm);
}

.ctx-item[data-action="ai"] svg {
  color: var(--pink);
}

/* Choice menus (the sleep timer): a tick on the current choice only. */
.ctx-choice svg {
  visibility: hidden;

  color: var(--pink);
}

.ctx-choice.is-checked svg {
  visibility: visible;
}

.ctx-choice.is-checked {
  color: var(--pink);
}

/* Small menus opened with js/menu-motion.js (the Library sort menus):
   grow from their button, 200 ms ease-out; leave in 150 ms. */
.menu-motion {
  transform-origin: top right;

  opacity: 0;
  transform: translateY(-4px) scale(0.97);

  transition:
    opacity 150ms cubic-bezier(0.4, 0, 1, 1),
    transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

.menu-motion.is-open {
  opacity: 1;
  transform: none;

  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .menu-motion,
  .menu-motion.is-open {
    transform: none;
  }
}