/* Cielo concierge. The arch panel, tap first. Source of truth is tools/chat/chat.css; build.py copies it to public/chat.css.
   Same palette and type as the site: sand, clay, palm green, gold on dark, Cormorant for the voice, Jost for everything read quickly.
   Motion follows Apple's: springs (not fixed easing), transform and opacity only, press feedback on pointer down, interruptible. */
@property --r{syntax:"<length>";inherits:true;initial-value:200px}
.cc{--r:calc(var(--w)/2);transition:--r .4s cubic-bezier(.32,.72,0,1);--g:#243529;--g2:#2f4438;--paper:#f1e5d2;--gold:#e2b77a;--clay:#b4522f;--clay-d:#9c4426;--ink:#2a211a;--w:min(400px,calc(100vw - 24px));
    /* a spring with a small overshoot (about 500ms) and a quicker one (about 280ms), sampled for linear() */
    --spring:linear(0,.0069 1.15%,.026 2.3%,.1135 5.18%,.2229 7.78%,.5977 15.84%,.9228,.9676 28.8%,1.0032 31.68%,1.046 42.05%,1.0118 61.63%,1.0025 69.41%,.9992 99.94%);
    --snap:linear(0,.012,.049,.107,.185,.278,.383,.493,.601,.702,.791,.865,.924,.967,.995,1.013,1.019,1.016,1.009,1.003,1);
    --out:cubic-bezier(.32,.72,0,1);
    position:fixed;z-index:70;right:0;bottom:0;font:400 16px/1.45 'Jost',system-ui,-apple-system,sans-serif;color:var(--paper)}
@supports not (animation-timing-function:linear(0,1)){.cc{--spring:cubic-bezier(.34,1.3,.64,1);--snap:cubic-bezier(.3,1.15,.5,1)}}
.cc *{box-sizing:border-box;margin:0}
.cc button,.cc input,.cc textarea{font:inherit;color:inherit}
.cc button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cc [hidden]{display:none!important}
.cc :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cc-launch,.cc-big,.cc-chip,.cc-send,.cc-askbtn,.cc-ib,.cc-tbtn{transition:transform .55s var(--spring),background-color .2s ease,border-color .2s ease,opacity .25s ease,color .2s ease}
.cc .pressed{transform:scale(.955)!important;transition-duration:.1s,.2s,.2s,.25s,.2s;transition-timing-function:var(--out)}

/* launcher */
.cc-launch{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;
  min-height:58px;padding:0 20px 0 8px;border:1px solid rgba(226,183,122,.55);border-radius:999px;background:var(--g);
  font:500 15px/1 'Jost',sans-serif;letter-spacing:.02em;box-shadow:0 12px 34px rgba(36,53,41,.5);
  opacity:0;transform:translate3d(0,18px,0) scale(.9);transition-duration:.7s,.2s,.2s,.4s,.2s}
.cc.ready .cc-launch{opacity:1;transform:none}
.cc.open .cc-launch{opacity:0;transform:scale(.6);pointer-events:none;transition-duration:.3s,.2s,.2s,.2s,.2s;transition-timing-function:var(--out)}
.cc-av{position:relative;width:42px;height:42px;border-radius:50%;flex:none;background:#1c2a20;border:1px solid rgba(226,183,122,.7);display:grid;place-items:center}
.cc-av:before{content:"";width:17px;height:22px;background:linear-gradient(180deg,#f6ecd9,var(--gold));-webkit-mask:url(/assets/symbol.svg) center/contain no-repeat;mask:url(/assets/symbol.svg) center/contain no-repeat}
.cc-av:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(226,183,122,.55);animation:cc-pulse 2.8s ease-out infinite}
.cc-tag{font:500 9px/1 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(226,183,122,.65);border-radius:99px;padding:4px 7px}
.cc-launch .cc-tag{margin-left:2px}

/* the teaser that pops over the launcher */
.cc-teaser{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));width:min(290px,calc(100vw - 32px));
  background:#f8f3e9;color:var(--ink);border-radius:20px 20px 6px 20px;box-shadow:0 16px 44px rgba(0,0,0,.28);
  transform-origin:100% 100%;transform:translate3d(0,14px,0) scale(.55);opacity:0;visibility:hidden;
  transition:transform .3s var(--out),opacity .2s ease,visibility 0s .3s}
