/**
 * SMH Theme — support-chat widget (launcher + panel).
 *
 * Self-contained on purpose: the same stylesheet is inlined into the
 * HardShell app shells (auth), where the theme tokens.css/components.css
 * do NOT exist. Every var() therefore carries a light-theme brand fallback;
 * when the theme tokens ARE present (theme pages) they simply win.
 */

/* ── Dark theme fallback palette ─────────────────────────────────────────
   When the chat runs inside a dark shell (HardShell app pages, native
   patient app) the theme tokens are absent, so .smh-chat--dark carries the
   same dark values tokens.css would have provided. On theme pages the real
   tokens win for unset properties, and this block keeps the widget
   consistent in dark mode even where no tokens exist. */

.smh-chat--dark {
	--color-primary: #40c3d9;
	--color-primary-hover: #2fb0c6;
	--color-primary-active: #2396aa;
	--color-secondary: #94a7bc;
	--color-danger: #f07a6b;
	--color-bg: #0b1417;
	--color-bg-alt: #111d22;
	--color-surface: #142329;
	--color-hover-bg: rgba(64, 195, 217, 0.16);
	--color-text: rgba(255, 255, 255, 0.92);
	--color-text-secondary: rgba(255, 255, 255, 0.68);
	--color-text-inverse: #041015;
	--color-border: rgba(64, 195, 217, 0.22);
	--color-border-strong: rgba(64, 195, 217, 0.32);
	--color-divider: rgba(64, 195, 217, 0.12);
	--color-focus-ring: rgba(64, 195, 217, 0.45);
}

/* ── Root & launcher ─────────────────────────────────────────────────── */

.smh-chat {
	position: fixed;
	inset-block-end: var(--smh-chat-bottom, 1.25rem);
	inset-inline-end: 1.25rem;
	z-index: var(--smh-chat-z, 10000);
}

.smh-chat__launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-primary, #07889b);
	color: var(--color-text-inverse, #fdfdfd);
	box-shadow: var(--shadow-soft, 0 18px 40px rgba(7, 136, 155, 0.12));
	transition: background-color var(--transition-fast, 120ms ease), transform var(--transition-fast, 120ms ease);
}

.smh-chat__launcher:hover,
.smh-chat__launcher:focus {
	background: var(--color-primary-hover, #067687);
	transform: translateY(-2px);
}

.smh-chat__launcher svg {
	width: 26px;
	height: 26px;
}

.smh-chat__launcher-close {
	display: none;
}

.smh-chat.is-open .smh-chat__launcher-icon {
	display: none;
}

.smh-chat.is-open .smh-chat__launcher-close {
	display: inline-flex;
}

/* Screen-reader-only text (no dependency on theme utilities) */
.smh-chat__vh {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── Panel ────────────────────────────────────────────────────────────── */

.smh-chat__panel {
	display: flex;
	flex-direction: column;
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	inset-inline-end: 0;
	width: min(380px, calc(100vw - 2rem));
	height: min(600px, calc(100vh - 7rem));
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, rgba(44, 62, 80, 0.16));
	border-radius: var(--radius-lg, 1rem);
	box-shadow: var(--shadow-modal, 0 24px 60px rgba(12, 26, 32, 0.28));
	overflow: hidden;
}

/* The `hidden` attribute must beat `display:flex` above */
.smh-chat__panel[hidden],
.smh-chat__lead[hidden] {
	display: none;
}

.smh-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
	background: var(--color-surface, #ffffff);
	border-block-end: 1px solid var(--color-divider, rgba(44, 62, 80, 0.08));
	color: var(--color-text, #000000de);
}

/* Chat identity: logo (light/dark variants) + site name + live label */
.smh-chat__identity {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	min-width: 0;
}

.smh-chat__identity-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.smh-chat__identity-logo-img {
	display: block;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.smh-chat__identity-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.25;
}

.smh-chat__identity-name {
	font-weight: 700;
	font-size: var(--fs-sm, 0.875rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smh-chat__identity-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-xs, 0.78rem);
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
}

.smh-chat__live-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: #2ecc71;
	box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
	animation: smh-chat-pulse 2s infinite;
}

@keyframes smh-chat-pulse {
	0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.45); }
	70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.smh-chat__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: var(--radius-md, 0.625rem);
	background: transparent;
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
	transition: color var(--transition-fast, 120ms ease), background-color var(--transition-fast, 120ms ease);
}

