/* ============================================================
   VANCE CHAT — page-specific styling for vance.html only.
   Depends on: css/style.css tokens (loaded first).
   ============================================================ */

.vance-panel {
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   VANCE COVER — entry point before the scripted flow starts (mode:full
   only). A striking icon + a single text box that feels like a real
   AI product; underneath it's the same deterministic engine — the
   typed text just runs through a lightweight keyword guess to try to
   pre-select a vertical, then joins the normal scripted flow.
   ============================================================ */
.vance-cover { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 28px 32px; }
.vance-cover:empty { display: none; }
/* Centers the cover vertically in whatever height the panel happens to
   have (e.g. the homepage showcase's min-height) — reverts to normal
   top-anchored flow automatically once the cover empties out after
   submit and the real transcript takes over. */
.vance-panel:has(.vance-cover:not(:empty)) { justify-content: center; }
.vance-cover-icon { position: relative; width: 72px; height: 72px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vance-cover-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent);
  opacity: 0; animation: vanceCoverPulse 2.8s ease-out infinite;
}
.vance-cover-ring-2 { animation-delay: 1.4s; }
@keyframes vanceCoverPulse {
  0% { transform: scale(0.6); opacity: 0.65; }
  100% { transform: scale(1.55); opacity: 0; }
}
.vance-cover-core {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--onyx), #2e2e2e);
  color: var(--accent); font-family: var(--font-display); font-size: 22px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 26px rgba(201,169,97,0.4);
}
.vance-cover-title { font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 23px); color: var(--onyx); margin-bottom: 8px; line-height: 1.3; }
.vance-cover-sub { font-size: 13.5px; color: var(--mid); margin-bottom: 24px; max-width: 380px; }
.vance-cover-form { display: flex; gap: 8px; width: 100%; max-width: 420px; margin-bottom: 18px; }
.vance-cover-input {
  flex: 1; min-width: 0; padding: 12px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--cream-dark); background: var(--white);
  font-family: var(--font-body); font-size: 13.5px; color: var(--onyx);
}
.vance-cover-input:focus { outline: none; border-color: var(--accent); }
.vance-cover-submit {
  width: 44px; height: 44px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--onyx); color: var(--cream); font-size: 17px; cursor: pointer;
  transition: background 0.15s;
}
.vance-cover-submit:hover { background: var(--charcoal); }
.vance-cover-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 420px; }
.vance-cover-chip {
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--cream-dark);
  background: var(--surface); font-family: var(--font-body); font-size: 12px; color: var(--mid); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vance-cover-chip:hover { border-color: var(--accent); color: var(--onyx); }

.vance-panel-glass .vance-cover-input {
  background: rgba(255,255,255,0.65); border: 1.5px solid rgba(26,26,26,0.35);
}
.vance-panel-glass .vance-cover-chip {
  background: rgba(255,255,255,0.65); border: 1.5px solid rgba(26,26,26,0.35);
}
.vance-panel-glass .vance-cover-chip:hover { background: rgba(255,255,255,0.92); border-color: var(--accent); }

.vance-transcript {
  height: 420px;
  overflow-y: auto;
  padding: 28px 28px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vance-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 88%; animation: vanceMsgIn 0.45s cubic-bezier(.16,1,.3,1); }
.vance-msg-vance { align-self: flex-start; }
.vance-msg-user { align-self: flex-end; flex-direction: row-reverse; }
@keyframes vanceMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.vance-avatar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--onyx);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

.vance-bubble {
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.6;
}
.vance-msg-vance .vance-bubble { background: var(--surface); border: 1px solid var(--cream-dark); color: var(--onyx); border-top-left-radius: 4px; }
.vance-msg-user .vance-bubble { background: var(--onyx); color: var(--cream); border-top-right-radius: 4px; }
.vance-bubble strong { font-family: var(--font-display); font-weight: 600; }

.vance-typing { display: flex; gap: 4px; padding: 16px; align-items: center; }
.vance-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--light);
  animation: vanceTypingBounce 1.1s infinite ease-in-out;
}
.vance-typing span:nth-child(2) { animation-delay: 0.15s; }
.vance-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vanceTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.vance-quick-replies {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 28px; border-top: 1px solid var(--cream-dark);
}
.vance-quick-replies:empty { display: none; }
.vance-chip {
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--cream-dark); background: var(--surface);
  font-family: var(--font-body); font-size: 13px; color: var(--onyx); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vance-chip:hover { border-color: var(--accent); background: var(--cream-mid); }