.cc-teaser.show{transform:none;opacity:1;visibility:visible;transition:transform .7s var(--spring),opacity .25s ease,visibility 0s}
.cc-tbtn{display:block;width:100%;border:0;background:none;text-align:left;padding:16px 48px 16px 18px;border-radius:inherit;
  font:400 22px/1.12 'Cormorant Garamond',Georgia,serif;color:var(--ink)}
.cc-tbtn em{font-style:italic;color:var(--clay)}
.cc-tbtn small{display:block;margin-top:8px;font:500 12px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.cc-tx{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:24px;line-height:44px;border-radius:50%;opacity:.55}
.cc-tx:hover{opacity:1}

/* the panel: Cielo's arch. The shell carries the shadow and the motion; .cc-clip does the rounding, so the corners stay clean while it moves. */
.cc-panel{padding:0;position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:var(--w);height:min(740px,calc(100dvh - 24px));
  border-radius:var(--r) var(--r) 28px 28px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform-origin:100% 100%;transform:translate3d(0,8px,0) scale(.3);opacity:0;visibility:hidden;will-change:transform,opacity;
  transition:transform .34s var(--out),opacity .2s ease .06s,visibility 0s .34s}
.cc.open .cc-panel{transform:none;opacity:1;visibility:visible;transition:transform .66s var(--spring),opacity .2s ease,visibility 0s}
.cc-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  clip-path:inset(0 round var(--r) var(--r) 28px 28px);transform:translateZ(0);
  background:radial-gradient(70% 34% at 50% 15%,rgba(226,183,122,.34),rgba(226,183,122,0) 72%),radial-gradient(75% 30% at 50% 104%,rgba(226,183,122,.24),rgba(226,183,122,0) 70%),var(--g)}


