/* Shared uploader UI for the file tools.
   Progressive enhancement: without JS the plain form still posts normally. */

.tool-form { display: flex; flex-direction: column; gap: 1rem; }

.dropzone {
    border: 2px dashed var(--border, #3f3f46);
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    background: var(--surface-2, rgba(255, 255, 255, .02));
}
.dropzone:hover,
.dropzone:focus-visible { border-color: var(--accent, #6366f1); outline: none; }
.dropzone.is-dragging {
    border-color: var(--accent, #6366f1);
    background: rgba(99, 102, 241, .12);
}
.dropzone__icon { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
.dropzone__title { font-weight: 600; margin-bottom: .25rem; }
.dropzone__hint { font-size: .85rem; color: var(--text-muted, #a1a1aa); }
.dropzone input[type=file] { display: none; }

/* Files chosen, awaiting upload */
.filelist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.filelist:empty { display: none; }
.filelist__item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem;
    background: var(--surface-2, rgba(255, 255, 255, .04));
    border: 1px solid var(--border, #3f3f46);
    border-radius: 8px;
    font-size: .9rem;
}
.filelist__item.is-dragging { opacity: .4; }
.filelist__item.is-over { border-color: var(--accent, #6366f1); }
.filelist__grip { cursor: grab; color: var(--text-muted, #a1a1aa); user-select: none; }
.filelist__grip:active { cursor: grabbing; }
.filelist__name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filelist__size { color: var(--text-muted, #a1a1aa); font-variant-numeric: tabular-nums; }
.filelist__remove {
    background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
    color: var(--text-muted, #a1a1aa); padding: .2rem .4rem; border-radius: 4px;
}
.filelist__remove:hover { color: #f87171; background: rgba(248, 113, 113, .12); }

/* Progress */
.tool-progress { display: none; }
.tool-progress.is-active { display: block; }
.tool-progress__bar {
    height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--surface-2, rgba(255, 255, 255, .08));
}
.tool-progress__fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    transition: width .2s ease;
}
.tool-progress__fill.is-indeterminate {
    width: 40%;
    animation: tool-indeterminate 1.1s ease-in-out infinite;
}
@keyframes tool-indeterminate {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}
.tool-progress__label {
    font-size: .85rem; color: var(--text-muted, #a1a1aa);
    margin-top: .5rem; text-align: center;
}

/* Inline messages */
.tool-message { display: none; padding: .85rem 1rem; border-radius: 8px; font-size: .9rem; }
.tool-message.is-visible { display: block; }
.tool-message--error {
    background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .4);
    color: #fca5a5;
}
.tool-message--success {
    background: rgba(52, 211, 153, .12);
    border: 1px solid rgba(52, 211, 153, .4);
    color: #6ee7b7;
}
.tool-message__hint { display: block; margin-top: .35rem; opacity: .8; font-size: .85rem; }

.tool-options { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.tool-options label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.tool-options input, .tool-options select {
    padding: .5rem .6rem; border-radius: 8px;
    border: 1px solid var(--border, #3f3f46);
    background: var(--surface-2, rgba(255, 255, 255, .04));
    color: inherit; font: inherit;
}
.tool-submit[disabled] { opacity: .55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .dropzone, .tool-progress__fill { transition: none; }
    .tool-progress__fill.is-indeterminate { animation: none; width: 100%; }
}