/* Web Sales Concierge — public embeddable prospect surface.
 * Self-contained (no CDN, no portal app.css): this document renders inside
 * arbitrary partner sites, so it ships its own tiny design system. Mobile-
 * first — embeds are often narrow columns. Palette matches the CDG green
 * family used across the portal. */

:root {
  --wsc-green: #0f6b31;
  --wsc-green-deep: #123626;
  --wsc-green-soft: #e7f3ec;
  --wsc-ink: #22302a;
  --wsc-ink-2: #4a5a52;
  --wsc-muted: #7c8a83;
  --wsc-line: #e2e8e2;
  --wsc-bg: #f6f8f6;
  --wsc-card: #ffffff;
  --wsc-warn: #9a6b00;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wsc-ink);
  background: var(--wsc-bg);
}

.wsc-app { display: flex; flex-direction: column; height: 100vh; max-width: 720px; margin: 0 auto; }

/* ── header ── */
.wsc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--wsc-green-deep); color: #fff;
}
.wsc-head b { font-size: 15px; }
.wsc-head span { font-size: 12px; color: #9fceb2; display: block; }
.wsc-orb {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: radial-gradient(circle at 30% 30%, #7fd4a5, #0f6b31);
  box-shadow: 0 0 0 3px rgba(127, 212, 165, .25);
}
.wsc-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fd4a5; animation: wscPulse 2.2s infinite; }
@keyframes wscPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.wsc-head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wsc-top { flex: 0 0 auto; background: var(--wsc-green-deep); }

/* "Talk to a person" — pinned in the header, reachable from any scroll position */
.wsc-talk {
  padding: 7px 11px; border-radius: 999px; border: 1.5px solid #7fd4a5; background: transparent;
  color: #dff4e7; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wsc-talk:hover { background: rgba(127, 212, 165, .18); }
.wsc-talk.done { border-color: rgba(127, 212, 165, .5); color: #9fceb2; }
.wsc-talk.newly-available { animation: wscTalkShimmer 1.35s ease-in-out 3; }
@keyframes wscTalkShimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127, 212, 165, 0); background: transparent; }
  50% { box-shadow: 0 0 0 5px rgba(127, 212, 165, .18); background: rgba(127, 212, 165, .2); }
}
.wsc-talk-panel { background: var(--wsc-bg); border-bottom: 1px solid var(--wsc-line); }
.wsc-talk-panel[hidden] { display: none; }
.wsc-talk-box { padding: 12px 14px 14px; background: var(--wsc-card); border-bottom: 1px solid var(--wsc-line); }
.wsc-talk-box .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wsc-talk-box .hd b { font-size: 15px; color: var(--wsc-green-deep); }
.wsc-talk-box .x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--wsc-muted); cursor: pointer; padding: 0 4px; }
.wsc-talk-box .mut { margin: 0 0 10px; font-size: 13px; color: var(--wsc-ink-2); }