.cc-hero{position:relative;flex:none;height:96px}
.cc-hero:before{content:"";position:absolute;left:50%;top:-10px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,183,122,.38),rgba(226,183,122,0));animation:cc-glow 5s ease-in-out infinite}
.cc-mark{position:absolute;left:50%;top:8px;height:54px;aspect-ratio:.982;transform:translateX(-50%);opacity:0;transition:opacity .45s ease;
  background:linear-gradient(180deg,#f8efdd,var(--gold) 70%);-webkit-mask:url(/assets/chat-mark.svg) center/contain no-repeat;mask:url(/assets/chat-mark.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 16px rgba(226,183,122,.55))}
.cc-bigmark{display:block;width:100px;height:102px;margin:0 auto 4px;background:linear-gradient(180deg,#f8efdd,var(--gold) 70%);-webkit-mask:url(/assets/chat-mark.svg) center/contain no-repeat;mask:url(/assets/chat-mark.svg) center/contain no-repeat;filter:drop-shadow(0 0 16px rgba(226,183,122,.55))}
/* The footer folds away (it does not vanish), so the buttons above it ease down into the space instead of jumping. */
.cc-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(44px,15%,64px) 6px;min-height:60px}
.cc-bar .mid{position:absolute;left:0;right:0;bottom:8px;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.cc-bar .ttl{font:400 27px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.01em}
.cc-bar .sub2{display:flex;align-items:center;gap:7px;font:500 10.5px/1 'Jost',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(241,229,210,.72)}
.cc-bar .cc-tag{padding:3px 6px;font-size:8.5px}
.cc .cc-ib{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;font-size:26px;font-weight:300;line-height:1;color:rgba(241,229,210,.9)}
.cc-ib:active,.cc-ib.pressed{background:rgba(241,229,210,.14)}
.cc-ib[hidden]{display:grid!important;visibility:hidden}
.cc-main{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column}

/* home */
.cc-home{flex:1;overflow:auto;padding:6px 20px 20px;text-align:center;overscroll-behavior:contain}
.cc-home:not([hidden]){animation:cc-fade .4s ease backwards}
.cc.open .cc-home:not([hidden])>*{animation:cc-up .7s var(--spring) backwards;animation-delay:calc(140ms + var(--i,0)*55ms)}
.cc-home h2{font:400 clamp(28px,8vw,34px)/1.06 'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.cc-home h2 i{color:var(--gold)}
.cc-home .sub{font-size:15px;color:rgba(241,229,210,.82);margin:8px 0 14px}
.cc-big{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:58px;padding:12px 16px;margin-bottom:9px;
  border:1px solid rgba(241,229,210,.3);border-radius:16px;background:rgba(241,229,210,.09)}
.cc-big b{display:block;font:500 16px/1.25 'Jost',sans-serif}
.cc-big span{display:block;font-size:13px;color:rgba(241,229,210,.78);line-height:1.3}
.cc-big em{font:400 24px/1 'Cormorant Garamond',serif;color:var(--gold);transition:transform .55s var(--spring)}
.cc-big:hover{background:rgba(241,229,210,.14)}
.cc-big:hover em{transform:translateX(4px)}
.cc-big.hot{background:var(--clay);border-color:var(--clay)}
.cc-big.hot:hover{background:var(--clay-d)}
.cc-big.hot span{color:rgba(255,255,255,.88)}
.cc-big.hot em{color:#fff}
.cc .cc-askbtn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:50px;margin-top:12px;padding:0 5px 0 18px;border:0;border-radius:99px;
  background:#f8f3e9;color:#6b5d4f;font-size:15px;text-align:left}
.cc-askbtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-askbtn i{width:40px;height:40px;border-radius:50%;background:var(--clay);display:grid;place-items:center;font-style:normal;font-size:20px;color:#fff}
.cc-ask{display:flex;gap:8px;margin-top:12px}
.cc .cc-in{width:100%;min-height:50px;padding:0 16px;border:1px solid transparent;border-radius:14px;background:#f8f3e9;color:var(--ink);font-size:16px}
.cc .cc-in::placeholder{color:#7d6f60;font-size:15px}
.cc .cc-in:focus,.cc .cc-in:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(226,183,122,.28)}
.cc-ask .cc-in{border-radius:99px;flex:1;min-width:0}
.cc-send{flex:none;width:50px;height:50px;border-radius:50%;border:0;background:var(--clay);display:grid;place-items:center;font-size:20px;color:#fff}
.cc-send:hover{background:var(--clay-d)}

/* thread */
.cc-thread{flex:1;min-height:0;display:flex;flex-direction:column}
.cc-thread:not([hidden]){animation:cc-fade .4s ease backwards}
.cc-log{flex:1 1 0;min-height:84px;
  overflow:auto;padding:8px 18px 6px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.cc-m{max-width:88%;padding:11px 15px;border-radius:16px;font-size:16px;line-height:1.4;overflow-wrap:anywhere;white-space:pre-wrap;text-wrap:pretty;
  animation:cc-bubble .6s var(--spring) backwards}
.cc-m.bot{align-self:flex-start;transform-origin:0 100%;background:rgba(241,229,210,.11);border:1px solid rgba(241,229,210,.16);border-bottom-left-radius:5px}
.cc-m.me{align-self:flex-end;transform-origin:100% 100%;background:var(--clay);color:#fff;border-bottom-right-radius:5px}
.cc-m.ok{border-color:rgba(226,183,122,.6);box-shadow:0 0 28px rgba(226,183,122,.2)}
.cc-m.err{align-self:center;background:rgba(141,47,22,.35);border:1px solid rgba(226,120,90,.5);text-align:center;font-size:15px}
.cc-typing{display:inline-flex;align-items:center;gap:5px;padding:13px 16px}
.cc-typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.35;animation:cc-dot 1.2s ease-in-out infinite}
.cc-typing i:nth-child(2){animation-delay:.16s}.cc-typing i:nth-child(3){animation-delay:.32s}
.cc-tl{margin-left:8px;font:500 14px/1 'Jost',sans-serif;letter-spacing:.02em;color:var(--gold);animation:cc-fade .5s ease .3s backwards}
.cc-ev{align-self:stretch;background:rgba(241,229,210,.09);border:1px solid rgba(241,229,210,.2);border-radius:14px;padding:12px 14px;animation:cc-bubble .6s var(--spring) backwards}
.cc-ev b{display:block;font:500 16px/1.25 'Jost',sans-serif}
.cc-ev span{display:block;font-size:14px;color:var(--gold);margin-top:2px}

.cc-dock{flex:0 1 auto;max-height:80%;overflow:auto;padding:14px 18px 6px;
  background:linear-gradient(180deg,rgba(20,32,24,0),rgba(20,32,24,.5) 26px);overscroll-behavior:contain;
  transition:height .45s cubic-bezier(.32,.72,0,1)}
.cc-dock.wait>*{opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .18s ease,transform .25s var(--out);animation:none}
.cc-dock>*{animation:cc-up .6s var(--spring) backwards}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px}
.cc-chips.inlog{align-self:stretch;flex:none;flex-wrap:nowrap;overflow-x:auto;margin:2px -18px 4px;padding:0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cc-chips.inlog::-webkit-scrollbar{display:none}
.cc-chips.inlog .cc-chip{flex:none}
.cc-chip{position:relative;overflow:hidden;min-height:46px;padding:0 18px;border-radius:99px;border:1px solid rgba(226,183,122,.7);background:transparent;color:var(--paper);
  font:500 15px/1 'Jost',sans-serif;text-decoration:none;display:inline-flex;align-items:center;
  animation:cc-up .6s var(--spring) backwards;animation-delay:calc(var(--i,0)*45ms)}
.cc-chip:hover{background:rgba(226,183,122,.18)}
.cc-chip.go{background:var(--clay);border-color:var(--clay);color:#fff}
.cc-chip.go:hover{background:var(--clay-d)}
.cc-chip.soft{border-color:rgba(241,229,210,.3);color:rgba(241,229,210,.88)}
.cc-chips.done .cc-chip{pointer-events:none}
.cc-chips.done .cc-chip:not(.picked){opacity:.28;transform:scale(.94)}
.cc-chips .cc-chip.picked{background:var(--clay);border-color:var(--clay);color:#fff;transform:scale(1.05)}
.cc-chip.busy{opacity:.92}
.cc-chip.busy:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-100%);animation:cc-shim 1.15s ease-in-out infinite}

.cc-form{display:grid;gap:10px}
.cc-f label{display:block;font:500 12.5px/1 'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:2px 0 6px}
.cc-chk{text-transform:none;letter-spacing:0;font-weight:400;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.35;color:rgba(241,229,210,.9);padding:4px 0}
.cc-chk input{flex:none;width:24px;height:24px;margin-top:1px;accent-color:var(--clay)}
.cc-chk span small{display:block;color:rgba(241,229,210,.7);font-size:13px;margin-top:2px}
.cc-err{font-size:14.5px;color:#ffb9a3;min-height:0}
.cc-fine{font-size:12.5px;color:rgba(241,229,210,.66);text-align:center;margin-top:8px}
.cc-fine a{color:var(--gold)}
/* the text message box: its legal line sits under it, left aligned like the words above it */
.cc-sms{margin-top:2px}
.cc-sms .cc-fine{text-align:left;margin-top:4px}

/* always a way to change your mind */
.cc-foot{flex:none;display:flex;justify-content:space-between;align-items:flex-start;overflow:hidden;height:calc(52px + env(safe-area-inset-bottom,0px));padding:0 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(20,32,24,.5);
  transition:height .4s cubic-bezier(.32,.72,0,1),padding .4s cubic-bezier(.32,.72,0,1),opacity .2s ease}
.cc-foot button{min-height:44px;padding:0 14px;border:0;background:none;border-radius:12px;font:500 14px/1 'Jost',sans-serif;letter-spacing:.02em;color:rgba(241,229,210,.8)}
.cc-foot button:hover{color:var(--gold)}
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
@keyframes cc-up{from{opacity:0;transform:translate3d(0,14px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes cc-bubble{from{opacity:0;transform:translate3d(0,10px,0) scale(.9)}to{opacity:1;transform:none}}
@keyframes cc-dot{0%,70%,100%{opacity:.35;transform:none}35%{opacity:1;transform:translate3d(0,-3px,0)}}
@keyframes cc-shim{to{transform:translateX(100%)}}
@keyframes cc-glow{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes cc-pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
@media (min-width:700px){.cc-panel{right:20px;bottom:20px}.cc-launch{right:22px;bottom:22px}.cc-teaser{right:22px;bottom:92px}}
@media (max-height:700px){.cc-home .sub{display:none}.cc-bigmark{width:72px;height:74px;margin-bottom:0}.cc-home h2{font-size:28px}.cc-big{min-height:54px;margin-bottom:8px}}
@media (prefers-reduced-motion:reduce){
  .cc *,.cc *:before,.cc *:after,.cc-panel,.cc-teaser,.cc-launch{animation:none!important;transition-duration:.01ms!important}
  .cc-av:after{display:none}
}
html.cc-lock{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.cc-m small{display:block;margin-top:6px;font-size:12px;line-height:1.4;letter-spacing:.01em;opacity:.62}

/* Phones: the typing shape. Set when the question box or a form shows (chat.js syncTyping), never by the keyboard itself,
   so the keys come and go under a panel that does not move. The arch flattens a little to give the box room. */
.cc.typing{--r:64px}
.cc.typing .cc-hero{height:58px}
.cc.typing .cc-mark{opacity:0}
.cc.asking .cc-foot,.cc.forming .cc-foot{height:0;padding-bottom:0;opacity:0;pointer-events:none}
.cc.typing .cc-dock{max-height:100%}
.cc.typing .cc-log{min-height:48px}
@media (max-width:699px){.cc.open .cc-panel{transition:transform .66s var(--spring),opacity .2s ease,visibility 0s,height .32s var(--out)}}

/* beta note and Report a bug */
.cc-beta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin-top:14px;font-size:13.5px;line-height:1.4;color:rgba(241,229,210,.78)}
.cc-beta .cc-tag{padding:3px 6px;font-size:8.5px}
.cc-beta button{white-space:nowrap;border:0;background:none;padding:8px 4px;color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-size:13.5px}
.cc .cc-ta{min-height:96px;padding:12px 16px;resize:none;line-height:1.4;display:block}
.cc-foot button[data-foot="bug"]{color:rgba(226,183,122,.9)}
/* shorter phones: the four choices, the question box and the beta line all fit without scrolling */
@media (max-width:699px) and (max-height:900px){.cc-bigmark{width:60px;height:62px;margin-bottom:2px}.cc-home h2{font-size:28px}.cc-home .sub{margin:6px 0 10px}.cc-big{min-height:52px;padding:9px 16px;margin-bottom:8px}.cc .cc-askbtn{margin-top:8px}.cc-beta{margin-top:8px}}
/* phones: the page behind is dimmed while the chat is open, so the space between the chat and the keyboard is calm, not cut-off buttons */
@media (max-width:699px){
  .cc:before{content:"";position:fixed;inset:0;background:rgba(18,26,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s ease}
  .cc.open:before{opacity:1;pointer-events:auto}
}
.cc-ev small{display:block;margin-top:6px;font-size:13px;color:#ffb9a3}
.cc-ev .cc-evbtn{margin-top:10px;min-height:42px;animation:none}
.cc .cc-primer{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px;pointer-events:none}