.ui-long-press { display: flex; align-items: center; gap: 4px; color: var(--ui-fg); font: 15px/1.45 var(--ui-font); }
/* The callout and the browser's drag are off for good here; selection only during a press. */
.ui-long-press-area { flex: 1; min-width: 0; border-radius: var(--ui-radius-sm); outline: none; touch-action: pan-y; -webkit-touch-callout: none;
  transition: transform .18s, opacity .18s; }
.ui-long-press-area img { -webkit-user-drag: none; }
.ui-long-press-area:focus-visible { box-shadow: var(--ui-focus); }
.ui-long-press-pressing { transform: scale(.98); opacity: .85; user-select: none; -webkit-user-select: none; }
.ui-long-press-more { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-muted); cursor: pointer; }
.ui-long-press-more svg { width: 20px; height: 20px; }
.ui-long-press-more:focus-visible { outline: none; box-shadow: var(--ui-focus); }
/* In the top layer, so a frame's transform or overflow does not hold it. */
.ui-long-press-menu { position: fixed; inset: auto; box-sizing: border-box; width: 240px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: 0; padding: 6px; overflow: auto;
  border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); background: var(--ui-surface); color: var(--ui-fg); box-shadow: var(--ui-shadow-lg); }
.ui-long-press-menu[open] { animation: ui-long-press-pop .16s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes ui-long-press-pop { from { opacity: 0; transform: scale(.9); } }
.ui-long-press-menu::backdrop { background: var(--ui-overlay); }
.ui-long-press-item { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--ui-radius-sm); background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ui-long-press-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-long-press-hot { background: var(--ui-subtle); }
.ui-long-press-danger { color: var(--ui-danger); }
.ui-long-press-item[disabled] { color: var(--ui-muted); opacity: .6; cursor: default; }
@media (hover: hover) {
  .ui-long-press-more:hover { background: var(--ui-subtle); color: var(--ui-fg); }
  .ui-long-press-item:not([disabled]):hover { background: var(--ui-subtle); }
}
@media (min-width: 700px) { .ui-long-press-menu::backdrop { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ui-long-press-area { transition: none; } .ui-long-press-menu[open] { animation: none; } }