:root {
	--spabie-msg-accent: #e93b9b;
	--spabie-msg-ink: #192033;
	--spabie-msg-muted: #788197;
	--spabie-msg-line: #e9ecf3;
	--spabie-msg-surface: #ffffff;
	--spabie-msg-soft: #f6f7fb;
	--spabie-msg-radius: 20px;
}

.spabie-msg-app,
.spabie-msg-app *,
.spabie-msg-app *::before,
.spabie-msg-app *::after { box-sizing: border-box; }

.spabie-msg-app {
	color: var(--spabie-msg-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

.spabie-msg-app button,
.spabie-msg-app textarea,
.spabie-msg-app input { font: inherit; }

.spabie-msg-app button { cursor: pointer; }
.spabie-msg-app .is-hidden { display: none !important; }

.spabie-msg-page { width: 100%; max-width: 1180px; margin: 24px auto; }

.spabie-msg-shell {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--spabie-msg-surface);
	border: 1px solid var(--spabie-msg-line);
	border-radius: var(--spabie-msg-radius);
	box-shadow: 0 18px 65px rgba(24, 32, 54, .11);
}

.spabie-msg-page .spabie-msg-shell { height: min(760px, 78vh); min-height: 540px; }

.spabie-msg-topbar {
	height: 76px;
	padding: 15px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	background: linear-gradient(125deg, #232237 0%, #39243e 64%, #572347 100%);
}

.spabie-msg-topbar-brand { display: flex; align-items: center; gap: 11px; }
.spabie-msg-topbar-brand strong,
.spabie-msg-topbar-brand small { display: block; }
.spabie-msg-topbar-brand strong { font-size: 16px; letter-spacing: .1px; font-weight: 700; }
.spabie-msg-topbar-brand small { font-size: 12px; opacity: .82; }
.spabie-msg-spark { color: #fda7d4; font-size: 29px; }
.spabie-msg-topbar-actions { display: flex; align-items: center; gap: 8px; }

.spabie-msg-layout { display: grid; grid-template-columns: minmax(245px, 33%) 1fr; height: calc(100% - 76px); min-height: 0; }
.spabie-msg-sidebar { overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--spabie-msg-line); }
.spabie-msg-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 17px 10px; }
.spabie-msg-sidebar-heading strong { font-size: 16px; font-weight: 700; }

.spabie-msg-compose,
.spabie-msg-close,
.spabie-msg-push-toggle {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--spabie-msg-soft);
	color: var(--spabie-msg-ink);
	font-size: 20px;
}

.spabie-msg-back,
.spabie-msg-contact-back {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #8f174f;
	border-radius: 50%;
	background: #b51f68;
	color: #fff;
	box-shadow: 0 3px 10px rgba(143, 23, 79, .28);
	font-weight: 700;
}
.spabie-msg-back span[aria-hidden="true"],
.spabie-msg-contact-back span[aria-hidden="true"] { font-size: 24px; line-height: 1; }
.spabie-msg-app.is-contact-list .spabie-msg-contact-back { display: inline-flex; }
.spabie-msg-app.is-contact-list .spabie-msg-compose { display: none; }
.spabie-msg-app.is-contact-list .spabie-msg-sidebar-heading { justify-content: flex-start; gap: 12px; padding-bottom: 14px; }

.spabie-msg-close { color: white; background: rgba(255, 255, 255, .12); }
.spabie-msg-push-toggle { color: white; background: rgba(255, 255, 255, .12); font-size: 16px; }
.spabie-msg-push-toggle.is-enabled { background: rgba(253, 167, 212, .34); box-shadow: inset 0 0 0 1px rgba(253, 167, 212, .65); }
.spabie-msg-push-toggle.is-sound-off { opacity: .66; }