/* ── phase tracker ── three steps, dots carry the progress (never "2 of 3") */
.wsc-phase {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 12px 8px; background: var(--wsc-green-deep); font-size: 12px; color: #9fceb2;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.wsc-phase[hidden] { display: none; }
.wsc-phase .st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wsc-phase .mk {
  width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-style: normal; font-weight: 700; flex: 0 0 14px;
  border: 1.5px solid rgba(159, 206, 178, .45); color: transparent;
}
.wsc-phase .st.done { color: #dff4e7; }
.wsc-phase .st.done .mk { background: #2fbf71; border-color: #2fbf71; color: #fff; }
.wsc-phase .st.now { color: #fff; font-weight: 600; }
.wsc-phase .st.now .mk { border-color: #7fd4a5; background: rgba(127, 212, 165, .25); }
.wsc-phase .st.now.pulse .mk { animation: wscPhasePulse 1.4s infinite; }
@keyframes wscPhasePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(127, 212, 165, .55); } 50% { box-shadow: 0 0 0 5px rgba(127, 212, 165, 0); } }
.wsc-phase .st.todo { color: rgba(159, 206, 178, .6); }
.wsc-phase .arr { color: rgba(159, 206, 178, .45); font-size: 11px; }
@media (max-width: 380px) { .wsc-phase { font-size: 11px; gap: 4px; } .wsc-phase .arr { display: none; } }
@media (max-width: 460px) {
  .wsc-head { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .wsc-head-r { gap: 5px; }
  .wsc-talk { padding: 6px 8px; font-size: 11.5px; }
}
@media (max-width: 390px) {
  .wsc-head { flex-wrap: wrap; }
  .wsc-head-r { flex: 1 0 100%; justify-content: flex-end; margin-left: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .wsc-talk.newly-available, .wsc-dot, .wsc-phase .st.now.pulse .mk,
  .wsc-typing i { animation: none !important; }
}

/* ── scroll area / chat ── */
.wsc-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 8px; -webkit-overflow-scrolling: touch; position: relative; }
.wsc-msg { display: flex; margin: 8px 0; }
.wsc-msg.me { justify-content: flex-end; }
.wsc-bub {
  max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.wsc-msg.bot .wsc-bub { background: var(--wsc-card); border: 1px solid var(--wsc-line); border-bottom-left-radius: 6px; }
.wsc-msg.me .wsc-bub { background: var(--wsc-green); color: #fff; border-bottom-right-radius: 6px; }
.wsc-bub.err { color: var(--wsc-warn); }

.wsc-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 16px; border-bottom-left-radius: 6px; }
.wsc-wait { font-size: 12px; color: var(--wsc-muted); padding: 3px 0 0 4px; min-height: 0; }
.wsc-wait:empty { display: none; }
.wsc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--wsc-muted); animation: wscBlink 1.2s infinite; }
.wsc-typing i:nth-child(2) { animation-delay: .2s; }
.wsc-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes wscBlink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.wsc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 2px; }
.wsc-chip {
  padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--wsc-green);
  color: var(--wsc-green); background: var(--wsc-card); font-size: 13.5px; cursor: pointer; user-select: none;
}
.wsc-chip:hover { background: var(--wsc-green-soft); }

/* ── entry form ── */
.wsc-form { background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.wsc-fld { margin-bottom: 10px; }
.wsc-fld label { display: block; font-size: 12px; color: var(--wsc-muted); margin-bottom: 3px; }
.wsc-fld input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--wsc-line); border-radius: 9px;
  font-size: 15px; color: var(--wsc-ink); background: #fff;
}
.wsc-fld input:focus { outline: 2px solid var(--wsc-green); outline-offset: 0; border-color: var(--wsc-green); }
.wsc-row { display: flex; gap: 10px; }
.wsc-row .wsc-fld { flex: 1; }
.wsc-row .wsc-fld.st { flex: 0 0 84px; }
.wsc-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

.wsc-btn {
  display: inline-block; width: 100%; padding: 12px 16px; border: 0; border-radius: 10px;
  background: var(--wsc-green); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.wsc-btn:hover { background: #0c5828; }
.wsc-btn:disabled { opacity: .55; cursor: default; }
.wsc-btn.ghost { background: transparent; color: var(--wsc-green); border: 1.5px solid var(--wsc-green); }

/* "Use my current location" — a quiet assist under the city/state row, styled
   well below the primary CTA so it reads as an optional shortcut, not a step. */
.wsc-geo {
  display: block; width: 100%; margin: -2px 0 10px; padding: 8px 10px;
  background: transparent; border: 1px dashed var(--wsc-line); border-radius: 9px;
  color: var(--wsc-muted); font-size: 13px; font-weight: 500; cursor: pointer;
}
.wsc-geo:hover:not(:disabled) { border-color: var(--wsc-green); color: var(--wsc-green); background: var(--wsc-green-soft); }
.wsc-geo:disabled { cursor: default; opacity: .85; border-style: solid; }

/* ── Mini proposal (early read) ── */
.wsc-mini.card {
  margin: 10px 0; padding: 13px 14px; background: var(--wsc-card);
  border: 1px solid var(--wsc-line); border-radius: 13px;
}
.wsc-mini .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wsc-mini .hd b { font-size: 14.5px; }
.wsc-mini .opt { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--wsc-line); border-radius: 10px; }
.wsc-mini .lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wsc-muted); }
.wsc-mini .pkg { font-size: 14.5px; font-weight: 700; margin: 3px 0 4px; }
.wsc-mini .why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wsc-muted); }
.wsc-mini .rng {
  margin-top: 8px; display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; background: var(--wsc-green-soft); color: var(--wsc-green);
}
.wsc-mini .fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wsc-muted); }

