:root {
    --sequencer-background-colour: var(--indi-light-transparent);
    --sequencer-foreground-colour: var(--indi-light-text-colour);
    --sequencer-background-hover: var(--indi-light-colour);
    
    --sequencer-header-background: var(--indi-primary-colour);
    --sequencer-header-foreground: var(--indi-primary-text-colour);
    
    --sequencer-timeline-gray: #808080;
}

.indi-sequencer {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    flex-grow: 1;
    background-color: var(--sequencer-background-colour);
    color: var(--sequencer-foreground-colour);
    height: 0; /* Must force a concrete height (this acts like a min-height and flex-grow will expand it) otherwise scroll on .hierarchy-body breaks */
    transition: background-color 0.5s ease;
}

.indi-sequencer:hover {
    background-color: var(--sequencer-background-hover);
}

.sequencer-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 36px;
    border: none;
    padding: 6px;
    background-color: var(--sequencer-header-background);
    color: var(--sequencer-header-foreground);
}

.indi-sequencer .sequencer-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.indi-sequencer .sequencer-action-btn {
    padding: 4px 8px;
    color: var(--sequencer-header-foreground);
}

.indi-sequencer .sequencer-action-btn:hover {
    color: var(--indi-secondary-colour);
}

.sequencer-body {
    display: flex;
    flex-flow: column nowrap;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

/** ===== SEQUENCE SELECTOR ===== **/
.sequencer-sequence-selector {
    display: flex;
    flex-flow: column nowrap;
    gap: 6px;
    padding: 6px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sequencer-header-background);
}

.sequencer-sequence-selector .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sequencer-sequence-selector label {
    font-size: 0.85rem;
    color: var(--sequencer-foreground-colour);
    margin: 0;
    flex-shrink: 0;
}

.sequencer-sequence-selector-row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px;
}

.sequencer-sequence-selector-row i {
    font-size: 0.85rem;
    width: 1em;
    text-align: center;
}

