/* Visitor guidance: the standing queue note under the drop zone and the live
   waiting-status box shown above the results while a photo is in line. */

/* Standing note under the drop zone */
.queue-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 14px;
  border-radius: 10px; background: var(--info-soft); color: var(--info);
  font-size: .88rem; line-height: 1.55;
}
.queue-note svg { flex: none; margin-top: 2px; color: var(--brand); }
.queue-note span { min-width: 0; }

/* Live waiting status */
.wait-box {
  --wait-tone: var(--brand); --wait-soft: var(--brand-soft);
  display: flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--wait-tone) 28%, transparent);
  border-left: 5px solid var(--wait-tone); border-radius: 12px;
  background: var(--wait-soft); color: var(--text); box-shadow: var(--shadow);
  scroll-margin-top: 12px;
}
.wait-box[data-state="full"] { --wait-tone: var(--warn); --wait-soft: var(--warn-soft); }
.wait-box[data-state="running"] { --wait-tone: var(--ok); --wait-soft: var(--ok-soft); }

.wait-pulse {
  position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--wait-tone);
}
.wait-pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--wait-tone); opacity: 0; animation: wait-ring 1.6s ease-out infinite;
}
@keyframes wait-ring {
  0% { transform: scale(.6); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.wait-copy { display: grid; gap: 2px; min-width: 0; margin: 0; }
.wait-title { font-weight: 700; font-size: 1.05rem; line-height: 1.45; letter-spacing: -.01em; }
.wait-detail { color: var(--muted); font-size: .9rem; line-height: 1.5; }
/* Quicker mode under load: a quiet extra line, never a warning. */
.wait-fast { color: var(--wait-tone); font-size: .88rem; font-weight: 600; line-height: 1.5; }

/* The results that follow sit right under the box. */
.wait-box:not([hidden]) + .results { padding-top: 14px; }

@media (max-width: 560px) {
  .wait-box { gap: 12px; padding: 12px 14px; }
  .wait-title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wait-pulse::after { animation: none; opacity: .35; transform: scale(1.2); }
}