/* JS enables these views; without it both panels remain accessible. */
body .fx-content .fx-chip-list[data-studio-switch],
body .fx-content .studio-show-preview { display: none; }
@media (max-width: 760px) {
    body .fx-content [data-studio-view] [data-studio-switch] {
        display: flex; margin: 0 0 18px; scroll-margin-top: 12px;
    }
    body .fx-content [data-studio-view] .studio-show-preview {
        display: inline-flex; margin: 0 0 12px; min-height: 44px; padding: 10px 16px;
        border: 1px solid var(--fx-border); border-radius: var(--fx-radius-pill);
        background: var(--fx-bg-subtle); color: var(--fx-text-main); font: inherit; font-size: 13px; cursor: pointer;
    }
    .sv4:not([data-studio-layout="steps"])[data-studio-view="settings"] .sv-preview,
    .sv4:not([data-studio-layout="steps"])[data-studio-view="preview"] .sv-settings,
    .ys:not([data-studio-layout="steps"])[data-studio-view="settings"] .ys-viewer,
    .ys:not([data-studio-layout="steps"])[data-studio-view="preview"] .ys-settings { display: none; }
    .ys[data-studio-view="preview"] .ys-quick-audio { display: none; }
    .sv-settings { display: grid; gap: 16px; }
    .ys:not([data-studio-layout="steps"])[data-studio-view="settings"] .ys-settings { order: -1; }
    .ys:not([data-studio-layout="steps"])[data-studio-view="settings"] .ys-export { margin-top: 0; padding-top: 0; border-top: 0; }
    .sv4[data-studio-view] .sv-head { padding-bottom: 22px; }
    .sv4[data-studio-view] .sv-head h2 { font-size: 32px; }
}

/* Three-screen Studio shell. Desktop layout and the capture canvas stay intact. */
.studio-save-label-mobile { display: none; }

