/* Context menu + quick-insert + marquee + toast action — the interaction chrome. */
#menu-root:empty { display: none; }

.ctx-menu {
  position: fixed; z-index: 95; min-width: 214px; max-height: 70vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.ctx-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 6px 9px; border: 0; border-radius: 5px; background: transparent;
  color: var(--fg-0); font-size: 12.5px; text-align: left; cursor: pointer;
}
.ctx-item:hover:not([disabled]) { background: var(--accent); color: #fff; }
.ctx-item[disabled] { opacity: .38; cursor: default; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover:not([disabled]) { background: var(--danger); color: #fff; }
.ctx-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-hint { font-size: 11px; color: var(--fg-2); }
.ctx-item:hover:not([disabled]) .ctx-hint { color: rgba(255,255,255,.72); }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* Quick insert (double-click on empty canvas) */
.qi-layer { position: fixed; inset: 0; z-index: 95; }
.qi {
  position: absolute; width: 300px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,.6); overflow: hidden;
}
.qi-input {
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: var(--bg-1) !important; padding: 9px 11px !important;
}
.qi-list { max-height: 268px; overflow-y: auto; padding: 5px; }
.qi-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px;
}
.qi-item.on { background: var(--accent); color: #fff; }
.qi-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; flex: none;
}
.qi-item.on .qi-kind { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); }
.qi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hover một pattern → bản xem to bên phải rail */
.pp {
  position: fixed; z-index: 92; width: min(324px, calc(100vw - 16px)); max-height: calc(100vh - 24px); pointer-events: none;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 18px 48px rgba(0,0,0,.6); overflow: hidden;
  animation: menu-in var(--dur-1) var(--ease-out); transform-origin: left center;
}
.pp-shot {
  background: var(--bg-0); border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; padding: 10px 0;
}
.pp-shot svg { display: block; border-radius: 6px; }
.pp-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.pp-t { font-weight: 600; }
.pp-kind {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2);
}
.pp-meta .muted { font-size: 11px; line-height: 1.45; }
.pp-when { font-size: 11px; line-height: 1.45; color: var(--ok); }

/* Rubber-band selection */
.marquee {
  position: absolute; pointer-events: none;
  border: 1px solid var(--accent); background: rgba(79,140,255,.13);
}

/* Toast with an inline undo */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-icon {
  width: 17px; height: 17px; flex: none; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; background: var(--ok); color: #06221a;
}
.toast.err .toast-icon { background: var(--danger); color: #2b060e; }
.toast-action { margin-left: 4px; }
.toast.has-action { pointer-events: auto; }
.toast-action {
  border: 1px solid var(--accent); border-radius: 5px; background: transparent;
  color: var(--accent); font-weight: 600; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.toast-action:hover { background: var(--accent); color: #fff; }