/* ────────────────────────────────────────────────────────────────
   components.css — Toast, ContextMenu, and miscellaneous widgets
   ──────────────────────────────────────────────────────────────── */

/* ── Toast ────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--text);
  opacity: 0;
  transition: opacity .22s, transform .22s;
  z-index: 300;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Context menu ─────────────────────────────────────────────── */
#ctx-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
  z-index: 150;
  min-width: 168px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  display: none;
}
#ctx-menu.visible { display: block; }

.ctx-item {
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  transition: background .1s;
  user-select: none;
}
.ctx-item:hover       { background: rgba(255,255,255,.06); }
.ctx-item.ctx-danger  { color: var(--danger); }
.ctx-item.ctx-disabled {
  color: var(--text3);
  cursor: not-allowed;
  pointer-events: none;
}
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ContextMenuBuilder styles */
.ctx-menu-builder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 1000;
}