/* =============================================
   Panel Dock — wrapper for boardPanel + notesBox
   ============================================= */

#panelDock {
	position: fixed;
	top: 150px;
	right: 50px;
	z-index: 50;
	display: flex;
	flex-direction: column;
}

/* Resize ghost outline shown during drag */
.ui-resizable-helper {
	border: 2px dashed #999;
	background: rgba(0, 0, 0, 0.05);
	z-index: 100;
}

/* =============================================
   Board Panel
   ============================================= */

#boardPanel {
	position: relative;
	width: 453px;
	text-align: center;
	background-color: #fff;
}

body img { /* fixing chess piece animation bug */
	z-index: 51;
}

/* Top bar (drag handle) */
#boardPanelTopBar {
	height: 30px;
	background-image: url("../../img/boardTop.png");
	background-size: cover;
	cursor: move;
	position: relative;
}

#boardPanelTitle {
	padding-left: 10px;
	font-weight: bold;
	font-size: 12px;
	color: #555;
	position: relative;
	top: 7px;
	letter-spacing: 0.5px;
}

.boardPanelTopBarButton {
	position: absolute;
	top: 5px;
	cursor: pointer;
}

#replay4Button {
	right: 62px;
}

#expandBoardButton {
	right: 8px;
}

#flipBoardButton {
	right: 35px;
}

/* Board + eval column container */
#boardContainer {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

#board {
	flex: 1;
	background-color: #404040;
}

#evalColumn {
	width: 32px;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #fff;
}

#evalColumn.hidden {
	display: none;
}

#evalBar-white, #evalBar-black {
	flex-grow: 1;
	flex-shrink: 0;
	min-height: 0;
	border-right: 2px solid #b3b3b3;
}

#evalBar-black {
	background: #e7e7e7;
}

#evalBar-white {
	background: #e7e7e7;
}

#evalBar-black.has-evaluation {
	background: linear-gradient(to right,
		rgba(0, 0, 0, 0.8) 0%,
		#555 15%,
		#555 85%,
		rgba(0, 0, 0, 0.7) 100%);
}

#evalBar-white.has-evaluation {
	background: linear-gradient(to right,
		rgba(100, 100, 100, 0.6) 0%,
		#ccc 15%,
		#ccc 85%,
		rgba(100, 100, 100, 0.6) 100%);
}

#evalValue {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 10px;
	color: #000;
	z-index: 10;
	pointer-events: none;
	line-height: 1;
	margin-top: 1px;
}

#evalDepth {
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 9px;
	z-index: 10;
	pointer-events: none;
	line-height: 1;
}

/* Outcome bar */
#outcomeBarRow {
	display: flex;
	align-items: stretch;
	border-left: thin solid #666;
	border-right: thin solid #666;
	border-top: thin solid #666;
	border-bottom: thin solid #666;
}

#outcomeBarLabel {
	font-size: 11px;
	padding: 0 3px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

#outcomeBar {
	flex: 1;
	height: 18px;
	border-left: thin solid #666;
	display: flex;
	overflow: hidden;
}

.outcome-segment {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 12px;
	cursor: default;
	overflow: hidden;
	white-space: nowrap;
	flex-shrink: 0;
	flex-grow: 0;
}

#outcomeBar-white {
	background-color: #fff;
	color: #000;
}

#outcomeBar-tie {
	background-color: #888;
	color: #000;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#outcomeBar-black {
	background-color: #000;
	color: #fff;
}

/* Move buttons — flex layout */
#moveButtons {
	display: flex;
	align-items: stretch;
	border: thin solid #040;
	background-color: #040;
	gap: 1px;
	overflow: hidden;
	/* Proportional height: at 453px width, height is 52px */
	aspect-ratio: 453 / 52;
}

#upDownButtons {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex-shrink: 0;
}

#upDownButtons img {
	flex: 1;
	min-height: 0;
	cursor: pointer;
	background: #fff;
	display: block;
	object-fit: fill;
}

.moveButton {
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
	background: #fff;
	display: block;
	object-fit: fill;
}

/* Bottom info box */
td, tr, table {
	margin: 0;
	padding: 0;
	border-spacing: 0px;
}

#bottomInfoBox {
	width: 100%;
	border: thin solid #bbb;
	padding: 2px 5px;
	color: #888;
	font-size: 11px;
	
	box-sizing: border-box;
}

#moveNumberBox {
	text-align: left;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

