/* Base container styling */
.sandbox-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-third);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, Ubuntu, "Droid Sans", sans-serif;
    line-height: 1.6;
}

/* Header toolbar styling */
.sandbox-header {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--color-third);
    border-bottom: 1px solid var(--color-border-color);
    height: 34px;
    flex-shrink: 0;
}

.fxhash-waiting-wrapper {
    padding: var(--spacing-sm);
    color: var(--color-note-text);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.fxhash-waiting {
    padding: var(--spacing-sm);
}

.sandbox-label {
    background: transparent;
    border: none;
    color: var(--color-note-text);
    font-size: 1.0rem;
    padding: var(--spacing-xsm);
    cursor: pointer;
    border-radius: var(--border-radius-button);
    transition: background 0.2s;
    margin-left: auto;
}

.sandbox-section-heading {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: var(--font-size-md);
    color: var(--color-note-text);
    /* margin: var(--spacing-sm); */
    margin-top: var(--spacing-xsm);
    margin-bottom: var(--spacing-xsm);
    display: block;
    text-align: center;
    padding-top: var(--spacing-sm);
    border-top: thin solid var(--color-border-color);
}
.sandbox-section-heading:first-of-type{
    padding-top: 0;
    border-top: none; 
}
.sandbox-label:hover {
    color: var(--color-text);
}

.sandbox-path-input {
    width: 100%;
    padding: 0.15rem var(--spacing-sm);
    padding-left: 0.25rem;
    font-size: var(--font-size-xsm);
    font-family: var(--font-family);
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-text);
    outline: none;
    padding-right: 1.75rem;
    transition: all 0.2s ease;
    max-width: 300px;
}

.sandbox-path-input:focus {
    border-color: var(--color-border-hover);
    border-color: var(--color-accent2);
    color: var(--color-text);
}

/* Scrollable content area */
.sandbox-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-hover) var(--color-file-explorer);
    position: relative;
    /* padding: var(--spacing-sm);
    padding-top: var(--spacing-xsm); */
    padding: var(--spacing-sm);
    padding-bottom: 10px;
    background-color: var(--color-third);
    
}

/* Form styling */
.sandbox-param-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);

}

/* FXHash Controls Container */
.sandbox-fxhash-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* Row inside the fxhash control section */
.sandbox-fxhash-controls>div {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
    padding: 0 0;
    padding: 0 var(--spacing-sm);
}
.sandbox-fxhash-controls>div:last-of-type{
    /* padding: 0 0;    */
}
/* Align label sizes consistently */
.sandbox-fxhash-controls label.sandbox-param-label {
    flex: 0 0 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Label spacing in controls */
.sandbox-fxhash-controls>div:first-child {
    margin-top: 0;
}

.sandbox-fxhash-controls label {
    font-weight: 600;
    color: var(--color-textHilight);
    min-width: 80px;
}

/* Readonly inputs */
.sandbox-fxhash-controls input[type="text"] {
    background-color: var(--color-third);
    border: 1px solid var(--color-border-color);
    border-radius: 4px;
    padding: var(--spacing-xsm) var(--spacing-sm);
    font-size: var(--font-size-sm);
    flex-grow: 1;
    color: var(--color-text);
    width: auto;
    min-width: 120px;
}

/* Buttons */
.sandbox-fxhash-controls button {
    background-color: var(--color-fourth);
    border: 1px solid transparent;
    border-radius: 4px !important;
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-xsm);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.sandbox-fxhash-controls button:hover {
    background-color: var(--color-fifth);
    border-color: var(--color-border-hover);
    color: var(--color-textHilight);
}

.sandbox-fxhash-controls button.active {
    background-color: var(--color-fifth);
    color: var(--color-textHilight);
    border-color: var(--color-border-hover);
}

/* Ensure context buttons wrap nicely */
.sandbox-fxhash-controls>div:last-child {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.fxhash-controls-row {
    width: 100%;
}

.fxhash-controls-row button {
    flex-grow: 1;
    padding: var(--spacing-sm) var(--spacing-sm);
}

/* Randomize button */
.sandbox-param-form>button {
    margin: 0;
    background-color: var(--color-fifth);
    color: var(--color-text);
    border: 1px solid var(--color-border-hover);
    border-radius: 4px;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.15s ease;
    align-self: flex-start;
    width: 100%;
    margin: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    max-width: calc(100% - var(--spacing-sm) - var(--spacing-sm));
}

.sandbox-param-form>button:hover {
    border-color: var(--color-accent2);
    background-color: var(--color-accent2);
    color: var(--color-accent2-text);
}

/* Parameter rows */
.sandbox-param-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* background-color: var(--color-fourth); */
    padding: 0 var(--spacing-sm);
    border-radius: 4px;
    /* border: 1px solid var(--color-border-color); */
    transition: all 0.15s ease;
}

.sandbox-param-row:hover {
    /* border-color: var(--color-border-hover);
    background-color: var(--color-fourth); */
}

.sandbox-param-label {
    flex: 1.2;
    font-weight: 600;
    font-size: var(--font-size-xsm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-textHilight);
}

.sandbox-param-control {
    flex: 2;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sandbox-param-control input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: var(--color-border-color);
    border-radius: 3px;
    outline: none;
}

.sandbox-param-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent2);
    cursor: pointer;
}

