/* Heat pump assistant (chat + "Your home" form + estimate) as it sits inside fidesq.com's page.
   The site version of web/agent/public/styles.css: every rule is scoped to .hp-agent so it can't affect the rest of the site,
   and the agent page's own header, hero and body rules are left out. When styles.css changes, carry the change across here with the same scoping.
   Built into web/dist/heat-pump-assistant.css by `npm run build -w web`; fidesq.com copies that file in. */
.hp-agent {
  --page: #f2f3f7;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --ink: #0e1220;
  --ink-2: #3b4256;
  --muted: #5f6679;
  --line: #e3e5ec;
  --line-2: #d5d8e1;
  --accent: #4f46e5;
  --accent-ink: #3730a3;
  --accent-soft: #eeeefd;
  --accent-line: #d5d3fa;
  --night: #0f1320;
  --night-2: #171c2d;
  --night-text: #c3c8d6;
  --night-muted: #8c93a8;
  --night-line: #2c3347;
  --periwinkle: #a3a9f7;
  --mint: #34d399;
  --good: #047857;
  --good-soft: #e8f6f0;
  --bad: #b42318;
  --bad-soft: #fdf0ee;

  --font-display: 'Instrument Sans', 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-lg: 24px;
  --r-md: 16px;
  --r-pill: 999px;
  --gutter: clamp(16px, 4vw, 24px);
  
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
}
.hp-agent [hidden] { display: none !important; }
.hp-agent .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-agent .wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.hp-agent .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; text-decoration: none; font: 600 16px/1 var(--font-body); padding: 16px 26px; border-radius: var(--r-pill); border: 0; cursor: pointer; }
.hp-agent .btn-primary:hover { background: var(--accent-ink); color: #fff; }
.hp-agent .brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font: italic 400 26px/1 var(--font-serif); }
.hp-agent .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }

/* ── Calculator layout ──────────────────────────────────── */
.hp-agent.calc { padding-block: 48px 72px; }
.hp-agent.calc .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.hp-agent .chat-col { flex: 999 1 540px; min-width: 0; }
.hp-agent .side-col { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .hp-agent .chat-col { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); } }

.hp-agent .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.hp-agent .card-pad { padding: 20px 22px; }
.hp-agent .eyebrow { margin: 0; font: 12px/1.3 var(--font-mono); color: var(--accent); letter-spacing: 0.02em; }
.hp-agent .card h2 { margin: 0; font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; }

/* ── Chat ───────────────────────────────────────────────── */
.hp-agent .chat { display: flex; flex-direction: column; height: min(720px, calc(100vh - 32px)); min-height: 520px; overflow: hidden; }
.hp-agent .chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.hp-agent .chat-head .brand-mark { width: 34px; height: 34px; font-size: 23px; }
.hp-agent .chat-head-text { flex: 1; min-width: 0; }
.hp-agent .chat-title { margin: 0; font: 700 17px/1.2 var(--font-display); }
.hp-agent .chat-sub { margin: 2px 0 0; font: 12px/1.3 var(--font-mono); color: var(--muted); }
.hp-agent .btn-quiet { font: 600 14px/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 0 16px; min-height: 40px; cursor: pointer; }
.hp-agent .btn-quiet:hover { border-color: var(--ink-2); }
.hp-agent .btn-quiet:disabled { opacity: 0.5; cursor: default; }

