/* Upload drawer — bottom-right persistent panel that shows one row per
   file uploading. Style mirrors the toast's surface aesthetic (see
   projects.css for `.zoop-toast`) so the two feel like the same family.

   Mounted on every page via templates/base.html. The DOM is created
   lazily by static/js/upload-bootstrap.js the first time a file is
   enqueued, so pages with no uploads pay no rendering cost. */

.zoop-upload-drawer {
    position: fixed;
    bottom: var(--size-5);
    right: var(--size-5);
    width: 360px;
    max-height: 60vh;
    background: var(--color-surface);
    color: var(--color-on-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--font-size-1);
    transition: opacity var(--duration-2) var(--ease-1),
                transform var(--duration-2) var(--ease-1);
}

.zoop-upload-drawer.dismissing {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.zoop-upload-drawer-header {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-3) var(--size-4);
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-outline);
}

.zoop-upload-drawer-header h3 {
    margin: 0;
    font-size: var(--font-size-1);
    font-weight: 600;
    flex: 1;
}

.zoop-upload-drawer-header button {
    background: transparent;
    border: 0;
    padding: var(--size-1);
    border-radius: var(--radius-1);
    color: var(--color-on-surface-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zoop-upload-drawer-header button:disabled {
    opacity: 0.4;
    cursor: default;
}

.zoop-upload-drawer-header button:not(:disabled):hover {
    background: var(--color-surface-2);
}

.zoop-upload-drawer-header button svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.zoop-upload-drawer-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: calc(60vh - 44px); /* header is ~44px */
}

.zoop-upload-drawer.collapsed .zoop-upload-drawer-rows {
    display: none;
}

/* The chevron rotates 180° when collapsed so the affordance is consistent. */
.zoop-upload-drawer.collapsed .zoop-upload-drawer-collapse svg {
    transform: rotate(180deg);
}

.zoop-upload-row {
    padding: var(--size-3) var(--size-4);
    border-bottom: 1px solid var(--color-surface-2);
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
}

.zoop-upload-row:last-child {
    border-bottom: 0;
}

.zoop-upload-row-header {
    display: flex;
    align-items: baseline;
    gap: var(--size-2);
}

.zoop-upload-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.zoop-upload-row-percent {
    color: var(--color-on-surface-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-0);
}

.zoop-upload-row-state {
    color: var(--color-on-surface-muted);
    font-size: var(--font-size-0);
}

.zoop-upload-row[data-state="ready"] .zoop-upload-row-state {
    color: var(--color-success);
}

.zoop-upload-row[data-state="error"] .zoop-upload-row-state {
    color: var(--color-danger);
}

/* Progress bar — flat rectangular, fills surface-2 → primary. The native
   <progress> element styles wildly across browsers; we render a styled
   div instead, with role=progressbar so the AT story isn't lost. */
.zoop-upload-row-progress {
    height: 4px;
    background: var(--color-surface-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.zoop-upload-row-progress-fill {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width var(--duration-1) linear;
}

.zoop-upload-row[data-state="ready"] .zoop-upload-row-progress-fill {
    background: var(--color-success);
}

.zoop-upload-row[data-state="error"] .zoop-upload-row-progress-fill {
    background: var(--color-danger);
}

@media (prefers-reduced-motion: reduce) {
    .zoop-upload-drawer,
    .zoop-upload-row-progress-fill {
        transition: none;
    }
}