/* ============================================================================
 * vt-studio.css — Virtuo Light Studio: professional 360° light/exposure editor.
 * Dark, glassy, restrained. The panorama stays the hero; chrome floats over it.
 * Scoped under #vtStudio so nothing leaks into the normal tour viewer.
 * ========================================================================== */

#vtStudio {
	position: fixed; inset: 0; z-index: 9000;
	font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
	color: #e8edf3;
	pointer-events: none;                 /* only the chrome is interactive; the panorama shows through */
	opacity: 0; transition: opacity .35s ease;
	--vts-bg: rgba(16,19,25,.82);
	--vts-bg-solid: #14171d;
	--vts-stroke: rgba(255,255,255,.10);
	--vts-stroke-2: rgba(255,255,255,.16);
	--vts-accent: #7aa2ff;
	--vts-accent-soft: rgba(122,162,255,.18);
	--vts-text-dim: #9aa6b4;
}
#vtStudio.vts-in { opacity: 1; }
#vtStudio .vts-panel,
#vtStudio .vts-topbar,
#vtStudio .vts-tools { pointer-events: auto; }

/* soft vignette so the floating UI reads against any panorama */
#vtStudio::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(6,8,12,.42), rgba(6,8,12,0) 16%, rgba(6,8,12,0) 82%, rgba(6,8,12,.5)),
		radial-gradient(130% 90% at 50% 50%, rgba(6,8,12,0) 58%, rgba(6,8,12,.38));
	opacity: 0; transition: opacity .4s ease;
}
#vtStudio.vts-in::before { opacity: 1; }

/* ---- top bar ---- */
#vtStudio .vts-topbar {
	position: absolute; left: 16px; right: 16px; top: 14px; height: 52px;
	display: flex; align-items: center; gap: 14px; padding: 0 14px;
	background: var(--vts-bg); border: 1px solid var(--vts-stroke);
	border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	box-shadow: 0 10px 34px rgba(0,0,0,.42);
	transform: translateY(-14px); transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
#vtStudio.vts-in .vts-topbar { transform: translateY(0); }
#vtStudio .vts-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .3px; }
#vtStudio .vts-brand b { color: #fff; }
#vtStudio .vts-brand span { color: var(--vts-accent); font-weight: 700; }
#vtStudio .vts-scene { color: var(--vts-text-dim); font-size: 13px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vtStudio .vts-sep { width: 1px; height: 24px; background: var(--vts-stroke-2); }
#vtStudio .vts-spacer { flex: 1; }
#vtStudio .vts-status { font-size: 12px; color: var(--vts-text-dim); display: flex; align-items: center; gap: 7px; }
#vtStudio .vts-status .vts-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9a227; box-shadow: 0 0 8px rgba(201,162,39,.7); }

#vtStudio .vts-btn {
	display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
	background: rgba(255,255,255,.05); border: 1px solid var(--vts-stroke);
	border-radius: 9px; color: #dfe6ee; font-size: 13px; font-weight: 500; cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .08s ease;
	user-select: none;
}
#vtStudio .vts-btn:hover { background: rgba(255,255,255,.09); border-color: var(--vts-stroke-2); }
#vtStudio .vts-btn:active { transform: translateY(1px); }
#vtStudio .vts-btn[disabled] { opacity: .4; cursor: default; }
#vtStudio .vts-btn.vts-primary { background: var(--vts-accent); border-color: transparent; color: #0b1020; font-weight: 600; }
#vtStudio .vts-btn.vts-primary:hover { background: #8fb0ff; }
#vtStudio .vts-btn.vts-ghost { background: transparent; }
#vtStudio .vts-btn .vts-ico { font-size: 14px; line-height: 1; opacity: .9; }

/* ---- right panel ---- */
#vtStudio .vts-panel {
	position: absolute; right: 16px; top: 80px; bottom: 16px; width: 300px;
	display: flex; flex-direction: column;
	background: var(--vts-bg); border: 1px solid var(--vts-stroke);
	border-radius: 16px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	box-shadow: 0 18px 50px rgba(0,0,0,.5);
	transform: translateX(22px); transition: transform .42s cubic-bezier(.2,.7,.2,1);
	overflow: hidden;
}
#vtStudio.vts-in .vts-panel { transform: translateX(0); }
#vtStudio .vts-panel-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--vts-stroke); }
#vtStudio .vts-panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .2px; }
#vtStudio .vts-panel-head p { margin: 4px 0 0; font-size: 11.5px; color: var(--vts-text-dim); }
#vtStudio .vts-panel-body { padding: 10px 18px 18px; overflow-y: auto; flex: 1; }

