/* snip.js: the snipping-tool box over the transcript. The chat dims; the box
 * is a clear window into it with an ink border and eight handles; messages it
 * touches get a dashed outline; a bar at the bottom counts them and shares.
 * Neutral ink, no green: the box is a tool, not a state. Handles and buttons
 * are 44px targets on touch. */

.snip-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: rgb(0 0 0 / 0.32);
  outline: none;
}
.snip-layer.has-box { background: transparent; }

.snip-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--sv-surface);
  outline: 1px solid var(--sv-ink);
  border-radius: 6px;
  /* the dim outside the box */
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.32);
  cursor: move;
}
.snip-box[hidden] { display: none; }
.snip-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px;
  border: 2px solid var(--sv-ink);
  border-radius: 50%;
  background: var(--sv-surface);
}
/* a bigger target than it looks */
.snip-handle::before { content: ""; position: absolute; inset: -10px; }
.snip-nw { left: 0; top: 0; cursor: nwse-resize; }
.snip-ne { right: 0; top: 0; cursor: nesw-resize; }
.snip-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.snip-se { right: 0; bottom: 0; cursor: nwse-resize; }
.snip-n { left: 50%; top: 0; cursor: ns-resize; }
.snip-s { left: 50%; bottom: 0; cursor: ns-resize; }
.snip-w { left: 0; top: 50%; cursor: ew-resize; }
.snip-e { right: 0; top: 50%; cursor: ew-resize; }
.snip-layer.dragging .snip-handle { opacity: 0.6; }

/* the messages the box takes, whole */
.transcript > .snip-hit { outline: 2px dashed var(--sv-ink); outline-offset: 4px; border-radius: var(--sv-radius); }

.snip-hint, .snip-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: calc(100% - 2 * var(--sv-space-3));
  box-sizing: border-box;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 999px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--pop-shadow);
  font-size: var(--ui-meta);
}
.snip-hint { top: var(--sv-space-4); padding: var(--sv-space-2) var(--sv-space-4); pointer-events: none; white-space: nowrap; }
.snip-hint[hidden] { display: none; }
.snip-hint .icon { width: 16px; height: 16px; flex: none; }
.snip-bar { bottom: var(--sv-space-4); padding: var(--sv-space-1) var(--sv-space-1) var(--sv-space-1) var(--sv-space-4); cursor: default; }
.snip-count { flex: none; color: var(--sv-ink-secondary); white-space: nowrap; }
.snip-bar.over .snip-count { color: var(--sv-attention); }
.snip-bar button { flex: none; min-height: 34px; padding: 0 var(--sv-space-3); border-radius: 999px; }
.snip-bar button.snip-done { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (pointer: coarse) {
  .snip-handle { width: 18px; height: 18px; margin: -9px; }
  .snip-bar button { min-height: 44px; }
}