/* ========================================
   Font Face Declarations
   ======================================== */
@font-face {
	font-family: "Hyperwalk VF";
	src:
		url("fonts/HyperwalkVF.woff2") format("woff2"),
		url("fonts/HyperwalkVF.woff") format("woff"),
		url("fonts/HyperwalkVF.ttf") format("ttf");
}

@font-face {
	font-family: "Hyperwalk Mono VF";
	src:
		url("fonts/HyperwalkMonoVF.woff2") format("woff2"),
		url("fonts/HyperwalkMonoVF.woff") format("woff"),
		url("fonts/HyperwalkMonoVF.ttf") format("ttf");
}

@font-face {
	font-family: "EXIF Only VF";
	src:
		url("fonts/EXIFOnlyVF.woff2") format("woff2"),
		url("fonts/EXIFOnlyVF.woff") format("woff"),
		url("fonts/EXIFOnlyVF.ttf") format("ttf");
}

/* ========================================
   CSS Variables
   ======================================== */
:root {
	--color-bg: #000000;
	--color-fg: #ffffff;
	--color-highlight: #ff0000;
	--color-inactive: #555555;
	--vertical-spacing: 2rem;
	--padding: 1rem;
	--max-width: 20rem;
	font-size: 16pt;
	background-color: var(--color-bg);
}

/* ========================================
   Base Styles
   ======================================== */
/* * {
	box-sizing: border-box;
	transition: none !important;
	animation: none !important;
} */

body,
p,
button,
input,
textarea {
	font-family: "EXIF Only VF", "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 400;
	color: var(--color-fg);
	/* overflow: hidden; */
	/* margin: 0; */
	/* padding: 0; */
	/* Prevent text selection and touch callouts on all elements by default */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Prevent drag and drop */
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

.caption {
	/* font-family: "Hyperwalk Mono VF", monospace; */
	/* text-transform: uppercase; */
	color: var(--color-fg);
	font-size: 9pt;
	line-height: 1.2em;
	letter-spacing: 0.06em;
	margin-top: 1em;
}

.caption a,
.caption a:visited,
.caption a:active,
.caption a:hover,
.caption a:focus {
	color: var(--color-fg);
	text-decoration: none;
}

/* icons */
.icon-addIcon::before {
	content: '\E000';
}

.icon-checkIcon::before {
	content: '\E001';
}

.icon-closeIcon::before {
	content: '\E002';
}

.icon-loginIcon::before {
	content: '\E003';
}

.icon-profileIcon::before {
	content: '\E004';
}

.icon-bookmarkIcon::before {
	content: '\E005';
}

.icon-searchIcon::before {
	content: '\E006';
}

.icon-trashIcon::before {
	content: '\E007';
}

.icon-editIcon::before {
	content: '\E008';
}

.icon-controlsIcon::before {
	content: '🎚️';
}


.icon-sunIcon::before {
	content: '\E009';
}

.icon-moonIcon::before {
	content: '\E010';
}

.icon-systemThemeIcon::before {
	content: '\E011';
}

.icon-addToLeftIcon::before {
	content: '\E012';
}

.icon-addToRightIcon::before {
	content: '\E013';
}

.icon-diskIcon::before {
	content: '\E014';
}

.icon-flagIcon::before {
	content: '\E015';
}

.icon-warningIcon::before {
	content: '\E016';
}

.icon-swapIcon::before {
	content: '\E017';
}

.icon-playIcon::before {
	content: '\E018';
}

.icon-pauseIcon::before {
	content: '\E019';
}

.icon-settingsIcon::before {
	content: '\E020';
}

.icon-duplicateIcon::before {
	content: '\E021';
}

.icon-fullscreenIcon::before {
	content: '\E022';
}

.arrow-left::before {
	content: "←";
}

/* for selected elements in the tag menu */
.selected::after {
	content: " ←";
}

.arrow-right::before {
	content: "→";
}

.arrow-button::after {
	content: " →";
}

/* ========================================
   Layout
   ======================================== */
#app {
	height: 100vh;
	width: 100vw;
	/* display: flex; */
	/* flex-direction: column; */
}

