/* ─── CarSearch AI Partners — car greeter ───────────────────────────────────
   Tokens only: every colour comes from the landing page :root variables
   (--paper, --text, --navy, --line, --shadow-lg, --font). No literals. */

.car-greeter-layer {
  position: fixed;
  bottom: 22px;             /* same ground as .sb-root */
  left: 0;
  right: 0;
  overflow: visible;        /* the smoke plume must never clip; the layer is position:fixed, so off-screen parts never scroll the page */
  pointer-events: none;
  z-index: 299;             /* under the chat launcher/panel (.sb-root = 300) */
  transition: bottom .3s ease, opacity .3s ease;
}

.car-greeter-hidden {
  opacity: 0;
  pointer-events: none !important;
}
.car-greeter-hidden .car-greeter-walker { pointer-events: none; }

.car-greeter-walker {
  position: absolute;
  bottom: 0;
  left: 0;
  will-change: transform;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.car-greeter-walker:focus-visible .car-greeter-cell {
  outline: 2px solid var(--blue);
  outline-offset: -8px;
  border-radius: 12px;
}

.car-greeter-sprite {
  background-repeat: no-repeat;
}

/* Thought bubble: rounded cloud + two trailing puffs down towards the car. */
.car-greeter-thought {
  position: absolute;
  max-width: 220px;
  background: var(--paper);
  color: var(--text);
  border: 2px solid var(--navy);
  border-radius: 22px;
  padding: .55rem .95rem;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  white-space: nowrap;
}
.car-greeter-thought.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.car-greeter-thought::before,
.car-greeter-thought::after {
  content: '';
  position: absolute;
  background: var(--paper);
  border: 2px solid var(--navy);
  border-radius: 50%;
}
.car-greeter-thought::before {
  width: 14px; height: 14px;
  left: 22px; bottom: -14px;
}
.car-greeter-thought::after {
  width: 8px; height: 8px;
  left: 12px; bottom: -24px;
}

@media (max-width: 620px) {
  .car-greeter-layer { bottom: 16px; }   /* .sb-root moves to 16px on phones */
  .car-greeter-thought { font-size: .85rem; max-width: calc(100vw - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .car-greeter-layer,
  .car-greeter-thought { transition: none; }
}