/* General reset and global styles */
* {
	margin: 0;
	padding: 0;
	/* box-sizing: border-box; */
}

html, body {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: black; /* Ensures background is black */
  padding-top: env(safe-area-inset-top); /* Dynamic island area */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow: hidden; /* Prevent scrolling */
  touch-action: none; /* Prevent touch gestures like scrolling */
  height: 100%; /* Make sure the body takes the full viewport height */
}

.top-controls {
	position: sticky;
	top: calc(env(safe-area-inset-top) + 8px);
	margin: 8px 16px 0;
	padding: 8px 0;
	background: rgba(0, 0, 0, 0.85);
	display: table;
	table-layout: fixed;
	width: calc(100% - 32px);
	z-index: 120;
}

.top-cell {
	display: table-cell;
	vertical-align: middle;
}

.top-cell-p1 {
	text-align: center;
	width: 29%;
}

.top-cell-p3 {
	text-align: center;
	width: 29%;
}

.top-cell-p2 {
	text-align: center;
	width: 29%;
}

.top-cell-p4 {
	text-align: right;
	width: 13%;
}

.copy-log-btn,
.locale-btn {
	flex: 0 0 auto;
	height: auto;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	white-space: nowrap;
	width: 100px;
}

.copy-log-btn:hover,
.locale-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.auto-flow-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	width: 100px;
}

.auto-flow-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.auto-flow-toggle span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: all 0.25s ease;
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
	cursor: pointer;
}

.auto-flow-toggle span:hover {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.auto-flow-toggle input:checked + span {
	color: white;
	background: linear-gradient(135deg, #f0c040, #ffdd73);
	box-shadow: 0 0 12px rgba(255, 221, 115, 0.8), 0 0 25px rgba(240, 192, 64, 0.6);
	border-color: rgba(255, 255, 255, 0.4);
}

.log-panel {
	max-height: 15%;
	margin: 5px 30px 10px 30px;
	overflow-y: scroll;
	scrollbar-width: none;
	color: grey;

}

.log-panel::-webkit-scrollbar {
	display: none;
}

/* Settings icon in top right corner */
.settings-icon {
	display: inline-block; /* or inline-flex */
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 1;
	text-decoration: none;
}

.settings-icon:hover {
	color: rgba(255, 255, 255, 0.9);
	transform: rotate(45deg);
}

.settings-icon svg {
	width: 40px;
	height: 40px;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}



/* Media query for standalone mode (app) */
@media all and (display-mode: standalone) {
	.container {
		height: 100vh; /* Full height for app mode */
		width: 100vw; /* Full width for app mode */
		margin: 0 auto; /* Remove top and bottom margin */
	}
}


.ring-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* center the ring on the viewport */
}


/* Background ring positioned behind all other content */
#ringPanel {
	background-image: url('images/UIring.png');
	background-position: center;
	background-repeat: no-repeat;
	/* maintain intended artwork size while allowing it to sit as a background */
	background-size: 300px 300px;
	width: 300px;
	height: 300px;
	pointer-events: none; /* allow interactions to pass through to foreground elements */
	z-index: 0; /* place behind all other layers */
}


.spinning {
  animation: spin 60.0s linear infinite;
}


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


/* Logo styles */
#logo {
	margin: 15px 0px 15px 0px;
	font-size: 20pt;
	font-weight: bold;
	color: rgb(255, 255, 255);
/*
	text-shadow:
		-1px -1px 0px white,   // Top left
		 1px -1px 0px white,   // Top right
		-1px  1px 0px white,   // Bottom left
		 1px  1px 0px white;   // Bottom right
*/
}


.rotate {
	transform: rotate(180deg);
}


/* Menu styles */
.menu-selection {
	/* display: grid; */
	/* margin: 0px; */
	height: 240px;
	/* justify-content: center; */
	align-content: center;
}


