/* PsycheGym Front-Desk Olive — shared nav-page widget styles.
   Extracted verbatim from index.html so the fab/panel look identical everywhere. */

/* ── HOMEPAGE OLIVE ── */
/* Olive trigger: via Meet Olive button in Spotter section */

/* Floating Olive butterfly — bottom right */
.pg-olive-fab{
  position:fixed;
  bottom:2.5rem;right:2.5rem;
  z-index:10000;
  background:none;
  border:none;
  cursor:pointer;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  padding:.5rem;
  filter:drop-shadow(0 8px 24px rgba(74,94,48,.35));
  animation:pg-bfly-float 5s ease-in-out infinite;
  transition:bottom .6s cubic-bezier(.34,1.56,.64,1), right .6s cubic-bezier(.34,1.56,.64,1), filter .3s;
}
/* Cream halo so Olive is visible on any background */
.pg-olive-fab::before{
  content:'';
  position:absolute;
  width:96px; height:96px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(247,244,239,.82) 30%, rgba(247,244,239,0) 75%);
  pointer-events:none;
  z-index:-1;
  top:50%; left:50%;
  transform:translate(-50%,-58%);
}
/* Universal hero-center state — desktop AND mobile */
/* Mobile hero: centered, above gym lines */
/* Mobile hero: left of gym label, below body copy */
.pg-olive-fab.pg-fab-hero{
  bottom:22vh; left:4%;
  right:auto; transform:none;
  transition:none;
}
/* Desktop hero: left of gym tag lines, in blank space */
@media(min-width:769px){
  .pg-olive-fab.pg-fab-hero{
    bottom:44vh; left:14%;
    right:auto; transform:none;
    transition:none;
  }
}
.pg-olive-fab:hover{
  filter:drop-shadow(0 12px 32px rgba(74,94,48,.5));
  animation:pg-bfly-float 5s ease-in-out infinite;
}
.pg-olive-fab:hover .pg-bfly-left,.pg-olive-fab:hover .pg-bfly-right{
  animation-play-state:paused;
}

.pg-olive-butterfly{ width:72px;height:auto;display:block; }
.pg-bfly-left{
  transform-origin:50px 44px;
  animation:pg-bfly-beat .85s ease-in-out infinite;
}
.pg-bfly-right{
  transform-origin:50px 44px;
  animation:pg-bfly-beat .85s ease-in-out infinite;
}
.pg-olive-fab-label{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;font-weight:300;font-style:italic;
  color:#4a5e30;letter-spacing:.04em;
  opacity:1;
  white-space:nowrap;
}
.pg-olive-fab.pg-fab-hero .pg-olive-fab-label{ display:none; }
@keyframes pg-bfly-beat{
  0%,100%{ transform:scaleX(1); }
  45%{ transform:scaleX(0.06); }
  50%{ transform:scaleX(0.06); }
}
@keyframes pg-bfly-float{
  0%  { transform:translate(0,0) rotate(-2deg); }
  15% { transform:translate(-10px,-14px) rotate(3deg); }
  30% { transform:translate(6px,-8px) rotate(-1deg); }
  45% { transform:translate(-6px,-18px) rotate(4deg); }
  60% { transform:translate(8px,-10px) rotate(-3deg); }
  75% { transform:translate(-4px,-6px) rotate(2deg); }
  100%{ transform:translate(0,0) rotate(-2deg); }
}


/* ── Olive scroll cue (under butterfly, hero state only) ── */
.pg-olive-scroll-cue{
  display:none;
  font-family:'Mulish',sans-serif;
  font-size:.75rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(46,61,26,.8);
  animation:pg-cue-bounce 1.6s ease-in-out infinite;
  pointer-events:none;
}
.pg-olive-fab.pg-fab-hero .pg-olive-scroll-cue{ display:block; }
@keyframes pg-cue-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}
/* hint visible on all widths */

/* Overlay backdrop */
.pg-olive-overlay{
  /* Front desk is now a side drawer that lets the woman see the site while she talks to Olive.
     No covering overlay, no blur — the page stays visible and interactive beside the panel. */
  display:none !important;
}

