/* ============================================================================
 * Renatus Downloads tray — fixed panel pinned to the top-right of the
 * viewport, just below the top bar. Stacks one card per in-flight
 * download. See static/js/download-tray.js for the controller.
 *
 * z-index: above page content but below modals/overlays (modals use
 * 9999+ in this codebase).
 *
 * The tray has three states, controlled by classes on the root:
 *   .rdt-tray              — expanded, rows + small "Hide" chip visible
 *   .rdt-tray--collapsed   — collapsed, only the "▾ N downloads" pill
 *   .rdt-tray--empty       — no rows in flight, nothing rendered
 * ============================================================================ */

.rdt-tray {
  position: fixed;
  top: calc(var(--topbar-height, 72px) + 12px);
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 1100;
  pointer-events: none; /* tray itself is transparent; rows opt back in */
}

/* Toolbar (above rows) — hosts the small "Hide" chip. */
.rdt-toolbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  pointer-events: none;
}
.rdt-collapse-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--gray-mid);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rdt-collapse-btn:hover {
  background: #fff;
  color: var(--text);
}
.rdt-collapse-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Rows container — width:100% so .rdt-row stretches across the tray. */
.rdt-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

.rdt-row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family, system-ui, sans-serif);
  font-size: 13px;
  color: var(--text);
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

/* Entry / exit animation states */
.rdt-row--enter {
  transform: translateX(24px);
  opacity: 0;
}
.rdt-row--leave {
  transform: translateX(24px);
  opacity: 0;
}

/* Icon column — fixed width so titles align */
.rdt-row-icon {
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
}
.rdt-row--done .rdt-row-icon { color: var(--success); }
.rdt-row--error .rdt-row-icon { color: var(--danger); }

/* Spinner animation */
.rdt-spinner {
  animation: rdtSpin 0.9s linear infinite;
  transform-origin: center;
}
@keyframes rdtSpin {
  to { transform: rotate(360deg); }
}

/* Body — title + status */
.rdt-row-body {
  flex: 1 1 auto;
  min-width: 0; /* allows ellipsis */
}
.rdt-row-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.rdt-row-status {
  margin-top: 2px;
  font-size: 11px;
  color: var(--gray-mid);
  line-height: 1.2;
}
.rdt-row--error .rdt-row-status { color: var(--danger); }

/* Dismiss button (per row) */
.rdt-row-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--gray-mid);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.rdt-row-close:hover {
  opacity: 1;
  background: var(--gray-light);
}

/* Mini pill — shown only in the collapsed state. */
.rdt-mini {
  display: none;
  pointer-events: auto;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.rdt-mini:hover {
  background: var(--gray-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.rdt-mini:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rdt-mini svg {
  color: var(--gray-mid);
  flex: 0 0 auto;
}

/* COLLAPSED state — hide rows + toolbar, show the mini pill. */
.rdt-tray--collapsed .rdt-rows,
.rdt-tray--collapsed .rdt-toolbar {
  display: none;
}
.rdt-tray--collapsed .rdt-mini {
  display: inline-flex;
}

/* EMPTY state — nothing in flight, hide everything (incl. mini pill). */
.rdt-tray--empty .rdt-rows,
.rdt-tray--empty .rdt-toolbar,
.rdt-tray--empty .rdt-mini {
  display: none;
}

/* Mobile: span the screen with padding, sit just under the top bar */
@media (max-width: 768px) {
  .rdt-tray {
    top: calc(var(--topbar-height, 72px) + 8px);
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .rdt-row,
  .rdt-spinner,
  .rdt-mini,
  .rdt-collapse-btn {
    transition: none !important;
    animation: none !important;
  }
}