/* a46: Dialoge verschiebbar und vergroesserbar -- anwendungsweit.
   Verschieben macht das Skript, Vergroessern uebernimmt der Browser ueber
   `resize`. Das spart eine eigene Zieh-Logik samt ihrer Sonderfaelle. */

.tn-dialog {
  resize: both;
  overflow: auto;
  min-width: 320px;
  min-height: 160px;
  max-height: 92vh;
}

/* Griff: erkennbar, aber ohne den Dialog umzugestalten. */
.tn-dialog-handle {
  cursor: grab;
  user-select: none;
  position: relative;
  padding-left: 26px;
}
.tn-dialog-handle:focus-visible {
  outline: 2px solid #006858;
  outline-offset: 2px;
}
.tn-dialog-handle::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  opacity: 0.4;
  background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.2px);
  background-size: 5px 5px;
}
.tn-dialog-dragging { cursor: grabbing; }
.tn-dialog-dragging .tn-dialog-handle { cursor: grabbing; }

/* Falls ein Dialog keine eigene Kopfzeile hat, wird eine schmale angelegt. */
.tn-drag-strip {
  height: 20px;
  margin: -4px -4px 2px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#f1f5f4, #e7eeec);
}

/* Waehrend des Ziehens darf nichts markiert werden -- sonst blaut die halbe
   Seite ein, sobald der Zeiger den Dialog verlaesst. */
.tn-dialog-dragging, .tn-dialog-dragging * { user-select: none !important; }

@media (max-width: 720px) {
  /* Auf schmalen Geraeten bringt Verschieben nichts und kostet nur Flaeche. */
  .tn-dialog { resize: none; }
  .tn-drag-strip { display: none; }
}