/* ============================================================
   Gallery upload — queue rows with per-photo captions
   Design token reference: design-system.md §7
   ============================================================ */

/* ---------- File queue ---------- */
.gallery-upload__queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.gallery-upload__file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.gallery-upload__file-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-upload__file-status {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  color: var(--text-muted);
}

.gallery-upload__file--ok .gallery-upload__file-status {
  color: var(--success);
}

.gallery-upload__file--duplicate .gallery-upload__file-status {
  color: var(--warning);
}

.gallery-upload__file--failed .gallery-upload__file-status {
  color: var(--danger);
  /* Длинный текст ошибки не распирает строку: статус упавшего файла уезжает
     на собственную строку во всю ширину и переносится по словам. Короткие
     статусы (ok/duplicate) остаются в строке. */
  flex-basis: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Row wraps so the caption textarea gets its own line. */
.gallery-upload__file {
  flex-wrap: wrap;
}

.gallery-upload__file-name {
  flex: 1 1 auto;
  min-width: 0;
}

.gallery-upload__thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.gallery-upload__caption-toggle {
  flex-shrink: 0;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-meta);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.gallery-upload__caption-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.gallery-upload__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.gallery-upload__remove:hover {
  color: var(--danger);
  border-color: var(--border-strong);
}

.gallery-upload__remove .icon {
  width: 16px;
  height: 16px;
}

.gallery-upload__caption {
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-snug);
  resize: vertical;
}

.gallery-upload__caption::placeholder {
  color: var(--text-faint);
}