/**
 * AmbuZiel Chatbot — robot launcher and chat panel.
 *
 * Namespaced (`azb-`) and explicit everywhere: this lands in whatever
 * theme the practice runs, and `button { text-transform: uppercase }`
 * must not reach inside.
 *
 * z-index is the maximum a browser accepts (2147483647). Cookie banners
 * and sticky headers often sit at 9999 or 99999 and covered the old
 * button; at the maximum, the chat is above everything on the page.
 */

.azb-root {
  --azb-accent: #b09a71;
  --azb-x: 20px;
  --azb-y: 24px;
  --azb-size: 68px;
  --azb-gap: 14px;
  position: fixed;
  z-index: 2147483647 !important;
  width: var(--azb-size);
  height: var(--azb-size);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}
.azb-root *,
.azb-root *::before,
.azb-root *::after { box-sizing: border-box; }

/* ── where it sits ───────────────────────────────────────────── */

.azb-root[data-h="right"] { right: max(var(--azb-x), env(safe-area-inset-right)); }
.azb-root[data-h="left"]  { left:  max(var(--azb-x), env(safe-area-inset-left)); }
.azb-root[data-v="bottom"] { bottom: max(var(--azb-y), env(safe-area-inset-bottom)); }
.azb-root[data-v="top"]    { top:    max(var(--azb-y), env(safe-area-inset-top)); }
/* Middle: centred on the screen edge; the vertical offset nudges it down. */
.azb-root[data-v="middle"] { top: calc(50% - var(--azb-size) / 2 + var(--azb-y)); }

/* ── the robot button ───────────────────────────────────────── */

.azb-launcher {
  all: unset;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--azb-size);
  height: var(--azb-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 55%),
    var(--azb-accent);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 14px 34px -10px rgba(15, 23, 42, 0.55),
    inset 0 -4px 10px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.azb-launcher:hover { transform: translateY(-3px) scale(1.04); }
.azb-launcher:active { transform: scale(0.97); }
.azb-launcher:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--azb-accent);
}

