.customer-presence-button {
  border-color: rgba(112, 191, 172, .3);
  color: #b8cdc5;
}

.customer-presence-panel {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  padding: calc(36px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 42%, rgba(18, 54, 46, .7), rgba(3, 9, 8, .97) 66%);
  color: #dce9e4;
  text-align: center;
}

.customer-presence-panel[hidden] { display: none; }
.customer-presence-calm {
  width: min(48vw, 168px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(118, 201, 181, .18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 173, 151, .12), transparent 68%);
  animation: customer-presence-drift 7s ease-in-out infinite alternate;
}
.customer-presence-calm i {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(134, 207, 189, .18);
  box-shadow: 0 0 42px rgba(96, 190, 167, .15);
}
.customer-presence-calm img {
  position: absolute;
  width: min(58vw, 210px);
  max-height: 32vh;
  object-fit: contain;
  opacity: .82;
  filter: saturate(.72) brightness(.82);
}
.customer-presence-calm img:not([src]) { display: none; }
.customer-presence-calm { position: relative; }
.customer-presence-copy p { margin: 0 0 12px; font-size: clamp(18px, 5vw, 25px); letter-spacing: .06em; }
.customer-presence-copy small { color: #8fa69e; font-size: 12px; letter-spacing: .04em; }
.customer-presence-exit {
  min-width: 132px;
  min-height: 46px;
  border: 1px solid rgba(194, 218, 209, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: #b5c5bf;
  cursor: pointer;
}
.customer-presence-exit:focus-visible,
.customer-presence-button:focus-visible { outline: 2px solid #78bfae; outline-offset: 3px; }

@keyframes customer-presence-drift {
  from { opacity: .72; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-presence-calm { animation: none; }
}