/* Mode sizing — full (diagnose.html) scrolls with the page; compact
   (services.html embed, corner launcher) keeps its own small scroll box;
   faq (corner widget's Q&A entry point) sizes the same as compact. */
.vance-panel.mode-compact .vance-transcript,
.vance-panel.mode-faq .vance-transcript { height: 380px; overflow-y: auto; }
/* mode-full fills whatever it is given rather than growing the page. It
   scrolled the whole document before, which meant the input bar walked off
   the bottom of the screen as the conversation got longer -- the one control
   you need on every turn. */
.vance-panel.mode-full { min-height: 0; }
.vance-panel.mode-full .vance-transcript {
  flex: 1; min-height: 0; height: auto; max-height: none; overflow-y: auto;
}

/* THE RESULTS TAKE THE FULL WIDTH. They are a table of the visitor's own
   numbers -- workflow, hours, rate, annual value -- and at 640px the rows
   wrapped onto three lines each. */
.vance-panel.mode-full .vance-results-mount { margin-left: -28px; margin-right: -28px; padding: 28px; }
.vance-panel.mode-full .vance-msg-wide,
.vance-panel.mode-full .vance-msg:has(.vance-results-mount) { max-width: 100%; }
.vance-panel.mode-full .vance-weight-row { font-size: 13.5px; }
@media (min-width: 900px) {
  /* Two columns for the breakdown once there is room for them. */
  .vance-panel.mode-full .vance-results-mount .vance-weight-row { padding: 7px 0; }
}

/* FAQ mode's persistent input bar — sits below the quick-reply chips so a
   visitor can keep asking follow-ups without waiting for a suggestion chip. */
.vance-faq-inputbar { display: flex; gap: 8px; padding: 10px 28px 16px; }
.vance-faq-inputbar .vance-text-input { flex: 1; min-width: 0; }

.vance-msg-wide { max-width: 96%; }
.vance-bubble-wide { width: 100%; }

/* ============================================================
   GLASS PANEL — homepage "Try It Yourself" showcase only. No hard box,
   no border line — a frosted pane that blends into the graph-paper
   background behind it instead of sitting in a card.
   ============================================================ */
.vance-panel-glass {
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: none;
  box-shadow: 0 20px 60px rgba(26,26,26,0.07);
  width: 100%;
  max-height: 520px;
}
/* Caps growth at the panel's max-height instead of letting the chat keep
   pushing the whole section taller — scrolls internally past that point,
   same as mode-compact elsewhere. A CSS-grid stretch-to-sibling approach
   doesn't work here: the row's auto height is computed FROM the tallest
   grid item's natural content size, so a growing transcript would grow
   the row (and drag the left column's height up with it) before stretch
   ever gets a chance to cap anything — circular, not fixable with stretch
   alone. A fixed max-height sidesteps that entirely.
   ============================================================ */
.vance-panel-glass.mode-full .vance-transcript {
  flex: 1; min-height: 0; height: auto; max-height: none; overflow-y: auto;
}
.vance-panel-glass .vance-transcript { background: transparent; }
.vance-panel-glass .vance-msg-vance .vance-bubble {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
}
.vance-panel-glass .vance-quick-replies {
  border-top: 1px solid rgba(26,26,26,0.12);
  flex-wrap: nowrap; overflow-x: auto;
}
.vance-panel-glass .vance-multiselect { gap: 6px; }
.vance-panel-glass .vance-chip, .vance-panel-glass .vance-chip-toggle {
  background: rgba(255,255,255,0.65);
  border: 1.5px solid rgba(26,26,26,0.35);
  box-shadow: 0 1px 3px rgba(26,26,26,0.06);
  flex-shrink: 0; white-space: nowrap;
}
.vance-panel-glass .vance-multiselect .vance-chip-toggle { white-space: normal; flex-shrink: 1; padding: 7px 13px; font-size: 12.5px; }
.vance-panel-glass .vance-chip:hover, .vance-panel-glass .vance-chip-toggle:hover { background: rgba(255,255,255,0.92); border-color: var(--accent); }
.vance-panel-glass .vance-chip-selected {
  background: var(--onyx); border-color: var(--onyx); color: var(--cream);
}
.vance-panel-glass .vance-results-mount { background: rgba(26,26,26,0.92); backdrop-filter: blur(10px); }
.vance-msg-text { margin-bottom: 12px; }
.vance-msg-text:last-child { margin-bottom: 0; }

