#elfy-root{--g:#10a36a;--g2:#0c6f48;--gold:#f4c84a;--red:#d6453b;max-width:680px;margin:0 auto}
.elfy-stage{position:relative;overflow:hidden;border-radius:22px;padding:1.6rem 1.2rem 1.1rem;text-align:center;
  background:radial-gradient(120% 80% at 50% -10%,#16324a 0%,#0d2236 45%,#0a1a2b 100%);
  box-shadow:0 20px 50px rgba(8,20,30,.35);min-height:520px;display:flex;flex-direction:column;align-items:center}
.elfy-sky{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 12% 18%,#fff,transparent),radial-gradient(2px 2px at 78% 12%,#bfe9ff,transparent),radial-gradient(1.5px 1.5px at 35% 8%,#fff,transparent),radial-gradient(2px 2px at 62% 22%,#ffe9a8,transparent),radial-gradient(1.5px 1.5px at 90% 30%,#fff,transparent),radial-gradient(2px 2px at 22% 30%,#ffd0c0,transparent);
  opacity:.55;animation:elfyTwinkle 4s ease-in-out infinite}
@keyframes elfyTwinkle{0%,100%{opacity:.35}50%{opacity:.7}}
.elfy-char{position:relative;width:150px;height:178px;margin:.2rem auto .6rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));animation:elfyBob 3.4s ease-in-out infinite;transform-origin:50% 90%}
.elfy-char.talking{animation:elfyTalk .55s ease-in-out infinite}
.elfy-char.cheer{animation:elfyCheer .8s ease}
@keyframes elfyBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes elfyTalk{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}
@keyframes elfyCheer{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-16px) rotate(-8deg)}60%{transform:translateY(-8px) rotate(8deg)}100%{transform:translateY(0)}}
.elfy-speech{position:relative;z-index:1;min-height:84px;display:flex;align-items:center;justify-content:center;width:100%}
.elfy-q{color:#fff;font-size:1.22rem;line-height:1.5;font-weight:600;max-width:34ch;margin:0 auto;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.elfy-q.in{animation:elfyFade .35s ease}
.elfy-q strong{color:var(--gold)}
@keyframes elfyFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.elfy-dots span{display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;background:var(--gold);animation:elfyDot 1s infinite}
.elfy-dots span:nth-child(2){animation-delay:.15s}.elfy-dots span:nth-child(3){animation-delay:.3s}
@keyframes elfyDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.elfy-answers{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:1rem auto .2rem;max-width:560px}
.elfy-chip{appearance:none;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  padding:.7rem 1.15rem;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s;backdrop-filter:blur(4px)}
.elfy-chip:hover{background:#fff;color:var(--g2);border-color:#fff;transform:translateY(-2px)}
.elfy-chip.on{background:var(--g);border-color:var(--g);color:#fff}
.elfy-chip-done{background:var(--gold);color:#3a2a00;border-color:var(--gold)}
.elfy-input{position:relative;z-index:1;display:flex;align-items:center;gap:.45rem;width:100%;max-width:520px;margin:auto auto 0;padding-top:1rem}
.elfy-input.done{opacity:.55;pointer-events:none}
.elfy-photo,.elfy-send{flex:0 0 auto;width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.elfy-photo{background:rgba(255,255,255,.14);color:#fff}.elfy-photo.pulse{animation:elfyPulse 1.2s infinite}
@keyframes elfyPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,200,74,.6)}50%{box-shadow:0 0 0 8px rgba(244,200,74,0)}}
.elfy-send{background:var(--g);color:#fff}
.elfy-input input[type=text]{flex:1;border:none;border-radius:24px;padding:.72rem 1rem;font-size:1rem;outline:none;background:#fff;color:#1f2937}
.elfy-fallback{position:relative;z-index:1;margin-top:.7rem}
.elfy-fallback a{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:underline}
@media(max-width:600px){.elfy-stage{border-radius:14px;min-height:78vh;padding:1.2rem .9rem}.elfy-char{width:120px;height:142px}.elfy-q{font-size:1.1rem}}

/* ============================================================
   IMMERSIVE CHRISTMAS TAKEOVER  (/quote full-screen layout)
   ============================================================ */
body.elfy-immersive{margin:0;min-height:100vh;overflow-x:hidden;background:#091627;
  font-family:'Poppins',system-ui,sans-serif;color:#fff}
body.elfy-immersive #main-content{margin:0}

/* ---- night sky scene ---- */
.xmas-scene{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(130% 90% at 78% 6%,#1d4063 0%,#122a44 38%,#0a1a2d 68%,#071322 100%)}
.xmas-moon{position:absolute;top:7%;right:11%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff 0%,#eef3ff 55%,#cdd9f3 100%);
  box-shadow:0 0 90px 34px rgba(214,228,255,.32);animation:moonGlow 7s ease-in-out infinite}
@keyframes moonGlow{0%,100%{box-shadow:0 0 90px 34px rgba(214,228,255,.28)}50%{box-shadow:0 0 117px 44px rgba(214,228,255,.42)}}
.xmas-stars{position:absolute;inset:0;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(2px 2px at 28% 9%,#cfe6ff,transparent),radial-gradient(1.5px 1.5px at 47% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 63% 12%,#fff,transparent),radial-gradient(2px 2px at 81% 26%,#ffe9b0,transparent),radial-gradient(1.5px 1.5px at 91% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 38% 33%,#fff,transparent),radial-gradient(1.5px 1.5px at 7% 38%,#cfe6ff,transparent);
  animation:elfyTwinkle 4.5s ease-in-out infinite}

/* ---- falling snow (3 parallax layers, seamless tiled) ---- */
.xmas-snow{position:fixed;inset:0;z-index:1;pointer-events:none;background-repeat:repeat;
  background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 90px 80px,rgba(255,255,255,.85),transparent),radial-gradient(1.5px 1.5px at 140px 40px,#fff,transparent),radial-gradient(2px 2px at 60px 150px,rgba(255,255,255,.7),transparent);
  background-size:200px 200px;opacity:.8;animation:snowFall 14s linear infinite}
.xmas-snow--2{background-image:radial-gradient(3px 3px at 50px 60px,#fff,transparent),radial-gradient(2.5px 2.5px at 170px 120px,rgba(255,255,255,.8),transparent),radial-gradient(3px 3px at 110px 200px,#fff,transparent);
  background-size:300px 300px;opacity:.55;animation-duration:22s}
.xmas-snow--3{background-image:radial-gradient(1.5px 1.5px at 30px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 90px,#fff,transparent),radial-gradient(1.5px 1.5px at 80px 160px,#fff,transparent);
  background-size:160px 160px;opacity:.6;animation-duration:9s}
@keyframes snowFall{from{background-position:0 0}to{background-position:0 200px}}
.xmas-snow--2 ~ .xmas-snow--2,.xmas-snow--2{animation-name:snowFall2}
@keyframes snowFall2{from{background-position:0 0}to{background-position:0 300px}}
.xmas-snow--3{animation-name:snowFall3}
@keyframes snowFall3{from{background-position:0 0}to{background-position:0 160px}}

/* ---- string-lights garland (top) ---- */
.xmas-garland{position:fixed;top:0;left:0;right:0;height:30px;z-index:2;display:flex;
  justify-content:space-around;align-items:flex-start;padding:0 10px;pointer-events:none;
  border-top:3px solid rgba(20,40,30,.9)}
.xmas-garland .bulb{position:relative;width:11px;height:15px;margin-top:7px;border-radius:50% 50% 48% 48%;
  animation:bulbTwinkle 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
.xmas-garland .bulb::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:3px;height:7px;background:#0c2018;border-radius:2px}
.bulb--r{background:#ff4d4d;box-shadow:0 0 10px 2px #ff4d4d}
.bulb--g{background:#46e07a;box-shadow:0 0 10px 2px #46e07a}
.bulb--b{background:#4db8ff;box-shadow:0 0 10px 2px #4db8ff}
.bulb--y{background:#ffd24d;box-shadow:0 0 10px 2px #ffd24d}
.bulb--m{background:#ff6bd6;box-shadow:0 0 10px 2px #ff6bd6}
@keyframes bulbTwinkle{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.45;filter:brightness(.7)}}

/* ---- ground: hills, pines, cozy house ---- */
.xmas-ground{position:fixed;bottom:0;left:0;width:100%;height:min(34vh,300px);z-index:1;pointer-events:none}
.xmas-ground .win{animation:winGlow 3.4s ease-in-out infinite}
.xmas-ground .win--b{animation-delay:1.4s}
@keyframes winGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,214,107,.6))}50%{filter:drop-shadow(0 0 12px rgba(255,214,107,1))}}

/* ---- floating top bar ---- */
.elfy-topbar{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;
  justify-content:space-between;padding:.85rem 1.1rem;gap:1rem}
.elfy-topbar a{display:inline-flex;align-items:center;gap:.45rem;color:#eaf2ff;text-decoration:none;
  font-size:.92rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5);transition:opacity .15s}
.elfy-topbar a:hover{opacity:.75}
.elfy-back svg{flex:0 0 auto}
.elfy-call{background:rgba(255,255,255,.12);padding:.45rem .85rem;border-radius:30px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
@media(max-width:520px){.elfy-back span{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.elfy-call span{display:none}}

/* ---- main stage centering ---- */
.elfy-immersive-main{position:relative;z-index:3;min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:64px 1rem 1rem}
.elfy-shell{width:100%;max-width:720px}

/* ---- Elfy widget as a glass focal panel (scene shows through) ---- */
.elfy-immersive .elfy-stage{background:linear-gradient(180deg,rgba(13,30,52,.62),rgba(8,18,32,.74));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(3,10,20,.55),inset 0 1px 0 rgba(255,255,255,.08);
  min-height:auto}
.elfy-immersive .elfy-sky{display:none}
.elfy-immersive .elfy-char{margin-top:.4rem}
@media(min-width:601px){.elfy-immersive .elfy-q{font-size:1.32rem}}

/* ---- color-style picker (animated light-strand swatches) ---- */
.elfy-themes{display:flex;flex-direction:column;gap:.35rem;width:100%;max-width:580px;margin:.7rem auto .2rem}
.elfy-theme-group{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);
  margin:.45rem 0 .15rem;text-align:left;font-weight:600}
.elfy-theme-row{display:flex;flex-wrap:wrap;gap:.5rem}
.elfy-theme{flex:1 1 150px;min-width:138px;cursor:pointer;text-align:center;
  border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:14px;
  padding:.55rem .6rem .65rem;transition:transform .15s,background .15s,border-color .15s}
.elfy-theme:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.elfy-strand{position:relative;display:flex;justify-content:space-around;align-items:flex-start;
  height:24px;padding:0 6px;margin-bottom:.15rem}
.elfy-strand::before{content:"";position:absolute;top:1px;left:8%;right:8%;height:2px;
  background:rgba(255,255,255,.4);border-radius:2px}
.elfy-strand .eb{position:relative;width:9px;height:13px;margin-top:3px;border-radius:50% 50% 46% 46%;
  background:var(--bc);box-shadow:0 0 8px 1px var(--bc);
  animation:bulbTwinkle 1.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.elfy-strand .eb::before{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:2px;height:3px;background:rgba(255,255,255,.55);border-radius:1px}
.elfy-theme-name{font-size:.92rem;font-weight:600;color:#fff}

/* ---- mobile fix: tall steps (e.g. budget, 6+ chips) were centered in 100vh and
   pushed the input/chips below the fold & unreachable. Flow from top + scroll,
   use dvh (mobile browser bars), shrink the elf. Overrides the earlier @media. ---- */
@media(max-width:600px){
  .elfy-immersive-main{align-items:flex-start;justify-content:flex-start;min-height:100dvh;padding:52px .7rem 1.4rem}
  .elfy-stage{min-height:auto;border-radius:14px;padding:1rem .85rem 1.2rem}
  .elfy-char{width:104px;height:124px;margin:.1rem auto .35rem}
  .elfy-speech{min-height:0}
  .elfy-q{font-size:1.05rem}
  .elfy-answers{margin:.7rem auto .2rem}
  .elfy-input{padding-top:.8rem}
}

/* ---- immersive topbar: brand removed → assistant title + animated EXIT icon ---- */
.elfy-title{display:flex;align-items:center;gap:.4rem;color:#fff;font-weight:700;font-size:1.4rem;
  letter-spacing:.2px;text-shadow:0 1px 6px rgba(0,0,0,.5);min-width:0}
.elfy-title strong{color:var(--gold);font-weight:700}
.elfy-title-sub{opacity:.88;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elfy-title-sparkle{animation:elfyTwinkle 2.2s ease-in-out infinite}
.elfy-exit{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:#eaf2ff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .15s,background .15s,border-color .15s}
.elfy-exit:hover{background:#d6453b;border-color:#d6453b;color:#fff;transform:scale(1.07);opacity:1}
.elfy-exit .exit-arrow{animation:elfyExitNudge 1.8s ease-in-out infinite}
@keyframes elfyExitNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.elfy-topbar .elfy-title{flex:1 1 auto;overflow:hidden;white-space:nowrap}
@media(max-width:520px){.elfy-title{font-size:.92rem;gap:.3rem}}
@media(max-width:360px){.elfy-title-sub{display:none}}


/* ---- Santa's sleigh: flies bottom-left -> top-right across the moon, once/minute ---- */
.xmas-santa{position:fixed;left:0;top:0;width:200px;z-index:2;color:#0b1422;pointer-events:none;
  opacity:0;will-change:transform;animation:santaFly 60s linear 2s infinite}
/* From the MIDDLE-LEFT, gentle curve up to cross the MOON'S CENTRE. Constant speed
   (linear, keyframe %s spaced ~by distance so there are no slow-downs/pauses).
   z-index:2 = in front of the moon, behind the chat panel (z:3). */
@keyframes santaFly{
  0%   {transform:translate(-26vw, 52vh) rotate(-6deg);  opacity:0}
  3%   {opacity:.92}
  7%   {transform:translate(6vw, 44vh)   rotate(-7deg)}
  15%  {transform:translate(38vw, 32vh)  rotate(-10deg)}
  20%  {transform:translate(62vw, 20vh)  rotate(-12deg)}
  25%  {transform:translate(78vw, 10vh)  rotate(-14deg)}
  28%  {opacity:.92}
  31%  {transform:translate(106vw, -2vh) rotate(-15deg); opacity:0}
  100% {transform:translate(106vw, -2vh) rotate(-15deg); opacity:0}
}
}

/* "Prefer a simple form?" — show ONLY the classic form on a clean panel (not mixed with the chat) */
.elfy-classic-overlay{width:100%;max-width:780px;margin:0 auto;background:rgba(255,255,255,.97);
  border-radius:16px;padding:1.25rem 1.25rem 1.5rem;box-shadow:0 24px 60px rgba(3,10,20,.5)}
body.elfy-simple-mode .xmas-santa{display:none}

/* ---- classic form upgrades: "project specifics" grid + animated color strands ---- */
.qopt{color:#94a3b8;font-weight:400;font-size:.8em}
.qspec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.qspec label{display:block;font-size:.72rem;color:#64748b;margin-bottom:.2rem;font-weight:600}
.qcheck-item.qlift{margin-top:.6rem}
.qcolor-card .qstrand{display:flex;justify-content:space-around;align-items:flex-start;height:18px;width:82%;
  margin:0 auto .35rem;padding:0 4px;border-top:2px solid #cbd5e1}
.qcolor-card .qbulb{width:8px;height:11px;border-radius:50% 50% 45% 45%;background:var(--bc);
  box-shadow:0 0 4px 1px var(--bc);margin-top:2px;animation:bulbTwinkle 1.8s ease-in-out infinite;animation-delay:var(--d,0s)}

/* ---- desktop: give the experience + classic form more room ---- */
@media(min-width:992px){
  .elfy-immersive .elfy-shell{max-width:1000px}
  .elfy-immersive #elfy-root{max-width:760px}
  .elfy-immersive .elfy-classic-overlay{max-width:980px}
}

/* simple-form mode: hide the assistant title so it doesn't overlap the form's progress bar */
body.elfy-simple-mode .elfy-title{display:none}