.upload-inline-status {
  --upload-status-color: var(--accent-cyan, #22d3ee);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  max-width: min(100%, 42rem);
  margin-inline-start: 0.45rem;
  padding: 0.34rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--upload-status-color) 42%, var(--border-light, #475569));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--upload-status-color) 9%, var(--bg-card, #0f172a));
  color: var(--text-main, #e2e8f0);
  font-size: 0.7rem;
  line-height: 1.2;
  vertical-align: middle;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.upload-inline-status[data-state="syncing"] { --upload-status-color: var(--accent-amber, #f59e0b); }
.upload-inline-status[data-state="completed"] { --upload-status-color: var(--accent-emerald, #10b981); }
.upload-inline-status[data-state="rejected"] { --upload-status-color: var(--accent-rose, #f43f5e); }

.upload-status-spinner {
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--upload-status-color) 30%, transparent);
  border-top-color: var(--upload-status-color);
  border-radius: 50%;
  animation: upload-status-spin 0.8s linear infinite;
}

.upload-inline-status[data-state="completed"] .upload-status-spinner,
.upload-inline-status[data-state="rejected"] .upload-status-spinner {
  border: 0;
  animation: none;
}

.upload-inline-status[data-state="completed"] .upload-status-spinner::before { content: "✓"; color: var(--upload-status-color); }
.upload-inline-status[data-state="rejected"] .upload-status-spinner::before { content: "×"; color: var(--upload-status-color); }
.upload-status-file { overflow: hidden; max-width: 13rem; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upload-inline-status strong { color: var(--upload-status-color); white-space: nowrap; }
.upload-status-message { color: var(--text-secondary, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-inline-status button {
  border: 0;
  border-radius: 0.3rem;
  padding: 0.18rem 0.4rem;
  background: color-mix(in srgb, var(--upload-status-color) 18%, transparent);
  color: var(--upload-status-color);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

@keyframes upload-status-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .upload-inline-status { display: flex; width: 100%; margin: 0.4rem 0 0; flex-wrap: wrap; }
  .upload-status-message { flex-basis: 100%; white-space: normal; }
}