.menu-dropdown {
	width: 100px;
	height: 40px;
	text-align: center;
	/* padding: 0px; */
	font-size: 14pt;
	font-weight: bold;
	/* border-radius: 0px 0px 0px 0px; */
	border: none;
	/* border-bottom: 2px solid black; */
	color: #000;
	background-color: #00000000;
	cursor: pointer;
}


/* Button styles */
button {
	/* width: 100%; */
	height: 50px;
	margin: 0px 0px 0px 0px;
	font-size: 16pt;
	font-weight: bold;
	color: white;
	text-shadow: -1px -1px 0px black,
								1px -1px 0px black,
							 -2px  2px 0px black,
								2px  2px 0px black;
	/* background-color: blue; */
	border: none;
	border-radius: 20px 20px 20px 20px;
	cursor: pointer;
	transition: background-color 0.5s;
}


.throb {
	animation: subtlePulse 3.0s infinite;
}


@keyframes subtlePulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}


/* Ensure these buttons stay at the bottom of the panel */
#recordButton {
  background-image: url('images/UIcentre.png');
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
  border-radius: 80px;
  border: white 4px solid;
  cursor: pointer;
	/* maintain intended artwork size while allowing it to sit as a background */
  background-size: 145px 145px;
  width: 150px;
  height: 150px;
}

/* Red tint overlay for record button */
.tint-red {
	position: relative;
	/* No background-color here, overlay will handle tint */
}

.tint-red::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(255,0,0,0.0) 0%, rgba(255,0,0,1) 90%);
	border-radius: inherit;
	/* pointer-events: none; */
}

/* PTT active state - green tint overlay for when microphone is open */
.ptt-active {
	position: relative;
}

.ptt-active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(0,255,0,0.2) 0%, rgba(0,255,0,0.6) 80%);
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}


/* Modal styles */
.modal {
	display: none;																	/* Hidden by default */
	position: fixed;																/* Stay in place */
	z-index: 1000;																	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;																		/* Full width */
	height: 100%;																		/* Full height */
	background-color: rgba(0, 0, 0, 0.5);				/* Black w/ opacity */
	justify-content: center;
	align-items: center;
}

.modal-content {
	background-color: rgba(255,255,255,0.9);
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 300px;
	text-align: center;
	border-radius: 20px;
}

.modal-title {
	display: none;
	margin: 0 0 12px 0;
	/* font-size: 20px; */
	/* color: #333; */
	text-decoration: underline;
	text-underline-offset: 10px;
}

/* Modal text */
#modalText {
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.4;
}

/* Ok button */
#modalButtonOk, #modalButtonCancel {
	display: none;
	padding: 10px 20px;
	font-size: 16px;
	height: 50px;
	width: 100px;
	font-weight: bold;
	color: white;
	text-shadow: -1px -1px 0px black,
								1px -1px 0px black,
							 -2px  2px 0px black,
								2px  2px 0px black;
	background-color: salmon;
	border-radius: 20px;
	border: white 1px solid;
	margin: 8px;

}

#modalButtonOk {
	background-color: greenyellow;
	animation: modalButtonPulse 2.2s ease-in-out infinite;
	/* box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); */
}

@keyframes modalButtonPulse {
	0% {
		box-shadow: 0 0 4px rgba(0, 123, 255, 0.75);
	}
	50% {
		box-shadow: 0 0 14px rgba(0, 123, 255, 1.0);
	}
	100% {
		box-shadow: 0 0 4px rgba(0, 123, 255, 0.75);
	}
}

#modalButtonOk:hover, #modalButtonCancel:hover {
	background-color: rgb(128, 128, 255);
}


/* Audio section */
audio {
	width: 100%;
	border-radius: 5px;
}


/* colours */
.pink {
	background-color: pink;
}

.green {
	background-color: greenyellow;
}

.grey {
	background-color: lightgrey;
}

/* Layering classes for z-index management */
.front {
	z-index: 10; /* top (fore ground) layer */
}

.middle {
	z-index: 5; /* middle ground layer */
}

.back {
	z-index: 0; /* bottom (back-most) layer */
}


.hide {
	display: none !important;
}


/* END */