/* Spa Cafe chat widget — brand-styled, self-contained. */
.spachat-toggle {
  position: fixed; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 90; background: var(--sage-deep); color: #fff; border: 0; cursor: pointer;
  width: 62px; height: 62px; padding: 0; border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(84,164,135,.55); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.spachat-toggle svg { width: 30px; height: 30px; }
.spachat-toggle .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.spachat-toggle:hover { background: #2f6853; transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 36px -8px rgba(84,164,135,.65); }
.spachat-toggle.hidden { display: none; }

/* auto-teaser bubble next to the launcher */
.spachat-teaser {
  position: fixed; right: max(1.1rem, env(safe-area-inset-right)); bottom: calc(max(1.1rem, env(safe-area-inset-bottom)) + 76px);
  z-index: 89; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px; box-shadow: 0 14px 36px -14px rgba(38,48,44,.35);
  padding: 0.85em 2.1em 0.85em 1.1em; max-width: 250px; cursor: pointer;
  font-family: var(--body); font-size: var(--step--1); line-height: 1.45;
  animation: spachatTeaserIn .45s cubic-bezier(.2,.8,.3,1);
}
.spachat-teaser p { margin: 0; }
.spachat-teaser-x {
  position: absolute; top: 4px; right: 6px; background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 1rem; line-height: 1; padding: 4px;
}
.spachat-teaser-x:hover { color: var(--ink); }
@keyframes spachatTeaserIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spachat-teaser { animation: none; } }

.spachat {
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line);
  font-family: var(--body); color: var(--ink); padding: 0;
}
.spachat-float {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 91; width: min(92vw, 380px); height: min(74vh, 560px);
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -16px rgba(50,55,60,.4);
  transform: translateY(20px) scale(.98); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease;
}
.spachat-float[hidden] { display: none; }
.spachat-float.open { transform: none; opacity: 1; pointer-events: auto; }
.spachat-inline { height: 100%; border-radius: var(--radius); }

.spachat-head { background: var(--sage-deep); color: #fff; padding: 0.9rem 1.1rem; display: flex; align-items: baseline; gap: 0.6rem; }
.spachat-head strong { font-family: var(--display); font-size: var(--step-1); }
.spachat-head span { font-size: var(--step--1); opacity: 0.85; }
.spachat-x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: 0.85; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.spachat-x:hover { opacity: 1; }

.spachat-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.spachat-msg { max-width: 84%; padding: 0.7em 1em; border-radius: 14px; font-size: var(--step--1); line-height: 1.5; }
.spachat-msg.bot { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.spachat-msg.user { background: var(--sage-deep); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.spachat-msg a { color: inherit; }
.spachat-msg.typing { display: inline-flex; gap: 4px; align-items: center; }
.spachat-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.2s infinite; }
.spachat-msg.typing span:nth-child(2) { animation-delay: .2s; } .spachat-msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.spachat-form { display: flex; gap: 0.5rem; padding: 0.8rem; border-top: 1px solid var(--line); background: var(--bg); }
.spachat-in { flex: 1; border: 1px solid var(--line); border-radius: 100px; padding: 0.65em 1em; font: inherit; font-size: var(--step--1); background: #fff; min-height: 44px; }
.spachat-in:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.spachat-send { background: var(--sage-deep); color: #fff; border: 0; border-radius: 100px; padding: 0 1.2em; font-weight: 600; cursor: pointer; min-height: 44px; }
.spachat-send:hover { background: #2f6853; }
.spachat-send:disabled, .spachat-in:disabled { cursor: not-allowed; opacity: 0.65; }
.spachat-warning { border-color: #8b5a2b !important; }
.spachat-note { font-size: 0.72rem; color: var(--ink-soft); text-align: center; padding: 0 0.8rem 0.7rem; margin: 0; }
.spachat-note a { color: var(--sage-deep); }

.spachat-toggle:focus-visible, .spachat-x:focus-visible, .spachat-send:focus-visible, .spachat-in:focus-visible, .spachat-note a:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #1f5c54;
}

@media (prefers-reduced-motion: reduce) { .spachat-float, .spachat-toggle { transition: none; } .spachat-msg.typing span { animation: none; } }
@media (max-width: 420px) {
  .spachat-toggle { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .spachat-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* quick-reply chips under the greeting */
.spachat-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.spachat-chip {
  background: var(--sage-soft, #eaf3ee); color: var(--sage-deep, #2f6853);
  border: 1px solid var(--sage, #54A487); border-radius: 100px; cursor: pointer;
  font-family: inherit; font-size: var(--step--1, .9rem); font-weight: 600;
  padding: .5em 1.1em; transition: background .15s, transform .12s;
}
.spachat-chip:hover { background: var(--sage, #54A487); color: #fff; transform: translateY(-1px); }