/* Leo chat widget (buttons-only test version).
   Needs the page to load Fraunces (for the name "Leo") and Figtree (for text), as the live site already does.
   Everything is scoped under .leo so it cannot change the page around it. */

.leo{
  --leo-navy:#06243C; --leo-navy-2:#0C3150;
  --leo-gold:#C89143; --leo-gold-light:#E9BD70; --leo-gold-deep:#996124;
  --leo-paper:#FFF9E8; --leo-white:#fff; --leo-muted:#3F566A;
  --leo-line:rgba(6,36,60,.14); --leo-control:rgba(6,36,60,.6);
  --leo-ease:cubic-bezier(.23,1,.32,1);
  scrollbar-color:rgba(6,36,60,.28) transparent;
  --leo-head-font:'Fraunces',Georgia,serif;
  --leo-body-font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font:400 16px/1.5 var(--leo-body-font);
  color:var(--leo-navy);
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  -webkit-font-smoothing:antialiased;
}
.leo *,.leo *::before,.leo *::after{box-sizing:border-box;margin:0;padding:0}
.leo [hidden]{display:none!important}
.leo svg{display:block;max-width:none}
.leo button,.leo input{font-family:inherit}
.leo :focus-visible{outline:3px solid var(--leo-gold-deep);outline-offset:2px}
.leo-head :focus-visible{outline-color:var(--leo-gold-light)}
.leo-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.leo ::selection{background:var(--leo-navy);color:var(--leo-gold-light)}
/* ---- launcher: a speech-bubble shape with a small tail, flat, no glow ---- */
.leo .leo-launcher{
  position:fixed;right:22px;bottom:22px;z-index:10000;
  width:66px;height:66px;border-radius:50% 50% 8px 50%;overflow:hidden;
  background:var(--leo-paper);border:3px solid var(--leo-navy);padding:0;cursor:pointer;
  transition:transform .16s var(--leo-ease);
  animation:leo-fade .18s var(--leo-ease);
}
.leo .leo-launcher svg{width:100%;height:100%}
.leo .leo-launcher:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .leo .leo-launcher:hover{transform:translateY(-2px)}
  .leo .leo-launcher:hover:active{transform:scale(.96)}
}

/* ---- panel: flat, navy outline, same family as the site's buttons ---- */
.leo .leo-panel{
  position:fixed;right:22px;bottom:22px;z-index:10000;
  width:396px;height:min(640px,calc(100vh - 140px));height:min(640px,calc(100dvh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--leo-paper);border:2px solid var(--leo-navy);border-radius:14px;
  transform-origin:100% 100%;
  animation:leo-open .2s var(--leo-ease);
}
.leo .leo-panel:focus{outline:none}

/* ---- header: navy with one flat facet, a thin gold strip below ---- */
.leo .leo-head{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:12px;flex:none;
  padding:13px 12px 13px 14px;
  background:var(--leo-navy);color:var(--leo-paper);
  border-bottom:3px solid var(--leo-gold);
}
.leo .leo-head::before{
  content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:58%;
  background:var(--leo-navy-2);clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
}
.leo .leo-head-av{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--leo-paper)}
.leo .leo-head-av svg{width:100%;height:100%}
.leo .leo-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.leo .leo-name{font:800 25px/1.05 var(--leo-head-font);color:#fff;letter-spacing:-.015em}
.leo .leo-tag{font:600 13px/1.2 var(--leo-body-font);color:var(--leo-gold-light);margin-top:3px}
.leo .leo-lang{display:flex;gap:2px;flex:none;padding:2px;border:1px solid rgba(255,249,232,.45);border-radius:9px}
.leo .leo-lang button{
  min-height:28px;padding:3px 10px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--leo-paper);font:600 13px/1.2 var(--leo-body-font);
  transition:background .14s ease,color .14s ease;
}
.leo .leo-lang button[aria-pressed="true"]{background:var(--leo-gold-light);color:var(--leo-navy)}
.leo .leo-close{
  flex:none;width:38px;height:38px;border-radius:10px;border:0;cursor:pointer;
  display:grid;place-items:center;background:transparent;color:var(--leo-paper);
  transition:background .14s ease,transform .14s var(--leo-ease);
}
.leo .leo-close:active{transform:scale(.94)}
.leo .leo-close svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .leo .leo-lang button:not([aria-pressed="true"]):hover{background:rgba(255,249,232,.16)}
  .leo .leo-close:hover{background:rgba(255,249,232,.16)}
}