/* Shared mint sliders, still native inputs for touch, arrows and screen readers. */
body .fx-content :is(.sv4,.ys) input[type="range"] {
    appearance: none; -webkit-appearance: none; display: block;
    width: 100%; min-width: 0; height: 32px; min-height: 32px;
    margin: 4px 0; padding: 0; border: 0; border-radius: 8px;
    background: transparent; accent-color: #38e8c5; cursor: pointer;
}
body .fx-content :is(.sv4,.ys) input[type="range"]::-webkit-slider-runnable-track {
    height: 5px; border-radius: 99px;
    background: linear-gradient(90deg,#38e8c5 var(--studio-range-fill,0%),#454b56 var(--studio-range-fill,0%));
}
body .fx-content :is(.sv4,.ys) input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: #454b56; }
body .fx-content :is(.sv4,.ys) input[type="range"]::-moz-range-progress { height: 5px; border-radius: 99px; background: #38e8c5; }
body .fx-content :is(.sv4,.ys) input[type="range"]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px;
    margin-top: -6.5px; border: 3px solid #13171c; border-radius: 50%;
    background: #38e8c5; box-shadow: 0 0 0 1px #38e8c5,0 2px 8px #0005;
}
body .fx-content :is(.sv4,.ys) input[type="range"]::-moz-range-thumb {
    box-sizing: border-box; width: 18px; height: 18px; border: 3px solid #13171c;
    border-radius: 50%; background: #38e8c5; box-shadow: 0 0 0 1px #38e8c5,0 2px 8px #0005;
}
body .fx-content :is(.sv4,.ys) input[type="range"]:focus-visible { outline: 2px solid #38e8c5; outline-offset: 3px; }
body .fx-content :is(.sv4,.ys) input[type="range"]:disabled { cursor: not-allowed; opacity: .5; }
.studio-waveform { min-width: 0; padding: 8px 10px 0; background: #101217; border: 1px solid #303640; border-radius: 12px; }
.studio-waveform canvas { display: block; width: 100%; height: 48px; border-radius: 5px; }
body .fx-content :is(.sv4,.ys) .studio-waveform input[type="range"] { margin: 0; }
.studio-waveform:focus-within { border-color: #38e8c5; }

/* One timeline, one hit target: the native range spans the waveform itself.
   It remains keyboard/screen-reader accessible; the canvas draws its position. */
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive {
    position: relative; padding: 0; border: 0; border-radius: 8px; background: transparent;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive canvas {
    width: 100%; height: 56px; border-radius: 8px; pointer-events: none;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive input[type="range"] {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 44px;
    margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive input[type="range"]::-webkit-slider-thumb {
    width: 2px; height: 44px; margin-top: -19.5px; border: 0; box-shadow: none;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive input[type="range"]::-moz-range-thumb {
    width: 2px; height: 44px; border: 0; box-shadow: none;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive:focus-within {
    outline: 2px solid #38e8c5; outline-offset: 3px;
}
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive:has(input:disabled) { opacity: .45; }
body .fx-content :is(.sv4,.ys) .studio-waveform.is-interactive input[type="range"]:disabled { cursor: default; }

@media (max-width: 760px) {
    body .fx-content [data-studio-layout="steps"] {
        padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
        scroll-margin-top: 76px;
    }
    body .fx-content [data-studio-layout="steps"] [data-studio-inactive="true"] { display: none !important; }
    [data-studio-layout="steps"] [data-studio-panel] { scroll-margin-top: 80px; }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
        position: fixed; left: 50%; transform: translateX(-50%);
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: calc(100% - 20px); max-width: 620px; box-sizing: border-box;
        margin: 0; padding: 7px; z-index: 30;
        background: rgba(22, 24, 29, .97); border: 1px solid #3b4048; border-radius: 22px;
        box-shadow: 0 8px 40px #0009; backdrop-filter: blur(18px);
    }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] button {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; min-width: 0; min-height: 58px; padding: 8px 3px; margin: 0;
        font: inherit; font-size: 11px; line-height: 1.2; font-weight: 600;
        border: 0; border-radius: 15px; background: transparent; color: #a7adba; cursor: pointer;
    }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] button[aria-current] {
        color: #c1a8ff; background: rgba(122, 77, 245, .15);
    }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] button:disabled { opacity: .45; cursor: wait; }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] svg {
        width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round;
    }
    body .fx-content [data-studio-layout="steps"] [data-studio-switch] button:focus-visible {
        outline: 2px solid #b49bff; outline-offset: 1px;
    }
    body .fx-content [data-studio-layout="steps"] .studio-show-preview { display: none; }
    [data-studio-layout="steps"] .studio-save-label-desktop { display: none; }
    [data-studio-layout="steps"] .studio-save-label-mobile { display: inline; }
    body .fx-content [data-studio-layout="steps"] .studio-save {
        width: 100%; min-height: 52px; border-radius: 13px; border: 1px solid #a88be64a;
        background-color: #7a4df5; color: #fff; font-weight: 750;
        background-image: linear-gradient(90deg, #267d77 0%, #267d77 100%);
        background-repeat: no-repeat; background-position: left center;
        background-size: var(--studio-save-progress, 0%) 100%;
        transition: background-size .18s linear;
    }
    body .fx-content [data-studio-layout="steps"] .studio-save.is-saving:disabled { opacity: 1; cursor: wait; }
    body .fx-content [data-studio-layout="steps"] .studio-save.is-indeterminate {
        background-image: linear-gradient(90deg, transparent, #267d77, transparent);
        background-size: 60% 100%; animation: studio-save-working 1.4s ease-in-out infinite;
    }
    @keyframes studio-save-working { from { background-position: -150% 0; } to { background-position: 250% 0; } }
}
@media (prefers-reduced-motion: reduce) {
    body .fx-content [data-studio-layout="steps"] .studio-save { transition: none; animation: none; }
}