.main-display {
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.text-content {
	text-align: center;
	width: 100%;
	/* remove any outlines from editing text */
	outline: none;
	/* make sure the text always wraps in the box even by letter */
	/* white-space: pre-wrap; */
	overflow-wrap: break-word;
}

/* ========================================
   Control Buttons
   ======================================== */
.btn {
	padding: 0.3rem 0.5rem;
	background: none;
	border: 1px solid var(--color-fg);
	color: var(--color-fg);
	cursor: pointer;
	font-size: inherit;
}

.small-button {
	border: none;
	font-size: 8pt;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 0.2rem 0.3rem;
}

.controls {
	background-color: var(--color-bg);
	position: fixed;
	/* top: 0; */
	/* right: 0; */
	top: var(--padding);
	right: var(--padding);
	/* padding: var(--padding); */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5em;
	z-index: 50;
}

.frame-counter {
	position: fixed;
	top: var(--padding);
	left: var(--padding);
}

.icon-btn {
	background: none;
	/* background-color: var(--color-bg); */
	width: 1.5rem;
	height: 1.5rem;
	font-size: 18pt;
	border: none;
	color: var(--color-fg);
	cursor: pointer;
}

#fullscreenBtn {
	display:none;
}

/* ========================================
   Edit Controls
   ======================================== */
.edit-controls {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--color-bg);
	color: var(--color-fg);
	padding: var(--padding);
	/* border-top: 1px solid var(--color-fg); */
	z-index: 60;
}

.edit-panel {
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.slider-group {
	width: 100%;
	max-width: var(--max-width);
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.slider-group label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-ui);
}

.slider {
	appearance: none;
	height: 1px;
	border-radius: 0;
	width: 100%;
	outline: none;
	background-color: var(--color-fg);
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: var(--color-bg);
	outline: 1px solid var(--color-fg);
	border-radius: 100%;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	background: var(--color-bg);
	outline: 1px solid var(--color-fg);
	border-radius: 100%;
	cursor: pointer;
	border: none;
}

/* ========================================
   Frames Overlay
   ======================================== */
.frames-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: var(--color-bg);
	color: var(--color-fg);
	z-index: 100;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	/* justify-content: top; */
	overflow-y: auto;
}

.frames-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: end;
	background-color: var(--color-bg);
}

.close-btn {
	margin: var(--padding);
}

.frames-content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/* padding: var(--padding); */
}

.frames-content {
	display: flex;
	flex-direction: column;
	width: calc(100% - 2 * var(--padding));
	max-width: var(--max-width);
	gap: var(--vertical-spacing);
	margin-top: 6rem;
	max-height: calc(100vh - 8rem);
}

.frames-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ========================================
   Frame Delay Section
   ======================================== */
.frame-delay-section {
	margin-bottom: var(--vertical-spacing);
}

.frame-delay-controls {
	justify-content: space-between;
	display: flex;
	align-items: center;
	gap: 1em;
}

.frame-delay-controls label {
	margin: 0;
	flex-shrink: 0;
}

