/* Пили — the Maison Lea helper bot. Uses the palette tokens from styles.css. */

.pili { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 90; font-family: var(--body); color: var(--cocoa); }

/* ---------- Floating mascot button ---------- */
.pili__btn {
  position: relative; width: 68px; height: 68px; padding: 0; border: 0; background: none; cursor: pointer;
  display: block; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
/* white disc behind the mascot so it stands out on the blush pages and on photos */
.pili__btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 12px 28px -10px rgba(58, 38, 41, .38), 0 0 0 4px rgba(255, 253, 252, .55);
}
.pili__btn:hover { transform: translateY(-3px) scale(1.04); }
.pili__btn:active { transform: scale(.94); }
.pili__btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 4px; border-radius: 50%; }
.pili__btn > svg { position: absolute; left: 8%; top: 2%; width: 84%; height: 84%; overflow: visible; }
.pili__btn .pili__body { animation: pili-breathe 4.2s ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }
.pili__badge {
  position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mauve); color: var(--white); font: 700 11px/20px var(--body); text-align: center;
  box-shadow: 0 0 0 3px var(--white); scale: 0; transition: scale .3s cubic-bezier(.34, 1.56, .64, 1);
}
.pili.has-news .pili__badge { scale: 1; }
.pili.is-open .pili__btn { transform: scale(.9); }

/* blinking eyes + soft "thinking" wobble */
.pili__eye { animation: pili-blink 5.5s infinite; transform-origin: center; transform-box: fill-box; }
.pili__eye--r { animation-delay: .04s; }
.pili.is-thinking .pili__body { animation: pili-think .9s ease-in-out infinite; }
.pili__pupils { transition: transform .25s ease-out; }

/* hello hop when Пили greets a new visitor */
.pili.is-waving .pili__btn > svg { animation: pili-hop .7s cubic-bezier(.3, 1.6, .5, 1) 2; transform-origin: 50% 100%; }
@keyframes pili-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-9px) rotate(-8deg); }
  65% { transform: translateY(-3px) rotate(6deg); }
}
@keyframes pili-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .97); } }
@keyframes pili-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes pili-think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ---------- Speech bubble ----------
   Sits right above Пили, in the page margin, so it covers as little of the content as possible. */
.pili__bubble {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: min(290px, calc(100vw - 28px));
  display: grid; gap: 8px; padding: 12px 14px 14px 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 20px 20px 6px 20px;
  box-shadow: 0 22px 44px -20px rgba(58, 38, 41, .45), 0 2px 6px rgba(58, 38, 41, .06);
  cursor: pointer; text-align: left;
  opacity: 0; translate: 0 10px; scale: .94; transform-origin: 85% 100%; pointer-events: none;
  transition: opacity .3s ease, translate .45s cubic-bezier(.34, 1.4, .64, 1), scale .45s cubic-bezier(.34, 1.4, .64, 1);
}
/* little tail pointing down at Пили */
.pili__bubble::after {
  content: ""; position: absolute; right: 26px; bottom: -7px; width: 14px; height: 14px;
  background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  rotate: 45deg; border-bottom-right-radius: 3px;
}
.pili__bubble[hidden] { display: none; }
.pili__bubble.is-in { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.pili__bubble-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -4px; }
.pili__bubble-name {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 17px/1 var(--display); color: var(--mauve);
}
.pili__bubble-x {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: var(--shell);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s;
}
.pili__bubble-x svg { width: 13px; height: 13px; }
.pili__bubble-x:hover { background: var(--blush); color: var(--cocoa); }
.pili__bubble-text { margin: 0; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--cocoa); text-wrap: pretty; }
.pili__bubble-cta {
  justify-self: start; border: 0; border-radius: 999px; background: var(--mauve); color: var(--white);
  font: 700 13.5px/1 var(--body); padding: 10px 15px; cursor: pointer; transition: background .2s, translate .2s;
}
.pili__bubble:hover .pili__bubble-cta { background: var(--cocoa); translate: 2px 0; }

/* ---------- Chat panel ---------- */
.pili__panel {
  position: absolute; right: 0; bottom: 84px; width: min(380px, calc(100vw - 28px)); height: max(300px, min(600px, calc(100dvh - 210px - var(--bar-h, 0px)))); /* --bar-h: cookie bar (extras.js) lifts Пили */
  display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden;
  background: var(--shell); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 30px 70px -28px rgba(58, 38, 41, .45);
  transform-origin: 100% 100%; opacity: 0; scale: .92; translate: 0 12px; visibility: hidden;
  transition: opacity .25s ease, scale .4s cubic-bezier(.34, 1.4, .64, 1), translate .4s cubic-bezier(.34, 1.4, .64, 1), visibility 0s .4s;
}
.pili.is-open .pili__panel { opacity: 1; scale: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }

.pili__head {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
  background: linear-gradient(135deg, var(--blush), #F6E2DE); border-bottom: 1px solid var(--line);
}
.pili__ava { width: 42px; height: 42px; flex: none; }
.pili__ava svg { width: 100%; height: 100%; overflow: visible; }
.pili__title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pili__title strong { font-family: var(--display); font-weight: 400; font-size: 19px; }
.pili__title span { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pili__dot { width: 7px; height: 7px; border-radius: 50%; background: #7DB88A; box-shadow: 0 0 0 3px rgba(125, 184, 138, .22); }
.pili__icon {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 253, 252, .7);
  color: var(--cocoa); display: grid; place-items: center; cursor: pointer; transition: background .2s;
}
.pili__icon:hover { background: var(--white); }
.pili__icon svg { width: 16px; height: 16px; }

.pili__log { overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.pili__msg { display: flex; flex-direction: column; max-width: 86%; animation: pili-in .35s cubic-bezier(.2, .7, .2, 1) both; }
.pili__msg--bot { align-self: flex-start; }
.pili__msg--user { align-self: flex-end; align-items: flex-end; }
.pili__bub { padding: 10px 13px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pili__msg--bot .pili__bub { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.pili__msg--user .pili__bub { background: var(--mauve); color: var(--white); border-bottom-right-radius: 6px; }
.pili__time { font-size: 10.5px; color: var(--muted); margin: 3px 6px 0; opacity: .8; }
@keyframes pili-in { from { opacity: 0; translate: 0 8px; } }

.pili__typing { display: inline-flex; gap: 4px; padding: 14px 15px; }
.pili__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); animation: pili-dots 1.1s infinite; }
.pili__typing i:nth-child(2) { animation-delay: .15s; }
.pili__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pili-dots { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }

/* quick reply chips */
.pili__opts { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 2px; }
.pili__opt {
  border: 1px solid var(--rose); background: var(--white); color: var(--mauve);
  font: 600 13px/1.2 var(--body); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  animation: pili-in .35s cubic-bezier(.2, .7, .2, 1) both; transition: background .2s, color .2s, translate .2s;
}
.pili__opt:hover { background: var(--mauve); color: var(--white); translate: 0 -1px; }
.pili__opt--menu { border-style: dashed; color: var(--muted); border-color: var(--line); }

/* action cards (call / book / write) */
.pili__acts { display: grid; gap: 6px; width: 100%; }
.pili__act {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cocoa);
  background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  font: 600 13.5px/1.25 var(--body); cursor: pointer; text-align: left; transition: border-color .2s, translate .2s;
}
.pili__act:hover { border-color: var(--rose); translate: 0 -1px; }
.pili__act b { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blush); font-size: 15px; }
.pili__act small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.pili__act--main { background: var(--mauve); border-color: var(--mauve); color: var(--white); }
.pili__act--main b { background: rgba(255, 253, 252, .2); }
.pili__act--main small { color: var(--blush); }

/* input + channels */
.pili__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--white); }
.pili__field {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--shell);
  padding: 10px 14px; font: 14.5px var(--body); color: var(--cocoa);
}
.pili__field:focus { outline: none; border-color: var(--rose); }
.pili__send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--mauve); color: var(--white);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, scale .2s;
}
.pili__send:hover { background: var(--cocoa); }
.pili__send:active { scale: .92; }
.pili__send svg { width: 17px; height: 17px; }
.pili__channels { display: flex; justify-content: center; gap: 6px; padding: 0 12px 12px; background: var(--white); }
.pili__ch {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted);
  font: 600 12px var(--body); padding: 6px 10px; border-radius: 999px; transition: background .2s, color .2s;
}
.pili__ch:hover { background: var(--blush); color: var(--cocoa); }
.pili__ch { white-space: nowrap; }
.pili__ch svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 360px) { .pili__channels { gap: 0; padding-inline: 6px; } .pili__ch { padding-inline: 8px; } }

/* steps out of the way: booking modal, gallery lightbox and the mobile menu own the screen */
.pili { transition: opacity .3s ease, translate .35s cubic-bezier(.2, .7, .2, 1); }
body:has(.modal:not([hidden])) .pili,
body:has(.lightbox:not([hidden])) .pili { opacity: 0; pointer-events: none; translate: 0 16px; }
body:has(.nav-open) .pili:not(.is-open) { opacity: 0; pointer-events: none; }

/* phones: while the chat is open it is the only floating thing on screen */
@media (max-width: 760px) {
  body:has(.pili.is-open) .reach { opacity: 0; pointer-events: none; }
}

/* phones: while the visitor scrolls, Пили slides half out of view and fades */
@media (max-width: 760px) {
  .pili.is-tucked:not(.is-open) { opacity: .55; translate: 30px 0; }
  .pili.is-tucked .pili__bubble { opacity: 0; }
}

@media (max-width: 480px) {
  .pili__btn { width: 58px; height: 58px; }
  .pili__panel { bottom: 72px; height: calc(100dvh - 100px - var(--bar-h, 0px)); }
  .pili__bubble { width: min(290px, calc(100vw - 28px)); padding: 11px 12px 12px 14px; }
  .pili__bubble-text { font-size: 15px; }
  .pili__bubble::after { right: 21px; }
}
/* short screens (phones in landscape): no nudges, they would hide too much of the page */
@media (max-height: 520px) {
  .pili__bubble { display: none; }
  .pili__btn { width: 54px; height: 54px; }
  .pili__panel { bottom: 66px; height: calc(100dvh - 84px - var(--bar-h, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pili__btn .pili__body, .pili__eye, .pili.is-thinking .pili__body, .pili__typing i { animation: none; }
  .pili__msg, .pili__opt { animation: none; }
}