/* =========================================================
   21st Castle — Novelle Boulevard
   Website assistant

   Self-contained: every value is namespaced under .nbc so nothing here
   can leak into the page, and nothing on the page can reach in. Colours
   are re-declared rather than borrowed from :root, so the widget still
   looks right if it is ever dropped onto another site.
   ========================================================= */

.nbc{
  /* --- palette, sampled from the site's own sections --- */
  --nbc-cream:#F6EFE7;
  --nbc-card:#FBF6EF;
  --nbc-line:#E7DAC7;
  --nbc-ink:#2C2D2E;
  --nbc-body:#5F594F;
  --nbc-muted:#9A9187;
  --nbc-gold:#A9803F;
  --nbc-gold-2:#C3A67F;
  --nbc-dk:#1E3320;          /* the deep forest green of the footer */
  --nbc-dk-2:#16261A;
  --nbc-dk-ink:#F1EEE4;
  --nbc-wa:#25D366;

  --nbc-radius:18px;
  --nbc-shadow:0 18px 48px rgba(30,51,32,.20), 0 4px 12px rgba(30,51,32,.10);

  position:fixed;
  right:clamp(14px, 2.2vw, 26px);
  bottom:clamp(14px, 2.2vw, 26px);
  z-index:9999;                /* above the header, below nothing */
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  /* The closed panel keeps its 380x580 layout box (it only fades out), so
     this wrapper is a tall fixed rectangle over the bottom-right of every
     page. Left clickable it swallows every click behind it, so the wrapper
     is transparent to the pointer and the two real controls opt back in. */
  pointer-events:none;
  font-family:'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================
   LAUNCHER
   ========================================================= */
.nbc__launcher{
  position:relative;
  width:58px; height:58px;
  flex:none;
  pointer-events:auto;         /* opt back in; the wrapper is pass-through */
  border:0; border-radius:50%;
  /* Gold, to sit as a matched pair with the .fab--call button on the
     left. The shadow is gold-tinted for the same reason — a green-cast
     shadow under a gold button reads as a mismatch. */
  background:var(--nbc-gold);
  color:#FFFDF8;
  cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(140,108,54,.34), 0 2px 6px rgba(140,108,54,.18);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.nbc__launcher:hover{
  transform:translateY(-2px);
  background:#8A6733;
  box-shadow:0 11px 26px rgba(140,108,54,.40), 0 2px 6px rgba(140,108,54,.20);
}
.nbc__launcher:active{ transform:translateY(0) scale(.96); }
/* dark ring: gold-on-gold would be invisible */
.nbc__launcher:focus-visible{ outline:2px solid var(--nbc-dk); outline-offset:3px; }

/* A soft ring that pulses twice on load, then rests — enough to be
   noticed without becoming a distraction. Pale, so it stays visible
   as it expands away from the gold face. */
.nbc__launcher::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--nbc-gold);
  animation:nbc-pulse 2.6s ease-out 2;
  pointer-events:none;
}
@keyframes nbc-pulse{
  0%   { transform:scale(1);    opacity:.7; }
  70%  { transform:scale(1.45); opacity:0; }
  100% { transform:scale(1.45); opacity:0; }
}

/* The two icons are stacked; opening swaps which one is visible. */
.nbc__ico{
  grid-area:1 / 1;
  width:25px; height:25px;
  transition:opacity .2s ease, transform .28s ease;
}
.nbc__ico--close{ opacity:0; transform:rotate(-90deg) scale(.6); }
.nbc__launcher.is-open .nbc__ico--chat{ opacity:0; transform:rotate(90deg) scale(.6); }
.nbc__launcher.is-open .nbc__ico--close{ opacity:1; transform:rotate(0) scale(1); }
.nbc__launcher.is-open::after{ animation:none; opacity:0; }

/* =========================================================
   PANEL
   ========================================================= */
