.footer { background-color: #6c777f; width: 100%; }

.footersection {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(20px, 3vw, 50px);
	max-width: 1000px;
	margin: auto;
	padding: 20px 2.5vw 40px;
	text-shadow: 0 0 5px #0004;
	text-wrap: nowrap;
}
.footersection > div { min-width: fit-content; }
.footersection > div:nth-child(odd) { width: clamp(170px, 20vw, 230px); }
.footersection > div:nth-child(even) { width: clamp(120px, 16vw, 170px); }
.footersection > div > h3 {
	font-size: clamp(16px, 2vw, 19px);
	text-align: left;
	color: white;
}
.footersection > div > a {
	font-size: clamp(12px, 1.5vw, 16px);
	display: block;
	margin-top: 9px;
	font-weight: 300;
	color: white;
	opacity: .9;
}
.footersection > div > a:hover, .footersection > div > a:focus { opacity: 1; text-decoration: underline; }

#newsletter, #metalspanner {
	display: block;
	background: #0006;
	text-align: center;
	color: #FFFB;
	padding: 10px 0;
	line-height: 1.25em;
}
#newsletter > input {
	border: solid 1px #FFFB;
	margin-left: 5px;
	border-radius: 5px;
	padding: 2px 5px;
	max-width: 30%;
}
#newsletter > input[type="submit"] { cursor: pointer; }
#newsletter > input:hover, #newsletter > input:focus-visible, #newsletter:focus-within { color: white; border-color: white; }

#reportbtn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 10px;
	border-radius: 100px;
	background-color: #ff9c50;
	color: white;
	box-shadow: 0 0 5px 5px #0006;
	text-shadow: -1px 0px 5px #0003;
	z-index: 2;
	font-size: 22px;
	transition: background-color .125s;
}
#reportbtn:hover, #reportbtn:focus { 
	background-color: #ffb278;
}

#metalspanner { text-transform: capitalize; background: #112532; font-size: clamp(12px, 1.85vw, 16px); }
#metalspanner > span ~ span { margin-left: 13px; text-wrap: nowrap; }
#metalspanner br { display: none; }

/* CHATBOT */

#chatbotbtn {
	position: fixed;
	bottom: 20px; right: 20px;
	width: 40px; height: 40px;
	padding: 5px;
	border-radius: 100px;
	background-color: var(--headercolor1);
	box-shadow: -2px -2px 5px #0006;
	opacity: .95;
	z-index: 2;
}
#chatbotsvg, .bubblebot > svg { height: 40px; margin: auto 0; filter: var(--nightbright); }
#chatbotbtn:hover, #chatbotbtn:focus-visible {
	opacity: 1;
	filter: brightness(1.1);
}
#chatbotbtn.unclicked > #chatbotreachout {
	opacity: 0;
	position: absolute; right: 60px;
	width: 155px;
	background-color: var(--color3);
	padding: 3px 10px;
	border-radius: 15px;
	font-size: 14px;
	color: var(--headercolor2);
	transition: opacity .35s ease .1s;
	box-shadow: -1px -1px 5px #0003;
	pointer-events: none;
}

#chatbotbtn:hover > #chatbotreachout, #chatbotbtn:focus-visible > #chatbotreachout { opacity: 1; }

#dormantchatbtn { position: fixed; }

#chatcorner {
	position: fixed;
	bottom: -74px; right: 0px;
	font-size: 14px;
	z-index: 1;
	width: 450px; max-width: 100%;
	/*filter: drop-shadow(2px 2px 15px #0004);*/
	pointer-events: none;
}

/* While chatbotbtn exists... */

/* ...hide the chat corner's elements, except for the first message: */
#chatbotbtn + #chatcorner *:not(.defystart) { opacity: 0; visibility: hidden; content-visibility: hidden; }

/* ...keep ".defystart" elements in the DOM, but simply invisible. This is for the initial bot message to animate: */
#chatbotbtn + #chatcorner .defystart, #dormantchatbtn { opacity: 0; user-select: none; pointer-events: none; }

/* ...AND no additional messages, have the first message be the same size as the button. This transitions away later: */
#chatbotbtn + #chatcorner:not(:has(.bubbleuser)) #bbfirst { max-width: 40px; }

/* With no chatbotbtn AND no additional messages... */

