/* ============================================================
 * CLM Chat Hub — mobile-first, Telegram-style, 6-tool command bar.
 * Palette: Nexus warm neutrals + Hydra Teal accent (#01696F).
 * Every touch target >= 44px. WCAG AA. prefers-reduced-motion honored.
 * ============================================================ */

:root {
	--clm-bg:      #F7F6F2;
	--clm-surface: #FFFFFF;
	--clm-surface-alt: #F9F8F5;
	--clm-border:  #D4D1CA;
	--clm-text:    #28251D;
	--clm-muted:   #7A7974;
	--clm-faint:   #BAB9B4;
	--clm-accent:  #01696F;
	--clm-accent-hover: #0C4E54;
	--clm-accent-soft:  #E7F1F2;
	--clm-error:   #A12C7B;
	--clm-warn:    #964219;
	--clm-success: #437A22;
	--clm-ai:      #7A39BB;

	--clm-radius:  16px;
	--clm-radius-sm: 10px;
	--clm-shadow:  0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
	--clm-shadow-lg: 0 16px 48px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.10);
}

#clm-chathub-root, #clm-chathub-root * { box-sizing: border-box; }
#clm-chathub-root {
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--clm-text);
}

/* ---------- Floating Action Button (FAB) ---------- */
.clm-chathub-fab {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999998;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 22px 0 18px;
	background: var(--clm-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	box-shadow: var(--clm-shadow-lg);
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.clm-chathub-fab:hover { background: var(--clm-accent-hover); transform: translateY(-2px); }
.clm-chathub-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.clm-chathub-fab .clm-fab-icon {
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
}
.clm-chathub-fab .clm-fab-icon svg { width: 100%; height: 100%; }
.clm-chathub-fab .clm-fab-badge {
	position: absolute;
	top: 6px; right: 8px;
	min-width: 20px; height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--clm-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--clm-accent);
}
.clm-chathub-fab[data-open="true"] { transform: scale(0.94); }

/* Dopamine ping: subtle pulse on load */
@keyframes clm-fab-pulse {
	0%   { box-shadow: var(--clm-shadow-lg), 0 0 0 0 rgba(1,105,111,0.55); }
	70%  { box-shadow: var(--clm-shadow-lg), 0 0 0 18px rgba(1,105,111,0);  }
	100% { box-shadow: var(--clm-shadow-lg), 0 0 0 0 rgba(1,105,111,0);     }
}
.clm-chathub-fab.pulse { animation: clm-fab-pulse 2.2s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
	.clm-chathub-fab.pulse { animation: none; }
}

/* ---------- Panel container ---------- */
.clm-chathub-panel {
	position: fixed;
	bottom: 92px;
	right: 20px;
	z-index: 999999;
	width: 380px;
	max-width: calc(100vw - 24px);
	height: 640px;
	max-height: calc(100vh - 120px);
	background: var(--clm-surface);
	border-radius: 20px;
	box-shadow: var(--clm-shadow-lg);
	display: none;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
}
.clm-chathub-panel[data-open="true"] {
	display: flex;
	animation: clm-panel-in .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes clm-panel-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.clm-chathub-panel[data-open="true"] { animation: none; }
}

/* Mobile: full-screen sheet */
@media (max-width: 640px) {
	.clm-chathub-fab { bottom: 16px; right: 16px; padding: 0 20px 0 16px; }
	.clm-chathub-panel {
		bottom: 0;
		right: 0;
		left: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

/* ---------- Panel header ---------- */
.clm-panel-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 14px 12px;
	background: var(--clm-accent);
	color: #fff;
	min-height: 60px;
}
.clm-panel-header .clm-back {
	width: 40px; height: 40px;
	display: none;
	align-items: center; justify-content: center;
	border: none; background: transparent; color: #fff;
	border-radius: 50%; cursor: pointer;
}
.clm-panel-header .clm-back:hover { background: rgba(255,255,255,.14); }
.clm-panel-header[data-view="hub"] .clm-back { display: none; }
.clm-panel-header:not([data-view="hub"]) .clm-back { display: inline-flex; }
.clm-panel-title {
	flex: 1;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	display: flex; flex-direction: column;
}
.clm-panel-title small {
	font-size: 12px;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 2px;
}
.clm-panel-header .clm-close {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: transparent; color: #fff;
	border-radius: 50%; cursor: pointer;
}
.clm-panel-header .clm-close:hover { background: rgba(255,255,255,.14); }

/* ---------- Panel body ---------- */
.clm-panel-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--clm-bg);
	-webkit-overflow-scrolling: touch;
}

