@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-SemiboldItalic.ttf') format('truetype');
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/assets/font/OpenSans-ExtraBoldItalic.ttf') format('truetype');
	font-weight: 800;
	font-style: italic;
}

.hidden { display: none !important }

body {
	font-family: 'Open Sans', sans-serif;
	background: url('/static/assets/img/chat-background.png') no-repeat;
	font-size: 14px;
}

header h1 {
   font-size: clamp(1.75rem, 1.6541rem + 0.3924vw, 2.125rem);
	font-weight: 600;
}
header p {
	font-size: clamp(1rem, 0.968rem + 0.1308vw, 1.125rem);
	font-weight: 400;
}

.btn {
	font-size: 14px;
}

.response-box {
	border-radius: 10px;
	background-color: #FFFFFF40
}
.btn-auto-response {
	background: #FFFFFF20;
	color: #FFFFFF;
	border: none;
}
.btn-user-respond {
	background-color: #D4002A;
	color: white;
	border: none;
	border-radius: 6px;
	white-space: nowrap;
	position: absolute;
	bottom: 15px;
	right: 15px;
	height: 34px;
	padding: 4px 16px;
	text-transform: uppercase;
}

/* Optional enhancements */
textarea.form-control {
	border-radius: 10px;
	padding-right: 70px; /* space for the button */
	min-height: 50px;
}
.form-control:focus {
	border: none;
	box-shadow: 0 0 0 .125rem #bababa;
}
#chat-input {
	min-height: 125px;
	max-height: 200px; /* Set a sensible limit */
	overflow-y: scroll;
}

/* Chatbox styles */
#messages {
	margin: 2rem 0;
	max-height: 50vh;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.message {
    position: relative;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	width: fit-content;
	word-break: break-word;
	max-width: 90%;
}
.message.assistant {
	background-color: #FFFFFF75;
	display: flex;
	align-self: flex-start;
	flex-direction: row;
	padding: 2rem;
}
.message.assistant::before {
	content: url("/static/assets/img/chat-ai-face.svg");
	display: flex;
	padding: 0 1rem 0 0;
	height: 100%;
	width: fit-content;
}
.message.user {
	background-color: #D4002A;
	color: #ffffff;
	align-self: flex-end;
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.16);
	position: relative;
}
.message.user::after {
  content: url('/static/assets/img/user-message-flick.svg');
  position: absolute;
  bottom: -8px;
  right: 10px;
  width: 15px;
  height: 15px;
}
.country-dropdown-selector {
	display: flex;
	align-items: center;
	border: 1px solid #FFFFFF;
	border-radius: 18px;
	padding: 10px 15px !important;
	max-height: 40px;
	max-width: 200px;
	overflow: hidden;
	white-space: nowrap;
	gap: 10px;
	color: #ffffff;
}
.country-dropdown-selector::after {
	content: none !important;
	display: none !important;
}
.country-dropdown-selector:focus,
.country-dropdown-selector:hover {
  color: #ffffff !important;
  text-decoration: none;
}
.country-dropdown-selector:focus, .country-dropdown-selector:hover {
	color: #ffffff !important;
}
.country-flag {
	max-width: 22px;
	max-height: 15px;
}
.country-name {
	text-transform: uppercase;
	font-size: 10px;
	margin-right: 1rem;
}
.dropdown-arrow {
	width: 10px;
	height: 15px;
	transition: transform 0.3s ease;
}
.country-dropdown-selector[aria-expanded="true"] .dropdown-arrow {
	transform: rotate(90deg);
}

.loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 0;
}

.loading img {
	width: 40px;
	height: 40px;
}

.auto-response-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tts-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: url("/static/assets/img/speaker.svg");
    background-size: contain;
}