/* Toolbar */
.toolbar {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%) scale(var(--scale-factor));
    transform-origin: bottom center;
    background: rgba(18, 18, 24, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 100;
    transition: all 0.3s ease;
    width: auto;
    max-width: 95vw;
    user-select: none;
    -webkit-user-select: none;
}

.toolbar:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.tool-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Sliders Row (Top of Toolbar) */
.sliders-row {
    gap: 20px;
    padding: 0 10px;
    width: 100%;
    justify-content: center;
}

.sliders-row .slider-row {
    min-width: 180px;
}

/* Hide top-level separators */
.toolbar > .tool-separator {
    display: none;
}

/* Internal Separators (inside groups) */
.tool-group .tool-separator {
    display: block;
    width: 2px;
    height: 35px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.05)
    );
    margin: 0 3px;
    border-radius: 2px;
}

.tool-btn {
    width: 52px;
    height: auto;
    min-height: 58px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px 4px;
    gap: 4px;
}

.tool-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    opacity: 0.8;
    text-align: center;
    width: auto;
    line-height: 1.1;
    white-space: nowrap;
    font-stretch: condensed;
    transform: scaleX(0.85);
    transform-origin: center;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px) scale(1.05);
}

.tool-btn:hover .tool-label {
    opacity: 1;
}

.tool-btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: currentColor;
    box-shadow: 0 0 15px currentColor; /* Glow using the button's color */
}

.tool-btn svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

.tool-btn-danger {
    width: 52px;
    height: auto;
    min-height: 58px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 6px 4px;
    gap: 4px;
}

.tool-btn-danger:hover {
    background: var(--danger);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
    transform: translateY(-3px);
}

/* Sliders in Toolbar */
.sliders-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 130px;
    padding-right: 8px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-icon {
    color: var(--text-dim);
    width: 20px;
    min-width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-row input[type="range"] {
    flex: 1;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    outline: none;
}

.slider-row input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-radius: 6px;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--text-dim);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    margin-top: -2px; /* Center thumb vertically: (12px track - 16px thumb) / 2 = -2px */
}

.slider-row input[type="range"]:hover::-webkit-slider-thumb {
    background: var(--primary);
    transform: scale(1.2);
}

/* Tool Colors (Gradient Spectrum) */
/* Tools Group */
#tool-pen { color: #ff6b6b; }
#tool-airbrush { color: #ff9f43; }
#tool-fill { color: #feca57; }
#tool-smudge { color: #1dd1a1; }
#tool-eraser { color: #2e86de; }
#tool-pipette { color: #54a0ff; }
#tool-selection { color: #a855f7; }

#tool-rect { color: #ff9ff3; }
#tool-circle { color: #D980FA; }
#tool-triangle { color: #9980FA; }
#tool-line { color: #fd79a8; }

/* Actions Group */
#btn-undo { color: #c8d6e5; }
#btn-redo { color: #c8d6e5; }
#btn-help { color: #576574; }


/* SVG Gradients Application */
#tool-pen svg { stroke: url(#grad-pen); }
#tool-airbrush svg { stroke: url(#grad-airbrush); }
#tool-fill svg { stroke: url(#grad-fill); }
#tool-smudge svg { stroke: url(#grad-smudge); }
#tool-eraser svg { stroke: url(#grad-eraser); }
#tool-pipette svg { stroke: url(#grad-pipette); }
#tool-selection svg { stroke: url(#grad-selection); }

#tool-rect svg { stroke: url(#grad-rect); }
#tool-circle svg { stroke: url(#grad-circle); }
#tool-triangle svg { stroke: url(#grad-triangle); }
#tool-line svg { stroke: url(#grad-line); }

#btn-undo svg { stroke: url(#grad-undo); }
#btn-redo svg { stroke: url(#grad-redo); }
#btn-help svg { stroke: url(#grad-help); }


/* Updated Sliders Row Layout */
.sliders-row {
 margin-bottom: 15px;
 padding-bottom: 10px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sliders-row .slider-row {
 flex: 1;
 min-width: 150px;
}


/* Slider Labels */
.slider-row {
 flex-direction: column;
 align-items: stretch;
 gap: 5px;
}

.slider-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding-left: 2px;
}

.slider-label {
 font-size: 0.65rem;
 color: var(--text-dim);
 text-transform: uppercase;
 font-weight: 600;
 letter-spacing: 0.5px;
}


/* Disable transition when dragging */
.toolbar.dragging {
 transition: none !important;
}


#tool-model { color: #0984e3; }
#tool-model svg { stroke: url(#grad-model); }


.tool-separator.hidden-spacer {
    visibility: hidden;
}

/* Disabled State for Tool Buttons */
.tool-btn:disabled,
.tool-btn[disabled] {
    opacity: 0.2 !important;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(100%);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.tool-btn:disabled .tool-label,
.tool-btn[disabled] .tool-label {
    user-select: none;
}