:root{
  --accent:#00A04B; --accent-dark:#008A40; --accent-soft:#E7F6EC;
  --bg:#FFFFFF; --bubble:#F5F5F7; --text:#1D1D1F; --text2:#86868B;
  --line:#D2D2D7; --hairline:rgba(0,0,0,.10);
  --green:#00A04B; --green-soft:#E7F6EC;
  --yellow:#86868B; --yellow-soft:#F5F5F7;
  --blue:#1D1D1F; --blue-soft:#F5F5F7;
  --field:#FFFFFF; --line2:#AEAEB2; --track:#E8E8ED;
  --page:#FAFAFC; --page2:#F2F2F7;
  --glass-zone:rgba(255,255,255,.8); --glass-pop:rgba(255,255,255,.92); --glass-card:rgba(255,255,255,.85);
  --hairline2:rgba(0,0,0,.05); --btn-ink:#FFFFFF;
}
/* dark palette: follows the system unless the demo toggle forces a theme */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#2DBE63; --accent-dark:#4ED884; --accent-soft:rgba(48,209,88,.16);
    --bg:#1C1C1E; --bubble:#2C2C2E; --text:#F5F5F7; --text2:#98989D;
    --line:#3A3A3C; --hairline:rgba(255,255,255,.14);
    --green:#30D158; --green-soft:rgba(48,209,88,.14);
    --yellow:#98989D; --yellow-soft:#2C2C2E;
    --blue:#F5F5F7; --blue-soft:#2C2C2E;
    --field:#2C2C2E; --line2:#56565A; --track:#3A3A3C;
    --page:#000000; --page2:#0F0F10;
    --glass-zone:rgba(28,28,30,.8); --glass-pop:rgba(44,44,46,.94); --glass-card:rgba(28,28,30,.78);
    --hairline2:rgba(255,255,255,.08); --btn-ink:#1C1C1E;
    color-scheme:dark;
  }
  html:not([data-theme="light"]) .personaCard .avatar{box-shadow:0 0 0 1.5px var(--hairline)}
}
:root[data-theme="dark"]{
  --accent:#2DBE63; --accent-dark:#4ED884; --accent-soft:rgba(48,209,88,.16);
    --bg:#1C1C1E; --bubble:#2C2C2E; --text:#F5F5F7; --text2:#98989D;
    --line:#3A3A3C; --hairline:rgba(255,255,255,.14);
    --green:#30D158; --green-soft:rgba(48,209,88,.14);
    --yellow:#98989D; --yellow-soft:#2C2C2E;
    --blue:#F5F5F7; --blue-soft:#2C2C2E;
    --field:#2C2C2E; --line2:#56565A; --track:#3A3A3C;
    --page:#000000; --page2:#0F0F10;
    --glass-zone:rgba(28,28,30,.8); --glass-pop:rgba(44,44,46,.94); --glass-card:rgba(28,28,30,.78);
    --hairline2:rgba(255,255,255,.08); --btn-ink:#1C1C1E;
    color-scheme:dark;
}
html[data-theme="dark"] .personaCard .avatar{box-shadow:0 0 0 1.5px var(--hairline)}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:clamp(16px, 1.2vw + 14px, 18px);line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;align-items:stretch;
}
#col{width:100%;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;position:relative}
@media(min-width:768px){
  body{background:var(--page);padding:0}
  #col{max-width:640px;box-shadow:0 0 0 1px var(--hairline)}
}
@media(min-width:1024px){
  body{background:linear-gradient(135deg,var(--page),var(--page2))}
  #col{max-width:720px}
  #chat{padding-top:32px;padding-bottom:48px}
}
/* percent-complete zone — frosted, sticky, hairline */
#progressZone{
  position:sticky;top:0;z-index:10;transition:opacity .3s;
  background:var(--glass-zone);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--hairline);
}
#topRow{display:flex;align-items:center;gap:12px;padding:2px 20px 7px;min-width:0}
#pctLabel{font-size:13px;font-weight:500;color:var(--text2);transition:opacity .2s;letter-spacing:-.01em;flex:none}
#progressWrap{height:4px;background:var(--track);width:100%;overflow:hidden;transition:opacity .3s}
#progressBar{height:100%;width:0;background:var(--accent);transition:width .3s ease-out;border-radius:0 12px 12px 0}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 8px;background:transparent}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--text)}
.logo .mark{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.logo .mark img{width:100%;height:100%;display:block}
.logo small{font-weight:500;color:var(--text2);font-size:11px;letter-spacing:0;display:block;line-height:1.1}
#restartBtn{
  border:none;background:var(--bubble);color:var(--text);font:inherit;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:999px;cursor:pointer;display:none;
}
#themeBtn{
  border:none;background:var(--bubble);color:var(--text);width:30px;height:30px;border-radius:999px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
