/* Interaction helpers and transient UI.
   Use this file for SweetAlert compact styles, drag/drop feedback and image annotation helpers. */
.code-copy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
}

.code-copy-inline {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #0f766e;
  border-radius: 0;
  font-size: 1rem;
  padding: 0;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.code-copy-inline:hover {
  color: #0ea5a4;
}

.code-copy-inline.is-success {
  color: #16a34a;
}

.code-copy-inline.is-error {
  color: #dc2626;
}

.image-annotator-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.image-annotator-stage {
  width: 100%;
  min-height: 220px;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px;
}

#imageAnnotateCanvas {
  display: block;
  margin: 0 auto;
  border: 1px solid #bcd0e1;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(12, 34, 56, 0.12);
}

.annot-width-range {
  width: 110px;
}

.annot-zoom-range {
  width: 120px;
}

.annot-display-width-range {
  width: 140px;
}

.image-annotator-secondary-toolbar {
  row-gap: 0.35rem;
}

:root.dark .image-annotator-stage,
.dark .image-annotator-stage {
  background: #0f1a2a;
  border-color: #304964;
}

:root.dark #imageAnnotateCanvas,
.dark #imageAnnotateCanvas {
  border-color: #395877;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Compact styling for unsaved-changes SweetAlert2 dialogs. */
.swal2-popup.notasync-swal-compact {
  width: min(22rem, calc(100vw - 1.25rem));
  padding: .85rem .95rem .75rem;
  border-radius: 10px;
}

.swal2-popup.notasync-swal-compact .swal2-icon {
  margin: .3rem auto .55rem;
  transform: scale(.82);
}

.swal2-popup.notasync-swal-compact .swal2-title.notasync-swal-compact-title {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 .3rem 0;
  padding: 0;
}

.swal2-popup.notasync-swal-compact .swal2-html-container.notasync-swal-compact-text {
  font-size: .9rem;
  line-height: 1.35;
  margin: .1rem 0 0 0;
}

.swal2-actions.notasync-swal-compact-actions {
  margin-top: .65rem;
  gap: .35rem;
  flex-wrap: wrap;
}

.swal2-actions.notasync-swal-compact-actions .notasync-swal-compact-btn {
  margin: 0;
  padding: .28rem .62rem;
  min-height: 30px;
  font-size: .82rem;
  border-radius: 6px;
}

/* Drag & Drop image feedback */
#editor.drag-over {
  background-color: rgba(15, 118, 110, 0.08);
  border: 2px dashed var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary);