/* 全景图查看器界面样式 —— 本项目自己写的，无任何第三方样式或图片 */

:root {
	--bar-bg: rgba(10, 18, 32, 0.3);
	--bar-bg-hover: rgba(30, 46, 70, 0.62);
	--accent: #35a3ff;
	--border: rgba(255, 255, 255, 0.14);
	/* 工具条按钮尺寸（原来是 38x32，按需求放大 2~3 倍），字比按钮小一号 */
	--btn-minw: 86px;
	--btn-height: 62px;
	--btn-font: 18px;
	--btn-radius: 16px;
	--toolbar-gap: 8px;
	--thumbs-height: 96px;
	/* 地图面板宽度：map.js 拖动时会改写这个值 */
	--map-width: 420px;
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
	background: #0b1220;
	color: #fff;
	font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, Helvetica, sans-serif;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

#stage {
	position: fixed;
	inset: 0;
	background: #0b1220;
}

#pano {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

#pano.dragging { cursor: grabbing; }

/* ---------------------------------------------------------------- 顶部标题 */
#topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	background: linear-gradient(to bottom, rgba(4, 10, 20, 0.72), rgba(4, 10, 20, 0));
	pointer-events: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#title { font-weight: 600; letter-spacing: 0.5px; }
#counter { opacity: 0.75; font-size: 12px; }

/* ------------------------------------------------------------------ 工具条 */
#toolbar {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(var(--thumbs-height) + 36px);
	display: flex;
	align-items: center;
	gap: var(--toolbar-gap);
	padding: 8px 12px;
	background: var(--bar-bg);
	backdrop-filter: blur(6px);
	border: 1px solid var(--border);
	border-radius: 28px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
	max-width: 96vw;
	overflow-x: auto;
	scrollbar-width: none;
	z-index: 20;
}

#toolbar::-webkit-scrollbar { height: 0; }

#toolbar button {
	min-width: var(--btn-minw);
	height: var(--btn-height);
	padding: 0 18px;
	font-size: var(--btn-font);
	line-height: 1;
	white-space: nowrap;
	font-family: inherit;
	color: #eaf2ff;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--btn-radius);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

#toolbar button:hover { background: var(--bar-bg-hover); border-color: var(--border); }
#toolbar button:active { transform: translateY(1px); }
#toolbar button.active { background: var(--accent); color: #04121f; font-weight: 600; }
#toolbar .sep { width: 1px; height: 40px; background: var(--border); margin: 0 6px; flex: 0 0 auto; }

/* -------------------------------------------------------------- 缩略图条 */
#thumbs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--thumbs-height);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	background: linear-gradient(to top, rgba(4, 10, 20, 0.82), rgba(4, 10, 20, 0));
	scrollbar-width: thin;
	z-index: 15;
}

#thumbs::-webkit-scrollbar { height: 6px; }
#thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }

#thumbs .thumb {
	position: relative;
	flex: 0 0 auto;
	width: 128px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.22);
	cursor: pointer;
	background: #16202f;
	transition: border-color 0.15s, transform 0.15s;
}

#thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#thumbs .thumb:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.55); }
#thumbs .thumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(53, 163, 255, 0.35); }
#thumbs .thumb .cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 5px;
	font-size: 11px;
	line-height: 16px;
	background: rgba(0, 0, 0, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- 天地图 */
#map-panel {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--map-width);
	min-width: 280px;
	max-width: 94vw;
	/* 面板压在缩略图和工具条下面：这样它们不用让位，也不会被地图挡住点不到 */
	z-index: 12;
	background: #0e1622;
	border-right: 1px solid var(--border);
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	transition: transform 0.28s ease;
}

#map-panel.hidden { transform: translateX(-102%); }
#map-panel.resizing { transition: none; }

/* 右边缘拖拽把手：拖动可以把面板拉大 / 拉小 */
#map-resize {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 12px;
	cursor: col-resize;
	z-index: 3;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12));
	touch-action: none;
}

#map-resize::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 4px;
	height: 54px;
	margin-top: -27px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.5);
}

