/* ===== App-wide ===== */
body {
    background: #16181d;
}

/* ===== Editor layout =====
   Rows: toolbar / preview area (shrinkable) / timeline (fixed, ALWAYS visible).
   minmax(0,1fr) + min-height:0 let the preview shrink instead of pushing the
   timeline below the fold on short screens. */
.editor-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    grid-template-areas:
        "toolbar toolbar toolbar"
        "sidebar preview props"
        "timeline timeline timeline";
    height: calc(100vh - 57px);
    overflow: hidden;
}

.editor-toolbar { grid-area: toolbar; border-bottom: 1px solid #2a2d34; padding: .4rem .75rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.editor-sidebar { grid-area: sidebar; border-right: 1px solid #2a2d34; overflow-y: auto; padding: .75rem; min-height: 0; }
.editor-preview {
    grid-area: preview; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0d0e11; position: relative; padding: .5rem;
}
.editor-props { grid-area: props; border-left: 1px solid #2a2d34; overflow-y: auto; padding: .75rem; font-size: .85rem; min-height: 0; }
.editor-timeline {
    grid-area: timeline; position: relative;
    border-top: 1px solid #2a2d34; background: #1a1c22; user-select: none;
    overflow-x: auto; overflow-y: auto;
    /* ruler 22 + 5 tracks x 42 = 232; cap so it never eats the preview entirely */
    height: min(240px, 45vh);
}

/* Narrower side panels on smaller screens; timeline always stays visible */
@media (max-width: 1200px) {
    .editor-shell { grid-template-columns: 230px minmax(0, 1fr) 230px; }
}
@media (max-width: 900px) {
    .editor-shell {
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-areas:
            "toolbar toolbar"
            "sidebar preview"
            "props   props"
            "timeline timeline";
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }
    .editor-props { border-left: 0; border-top: 1px solid #2a2d34; max-height: 22vh; }
}

/* ===== Media library ===== */
.media-item {
    display: flex; gap: .5rem; align-items: center;
    padding: .4rem; border-radius: .375rem; cursor: grab;
    border: 1px solid transparent;
}
.media-item:hover { background: #23262d; border-color: #2f333b; }
.media-item .thumb {
    width: 64px; height: 36px; background: #000 center/cover no-repeat;
    border-radius: .25rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.media-item .meta { min-width: 0; }
.media-item .meta .name { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-item .meta .info { font-size: .7rem; color: #8a919d; }

.dropzone {
    border: 2px dashed #3a3f49; border-radius: .5rem; padding: 1.25rem;
    text-align: center; color: #8a919d; font-size: .85rem; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: #4c8bf5; background: rgba(76, 139, 245, .08); }

/* ===== Preview stage =====
   aspect-ratio comes from the project canvas (inline style); the stage fits
   inside the shrinkable preview cell, so portrait/square projects display
   correctly instead of letterboxing inside a 16:9 box. */
.preview-stage {
    position: relative;
    max-width: 100%;
    max-height: calc(100% - 40px); /* leave room for the transport bar */
    margin: auto;
    background: #000;
    border-radius: .25rem;
    overflow: hidden;
    /* with aspect-ratio set, sizing by height keeps it inside the cell */
    height: 100%;
}
.preview-stage .video-js {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.preview-stage .video-js video { object-fit: contain; }
.preview-text-overlay {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2;
}
.preview-text-overlay .text-item {
    position: absolute; transform: translate(-50%, -50%);
    white-space: pre-wrap; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* ===== Timeline ===== */
.tl-empty-hint {
    position: sticky; left: 0; top: 40%; z-index: 7;
    text-align: center; color: #8a919d; font-size: .9rem;
    pointer-events: none;
}
.tl-ruler {
    position: relative; z-index: 5; height: 22px;
    background: #22252c; border-bottom: 1px solid #2a2d34;
    margin-left: 96px;
}
.tl-ruler .tick { position: absolute; top: 0; height: 100%; border-left: 1px solid #3a3f49; font-size: .6rem; color: #8a919d; padding-left: 3px; }

.tl-body { position: relative; }
.tl-track-row { display: flex; height: 42px; border-bottom: 1px solid #23262d; }
.tl-track-label {
    width: 96px; flex-shrink: 0; padding: .25rem .4rem; font-size: .65rem;
    color: #8a919d; background: #1e2127; border-right: 1px solid #2a2d34;
    position: sticky; left: 0; z-index: 4;
    display: flex; align-items: center; gap: .35rem;
}
.tl-track { position: relative; flex: 1; min-width: 2000px; }

.tl-clip {
    position: absolute; top: 4px; height: 32px; border-radius: .3rem;
    font-size: .68rem; color: #fff; overflow: hidden; cursor: grab;
    border: 1px solid rgba(255,255,255,.15);
    padding: .2rem .9rem .2rem .5rem;
    background: #3d5a99;
}
.tl-clip.type-audio { background: #2e7d51; }
.tl-clip.type-text { background: #8a5cb8; }
.tl-clip.type-image { background: #b8783a; }
.tl-clip.selected { outline: 2px solid #4c8bf5; z-index: 3; }
.tl-clip.dragging { opacity: .7; z-index: 10; cursor: grabbing; }
.tl-clip .clip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; pointer-events: none; }

.tl-clip .trim-handle {
    position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 2;
}
.tl-clip .trim-handle.left { left: 0; }
.tl-clip .trim-handle.right { right: 0; }
.tl-clip .trim-handle:hover { background: rgba(255,255,255,.25); }

.tl-playhead {
    position: absolute; top: 0; bottom: 0; width: 1px; background: #e05252;
    z-index: 6; pointer-events: none; margin-left: 96px;
}
.tl-playhead::before {
    content: ''; position: absolute; top: 0; left: -5px;
    border: 6px solid transparent; border-top-color: #e05252;
}

/* snap guide */
.tl-snapline { position: absolute; top: 0; bottom: 0; width: 1px; background: #f5c542; z-index: 5; pointer-events: none; margin-left: 96px; }

/* ===== Dashboard ===== */
.project-card { transition: transform .1s, box-shadow .1s; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.project-card .card-thumb {
    height: 120px; background: #0d0e11 center/cover no-repeat; border-radius: .375rem .375rem 0 0;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}