/* Onboarding engine: pre-sale chat + client portal. Themes via CSS variables. */
:root, .theme-cga {
  --bg: #f4f6fa; --surface: #ffffff; --ink: #0f1f38; --muted: #5b6b82; --line: #dde3ec;
  --accent: #0f2747; --accent-ink: #ffffff; --accent-soft: #e7edf6; --highlight: #b8893b;
  --user-bubble: #0f2747; --user-ink: #ffffff; --bot-bubble: #eef2f7;
  --radius: 10px; --shadow: 0 1px 2px rgba(15,31,56,.06), 0 6px 24px rgba(15,31,56,.06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Source Serif 4", Georgia, serif; --font-mono: ui-monospace, Menlo, monospace;
  --border: 1px solid var(--line);
}
.theme-eh {
  --bg: #fbf6ef; --surface: #fffdf9; --ink: #2b2118; --muted: #7a6a5a; --line: #eaddcb;
  --accent: #c2562b; --accent-ink: #fffaf3; --accent-soft: #f7e6d9; --highlight: #c2562b;
  --user-bubble: #c2562b; --user-ink: #fffaf3; --bot-bubble: #f3ebdf;
  --radius: 16px; --shadow: 0 2px 18px rgba(80,50,20,.08);
  --font: "DM Sans", system-ui, sans-serif; --font-head: "Fraunces", Georgia, serif;
}
.theme-ll {
  --bg: #f2f1ec; --surface: #ffffff; --ink: #111111; --muted: #55554f; --line: #111111;
  --accent: #111111; --accent-ink: #ffffff; --accent-soft: #fff7d6; --highlight: #1d4ed8;
  --user-bubble: #111111; --user-ink: #ffffff; --bot-bubble: #f6f5f0;
  --radius: 4px; --shadow: 3px 3px 0 #111111;
  --font: "IBM Plex Sans", -apple-system, system-ui, sans-serif; --font-head: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --border: 1px solid #111111;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.onb { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.onb.is-embed { background: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.onb-shell { max-width: 1240px; margin: 0 auto; padding: 16px 20px 24px; }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.onb-brand { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: .01em; }
.theme-ll .onb-brand { font-family: var(--font-mono); text-transform: uppercase; font-size: 14px; letter-spacing: .08em; }
.is-embed .onb-top { display: none; }
.onb-top-actions { display: flex; gap: 10px; align-items: center; }
.onb-top-actions form { margin: 0; }
.onb-top-actions .onb-link { white-space: nowrap; }

.onb-card { background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.onb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: calc(var(--radius) - 2px);
  border: var(--border); background: var(--surface); color: var(--ink); font: 500 14px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.onb-btn:hover { background: var(--accent-soft); }
.onb-btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.onb-btn-primary:hover { background: var(--accent); filter: brightness(1.12); }
.onb-btn[disabled] { opacity: .55; cursor: default; }
.theme-ll .onb-btn { box-shadow: 2px 2px 0 #111; }
.theme-ll .onb-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #111; }
.onb-btn-sm { padding: 4px 10px; font-size: 12.5px; }
.onb-link { background: none; border: 0; color: var(--accent); font: 500 14px var(--font); cursor: pointer; padding: 4px 2px; text-decoration: underline; text-underline-offset: 3px; }
.onb-muted { color: var(--muted); }
.onb-small { font-size: 13px; }
.onb-error { color: #b42318; font-size: 14px; margin: 10px 0 0; }

/* first screen + login */
.onb-intro { display: flex; justify-content: center; padding: 6vh 0 4vh; }
.onb-intro-card { width: 100%; max-width: 480px; padding: 32px; }
.onb-intro-card h1 { font: 600 28px/1.2 var(--font-head); margin: 0 0 6px; }
.onb-sub { color: var(--muted); margin: 0 0 22px; }
.onb-field { display: block; margin-bottom: 14px; }
.onb-field span { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.onb-field em { color: var(--muted); font-style: normal; font-weight: 400; }
.onb-field input, .onb-send textarea, .onb-edit input {
  width: 100%; padding: 10px 12px; font: 15px var(--font); color: var(--ink); background: var(--surface);
  border: var(--border); border-radius: calc(var(--radius) - 4px); outline: none; }
.onb-field input:focus, .onb-send textarea:focus, .onb-edit input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.onb-intro-card .onb-btn-primary { width: 100%; padding: 11px; margin-top: 6px; }

/* main grid */
.onb-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.onb-chat { display: flex; flex-direction: column; height: calc(100vh - 110px); min-height: 520px; overflow: hidden; }
.is-embed .onb-chat { height: 640px; }
.onb-research { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--accent-soft); border-bottom: var(--border); font-size: 14px; }
.onb-spinner { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: onbspin .8s linear infinite; flex: none; }
@keyframes onbspin { to { transform: rotate(360deg); } }
.onb-log { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.onb-msg { max-width: 82%; padding: 10px 14px; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; }
.onb-msg.bot { background: var(--bot-bubble); align-self: flex-start; border-bottom-left-radius: 4px; }
.onb-msg.user { background: var(--user-bubble); color: var(--user-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.theme-ll .onb-msg { border: 1px solid #111; }
.onb-msg.typing { color: var(--muted); font-style: italic; }
.onb-send { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: var(--border); }
.onb-send textarea { resize: none; max-height: 140px; }
.onb-upload { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: var(--border); border-radius: calc(var(--radius) - 4px); cursor: pointer; font-size: 20px; color: var(--muted); }
.onb-upload:hover { background: var(--accent-soft); }

.onb-side { display: flex; flex-direction: column; gap: 14px; }
.onb-meter-card { padding: 18px; }
.onb-meter-label { font-size: 15px; margin-bottom: 8px; }
.onb-meter { height: 8px; background: var(--accent-soft); border-radius: 99px; overflow: hidden; }
.theme-ll .onb-meter { border: 1px solid #111; border-radius: 0; height: 12px; background: #fff; }
.onb-meter-bar { height: 100%; background: var(--accent); transition: width .5s ease; }
.theme-ll .onb-meter-bar { background: repeating-linear-gradient(90deg, #1d4ed8 0 10px, #fff 10px 12px); }
.onb-next { margin: 14px 0 12px; font-size: 14px; }
.onb-next b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.onb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.onb-actions .onb-btn { flex: 1; }

.onb-wow { padding: 18px; border: 2px solid var(--highlight); }
.onb-wow h2, .onb-known h2, .onb-profile h2 { font: 600 17px/1.3 var(--font-head); margin: 0; }
.onb-wow h2 { margin-bottom: 8px; }
.onb-md p { margin: 0 0 8px; } .onb-md ul { margin: 0 0 8px; padding-left: 20px; } .onb-md h3, .onb-md h4 { margin: 10px 0 4px; font-size: 15px; }
.onb-md a { color: var(--accent); }
.onb-proof { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.onb-proof li { padding: 8px 10px; background: var(--accent-soft); border-radius: calc(var(--radius) - 4px); font-size: 14px; }

.onb-known { padding: 0; }
.onb-known summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; }
.onb-known summary::-webkit-details-marker { display: none; }
.onb-known summary::after { content: "+"; font-size: 18px; color: var(--muted); margin-left: 8px; }
.onb-known[open] summary::after { content: "-"; }
.onb-count { margin-left: auto; font-size: 12px; color: var(--muted); }
.onb-cards { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.onb-cards-wide { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 0; }
.onb-kc { border: var(--border); border-radius: calc(var(--radius) - 4px); padding: 10px 12px; background: var(--surface); }
.onb-kc-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.onb-dot.hi { background: #16a34a; } .onb-dot.mid { background: #d97706; } .onb-dot.lo { background: #dc2626; }
.onb-kc-val { margin: 4px 0 6px; font-size: 14.5px; word-wrap: break-word; }
.onb-kc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.onb-kc-foot a { color: var(--muted); }
.onb-ok { color: #16a34a; font-weight: 600; font-size: 12.5px; }
.onb-kc-btns { margin-left: auto; display: flex; gap: 6px; }
.onb-edit { display: flex; gap: 6px; margin-top: 6px; }
.onb-edit input { padding: 6px 8px; font-size: 14px; }

.onb-gates { font-size: 13px; color: var(--muted); padding: 0 4px; }
.onb-profile { padding: 18px; margin-top: 4px; }
.onb-profile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.onb-foot { margin-top: 16px; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 767px) {
  .onb-shell { padding: 12px 12px 20px; }
  .onb-brand { font-size: 16px; }
  .onb-main { grid-template-columns: 1fr; }
  .onb-side { order: -1; }
  .onb-chat, .is-embed .onb-chat { height: 70vh; min-height: 420px; }
  .is-embed .onb-chat { height: 560px; }
  .onb-intro { padding: 2vh 0; }
  .onb-intro-card { padding: 22px; }
  .onb-msg { max-width: 92%; }
  .onb-cards { max-height: none; }
}