.sequencer-sequence-dropdown {
    flex: 1;
    min-width: 0;
    padding: 2px;
    font-size: 0.85rem;
    background-color: var(--sequencer-background-colour);
    color: var(--sequencer-foreground-colour);
    border: 1px solid var(--sequencer-background-hover, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
    cursor: pointer;
}

.sequencer-sequence-dropdown:hover,
.sequencer-sequence-dropdown:focus {
    border-color: var(--indi-primary-colour, #2563eb);
    outline: none;
}

.sequencer-sequence-name-input {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    font-size: 0.85rem;
    background-color: var(--sequencer-background-colour);
    color: var(--sequencer-foreground-colour);
    border: 1px solid var(--sequencer-background-hover, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
}

.sequencer-sequence-name-input:hover,
.sequencer-sequence-name-input:focus {
    border-color: var(--indi-primary-colour);
    outline: none;
}

.sequencer-sequence-import-btn {
    flex-shrink: 0;
    color: var(--sequencer-foreground-colour);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sequencer-sequence-import-btn:hover {
    color: var(--sequencer-header-background);
}

/** ===== SEQUENCE STEPS LIST ===== **/
.sequencer-steps {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.sequencer-steps-empty {
    display: block;
    text-align: center;
    font-style: italic;
    font-size: small;
    color: var(--sequencer-foreground-colour);
    opacity: 0.65;
    padding: 1em;
}

.sequencer-step-wrapper {
    display: flex;
    flex-flow: row nowrap;
    overflow: visible;
    flex: 1;
    min-height: 0;
    position: relative;
}

/** ===== REORDER STEP DROP LINE INDICATOR ===== **/
.sequencer-step-wrapper.drop-before::before,
.sequencer-step-wrapper.drop-after::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 32px;
    height: 3px;
    background-color: var(--indi-secondary-colour);
    border-radius: 1px;
    z-index: 1;
}

.sequencer-step-wrapper.drop-before::before {
    top: 0;
}

.sequencer-step-wrapper.drop-after::after {
    bottom: 0;
}

/** ===== REORDER STEP TOP AND BOTTOM DROP ZONES ===== **/
.sequencer-drop-front,
.sequencer-drop-end {
    min-height: 20px;
}

.sequencer-drop-end {
    flex: 1;
}

.sequencer-drop-front.active,
.sequencer-drop-end.active {
    background-color: color-mix(in srgb, var(--indi-secondary-colour) 15%, transparent);
}

.sequencer-drop-front.active {
    margin: 0 32px 0 4px;
}

.sequencer-drop-end.active {
    position: absolute;
    left: 4px;
    right: 32px;
}

/* ===== STEP ====== */
.sequencer-step-container {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    cursor: pointer;
    margin: 0 4px;
    border-bottom: 1px solid var(--indi-primary-light);
}

.sequencer-step-container:hover {
    background-color: var(--sequencer-header-background);
    color: var(--sequencer-header-foreground);
}

.sequencer-step-container:hover .sequencer-step-title,
.sequencer-step-container:hover .sequencer-add-effect,
.sequencer-step-container:hover .sequencer-step-action-btn,
.sequencer-step-container:hover .sequencer-reorder-handle {
    color: var(--sequencer-header-foreground);
}

.sequencer-step-container.dragging {
    opacity: 0.4;
}

/* ===== STEP HEADER ROW ===== */
.sequencer-step-item {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    position: relative;
    min-height: 28px;
    min-width: 0;
}

/* ===== STEP REORDER DRAG HANDLE ===== */
.sequencer-reorder-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 20px;
    flex-shrink: 0;
    cursor: grab;
    color: var(--sequencer-foreground-colour);
    opacity: 0.4;
}

.sequencer-reorder-handle:hover {
    opacity: 1;
}

.sequencer-reorder-handle:active {
    cursor: grabbing;
}

/* ===== STEP ITEM ===== */
.indi-sequencer .sequencer-step-item .indi-button {
    padding: 2px 4px;
    width: 20px;
    height: 20px;
    border: none;
}

.indi-sequencer .sequencer-step-title {
    color: var(--sequencer-foreground-colour);
    text-align: left;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 4px;
    line-height: 20px;
    font: inherit;
}

.sequencer-step-title-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 0 4px;
    border: 1px solid var(--sequencer-background-hover, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
}

.sequencer-step-title-input:hover,
.sequencer-step-title-input:focus {
    border-color: var(--indi-primary-colour);
    outline: none;
}

.indi-sequencer .sequencer-step-item .sequencer-step-action-btn {
    padding: 2px 4px;
    flex-shrink: 0;
    font-size: 1em;
    color: var(--sequencer-foreground-colour);
}

.indi-sequencer .sequencer-step-item .sequencer-step-action-btn:hover:not(:disabled) {
    color: var(--indi-secondary-colour);
}

/* ===== STEP EFFECTS ===== */
.sequencer-step-effects {
    display: flex;
    flex-flow: column nowrap;
    gap: 4px;
    padding: 4px 8px 8px 16px;
    cursor: default;
}

.sequencer-effect-item {
    display: flex;
    flex-flow: column nowrap;
    gap: 2px;
    padding: 4px 8px;
    font-size: 0.85em;
    background-color: var(--sequencer-background-colour);
    border-radius: 4px;
    min-width: 0;
    overflow: hidden;
}

.sequencer-effect-header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.sequencer-effect-asset {
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--sequencer-foreground-colour);
    cursor: pointer;
}

.sequencer-effect-delete {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sequencer-foreground-colour);
}

.sequencer-effect-delete:hover {
    opacity: 1;
    color: var(--sequencer-header-background);
}

.sequencer-effect-controls {
    padding: 4px 0 2px;
    display: grid;
    grid-template-columns: auto auto 1px auto minmax(80px, 1fr);
    grid-auto-rows: auto;
    column-gap: 6px;
    row-gap: 2px;
    align-items: center;
}

.sequencer-effect-controls > span {
    font-size: 0.8em;
    opacity: 0.7;
    white-space: nowrap;
    line-height: 1;
}

.sequencer-effect-controls input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 4px;
    accent-color: var(--sequencer-header-background);
}

