/**
 * Sound Floors Suite — floating "Request a Bid" widget.
 * Brand: charcoal #16181d + brand navy #030460 (navy on light only; white/silver on dark).
 * Mobile: bottom-sheet style under 480px. Motion respects
 * prefers-reduced-motion.
 */

.sfs-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.sfs-widget.sfs-w-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* --- Launcher ---------------------------------------------------------- */
.sfs-w-launcher {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	color: #030460;
	border: 1.5px solid #030460;
	border: 0;
	border-radius: 999px;
	padding: 13px 20px 13px 15px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(22, 24, 29, .28);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.sfs-w-launcher:hover {
	background: #030460;
	color: #ffffff;
	transform: scale(1.04);
	box-shadow: 0 10px 28px rgba(22, 24, 29, .34);
}
.sfs-w-launcher-icon { display: inline-flex; }
.sfs-w-open .sfs-w-launcher { display: none; }

/* Soft attention pulse on first appearance */
.sfs-w-visible .sfs-w-launcher { animation: sfs-w-pulse 2.4s ease 1; }
@keyframes sfs-w-pulse {
	0%   { box-shadow: 0 6px 22px rgba(22,24,29,.28), 0 0 0 0 rgba(3,4,96,.40); }
	60%  { box-shadow: 0 6px 22px rgba(22,24,29,.28), 0 0 0 16px rgba(3,4,96,0); }
	100% { box-shadow: 0 6px 22px rgba(22,24,29,.28), 0 0 0 0 rgba(3,4,96,0); }
}

/* --- Dismiss (×) badge on the launcher --------------------------------- */
.sfs-w-dismiss {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #16181d;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}
.sfs-widget:hover .sfs-w-dismiss { opacity: .92; }
.sfs-w-open .sfs-w-dismiss { display: none; }

/* --- Panel ------------------------------------------------------------- */
.sfs-w-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 48px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e5e8;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(22, 24, 29, .30);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px) scale(.98);
	transition: opacity .25s ease, transform .25s ease;
}
.sfs-w-panel[hidden] { display: none; }
.sfs-w-open .sfs-w-panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

/* --- Header ------------------------------------------------------------ */
.sfs-w-header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 16px;
	background: #16181d;
	color: #fff;
	flex-shrink: 0;
}
.sfs-w-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ffffff;
	color: #030460;
	flex-shrink: 0;
}
.sfs-w-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sfs-w-title { font-size: 15px; font-weight: 800; line-height: 1.25; }
.sfs-w-sub { font-size: 11px; opacity: .72; line-height: 1.3; }
.sfs-w-close {
	border: 0;
	background: transparent;
	color: #fff;
	opacity: .7;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	display: inline-flex;
}
.sfs-w-close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

/* --- Body (chat scroll area) ------------------------------------------- */
.sfs-w-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #f7f7f8;
}
.sfs-w-bubble {
	max-width: 82%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.45;
	animation: sfs-w-bubble-in .22s ease both;
	word-wrap: break-word;
}
@keyframes sfs-w-bubble-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sfs-w-bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #e7e7ea;
	border-bottom-left-radius: 5px;
	color: #24262c;
}
.sfs-w-user {
	align-self: flex-end;
	background: #030460;
	color: #fff;
	border-bottom-right-radius: 5px;
}

/* Typing indicator */
.sfs-w-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.sfs-w-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #b9bac0;
	animation: sfs-w-blink 1s infinite ease-in-out;
}
.sfs-w-typing span:nth-child(2) { animation-delay: .16s; }
.sfs-w-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes sfs-w-blink {
	0%, 80%, 100% { opacity: .35; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-3px); }
}

/* --- Chips ------------------------------------------------------------- */
.sfs-w-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 2px 0 4px;
	animation: sfs-w-bubble-in .22s ease both;
}
.sfs-w-chip {
	border: 1.5px solid #030460;
	background: #fff;
	color: #030460;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sfs-w-chip:hover {
	background: #030460;
	color: #fff;
	transform: translateY(-1px);
}

/* --- Input row --------------------------------------------------------- */
.sfs-w-inputrow {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #e9e9ec;
	background: #fff;
	flex-shrink: 0;
	transition: opacity .2s ease;
}
.sfs-w-inputrow-off { opacity: .45; pointer-events: none; }
.sfs-w-input {
	flex: 1;
	min-width: 0;
	border: 1.5px solid #dcdce0;
	border-radius: 11px;
	padding: 10px 13px;
	font-size: 14px;
	color: #16181d;
	outline: none;
	transition: border-color .15s ease;
}
.sfs-w-input:focus { border-color: #030460; }
.sfs-w-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	border: 0;
	border-radius: 11px;
	background: #030460;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
	flex-shrink: 0;
}
.sfs-w-send:hover { background: #1e1f8f; }

/* --- Touch devices: no hover, so the dismiss (×) must be visible --------- */
@media (hover: none) {
	.sfs-w-dismiss { opacity: .92; }
}

/* --- Mobile: bottom sheet ---------------------------------------------- */
@media (max-width: 480px) {
	.sfs-widget {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
	.sfs-w-panel {
		position: fixed;
		left: 10px;
		right: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: 76vh;   /* fallback */
		height: 76dvh;  /* tracks iOS Safari's collapsing toolbar */
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
	}
	/* 16px input beats iOS focus-zoom; roomier chips = real tap targets */
	.sfs-w-input { font-size: 16px; }
	.sfs-w-chip { padding: 11px 16px; font-size: 14px; }
	.sfs-w-send { min-width: 44px; }
	.sfs-w-close { padding: 10px; }
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sfs-widget,
	.sfs-w-panel,
	.sfs-w-bubble,
	.sfs-w-chips,
	.sfs-w-launcher { transition: none; animation: none; }
	.sfs-w-typing span { animation: none; }
}