/* ---- conversation ---- */
.leo .leo-log{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px 14px 10px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;
}
.leo .leo-log::-webkit-scrollbar{width:8px}
.leo .leo-log::-webkit-scrollbar-thumb{background:rgba(6,36,60,.25);border-radius:8px;border:2px solid var(--leo-paper)}
.leo .leo-log::-webkit-scrollbar-thumb:hover{background:rgba(6,36,60,.45)}
.leo .leo-msg{display:flex;align-items:flex-start;gap:8px;max-width:100%;animation:leo-pop .2s var(--leo-ease)}
.leo .leo-msg.visitor{justify-content:flex-end;padding-left:40px;margin-top:6px}
.leo .leo-av,.leo .leo-av-gap{flex:none;width:32px}
.leo .leo-av{height:32px;border-radius:50%;overflow:hidden;margin-top:1px;background:var(--leo-paper);border:1.5px solid var(--leo-navy)}
.leo .leo-av svg{width:100%;height:100%}
.leo .leo-bubble{
  max-width:calc(100% - 40px);padding:10px 15px;border-radius:14px;
  font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;
}
.leo .bot .leo-bubble{background:var(--leo-white);color:var(--leo-navy);border:1px solid var(--leo-line);border-top-left-radius:3px}
.leo .visitor .leo-bubble{max-width:100%;background:var(--leo-navy);color:var(--leo-paper);border-bottom-right-radius:3px;font-weight:500}

/* typing: three dots that breathe, no bounce */
.leo .leo-dots{display:flex;align-items:center;gap:5px;padding:16px 16px}
.leo .leo-dots i{width:6px;height:6px;border-radius:50%;background:var(--leo-navy);opacity:.25;animation:leo-dot 1.2s infinite ease-in-out}
.leo .leo-dots i:nth-child(2){animation-delay:.16s}
.leo .leo-dots i:nth-child(3){animation-delay:.32s}

/* ---- chips: topics are outlined, "go" actions take the site's arrow shape, Back/Main menu are quiet ---- */
.leo .leo-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 12px 40px}
.leo .leo-chip{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 16px;
  border:1.5px solid var(--leo-navy);border-radius:8px;cursor:pointer;
  background:var(--leo-white);color:var(--leo-navy);
  font:600 15px/1.2 var(--leo-body-font);text-decoration:none;text-align:left;
  transition:background .14s ease,color .14s ease,border-color .14s ease,transform .14s var(--leo-ease);
  animation:leo-pop .22s var(--leo-ease) backwards;
}
.leo .leo-chip:nth-child(2){animation-delay:40ms}
.leo .leo-chip:nth-child(3){animation-delay:80ms}
.leo .leo-chip:nth-child(4){animation-delay:120ms}
.leo .leo-chip:nth-child(n+5){animation-delay:160ms}
.leo .leo-chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .leo .leo-chip:hover{background:var(--leo-navy);color:var(--leo-paper)}
}
/* primary: flat navy with the arrow-shaped right edge (drawn on ::before so focus rings are not clipped) */
.leo .leo-chip.is-cta,.leo .leo-chip.is-link{
  background:transparent;border:0;color:var(--leo-paper);padding:10px 30px 10px 18px;border-radius:0;
}
.leo .leo-chip.is-cta::before,.leo .leo-chip.is-link::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--leo-navy);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);
  transition:background .14s ease;
}
.leo .leo-chip.is-cta:active,.leo .leo-chip.is-link:active{transform:scale(.97) translateX(1px)}
@media (hover:hover) and (pointer:fine){
  .leo .leo-chip.is-cta:hover,.leo .leo-chip.is-link:hover{background:transparent;transform:translateX(2px)}
  .leo .leo-chip.is-cta:hover::before,.leo .leo-chip.is-link:hover::before{background:var(--leo-gold-deep)}
}
/* quiet: Back and Main menu */
.leo .leo-chip.is-nav{
  background:transparent;border:1px solid var(--leo-line);color:var(--leo-muted);
  font-weight:500;font-size:14.5px;min-height:40px;padding:7px 14px;
}
@media (hover:hover) and (pointer:fine){
  .leo .leo-chip.is-nav:hover{background:rgba(6,36,60,.07);border-color:var(--leo-control);color:var(--leo-navy)}
}
.leo .leo-out{width:14px;height:14px;flex:none}

