/**
 * Babiato Tools Framework – Tool-specific CSS
 * Loaded only on tool pages.
 */

/* Upload drag animation */
@keyframes pulse-border {
    0%, 100% { border-color: var(--color-accent); }
    50%       { border-color: var(--color-accent-hover); }
}
.upload-zone.drag-over {
    animation: pulse-border 1s ease infinite;
    background: var(--color-accent-light);
}

/* File item enter animation */
@keyframes file-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.file-item { animation: file-slide-in 0.2s ease; }

/* Success checkmark animation */
@keyframes pop-in {
    0%   { transform: scale(0); opacity: 0; }
    80%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.success-icon { animation: pop-in 0.4s cubic-bezier(.175,.885,.32,1.275); }

/* Tool workspace tabs */
.tool-tabs { display: flex; border-bottom: 2px solid var(--color-border); margin-bottom: 1.5rem; gap: 0; }
.tool-tab {
    padding: 0.625rem 1.25rem; border: none; background: none; cursor: pointer;
    color: var(--color-text-muted); font-weight: 500; font-size: 0.9375rem;
    position: relative; transition: color 0.15s;
}
.tool-tab::after {
    content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform 0.15s;
}
.tool-tab.active { color: var(--color-accent); }
.tool-tab.active::after { transform: scaleX(1); }
.tool-tab-panel { display: none; }
.tool-tab-panel.active { display: block; }

/* Compact option rows */
.option-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 0; border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap; gap: 0.5rem;
}
.option-row:last-child { border-bottom: none; }
.option-row label { font-weight: 500; color: var(--color-text); }

/* Range input styling */
input[type="range"] {
    -webkit-appearance: none; height: 6px; background: var(--color-border);
    border-radius: 99px; outline: none; padding: 0; border: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    background: var(--color-accent); border-radius: 50%; cursor: pointer;
    transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Tool info box */
.tool-info-box {
    background: var(--color-accent-light); border-left: 3px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1rem 1.25rem; margin: 1rem 0; font-size: 0.9375rem;
    color: var(--color-text);
}

/* Sortable file list (for merge PDF, etc.) */
.sortable-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sortable-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; background: var(--color-bg-secondary);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    cursor: grab; user-select: none; transition: box-shadow 0.15s;
}
.sortable-item:active { cursor: grabbing; box-shadow: 0 8px 24px var(--color-shadow-md); }
.sortable-item.drag-over-item { border-color: var(--color-accent); background: var(--color-accent-light); }
.drag-handle { color: var(--color-text-muted); font-size: 1.1rem; flex-shrink: 0; }

/* Preview image in image tools */
.image-preview-wrapper {
    position: relative; overflow: hidden; border-radius: var(--radius-md);
    background: repeating-conic-gradient(#e2e8f0 0% 25%, transparent 0% 50%) 0 0/20px 20px;
    max-height: 320px;
}
.image-preview-wrapper img { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; object-fit: contain; }

/* Comparison slider (before/after) */
.compare-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-md); cursor: col-resize; user-select: none; }
.compare-before, .compare-after { position: absolute; top: 0; left: 0; height: 100%; }
.compare-before img, .compare-after img { display: block; height: 100%; object-fit: cover; pointer-events: none; }
.compare-handle {
    position: absolute; top: 0; bottom: 0; width: 3px; background: #fff;
    cursor: col-resize; transform: translateX(-50%);
}
.compare-handle::before, .compare-handle::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 36px; height: 36px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.compare-handle::before { top: calc(50% - 18px); }

/* Loading dots animation */
@keyframes bounce-dots {
    0%, 80%, 100% { transform: scale(0); }
    40%            { transform: scale(1); }
}
.loading-dots { display: inline-flex; gap: 4px; }
.loading-dots span {
    width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%;
    animation: bounce-dots 1.4s ease infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0.32s; }