.azb-face,
.azb-cross {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.azb-face svg { width: 74%; height: 74%; overflow: visible; }
.azb-cross svg { width: 40%; height: 40%; }
.azb-cross { opacity: 0; transform: rotate(-90deg); }
.azb-root[data-open="true"] .azb-face  { opacity: 0; transform: scale(0.6); }
.azb-root[data-open="true"] .azb-cross { opacity: 1; transform: rotate(0); }

/* The robot is alive: eyes blink, the antenna glows, a spark twinkles,
   and it tilts its head when the pointer comes near. */
.azb-robot__eyes { transform-origin: 32px 30px; animation: azb-blink 5s infinite; }
.azb-robot__bulb { animation: azb-glow 2.4s ease-in-out infinite; }
.azb-robot__spark { transform-origin: 53px 10.7px; animation: azb-twinkle 3.2s ease-in-out infinite; }
.azb-robot { transition: transform 0.3s ease; }
.azb-launcher:hover .azb-robot { transform: rotate(-8deg); }

@keyframes azb-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
@keyframes azb-glow {
  0%, 100% { fill: #7dd3fc; filter: drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
  50% { fill: #e0f2fe; filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.95)); }
}
@keyframes azb-twinkle {
  0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.4; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* Heartbeat rings — around the button, never moving the button itself. */
.azb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--azb-accent);
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
  animation: azb-beat 6s ease-out infinite;
}
.azb-ring--late { animation-delay: 0.4s; }
@keyframes azb-beat {
  0%   { transform: scale(1);    opacity: 0.32; }
  7%   { transform: scale(1.18); opacity: 0; }
  14%  { transform: scale(1);    opacity: 0.26; }
  21%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}
.azb-root[data-pulse="off"] .azb-ring { display: none; }

/* ── label pill beside the robot ────────────────────────────── */

.azb-label {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.18s ease;
}
.azb-root[data-h="right"] .azb-label { right: calc(100% + 12px); }
.azb-root[data-h="left"]  .azb-label { left:  calc(100% + 12px); }
.azb-root:hover .azb-label,
.azb-launcher:focus-visible ~ .azb-label { opacity: 1; }
.azb-root[data-open="true"] .azb-label { display: none; }
@media (hover: none), (max-width: 560px) { .azb-label { display: none; } }

/* ── greeting bubble ────────────────────────────────────────── */

.azb-teaser {
  position: absolute;
  width: max-content;
  max-width: 270px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  text-align: left;
  box-shadow: 0 14px 36px -12px rgba(15, 23, 42, 0.45);
  animation: azb-rise 0.24s ease-out;
}
.azb-root[data-h="right"] .azb-teaser { right: 0; }
.azb-root[data-h="left"]  .azb-teaser { left: 0; }
.azb-root[data-v="bottom"] .azb-teaser,
.azb-root[data-v="middle"] .azb-teaser { bottom: calc(100% + var(--azb-gap)); }
.azb-root[data-v="top"] .azb-teaser { top: calc(100% + var(--azb-gap)); }
.azb-teaser__text { cursor: pointer; }
.azb-teaser__close {
  all: unset;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #9ca3af;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
.azb-teaser__close:hover { background: #f3f4f6; color: #374151; }

@keyframes azb-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── chat panel ─────────────────────────────────────────────── */

.azb-panel {
  position: fixed;
  z-index: 2147483647 !important;
  width: 410px;
  /* Never taller than the room between the robot and the far edge — with
     the robot raised 96px, a fixed 680px ran off the top of a laptop. */
  height: min(680px, calc(100vh - var(--azb-y) - var(--azb-size) - var(--azb-gap) - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 80px -24px rgba(15, 23, 42, 0.6);
  animation: azb-rise 0.2s ease-out;
}
.azb-root[data-h="right"] .azb-panel { right: max(var(--azb-x), env(safe-area-inset-right)); }
.azb-root[data-h="left"]  .azb-panel { left:  max(var(--azb-x), env(safe-area-inset-left)); }
/* Opens away from the edge it sits on: above a bottom robot, below a top
   one, beside a middle one. */
.azb-root[data-v="bottom"] .azb-panel {
  bottom: calc(max(var(--azb-y), env(safe-area-inset-bottom)) + var(--azb-size) + var(--azb-gap));
}
.azb-root[data-v="top"] .azb-panel {
  top: calc(max(var(--azb-y), env(safe-area-inset-top)) + var(--azb-size) + var(--azb-gap));
}
.azb-root[data-v="middle"] .azb-panel {
  top: 50%;
  height: min(680px, calc(100vh - 48px));
  transform: translateY(-50%);
  animation: none;
}
.azb-root[data-v="middle"][data-h="right"] .azb-panel {
  right: calc(var(--azb-x) + var(--azb-size) + var(--azb-gap));
}
.azb-root[data-v="middle"][data-h="left"] .azb-panel {
  left: calc(var(--azb-x) + var(--azb-size) + var(--azb-gap));
}

.azb-panel__bar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 6px 0;
  background: #fff;
}
.azb-panel__close {
  all: unset;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #6b7280;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}
.azb-panel__close:hover { background: #f3f4f6; color: #111827; }
.azb-panel__close:focus-visible { outline: 2px solid var(--azb-accent); outline-offset: 2px; }
.azb-panel iframe { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }

/* On a phone the chat IS the page. */
@media (max-width: 560px) {
  .azb-panel,
  .azb-root[data-v] .azb-panel {
    inset: 0 !important;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: none;
  }
  .azb-root[data-open="true"] .azb-launcher,
  .azb-root[data-open="true"] .azb-teaser { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .azb-ring, .azb-teaser, .azb-panel,
  .azb-robot__eyes, .azb-robot__bulb, .azb-robot__spark { animation: none; }
  .azb-launcher, .azb-robot, .azb-face, .azb-cross { transition: none; }
}