/* Voye Homes website chatbot. Round 3: conversational, minimal, light, navy + gold.
   Every rule is scoped under #vc-root and every class is vc- prefixed so nothing here can change, or be
   changed by, the rest of the site's CSS. */
#vc-root *{box-sizing:border-box;margin:0;padding:0;font-family:inherit;color:inherit;letter-spacing:normal;text-transform:none;float:none}
#vc-root{--navy:#0B0E6B;--navy2:#1A1FA8;--gold:#C9A24B;--gold2:#A8842F;--goldt:#F8F1DE;--bg:#FBF9F4;--card:#fff;--ink:#1E2140;--mute:#7A7D93;--line:#ECE7DA;--field:#FAF8F3;--wa:#1FA855;--r:18px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.45;text-align:left}
#vc-root button,#vc-root input,#vc-root select{font-family:inherit}
#vc-root a{color:var(--navy)}

/* ---- launcher: labelled pill so it reads as a chat ---- */
#vc-root #vc-launcher{position:fixed;right:22px;bottom:90px;z-index:9998;width:88px;height:88px;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 14px rgba(11,14,107,.32));transition:transform .2s;animation:vc-float 3.2s ease-in-out infinite}
#vc-root #vc-launcher:hover{transform:scale(1.08);animation-play-state:paused}
#vc-root #vc-launcher,#vc-root #vc-launcher:hover,#vc-root #vc-launcher:focus,#vc-root #vc-launcher:active{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;-webkit-tap-highlight-color:transparent}
#vc-root #vc-launcher:focus-visible{filter:drop-shadow(0 0 3px var(--gold)) drop-shadow(0 10px 14px rgba(11,14,107,.32))}
#vc-root #vc-launcher .vc-av{width:100%;height:100%}
/* attention: gold + violet sonar rings, a warm glow, a periodic wave and a "1" badge. Icon itself is unchanged. */
#vc-root #vc-launcher::before,#vc-root #vc-launcher::after{content:"";position:absolute;left:6%;top:6%;width:88%;height:88%;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;animation:vc-ripple 2.8s cubic-bezier(.2,.6,.3,1) infinite}
#vc-root #vc-launcher::before{border:3px solid #f5b83d;box-shadow:0 0 14px rgba(245,184,61,.7)}
#vc-root #vc-launcher::after{border:3px solid #6d5dfc;box-shadow:0 0 14px rgba(109,93,252,.6);animation-delay:1.4s}
@keyframes vc-ripple{0%{transform:scale(.8);opacity:.95}70%{opacity:.25}100%{transform:scale(1.95);opacity:0}}
#vc-root #vc-launcher .vc-halo{position:absolute;left:-12%;top:-12%;width:124%;height:124%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 52%,rgba(255,206,84,.62) 0,rgba(255,170,60,.32) 38%,rgba(109,93,252,.16) 58%,rgba(109,93,252,0) 72%);animation:vc-halo 2.2s ease-in-out infinite}
@keyframes vc-halo{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
#vc-root #vc-launcher .vc-av{position:relative;z-index:1;animation:vc-wave 7s ease-in-out infinite;transform-origin:50% 85%}
@keyframes vc-wave{0%,78%,100%{transform:rotate(0) scale(1)}81%{transform:rotate(-11deg) scale(1.06)}84%{transform:rotate(10deg) scale(1.06)}87%{transform:rotate(-7deg) scale(1.04)}90%{transform:rotate(5deg) scale(1.02)}93%{transform:rotate(0) scale(1)}}
#vc-root #vc-launcher .vc-live{display:flex;position:absolute;right:6%;bottom:8%;z-index:3;min-width:22px;height:22px;padding:0 5px;box-sizing:border-box;border-radius:11px;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff5a5f,#e11d48);color:#fff;font:700 12px/1 Poppins,system-ui,sans-serif;border:2px solid #fff;box-shadow:0 3px 8px rgba(225,29,72,.5);animation:vc-pop 2.4s ease-in-out infinite}
#vc-root #vc-launcher .vc-live::before{content:"1"}
@keyframes vc-pop{0%,100%{transform:scale(1)}8%{transform:scale(1.28)}16%{transform:scale(1)}24%{transform:scale(1.16)}32%{transform:scale(1)}}
#vc-root #vc-launcher.vc-seen .vc-live{display:none}
#vc-root #vc-launcher:hover::before,#vc-root #vc-launcher:hover::after{animation-play-state:paused}
@media (max-width:680px){#vc-root #vc-launcher .vc-live{min-width:18px;height:18px;font-size:10px;border-width:1.5px}}
@keyframes vc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#vc-root #vc-teaser{position:fixed;right:22px;bottom:184px;z-index:9997;background:#fff;border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:11px 15px;font-size:13px;
  box-shadow:0 10px 30px rgba(11,14,107,.16);max-width:250px;line-height:1.4;animation:vc-pop .4s both;cursor:pointer}
#vc-root #vc-teaser small{display:block;color:var(--gold2);font-weight:600;margin-bottom:2px;font-size:11.5px}
@keyframes vc-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* ---- window ---- */
#vc-root #vc-win{max-width:calc(100vw - 16px);position:fixed;right:22px;bottom:24px;z-index:10001;width:380px;height:min(640px,calc(100vh - 48px));background:var(--bg);border-radius:20px;overflow:hidden;
  display:none;flex-direction:column;box-shadow:0 24px 70px rgba(11,14,107,.28);border:1px solid var(--line);transform-origin:bottom right}
