/**
 * MPV Thumbnails — sidebar, splitter, and thumbnail panel styles.
 */

.mpv-sidebar{
	position:relative;
	flex:0 0 var(--mpv-sidebar-width);
	width:var(--mpv-sidebar-width);
	flex-shrink:0;
	min-width:0;
	max-width:320px;
	overflow:auto;
	background:#fafafa;
	border-right:1px solid #e2e2e2;
	padding-top:0;
}

.mpv-viewer.mpv-sidebar-collapsed .mpv-sidebar{
	flex-basis:0;
	width:0;
	border-right:0;
	overflow:hidden;
	padding-top:0;
}

.mpv-splitter{
	flex:0 0 12px;
	cursor:col-resize;
	background:rgba(0,0,0,.03);
	position:relative;
	user-select:none;
	touch-action:none;
}

.mpv-viewer.mpv-compact .mpv-sidebar{
	max-width:280px;
}

.mpv-viewer.mpv-compact .mpv-splitter{
	flex-basis:16px;
}

.mpv-viewer.mpv-compact .mpv-splitter:after{
	left:7px;
}

.mpv-viewer.mpv-narrow .mpv-splitter{
	flex-basis:18px;
}

.mpv-viewer.mpv-narrow .mpv-thumbs{
	padding:8px;
}

.mpv-splitter:after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:5px;
	width:1px;
	background:rgba(0,0,0,.10);
}

.mpv-splitter:hover{
	background:rgba(0,0,0,.06);
}

/* Arrow indicator (click to collapse/expand when not dragging) */
.mpv-splitter:before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:0;
	height:0;
	opacity:.55;
}

/* Expanded: show a left-pointing arrow */
.mpv-viewer:not(.mpv-sidebar-collapsed) .mpv-splitter:before{
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-right:6px solid rgba(0,0,0,.55);
	margin-left:-1px;
}

/* Collapsed: show a right-pointing arrow */
.mpv-viewer.mpv-sidebar-collapsed .mpv-splitter:before{
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	border-left:6px solid rgba(0,0,0,.55);
	margin-left:1px;
}

.mpv-thumbs{
	padding:10px;
	display:flex;
	flex-direction:column;
	gap:var(--mpv-thumb-gap);
	align-items:stretch;
}

.mpv-viewer.mpv-splitter-dragging .mpv-thumb-canvas{
	transform:scale(var(--mpv-thumb-drag-scale, 1));
	transform-origin:top center;
	will-change:transform;
}

.mpv-thumb{
	display:flex;
	flex-direction:column;
	gap:var(--mpv-thumb-inner-gap);
	padding:var(--mpv-thumb-pad);
	border-radius:8px;
	border:1px solid transparent;
	cursor:pointer;
	width:100%;
	box-sizing:border-box;
}

.mpv-thumb:hover{
	background:#f1f1f1;
}

.mpv-thumb.is-active{
	border-color:rgba(0,0,0,.18);
	background:#ededed;
}

.mpv-thumb-canvas{
	width:100%;
	border-radius:6px;
	background:#fff;
	border:1px solid #e5e5e5;
	box-shadow:0 1px 2px rgba(0,0,0,.06);
	display:block;
	margin:0 auto;
	max-width:100%;
}

.mpv-thumb.mpv-thumb-lock .mpv-thumb-canvas{
	background:#fff url('../icons/general/lock.svg') no-repeat center;
	background-size:28px 28px;
}

.mpv-thumb-meta{
	font-size:12px;
	color:#333;
	opacity:.85;
	width:100%;
	text-align:center;
	line-height:1.1;
}