/* FlexSite Chat Concierge -- widget styling.
   Every color below is a var(--wp--preset--color--*) custom property
   sourced from inc/palette.php (the single brand-color source of
   truth) -- no hex value is hard-coded here, and deliberately no
   fallback hex on any var() either, so a missing/renamed slug fails
   visibly instead of silently reverting to a stale guess. */

#flexsite-chat-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.fsc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#fsc-bubble {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--white);
	font-size: 26px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
#fsc-bubble:hover { filter: brightness(1.08); }
#fsc-bubble:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 3px; }

#fsc-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: min(360px, 92vw);
	max-height: min(520px, 72vh);
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--taupe);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
/* The #fsc-panel ID selector above outranks the browser's built-in
   [hidden] { display: none } rule, so without this override, toggling
   the `hidden` attribute in JS has no visual effect and the panel can
   never actually close. */
#fsc-panel[hidden] {
	display: none;
}

#fsc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	padding: 12px 16px;
}
#fsc-header .fsc-title { font-weight: 600; }
#fsc-close {
	background: none; border: none; color: var(--wp--preset--color--white);
	font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}

#fsc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fsc-msg { display: flex; }
.fsc-msg-user { justify-content: flex-end; }
.fsc-msg-bot { justify-content: flex-start; }

.fsc-bubble-text {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
}
.fsc-msg-bot .fsc-bubble-text {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--taupe);
	color: var(--wp--preset--color--ink);
}
.fsc-msg-user .fsc-bubble-text {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--white);
}

.fsc-inline-book {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	cursor: pointer;
}

#fsc-actions { padding: 0 16px; }
#fsc-book-btn {
	width: 100%;
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-bottom: 10px;
}
#fsc-book-btn:hover { filter: brightness(1.05); }

#fsc-form {
	display: flex;
	gap: 8px;
	padding: 12px 16px 16px;
	border-top: 1px solid var(--wp--preset--color--taupe);
}
#fsc-input {
	flex: 1;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--taupe);
	font-size: 14px;
}
#fsc-form button[type="submit"] {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}

/* Booking modal (inline scheduler embed) */
#fsc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
}
#fsc-modal-box {
	position: relative;
	width: min(760px, 100%);
	height: min(680px, 90vh);
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#fsc-modal-iframe { width: 100%; height: 100%; border: none; }
#fsc-modal-close {
	position: absolute;
	top: 8px; right: 8px;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: none;
	font-size: 20px;
	cursor: pointer;
	z-index: 1;
}

@media (max-width: 480px) {
	#flexsite-chat-root { right: 12px; bottom: 12px; }
	#fsc-panel { right: -4px; width: 96vw; }
}