.sequencer-effect-controls input[type="color"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    border: none;
    background: transparent;
}

.sequencer-effect-controls .indi-slider {
    padding: 6px 0;
    width: 100%;
    min-width: 60px;
}

.sequencer-effect-controls input[type="text"] {
    padding: 2px 4px;
    border: 1px solid var(--sequencer-foreground-colour, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
}

.sequencer-effect-controls input[type="text"]:hover,
.sequencer-effect-controls input[type="text"]:focus {
    border-color: var(--indi-primary-colour);
    outline: none;
}

.sequencer-effect-separator {
    width: 1px;
    height: 100%;
    flex-shrink: 0;
    background-color: var(--sequencer-timeline-gray);
}

.sequencer-add-effect {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 0.8em;
    color: var(--sequencer-foreground-colour);
    border-radius: 2px;
}

.sequencer-add-effect.can-add {
    cursor: pointer;
    color: var(--sequencer-header-background);
}

.sequencer-add-effect.can-add:hover {
    color: var(--indi-secondary-colour);
}

.sequencer-add-effect.disabled {
    opacity: 0.5;
    font-style: italic;
}

/** ===== SEQUENCER STEP TIMELINE  **/
.sequencer-timeline {
    margin-right: 4px;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 24px;
    min-width: 24px;
    cursor: pointer;
    position: relative;
}

.sequencer-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: var(--sequencer-timeline-gray);
    transform: translateX(-50%);
    transition: background-color 0.2s ease;
}

.sequencer-timeline.preview-stopped {
    cursor: default;
}

.sequencer-timeline.timeline-active::before {
    background-color: var(--sequencer-header-background);
}

.sequencer-timeline.preview-stopped::before {
    background-color: var(--sequencer-timeline-gray);
}

.sequencer-timeline-step {
    position: relative;
    flex: 1;
}

.sequencer-step-point {
    position: absolute;
    left: 50%;
    font-size: 0.3em;
    color: var(--sequencer-timeline-gray);
}

.sequencer-timeline.preview-stopped .sequencer-step-point {
    color: var(--sequencer-timeline-gray);
}

.sequencer-step-point.reset {
    top: 0;
    transform: translate(-50%, -50%);
}

.sequencer-step-point:not(.reset) {
    bottom: 0;
    transform: translate(-50%, 50%);
}

.sequencer-step-point.passed {
    color: var(--sequencer-header-background);
}

.sequencer-timeline-thumb {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: grid;
    place-items: center;
    font-size: 1em;
    color: var(--sequencer-header-background);
    z-index: 2;
    cursor: grab;
    transition: transform 200ms ease;
}

.sequencer-timeline.preview-stopped .sequencer-timeline-thumb {
    display: none;
}

.sequencer-timeline-thumb.reset {
    bottom: auto;
    top: 0;
    transform: translate(-50%, -50%);
}

.sequencer-timeline-thumb > * {
    grid-area: 1 / 1;
}

.sequencer-timeline-thumb .sequencer-timeline-thumb-bg {
    color: var(--sequencer-header-foreground);
}

/* Timeline slider drag state */
.indi-sequencer.timeline-dragging {
    user-select: none;
}

.indi-sequencer.timeline-dragging,
.indi-sequencer.timeline-dragging * {
    cursor: grabbing !important;
}

/** ===== STEP NAV (sticky bottom, play mode only) ===== **/
.sequencer-bottom-nav {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 6px 8px;
    gap: 8px;
    background-color: var(--sequencer-header-background);
    color: var(--sequencer-header-foreground);
    border-top: 1px solid var(--sequencer-background-hover, rgba(0, 0, 0, 0.12));
}

.indi-sequencer .sequencer-nav-btn {
    padding: 4px 8px;
    color: var(--sequencer-header-foreground);
}

.indi-sequencer .sequencer-nav-btn:hover:not(:disabled),
.indi-sequencer .sequencer-nav-btn:hover:not(:disabled) i {
    color: var(--indi-secondary-colour);
}

.sequencer-nav-step {
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}