.spabie-msg-alert-dialog { position: fixed; z-index: 2147483640; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 19, 31, .58); }
.spabie-msg-alert-card { position: relative; width: min(390px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--spabie-msg-line); border-radius: 20px; background: #fff; color: var(--spabie-msg-ink); box-shadow: 0 22px 70px rgba(10, 13, 25, .3); text-align: center; }
.spabie-msg-alert-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--spabie-msg-soft); color: var(--spabie-msg-muted); font-size: 21px; }
.spabie-msg-alert-icon { display: block; margin: 2px 0 8px; font-size: 32px; }
.spabie-msg-alert-card h2 { margin: 0 25px 8px; color: var(--spabie-msg-ink); font-size: 20px; }
.spabie-msg-alert-card p { margin: 0 0 18px; color: var(--spabie-msg-muted); font-size: 14px; }
.spabie-msg-alert-actions { display: flex; justify-content: center; gap: 9px; }
.spabie-msg-enable-alerts,
.spabie-msg-alert-not-now,
.spabie-msg-push-control,
.spabie-msg-sound-control,
.spabie-msg-test-sound,
.spabie-msg-test-push,
.spabie-msg-test-vibration { width: 100%; margin: 5px 0; padding: 11px 14px; border: 1px solid var(--spabie-msg-line); border-radius: 22px; background: var(--spabie-msg-soft); color: var(--spabie-msg-ink); font-size: 15px; font-weight: 700; }
.spabie-msg-enable-alerts { border-color: var(--spabie-msg-accent); background: var(--spabie-msg-accent); color: #fff; }
.spabie-msg-alert-not-now { width: auto; min-width: 100px; }
.spabie-msg-alert-status { min-height: 18px; margin: 13px 0 0 !important; color: #a02b5f !important; }
.spabie-msg-search { margin: 0 12px 12px; display: flex; align-items: center; gap: 7px; padding: 0 11px; height: 38px; border-radius: 11px; color: var(--spabie-msg-muted); background: var(--spabie-msg-soft); }
.spabie-msg-search input { width: 100%; outline: none; border: 0; color: var(--spabie-msg-ink); background: transparent; font-size: 14px; }
.spabie-msg-thread-list { padding: 0 8px 12px; overflow: auto; }

.spabie-msg-thread,
.spabie-msg-contact-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 72px;
	padding: 9px 8px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: var(--spabie-msg-ink);
	text-align: left;
}

.spabie-msg-thread:hover,
.spabie-msg-contact-row:hover,
.spabie-msg-thread.is-active { background: #f9eff6; }

.spabie-msg-avatar {
	flex: 0 0 41px;
	display: grid;
	place-items: center;
	width: 41px;
	height: 41px;
	overflow: hidden;
	border-radius: 50%;
	background: #eef0f6;
	color: #536078;
	font-size: 12px;
	font-weight: 700;
}

.spabie-msg-avatar.is-service { background: linear-gradient(145deg, #f26ab0, #d62e87); color: white; font-size: 21px; }
.spabie-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spabie-msg-thread-body { flex: 1; min-width: 0; }
.spabie-msg-thread-line { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.spabie-msg-thread-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.spabie-msg-thread-line small,
.spabie-msg-preview { color: var(--spabie-msg-muted); font-size: 13px; }
.spabie-msg-thread-line small { flex-shrink: 0; }
.spabie-msg-preview { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spabie-msg-thread.is-unread .spabie-msg-preview { color: var(--spabie-msg-ink); font-weight: 600; }

.spabie-msg-thread-badge,
.spabie-msg-launcher-badge { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 12px; background: var(--spabie-msg-accent); color: white; font-size: 10px; font-weight: 700; }

.spabie-msg-conversation { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: white; }
.spabie-msg-thread-header { height: 70px; flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 11px 20px; border-bottom: 1px solid var(--spabie-msg-line); }
.spabie-msg-thread-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f9eff6; color: var(--spabie-msg-accent); font-weight: 700; }
.spabie-msg-thread-avatar .spabie-msg-avatar { width: 40px; height: 40px; }
.spabie-msg-thread-title { min-width: 0; }
.spabie-msg-thread-title strong,
.spabie-msg-thread-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spabie-msg-thread-title strong { font-size: 15px; font-weight: 700; }
.spabie-msg-thread-title small { font-size: 13px; color: var(--spabie-msg-muted); }

.spabie-msg-messages { flex: 1; min-height: 0; overflow: auto; padding: 20px 18px 12px; background: linear-gradient(180deg, #fdfdff, #fff); }
.spabie-msg-message { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 15px; }
.spabie-msg-message.is-own { justify-content: flex-end; }
.spabie-msg-message-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }
.spabie-msg-message-avatar.is-service { font-size: 15px; }
.spabie-msg-message-body { max-width: min(83%, 560px); }
.spabie-msg-bubble { padding: 10px 13px; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 15px 15px 15px 4px; background: #f0f2f7; color: #253046; font-size: 15px; line-height: 1.5; }
.spabie-msg-message.is-own .spabie-msg-bubble { border-radius: 15px 15px 4px 15px; background: var(--spabie-msg-accent); color: white; }
.spabie-msg-message-time { display: block; margin-top: 4px; color: var(--spabie-msg-muted); font-size: 12px; }
.spabie-msg-message.is-own .spabie-msg-message-time { text-align: right; }

.spabie-msg-placeholder { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px; text-align: center; }
.spabie-msg-placeholder-spark { color: var(--spabie-msg-accent); font-size: 37px; }
.spabie-msg-placeholder strong { margin-top: 6px; font-size: 18px; }
.spabie-msg-placeholder p { max-width: 305px; color: var(--spabie-msg-muted); font-size: 15px; }
.spabie-msg-start-concierge,
.spabie-msg-contact-button { padding: 10px 17px; border: 0; border-radius: 24px; background: var(--spabie-msg-accent); color: #fff; font-size: 13px; font-weight: 600; }

.spabie-msg-composer { min-height: 68px; flex-shrink: 0; display: flex; align-items: flex-end; gap: 10px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--spabie-msg-line); background: white; }
.spabie-msg-composer textarea { flex: 1; min-height: 40px; max-height: 122px; resize: none; padding: 9px 12px; outline: none; border: 1px solid #e6e9f0; border-radius: 20px; background: #fafbfe; color: var(--spabie-msg-ink); font-size: 15px; }
.spabie-msg-composer textarea:focus { border-color: var(--spabie-msg-accent); }
.spabie-msg-composer button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--spabie-msg-accent); color: #fff; font-size: 16px; }
.spabie-msg-feedback:not(:empty) { padding: 0 17px 10px; color: #bb3659; font-size: 13px; }
.spabie-msg-history { display: block; margin: 0 auto 16px; padding: 8px 13px; border: 0; border-radius: 14px; background: var(--spabie-msg-soft); color: var(--spabie-msg-muted); font-size: 13px; }
.spabie-msg-empty-list,
.spabie-msg-empty-conversation,
.spabie-msg-contact-heading { padding: 14px 9px; color: var(--spabie-msg-muted); font-size: 14px; }

.spabie-msg-widget { position: fixed; z-index: 2147483000; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 0; height: 0; }
.spabie-msg-launcher { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: linear-gradient(145deg, #f370b4, var(--spabie-msg-accent)); color: #fff; box-shadow: 0 10px 27px rgba(233, 59, 155, .36); }
.spabie-msg-launcher-icon { font-size: 29px; }
.spabie-msg-launcher-badge { position: absolute; right: -3px; top: -4px; border: 2px solid white; background: #26314a; }
.spabie-msg-widget .spabie-msg-shell { position: absolute; right: 0; bottom: 72px; width: min(740px, calc(100vw - 40px)); height: min(660px, calc(100vh - 120px)); min-height: 405px; }
.spabie-msg-widget .spabie-msg-layout { grid-template-columns: minmax(210px, 35%) 1fr; }

.spabie-msg-booking-card,
.spabie-msg-booking-notice { max-width: 640px; margin: 25px auto; padding: 24px; border: 1px solid var(--spabie-msg-line); border-radius: 16px; background: transparent; }
.spabie-msg-booking-notice.is-success { color: #1d735a; }
.spabie-msg-admin-content { padding-top: 16px; }
.spabie-msg-admin-content .spabie-msg-page { max-width: 1100px; margin-left: 0; }

@media (max-width: 680px) {
	.spabie-msg-widget { right: max(16px, env(safe-area-inset-right)); bottom: max(var(--spabie-msg-mobile-bottom, 90px), calc(12px + env(safe-area-inset-bottom))); }
	.spabie-msg-page { margin: 12px auto; }
	.spabie-msg-page .spabie-msg-shell { min-height: 550px; height: min(720px, 82vh); }
	.spabie-msg-layout,
	.spabie-msg-widget .spabie-msg-layout { display: block; position: relative; }
	.spabie-msg-sidebar,
	.spabie-msg-conversation { position: absolute; inset: 0; width: 100%; height: 100%; }
	.spabie-msg-sidebar { border-right: 0; background: white; }
	.spabie-msg-conversation { display: none; }
	.spabie-msg-app.has-active-thread .spabie-msg-sidebar { display: none; }
	.spabie-msg-app.has-active-thread .spabie-msg-conversation { display: flex; }
	.spabie-msg-app { font-size: 16px; line-height: 1.55; }
	.spabie-msg-back { display: inline-flex; flex-shrink: 0; }
	.spabie-msg-thread-header { height: 76px; padding: 12px 14px; gap: 10px; }
	.spabie-msg-bubble { font-size: 16px; }
	.spabie-msg-thread-line strong { font-size: 15px; }
	.spabie-msg-thread-line small,
	.spabie-msg-preview,
	.spabie-msg-thread-title small { font-size: 13px; }
	.spabie-msg-composer textarea { font-size: 16px; }
	.spabie-msg-widget .spabie-msg-shell { position: fixed; inset: max(10px, env(safe-area-inset-top)) 10px max(84px, env(safe-area-inset-bottom)) 10px; width: auto; height: auto; min-height: 0; }
	.spabie-msg-topbar { height: 68px; }
	.spabie-msg-layout { height: calc(100% - 68px); }
}

@media (prefers-reduced-motion: reduce) {
	.spabie-msg-app,
	.spabie-msg-app * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* The unopened conversation pane must not show the previous chat on desktop. */
.spabie-msg-widget:not(.has-active-thread) .spabie-msg-layout { grid-template-columns: 1fr; }
.spabie-msg-widget:not(.has-active-thread) .spabie-msg-conversation { display: none; }

.spabie-msg-admin-thread-row { display:flex; align-items:center; gap:6px; }
.spabie-msg-admin-thread-row .spabie-msg-thread { flex:1; min-width:0; }
.spabie-msg-thread-select { flex-shrink:0; margin-left:6px!important; }

.spabie-retention-toggle input[role="switch"] { appearance:none; -webkit-appearance:none; width:38px; height:22px; border:1px solid #777; border-radius:12px; background:#777; position:relative; vertical-align:middle; box-shadow:none; }
.spabie-retention-toggle input[role="switch"]::before { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:2px; left:2px; margin:0; }
.spabie-retention-toggle input[role="switch"]:checked { background:#b51e85; border-color:#b51e85; }
.spabie-retention-toggle input[role="switch"]:checked::before { left:18px; }
.spabie-retention-toggle input[role="switch"]:focus-visible { outline:2px solid #2271b1; outline-offset:3px; }

/* Canawa double conversation bubble, shared by launcher and header. */
.canawa-chat-icon { display:block; width:38px; height:36px; }
.spabie-msg-launcher { background:#f72525; color:#fff; box-shadow:0 8px 24px rgba(247,37,37,.28); --canawa-icon-cutout:#f72525; cursor:pointer; }
.spabie-msg-launcher-icon { display:flex; align-items:center; justify-content:center; }
.spabie-msg-spark { color:#f72525; --canawa-icon-cutout:#fff; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; width:38px; height:38px; flex-shrink:0; }
.spabie-msg-spark .canawa-chat-icon { width:30px; height:29px; }
.spabie-msg-placeholder-spark { display:flex; justify-content:center; color:#f72525; }

.canawa-webpush-toggle{font:inherit;font-size:11px!important;white-space:nowrap;background:#fff!important;color:#d21919!important;border:0;border-radius:14px;padding:6px 8px!important;cursor:pointer}