#vc-root #vc-win.vc-open{display:flex;animation:vc-open .26s cubic-bezier(.2,.9,.3,1.05)}
@keyframes vc-open{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
#vc-root .vc-head{background:var(--navy);color:#fff;padding:14px 14px 14px 16px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--gold)}
#vc-root .vc-head .vc-av{width:50px;height:50px;flex:none}
#vc-root .vc-head h2{font-size:15px;font-weight:600;color:#fff}
#vc-root .vc-head p{font-size:11.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
#vc-root .vc-dot{width:8px;height:8px;background:#34D399;border-radius:50%}
#vc-root .vc-head .vc-sp{flex:1}
#vc-root .vc-ic{background:rgba(255,255,255,.12);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
#vc-root .vc-ic:hover{background:rgba(255,255,255,.24)}
#vc-root #vc-msgs{flex:1;overflow-y:auto;padding:16px 12px 10px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#vc-root #vc-msgs>*{flex-shrink:0}

/* ---- messages ---- */
#vc-root .vc-m{max-width:100%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;animation:vc-in .25s both}
@keyframes vc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#vc-root .vc-m.vc-bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start}
#vc-root .vc-m.vc-usr{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
#vc-root .vc-typing{display:flex;gap:4px;padding:13px 14px}
#vc-root .vc-typing i{width:7px;height:7px;border-radius:50%;background:#C9CBDB;animation:vc-b 1s infinite}
#vc-root .vc-typing i:nth-child(2){animation-delay:.15s}
#vc-root .vc-typing i:nth-child(3){animation-delay:.3s}
@keyframes vc-b{0%,60%,100%{transform:none}30%{transform:translateY(-5px)}}
#vc-root .vc-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:2px 0 -4px}
#vc-root .vc-m a{color:var(--navy2);font-weight:600}
#vc-root .vc-m.vc-usr a{color:#fff}

/* ---- chips ---- */
#vc-root .vc-chips{display:flex;flex-wrap:wrap;gap:8px;animation:vc-in .3s both}
#vc-root .vc-chip{border:1px solid var(--line);color:var(--navy);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;text-align:left}
#vc-root .vc-chip:hover{border-color:var(--gold);background:var(--goldt)}
#vc-root .vc-chip.vc-solid{background:var(--navy);border-color:var(--navy);color:#fff}
#vc-root .vc-chip.vc-solid:hover{background:var(--navy2)}
#vc-root .vc-chip:disabled{opacity:.55;cursor:default}


/* ---- conversation rows (avatar + bubble) ---- */
#vc-root .vc-row{display:flex;align-items:flex-end;gap:8px;max-width:92%;animation:vc-in .25s both}
#vc-root .vc-row.vc-b{align-self:flex-start}
#vc-root .vc-row.vc-u{align-self:flex-end;justify-content:flex-end}
#vc-root .vc-ava{width:34px;height:34px;flex:none;display:block}
#vc-root .vc-ava.vc-ghost{visibility:hidden}
#vc-root .vc-row .vc-m{animation:none}
#vc-root .vc-datem{padding:12px}
#vc-root .vc-datebox{display:flex;flex-direction:column;gap:8px;min-width:200px}
#vc-root .vc-datebox input[type=date]{width:100%;border:1px solid var(--line);background:var(--field);border-radius:10px;padding:10px 10px;font-size:14px;color:var(--ink)}
#vc-root .vc-datebox input[type=date]:focus{outline:2px solid var(--gold);outline-offset:1px}
#vc-root .vc-datebox .vc-chip{align-self:flex-start}

/* ---- quick replies ---- */
#vc-root .vc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px 36px;animation:vc-in .3s both}

/* ---- property carousel ---- */
#vc-root .vc-carw{position:relative;margin:0 -12px;padding:2px 0 4px;animation:vc-in .3s both}
#vc-root .vc-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 12px 6px;scroll-padding:0 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#vc-root .vc-car::-webkit-scrollbar{display:none}
#vc-root .vc-card{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(11,14,107,.07)}
#vc-root .vc-img{position:relative;height:124px;background:var(--goldt)}
#vc-root .vc-img img{width:100%;height:100%;object-fit:cover;display:block}
#vc-root .vc-price{position:absolute;left:8px;bottom:8px;background:rgba(11,14,107,.88);color:#fff;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px}
#vc-root .vc-bd{flex:1;padding:11px 12px 12px;display:flex;flex-direction:column;gap:4px}
#vc-root .vc-bd .vc-ttl{font-size:14px;font-weight:600;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
#vc-root .vc-loc{font-size:11.5px;color:var(--mute);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
#vc-root .vc-btn{margin-top:auto;border:0;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;cursor:pointer;width:100%}
#vc-root .vc-btn.vc-gold{background:var(--gold);color:#241a00}
#vc-root .vc-btn.vc-gold:hover{background:var(--gold2);color:#fff}
#vc-root .vc-cn{position:absolute;top:52px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(11,14,107,.18);display:flex;align-items:center;justify-content:center;transition:opacity .2s}
#vc-root .vc-cn.vc-prev{left:14px}
#vc-root .vc-cn.vc-next{right:14px}
#vc-root .vc-cn.vc-off{opacity:0;pointer-events:none}
#vc-root .vc-cn:hover{background:var(--goldt)}

/* ---- OTP, errors, reference ---- */
#vc-root .vc-panel{margin:0 0 4px 36px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;animation:vc-in .3s both}
#vc-root .vc-otp{display:flex;gap:6px;justify-content:center}
#vc-root .vc-otp input{width:38px;height:44px;text-align:center;font-size:18px;font-weight:600;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--ink)}
#vc-root .vc-otp input:focus{outline:2px solid var(--gold);outline-offset:1px}
#vc-root .vc-err{color:#B3261E;font-size:12px;min-height:0;margin-top:6px}
#vc-root .vc-err:empty{display:none}
#vc-root .vc-hint{text-align:center;margin-top:8px;font-size:12px}
#vc-root .vc-link{background:none;border:0;color:var(--navy2);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
#vc-root .vc-link:disabled{opacity:.55;cursor:default;text-decoration:none}
#vc-root .vc-ref{text-align:center}
#vc-root .vc-ref small{display:block;font-size:11px;color:var(--mute)}
#vc-root .vc-ref b{font-size:18px;color:var(--navy);letter-spacing:.04em}

/* ---- composer ---- */
#vc-root .vc-comp{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--line)}
#vc-root .vc-comp input{flex:1;min-width:0;border:1px solid var(--line);background:var(--field);border-radius:999px;padding:10px 16px;font-size:14px;color:var(--ink)}
#vc-root .vc-comp input:focus{outline:2px solid var(--gold);outline-offset:0}
#vc-root .vc-send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:15px;cursor:pointer}
#vc-root .vc-send:hover{background:var(--navy2)}

/* ---- phones: full screen ---- */
@media (max-width:520px){
  /* Pinned to the VISIBLE area: chatbot.js sets --vc-h / --vc-top from visualViewport, so when the keyboard opens the window
     shrinks to fit above it instead of sliding up. Fallbacks: dvh, then 100%. */
  #vc-root #vc-win{right:0;left:0;bottom:auto;top:var(--vc-top,0px);width:100%;max-width:100%;height:100%;height:var(--vc-h,100dvh);border-radius:0;border:0}
  #vc-root #vc-msgs{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #vc-root .vc-comp{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  #vc-root .vc-comp input{font-size:16px}
  #vc-root .vc-datebox input[type=date]{font-size:16px}
}
/* While the full-screen chat is open on a phone the page behind must not scroll or move (class set by chatbot.js). */
html.vc-lock,html.vc-lock body{overflow:hidden!important;overscroll-behavior:none}
/* Phones (the site's green call/WhatsApp stack and bottom bar show at <= 680px): icon sits above the stack, centred on it.
   chatbot.js refines these two numbers from the real button position; these are the fallback. */
@media (max-width:680px){
  #vc-root #vc-launcher{right:-3px;bottom:184px;width:64px;height:64px}
  #vc-root #vc-teaser{right:8px;bottom:254px;max-width:230px}
}
@media (prefers-reduced-motion:reduce){#vc-root *{animation:none!important;scroll-behavior:auto!important}}


/* ---- brand icon: robot image + the speech-bubble dots drawn in CSS so they can "load" 1 -> 2 -> 3 ---- */
#vc-root .vc-av{position:relative;display:block}
#vc-root .vc-av img{width:100%;height:100%;display:block;object-fit:contain}
#vc-root .vc-ava .vc-av{width:100%;height:100%}
#vc-root .vc-dots i{position:absolute;top:21.3%;width:5.2%;height:5.2%;margin:-2.6% 0 0 -2.6%;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#FFE08A,#E3A622 60%,#B8800F);animation-duration:2.4s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
#vc-root .vc-dots i:nth-child(1){left:71.5%;animation-name:vc-d1}
#vc-root .vc-dots i:nth-child(2){left:79.7%;animation-name:vc-d2}
#vc-root .vc-dots i:nth-child(3){left:87.9%;animation-name:vc-d3}
@keyframes vc-d1{0%{opacity:0;transform:scale(.4)}8%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
@keyframes vc-d2{0%,26%{opacity:0;transform:scale(.4)}34%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
@keyframes vc-d3{0%,52%{opacity:0;transform:scale(.4)}60%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.4)}}
/* typing indicator in the chat: same one, two, three pattern */
#vc-root .vc-typing i{animation-delay:0s!important;opacity:0;animation-duration:1.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
#vc-root .vc-typing i:nth-child(1){animation-name:vc-d1}
#vc-root .vc-typing i:nth-child(2){animation-name:vc-d2}
#vc-root .vc-typing i:nth-child(3){animation-name:vc-d3}
@media (prefers-reduced-motion:reduce){#vc-root .vc-dots i,#vc-root .vc-typing i{opacity:1!important}}
#vc-root .vc-ava .vc-dots i{animation:none;opacity:1}