/* Clip Library: scan, preview and assemble a coaching sequence. */
body[data-workspace=library] { overflow: auto; }
body[data-workspace=library] .app-shell { height: auto; min-height: 100vh; grid-template-rows: auto 1fr; overflow: visible; }
body[data-workspace=library] .workspace { overflow: visible; }
body[data-workspace=library] .topbar { height: auto; min-height: 66px; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; padding: 12px 20px; }
body[data-workspace=library] .topbar .tabs { min-width: 0; width: auto; }
body[data-workspace=library] .topbar .tab { min-width: 0; padding: 10px 12px; }
body[data-workspace=library] .topbar-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#libraryView.active { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0,1.4fr); grid-template-rows: auto auto auto auto; gap: 16px; height: auto; min-height: 0; overflow: visible; padding: 18px 20px; }
#libraryView .library-workbar { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
#libraryView h2 { font-size: 22px; margin: 0; }
#libraryView h3 { font-size: 16px; margin: 0 0 10px; }
#libraryView p { color: #aebbc9; font-size: 14px; line-height: 1.5; margin: 6px 0; }
#libraryView .panel-button, #libraryView .primary-button, #libraryView .mini-button { width: auto; min-height: 36px; padding: 8px 12px; border-radius: 6px; margin: 0; font-size: 14px; box-shadow: none; }
#libraryView .library-filterbar { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #2c3945; }
#libraryView .library-filterbar input[type=text] { flex: 1 1 220px; width: auto; }
#libraryView .library-filterbar select { flex: 0 1 200px; width: auto; }
#libraryView .library-filterbar .toggle-row { margin: 0; font-size: 14px; }
#libraryView input:not([type=checkbox]):not([type=range]), #libraryView select, #libraryView textarea { border-radius: 6px; color: #edf3f9; background: #17222d; border: 1px solid #3b4956; padding: 8px 10px; font-size: 14px; min-width: 0; }
#libraryView .library-collection { grid-column: 1; grid-row: 3; min-width: 0; }
#libraryView .library-bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; }
#libraryView .library-bulkbar label { display: flex; gap: 6px; align-items: center; }
#libraryView #clipList { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; padding: 0; }
#libraryView .library-row { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid transparent; border-left: 3px solid var(--clip-color,#5c7183); border-radius: 5px; background: #111b25; }
#libraryView .library-row.active { border-color: #89d9b4; background: #1c302b; border-left-color: var(--clip-color); }
#libraryView .library-row button { display: grid; gap: 5px; min-width: 0; width: 100%; padding: 3px; color: #f2f6fa; text-align: left; background: transparent; border: 0; }
#libraryView .library-row strong { font-size: 14px; overflow-wrap: anywhere; }
#libraryView .library-row .clip-meta { color: #b5c3d0; font-size: 12px; }
#libraryView .library-row .clip-note { font-size: 13px; color: #c1cbd5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#libraryView .library-inspector { grid-column: 2; grid-row: 3/5; min-width: 0; padding: 16px; border: 1px solid #2c3945; border-radius: 8px; background: #0e151e; align-self: start; }
#libraryView .library-preview { padding: 0; background: none; border: 0; border-radius: 0; }
#libraryView #libraryPreviewVideo { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16/9; object-fit: contain; background: #020509; border-radius: 6px; }
#libraryView .library-preview-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; }
#libraryView .library-preview-controls button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 6px; }
#libraryView .library-preview-controls select { width: 80px; }
#libraryView #libraryPreviewTime { font-size: 12px; }
#libraryView #libraryScrubber { width: 100%; margin: 8px 0; }
#libraryView .library-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
#libraryView .library-primary-actions #deleteClip { margin-left: auto; }
#libraryView #libraryFeedback { color: #9ee9c6; font-size: 14px; min-height: 22px; }
#libraryView .library-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#libraryView .library-editor > label { display: grid; gap: 5px; font-size: 14px; margin: 0; }
#libraryView .library-editor > label:has(#clipTitle), #libraryView .library-editor > label:has(#clipNotes), #libraryView .library-editor .field-help, #libraryView .library-trim-actions { grid-column: 1/-1; }
#libraryView .library-editor .toggle-row { display: flex; align-items: center; }
#libraryView .library-trim-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#libraryView .library-playlist { grid-column: 1; grid-row: 4; min-width: 0; padding: 16px; border: 1px solid #2c3945; border-radius: 8px; align-self: start; }
#libraryView .library-playlist > label { display: grid; gap: 5px; font-size: 14px; margin: 10px 0; }
#libraryView .library-playlist .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
#libraryView #playlistList { max-height: 360px; overflow: auto; margin: 10px 0; }
#libraryView .playlist-item { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 8px; padding: 10px 0; border: 0; border-bottom: 1px solid #2c3945; border-radius: 0; background: transparent; }
#libraryView .playlist-item strong { font-size: 14px; overflow-wrap: anywhere; }
#libraryView .playlist-item small { display: block; font-size: 12px; color: #aebbc9; }
#libraryView .playlist-reorder { display: flex; gap: 4px; }
#libraryView .playlist-reorder button { padding: 4px 6px; min-height: 30px; }
#libraryView :focus-visible { outline: 2px solid #9ee9c6; outline-offset: 2px; }
@media(max-width:1100px) { body[data-workspace=library] .topbar { display:flex; flex-wrap:wrap; } body[data-workspace=library] .tabs { flex:1 1 360px; } #libraryView.active { grid-template-columns: minmax(240px,.85fr) minmax(0,1.3fr); padding:12px; gap:12px; } }
@media(max-width:760px) { #libraryView.active { grid-template-columns:minmax(0,1fr); } #libraryView .library-collection { grid-column:1; grid-row:3; } #libraryView .library-inspector { grid-column:1; grid-row:4; } #libraryView .library-playlist { grid-column:1; grid-row:5; } #libraryView #clipList { max-height:360px; } body[data-workspace=library] .topbar .tabs { flex-basis:100%; order:3; } }
@media(max-width:760px) {
  body[data-workspace=library] .topbar .tabs { display:flex; }
  body[data-workspace=library] .topbar .tab { flex:1; white-space:normal; padding:8px; }
  #libraryView .library-editor { grid-template-columns:minmax(0,1fr); }
  #libraryView .library-inspector, #libraryView .library-playlist { padding:12px; }
}