/* ── Statement Review ── */
.wsc-stmt.card {
  margin: 10px 0; padding: 13px 14px; background: var(--wsc-card);
  border: 1px solid var(--wsc-line); border-radius: 13px;
}
.wsc-stmt .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wsc-stmt .hd b { font-size: 14.5px; }
.wsc-stmt-tag { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.wsc-stmt-tag.ok   { background: var(--wsc-green-soft); color: var(--wsc-green); }
.wsc-stmt-tag.work { background: #fff4e2; color: #8a5a10; }
.wsc-stmt-tag.warn { background: #fdeaea; color: #a32b2b; }
.wsc-stmt .mut  { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--wsc-muted); }
.wsc-stmt .fine { margin: 8px 0 0; font-size: 11.5px; color: var(--wsc-muted); }
.wsc-stmt .tbl  { border-top: 1px solid var(--wsc-line); }
.wsc-stmt .ln {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--wsc-line); font-size: 13px;
}
.wsc-stmt .ln span { color: var(--wsc-muted); }
.wsc-stmt .ln b { text-align: right; }
.wsc-stmt .fnd { margin-top: 11px; }
.wsc-stmt .fnd b { font-size: 13px; }
.wsc-stmt .fnd ul { margin: 6px 0 0; padding-left: 18px; }
.wsc-stmt .fnd li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }

/* "Your setup" — the configurator's live line items above the delivery form */
.wsc-setup {
  margin: 10px 0; padding: 13px 14px; background: var(--wsc-card);
  border: 1px solid var(--wsc-line); border-radius: 13px;
}
.wsc-setup .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wsc-setup .hd b { font-size: 14.5px; }
.wsc-setup ul { margin: 4px 0 0; padding-left: 20px; }
.wsc-setup li { font-size: 13.5px; line-height: 1.6; }
.wsc-setup .fine { margin: 8px 0 0; font-size: 11.5px; color: var(--wsc-muted); }

.wsc-up {
  display: block; text-align: center; padding: 11px 12px; cursor: pointer;
  border: 1.5px dashed var(--wsc-green); border-radius: 10px;
  background: var(--wsc-green-soft); color: var(--wsc-green);
  font-size: 13.5px; font-weight: 600;
}
.wsc-up input { display: none; }
.wsc-up:hover { background: #d9ecdf; }
.wsc-up.busy { opacity: .6; pointer-events: none; }

/* ── candidate picker ── */
.wsc-pick {
  display: flex; gap: 10px; align-items: center; padding: 11px 12px; margin: 8px 0;
  background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 12px; cursor: pointer;
}
.wsc-pick:hover { border-color: var(--wsc-green); background: var(--wsc-green-soft); }
.wsc-pick .nm { font-weight: 600; font-size: 14.5px; }
.wsc-pick .mt { font-size: 12.5px; color: var(--wsc-muted); }
.wsc-pick.dim { opacity: .5; pointer-events: none; }

/* ── progress ── */
.wsc-steps { margin: 10px 0; }
.wsc-step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--wsc-ink-2); padding: 4px 0; }
.wsc-step .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wsc-green); flex: 0 0 8px; }
.wsc-step.miss .dot { background: var(--wsc-muted); }

