/* Timeline Editor Wrapper */
#timeline-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 2300;
    display: flex;
    flex-direction: column;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

#timeline-wrapper::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: transparent;
    pointer-events: none;
}

#timeline-wrapper:hover::before {
    pointer-events: auto;
}

#timeline-wrapper:hover,
#timeline-wrapper.expanded,
#timeline-wrapper.pinned {
    height: 230px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: 30px;
}

#timeline-main-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* Fill wrapper */
    position: relative;
    overflow: hidden;
    /* Manage overflow in children */
    margin-top: 0;
}

/* Ruler Container (Fixed Top) */
/* Ruler Container (Scrolls with parent) */
#timeline-ruler-container {
    height: 32px;
    background: #222;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: visible;
    /* Allow content to dictate width */
    z-index: 1000;
}

#timeline-ruler {
    height: 100%;
    width: 100%;
    /* Will be expanded by JS shim */
    position: relative;
}

/* Waveform Container (Scrollable Area) */
/* Waveform Container (Scrolls with parent) */
#timeline-waveform {
    flex: 1;
    min-height: 128px !important;
    /* Unified to WaveSurfer height */
    height: 128px !important;
    background: #fff;
    position: relative;
    overflow: visible;
    z-index: 100;
}

/* Shared Scroll Parent */
#timeline-main-content {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    /* The ONE scrollbar */
    overflow-y: hidden;
    position: relative;
    width: 100%;
    flex: 1;
    touch-action: none;
    /* Prevent browser from cancelling pointers for scroll/pinch */
}

/* Hide scrollbar for cleaner look if desired, but standard scrollbar is fine for now */

/* Playhead Handle (Triangle/Pentagon) */
#timeline-playhead-handle {
    position: absolute;
    /* top: 2px; */
    bottom: 0;
    /* Align to top of ruler */
    left: 0;
    transform: translateX(-50%);
    width: 16px;
    height: 22px;
    background: #2196f3;
    /* Blue pentagon shape */
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
    z-index: 2000;
    cursor: ew-resize;
    pointer-events: auto;
    /* Remove border-based triangle styles */
    border: none;
}

/* Playhead Line (extends into waveform) */
/* We will likely need a separate element for the line in the waveform container, 
   OR use the WS cursor. WS cursor is standard. 
   We just need to make sure WS cursor top matches. 
   WS cursor is inside shadow DOM usually or container. 
*/

/* Timeline Threshold and Marquee */
.timeline-threshold-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 0, 0, 0.4);
    border-top: 1px dashed rgba(255, 0, 0, 0.6);
    pointer-events: none;
    z-index: 10;
}

.timeline-marquee {
    position: absolute;
    border: 1px dashed #3498db;
    background-color: rgba(52, 152, 219, 0.2);
    pointer-events: none;
    z-index: 1000;
}

/* Editing Tools */
.timeline-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.icon-button {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.icon-button:hover {
    background: #e0e0e0 !important;
}

.icon-button.active {
    background: #3498db !important;
    color: white !important;
    border-color: #2980b9 !important;
}

.editing-button {
    font-size: 1.1em !important;
    padding: 2px 8px !important;
    min-width: 36px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #ccc;
    cursor: pointer;
}

.editing-button.active-mode {
    background: #555 !important;
    color: #fff !important;
    border-color: #333 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mode-specific cursors */
.mode-split-active,
.mode-split-active * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='24' x='0'>✂️</text></svg>") 0 24, cell !important;
}

.mode-delete-active,
.mode-delete-active * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='24' x='0'>✖️</text></svg>") 0 24, no-drop !important;
}

.mode-add-active,
.mode-add-active * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='24' x='0'>➕</text></svg>") 0 24, crosshair !important;
}

.mode-join-active,
.mode-join-active * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size:24px'><text y='24' x='0'>🔗</text></svg>") 0 24, copy !important;
}

/* WaveSurfer v7 Shadow DOM Piercing */
::part(region) {
    box-sizing: border-box !important;
    border: 1px solid rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 !important;
    transition: top 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    /* Do NOT override scale here */
    position: relative !important;
}

/* Target both variants of v7 content parts */
::part(content),
::part(region-content) {
    border: none !important;
    /* Basic text container flow */
    position: relative !important;
    height: 100% !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #333 !important;
    text-shadow: 0 0 2px #fff;
    overflow: visible !important;
    pointer-events: none !important;
    /* Don't block dragging */
    box-sizing: border-box !important;
    padding: 2px 4px !important;
    margin: 0 !important;
}

::part(selected) {
    background-color: rgba(255, 215, 0, 0.2) !important;
    border: 2px solid #ffd700 !important;
    box-sizing: border-box !important;
    /* Ensure border doesn't add height */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
    z-index: 1500 !important;
    /* Always on top of other layers when selected */
}

/* Isolate handles so they don't affect flex flow */
::part(handle-left),
::part(handle-right) {
    position: absolute !important;
    z-index: 10 !important;
}

.timeline-time-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    transform: translateX(-50%);
    white-space: nowrap;
    top: -30px;
    display: none;
}

.timeline-time-tooltip.visible {
    display: block;
}