/* ---- slider control ---- */
#vtStudio .vts-ctrl { margin: 18px 0; }
#vtStudio .vts-ctrl-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
#vtStudio .vts-ctrl-top label { font-size: 12.5px; font-weight: 600; color: #e8edf3; }
#vtStudio .vts-ctrl-top .vts-val { font-size: 12px; color: var(--vts-accent); font-variant-numeric: tabular-nums; cursor: pointer; }
#vtStudio .vts-ctrl-top .vts-val:hover { color: #a9c2ff; }
#vtStudio input[type=range].vts-range {
	-webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px;
	background: linear-gradient(to right, var(--vts-accent) 0%, var(--vts-accent) var(--fill,50%), rgba(255,255,255,.12) var(--fill,50%), rgba(255,255,255,.12) 100%);
	outline: none; cursor: pointer;
}
#vtStudio input[type=range].vts-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
	background: #fff; border: 1px solid rgba(0,0,0,.25);
	box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 0 var(--vts-accent-soft);
	transition: box-shadow .15s ease; margin-top: -6px;
}
#vtStudio input[type=range].vts-range:hover::-webkit-slider-thumb { box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 6px var(--vts-accent-soft); }
#vtStudio input[type=range].vts-range::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.25);
	box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
#vtStudio .vts-ctrl-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: #68727f; }

#vtStudio .vts-hint { margin-top: 22px; padding: 12px 13px; border: 1px dashed var(--vts-stroke-2); border-radius: 10px; font-size: 11.5px; line-height: 1.5; color: var(--vts-text-dim); }
#vtStudio .vts-hint b { color: #cdd6e0; font-weight: 600; }

/* ---- left tool rail (placeholder for upcoming tools) ---- */
#vtStudio .vts-tools {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%) translateX(-18px);
	display: flex; flex-direction: column; gap: 8px; padding: 8px;
	background: var(--vts-bg); border: 1px solid var(--vts-stroke);
	border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	box-shadow: 0 12px 34px rgba(0,0,0,.44);
	transition: transform .42s cubic-bezier(.2,.7,.2,1);
}
#vtStudio.vts-in .vts-tools { transform: translateY(-50%) translateX(0); }
#vtStudio .vts-tool {
	width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid transparent;
	color: #cdd6e0; font-size: 17px; cursor: pointer; position: relative;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#vtStudio .vts-tool:hover { background: rgba(255,255,255,.09); color: #fff; }
#vtStudio .vts-tool.on { background: var(--vts-accent-soft); border-color: var(--vts-accent); color: #fff; }
#vtStudio .vts-tool[data-soon]::after {
	content: "soon"; position: absolute; bottom: 2px; right: 3px; font-size: 7px; letter-spacing: .3px;
	color: #7a8696; text-transform: uppercase;
}
#vtStudio .vts-tool[disabled] { opacity: .45; cursor: default; }

/* the WebGL preview canvas sits above Pannellum but below the chrome; never eats pointer events */
#vt-studio-canvas { position: fixed; z-index: 8900; pointer-events: none; display: none; }

/* compare flash label */
#vtStudio .vts-compare-tag {
	position: absolute; left: 50%; top: 86px; transform: translateX(-50%);
	padding: 6px 14px; background: rgba(10,12,16,.78); border: 1px solid var(--vts-stroke-2);
	border-radius: 20px; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: #fff;
	opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
#vtStudio .vts-compare-tag.on { opacity: 1; }

