/*
 * Подсказка при перетаскивании файла в окно.
 *
 * Нужна, чтобы открытие перетаскиванием было очевидным: при перетаскивании
 * файла поверх окна появляется полупрозрачная область с текстом, при уходе
 * курсора или отпускании — исчезает. Слой не перехватывает мышь (pointer-events:
 * none), иначе браузер не получил бы событие drop.
 */

.dropzone {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg, #fff) 72%, transparent);
  backdrop-filter: blur(3px);
  pointer-events: none;
  transition: opacity 120ms ease;
}

.dropzone.is-visible {
  display: flex;
}

.dropzone__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 28px 40px;
  border: 2px dashed var(--accent, #0b5fa5);
  border-radius: 16px;
  background: var(--panel, #fff);
  box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
  text-align: center;
  max-width: min(520px, 86vw);
}

.dropzone__box b {
  font-size: 18px;
}

.dropzone__box span {
  font-size: 13px;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .dropzone {
    transition: none;
  }
}