/* B-roll: lanes under the timeline, floating clip toolbar, library modal. Additive — existing
   selectors are only touched under .broll-active (a take with clips) so the two boxes read as one panel. */

.reel-editor-broll { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0 var(--space-2, 8px); }
.reel-editor-broll-lanes { height: 0; overflow: hidden; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-top: 1px dashed var(--color-border-light, #eef0f5); border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); transition: height 120ms ease; }
.reel-editor-broll-lanes:not(.has-clips) { border: none; }
.broll-lanes-scroll { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; }
.broll-lanes-scroll::-webkit-scrollbar { height: 6px; }
.broll-lanes-scroll::-webkit-scrollbar-track { background: transparent; }
.broll-lanes-scroll::-webkit-scrollbar-thumb { background: var(--color-border, #e5e7eb); border-radius: 3px; }
.broll-lanes-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-text-light, #6b7280); }
.broll-lanes-canvas { display: block; }

/* While a take has clips: the timeline box loses its bottom corners and its own scrollbar, so the
   lanes box below (same border) continues it and owns the single horizontal scrollbar. */
.reel-editor-timeline-dock.broll-active .reel-editor-timeline { padding-bottom: 0; }
.reel-editor-timeline-dock.broll-active .timeline-editor { border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; border-bottom: none; }
.reel-editor-timeline-dock.broll-active .timeline-scroll-container { scrollbar-width: none; }
.reel-editor-timeline-dock.broll-active .timeline-scroll-container::-webkit-scrollbar { height: 0; display: none; }

/* Floating clip toolbar, parked under the selected clip */
.broll-toolbar.floating { position: absolute; z-index: 6; --broll-accent: #6366f1; --broll-tint: #eef0ff; background: var(--broll-tint); border: 1px solid var(--broll-accent); border-top-width: 3px; border-radius: 8px; padding: 4px 8px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12); white-space: nowrap; flex-wrap: nowrap; }
.broll-toolbar.floating.is-image { --broll-accent: rgba(217, 119, 6, 0.9); --broll-tint: #fdf1dc; }
.broll-toolbar.floating.is-video { --broll-accent: rgba(13, 148, 136, 0.9); --broll-tint: #dcf3f0; }
.broll-toolbar.floating::before { content: ''; position: absolute; top: -10px; left: var(--broll-caret-x, 20px); margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--broll-accent); }
.broll-toolbar.floating::after { content: ''; position: absolute; top: -6px; left: var(--broll-caret-x, 20px); margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom-color: var(--broll-tint); }
.broll-toolbar.floating .broll-tb-name, .broll-toolbar.floating select { background: #fff; }
.broll-toolbar.floating .broll-tb-sep { background: var(--broll-accent); opacity: 0.35; }
.broll-tb-thumb { width: 36px; height: 24px; border-radius: 4px; background: var(--broll-tint) center / cover no-repeat; border: 1px solid var(--broll-accent); flex-shrink: 0; }
.broll-tb-name { width: 150px; font-size: 12px; padding: 3px 7px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: #fff; }
.broll-tb-name:focus { outline: 2px solid rgba(99, 102, 241, 0.35); border-color: #6366f1; }

.reel-editor-broll-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; background: transparent; min-height: 38px; }
.reel-editor-broll-bar .broll-add-btn { white-space: nowrap; }
.broll-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-light, #6b7280); }
.broll-toolbar:empty { display: none; }
.broll-toolbar .broll-tb-label { font-weight: 600; color: var(--color-text, #111827); }
.broll-toolbar .broll-tb-sep { width: 1px; height: 18px; background: var(--color-border, #e5e7eb); }
.broll-toolbar label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.broll-toolbar select { font-size: 12px; padding: 2px 6px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: #fff; }
.broll-toolbar .btn { padding: 3px 9px; font-size: 12px; }
.broll-toolbar .broll-tb-hint { color: var(--color-text-lighter, #9ca3af); }

/* Library modal */
.broll-library-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.55); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.broll-library-modal { background: var(--color-bg, #fff); border-radius: 14px; width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.broll-library-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 8px; }
.broll-library-head h3 { margin: 0 0 4px; font-size: 18px; }
.broll-library-head p { margin: 0; }
.broll-library-close { border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--color-text-light, #6b7280); padding: 0 4px; }
.broll-library-actions { display: flex; align-items: center; gap: 12px; padding: 4px 20px 12px; }
.broll-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 20px 20px; overflow: auto; }
.broll-library-empty { grid-column: 1 / -1; padding: 30px 10px; text-align: center; }
.broll-tile { position: relative; border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; transition: box-shadow 120ms, transform 120ms; }
.broll-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-1px); }
.broll-tile-thumb { aspect-ratio: 1 / 1; background: #eef0f5 center / cover no-repeat; display: flex; align-items: flex-end; justify-content: flex-start; padding: 6px; }
.broll-tile-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; background: rgba(17,24,39,0.75); color: #fff; padding: 2px 6px; border-radius: 4px; }
.broll-tile-meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; font-size: 12px; }
.broll-tile-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broll-tile-info { font-size: 11px; }
.broll-tile-rename { position: absolute; top: 6px; left: 6px; height: 22px; padding: 0 8px; border-radius: 11px; border: none; background: rgba(17,24,39,0.7); color: #fff; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 120ms; }
.broll-tile:hover .broll-tile-rename { opacity: 1; }
.broll-tile-name-input { width: 100%; font-size: 12px; font-weight: 600; padding: 1px 4px; border: 1px solid #6366f1; border-radius: 4px; }
.broll-tile-delete { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(17,24,39,0.7); color: #fff; font-size: 16px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity 120ms; }
.broll-tile:hover .broll-tile-delete { opacity: 1; }

@media (max-width: 900px) {
    .reel-editor-broll-bar { padding: 6px 8px; }
    .broll-toolbar .broll-tb-hint { display: none; }
}

/* Build failure reason under a reel row (publish page) */
.reel-queue-build-error { font-size: 11px; color: var(--color-text-light, #6b7280); margin-top: 2px; white-space: normal; word-break: break-word; }