/* Slice Loading Progress Bar */
.slice-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: transparent;
    z-index: 1000;
    pointer-events: none;
}

.slice-progress-bar {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 0;
}

.slice-progress-line {
    flex: 1;
    height: 100%;
    background-color: #333333;
    /* Dark grey for not loaded */
    transition: background-color 0.3s ease;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.slice-progress-line:last-child {
    border-right: none;
}

.slice-progress-line.loaded-cache {
    background-color: #0c6958;
    /* Dark green for loaded from cache */
}

.slice-progress-line.loaded-network {
    background-color: #546e7a;
    /* Dark blue-grey for loaded from network */
}

.slice-progress-line.partial {
    background: linear-gradient(90deg, #0c6958 50%, #000000 50%);
    /* Half green, half grey for partially loaded */
}

.slice-progress-line.error {
    background-color: #f44336;
    /* Red for error */
}

.slice-progress-line.loading-cache {
    background-color: #09f257;
    /* Light green for currently loading from cache */
    animation: pulse 1s infinite;
}

.slice-progress-line.loading-network {
    background-color: #b0bec5;
    /* Light blue-grey for currently loading from network */
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Hide progress bar when complete (optional) */
.slice-progress-container.complete {
    opacity: 0;
    transition: opacity 1s ease 2s;
    /* Fade out after 2 seconds */
}