/* =============================================================================
   SGraph Send — Upload Step Progress Styles
   Step 5: Encrypt & Upload Progress (display-only component)

   Extracted from monolith versions:
     v0.2.3  — progress bar, processing container
     v0.2.7  — carousel fade animation
     v0.2.8  — two-column layout, live timing rows
     v0.2.10 — stable height, transparent messages column, vertical centering
   ============================================================================= */

:host {
    display: block;
}

/* Processing container */
.step-progress {
    padding: var(--space-6, 1.5rem) 0;
}

/* ─── Progress bar ───────────────────────────────────────────────────── */

.progress-bar {
    position: relative;
    height: 6px;
    background: var(--color-border, rgba(78, 205, 196, 0.15));
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-3, 0.75rem);
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-primary, #4ECDC4);
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}

.progress-bar__label {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
    margin-bottom: var(--space-3, 0.75rem);
}

/* ─── Two-column layout ──────────────────────────────────────────────── */

.progress-columns {
    display: flex;
    gap: var(--space-5, 1.25rem);
    margin-top: var(--space-4, 1rem);
    min-height: 120px;
    align-items: center;
}

.progress-col {
    flex: 1;
    min-width: 0;
    display: flex;
    align-self: stretch;
}

/* Messages column (left) — v0.2.10 transparent override */
.progress-col--messages {
    background: transparent;
    border: none;
    padding: var(--space-3, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stats column (right) */
.progress-col--timing {
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-3, 0.75rem);
}

/* ─── Carousel message ───────────────────────────────────────────────── */

.carousel-message {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    animation: carouselFadeIn 0.4s ease forwards;
}

@keyframes carouselFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-message__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.carousel-message__text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
    line-height: 1.5;
}

/* ─── Timing rows ────────────────────────────────────────────────────── */

.timing-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    width: 100%;
}

.timing-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #8892A0);
}

.timing-row__label {
    min-width: 110px;
}

.timing-row__check {
    color: var(--color-primary, #4ECDC4);
}

.timing-row__duration {
    margin-left: auto;
    font-family: var(--font-mono, monospace);
}

/* ─── Hint ───────────────────────────────────────────────────────────── */

.step-progress__hint {
    font-size: var(--text-small, 0.75rem);
    color: var(--color-text-secondary, #8892A0);
    margin-top: var(--space-3, 0.75rem);
    opacity: 0.5;
    font-size: var(--text-micro, 0.625rem);
}

/* ─── Mobile responsive ──────────────────────────────────────────────── */

@media (max-width: 480px) {
    .progress-columns {
        flex-direction: column;
    }

    .carousel-message {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2, 0.5rem);
    }
}
