/* AI Vision kit: the file drop zone (dropzone.js). A dashed tray that lifts
   when a file is dragged over it, and a column of small file tiles. Light by
   default; data-tone="dark" on the element for a dark panel. */

.kit-drop {
  --kd-ink: #0d0d0f;
  --kd-muted: #55585e;
  --kd-line: rgba(13, 13, 15, .18);
  --kd-fill: rgba(255, 255, 255, .55);
  --kd-tile: rgba(255, 255, 255, .86);
  --kd-accent: var(--accent, #e2231a);
  position: relative;
  display: grid;
  gap: .7rem;
  min-width: 0;
}
.kit-drop[data-tone="dark"] { --kd-ink: #f4f4f5; --kd-muted: #a1a1aa; --kd-line: rgba(255, 255, 255, .22); --kd-fill: rgba(255, 255, 255, .04); --kd-tile: rgba(255, 255, 255, .08); }

/* The real input sits under the zone: focusable, invisible. */
.kit-drop__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.kit-drop__zone {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.15rem 1rem 1.05rem;
  border: 1.5px dashed var(--kd-line);
  border-radius: 14px;
  background: var(--kd-fill);
  color: var(--kd-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.kit-drop__zone:hover { border-color: var(--kd-ink); }
.kit-drop__input:focus-visible + .kit-drop__zone { border-color: var(--kd-accent); box-shadow: 0 0 0 3px rgba(226, 35, 26, .22); }
.kit-drop.is-over .kit-drop__zone { border-style: solid; border-color: var(--kd-accent); background: rgba(226, 35, 26, .06); transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 40px rgba(18, 22, 30, .12); }
.kit-drop.is-invalid .kit-drop__zone { border-color: var(--kd-accent); }
.kit-drop.is-full .kit-drop__zone { opacity: .6; }

.kit-drop__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--kd-ink); color: #fff; transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .2s ease; }
.kit-drop[data-tone="dark"] .kit-drop__icon { background: #fff; color: #0d0d0f; }
.kit-drop.is-over .kit-drop__icon { transform: translateY(-3px); background: var(--kd-accent); color: #fff; }
.kit-drop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit-drop__title { color: var(--kd-ink); font-size: .95rem; font-weight: 700; line-height: 1.35; }
.kit-drop__title u { color: var(--kd-muted); font-weight: 600; text-decoration-color: currentColor; text-underline-offset: 3px; }
.kit-drop__rules { font-size: .8rem; line-height: 1.4; }

.kit-drop__list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.kit-drop__list:empty { display: none; }
.kit-drop__file {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .45rem .5rem .45rem .45rem;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
  background: var(--kd-tile);
  animation: kit-drop-in .35s cubic-bezier(.2, .8, .2, 1) both;
}
.kit-drop__thumb { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: #f1f1f2; color: var(--kd-accent); }
.kit-drop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kit-drop__thumb svg { width: 22px; height: 22px; margin-bottom: 8px; }
.kit-drop__thumb b { position: absolute; bottom: 4px; font-size: .55rem; font-weight: 800; letter-spacing: .06em; }
.kit-drop__name { display: grid; min-width: 0; color: var(--kd-ink); font-size: .88rem; font-weight: 600; line-height: 1.3; }
.kit-drop__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-drop__name small { color: var(--kd-muted); font-size: .78rem; font-weight: 500; }
.kit-drop__remove { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--kd-muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.kit-drop__remove:hover, .kit-drop__remove:focus-visible { background: rgba(226, 35, 26, .1); color: var(--kd-accent); outline: none; }
.kit-drop__remove:focus-visible { box-shadow: 0 0 0 2px var(--kd-accent); }

.kit-drop__msg { margin: 0; color: var(--kd-accent); font-size: .85rem; font-weight: 600; line-height: 1.45; }
.kit-drop__msg:empty { display: none; }

@keyframes kit-drop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kit-drop__zone, .kit-drop__icon { transition: none; }
  .kit-drop.is-over .kit-drop__zone, .kit-drop.is-over .kit-drop__icon { transform: none; }
  .kit-drop__file { animation: none; }
}
.kit-drop.is-busy .kit-drop__zone { cursor: progress; opacity: .75; }