/* ---- text box ---- */
.leo .leo-form{
  display:flex;gap:8px;flex:none;align-items:center;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--leo-white);border-top:1px solid var(--leo-line);
}
.leo .leo-input{
  flex:1 1 auto;min-width:0;min-height:46px;padding:10px 14px;
  font:400 16px/1.3 var(--leo-body-font);color:var(--leo-navy);caret-color:var(--leo-gold-deep);
  background:var(--leo-paper);border:1.5px solid var(--leo-control);border-radius:10px;
  transition:border-color .14s ease,background .14s ease;
}
.leo .leo-input::placeholder{color:#506779;opacity:1}
.leo .leo-input:focus{outline:3px solid var(--leo-gold-deep);outline-offset:2px;border-color:var(--leo-navy);background:var(--leo-white)}
.leo .leo-send{
  flex:none;width:46px;height:46px;border-radius:10px;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--leo-navy);color:var(--leo-paper);
  transition:background .14s ease,transform .14s var(--leo-ease);
}
.leo .leo-send:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){ .leo .leo-send:hover{background:var(--leo-gold-deep)} }
.leo .leo-send svg{width:20px;height:20px}

/* ---- the small line under the typing box ---- */
.leo .leo-note{
  flex:none;padding:0 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--leo-white);color:var(--leo-muted);
  font:500 12.5px/1.35 var(--leo-body-font);text-align:center;
}
.leo .leo-form{padding-bottom:6px}
/* The text box is hidden except on the feedback screen; the note under it always shows. */
.leo .leo-form[hidden]{display:none}
.leo .leo-form[hidden] + .leo-note{padding-top:10px;border-top:1px solid var(--leo-line)}

/* ---- phones: full screen ---- */
@media (max-width:639px){
  .leo .leo-panel{inset:0;right:0;bottom:0;width:100%;height:100%;border:0;border-radius:0;transform-origin:50% 100%;animation-name:leo-open-phone}
  .leo .leo-launcher{right:16px;bottom:16px}
  .leo .leo-head{padding-top:calc(13px + env(safe-area-inset-top, 0px))}
  .leo .leo-bubble{font-size:16.5px}
}
@media (max-width:380px){
  .leo .leo-lang button{padding:3px 8px;font-size:12.5px}
  .leo .leo-name{font-size:23px}
}

/* ---- closed launcher: a small friendly hop, then a little head tilt now and then ---- */
.leo .leo-launcher{transform-origin:50% 100%}
.leo .leo-launcher.is-hop{animation:leo-hop .64s linear 1}
.leo .leo-launcher.is-tilt{animation:leo-tilt .9s linear 1;transform-origin:50% 60%}
/* up on ease-out, down on ease-in (gravity), a small squash as it lands */
@keyframes leo-hop{
  0%{transform:none;animation-timing-function:cubic-bezier(.4,0,.6,1)}
  14%{transform:translateY(0) scale(1.05,.93);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  42%{transform:translateY(-8px) scale(.98,1.03);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  68%{transform:translateY(0) scale(1.07,.91);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  84%{transform:scale(.99,1.02);animation-timing-function:ease-out}
  100%{transform:none}
}
@keyframes leo-tilt{
  0%{transform:none;animation-timing-function:cubic-bezier(.23,1,.32,1)}
  30%{transform:rotate(-7deg);animation-timing-function:ease-in-out}
  60%{transform:rotate(5deg);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  100%{transform:none}
}

/* ---- motion: short, ease-out, nothing bounces ---- */
@keyframes leo-open{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes leo-open-phone{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes leo-pop{from{opacity:0;transform:translateY(var(--leo-shift,6px))}to{opacity:1;transform:none}}
@keyframes leo-fade{from{opacity:0}to{opacity:1}}
@keyframes leo-dot{0%,70%,100%{opacity:.25}35%{opacity:.9}}
/* reduced motion: keep gentle fades (they help you notice new messages), drop all movement */
@media (prefers-reduced-motion:reduce){
  .leo{--leo-shift:0px}
  .leo .leo-panel{animation-name:leo-fade}
  .leo .leo-launcher.is-hop,.leo .leo-launcher.is-tilt{animation:none!important}
  .leo .leo-chip{animation-delay:0s!important}
  .leo *,.leo *::before,.leo *::after{transition-duration:.01ms!important}
  .leo .leo-chip:active,.leo .leo-launcher:active,.leo .leo-send:active,.leo .leo-close:active{transform:none}
}