/* ---- AI Remake ---- */
#vtStudio .vts-ai { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vts-stroke); }
#vtStudio .vts-sec-head h4 { margin: 0; font-size: 13.5px; font-weight: 600; }
#vtStudio .vts-sec-head p { margin: 4px 0 12px; font-size: 11.5px; color: var(--vts-text-dim); line-height: 1.45; }
#vtStudio .vts-ai-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#vtStudio .vts-ai-theme {
	display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 6px;
	background: rgba(255,255,255,.04); border: 1px solid var(--vts-stroke); border-radius: 10px;
	cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease;
}
#vtStudio .vts-ai-theme i { font-style: normal; font-size: 18px; line-height: 1; }
#vtStudio .vts-ai-theme span { font-size: 10px; color: var(--vts-text-dim); text-align: center; line-height: 1.2; }
#vtStudio .vts-ai-theme:hover { background: rgba(255,255,255,.08); }
#vtStudio .vts-ai-theme.on { background: var(--vts-accent-soft); border-color: var(--vts-accent); }
#vtStudio .vts-ai-theme.on span { color: #fff; }
#vtStudio .vts-ai-custom {
	width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px 10px; resize: vertical;
	background: rgba(0,0,0,.25); border: 1px solid var(--vts-stroke-2); border-radius: 9px;
	color: #e8edf3; font: 12px/1.45 inherit; font-family: inherit; outline: none;
}
#vtStudio .vts-ai-custom:focus { border-color: var(--vts-accent); }
#vtStudio .vts-ai-full { margin-top: 6px; font-size: 11px; color: var(--vts-text-dim); }
#vtStudio .vts-ai-full summary { cursor: pointer; user-select: none; }
#vtStudio .vts-ai-full div {
	margin-top: 6px; padding: 8px 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; line-height: 1.45;
	background: rgba(0,0,0,.25); border: 1px solid var(--vts-stroke); border-radius: 9px; color: #b9c2cd;
}
#vtStudio .vts-ai-sub { font-size: 11px; color: var(--vts-text-dim); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
#vtStudio .vts-ai-models { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#vtStudio .vts-ai-model {
	display: flex; flex-direction: column; gap: 2px; padding: 7px 9px;
	background: rgba(255,255,255,.04); border: 1px solid var(--vts-stroke); border-radius: 10px;
	cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease;
}
#vtStudio .vts-ai-model b { font-size: 11.5px; font-weight: 600; }
#vtStudio .vts-ai-model span { font-size: 10px; color: var(--vts-text-dim); line-height: 1.3; }
#vtStudio .vts-ai-model:hover { background: rgba(255,255,255,.08); }
#vtStudio .vts-ai-model.on { background: var(--vts-accent-soft); border-color: var(--vts-accent); }
#vtStudio .vts-ai-model.on span { color: #fff; }
#vtStudio .vts-ai-by { font-size: 10px; font-weight: 400; color: #8b95a3; margin-left: 4px; }
#vtStudio .vts-ai-go { width: 100%; justify-content: center; margin-top: 10px; box-sizing: border-box; }
#vtStudio .vts-ai-msg { font-size: 11.5px; color: #f0a35e; margin-top: 6px; min-height: 2px; }
#vtStudio .vts-ai-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#vtStudio .vts-ai-empty { font-size: 11.5px; color: #68727f; text-align: center; padding: 8px 0; }
#vtStudio .vts-ai-item {
	display: flex; gap: 10px; padding: 8px; border-radius: 11px;
	background: rgba(255,255,255,.035); border: 1px solid var(--vts-stroke);
}
#vtStudio .vts-ai-item.on { border-color: var(--vts-accent); background: var(--vts-accent-soft); }
#vtStudio .vts-ai-thumb { flex: 0 0 64px; height: 32px; border-radius: 6px; background: #0d1015 center/cover no-repeat; margin-top: 2px; }
#vtStudio .vts-ai-item.st-running .vts-ai-thumb:not([style]) { background-image: linear-gradient(110deg, #151a22 30%, #222a36 50%, #151a22 70%); background-size: 200% 100%; animation: vts-shimmer 1.3s linear infinite; }
#vtStudio .vts-ai-info { flex: 1; min-width: 0; }
#vtStudio .vts-ai-title { font-size: 12px; display: flex; justify-content: space-between; gap: 6px; }
#vtStudio .vts-ai-title span { color: #68727f; font-size: 10.5px; white-space: nowrap; }
#vtStudio .vts-ai-stage { font-size: 11px; color: var(--vts-text-dim); margin-top: 2px; }
#vtStudio .vts-ai-stage.vts-err { color: #f08a7e; line-height: 1.4; }
#vtStudio .vts-ai-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; }
#vtStudio .vts-ai-bar i { display: block; height: 100%; background: var(--vts-accent); border-radius: 2px; transition: width .6s ease; }
#vtStudio .vts-ai-acts { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
#vtStudio .vts-btn.vts-cancel { color: #f0a35e; border-color: rgba(240,163,94,.35); }
#vtStudio .vts-btn.vts-cancel:hover { background: rgba(240,163,94,.12); }
#vtStudio .vts-ai-item.st-cancelled .vts-ai-thumb { opacity: .45; }
#vtStudio .vts-btn.vts-mini { height: 26px; padding: 0 8px; font-size: 11px; border-radius: 7px; gap: 4px; }
#vtStudio .vts-btn.vts-mini.arm { background: rgba(240,138,126,.18); border-color: #f08a7e; color: #fff; }
#vtStudio .vts-def { font-style: normal; font-size: 10px; font-weight: 600; color: #f5c84c; background: rgba(245,200,76,.12); border: 1px solid rgba(245,200,76,.45); border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
#vtStudio .vts-btn.vts-setdef { color: #f5c84c; border-color: rgba(245,200,76,.35); }
#vtStudio .vts-btn.vts-setdef:hover { background: rgba(245,200,76,.12); }
#vtStudio .vts-ai-note { font-size: 10.5px; color: #68727f; margin-top: 5px; line-height: 1.35; }
#vtStudio .vts-ai-tag {
	position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
	padding: 6px 14px; background: rgba(10,12,16,.78); border: 1px solid var(--vts-accent);
	border-radius: 20px; font-size: 11.5px; letter-spacing: .4px; color: #fff;
	opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
#vtStudio .vts-ai-tag.on { opacity: 1; }
#vtStudio.vts-ai-loading .vts-ai-tag::after { content: " · loading…"; color: var(--vts-text-dim); }
@keyframes vts-shimmer { to { background-position: -200% 0; } }

@media (max-width: 760px) {
	#vtStudio .vts-panel { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px; height: 46%; }
	#vtStudio .vts-tools { top: auto; bottom: calc(46% + 24px); transform: translateX(0); flex-direction: row; left: 12px; }
	#vtStudio.vts-in .vts-tools { transform: translateX(0); }
	#vtStudio .vts-scene { display: none; }
	#vtStudio .vts-ai-tag { bottom: auto; top: 76px; }
}