/* ── composer ── */
.wsc-foot { padding: 10px 14px 12px; background: var(--wsc-bg); }
.wsc-compose { display: flex; gap: 8px; }
.wsc-compose input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--wsc-line); border-radius: 999px;
  font-size: 15px; background: var(--wsc-card);
}
.wsc-compose input:focus { outline: 2px solid var(--wsc-green); border-color: var(--wsc-green); }
.wsc-send {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--wsc-green);
  color: #fff; font-size: 17px; cursor: pointer; flex: 0 0 44px;
}
.wsc-send:disabled { opacity: .5; }
.wsc-powered { text-align: center; font-size: 11px; color: var(--wsc-muted); padding-top: 8px; }
.wsc-powered a { color: var(--wsc-muted); }

/* ── generating band ── */
.wsc-genband {
  display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 12px 14px;
  background: var(--wsc-green-soft); border: 1px dashed var(--wsc-green); border-radius: 12px;
  font-size: 13.5px; color: var(--wsc-green-deep);
}

/* ── proposal ── */
.wsc-final { background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px; margin: 12px 0; overflow: hidden; }
.wsc-final-hero { background: var(--wsc-green-deep); color: #fff; padding: 20px 18px; }
.wsc-final-hero svg { max-width: 100%; height: auto; display: block; margin-bottom: 10px; }
.wsc-final-hero h2 { margin: 0 0 4px; font-size: 19px; }
.wsc-final-hero p { margin: 0; color: #9fceb2; font-size: 13.5px; }
.wsc-final-body { padding: 16px 18px; }
.wsc-final-body h3 { font-size: 15px; margin: 18px 0 6px; color: var(--wsc-green-deep); }
.wsc-final-body h3:first-child { margin-top: 0; }
.wsc-final-body p, .wsc-final-body li { font-size: 14px; color: var(--wsc-ink-2); }
.wsc-final-body ul { margin: 6px 0; padding-left: 20px; }
.wsc-comp { display: flex; gap: 8px; margin: 7px 0; font-size: 14px; }
.wsc-comp .ic { color: var(--wsc-green); }
.wsc-comp span { display: block; color: var(--wsc-ink-2); font-size: 13px; }
.wsc-obj { background: var(--wsc-bg); border-radius: 9px; padding: 9px 12px; margin: 7px 0; font-size: 13.5px; color: var(--wsc-ink-2); }
.wsc-final-close { margin-top: 16px; padding: 12px 14px; background: var(--wsc-green-soft); border-radius: 10px; font-weight: 600; color: var(--wsc-green-deep); font-size: 14.5px; }

/* ── error / dead cards ── */
.wsc-card { background: var(--wsc-card); border: 1px solid var(--wsc-line); border-radius: 14px; padding: 16px; margin: 12px 0; }
.wsc-card h2 { margin: 0 0 6px; font-size: 16px; }
.wsc-card p { margin: 0 0 12px; color: var(--wsc-ink-2); font-size: 14px; }

.wsc-dead { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.wsc-dead-card { text-align: center; max-width: 380px; }
.wsc-dead-card h2 { font-size: 17px; margin: 14px 0 6px; }
.wsc-dead-card p { color: var(--wsc-ink-2); font-size: 14px; }
.wsc-dead .wsc-orb { margin: 0 auto; width: 44px; height: 44px; }

.wsc-toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px);
  background: var(--wsc-green-deep); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .25s; max-width: 90%;
}
.wsc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── feature-interest checklist (pre-build) ── */
.wsc-interests.card {
  margin: 10px 0; padding: 13px 14px; background: var(--wsc-card);
  border: 1.5px solid var(--wsc-green); border-radius: 14px;
}
.wsc-interests .hd b { font-size: 15px; color: var(--wsc-green-deep); }
.wsc-interests .mut { margin: 4px 0 10px; font-size: 13px; color: var(--wsc-ink-2); }
.wsc-interests .row { padding: 8px 0; border-top: 1px solid var(--wsc-line); }
.wsc-interests .lbl { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.wsc-interests .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.wsc-interests .seg button {
  flex: 1 1 auto; padding: 7px 10px; border-radius: 999px; border: 1.5px solid var(--wsc-line);
  background: var(--wsc-card); color: var(--wsc-ink-2); font-size: 13px; cursor: pointer;
}
.wsc-interests .seg button:hover { border-color: var(--wsc-green); color: var(--wsc-green); }
.wsc-interests .seg button.on { background: var(--wsc-green); border-color: var(--wsc-green); color: #fff; font-weight: 600; }
.wsc-interests .wsc-btn { margin-top: 10px; }
.wsc-int-skip { display: block; width: 100%; margin-top: 6px; padding: 6px; border: 0; background: transparent; color: var(--wsc-muted); font-size: 12.5px; cursor: pointer; }
.wsc-int-skip:hover { color: var(--wsc-green); }

/* ── deterministic quick overview (confirmation before the heavy build) ── */
.wsc-overview.card {
  margin: 10px 0; padding: 15px 15px; background: var(--wsc-card);
  border: 1.5px solid var(--wsc-green); border-radius: 14px;
  box-shadow: 0 5px 18px rgba(15, 107, 49, .09);
}
.wsc-overview .hd { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.wsc-overview .hd b { color: var(--wsc-green-deep); font-size: 15px; line-height: 1.35; }
.wsc-overview-tag {
  margin-left: auto; flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--wsc-green-soft); color: var(--wsc-green); font-size: 11px; font-weight: 700;
}
.wsc-overview .mut { margin: 4px 0 9px; font-size: 13px; color: var(--wsc-ink-2); }
.wsc-overview ul { margin: 7px 0 10px; padding-left: 19px; }
.wsc-overview li { margin: 4px 0; font-size: 13.25px; line-height: 1.45; }
.wsc-overview .fine { margin: 7px 0 10px; font-size: 11.5px; color: var(--wsc-muted); }

/* ── statement chooser + the ready card ── */
.wsc-chooser.card {
  margin: 10px 0; padding: 13px 14px; background: var(--wsc-card);
  border: 1.5px solid var(--wsc-green); border-radius: 14px;
}
.wsc-chooser .hd b { font-size: 15px; color: var(--wsc-green-deep); }
.wsc-chooser .mut { margin: 4px 0 10px; font-size: 13px; color: var(--wsc-ink-2); }
.wsc-chooser.slim { margin: 4px 0; text-align: center; }

.wsc-ready.card {
  margin: 12px 0; padding: 18px 16px; background: var(--wsc-card);
  border: 1.5px solid var(--wsc-green); border-radius: 16px; text-align: center;
  box-shadow: 0 6px 22px rgba(15, 107, 49, .14);
}
.wsc-ready h2 { margin: 0 0 6px; font-size: 17px; color: var(--wsc-green-deep); }
.wsc-ready .mut { margin: 0 0 12px; font-size: 13.5px; color: var(--wsc-ink-2); }
.wsc-ready .fine { margin: 8px 0 0; font-size: 11.5px; color: var(--wsc-muted); }

/* ── proposal CTA (FastApp entry point) ── */
.wsc-cta { text-align: center; text-decoration: none; margin-top: 6px; font-size: 15.5px; }
.wsc-sent-lines { line-height: 1.7; }

/* ── delivery band (contact + consent) ── */
.wsc-card .wsc-fld { margin-bottom: 10px; }
.wsc-consent { display: block; margin: 8px 0; font-size: 14px; color: var(--wsc-ink-2); }
.wsc-consent input { margin-right: 7px; }
.wsc-consent-fine { margin-top: 8px; font-size: 11.5px; color: var(--wsc-muted); }
.wsc-delivered h2 { color: var(--wsc-green-deep); }

/* /go mobile entry cue: static, with no focus or keyboard side effects. */
.wsc-fld input.wsc-entry-highlight {
  border-color: #0f6b31;
  box-shadow: 0 0 0 2px rgba(15, 107, 49, .18);
}