.sandbox-param-control input[type="text"],
.sandbox-param-control select {
    flex: 1;
    padding: var(--spacing-xsm) var(--spacing-sm);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: var(--font-size-xsm);
    background-color: var(--color-third);
}

.sandbox-param-control input[type="text"]:focus,
.sandbox-param-control select:focus {
    border-color: var(--color-accent2);
    outline: none;
}

.sandbox-param-control input[type="color"] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.sandbox-param-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.sandbox-param-control input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--color-border-color);
    border-radius: 4px;
}

.sandbox-param-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-accent2);
}

.sandbox-param-value {
    font-family: monospace;
    font-size: var(--font-size-xsm);
    color: var(--color-note-text);
    background-color: var(--color-third);
    border: 1px solid var(--color-border-color);
    border-radius: 4px;
    padding: var(--spacing-xsm) var(--spacing-sm);
    max-width: 80px;
    min-width: 40px;
    text-align: right;
    pointer-events: none;
    margin-left: var(--spacing-sm);
}

.sandbox-param-value:focus {
    outline: none;
    border-color: var(--color-border-hover);
}


.sandbox-param-lock {
    font-size: var(--font-size-lg);
    color: var(--color-note-text);
    padding: var(--spacing-xsm);
    transition: all 0.15s ease;
}

.sandbox-param-lock:hover {
    color: var(--color-accent2);
}

.code-driven {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Disabled controls */
.sandbox-param-row[title="code-driven"] {
    opacity: 0.7;
}

.sandbox-param-control input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Scoped input styles */
.sandbox-param-form input[type="text"],

.sandbox-param-form select {
    font-family: var(--font-family);
    font-size: 0.75rem;
    padding: var(--spacing-sm) var(--spacing-sm);
    border: 1px solid var(--color-border-color);
    border-radius: 4px;
    background: var(--color-third);
    color: var(--color-text);
    min-width: 0;
    flex: 1 1 auto;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sandbox-param-form select {
    border: 1px solid var(--color-border-color)
}

.sandbox-param-form input[type="text"]:focus,
.sandbox-param-form input[type="color"]:focus,
.sandbox-param-form select:focus {
    border-color: var(--color-accent2);
    outline: none;
}

.sandbox-color-preview {
    border: 1px solid var(--color-border-hover)

}

/* .sandbox-color-preview {
     background-image:
        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
     background-size: 10px 10px;
     background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  } */

/* Scoped slider base */
.sandbox-param-form input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 200px;
    background: transparent;
    border: none;
    outline: none;
    flex-shrink: 0;
}

/* WebKit Track */
.sandbox-param-form input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--color-border-color);
    border-radius: 3px;
}

/* Firefox Track */
.sandbox-param-form input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--color-border-color);
    border-radius: 3px;
}

/* IE/Edge Track */
.sandbox-param-form input[type="range"]::-ms-track {
    height: 6px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

/* WebKit Thumb */
.sandbox-param-form input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 13px;
    width: 13px;
    margin-top: -4px;
    background: var(--color-accent2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Firefox Thumb */
.sandbox-param-form input[type="range"]::-moz-range-thumb {
    height: 13px;
    width: 13px;
    background: var(--color-accent2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* IE/Edge Thumb */
.sandbox-param-form input[type="range"]::-ms-thumb {
    height: 13px;
    width: 13px;
    background: var(--color-accent2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Hover effect */
.sandbox-param-form input[type="range"]::-webkit-slider-thumb:hover,
.sandbox-param-form input[type="range"]::-moz-range-thumb:hover,
.sandbox-param-form input[type="range"]::-ms-thumb:hover {
    background: var(--color-accent2-hover);
}

/* Adjust layout so label doesn't truncate early */
.sandbox-param-form .sandbox-param-label {
    flex: 0 0 110px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}
.sandbox-param-form .feature-label{
    flex: 0 0 50%;
    max-width: 60%;  
}
.sandbox-param-form .sandbox-param-control {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    min-width: 0;
}