/* ============================================================
   LiDimension - Video Viewer Styling

   Inherits variables & typography from global.css
   Visual style based on render.css
   ============================================================ */

html,
body {
	height: 100%;
	background: #111;
	color: var(--cream-100);
}

body {
	position: relative;
	overflow: hidden;
}

/* ============================================================
   Top Bar
   ============================================================ */

#topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	height: 52px;
	padding: 0 18px;

	background: rgba(6, 13, 32, 0.88);
	border-bottom: 1px solid rgba(147, 164, 193, 0.16);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.brand-group {
	display: flex;
	align-items: center;
	gap: 12px;
}

#brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	user-select: none;
}

.brand-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--cream-100);
}

.brand-name span {
	color: var(--slate-400);
}

.brand-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;

	color: var(--slate-400);

	background: rgba(24, 43, 87, 0.45);
	border: 1px solid rgba(147, 164, 193, 0.2);

	padding: 3px 8px;
	border-radius: 4px;
}

.brand-eyebrow::before {
	content: "";

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: var(--cream-100);
	box-shadow: 0 0 10px rgba(252, 241, 208, 0.7);
}

/* ============================================================
   View Tabs
   ============================================================ */

#view-tabs {
	display: flex;
	align-items: center;
	gap: 4px;

	background: rgba(6, 13, 32, 0.65);
	padding: 3px 4px;

	border-radius: 6px;
	border: 1px solid rgba(147, 164, 193, 0.14);
}

.view-tab {
	position: relative;

	border: 1px solid transparent;
	outline: none;

	padding: 6px 14px;
	border-radius: 4px;

	background: transparent;
	color: var(--slate-400);

	font: inherit;
	font-size: 13px;
	font-weight: 500;

	cursor: pointer;

	transition:
		color var(--transition),
		background var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.view-tab:hover {
	color: var(--cream-100);
	background: rgba(24, 43, 87, 0.45);
}

.view-tab.active {
	color: var(--cream-100);
	font-weight: 600;

	background: rgba(24, 43, 87, 0.85);
	border-color: rgba(147, 164, 193, 0.25);

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

	text-shadow: 0 0 12px rgba(252, 241, 208, 0.35);
}

/* ============================================================
   Top Bar Actions
   ============================================================ */

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-btn {
	color: var(--slate-400);

	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;

	text-decoration: none;

	padding: 6px 12px;
	border-radius: 5px;

	border: 1px solid rgba(147, 164, 193, 0.2);

	background: rgba(6, 13, 32, 0.6);

	transition:
		color var(--transition),
		background var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);
}

.nav-btn:hover {
	color: var(--cream-100);
	background: var(--navy-800);
	border-color: rgba(252, 241, 208, 0.35);
	box-shadow: 0 0 10px rgba(252, 241, 208, 0.15);
}

/* ============================================================
   Video Viewer
   ============================================================ */

#video-viewer {
	position: fixed;
	inset: 52px 0 0;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 24px;

	background: #111;
	overflow: hidden;
}

/*
 * The video is constrained by BOTH width and height.
 *
 * This prevents a 16:9 iframe from overflowing vertically
 * when Chrome's viewport height becomes the limiting dimension.
 */

.video-panel {
	display: none;

	width: min(1400px, calc(100vw - 48px), calc((100vh - 100px) * 16 / 9));

	aspect-ratio: 16 / 9;

	background: #000;

	border: 1px solid rgba(147, 164, 193, 0.18);
	border-radius: 8px;

	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.5),
		0 0 20px rgba(24, 43, 87, 0.25);

	overflow: hidden;
}

.video-panel.active {
	display: block;
}

.video-panel iframe {
	display: block;

	width: 100%;
	height: 100%;

	border: 0;
}

/* ============================================================
   Video Information HUD
   ============================================================ */

#video-info {
	position: fixed;

	left: 16px;
	bottom: 16px;

	z-index: 5;

	padding: 10px 14px;

	background: rgba(6, 13, 32, 0.84);

	border: 1px solid rgba(147, 164, 193, 0.18);
	border-radius: 8px;

	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);

	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	font-size: 12px;
	line-height: 1.55;

	pointer-events: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
	#topbar {
		padding: 0 12px;
		gap: 8px;
	}

	.brand-eyebrow {
		display: none;
	}

	#view-tabs {
		gap: 2px;
	}

	.view-tab {
		padding: 6px 9px;
		font-size: 12px;
	}

	.topbar-actions {
		gap: 4px;
	}

	.nav-btn {
		padding: 5px 8px;
	}

	#video-viewer {
		inset: 52px 0 0;
		padding: 16px;
	}

	.video-panel {
		width: min(100%, calc((100vh - 84px) * 16 / 9));
	}
}

@media (max-width: 680px) {
	#topbar {
		height: 52px;
		padding: 0 12px;
	}

	.brand-eyebrow {
		display: none;
	}

	#view-tabs {
		gap: 2px;
		padding: 2px 3px;
	}

	.view-tab {
		padding: 6px 8px;
		font-size: 11px;
	}

	.topbar-actions {
		gap: 4px;
	}

	.nav-btn {
		padding: 5px 7px;
		font-size: 11px;
	}

	#video-viewer {
		inset: 52px 0 0;
		padding: 10px;
	}

	.video-panel {
		width: 100%;
		max-width: calc((100vh - 72px) * 16 / 9);
	}

	#video-info {
		display: none;
	}
}