/* Desktop: video library as a vertical, scrollable list on the left. Mobile keeps the swipe row. */
@media(min-width:601px){
 .reel-dock{position:absolute;left:clamp(16px,2.5vw,40px);top:50%;bottom:auto;right:auto;transform:translateY(-50%);width:clamp(132px,11vw,170px);max-width:none;display:grid;gap:8px;max-height:min(78svh,760px)}
 .reel-dock-label{text-align:center;margin:0}
 .reel-track{display:flex;flex-direction:column;align-items:stretch;gap:12px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior-y:contain;touch-action:pan-y;padding:4px 8px 12px 4px;max-height:calc(min(78svh,760px) - 28px);scrollbar-width:thin;scrollbar-color:#4aafff55 transparent;mask-image:linear-gradient(#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
 .reel-track .reel-tile{flex:0 0 auto;width:auto;height:auto;min-height:0;scroll-snap-align:start}
 .reel-track .reel-tile img{height:96px}
 .reel-track .reel-tile .play{top:32px}
 .reel-track .reel-tile:hover{transform:translateX(4px)}
}
@media(min-width:601px) and (max-height:550px){
 .reel-dock{width:110px;max-height:86svh}.reel-track{gap:8px}.reel-track .reel-tile img{height:52px}.reel-track .reel-tile .play{top:10px}
}