/* Panel — right-side drawer (elegant, matches the in-room Olive panel) */
.pg-olive-panel{
  position:fixed;
  right:0;top:0;bottom:0;
  z-index:10002;
  width:min(420px,100vw);
  background:rgba(252,248,242,.97);
  backdrop-filter:blur(12px);
  border-left:1px solid rgba(176,120,48,.18);
  box-shadow:-8px 0 40px rgba(44,26,14,.12);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.pg-olive-panel.open{
  transform:translateX(0);
}
/* When the front desk drawer is open on desktop, shrink the whole page into the
   left space instead of covering the right column — nothing stays hidden, the
   woman can scroll the entire site beside Olive. */
body{ transition:width .4s cubic-bezier(.25,.46,.45,.94); }
.pg-nav{ transition:right .4s cubic-bezier(.25,.46,.45,.94); }
@media(min-width:769px){
  /* Reduce the body WIDTH (not margin — base css is width:100%;overflow-x:hidden,
     so a margin just overflows and gets clipped, leaving content full-width). */
  body.olive-open{ width:calc(100% - 420px); }
  body.olive-open .pg-nav{ right:420px; }
}
@media(max-width:768px){
  /* Bottom sheet covers the lower ~58% — let the whole site scroll up into the visible band above it. */
  body.olive-open{ padding-bottom:58vh; }
}

/* Panel header */
.pg-olive-panel-hdr{
  padding:1.5rem 2rem 1.25rem;
  border-bottom:1px solid rgba(169,130,90,.1);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.pg-olive-panel-identity{display:flex;flex-direction:column;gap:.25rem;}
.pg-olive-panel-label{
  font-family:'Mulish',sans-serif;font-size:.65rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(107,127,74,.9);
}
.pg-olive-panel-desc{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;font-weight:300;font-style:italic;color:rgba(62,52,47,.55);
}
.pg-olive-panel-close{
  background:none;border:none;cursor:pointer;
  font-size:.85rem;color:rgba(62,52,47,.3);
  padding:0;line-height:1;transition:color .2s;
  font-family:'Mulish',sans-serif;letter-spacing:.1em;
}
.pg-olive-panel-close:hover{color:rgba(62,52,47,.6);}

/* Messages */
.pg-olive-msgs{
  flex:1;overflow-y:auto;
  padding:1.75rem 2rem;
  display:flex;flex-direction:column;gap:1.5rem;
}
.pg-olive-msg{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.15rem;font-weight:300;line-height:1.75;
  color:#2F2925;
}
.pg-olive-msg.user{
  font-family:'Mulish',sans-serif;
  font-size:.88rem;font-weight:300;font-style:italic;
  color:rgba(62,52,47,.55);
  padding-left:2rem;border-left:2px solid rgba(169,130,90,.3);
}
.pg-olive-msg a{
  color:#4a5e30;text-decoration:none;
  border-bottom:1px solid rgba(74,94,48,.35);
  transition:border-color .2s;
}
.pg-olive-msg a:hover{border-color:rgba(74,94,48,.7);}

/* Divider before input */
.pg-olive-rule{height:1px;background:rgba(169,130,90,.1);margin:0 2rem;}

/* Input row */
.pg-olive-input-row{
  display:flex;align-items:center;gap:.75rem;
  padding:1.1rem 2rem 1.25rem;
}
.pg-olive-input{
  flex:1;
  font-family:'Mulish',sans-serif;font-size:.9rem;font-weight:300;
  color:#3E342F;
  border:none;background:transparent;outline:none;
  border-bottom:1px solid rgba(169,130,90,.25);
  padding:.5rem 0;
}
.pg-olive-input::placeholder{color:rgba(62,52,47,.3);}
.pg-olive-input:focus{border-bottom-color:rgba(107,127,74,.6);}
.pg-olive-send{
  background:none;border:none;cursor:pointer;
  font-family:'Mulish',sans-serif;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(107,127,74,.8);padding:0;transition:color .2s;
}
.pg-olive-send:hover{color:#4a5e30;}
.pg-olive-typing{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1rem;font-style:italic;color:rgba(62,52,47,.35);
  padding:0 2rem 1rem;
  display:none;
}
.pg-olive-typing.show{display:block;}
.pg-olive-send{background:none;border:none;cursor:pointer;font-size:1.1rem;color:rgba(107,127,74,.7);padding:0 .2rem;}

@media(max-width:768px){
  /* Olive — mobile */
  .pg-olive-fab{
    bottom:5.5rem;right:1.25rem;
    padding:.35rem;
    transition:bottom .6s cubic-bezier(.34,1.56,.64,1), right .6s cubic-bezier(.34,1.56,.64,1);
  }
  /* .pg-fab-hero handled universally above */
  .pg-olive-butterfly{ width:60px; }
  .pg-olive-fab-label{ font-size:.88rem; }

  .pg-olive-panel{
    /* Bottom sheet on mobile */
    top:auto;bottom:0;left:0;right:0;
    width:100vw;
    height:58vh;max-height:58vh;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.25,.46,.45,.94);
    border-radius:16px 16px 0 0;
    border-left:none;border-right:none;border-bottom:none;
    border-top:1px solid rgba(169,130,90,.18);
    overflow:hidden;
  }
  .pg-olive-panel.open{
    transform:translateY(0);
  }
  .pg-olive-panel-hdr{
    padding:1.25rem 1.5rem 1rem;
  }
  .pg-olive-msgs{
    padding:1.25rem 1.5rem;
    /* account for iOS virtual keyboard */
    max-height:calc(58vh - 140px);
  }
  .pg-olive-msg{ font-size:1.05rem;line-height:1.7; }
  .pg-olive-msg.user{ font-size:.84rem;padding-left:1.25rem; }
  .pg-olive-rule{ margin:0 1.5rem; }
  .pg-olive-input-row{ padding:1rem 1.5rem 1.5rem; }
  .pg-olive-input{
    font-size:16px; /* prevents iOS zoom on focus */
  }
  .pg-olive-typing{ padding:0 1.5rem .75rem; }
}