.smh-chat__close:hover,
.smh-chat__close:focus {
	color: var(--color-text, #000000de);
	background: var(--color-hover-bg, rgba(7, 136, 155, 0.08));
}

/* ── History ──────────────────────────────────────────────────────────── */

.smh-chat__history {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: var(--space-4, 1rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
	background: var(--color-bg-alt, #ecf0f1);
}

.smh-chat__msg {
	max-width: 86%;
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
	border-radius: var(--radius-lg, 1rem);
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.55;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.smh-chat__msg--user {
	align-self: flex-end;
	background: var(--color-primary, #07889b);
	color: var(--color-text-inverse, #fdfdfd);
	border-end-end-radius: var(--radius-sm, 0.375rem);
}

.smh-chat__msg--assistant {
	align-self: flex-start;
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, rgba(44, 62, 80, 0.16));
	border-start-start-radius: var(--radius-sm, 0.375rem);
}

.smh-chat__typing {
	align-self: flex-start;
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
	font-size: var(--fs-sm, 0.875rem);
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.smh-chat__msg-actions {
	margin-block-start: var(--space-2, 0.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.smh-chat__btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 0.5rem);
}

.smh-chat__refs {
	font-size: var(--fs-xs, 0.78rem);
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
}

.smh-chat__refs a {
	display: block;
	padding-block: 1px;
	color: var(--color-primary, #07889b);
}

/* ── Practitioner cards rendered inside the chat ─────────────────────── */

.smh-chat__cards {
	display: grid;
	gap: var(--space-3, 0.75rem);
}

.smh-chat-card {
	display: flex;
	gap: var(--space-3, 0.75rem);
	align-items: center;
	padding: var(--space-3, 0.75rem);
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, rgba(44, 62, 80, 0.16));
	border-radius: var(--radius-md, 0.625rem);
	text-decoration: none;
	color: var(--color-text, #000000de);
	transition: border-color var(--transition-fast, 120ms ease), box-shadow var(--transition-fast, 120ms ease);
}

.smh-chat-card:hover,
.smh-chat-card:focus {
	border-color: var(--color-primary, #07889b);
	box-shadow: var(--shadow-card, 0 8px 18px rgba(7, 136, 155, 0.06));
	color: var(--color-text, #000000de);
}

.smh-chat-card__photo {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: var(--radius-pill, 999px);
	object-fit: cover;
	background: var(--color-bg-alt, #ecf0f1);
}

.smh-chat-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.smh-chat-card__name {
	font-weight: 700;
	line-height: 1.3;
}

.smh-chat-card__loc {
	font-size: var(--fs-sm, 0.875rem);
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
}

/* ── Buttons (self-contained — theme .smh-btn is not available on shells) ── */

.smh-chat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 0.5rem);
	padding: 0.65rem 1.35rem;
	border-radius: var(--radius-md, 0.625rem);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: var(--fs-base, 1rem);
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease),
		color var(--transition-fast, 120ms ease), box-shadow var(--transition-fast, 120ms ease);
}

.smh-chat__btn:active {
	transform: translateY(1px);
}

.smh-chat__btn--primary {
	background: var(--color-primary, #07889b);
	border-color: var(--color-primary, #07889b);
	color: var(--color-text-inverse, #fdfdfd);
}

.smh-chat__btn--primary:hover,
.smh-chat__btn--primary:focus {
	background: var(--color-primary-hover, #067687);
	border-color: var(--color-primary-hover, #067687);
	color: var(--color-text-inverse, #fdfdfd);
}

.smh-chat__btn--ghost {
	background: transparent;
	border-color: var(--color-border, rgba(44, 62, 80, 0.16));
	color: var(--color-text, #000000de);
}

.smh-chat__btn--ghost:hover,
.smh-chat__btn--ghost:focus {
	background: var(--color-hover-bg, rgba(7, 136, 155, 0.08));
	border-color: var(--color-border-strong, rgba(44, 62, 80, 0.26));
	color: var(--color-primary, #07889b);
}

.smh-chat__btn--sm {
	padding: 0.45rem 1rem;
	font-size: var(--fs-sm, 0.875rem);
}

.smh-chat__btn:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

/* ── Lead form ───────────────────────────────────────────────────────── */

.smh-chat__lead {
	padding: var(--space-4, 1rem);
	border-block-start: 1px solid var(--color-divider, rgba(44, 62, 80, 0.08));
	background: var(--color-surface, #ffffff);
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 0.75rem);
}

.smh-chat__lead-note {
	margin: 0;
	font-size: var(--fs-sm, 0.875rem);
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
}

.smh-chat__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--fs-sm, 0.875rem);
	color: var(--color-text, #000000de);
}

.smh-chat__field input {
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--color-border-strong, rgba(44, 62, 80, 0.26));
	border-radius: var(--radius-sm, 0.375rem);
	background: var(--color-surface, #ffffff);
	color: var(--color-text, #000000de);
	font-size: var(--fs-sm, 0.875rem);
}

.smh-chat__field input:focus {
	outline: none;
	border-color: var(--color-primary, #07889b);
	box-shadow: 0 0 0 0.2rem var(--color-focus-ring, rgba(7, 136, 155, 0.4));
}

.smh-chat__lead-actions {
	display: flex;
	gap: var(--space-2, 0.5rem);
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.smh-chat__composer {
	padding: var(--space-3, 0.75rem);
	border-block-start: 1px solid var(--color-divider, rgba(44, 62, 80, 0.08));
	background: var(--color-surface, #ffffff);
	display: flex;
	gap: var(--space-2, 0.5rem);
}

.smh-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--color-border-strong, rgba(44, 62, 80, 0.26));
	border-radius: var(--radius-pill, 999px);
	background: var(--color-bg, #fafafa);
	color: var(--color-text, #000000de);
	font-size: var(--fs-sm, 0.875rem);
}

.smh-chat__input:focus {
	outline: none;
	border-color: var(--color-primary, #07889b);
	box-shadow: 0 0 0 0.2rem var(--color-focus-ring, rgba(7, 136, 155, 0.4));
}

.smh-chat__send {
	border-radius: var(--radius-pill, 999px);
	flex: 0 0 auto;
}

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.smh-chat {
		inset-block-end: var(--smh-chat-bottom, 0.75rem);
		inset-inline-end: 0.75rem;
	}

	.smh-chat__panel {
		width: calc(100vw - 1.5rem);
		height: min(560px, calc(100vh - 8rem));
	}
}

/* ── Typing dots (the whirling indicator inside assistant messages) ───── */

.smh-chat__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.smh-chat__dots > span {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	animation: smh-chat-dot-bounce 1.2s infinite ease-in-out;
}

.smh-chat__dots > span:nth-child(2) { animation-delay: 0.18s; }
.smh-chat__dots > span:nth-child(3) { animation-delay: 0.36s; }

@keyframes smh-chat-dot-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Mood check-in cards (mirrors the patients-app emoji card grid) ───── */

.smh-chat__mood-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 0.6rem;
	max-width: 94%;
	align-self: flex-start;
}

.smh-chat__mood {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	border-radius: 0.9rem;
	border: 1px solid var(--color-border-strong, rgba(44, 62, 80, 0.2));
	background: var(--color-surface, #ffffff);
	padding: 0.5rem 0.7rem;
	font-size: var(--fs-sm, 0.85rem);
	line-height: 1.25;
	text-align: start;
	cursor: pointer;
	color: var(--color-text, #000000de);
	transition: border-color var(--transition-fast, 120ms ease),
		box-shadow var(--transition-fast, 120ms ease), transform var(--transition-fast, 120ms ease);
}

.smh-chat__mood:hover,
.smh-chat__mood:focus {
	border-color: var(--color-primary, #07889b);
	box-shadow: var(--shadow-card, 0 8px 18px rgba(7, 136, 155, 0.1));
	transform: translateY(-1px);
	outline: none;
}

.smh-chat__mood:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.smh-chat__mood-emoji {
	font-size: 1.2rem;
	line-height: 1;
}

.smh-chat__mood-label {
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.64));
	white-space: nowrap;
}

/* ── Lead form as an in-chat assistant bubble ─────────────────────────── */

.smh-chat__lead-bubble {
	/* No overflow:hidden here: the bubble is a flex item of the history
	   column, and a non-visible overflow would zero its automatic minimum
	   size and let flexbox crush it to its 1px borders. */
	padding: 0;
}

.smh-chat__lead-bubble .smh-chat__lead {
	border-block-start: 0;
	background: transparent;
	width: min(290px, 100%);
	gap: var(--space-2, 0.5rem);
	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

.smh-chat__lead-bubble .smh-chat__field input {
	width: 100%;
	box-sizing: border-box;
}

/* ── Entry teaser (preview bubble above the launcher) ─────────────────── */

.smh-chat__teaser {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2, 0.5rem);
	position: absolute;
	inset-block-end: calc(100% + 0.8rem);
	inset-inline-end: 0;
	width: min(300px, calc(100vw - 2.5rem));
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: start;
	animation: smh-chat-teaser-in 300ms ease both;
}

.smh-chat__teaser[hidden] {
	display: none;
}

@keyframes smh-chat-teaser-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.smh-chat__teaser-msg {
	max-width: 100%;
	padding: 0.55rem 0.8rem;
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, rgba(44, 62, 80, 0.16));
	border-radius: var(--radius-lg, 1rem);
	border-start-start-radius: var(--radius-sm, 0.375rem);
	box-shadow: var(--shadow-soft, 0 10px 26px rgba(7, 136, 155, 0.12));
	font-size: var(--fs-sm, 0.875rem);
	line-height: 1.5;
	color: var(--color-text, #000000de);
	word-wrap: break-word;
	white-space: pre-wrap;
}

.smh-chat__teaser-msg.smh-chat__typing {
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
	min-width: 56px;
	padding-block: 0.5rem;
}

/* ── Disabled composer (locked until the mood is picked) ──────────────── */

.smh-chat__input:disabled {
	background: var(--color-bg-alt, #eef1f3);
	border-color: var(--color-border, rgba(44, 62, 80, 0.16));
	color: var(--color-text-secondary, rgba(0, 0, 0, 0.5));
	cursor: default;
}

.smh-chat__composer:has(.smh-chat__input:disabled) .smh-chat__send {
	opacity: 0.55;
}

@media (max-width: 480px) {
	.smh-chat__mood-grid {
		grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	}

	.smh-chat__teaser {
		width: min(280px, calc(100vw - 3rem));
	}
}