/* Inline forms embedded inside a Vance message (custom-role, other-text) */
.vance-inline-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vance-text-input {
  flex: 1; min-width: 160px; border: 1px solid var(--cream-dark); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: var(--font-body); font-size: 14px; color: var(--onyx);
  background: var(--white); outline: none;
}
.vance-text-input:focus { border-color: var(--accent); }
.vance-text-input:disabled { opacity: 0.6; }
.vance-inline-btn {
  border: none; border-radius: var(--radius-pill); background: var(--onyx); color: var(--cream);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 10px 18px; cursor: pointer;
  transition: background 0.15s, opacity 0.15s; white-space: nowrap;
}
.vance-inline-btn:hover { background: var(--charcoal); }
.vance-inline-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.vance-skip-link {
  display: block; margin-top: 8px; background: none; border: none; padding: 0;
  font-size: 12px; color: var(--light); text-decoration: underline; cursor: pointer; font-family: var(--font-body);
}
.vance-skip-link:hover { color: var(--onyx); }

/* Multi-select task chips */
.vance-multiselect { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.vance-chip-toggle { display: inline-flex; align-items: center; gap: 6px; }
.vance-chip-check { display: none; font-size: 11px; }
.vance-chip-selected { background: var(--onyx); border-color: var(--onyx); color: var(--cream); }
.vance-chip-selected .vance-chip-check { display: inline; }
.vance-chip-toggle:disabled { opacity: 0.7; cursor: default; }

/* Diagnosis-flagged task matches (js/vance-audit.js stepDiagnosis/stepTasks)
   — a visual flag only, never pre-checked; the person still clicks every
   task themselves, same as any other chip here. */
.vance-chip-match { border-color: var(--accent); }
.vance-chip-match-badge {
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.vance-chip-selected.vance-chip-match { border-color: var(--onyx); }
.vance-msg-aside { margin-top: 8px; font-size: 12.5px; color: var(--light); font-style: italic; }

/* Numeric mini-forms (hours/rate per task, seats) */
.vance-numform { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.vance-numform label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--mid);
}
.vance-num-input {
  width: 100px; border: 1px solid var(--cream-dark); border-radius: var(--radius-sm);
  padding: 8px 12px; font-family: var(--font-body); font-size: 14px; color: var(--onyx);
  background: var(--white); outline: none; text-align: right;
}
.vance-num-input:focus { border-color: var(--accent); }
.vance-num-input:disabled { opacity: 0.6; }
.vance-numform-hint { font-size: 11px; color: #4a7a5e; margin-top: -4px; }

/* Lead capture form */
.vance-leadform { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vance-lead-msg { font-size: 12px; color: var(--light); font-style: italic; display: none; margin: 0; }
.vance-lead-msg:not(:empty) { display: block; }

/* ============================================================
   RESULTS CARD — dark reveal nested in a wide bubble, same content
   diagnose.html's original renderAnnualValue/renderConfigurator/
   renderDisclosure produced.
   ============================================================ */
.vance-results-mount {
  background: var(--onyx); color: var(--cream);
  border-radius: var(--radius-md); padding: 24px 22px; margin: -12px -16px;
}
.vance-results-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--cream); margin-bottom: 6px; }
.vance-results-sub { font-size: 12.5px; color: #999; line-height: 1.6; margin-bottom: 18px; }

.vance-line-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #262626; font-size: 13px;
}
.vance-li-name { color: #ddd; }
.vance-li-detail { font-size: 11px; color: #777; margin-top: 2px; }
.vance-li-val { font-family: var(--font-display); font-size: 15px; white-space: nowrap; color: var(--cream); }
.vance-li-val span { font-size: 10px; color: #777; }

.vance-roi-total { background: #1a1a1a; border-radius: var(--radius-sm); padding: 20px; margin: 20px 0; text-align: center; }
.vance-roi-total-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.vance-roi-total-amount { font-family: var(--font-display); font-size: 38px; color: var(--cream); margin-bottom: 4px; }
.vance-roi-total-sub { font-size: 12px; color: #777; }

.vance-config-block { margin: 20px 0; }
.vance-config-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid #262626; gap: 12px; }
.vance-config-row:last-child { border-bottom: none; }
.vance-config-row-label { font-size: 13px; color: #ddd; }
.vance-config-row-sub { font-size: 11px; color: #777; margin-top: 2px; line-height: 1.4; }
.vance-config-val { font-family: var(--font-display); font-size: 16px; min-width: 24px; text-align: center; color: var(--cream); }
.vance-config-stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vance-stepper-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid #333; background: #1a1a1a;
  color: var(--cream); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.vance-stepper-btn:hover:not(:disabled) { border-color: var(--accent); }
.vance-stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.vance-coming-soon-row { opacity: 0.45; }
.vance-coming-soon-tag {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  background: #2a2a2a; color: #999; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 8px;
}
.vance-optional-tag {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(201,169,97,0.15); color: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill); margin-left: 8px;
}

.vance-retention-block { background: #1a1712; border: 1px solid #3a2f1c; border-radius: var(--radius-sm); padding: 18px 20px; margin: 18px 0; }
.vance-retention-eyebrow { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.vance-retention-amount { font-family: var(--font-display); font-size: 28px; color: var(--cream); margin-bottom: 8px; }
.vance-retention-amount span { font-size: 13px; color: #9c9385; }
.vance-retention-desc { font-size: 12.5px; color: #b3ab98; line-height: 1.6; }

.vance-roi-contrast { margin: 18px 0; }
.vance-roi-contrast-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 2px; border-bottom: 1px solid var(--cream-dark);
  font-size: 13.5px;
}
.vance-roi-contrast-label { color: var(--mid); }
.vance-roi-contrast-amount { font-family: var(--font-display); font-size: 16px; color: var(--onyx); }
.vance-roi-contrast-amount.vance-roi-contrast-cost { color: #a33; }
.vance-roi-contrast-net {
  background: #1a1712; border: 1px solid #3a2f1c; border-radius: var(--radius-sm);
  padding: 18px 20px; margin-top: 12px; text-align: center;
}
.vance-roi-contrast-net-label { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.vance-roi-contrast-net-amount { font-family: var(--font-display); font-size: 32px; color: var(--cream); }
.vance-roi-contrast-net-sub { font-size: 12.5px; color: #b3ab98; margin-top: 6px; }
.vance-roi-contrast-net-negative .vance-roi-contrast-net-amount { color: #d98a8a; }

/* .vance-bracket-reveal / .vance-br-label / .vance-br-name stood here: the
   named-plan reveal -- "YOUR PLAN: Professional" -- under the retired price
   block. Both the markup and BRACKETS itself are gone. */

.vance-also-noted { font-size: 12px; color: #999; margin: 14px 0 4px; line-height: 1.6; }
.vance-also-noted strong { color: #ccc; }

.vance-disclosure { margin-top: 22px; border-top: 1px solid #262626; padding-top: 16px; }
/* The ratio was never the problem -- --light at 13px already cleared AA. The
   problem was ROLE: someone who clicks "How we calculated this" is asking to
   read it, so at that moment it is body copy, not a muted aside. Grey-on-dark
   at 13px is how you style something meant to be skimmed past.
   The toggle stays --light because it genuinely is secondary until clicked;
   what it opens does not. */
.vance-disc-toggle { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 13px; color: var(--light); user-select: none; }
.vance-disc-toggle:hover { color: var(--cream); }
.vance-disc-arrow { transition: transform 0.2s; }
.vance-disc-content { margin-top: 12px; display: none; font-size: 14px; color: var(--cream); line-height: 1.7; }
.vance-disc-content.open { display: block; }
/* style.css has a global `p { color: var(--charcoal); max-width: 65ch; }`, and a
   direct element selector beats inheritance -- so the paragraph inside this
   block never received the --cream above it. It rendered at #2C2C2C on the
   #1A1A1A panel: a contrast ratio of 1.25:1, effectively invisible.
   The rows below it are divs and were always correct, which is why the block
   looked like it faded from the top. It was never a mask or an animation.
   These are the only unclassed <p> elements in the whole widget. */
.vance-disc-content p { color: var(--cream); font-size: 14px; line-height: 1.7; max-width: none; margin: 0 0 10px; }
/* Divider raised from #2C2C2C, which was 1.25:1 against --onyx -- effectively
   invisible, so the rows read as one block. --mid clears the 3:1 non-text
   contrast target and is a palette token rather than another hex. */
.vance-weight-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--mid); font-size: 14px; color: var(--cream); line-height: 1.5; }

.vance-sent-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid #262626; }
.vance-sent-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.vance-sent-note p { font-size: 13px; color: #aaa; line-height: 1.6; }
.vance-sent-note strong { color: var(--cream); }

.vance-results-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.vance-restart-link {
  background: none; border: none; font-size: 12.5px; color: #888; cursor: pointer;
  font-family: var(--font-body); text-decoration: underline;
}
.vance-restart-link:hover { color: #ccc; }

@media (max-width: 640px) {
  .vance-panel.mode-compact .vance-transcript { height: 360px; padding: 20px 18px 8px; }
  .vance-quick-replies { padding: 12px 18px; }
  .vance-msg { max-width: 96%; }
  .vance-results-mount { margin: -12px -12px; padding: 20px 16px; }
}