/* Import Call — drag & drop / browse target for evaluating a recorded mp3.
   Lives on the dark live-flow shell but reads entirely from theme tokens, so
   it re-themes light/dark like the rest of the call flow. See upload-recording.js
   for the drop/picker wiring and #screen-import-call in call-flow.html. */

.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.65rem;
  min-height: 320px;
  padding: 3rem 2rem;
  border: 2px dashed var(--border-emph);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease),
              background var(--dur-micro) var(--ease),
              transform var(--dur-micro) var(--ease);
}
.import-dropzone:hover,
.import-dropzone:focus-visible {
  border-color: var(--cyan-600);
  background: var(--surface-hover);
  outline: none;
}

/* Active drag-over state — emphasised border + a subtle lift. */
.import-dropzone.is-dragover {
  border-color: var(--cyan-600);
  border-style: solid;
  background: var(--cyan-050);
  transform: scale(1.01);
}

/* Locked while an upload is in flight (the processing overlay covers the page). */
.import-dropzone.is-busy {
  cursor: progress;
  pointer-events: none;
  opacity: 0.55;
}

.import-dropzone-icon {
  width: 48px;
  height: 48px;
  color: var(--cyan-600);
  margin-bottom: 0.25rem;
}

.import-dropzone-title {
  font: 700 18px/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text);
}

.import-dropzone-sub {
  font: 500 14px/1.4 var(--font-body);
  color: var(--text-muted);
}
.import-dropzone-link {
  color: var(--cyan-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.import-dropzone-hint {
  margin-top: 0.5rem;
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}