@layer components {
  /* The space's GIF page: drop zone, one editable row per file waiting, then the catalogue. */
  .gif-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px;
    border: 1px dashed var(--border); border-radius: var(--radius-md); text-align: center;
  }
  .gif-dropzone p { margin: 0; color: var(--muted-foreground); }
  .gif-dropzone--over { border-color: var(--jx-accent); background: var(--jx-accent-soft); }
  .gif-dropzone:has(input:focus-visible) label { outline: 2px solid var(--jx-accent); outline-offset: 2px; }

  .gif-upload-list, .gifs-admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .gif-upload-list:not(:empty) { margin-top: 12px; }
  .gif-upload .card-footer[hidden] { display: none; }
  .gif-upload-row {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 12px; align-items: end; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .gif-upload-name { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; }
  .gif-upload-preview { grid-column: 1 / -1; justify-self: start; width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); background: var(--muted); }
  .gif-upload-row .field-error { grid-column: 1 / -1; margin: 0; }

  .badge--failed { color: var(--foreground); }
  .badge--failed::before { background: var(--destructive); }
  .gifs-admin-search { display: flex; gap: 8px; margin-bottom: 12px; }
  .gifs-admin-search .input { flex: 1; }
  .gifs-admin-item { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
  .gifs-admin-item:last-child { border-bottom: 0; }
  .gif-row { display: flex; gap: 12px; align-items: center; }
  .gif-thumb { width: 72px; height: 72px; object-fit: contain; flex: none; border-radius: var(--radius-sm); background: var(--muted); }
  .gif-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .gif-info .badge { align-self: flex-start; }
  .gif-title, .gif-words { overflow-wrap: anywhere; }
  .gif-actions { display: flex; gap: 8px; flex: none; }
  .gif-edit { flex: 1; }
  .gifs-admin-pages { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

  /* The preview is the animated file itself: hidden when the person asks for less motion. */
  @media (prefers-reduced-motion: reduce) {
    .gif-upload-preview { display: none; }
  }

  @media (max-width: 767px) {
    .gif-upload-row { grid-template-columns: 1fr; }
    .gif-row { flex-wrap: wrap; }
    .gif-actions { width: 100%; }
  }

  .gif-addition-preview { display: block; max-width: 100%; max-height: 160px; margin: 0 auto 12px; border-radius: var(--radius-sm); background: var(--muted); }
}