/* Пили — the Maison LÉA 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(--text); }

/* ---------- 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);
}
/* no disc: the mascot stands on its own, a soft drop shadow keeps it readable on photos */
.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: 24px; }
.pili__btn > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(119, 99, 84, .3)) drop-shadow(0 1px 1px rgba(119, 99, 84, .2)); }
/* the left arm waves now and then */
.pili__arm { transform-box: fill-box; transform-origin: 100% 100%; animation: pili-wave 6s ease-in-out infinite; }
@keyframes pili-wave { 0%, 22%, 100% { rotate: 0deg; } 5% { rotate: -22deg; } 10% { rotate: 6deg; } 15% { rotate: -16deg; } }
.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(119, 99, 84, .45), 0 2px 6px rgba(119, 99, 84, .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(--text);
}
.pili__bubble-x {
  width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: var(--shell);
  color: var(--text); 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(--text); }
.pili__bubble-text { margin: 0; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--text); 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(392px, calc(100vw - 28px)); height: max(300px, min(620px, calc(100dvh - 210px - var(--bar-h, 0px) - var(--dock-h, 0px)))); /* --bar-h: cookie bar, --dock-h: phone bottom dock (extras.js) lift Пили */
  display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden;
  background: var(--shell); border: 1px solid rgba(208, 185, 167, .55); border-radius: 28px;
  box-shadow: 0 40px 80px -32px rgba(119, 99, 84, .5), 0 8px 24px -12px rgba(119, 99, 84, .18);
  /* grows out of Пили: springy on the way in, a quick soft fade-and-sink on the way out */
  transform-origin: calc(100% - 34px) calc(100% + 40px); opacity: 0; scale: .9; translate: 0 14px; filter: blur(3px);
  transition: opacity .2s ease-in, scale .26s cubic-bezier(.4, 0, 1, 1), translate .26s cubic-bezier(.4, 0, 1, 1), filter .2s ease-in;
}
.pili.is-open .pili__panel {
  opacity: 1; scale: 1; translate: 0 0; filter: none;
  transition: opacity .28s ease-out, scale .5s cubic-bezier(.34, 1.36, .64, 1), translate .5s cubic-bezier(.34, 1.36, .64, 1), filter .28s ease-out;
}
/* closed: out of the layout entirely (bot.js removes it before opening, adds it after the close animation) */
.pili.is-gone .pili__panel, .pili.is-gone .pili__scrim { display: none; }
/* what is inside drifts in a beat after the panel */
.pili.is-open .pili__log, .pili.is-open .pili__form, .pili.is-open .pili__channels { animation: pili-rise .45s .08s cubic-bezier(.2, .7, .2, 1) both; }
.pili.is-open .pili__form { animation-delay: .12s; }
.pili.is-open .pili__channels { animation-delay: .16s; }
@keyframes pili-rise { from { opacity: 0; translate: 0 10px; } }

/* backdrop: only on phones, where the chat covers the page; a tap on it closes the chat */
.pili__scrim {
  position: fixed; inset: 0; z-index: -1; background: rgba(119, 99, 84, .28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease; display: none;
}
@media (max-width: 760px) {
  .pili__scrim { display: block; }
  .pili.is-open .pili__scrim { opacity: 1; }
}

/* header: the same liquid silk as the site hero, with the mascot in an ivory disc */
.pili__head {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 16px;
  background: linear-gradient(135deg, #A8947F 0%, #776354 100%); color: var(--white);
}
.pili__head .liquid-bg { z-index: -2; }
.pili__head::after { /* a soft wash on the left keeps the name readable over the silk */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, rgba(62, 48, 38, .78), rgba(62, 48, 38, .55) 55%, rgba(62, 48, 38, .4));
}
.pili__title { text-shadow: 0 1px 2px rgba(40, 30, 22, .55); }
.pili__ava {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); box-shadow: 0 0 0 3px rgba(250, 248, 244, .28), 0 8px 18px -8px rgba(119, 99, 84, .7);
}
.pili__ava svg { width: 82%; height: 82%; overflow: visible; translate: 0 -2px; }
.pili__title { flex: 1; min-width: 0; display: grid; gap: 3px; line-height: 1.2; }
.pili__title strong { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .01em; }
.pili__title span { font-size: 12px; font-weight: 500; color: rgba(250, 248, 244, .85); display: flex; align-items: center; gap: 7px; }
.pili__dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--line); }
.pili__head .pili__dot { background: var(--white); }
.pili__head .pili__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(250, 248, 244, .7);
  animation: pili-pulse 2.4s ease-out infinite;
}
@keyframes pili-pulse { 0% { scale: .5; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
.pili__icon {
  position: relative; z-index: 1; width: 34px; height: 34px; flex: none; border: 1px solid rgba(250, 248, 244, .28); border-radius: 50%;
  background: rgba(80, 64, 52, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--white); display: grid; place-items: center; cursor: pointer;
  transition: background .2s, border-color .2s, rotate .4s cubic-bezier(.34, 1.4, .64, 1);
}
.pili__icon:hover { background: rgba(80, 64, 52, .6); border-color: rgba(250, 248, 244, .6); }
.pili__icon[data-restart]:hover { rotate: -90deg; }
.pili__icon:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.pili__icon svg { width: 15px; height: 15px; }

/* conversation */
.pili__log {
  overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--blush) 0, var(--shell) 120px);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* older messages fade out under the header instead of being cut off */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px); mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}
