.file-upload-zone {
    --fuz-panel-h: clamp(20.5rem, calc(100dvh - 34rem), 30rem);
    --fuz-close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z'/%3E%3C/svg%3E");
    width: 100%;

    .dropzone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        min-height: var(--fuz-panel-h);
        padding: 2rem 1.5rem;
        text-align: center;
        border: 1px dashed var(--ncs-container-strong);
        border-radius: var(--border-radius);
        background: var(--ncs-container-weak);
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease;

        &:hover {
            border-color: var(--ncs-primary);
        }

        &.is-drag {
            border-color: var(--ncs-primary);
            background: color-mix(in srgb, var(--ncs-primary) 7%, var(--ncs-container-weak));
        }
    }

    .dz-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border-radius: 100%;
        background: var(--background);
        color: var(--ncs-primary-contrast);
        font-size: var(--font-lg);
        margin-bottom: 0.25rem;

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    .dz-title {
        font-size: var(--font-ml);
        font-weight: var(--font-weight-regular);
    }

    .dz-sub {
        font-size: var(--font-sm);
        color: color-mix(in srgb, var(--text) 60%, transparent);
    }

    .dz-formats {
        font-size: var(--font-xs);
        color: color-mix(in srgb, var(--text) 55%, transparent);
        margin: 0 0 0.75rem 0;
    }

    /* file-selected panel — toggled by file-upload-zone.js via the `.file-selected` class on the root */
    .file-selected-panel {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--ncs-container-strong);
        border-radius: var(--border-radius);
        background: var(--ncs-container-weak);
    }

    &.file-selected {
        .dropzone {
            display: none;
        }

        .file-selected-panel {
            display: flex;
        }
    }

    &:has(> .fuz-after) {
        display: flex;
        flex-direction: column;
        min-height: var(--fuz-panel-h);
        border: 1px dashed var(--ncs-container-strong);
        border-radius: var(--border-radius);
        background: var(--ncs-container-weak);
        overflow: hidden;
        transition: border-color 0.2s ease;

        &:has(.dropzone:hover),
        &:has(.dropzone.is-drag) {
            border-color: var(--ncs-primary);
        }

        &.file-selected {
            border-style: solid;
        }

        .dropzone,
        .file-selected-panel {
            flex: 1 1 auto;
            min-height: 0;
            border: 0;
            border-radius: 0;
            background: none;
        }

        .fuz-after {
            flex: 0 0 auto;
            padding: 0 1.5rem 1.5rem;
        }
    }

    
    .source-chip {
        --source-chip-control-size: 2.5rem;
        --fuz-destructive: #e6104d;

        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: max-content;
        max-width: min(34rem, 100%);
        padding: 0.5rem;
        border-radius: 999px;
        background: var(--background);
        border: 1px solid var(--ncs-container-strong);
        font-size: var(--font-sm);
    }

    .source-chip-icon,
    .source-chip-clear {
        flex: 0 0 var(--source-chip-control-size);
        width: var(--source-chip-control-size);
        height: var(--source-chip-control-size);
        align-self: center;

        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .source-chip-icon {
        background: var(--ncs-primary);
        color: var(--ncs-on-primary);
        font-size: var(--font-md);

        svg {
            width: 1.1rem;
            height: 1.1rem;
        }
    }

    .source-chip-text {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        text-align: left;
        line-height: 1.25;
    }

    .source-chip-name {
        width: max-content;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .source-chip-size {
        font-size: var(--font-xs);
        color: color-mix(in srgb, var(--text) 55%, transparent);
    }

    .source-chip-clear {
        position: relative;
        margin-left: auto;
        border: 0;
        cursor: pointer;
        background: transparent;
        color: var(--fuz-destructive);
        transition: filter 0.2s ease;

        &::before {
            content: "";
            width: 100%;
            height: 100%;
            background: currentColor;
            mask: var(--fuz-close-icon) center / 120% no-repeat;
        }

        &:hover {
            filter: brightness(0.92);
        }

        &:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--fuz-destructive) 55%, transparent);
            outline-offset: 2px;
        }
    }

    .select-another-desc {
        font-size: var(--font-sm);
        color: color-mix(in srgb, var(--text) 60%, transparent);
    }

    .select-another-btn {
        color: var(--ncs-primary);
        border-bottom: 1px solid var(--ncs-primary);
        cursor: pointer;
    }
}