.delay-control-group {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.delay-value {
	width: 2em;
	text-align: center;
}

.delay-input {
	width: 3rem;
	padding: 0.5em;
	border: 1px solid var(--color-fg);
	background: var(--color-bg);
	color: var(--color-fg);
	font-size: inherit;
	font-family: inherit;
	box-sizing: border-box;
}

/* Hide number input spinner arrows */
.delay-input::-webkit-outer-spin-button,
.delay-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
.delay-input[type=number] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/* ========================================
   Frames List
   ======================================== */

.frames-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.add-frame-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.frames-list {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.settings-section {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: var(--vertical-spacing);
}

.frame-item {
	background-color: var(--color-bg);
	color: var(--color-fg);
	border: 1px solid var(--color-fg);
	padding: var(--padding);
	cursor: pointer;
	position: relative;
}

.frame-item::before,
.frame-item::after {
	display: none !important;
	content: none !important;
}

.frame-item.selected {
	border-color: var(--color-highlight);
	background-color: var(--color-bg);
}

.frame-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5em;
}

.frame-controls {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.frame-preview {
	outline: none;
	border: 1px solid transparent;
	padding: 0.25em;
	min-height: 1.2em;
	cursor: default;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

.frame-preview.editing {
	border-color: white;
	/* background-color: rgba(255, 255, 255, 0.05); */
	cursor: text;
}

.frame-preview:empty::before {
	content: 'Empty frame';
	color: var(--color-inactive);
	font-style: italic;
}

.reset-cache-btn {
	flex-shrink: 1;
}

/* ========================================
   Safe Area Support
   ======================================== */
@supports (padding: max(0px)) {
	.edit-controls {
		padding-bottom: max(var(--padding), env(safe-area-inset-bottom));
	}
}

/* make a breakpoint at 600px */
@media (max-width: 600px) {
	.edit-panel {
		flex-direction: column;
		max-width: var(--max-width);
	}
}

/* ========================================
   Allow Selection on Editable Elements
   ======================================== */
/* Allow text selection for contenteditable elements */
[contenteditable="true"],
[contenteditable]:not([contenteditable="false"]) {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* Allow text selection for input fields and textareas */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* Universal rule to prevent selection everywhere else */
* {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Prevent drag and drop */
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

/* Re-enable selection for editable elements (overrides universal rule) */
[contenteditable="true"],
[contenteditable]:not([contenteditable="false"]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
	user-select: text !important;
	-webkit-touch-callout: default !important;
}

/* ========================================
   Touch and Mobile Specific Prevention
   ======================================== */
/* Prevent text selection highlighting during touch */
*::selection {
	background: transparent;
}

*::-moz-selection {
	background: transparent;
}

/* Allow selection highlighting only for editable content */
[contenteditable="true"]::selection,
[contenteditable]:not([contenteditable="false"])::selection,
input[type="text"]::selection,
input[type="password"]::selection,
input[type="email"]::selection,
input[type="search"]::selection,
input[type="url"]::selection,
textarea::selection {
	background: var(--color-fg);
	color: var(--color-bg);
}

[contenteditable="true"]::-moz-selection,
[contenteditable]:not([contenteditable="false"])::-moz-selection,
input[type="text"]::-moz-selection,
input[type="password"]::-moz-selection,
input[type="email"]::-moz-selection,
input[type="search"]::-moz-selection,
input[type="url"]::-moz-selection,
textarea::-moz-selection {
	background: var(--color-fg);
	color: var(--color-bg);
}

/* Prevent tap highlighting on mobile */
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-focus-ring-color: transparent;
	outline: none;
}

/* Re-enable focus indicators for form controls and editable content */
[contenteditable="true"]:focus,
[contenteditable]:not([contenteditable="false"]):focus,
input:focus,
textarea:focus,
button:focus {
	outline: none;
}

/* ========================================
   Prevent Zooming
   ======================================== */
html, body {
	/* Prevent zoom on double-tap */
	touch-action: manipulation;
	/* Prevent overscroll/bounce effects */
	overscroll-behavior: none;
	/* Fixed positioning to prevent zoom behaviors */
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Additional zoom prevention for iOS Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	select, textarea, input[type="text"], input[type="password"], 
	input[type="datetime"], input[type="datetime-local"], 
	input[type="date"], input[type="month"], input[type="time"], 
	input[type="week"], input[type="number"], input[type="email"], 
	input[type="url"], input[type="search"], input[type="tel"], 
	input[type="color"] {
		font-size: 16px !important;
	}
}

/* Prevent zoom on focus for form elements */
input, select, textarea {
	font-size: 16px !important;
}

/* ========================================
   PWA Safe Area Support
   ======================================== */
/* Handle safe areas for devices with notches/status bars */
body {
	/* Add padding for safe areas */
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/* Ensure app container respects safe areas */
#app {
	min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
}

/* Alternative: If you want fullscreen with manual spacing */
@supports (padding-top: env(safe-area-inset-top)) {
	body {
		padding-top: env(safe-area-inset-top);
	}
}