.pili__log::-webkit-scrollbar { width: 6px; }
.pili__log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.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: 11px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.pili__msg--bot .pili__bub {
  background: var(--white); color: var(--text); border-top-left-radius: 6px;
  box-shadow: 0 1px 0 rgba(208, 185, 167, .35), 0 10px 22px -16px rgba(119, 99, 84, .45);
}
.pili__msg--user .pili__bub { background: linear-gradient(135deg, #A8947F, #776354); color: var(--white); border-top-right-radius: 6px; }
.pili__time { font-size: 10.5px; color: var(--text); margin: 4px 8px 0; opacity: .65; letter-spacing: .02em; }
@keyframes pili-in { from { opacity: 0; translate: 0 8px; } }

.pili__typing { display: inline-flex; gap: 4px; padding: 15px 16px; }
.pili__typing i { width: 7px; height: 7px; border-radius: 50%; background: #A8947F; 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: .4; } 30% { translate: 0 -5px; opacity: 1; } }

/* quick replies: an even two-column grid of soft tiles */
.pili__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.pili__opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  border: 1px solid var(--line); background: var(--white); color: var(--text); text-align: left;
  font: 600 13px/1.25 var(--body); padding: 10px 12px 10px 14px; border-radius: 14px; cursor: pointer;
  animation: pili-in .35s cubic-bezier(.2, .7, .2, 1) both;
  transition: background .25s, color .25s, border-color .25s, translate .25s, box-shadow .25s;
}
.pili__opt::after { /* small arrow on the right */
  content: ""; flex: none; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  rotate: 45deg; opacity: .45; transition: opacity .25s, translate .25s;
}
.pili__opt:hover { border-color: var(--mauve); background: var(--mauve); color: var(--white); translate: 0 -1px; box-shadow: 0 10px 20px -12px rgba(119, 99, 84, .7); }
.pili__opt:hover::after { opacity: 1; translate: 2px 0; }
.pili__opt:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
/* odd count: the last topic tile takes the full row so the grid stays even */
.pili__opt:not(.pili__opt--menu):nth-child(odd):is(:last-child, :has(+ .pili__opt--menu)) { grid-column: 1 / -1; }
.pili__opt--menu { grid-column: 1 / -1; justify-content: center; gap: 10px; background: transparent; border-style: dashed; color: var(--text); }
.pili__opt--menu:hover { background: var(--blush); color: var(--text); border-color: var(--rose); box-shadow: none; }

/* action cards (call / book / write) */
.pili__acts { display: grid; gap: 8px; width: 100%; }
.pili__act {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 11px 13px;
  font: 600 13.5px/1.25 var(--body); cursor: pointer; text-align: left; transition: border-color .2s, translate .2s, box-shadow .2s;
}
.pili__act:hover { border-color: var(--rose); translate: 0 -1px; box-shadow: 0 10px 20px -14px rgba(119, 99, 84, .6); }
.pili__act b { width: 34px; height: 34px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--blush); font-size: 15px; }
.pili__act small { display: block; font-weight: 500; font-size: 12px; color: var(--text); margin-top: 2px; }
.pili__act--main { background: linear-gradient(135deg, #A8947F, #776354); border-color: transparent; color: var(--white); }
.pili__act--main b { background: rgba(250, 248, 244, .2); }
.pili__act--main small { color: var(--blush); }

/* composer: the send button sits inside the field */
.pili__form { position: relative; display: flex; padding: 12px 14px 8px; background: var(--white); border-top: 1px solid var(--line); }
.pili__field {
  flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line); border-radius: 999px; background: var(--shell);
  padding: 0 56px 0 18px; font: 14.5px var(--body); color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s;
}
.pili__field::placeholder { color: var(--text); opacity: .7; }
.pili__field:focus { outline: none; border-color: var(--rose); background: var(--white); box-shadow: 0 0 0 4px rgba(208, 185, 167, .25); }
.pili__send {
  position: absolute; right: 19px; top: 17px; width: 38px; height: 38px; 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: #A8947F; }
.pili__send:active { scale: .9; }
.pili__send svg { width: 16px; height: 16px; translate: -1px 1px; }
.pili__channels { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px 14px 12px; background: var(--white); }
.pili__ch {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--text); white-space: nowrap;
  font: 600 12px var(--body); padding: 8px 6px; border-radius: 12px; transition: background .2s, color .2s;
}
.pili__ch + .pili__ch::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--line); }
.pili__ch:hover { background: var(--blush); color: var(--text); }
.pili__ch svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 7px; color: #fff; }
/* channel icons keep their real app colours (exception to the site palette, on request) */
.pili__ch--tel svg { background: linear-gradient(180deg, #5BE37D, #28C24A); }
.pili__ch--ig svg { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.pili__ch--cal svg { background: linear-gradient(180deg, #4D9BFF, #1A73E8); }
@media (max-width: 330px) { .pili__opts { grid-template-columns: 1fr; } }

/* 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); }
/* over a button, link, field or text (bot.js checkAside): half out at the edge; back on hover / focus */
.pili.is-aside:not(.is-open):not(:hover):not(:focus-within) { opacity: .6; translate: calc(clamp(14px, 3vw, 28px) + 34px) 0; }
.pili.is-aside:not(.is-open):not(:hover):not(:focus-within) .pili__bubble { opacity: 0; pointer-events: none; }
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; }
  /* a nudge that is showing keeps Пили in place: sliding aside would push the bubble past the screen edge */
  .pili.is-tucked:not(.is-open):has(.pili__bubble.is-in) { opacity: 1; translate: none; }
  .pili.is-tucked .pili__bubble.is-in { opacity: 1; }
}

@media (max-width: 480px) {
  .pili__btn { width: 58px; height: 58px; }
  .pili__panel { bottom: 72px; height: calc(100dvh - 100px - var(--bar-h, 0px) - var(--dock-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) - var(--dock-h, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .pili__btn .pili__body, .pili__eye, .pili__arm, .pili.is-thinking .pili__body, .pili__typing i, .pili__head .pili__dot::after { animation: none; }
  .pili__msg, .pili__opt, .pili.is-open .pili__log, .pili.is-open .pili__form, .pili.is-open .pili__channels { animation: none; }
  .pili__panel, .pili.is-open .pili__panel { transition: opacity .15s; filter: none; translate: none; scale: none; }
}

/* ---------- Tidy layout pass ----------
   header on one calm line, status never wraps; channels never squeeze; phones get a roomy bottom sheet */
.pili__head { gap: 12px; padding: 14px 12px 14px 14px; min-height: 74px; }
.pili__ava { width: 44px; height: 44px; }
.pili__title { gap: 2px; }
.pili__title strong { font-size: 20px; line-height: 1.1; }
.pili__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; min-width: 0; font-size: 12px; }
.pili__title span .pili__dot { flex: none; }
.pili__icon { width: 32px; height: 32px; }
.pili__log { padding: 16px 14px 10px; gap: 10px; }
.pili__msg { max-width: 88%; }
.pili__bub { font-size: 14.5px; line-height: 1.5; }
.pili__opt { min-height: 42px; padding: 9px 10px 9px 12px; font-size: 13px; }
.pili__channels { gap: 4px; padding: 4px 12px 12px; }
.pili__ch { min-width: 0; gap: 7px; padding: 7px 4px; }
.pili__ch + .pili__ch::before { left: -2px; }

@media (max-width: 480px) {
  /* channels: icon above the label, three equal columns that never overflow */
  .pili__ch { flex-direction: column; gap: 4px; padding: 8px 2px 6px; font-size: 11.5px; line-height: 1.1; }
  .pili__ch svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
  .pili__ch + .pili__ch::before { top: 22%; bottom: 22%; }
  .pili__title strong { font-size: 19px; }
  .pili__form { padding: 10px 12px 8px; }
  .pili__field { height: 46px; font-size: 16px; } /* 16px stops iOS from zooming into the field */
  .pili__send { top: 14px; right: 16px; }
}

/* phones: the open chat is a full-height sheet pinned to the viewport, never pushed off-screen
   (.pili must not be translated while open, or the fixed panel would follow it) */
@media (max-width: 480px) {
  .pili.is-open { translate: none !important; opacity: 1 !important; }
  .pili__panel {
    position: fixed; left: 10px; right: 10px; width: auto; height: auto;
    top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: calc(10px + var(--bar-h, 0px) + var(--dock-h, 0px));
    border-radius: 24px; transform-origin: 50% 100%;
  }
  /* nudges stay small so they cover as little of the page as possible */
  .pili__bubble { width: min(236px, calc(100vw - 96px)); padding: 10px 11px 11px 13px; gap: 6px; }
  .pili__bubble-text { font-size: 14px; line-height: 1.45; }
  .pili__bubble-cta { font-size: 12.5px; padding: 8px 12px; }
}

/* header status: full white, and "· отговаря веднага" drops out when the panel is too narrow for it */
.pili__title span { color: #FAF8F4; font-weight: 600; }
.pili__more { font-style: normal; }
@media (max-width: 420px) { .pili__more { display: none; } }
/* phones: while the sheet is open the mascot steps aside (the sheet has its own close button and the backdrop closes it too) */
@media (max-width: 480px) {
  .pili.is-open .pili__btn { opacity: 0; scale: .6; pointer-events: none; transition: opacity .2s, scale .25s; }
}