/**
 * Floating support assistant.
 *
 * The widget renders in the footer of every page, so its styles cannot live in
 * app.css, which is only enqueued on the signed in and auth screens. Without
 * them the panel lost its fixed positioning and sat in the page flow.
 */

.sv-chat {
	position: fixed;
	right: var(--sv-space-md);
	bottom: var(--sv-space-md);
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.sv-chat-launcher {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--sv-radius-pill);
	background: var(--sv-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(52, 152, 219, 0.35);
	transition: background-color 200ms ease, transform 200ms ease;
	order: 2;
}

.sv-chat-launcher:hover {
	background: var(--sv-accent-hover);
	transform: translateY(-1px);
}

.sv-chat-launcher-close {
	display: none;
}

.sv-chat.is-open .sv-chat-launcher-open {
	display: none;
}

.sv-chat.is-open .sv-chat-launcher-close {
	display: inline-flex;
}

.sv-chat-panel {
	order: 1;
	width: min(360px, calc(100vw - 32px));
	max-height: min(540px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: #131b26;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.sv-chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--sv-border);
}

.sv-chat-head strong {
	display: block;
	font-family: var(--sv-font-display);
	font-size: 0.9375rem;
}

.sv-chat-head span {
	display: block;
}

.sv-chat-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sv-chat-msg {
	max-width: 88%;
	padding: 11px 14px;
	border-radius: var(--sv-radius);
	font-size: 0.875rem;
	line-height: 1.6;
}

.sv-chat-msg p {
	margin: 0;
}

.sv-chat-msg p + p {
	margin-top: 8px;
}

.sv-chat-msg.is-bot {
	align-self: flex-start;
	background: rgba(30, 58, 95, 0.35);
	border: 1px solid var(--sv-border);
	color: var(--sv-text-secondary);
}

.sv-chat-msg.is-user {
	align-self: flex-end;
	background: var(--sv-accent);
	color: #fff;
}

.sv-chat-msg.is-typing {
	color: var(--sv-text-faint);
	font-style: normal;
}

.sv-chat-form {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--sv-border);
}

.sv-chat-form .sv-input {
	padding: 11px 14px;
	font-size: 0.875rem;
}

.sv-chat-send {
	flex: none;
	width: 44px;
	padding: 0;
}

/* Clear of the home indicator when installed on a phone. */
.sv-chat {
	right: calc(var(--sv-space-md) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--sv-space-md) + env(safe-area-inset-bottom, 0px));
}