/* ---------- Hub grid (6 tools) ---------- */
.clm-hub-intro {
	padding: 20px 20px 8px;
	color: var(--clm-text);
}
.clm-hub-intro h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.clm-hub-intro p  { margin: 0; font-size: 14px; color: var(--clm-muted); }
.clm-hub-tools {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 20px;
}
.clm-hub-pill {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 12px 14px;
	background: var(--clm-surface);
	border: 1px solid var(--clm-border);
	border-radius: var(--clm-radius);
	cursor: pointer;
	text-align: left;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
	color: var(--clm-text);
	font-family: inherit;
	font-size: 15px;
	width: 100%;
}
.clm-hub-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0,0,0,.06);
	border-color: var(--clm-accent);
}
.clm-hub-pill:focus-visible { outline: 3px solid var(--clm-accent); outline-offset: 2px; }
.clm-hub-pill .clm-pill-icon {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--clm-accent-soft);
	color: var(--clm-accent);
	display: inline-flex; align-items: center; justify-content: center;
}
.clm-hub-pill .clm-pill-icon svg { width: 22px; height: 22px; }
.clm-hub-pill[data-tool="ai"]   .clm-pill-icon { background: #F1E9FB; color: var(--clm-ai); }
.clm-hub-pill[data-tool="value"] .clm-pill-icon{ background: #FBE9F3; color: var(--clm-error); }
.clm-hub-pill[data-tool="prequal"] .clm-pill-icon{ background: #E7F5DE; color: var(--clm-success); }
.clm-hub-pill[data-tool="calc"] .clm-pill-icon{ background: #FFF3E0; color: var(--clm-warn); }
.clm-pill-body { flex: 1; min-width: 0; }
.clm-pill-body strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.clm-pill-body span  { display: block; font-size: 12.5px; color: var(--clm-muted); }
.clm-hub-pill .clm-pill-badge {
	min-width: 22px; height: 22px; padding: 0 7px;
	border-radius: 999px;
	background: var(--clm-error); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 22px;
	text-align: center;
}
.clm-hub-pill .clm-pill-arrow { color: var(--clm-faint); flex: 0 0 20px; }

.clm-hub-cta {
	margin: 4px 14px 18px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--clm-accent) 0%, #0C4E54 100%);
	color: #fff;
	border-radius: var(--clm-radius);
	font-size: 13.5px;
}
.clm-hub-cta strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.clm-hub-cta small { opacity: 0.9; }

/* ---------- Chat (AI + Messages) ---------- */
.clm-chat-log {
	padding: 14px 12px 8px;
	display: flex; flex-direction: column; gap: 6px;
}
.clm-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.clm-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.clm-msg .clm-bubble {
	padding: 10px 13px;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.45;
	word-wrap: break-word;
	background: var(--clm-surface);
	border: 1px solid var(--clm-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.clm-msg.in  .clm-bubble { border-bottom-left-radius: 4px; }
.clm-msg.out .clm-bubble {
	background: var(--clm-accent);
	color: #fff;
	border-color: var(--clm-accent);
	border-bottom-right-radius: 4px;
}
.clm-msg .clm-meta {
	font-size: 11px; color: var(--clm-muted);
	margin-top: 4px;
	padding: 0 4px;
}
.clm-msg.system {
	align-self: center;
	max-width: 92%;
	font-size: 12.5px;
	color: var(--clm-muted);
	background: transparent;
	padding: 6px 10px;
	text-align: center;
}
.clm-msg.system .clm-bubble {
	background: var(--clm-surface-alt);
	border: 1px dashed var(--clm-border);
	color: var(--clm-muted);
	font-size: 12.5px;
	padding: 6px 12px;
}

/* Typing indicator */
.clm-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.clm-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--clm-faint);
	animation: clm-typing 1.2s infinite ease-in-out;
}
.clm-typing span:nth-child(2) { animation-delay: .18s; }
.clm-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes clm-typing {
	0%,80%,100% { transform: scale(.7); opacity: .5; }
	40%         { transform: scale(1);  opacity: 1;  }
}

/* Quick replies */
.clm-quickreplies {
	display: flex; flex-wrap: wrap; gap: 6px;
	padding: 6px 12px 10px;
}
.clm-qr {
	padding: 8px 12px;
	background: var(--clm-surface);
	border: 1px solid var(--clm-accent);
	color: var(--clm-accent);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	min-height: 36px;
}
.clm-qr:hover { background: var(--clm-accent-soft); }

/* Composer */
.clm-composer {
	flex: 0 0 auto;
	display: flex; align-items: flex-end; gap: 8px;
	padding: 8px 10px;
	background: var(--clm-surface);
	border-top: 1px solid var(--clm-border);
}
.clm-composer textarea {
	flex: 1;
	min-height: 40px;
	max-height: 120px;
	padding: 10px 12px;
	border: 1px solid var(--clm-border);
	border-radius: 20px;
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	resize: none;
	background: var(--clm-surface-alt);
	color: var(--clm-text);
}
.clm-composer textarea:focus { outline: 2px solid var(--clm-accent); outline-offset: 1px; }
.clm-composer button {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--clm-accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.clm-composer button:hover:not(:disabled) { background: var(--clm-accent-hover); }
.clm-composer button:disabled { background: var(--clm-faint); cursor: not-allowed; }
.clm-composer .clm-attach {
	background: transparent;
	color: var(--clm-muted);
	border: none;
}
.clm-composer .clm-attach:hover { color: var(--clm-accent); }

/* ---------- Forms (Prequal, Home Value, Calculator) ---------- */
.clm-form { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.clm-form h4 { margin: 0 0 2px; font-size: 17px; font-weight: 700; }
.clm-form p.help { margin: 0 0 6px; font-size: 13px; color: var(--clm-muted); }
.clm-field { display: flex; flex-direction: column; gap: 4px; }
.clm-field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--clm-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.clm-field input, .clm-field select, .clm-field textarea {
	padding: 10px 12px;
	min-height: 44px;
	border: 1px solid var(--clm-border);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	background: var(--clm-surface);
	color: var(--clm-text);
}
.clm-field input:focus, .clm-field select:focus, .clm-field textarea:focus {
	outline: 2px solid var(--clm-accent); outline-offset: 1px; border-color: var(--clm-accent);
}
.clm-field .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clm-submit {
	margin-top: 4px;
	padding: 14px 18px;
	min-height: 52px;
	background: var(--clm-accent);
	color: #fff;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.01em;
}
.clm-submit:hover { background: var(--clm-accent-hover); }
.clm-submit:disabled { background: var(--clm-faint); cursor: not-allowed; }

/* Calculator result panel */
.clm-calc-result {
	margin: 6px 16px 12px;
	padding: 14px 16px;
	background: var(--clm-accent-soft);
	border: 1px solid var(--clm-accent);
	border-radius: 12px;
}
.clm-calc-result .val {
	font-size: 32px; font-weight: 800; color: var(--clm-accent);
	letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.clm-calc-result .label { font-size: 12.5px; color: var(--clm-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.clm-calc-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.clm-calc-breakdown span:nth-child(odd)  { color: var(--clm-muted); }
.clm-calc-breakdown span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.clm-calc-cta {
	display: block;
	margin: 8px 16px 20px;
	padding: 14px 18px;
	text-align: center;
	background: var(--clm-success);
	color: #fff;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: none;
	font-size: 15px;
	width: calc(100% - 32px);
	min-height: 52px;
}
.clm-calc-cta:hover { background: #365F1A; }

/* Success / ticket screen */
.clm-success-screen {
	padding: 40px 24px;
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.clm-success-screen .check {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--clm-success);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 20px rgba(67,122,34,.30);
}
.clm-success-screen h4 { margin: 0; font-size: 22px; font-weight: 800; }
.clm-success-screen .ticket {
	display: inline-block;
	padding: 8px 14px;
	background: var(--clm-surface);
	border: 1px dashed var(--clm-accent);
	color: var(--clm-accent);
	border-radius: 8px;
	font-family: "SF Mono", "Menlo", monospace;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.clm-success-screen p { margin: 0; color: var(--clm-muted); font-size: 14.5px; max-width: 30ch; }
.clm-success-screen .agent {
	margin-top: 6px;
	padding: 12px 14px;
	background: var(--clm-accent-soft);
	border-radius: 10px;
	color: var(--clm-text);
	font-size: 14px;
	font-weight: 500;
	width: 100%;
}

/* ---------- FAQs ---------- */
.clm-faq-search { padding: 12px 14px 8px; }
.clm-faq-search input {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--clm-border);
	border-radius: 999px;
	font: inherit; font-size: 14.5px;
	background: var(--clm-surface);
}
.clm-faq-categories {
	display: flex; gap: 6px; padding: 4px 14px 10px;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.clm-faq-cat {
	flex: 0 0 auto;
	padding: 6px 12px;
	background: var(--clm-surface);
	border: 1px solid var(--clm-border);
	border-radius: 999px;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
}
.clm-faq-cat.active { background: var(--clm-accent); color: #fff; border-color: var(--clm-accent); }
.clm-faq-list { padding: 4px 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.clm-faq-item {
	background: var(--clm-surface);
	border: 1px solid var(--clm-border);
	border-radius: var(--clm-radius-sm);
	overflow: hidden;
}
.clm-faq-q {
	width: 100%; text-align: left;
	padding: 14px 44px 14px 14px;
	background: transparent;
	border: none; cursor: pointer;
	font: inherit; font-size: 14.5px; font-weight: 600;
	color: var(--clm-text);
	position: relative;
	min-height: 52px;
}
.clm-faq-q::after {
	content: "＋";
	position: absolute; right: 14px; top: 50%;
	transform: translateY(-50%);
	color: var(--clm-accent); font-weight: 700; font-size: 20px;
}
.clm-faq-item[data-open="true"] .clm-faq-q::after { content: "−"; }
.clm-faq-a {
	display: none;
	padding: 0 14px 14px;
	color: var(--clm-text);
	font-size: 14px; line-height: 1.55;
}
.clm-faq-item[data-open="true"] .clm-faq-a { display: block; }
.clm-faq-a a { color: var(--clm-accent); }
.clm-faq-still {
	margin-top: 10px;
	padding: 8px 14px;
	background: var(--clm-accent-soft);
	border-radius: 8px;
	font-size: 13px;
	color: var(--clm-accent);
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	border: none;
}
.clm-faq-still:hover { background: var(--clm-accent); color: #fff; }

/* ---------- Messages inbox ---------- */
.clm-inbox-list { padding: 6px 0 20px; }
.clm-inbox-empty {
	padding: 40px 24px; text-align: center; color: var(--clm-muted);
}
.clm-inbox-row {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--clm-border);
	cursor: pointer;
	background: var(--clm-surface);
	min-height: 68px;
	width: 100%;
	text-align: left;
	border-left: none; border-right: none; border-top: none;
	font: inherit;
	color: var(--clm-text);
}
.clm-inbox-row:hover { background: var(--clm-accent-soft); }
.clm-inbox-row .avatar {
	flex: 0 0 40px; width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--clm-accent);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px;
}
.clm-inbox-row .content { flex: 1; min-width: 0; }
.clm-inbox-row .name { font-weight: 600; font-size: 14.5px; display: block; }
.clm-inbox-row .preview {
	font-size: 12.5px; color: var(--clm-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	display: block;
}
.clm-inbox-row .meta { flex: 0 0 auto; text-align: right; font-size: 11px; color: var(--clm-muted); }
.clm-inbox-row .meta .unread {
	display: inline-block;
	min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 999px;
	background: var(--clm-error); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 20px;
	margin-top: 4px;
}

/* ---------- Backdrop (mobile only) ---------- */
.clm-chathub-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.35);
	z-index: 999997;
	display: none;
	opacity: 0;
	transition: opacity .18s ease;
}
.clm-chathub-backdrop[data-open="true"] { display: block; opacity: 1; }
@media (min-width: 641px) {
	.clm-chathub-backdrop { display: none !important; }
}

/* ---------- Utility ---------- */
.clm-hidden { display: none !important; }
.clm-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}
.clm-loader {
	display: inline-block; width: 20px; height: 20px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: clm-spin .8s linear infinite;
}
@keyframes clm-spin { to { transform: rotate(360deg); } }