#gameCountBox {
	text-align: right;
	font-size: 10px;
	visibility: hidden;
}

#gameCountText {
	color: #333;
}

/* =============================================
   Notes Box — dockable panel
   ============================================= */

#notesBox {
	position: relative;
	width: 100%;
	background: #fff;
	border: 1px solid #d0d0d0;
	border-top: 0;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	color: #333;
	box-sizing: border-box;
}

/* When undocked, floats independently */
#notesBox.undocked {
	position: fixed;
	z-index: 60;
	width: 260px;
	border-top: 1px solid #d0d0d0;
	border-radius: 3px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

#notesBoxHeader {
	position: relative;
	height: 24px;
	line-height: 24px;
	padding: 0 8px;
	background: #f5f5f5;
	border-bottom: 1px solid #e0e0e0;
	cursor: move;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#notesBox.undocked #notesBoxHeader {
	border-radius: 3px 3px 0 0;
}

#notesBoxTitle {
	font-size: 11px;
	font-weight: 600;
	color: #666;
	/* text-transform: uppercase; */
	letter-spacing: 0.5px;
}

/* Notes gear icon & settings popup */
#notesGearBtn {
	position: absolute;
	right: 6px;
	width: 14px;
	height: 14px;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.15s;
}
#notesGearBtn:hover {
	opacity: 0.8;
}

#notesSettingsPopup {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.13);
	padding: 8px 10px;
	z-index: 100;
	white-space: nowrap;
}
#notesSettingsPopup.open {
	display: block;
}
#notesSettingsPopup label {
	font-size: 11px;
	font-weight: 600;
	color: #666;
	display: block;
	margin-bottom: 5px;
}
#notesFontSizeOptions {
	display: flex;
	gap: 4px;
}
#notesFontSizeOptions button {
	min-width: 28px;
	height: 24px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #f5f5f5;
	color: #333;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	padding: 0 6px;
}
#notesFontSizeOptions button:hover {
	background: #e8e8e8;
}
#notesFontSizeOptions button.active {
	background: #4a90d9;
	color: #fff;
	border-color: #3a7bc8;
}

#notesBoxContent {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

#notesBox textarea {
	width: 100%;
	resize: none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#titleRow {
	display: flex;
	align-items: stretch;
}

#annotationDropdown {
	width: 42px;
	flex-shrink: 0;
	border: 0;
	border-left: thin solid #ddd;
	border-bottom: thin solid #ddd;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	background: #fff;
	padding: 0 2px;
}

#titleBox {
	flex: 1;
	min-width: 0;
	border: 0;
	border-bottom: thin solid #ddd;
	height: 22px;
	padding: 2px 6px;
	font-size: 12px;
}

#commentBox {
	border: 0;
	padding: 4px 6px;
	font-size: 12px;
	flex: 1;
	min-height: 40px;
}

#titleBox::placeholder,
#commentBox::placeholder {
	font-style: italic;
	color: #c0c0c0;
	opacity: 1;
}

#titleBox::-webkit-input-placeholder,
#commentBox::-webkit-input-placeholder {
	font-style: italic;
	color: #c0c0c0;
	opacity: 1;
}

#titleBox::-moz-placeholder,
#commentBox::-moz-placeholder {
	font-style: italic;
	color: #c0c0c0;
	opacity: 1;
}

/* =============================================
   Resize handle styling
   ============================================= */

.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}

.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
}

/* Override jQuery UI theme icon on SE handle */
.ui-resizable-se.ui-icon {
	background-image: none !important;
	text-indent: 0;
}

.ui-resizable-sw {
	cursor: sw-resize;
	width: 12px;
	height: 12px;
	left: -5px;
	bottom: -5px;
}

.ui-resizable-w {
	cursor: w-resize;
	width: 6px;
	left: -3px;
	top: 0;
	height: 100%;
}

/* PanelDock south resize handle (only exists when notes are undocked) */
#panelDock > .ui-resizable-s {
	cursor: s-resize;
	height: 6px;
	bottom: -3px;
	left: 0;
	width: 100%;
}

/* Notes box resize handle (south only when docked) */
#notesBox .ui-resizable-s {
	cursor: s-resize;
	height: 6px;
	bottom: -3px;
	left: 0;
	width: 100%;
}

/* Notes box resize handle (SE when undocked) */
#notesBox.undocked .ui-resizable-se {
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	cursor: se-resize;
}