/*
 * CQI Bot public widget styles. Self-contained, no CDN font or icon
 * dependency. Accent colour is set per-site via a CSS custom property
 * so branding never requires editing this file.
 */

.cqi-bot-launcher {
	position: fixed;
	bottom: var(--cqi-bot-offset-y, 20px);
	right: var(--cqi-bot-offset-x, 20px);
	z-index: 999999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 3px solid var(--cqi-bot-accent, #0B7A6E);
	background: #FFFFFF;
	color: var(--cqi-bot-accent, #0B7A6E);
	font-size: 24px;
	font-weight: 400;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 0 0 5px color-mix(in srgb, var(--cqi-bot-accent, #0B7A6E) 18%, transparent);
	overflow: hidden;
	padding: 9px;
	transition: box-shadow 0.2s ease;
}

.cqi-bot-launcher:hover,
.cqi-bot-launcher:focus-visible {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), 0 0 0 7px color-mix(in srgb, var(--cqi-bot-accent, #0B7A6E) 24%, transparent);
}

.cqi-bot-launcher img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
}

.cqi-bot-launcher.cqi-bot-position-bottom-left {
	right: auto;
	left: var(--cqi-bot-offset-x, 20px);
}

.cqi-bot-cta {
	position: fixed;
	/* 12px above the launcher's own bottom offset, so the pill tracks
	   the launcher whatever offset_y is set to. */
	bottom: calc(var(--cqi-bot-offset-y, 20px) + 12px);
	/* 66px further out than the launcher's own side offset: the
	   launcher's 56px width plus the original 10px gap between pill
	   and launcher, preserved exactly regardless of offset_x. */
	right: calc(var(--cqi-bot-offset-x, 20px) + 66px);
	z-index: 999998;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 999px;
	padding: 10px 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	animation: cqi-bot-cta-in 0.3s ease 0.4s both;
}

.cqi-bot-cta.cqi-bot-position-bottom-left {
	right: auto;
	left: calc(var(--cqi-bot-offset-x, 20px) + 66px);
}

.cqi-bot-cta__my,
.cqi-bot-cta__assistant {
	color: #2E3B52;
}

.cqi-bot-cta__chat {
	color: var(--cqi-bot-accent, #0B7A6E);
}

@keyframes cqi-bot-cta-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cqi-bot-panel {
	position: fixed;
	/* 68px above the launcher's own bottom offset: the 56px launcher
	   height plus the original 12px gap, preserved regardless of
	   offset_y. */
	bottom: calc(var(--cqi-bot-offset-y, 20px) + 68px);
	right: var(--cqi-bot-offset-x, 20px);
	z-index: 999999;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - 120px);
	display: none;
	flex-direction: column;
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cqi-bot-panel.cqi-bot-position-bottom-left {
	/* Pre-existing gap, not introduced by the offset work above: this
	   selector didn't exist at all before, so in bottom-left mode the
	   panel stayed anchored to the right edge even though the
	   launcher and invitation pill both correctly moved left,
	   visibly wrong (the panel could open detached from the launcher
	   that opened it, or off-screen on a narrow viewport) but easy to
	   miss since bottom-left is the less common of the two settings. */
	right: auto;
	left: var(--cqi-bot-offset-x, 20px);
}

.cqi-bot-panel.is-open {
	display: flex;
}

.cqi-bot-panel__header {
	background: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cqi-bot-panel__header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cqi-bot-panel__handoff-link {
	background: none;
	border: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.cqi-bot-panel__close {
	background: none;
	border: none;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 400;
	cursor: pointer;
	line-height: 1;
}

.cqi-bot-panel__voice-toggle {
	background: none;
	border: none;
	color: #FFFFFF;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	display: flex;
	align-items: center;
	opacity: 0.9;
}

.cqi-bot-panel__voice-toggle:hover,
.cqi-bot-panel__voice-toggle:focus-visible {
	opacity: 1;
}

.cqi-bot-panel__voice-toggle.is-muted {
	opacity: 0.55;
}

.cqi-bot-panel__handoff-offer {
	padding: 10px 14px;
	border-top: 1px solid #E2E4E8;
	background: #F9FAFA;
}

.cqi-bot-handoff__intro {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #1D2327;
}

.cqi-bot-handoff__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cqi-bot-handoff__head .cqi-bot-handoff__intro {
	margin: 0 0 8px;
}

.cqi-bot-handoff__close {
	appearance: none;
	border: none;
	background: transparent;
	color: #6B7280;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 8px;
}

.cqi-bot-handoff__close:hover,
.cqi-bot-handoff__close:focus-visible {
	color: #1D2327;
}

.cqi-bot-handoff__button {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 10px;
	border: none;
	border-radius: 8px;
	margin-bottom: 8px;
	cursor: pointer;
}

.cqi-bot-handoff__email-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cqi-bot-handoff__email-form input {
	border: 1px solid #E2E4E8;
	border-radius: 8px;
	padding: 7px 9px;
	font-size: 13px;
	font-weight: 400;
}

.cqi-bot-handoff__note {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 400;
	color: #1D2327;
}

.cqi-bot-panel__messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cqi-bot-message {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.cqi-bot-message.is-user {
	align-self: flex-end;
	background: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
}

.cqi-bot-message.is-assistant {
	align-self: flex-start;
	background: #F1F2F4;
	color: #1D2327;
}

.cqi-bot-message__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 6px;
	vertical-align: middle;
	border: none;
	border-radius: 50%;
	background: #E2E4E8;
	color: #6B7280;
	cursor: pointer;
	padding: 0;
}

.cqi-bot-message__play:hover,
.cqi-bot-message__play:focus-visible {
	background: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
}

.cqi-bot-sources {
	align-self: flex-start;
	max-width: 85%;
	font-size: 10px;
	font-weight: 400;
	color: #8A919C;
	padding: 0 2px;
}

.cqi-bot-sources a {
	color: #8A919C;
	text-decoration: underline;
}

.cqi-bot-sources a:hover,
.cqi-bot-sources a:focus {
	color: var(--cqi-bot-accent, #0B7A6E);
}

.cqi-bot-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cqi-bot-panel__form {
	display: flex;
	border-top: 1px solid #E2E4E8;
	padding: 8px;
	gap: 8px;
}

.cqi-bot-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px 8px;
	border-top: 1px solid #F1F2F4;
}

.cqi-bot-panel__notice {
	font-size: 10px;
	font-weight: 400;
	color: #8A919C;
}

.cqi-bot-panel__clinical-disclaimer {
	font-size: 11px;
	line-height: 1.4;
	color: #7C2D12;
	background: #FFF7ED;
	border-bottom: 1px solid #F59E0B;
	padding: 6px 10px;
}

.cqi-bot-panel__clear-link {
	background: none;
	border: none;
	font-size: 10px;
	font-weight: 600;
	color: #8A919C;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.cqi-bot-panel__input {
	flex: 1 1 auto;
	border: 1px solid #E2E4E8;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 400;
}

.cqi-bot-panel__send {
	border: none;
	border-radius: 8px;
	background: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	cursor: pointer;
}

.cqi-bot-panel__mic {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	border: 1px solid #E2E4E8;
	border-radius: 8px;
	background: #FFFFFF;
	color: #6B7280;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cqi-bot-panel__mic:hover,
.cqi-bot-panel__mic:focus-visible {
	color: var(--cqi-bot-accent, #0B7A6E);
	border-color: var(--cqi-bot-accent, #0B7A6E);
}

.cqi-bot-panel__mic.is-listening {
	background: var(--cqi-bot-accent, #0B7A6E);
	border-color: var(--cqi-bot-accent, #0B7A6E);
	color: #FFFFFF;
	animation: cqi-bot-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes cqi-bot-mic-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--cqi-bot-accent, #0B7A6E) 45%, transparent);
	}
	50% {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--cqi-bot-accent, #0B7A6E) 0%, transparent);
	}
}

.cqi-bot-panel__send:focus-visible,
.cqi-bot-launcher:focus-visible,
.cqi-bot-panel__close:focus-visible,
.cqi-bot-panel__input:focus-visible {
	outline: 2px solid var(--cqi-bot-accent, #0B7A6E);
	outline-offset: 2px;
}