/* ...move up the chatcorner div: */
body:not(:has(#chatbotbtn)) #chatcorner:not(:has(.bubbleuser)) { transition: bottom .85s ease 1.5s; bottom: 0; }

/* ...reveal the elements after the first message: */
body:not(:has(#chatbotbtn)) #chatcorner:not(:has(.bubbleuser)) *:not(.defystart) { transition: opacity .35s ease 1.5s; opacity: 1; }

/* With no chatbotbtn BUT additional messages... */

/* ...keep the chatcorner div from re-animating its position: */
body:not(:has(#chatbotbtn)) #chatcorner:has(.bubbleuser) { bottom: 0; }

#chatbotsubmit { 
	position: fixed;
	bottom: 10px; right: 10px;
	height: 30px; width: 30px;
	background-color: var(--color3);
	color: var(--headercolor1);
	font-size: 16px; text-align: left;
	padding: 5px; border-radius: 100px;
	box-shadow: -2px -2px 5px #0006, 2px 2px 5px #0005;
	cursor: pointer; opacity: 0 !important;
	transition: opacity .35s ease 0s !important;
}

#messager:not(:invalid) + #chatbotsubmit { opacity: .5 !important; }
#messager:not(:invalid) + #chatbotsubmit:hover, #messager:not(:invalid) + #chatbotsubmit:focus-visible { opacity: 1 !important; }

#blurBG {
	position: absolute;
	left: -45px; top: -35px;
	width: calc(100% + 45px); height: calc(100% + 45px);
	-webkit-mask: url('/static/img/icons/masks/chatmask.png'), top left / cover no-repeat;
	mask: url('/static/img/icons/masks/chatmask.png'), top left / cover no-repeat;
	backdrop-filter: blur(5px);
	z-index: -1;
}

#chatbubblearea {
	display: flex; flex-direction: column;
	max-height: 45dvh; /*max-height: 450px;*/
	padding: 5px 0 5px 5px; margin-left: -5px;
	overflow: clip auto;
	-webkit-mask: linear-gradient(#FFF0 0%, #FFF 5%, #FFF 95%, #FFF0 100%);
	mask: linear-gradient(#FFF0 0%, #FFF 5%, #FFF 95%, #FFF0 100%);
	scroll-behavior: smooth;
	transition: height .1s linear;
	pointer-events: all;
	position: relative;
}
.noscroll:has(.bubbleuser) { margin-bottom: -10px; }
.noscroll::-webkit-scrollbar { width: 0px; }

.bubbleuser, .bubblebot {
	min-height: 34px;
	display: flex; align-items: center;
	margin: 0 0 10px;
	box-shadow: -2px -2px 5px #0006, 2px 2px 5px #0005;
}

.bubbleuser {
	float: right; max-width: 85%;
	border-radius: 25px 0 0 25px;
	background-color: var(--color3);
	color: var(--headercolor1);
	padding: 8px 20px;
}
.bubbleuser > span { max-width: 100%; word-wrap: break-word; }

.bubblebot {
	float: left; max-width: 404px;
	background-color: var(--headercolor1);
	border-radius: 25px;
	margin-right: 20px;
	margin-left: 5px;
	padding: 8px 10px;
}

.bubblebot > .boticon {
	min-width: 25px; width: 25px; margin: -3px 18px -5px 0px;
	transform: scale(155%) translate(2px, 1px);
	filter: var(--nightbright);
	align-self: flex-start;
}

#bbfirst { overflow: hidden; margin-top: 10px; float: right; transition: max-width 1s ease, min-height 1s ease; }
#bbfirst > span { min-width: 357px; }

#chatwrite, #messager { float: right; }

#chatwrite {
	width: 420px; max-width: 100%;
	background-color: var(--color3);
	padding: 12px 0 0;
	border-radius: 25px 0 0 0;
	box-shadow: 1px 1px 5px 5px #0005;
	pointer-events: all;
}

#messager {
	width: calc(100% - 35px); height: 60px;
	background-color: white; color: black;
	border: solid 1px var(--color1);
	border-width: 1px 0 0 1px;
	padding: 5px 10px 1px 11px;
	overflow: auto;
	resize: none;
	font: inherit;
	border-radius: 12.5px 0 0 0;
}

#chatbotcloser {
	margin: auto;
	display: block;
	width: 150px; padding: 3px 0;
	text-align: center;
	border-radius: 25px;
	background-color: var(--headercolor1);
	box-shadow: -2px 2px 5px #0006, 2px -2px 15px #0004;
	pointer-events: all;
	word-spacing: 1px;
}
#chatbotcloser:hover, #chatbotcloser:focus-visible { opacity: 1; }

.defystart { opacity: 1; visibility: visible; content-visibility: visible; }

.bottomlogos {
	width: 100%;
	height: 40px;
	max-height: 7vw;
	display: flex;
	justify-content: center;
	gap: 15px;
	padding: 10px 0 40px;
}

.bottomlogos > img {
	display: block;
	height: 100%;
}

@media (max-width: 695px) {
	.footersection { max-width: 450px; }
	#metalspanner { font-size: clamp(12px, 2.5vw, 15px); }
	#metalspanner br { display: block; }
}

@media (max-width: 450px) {
	#newsletter > span { display: block; margin: -4px 0 5px; }
}

@media print {
	#footerbody {
		display: none;
	}
}