.nbc__panel{
  width:min(380px, calc(100vw - 28px));
  height:min(580px, calc(100dvh - 116px));
  display:flex; flex-direction:column;
  background:var(--nbc-cream);
  border:1px solid var(--nbc-line);
  border-radius:var(--nbc-radius);
  box-shadow:var(--nbc-shadow);
  overflow:hidden;

  opacity:0;
  transform:translateY(12px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .22s ease, transform .24s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.nbc.is-open .nbc__panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ---- header ---- */
.nbc__head{
  display:flex; align-items:center; gap:10px;
  padding:13px 12px 13px 15px;
  background:var(--nbc-dk);
  color:var(--nbc-dk-ink);
  flex:none;
}
.nbc__avatar{
  width:36px; height:36px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--nbc-gold), #8A6733);
  color:#FBF6EF;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
}
.nbc__headtext{ display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.nbc__title{
  font-size:14.5px; font-weight:500; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nbc__status{
  font-size:11.5px; color:#A9B8A6; font-weight:300;
  display:flex; align-items:center; gap:5px;
}
.nbc__status::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--nbc-wa);
}
.nbc__iconbtn{
  width:30px; height:30px; flex:none;
  border:0; border-radius:8px;
  background:transparent; color:#BFCBBB;
  cursor:pointer; display:grid; place-items:center;
  transition:background .18s ease, color .18s ease;
}
.nbc__iconbtn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.nbc__iconbtn:focus-visible{ outline:2px solid var(--nbc-gold-2); outline-offset:1px; }
.nbc__iconbtn svg{ width:17px; height:17px; }

/* ---- transcript ---- */
.nbc__log{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;      /* stops the page scrolling behind it */
  padding:16px 14px 6px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin;
  scrollbar-color:var(--nbc-line) transparent;
}
.nbc__log::-webkit-scrollbar{ width:7px; }
.nbc__log::-webkit-scrollbar-thumb{
  background:var(--nbc-line); border-radius:4px;
}

.nbc__row{ display:flex; flex-direction:column; max-width:100%; }
.nbc__row--me{ align-items:flex-end; }
.nbc__row--bot{ align-items:flex-start; }

.nbc__row.is-new{ animation:nbc-in .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes nbc-in{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:translateY(0); }
}

.nbc__bubble{
  max-width:86%;
  padding:10px 13px;
  border-radius:15px;
  font-size:13.9px; line-height:1.55; font-weight:300;
  background:var(--nbc-card);
  border:1px solid var(--nbc-line);
  color:var(--nbc-body);
  word-wrap:break-word; overflow-wrap:anywhere;
}
.nbc__row--bot .nbc__bubble{ border-bottom-left-radius:5px; }
.nbc__row--me  .nbc__bubble{
  border-bottom-right-radius:5px;
  background:var(--nbc-dk);
  border-color:var(--nbc-dk);
  color:#EDEAE2;
}

.nbc__line{ margin:0; }
.nbc__line + .nbc__line{ margin-top:3px; }
/* bullets keep their text aligned under itself when it wraps */
.nbc__line--bullet{
  padding-left:14px; position:relative;
}
.nbc__line--bullet::before{
  content:'·'; position:absolute; left:3px; top:-1px;
  color:var(--nbc-gold); font-weight:600; font-size:16px;
}

/* ---- inline links inside a bubble ---- */
.nbc__links{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:9px; padding-top:9px;
  border-top:1px dashed var(--nbc-line);
}
.nbc__link{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px;
  font-size:12.3px; font-weight:500; letter-spacing:.01em;
  color:var(--nbc-gold);
  text-decoration:none;
  border:1px solid var(--nbc-gold-2);
  border-radius:999px;
  transition:background .18s ease, color .18s ease;
}
.nbc__link::after{ content:'→'; font-size:11px; opacity:.75; }
.nbc__link:hover{ background:var(--nbc-gold); color:#FBF6EF; border-color:var(--nbc-gold); }
.nbc__link:focus-visible{ outline:2px solid var(--nbc-gold); outline-offset:2px; }

/* ---- the WhatsApp hand-off ---- */
.nbc__wa{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
  padding:11px 14px;
  background:var(--nbc-wa);
  color:#0B2E17;
  font-size:13.4px; font-weight:600; letter-spacing:.01em;
  text-decoration:none;
  border-radius:11px;
  box-shadow:0 3px 10px rgba(37,211,102,.30);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nbc__wa:hover{
  background:#1FBE5B; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(37,211,102,.36);
}
.nbc__wa:active{ transform:translateY(0); }
.nbc__wa:focus-visible{ outline:2px solid #0B2E17; outline-offset:2px; }
.nbc__wa svg{ width:17px; height:17px; flex:none; }

/* ---- quick-reply chips ---- */
.nbc__chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px;
  max-width:96%;
}
.nbc__chip{
  padding:6px 12px;
  font-family:inherit; font-size:12.6px; font-weight:400;
  color:var(--nbc-gold);
  background:rgba(169,128,63,.07);
  border:1px solid var(--nbc-gold-2);
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .16s ease;
}
.nbc__chip:hover{ background:var(--nbc-gold); color:#FBF6EF; }
.nbc__chip:active{ transform:scale(.97); }
.nbc__chip:focus-visible{ outline:2px solid var(--nbc-gold); outline-offset:2px; }

/* answered rounds fade back and stop responding — history, not controls */
.nbc__chips.is-done{ opacity:.42; }
.nbc__chips.is-done .nbc__chip{ pointer-events:none; cursor:default; }

/* ---- typing indicator ---- */
.nbc__typing{
  display:flex; align-items:center; gap:4px;
  padding:13px 15px;
}
.nbc__typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--nbc-gold-2);
  animation:nbc-dot 1.1s ease-in-out infinite;
}
.nbc__typing span:nth-child(2){ animation-delay:.16s; }
.nbc__typing span:nth-child(3){ animation-delay:.32s; }
@keyframes nbc-dot{
  0%, 60%, 100%{ transform:translateY(0);    opacity:.45; }
  30%          { transform:translateY(-4px); opacity:1; }
}

/* ---- composer ---- */
.nbc__form{
  flex:none;
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 4px;
  background:var(--nbc-cream);
  border-top:1px solid var(--nbc-line);
}
.nbc__input{
  flex:1 1 auto; min-width:0;
  padding:11px 14px;
  font-family:inherit; font-size:13.8px; font-weight:300;
  color:var(--nbc-ink);
  background:var(--nbc-card);
  border:1px solid var(--nbc-line);
  border-radius:999px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.nbc__input::placeholder{ color:var(--nbc-muted); }
.nbc__input:focus{
  outline:none;
  border-color:var(--nbc-gold-2);
  box-shadow:0 0 0 3px rgba(169,128,63,.12);
}
.nbc__send{
  width:40px; height:40px; flex:none;
  border:0; border-radius:50%;
  background:var(--nbc-gold); color:#FBF6EF;
  cursor:pointer; display:grid; place-items:center;
  transition:background .18s ease, transform .16s ease;
}
.nbc__send:hover{ background:#8A6733; }
.nbc__send:active{ transform:scale(.94); }
.nbc__send:focus-visible{ outline:2px solid var(--nbc-dk); outline-offset:2px; }
.nbc__send svg{ width:18px; height:18px; }

.nbc__note{
  flex:none; margin:0;
  padding:0 12px 9px;
  background:var(--nbc-cream);
  font-size:10.6px; font-weight:300; letter-spacing:.02em;
  color:var(--nbc-muted); text-align:center;
}

/* =========================================================
   PHONES — a sheet rising from the launcher, not a takeover
   ========================================================= */
@media (max-width: 520px){
  .nbc{ right:12px; bottom:12px; gap:10px; }

  .nbc__panel{
    /* Anchored to the bottom and bounded, so the page stays visible
       above it — a chat window, not a full-screen interstitial. It is
       positioned rather than sized by the flex column so that a long
       transcript can never push the launcher off-screen.

       No `top`: setting one would stretch the panel corner to corner
       and swallow the whole screen again.                            */
    position:fixed;
    left:10px; right:10px; bottom:78px; top:auto;
    width:auto;

    height:min(66vh, 440px);
    max-height:calc(100vh - 100px);
  }

  /* dvh tracks the browser chrome as it collapses, and keeps the panel
     off the on-screen keyboard. Ignored by browsers that lack it, which
     fall back to the vh values above. */
  @supports (height: 100dvh){
    .nbc__panel{
      height:min(66dvh, 440px);
      max-height:calc(100dvh - 100px);
    }
  }

  .nbc__launcher{ width:54px; height:54px; }
  .nbc__bubble{ max-width:90%; font-size:14.2px; }

  /* a little tighter, to keep the shorter transcript area useful */
  .nbc__log{ padding:13px 12px 5px; gap:9px; }
  .nbc__head{ padding:10px 10px 10px 13px; }
  .nbc__avatar{ width:32px; height:32px; font-size:11.5px; }
  .nbc__note{ padding:0 12px 7px; }
}

/* A phone in landscape is ~740px wide, so it misses the block above and
   uses the default panel — whose `calc(100dvh - 116px)` already leaves
   room for the launcher. All it needs is the footnote out of the way, to
   buy back a line of transcript on a very short viewport. */
@media (max-height: 460px){
  .nbc__note{ display:none; }
}

/* iOS zooms the page in when a focused input is under 16px */
@media (max-width: 520px) and (pointer: coarse){
  .nbc__input{ font-size:16px; }
}

/* =========================================================
   Respect the visitor's motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .nbc__panel, .nbc__launcher, .nbc__ico, .nbc__chip, .nbc__wa, .nbc__link{
    transition-duration:.01ms;
  }
  .nbc__launcher::after,
  .nbc__row.is-new,
  .nbc__typing span{ animation:none; }
  .nbc__typing span{ opacity:.6; }
}

/* Printing a page should not print the widget */
@media print{ .nbc{ display:none; } }

/* =========================================================
   THE EXISTING FLOATING WHATSAPP BUTTON
   ---------------------------------------------------------
   .fab--chat lives in the same bottom-right corner as the launcher, and
   two chat icons side by side read as a mistake. The assistant offers
   WhatsApp itself — with the visitor's name, number and unit interest
   already filled in — so it replaces that shortcut rather than sitting
   next to it. The .fab--call button on the left is untouched.

   To bring the old button back, delete this one rule. To keep both
   instead, change it to  .fab--chat{ bottom:calc(18px + 74px); }  so it
   stacks above the launcher.
   ========================================================= */
.fab--chat{ display:none; }