#themeBtn svg{width:15px;height:15px}
@media(hover:hover){#themeBtn:hover{background:var(--track)}}
@media(hover:hover){#restartBtn:hover{background:var(--track)}}
/* autoplay bar */
#autoBar{display:none;align-items:center;gap:10px;padding:8px 20px;background:var(--accent-soft);font-size:13px;color:var(--text);flex:none}
#autoBar .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s infinite}
#autoBar button{margin-left:auto;border:none;background:var(--accent);color:#fff;font:inherit;font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer}
/* main */
#main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
#chat{padding:20px 20px 28px;display:flex;flex-direction:column;gap:20px}
@media(min-width:768px){#chat{padding:24px 28px 36px}}
.turn{display:flex;flex-direction:column;gap:8px;animation:fadeUp .25s ease-out}
.preline{font-size:12.5px;font-style:italic;color:var(--text2);padding-left:4px}
.bubble{max-width:88%;padding:12px 16px;border-radius:18px;line-height:1.45;white-space:pre-line}
.bubble b,.card p b{font-weight:600}
.subnote b{font-weight:600;color:var(--text)}
.bubble.assistant{background:var(--bubble);color:var(--text);align-self:flex-start;border-bottom-left-radius:6px;font-size:1.03em}
.bubble.assistant.edu{background:var(--bubble);border:1px solid var(--line);font-size:.94em}
.bubble.assistant.edu::before{content:"💡 "}
.bubble.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:6px;font-size:.98em;animation:slideIn .3s ease-out}
.userWrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.changeBtn{
  border:none;background:none;font:inherit;font-size:12.5px;font-weight:500;
  color:var(--text2);cursor:pointer;padding:1px 6px;border-radius:8px;
  display:inline-flex;align-items:center;gap:4px;
}
.changeBtn .penIcon{width:11px;height:11px;flex:none}
@media(hover:hover){.changeBtn:hover{color:var(--accent);background:var(--accent-soft)}}
.subnote{font-size:13px;color:var(--text2);padding-left:4px}
.typing{display:flex;gap:5px;background:var(--bubble);padding:14px 18px;border-radius:18px;border-bottom-left-radius:6px;align-self:flex-start}
.typing span{width:7px;height:7px;border-radius:50%;background:#AEAEB2;animation:pulse 1s infinite}
.typing span:nth-child(2){animation-delay:.18s}.typing span:nth-child(3){animation-delay:.36s}
/* chips — Apple-style list options, full width, hairline borders */
.chips{display:flex;flex-direction:column;gap:10px;padding:2px 0 0;width:100%}
@media(min-width:768px){.chips.grid2{display:grid;grid-template-columns:1fr 1fr}}
.chip{
  border:1px solid var(--line);background:var(--field);color:var(--text);
  font:inherit;font-size:15.5px;font-weight:500;padding:14px 18px;border-radius:14px;
  min-height:48px;cursor:pointer;text-align:left;width:100%;
  transition:background .15s,border-color .15s,color .15s;
  opacity:0;animation:fadeUp .25s ease-out forwards;letter-spacing:-.01em;
}
@media(hover:hover){.chip:hover{background:var(--bubble);border-color:var(--line2)}}
.chip:focus-visible{outline:3px solid rgba(0,160,75,.35);outline-offset:2px}
.chip.selected{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff}
.chip.ghost{color:var(--text2)}
.chip.multi.checked{background:var(--accent);border-color:var(--accent);color:#fff}
.chip:disabled{opacity:.45 !important;cursor:default}
/* inputs — full width with padding */
.fieldset{display:flex;flex-direction:column;gap:10px;width:100%;max-width:100%}
.fieldset input,.fieldset textarea{
  font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  width:100%;background:var(--field);color:var(--text);
}
.fieldset input::placeholder,.fieldset textarea::placeholder{color:#AEAEB2}
.fieldset input:focus,.fieldset textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px rgba(0,160,75,.15)}
.fieldset .err{font-size:13px;color:#FF3B30;display:none}
.fieldset .sugg{font-size:13.5px;color:var(--text);background:var(--accent-soft);border-radius:10px;padding:10px 12px;line-height:1.6}
.suggBtn{font:inherit;font-size:12.5px;font-weight:600;border:none;background:var(--accent);color:#fff;padding:6px 12px;border-radius:999px;cursor:pointer;margin:4px 6px 0 0}
.suggBtn.ghost{background:var(--field);color:var(--text);border:1px solid var(--line)}
.primaryBtn{
  font:inherit;font-size:16px;font-weight:600;background:var(--accent);color:#fff;border:none;
  padding:14px 20px;border-radius:999px;min-height:50px;cursor:pointer;transition:background .15s,transform .1s;
  letter-spacing:-.01em;
}
@media(hover:hover){.primaryBtn:hover{background:var(--accent-dark)}}
.primaryBtn:active{transform:scale(.98)}
.primaryBtn:disabled{opacity:.5;cursor:default}
.acWrap{position:relative;width:100%}
.acList{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--glass-pop);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--hairline);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.10);z-index:20;overflow:hidden;
}
.acList button{
  display:block;width:100%;text-align:left;background:transparent;border:none;font:inherit;font-size:14.5px;
  padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--hairline);color:var(--text);min-height:44px;
}
.acList button:last-child{border-bottom:none}
@media(hover:hover){.acList button:hover{background:var(--bubble)}}
.acList .mi{color:var(--text2);font-size:12.5px}
/* outcome card — Apple frosted card */
.card{
  margin:8px 0 4px;background:var(--glass-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hairline);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);padding:26px 22px;display:flex;flex-direction:column;gap:14px;
  animation:fadeUp .25s ease-out;
}
.card .accentbar{height:4px;margin:-26px -22px 8px;border-radius:0;background:var(--green)}
.card.high .accentbar{background:var(--green)}
.card.medium .accentbar{background:var(--green)}
.card.escalate .accentbar{background:var(--green)}
.card .tier{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.card .tier .dot{width:8px;height:8px;border-radius:50%}
.card.high .tier{color:var(--green)}.card.high .tier .dot{background:var(--green)}
.card.medium .tier{color:var(--yellow)}.card.medium .tier .dot{background:var(--yellow)}
.card.escalate .tier{color:var(--blue)}.card.escalate .tier .dot{background:var(--blue)}
.card h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.card h2 .price{
  font-size:clamp(28px, 3vw + 16px, 44px);display:block;letter-spacing:-.03em;margin-top:2px;
  font-variant-numeric:tabular-nums;font-weight:800;
}
.card p{font-size:15.5px;color:var(--text)}
.card .meta{font-size:13.5px;color:var(--text2)}
.card .meta b{color:var(--text);font-weight:600}
.card .summary{background:var(--bubble);border-radius:14px;padding:13px 15px;font-size:13.5px;color:var(--text2);line-height:1.6}
.card .summary b{color:var(--text);font-weight:600}
.card h2 .price .travelTag{display:inline-block;font-size:14px;font-weight:600;letter-spacing:0;
  color:var(--text2);margin-left:10px;vertical-align:middle;padding:3px 10px;border-radius:999px;
  background:var(--bubble);font-variant-numeric:tabular-nums}
.card h2 .price .travelTag sup{font-size:.8em}
.card p.travelNote{font-size:12.5px;color:var(--text2);line-height:1.55;background:var(--bubble);
  border-radius:14px;padding:11px 15px;margin-top:2px}
.card p.travelNote b{color:var(--text);font-weight:600}
.card p.call811{font-size:13.5px;color:var(--text);line-height:1.55;background:var(--bubble);
  border-radius:14px;padding:11px 15px;margin-top:2px;border:1px solid var(--yellow)}
.card p.call811 b{font-weight:600}
.card p.priceMatch{font-size:13.5px;color:var(--text2);line-height:1.55;background:var(--bubble);border:1px solid var(--green);border-radius:14px;padding:11px 15px;margin-top:2px}
.card p.priceMatch b{color:var(--text);font-weight:600}
.card p.priceMatch .pmFine{font-size:12px;opacity:.8}
.card .qIncludes{background:var(--bubble);border-radius:14px;padding:13px 15px;font-size:13.5px;color:var(--text2)}
.card .qIncludes .qIncludesHead{font-weight:600;color:var(--text);margin-bottom:6px}
.card .qIncludes ul{margin:0;padding-left:18px;line-height:1.6}
.card .qIncludes ul li{margin:2px 0}
.card .qIncludes .qNote{margin:10px 0 0;font-size:12.5px;font-style:italic;line-height:1.5}
.card details.qTerms{background:var(--bubble);border-radius:14px;overflow:hidden}
.card details.qTerms>summary{cursor:pointer;padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--text);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card details.qTerms>summary::-webkit-details-marker{display:none}
.card details.qTerms>summary::after{content:"+";font-size:18px;line-height:1;color:var(--text2);flex:none}
.card details.qTerms[open]>summary::after{content:"–"}
.card details.qTerms .body{padding:0 15px 13px}
.card details.qTerms .body p{font-size:12.5px;color:var(--text2);line-height:1.55;margin:0 0 8px}
.card details.qTerms .body p:last-child{margin-bottom:0}
.card details.qTerms .body.summaryBody{font-size:13.5px;color:var(--text2);line-height:1.6}
.card details.qTerms .body.summaryBody b{color:var(--text);font-weight:600}
.cardBtns{display:flex;gap:10px;flex-wrap:wrap}
.secondaryBtn{
  font:inherit;font-size:15px;font-weight:600;background:var(--bubble);color:var(--text);
  border:none;padding:13px 18px;border-radius:999px;min-height:48px;cursor:pointer;letter-spacing:-.01em;
}
@media(hover:hover){.secondaryBtn:hover{background:var(--track)}}
/* internals */
details.internals{border:1px dashed var(--line);border-radius:14px;font-size:13px;color:var(--text2)}
details.internals summary{cursor:pointer;padding:11px 15px;font-weight:600;color:var(--text2);list-style:none;display:flex;align-items:center;gap:6px}
details.internals summary::before{content:"⚙";font-size:14px}
details.internals[open] summary{border-bottom:1px dashed var(--line)}
details.internals .body{padding:12px 15px;display:flex;flex-direction:column;gap:12px}
.internals table{width:100%;border-collapse:collapse;font-size:12.5px}
.internals th{text-align:left;font-weight:600;color:var(--text);padding:3px 6px 3px 0;border-bottom:1px solid var(--line)}
.internals td{padding:4px 6px 4px 0;border-bottom:1px solid var(--hairline2);vertical-align:top}
.internals .bind td{font-weight:700;color:var(--text)}
.internals .fired{color:#FF3B30;font-weight:600}
.internals .pass{color:var(--green)}
.internals h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text);margin-bottom:4px}
.internals .note{font-size:12px;font-style:italic}
/* start screen */
#start{padding:30px 24px 40px;display:flex;flex-direction:column;gap:22px;animation:fadeUp .3s ease-out}
#start .hero h1{font-size:clamp(26px,2.4vw + 14px,34px);font-weight:800;letter-spacing:-.03em;line-height:1.2}
#start .hero p{color:var(--text2);font-size:15px;margin-top:8px;letter-spacing:-.01em}
#start .tryBtn{
  display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;
  background:var(--accent);color:#fff;border:none;border-radius:18px;padding:18px 22px;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;letter-spacing:-.01em;
  transition:transform .15s,background .15s;
}
@media(hover:hover){#start .tryBtn:hover{background:var(--accent-dark);transform:translateY(-1px)}}
#start .tryBtn small{font-weight:500;font-size:12.5px;opacity:.85;display:block;margin-top:2px}
#start h3{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
.personaCard{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--field);
  border:1px solid var(--line);border-radius:18px;padding:14px 16px;cursor:pointer;font:inherit;
  transition:background .15s,border-color .15s;min-height:48px;
}
@media(hover:hover){.personaCard:hover{background:var(--bubble);border-color:var(--line2)}}
.personaCard .avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;
}
.personaCard .info{flex:1;min-width:0}
.personaCard .info b{font-size:15px;display:block;letter-spacing:-.01em}
.personaCard .info span{font-size:13px;color:var(--text2);display:block;margin-top:1px}
.personaCard .outcome{flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.outcome.oA{background:var(--text);color:var(--btn-ink)}
.outcome.oB{background:var(--green-soft);color:var(--green)}
.outcome.oC{background:var(--bubble);color:var(--text2)}
#start .foot{font-size:12px;color:var(--text2);text-align:center;margin-top:4px}
/* misc */
.banner{background:var(--bubble);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:11px 15px;font-size:13.5px;align-self:stretch}
.mapThumb{max-width:180px;max-height:180px;border-radius:14px;border:1px solid var(--line);display:block;object-fit:cover}
.fileChip{display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;align-self:flex-end;color:var(--text)}
.toast{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:rgba(29,29,31,.92);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:11px 20px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50;white-space:nowrap;
}
.toast.show{opacity:1}
/* live quote-preview strip (skeleton — no numbers until final) */
#qpStrip{
  display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;
  font-size:13px;transition:opacity .3s;
}
#qpStrip .qpLabel{font-weight:600;color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qpStrip .qpShimmer{
  flex:0 0 64px;height:18px;border-radius:6px;
  background:linear-gradient(90deg,var(--track) 25%,var(--bubble) 50%,var(--track) 75%);
  background-size:200% 100%;animation:qpShimmer 1.4s linear infinite;
}
#qpStrip .qpCount{color:var(--text2);white-space:nowrap}
@media(max-width:480px){#qpStrip .qpCount{display:none}}
#qpStrip.custom .qpShimmer{display:none}
#qpStrip.custom .qpLabel{font-weight:500;color:var(--text2)}
@keyframes qpShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){#qpStrip .qpShimmer{animation:none}}
/* estimator-only card (demo aid) */
.estCard{
  background:var(--bubble);border:1px dashed var(--line);border-radius:16px;
  padding:14px 16px;font-size:13px;color:var(--text2);display:flex;flex-direction:column;gap:8px;
  margin-top:2px;animation:fadeUp .25s ease-out;
}
.estCard .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.estCard b{color:var(--text);font-weight:600}
.estCard details.internals{background:var(--bg);border-style:dashed}
.fbBox{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.fbBox textarea{font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--text);resize:vertical}
.fbBox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,160,75,.12)}
.fbBtn{font:inherit;font-size:13px;font-weight:600;background:var(--text);color:var(--btn-ink);border:none;padding:9px 14px;border-radius:999px;cursor:pointer}
@media(hover:hover){.fbBtn:hover{filter:brightness(1.15)}}
.fbOut{font-size:12.5px;line-height:1.55;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fbOut:empty{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  *,#progressBar{transition-duration:50ms !important;animation-duration:50ms !important}
}