/* bubble.css — site-wide Axilo assistant: pulsing button → spring-open panel */
.bubble { position: fixed; right: 22px; bottom: 22px; z-index: 250; }

.bubble__btn {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px -8px var(--glow);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .2s ease;
}
.bubble__btn:hover { transform: scale(1.08); background: var(--accent-hot); }
.bubble__btn svg { width: 26px; height: 26px; }
.bubble__btn::after {
  /* pulse ring — the "click me" indication */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: bubble-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .bubble__btn::after { animation: none; } }
@keyframes bubble-pulse {
  0% { transform: scale(1); opacity: .8; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.bubble__hint {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: .8rem;
  padding: .45rem .9rem;
  border-radius: var(--pill);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}
.bubble.is-open .bubble__btn::after, .bubble.is-open .bubble__hint { display: none; }

.bubble__panel {
  position: absolute;
  right: 0; bottom: calc(100% + 14px);
  width: min(380px, calc(100vw - 44px));
  height: min(560px, 70svh);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(.2);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease;
}
.bubble.is-open .bubble__panel { transform: scale(1); opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .bubble__panel { transition: opacity .15s ease; transform: none; } }

.bubble__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.bubble__head .phone__biz-status { font-size: .68rem; }
.bubble__close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.bubble__close:hover { color: var(--ink); border-color: var(--accent); }

@media (max-width: 560px) {
  .bubble__panel {
    position: fixed;
    inset: auto 12px 92px 12px;
    width: auto;
    height: min(72svh, 560px);
  }
}