* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://www.origym.co.uk/wp-content/uploads/2024/09/mask-white.webp') no-repeat center top;
	background-size: cover;
	opacity: 0.2;
	/* Adjust for subtle effect */
	pointer-events: none;
	/* Allows clicks through */
	z-index: 0;
}

body {
	position: relative;
	z-index: 1;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	min-height: 100vh;
	color: #333;
	background: linear-gradient(216deg, rgba(238, 143, 61, 1) 0%, rgba(235, 124, 22, 1) 50%, rgba(234, 88, 13, 1) 100%);
}

.wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 16px
}

.card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	padding: 16px;
	min-height: 60vh
}

.msg {
	margin: 0 0 8px 0;
	padding: 10px 12px;
	border-radius: 10px;
	max-width: 85%
}

.ai {
	background: #ff960040
}

.me {
	background: #e7f7ec;
	margin-left: auto
}

.row {
	display: flex;
	gap: 15px;
	margin-top: 15px
}

input,
button {
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #ddd;
	font-size: 16px;
	width: 100%;
}

button {
	background: #111;
	color: #fff;
	border: none;
	cursor: pointer;
	width: 25%;
}

button:disabled {
	opacity: .6
}

.msg.typing {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 56px;
	min-height: 20px;
	background: #ff960040
}

.typing .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6066a9;
	opacity: .25;
	animation: blink 1.2s infinite ease-in-out
}

.typing .dot:nth-child(2) {
	animation-delay: .2s
}

.typing .dot:nth-child(3) {
	animation-delay: .4s
}

@keyframes blink {

	0%,
	80%,
	100% {
		opacity: .25;
		transform: translateY(0)
	}

	40% {
		opacity: 1;
		transform: translateY(-2px)
	}
}

.quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.quick {
	background: #eef2ff;
	border: 1px solid #d0d7ff;
	color: #333;
	border-radius: 20px;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 15px;
	transition: background 0.2s, transform 0.1s;
}

.quick:hover {
	background: #dce4ff;
	transform: scale(1.03);
}

small {
	float: right;
	padding-top: 10px;
	font-weight: bold;
	color: #fff;
}