#map-resize:hover,
#map-panel.resizing #map-resize {
	background: linear-gradient(to right, rgba(53, 163, 255, 0), rgba(53, 163, 255, 0.4));
}

/* 地图容器自己形成层叠上下文：天地图内部元素z-index很高，
   不隔离的话会把右上角的 ＋－/全览/标注/✕ 按钮盖住（曾经就是这个毛病）。 */
#map {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	position: relative;
	z-index: 0;
	background: #16202f;
}

#map-tools {
	position: absolute;
	right: 10px;
	top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 10;
}

#map-tools button {
	width: 38px;
	height: 38px;
	font-size: 16px;
	font-family: inherit;
	color: #0d1a29;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#map-tools button:hover { background: #fff; }
#map-tools button:active { transform: translateY(1px); }
#map-tools #map-fit, #map-tools #map-type { width: 38px; height: 38px; font-size: 12px; padding: 0; }
#map-tools #map-close {
	background: rgba(255, 236, 236, 0.96);
	color: #8d1b1b;
	font-size: 17px;
	font-weight: 700;
	border-color: rgba(160, 40, 40, 0.35);
}
#map-tools #map-close:hover { background: #ffdede; }

#map-hint {
	flex: 0 0 auto;
	padding: 6px 10px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.35);
	border-top: 1px solid var(--border);
}

/* 场景标记（天地图标注用的图标在 map.js 里用内联 SVG 生成，不引用外部图片） */
.vr-marker { cursor: pointer; }

/* ------------------------------------------------------------ 提示与状态 */
#loading {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	font-size: 13px;
	background: rgba(6, 14, 26, 0.78);
	border: 1px solid var(--border);
	border-radius: 8px;
	z-index: 40;
	transition: opacity 0.25s;
}

#loading.done { opacity: 0; pointer-events: none; }

.spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#hint {
	position: fixed;
	left: 50%;
	bottom: calc(var(--thumbs-height) + 140px);
	transform: translateX(-50%);
	padding: 6px 14px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(6, 14, 26, 0.6);
	border-radius: 999px;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.6s;
	z-index: 18;
}

#hint.fade { opacity: 0; }

#error {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 78vw;
	padding: 16px 20px;
	font-size: 13px;
	line-height: 1.6;
	background: rgba(60, 12, 12, 0.92);
	border: 1px solid rgba(255, 120, 120, 0.5);
	border-radius: 8px;
	z-index: 50;
	white-space: pre-wrap;
}

.hidden { display: none !important; }

/* ?debug=1 的诊断信息（排查用，正常不带这个参数时不会出现） */
#debug {
	position: fixed;
	left: 8px;
	bottom: 8px;
	margin: 0;
	padding: 8px 10px;
	font: 13px/1.5 Consolas, "Courier New", monospace;
	color: #7dff9b;
	background: rgba(0, 0, 0, 0.82);
	border: 1px solid rgba(125, 255, 155, 0.4);
	border-radius: 6px;
	z-index: 999;
	white-space: pre;
}

/* 地图面板是浮层：工具条与缩略图保持原位，不再被面板顶开
   （面板 z-index 比它们低，所以照样点得到） */

/* 隐藏界面的“纯净模式”：?ui=0 只留全景画面，便于嵌入或截图 */
body.no-ui #topbar,
body.no-ui #toolbar,
body.no-ui #thumbs,
body.no-ui #hint,
body.no-ui #map-panel,
body.no-ui #loading { display: none !important; }

/* 窄屏：按钮跟着缩小（仍比原来大），缩略图条矮一点 */
@media (max-width: 700px) {
	:root {
		--btn-minw: 54px;
		--btn-height: 46px;
		--btn-font: 14px;
		--btn-radius: 12px;
		--thumbs-height: 78px;
	}
	#toolbar { padding: 6px 8px; bottom: calc(var(--thumbs-height) + 18px); }
	#thumbs .thumb { width: 104px; height: 58px; }
	#hint { display: none; }
	#map-panel { max-width: 96vw; }
	#map-resize { width: 18px; }
}