@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html:focus-within { scroll-behavior: smooth; }

:root {
	--red: #b22222;
	--grey: #F5F5F5;
	--grey-d-1: #EEE;
	--grey-d-2: #DDD;
	--grey-d-3: #888;
	--white: #FFF;
	--dark: #222;

	/* Responsive sizing knobs */
	--edge: clamp(0.75rem, 2.2vw, 2rem);
	--btn: clamp(3.25rem, 7vw, 4rem);
	--panel-w: clamp(18rem, 36vw, 26.25rem);
	--panel-h: clamp(22rem, 55vh, 34rem);
}

img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }

@media (prefers-reduced-motion: reduce) {
	html:focus-within { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* CHATBOX */
.chatbox-wrapper {
	position: fixed !important;
	right: max(var(--edge), env(safe-area-inset-right));
	bottom: max(var(--edge), env(safe-area-inset-bottom));
	width: var(--btn);
	height: var(--btn);
	z-index: 2147483647 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto;
}

.chatbox-toggle {
	width: 100%;
	height: 100%;
	background: var(--red);
	color: var(--white);
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .2s;
	touch-action: manipulation;
	pointer-events: auto;
}
.chatbox-toggle:active { transform: scale(.92); }

.chatbox-message-wrapper {
	position: absolute;
	bottom: calc(100% + 0.75rem);
	right: 0;

	width: min(var(--panel-w), calc(100vw - (var(--edge) * 2)));
	border-radius: .75rem;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .14);

	transform: scale(0);
	transform-origin: bottom right;
	transition: transform .2s;
}
.chatbox-message-wrapper.show { transform: scale(1); }

.chatbox-message-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--white);
	padding: .75rem 1rem;
	gap: .75rem;
}

.chatbox-message-profile {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-width: 0;
}
.chatbox-message-image {
	width: clamp(2.25rem, 5vw, 3rem);
	height: clamp(2.25rem, 5vw, 3rem);
	object-fit: cover;
	border-radius: 50%;
	flex: 0 0 auto;
}
.chatbox-message-name {
	font-size: clamp(1rem, 2.4vw, 1.125rem);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chatbox-message-status {
	font-size: .875rem;
	color: var(--grey-d-3);
}

.chatbox-message-dropdown { position: relative; flex: 0 0 auto; }
.chatbox-message-dropdown-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
	cursor: pointer;
	border-radius: 50%;
}
.chatbox-message-dropdown-toggle:hover { background: var(--grey); }

.chatbox-message-dropdown-menu {
	list-style: none;
	margin: 0;
	position: absolute;
	top: 110%;
	right: 0;
	background: var(--white);
	padding: .5rem 0;
	width: 160px;
	box-shadow: .25rem .25rem 1.5rem rgba(0, 0, 0, .1);
	transform: scale(0);
	transform-origin: top right;
	transition: transform .2s;
	border-radius: .5rem;
}
.chatbox-message-dropdown-menu.show { transform: scale(1); }
.chatbox-message-dropdown-menu a {
	font-size: .875rem;
	font-weight: 500;
	color: var(--dark);
	text-decoration: none;
	padding: .5rem 1rem;
	display: block;
}
.chatbox-message-dropdown-menu a:hover { background: var(--grey); }

.chatbox-message-content {
	background: var(--grey);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;

	max-height: min(var(--panel-h), calc(100dvh - (var(--edge) * 2) - var(--btn) - 5.5rem));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.chatbox-card {
	background: var(--white);
	border: 1px solid var(--grey-d-1);
	border-radius: .75rem;
	padding: 1rem;
	box-shadow: .25rem .25rem 1.5rem rgba(0, 0, 0, .05);
}

.chatbox-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: .25rem;
}
.chatbox-subtitle {
	font-size: .92rem;
	color: var(--grey-d-3);
	margin-bottom: .75rem;
}

.chatbox-label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--dark);
	margin: .5rem 0 .35rem;
}

.chatbox-select,
.chatbox-inputfield,
.chatbox-textarea {
	width: 100%;
	border: 1px solid var(--grey-d-2);
	border-radius: .65rem;
	padding: .7rem .8rem;
	outline: none;
	background: var(--white);
}
.chatbox-textarea { min-height: 7rem; resize: vertical; }

.chatbox-select:focus,
.chatbox-inputfield:focus,
.chatbox-textarea:focus {
	border-color: rgba(51, 93, 255, .55);
	box-shadow: 0 0 0 3px rgba(51, 93, 255, .15);
}

.chatbox-actions {
	display: flex;
	gap: .6rem;
	margin-top: .9rem;
}

.chatbox-primary {
	flex: 1;
	border: none;
	border-radius: .7rem;
	padding: .75rem 1rem;
	background: var(--red);
	color: var(--white);
	font-weight: 700;
	cursor: pointer;
}
.chatbox-primary:active { transform: scale(.99); }

.chatbox-secondary {
	border: 1px solid var(--grey-d-2);
	border-radius: .7rem;
	padding: .75rem 1rem;
	background: var(--white);
	color: var(--dark);
	font-weight: 700;
	cursor: pointer;
}

.chatbox-success {
	display: none;
	align-items: flex-start;
	gap: .6rem;
	background: rgba(51, 93, 255, .08);
	border: 1px solid rgba(51, 93, 255, .18);
	border-radius: .75rem;
	padding: .9rem 1rem;
}

.chatbox-success.show { display: flex; }
.chatbox-success i { font-size: 1.25rem; color: var(--red); margin-top: .1rem; }
.chatbox-success strong { display:block; margin-bottom: .1rem; }

/* Bottom (kept, but now used as a quick note area) */
.chatbox-message-bottom {
	background: var(--white);
	padding: .75rem 1rem;
	border-top: 1px solid var(--grey-d-1);
}
.chatbox-message-form {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--grey);
	border-radius: .75rem;
	padding: .5rem .75rem;
}
.chatbox-message-input {
	flex: 1 1 auto;
	width: 100%;
	background: transparent;
	outline: none;
	border: none;
	resize: none;
	max-height: 7.5rem;
	overflow-y: auto;
	scrollbar-width: none;
}
.chatbox-message-input::-webkit-scrollbar { display: none; }

.chatbox-message-submit {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	font-size: 1.25rem;
	color: var(--red);
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: .6rem;
	touch-action: manipulation;
}
.chatbox-message-submit:hover { background: var(--grey-d-1); }

/* MOBILE/SMALL SCREENS */
@media (max-width: 576px) {
	:root { --panel-w: 100vw; --panel-h: 62vh; }
	.chatbox-message-wrapper {
		right: 0;
		width: calc(100vw - (var(--edge) * 2));
	}
	.chatbox-message-header,
	.chatbox-message-bottom {
		padding-left: .85rem;
		padding-right: .85rem;
	}
}

/* Very small heights (landscape phones) */
@media (max-height: 520px) {
	.chatbox-message-content {
		max-height: min(18rem, calc(100dvh - (var(--edge) * 2) - var(--btn) - 5.5rem));
	}
}