.hp-agent .log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.hp-agent .msg { max-width: 92%; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.hp-agent .msg p { margin: 0; }
.hp-agent .msg p + p, .hp-agent .msg ul + p, .hp-agent .msg p + ul { margin-top: 8px; }
.hp-agent .msg ul { margin: 0; padding-left: 20px; }
.hp-agent .msg-agent { display: flex; gap: 10px; align-items: flex-start; }
.hp-agent .msg-agent .avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: italic 400 20px/1 var(--font-serif); }
.hp-agent .msg-agent .bubble { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px 18px 18px 18px; padding: 11px 15px; min-width: 0; }
.hp-agent .msg-agent .bubble.is-question { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); font-weight: 500; }
.hp-agent .msg-user { align-self: flex-end; background: var(--night); color: #fff; border-radius: 18px 4px 18px 18px; padding: 11px 15px; white-space: pre-wrap; }
.hp-agent .msg-note { align-self: center; max-width: 100%; text-align: center; font-size: 13.5px; color: var(--bad); background: var(--bad-soft); border-radius: 12px; padding: 8px 14px; }
.hp-agent .checks { margin: 4px 0 0 38px; border: 1px dashed var(--accent-line); background: #fafaff; border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; max-width: calc(92% - 38px); }
.hp-agent .checks-title { margin: 0; font: 12px/1.3 var(--font-mono); color: var(--accent); }
.hp-agent .check { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.45; }
.hp-agent .check svg { flex-shrink: 0; position: relative; top: 2px; color: var(--good); }
.hp-agent .check .src { color: var(--muted); }
.hp-agent .thinking { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.hp-agent .thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: hp-blink 1.2s infinite ease-in-out both; }
.hp-agent .thinking i:nth-child(2) { animation-delay: 0.15s; }
.hp-agent .thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hp-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.hp-agent .composer { border-top: 1px solid var(--line); padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.hp-agent .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-agent .chip { font: 500 13.5px/1.3 var(--font-body); color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 9px 14px; min-height: 40px; cursor: pointer; text-align: left; }
.hp-agent .chip:hover { border-color: var(--accent); }
.hp-agent .chip:disabled { opacity: 0.5; cursor: default; }
.hp-agent .compose-row { display: flex; gap: 8px; align-items: flex-end; }
.hp-agent .compose-row textarea { flex: 1; min-width: 0; resize: none; font: 16px/1.4 var(--font-body); color: var(--ink); padding: 13px 18px; border: 1px solid var(--line-2); border-radius: 24px; min-height: 50px; max-height: 140px; background: var(--surface); }
.hp-agent .compose-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hp-agent .send { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.hp-agent .send:hover { background: var(--accent-ink); }
.hp-agent .send:disabled { background: var(--line-2); cursor: default; }
.hp-agent .fineprint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ── Your home form ─────────────────────────────────────── */
.hp-agent .home-form { display: flex; flex-direction: column; gap: 14px; }
.hp-agent .home-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hp-agent .home-form-head .count { font: 12px/1 var(--font-mono); color: var(--muted); }
.hp-agent .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.hp-agent .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hp-agent .field.wide { grid-column: 1 / -1; }
.hp-agent .field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.hp-agent .field input, .hp-agent .field select { width: 100%; font: 15px/1.3 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; min-height: 44px; }
.hp-agent .field select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.hp-agent .field .money { position: relative; }
.hp-agent .field .money span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.hp-agent .field .money input { padding-left: 26px; }
.hp-agent .field .hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.hp-agent .field.just-set input, .hp-agent .field.just-set select { animation: hp-flash 1.6s ease-out; }
/* Details the assistant still needs: marked so the visitor can see the gaps. */
.hp-agent .field[data-gap] label::after { margin-left: 6px; font: 500 11px/1 var(--font-mono); }
.hp-agent .field[data-gap="needed"] label::after { content: 'needed'; color: var(--accent); }
.hp-agent .field[data-gap="optional"] label::after { content: 'optional'; color: var(--muted); }
.hp-agent .field[data-gap="needed"] input, .hp-agent .field[data-gap="needed"] select { border-style: dashed; border-color: var(--accent); background-color: #fbfbff; }
.hp-agent .field[data-gap="optional"] input, .hp-agent .field[data-gap="optional"] select { border-style: dashed; }
@keyframes hp-flash { 0% { background-color: var(--accent-soft); border-color: var(--accent); } 100% { background-color: var(--surface); } }
@media (max-width: 420px) { .hp-agent .fields { grid-template-columns: minmax(0, 1fr); } }

/* ── Estimate ───────────────────────────────────────────── */
.hp-agent .empty { border: 1px dashed var(--line-2); background: transparent; }
.hp-agent .empty p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.hp-agent .result { display: flex; flex-direction: column; gap: 16px; }
.hp-agent .result-head { padding: 22px; border-radius: var(--r-lg); color: #fff; background-color: var(--night); background-image: radial-gradient(ellipse 70% 60% at 100% 0%, rgb(79 70 229 / 0.3), transparent 70%); display: flex; flex-direction: column; gap: 12px; }
.hp-agent .result-head .eyebrow { color: var(--periwinkle); }
.hp-agent .result-head h2 { margin: 0; font: 600 18px/1.3 var(--font-display); }
.hp-agent .result-head .sub { margin: 0; font-size: 14px; color: var(--night-text); }
.hp-agent .big { margin: 0; font: 700 clamp(30px, 4vw, 40px)/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-agent .result-head .line { margin: 0; font-size: 15px; color: #fff; }
.hp-agent .result-head .note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--night-muted); }
.hp-agent .status-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid rgb(52 211 153 / 0.35); background: rgb(16 185 129 / 0.08); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13.5px; }
.hp-agent .status-pill.no .dot { background: #f87171; }
.hp-agent .status-pill.no { border-color: rgb(248 113 113 / 0.35); background: rgb(248 113 113 / 0.08); }

.hp-agent .rcard { display: flex; flex-direction: column; gap: 10px; }
.hp-agent .rcard .title { margin: 0; font: 700 20px/1.25 var(--font-display); letter-spacing: -0.01em; }
.hp-agent .rcard .sub, .hp-agent .rcard .body { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.hp-agent .rcard .small { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.hp-agent .rcard .note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.hp-agent .pill { display: inline-block; font: 500 12px/1 var(--font-mono); padding: 5px 9px; border-radius: var(--r-pill); margin-left: 6px; vertical-align: 1px; }
.hp-agent .pill.yes { color: var(--good); background: var(--good-soft); }
.hp-agent .pill.no { color: var(--bad); background: var(--bad-soft); }

.hp-agent .bars { display: flex; flex-direction: column; gap: 9px; padding-block: 4px; }
.hp-agent .bar-row { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 4.5em; align-items: center; gap: 10px; font-size: 13.5px; }
.hp-agent .bar-row .lbl { min-width: 0; }
.hp-agent .bar-row .tag { font: 11px/1 var(--font-mono); color: var(--accent); white-space: nowrap; }
.hp-agent .track { height: 10px; border-radius: 6px; background: #eef0f4; overflow: hidden; }
.hp-agent .bar { display: block; height: 100%; border-radius: 6px; background: #a9aec0; }
.hp-agent .bar-row.is-hp .bar { background: var(--accent); }
.hp-agent .bar-row.is-hp .lbl { font-weight: 600; }
.hp-agent .bar-row.is-current .bar { background: var(--ink-2); }
.hp-agent .bar-row .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.hp-agent .next { display: flex; flex-direction: column; gap: 12px; }
.hp-agent .next .btn-primary { align-self: flex-start; font-size: 15px; padding: 14px 22px; }
.hp-agent .sources summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hp-agent .sources[open] summary { margin-bottom: 10px; }
.hp-agent .sources .small + .small { margin-top: 10px; }
.hp-agent .warn { margin: 0; font-size: 13.5px; color: var(--bad); background: var(--bad-soft); border-radius: 12px; padding: 10px 14px; }

@media (max-width: 899px) {
  .hp-agent .chat { height: 640px; }
}
@media (max-width: 560px) {
  .hp-agent .chat-sub { display: none; }
  .hp-agent .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .hp-agent .chip { flex-shrink: 0; white-space: nowrap; }
  .hp-agent .log { padding: 16px; }
  .hp-agent .composer { padding: 12px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-agent .thinking i, .hp-agent .field.just-set input, .hp-agent .field.just-set select { animation: none; }
   { scroll-behavior: auto; }
}

/* fidesq.com fit: keep the sticky chat clear of the site's sticky nav and breadcrumb bar. */
@media (min-width: 900px) {
  .hp-agent .chat-col { top: calc(var(--nav-h) + 56px); }
  .hp-agent .chat { height: min(720px, calc(100vh - var(--nav-h) - 72px)); }
}
/* The site's .card adds its own padding; the chat card lays out its own edges. */
.hp-agent .card:not(.card-pad) { padding: 0; gap: 0; }