/* "Ask Spacenow" site assistant. Markup is built by assets/js/site-assistant.js inside #sn-assistant-root.
   Colours follow assets/src/assets/scss/core/_config.scss: dark #0f0f0f, green #6adc91, light #f7f8fa. */

#sn-assistant-root {
  --sna-ink: #0f0f0f;
  --sna-paper: #ffffff;
  --sna-soft: #f7f8fa;
  --sna-line: #dcdee4;
  --sna-muted: #6b6f78;
  --sna-accent: #6adc91;
  --sna-accent-soft: #e4ffed;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9990;
  font-family: 'GroteskNeue', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--sna-ink);
}
body.dark-theme #sn-assistant-root {
  --sna-ink: #f7f8fa;
  --sna-paper: #16171a;
  --sna-soft: #22242a;
  --sna-line: #33363d;
  --sna-muted: #a3a7b0;
  --sna-accent-soft: #1d3326;
}
#sn-assistant-root *,
#sn-assistant-root *::before,
#sn-assistant-root *::after { box-sizing: border-box; }

.sn-assistant__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Launcher */
.sn-assistant__launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 12px 18px 12px 14px;
  border: 0;
  border-radius: 999px;
  background: #0f0f0f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 15, 15, 0.22);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.sn-assistant__launcher:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(15, 15, 15, 0.28); }
.sn-assistant__launcher:focus-visible,
#sn-assistant-root button:focus-visible,
#sn-assistant-root a:focus-visible,
.sn-assistant__input:focus-visible { outline: 2px solid var(--sna-accent); outline-offset: 2px; }
.sn-assistant__launcher .sn-assistant__icon { color: #6adc91; }
body.dark-theme .sn-assistant__launcher { background: #f7f8fa; color: #0f0f0f; }
body.dark-theme .sn-assistant__launcher .sn-assistant__icon { color: #0f0f0f; }
#sn-assistant-root.is-open .sn-assistant__launcher { display: none; }

/* Panel */
.sn-assistant__panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  height: min(620px, calc(100vh - 48px));
  border: 1px solid var(--sna-line);
  border-radius: 16px;
  background: var(--sna-paper);
  box-shadow: 0 16px 48px rgba(15, 15, 15, 0.18);
  overflow: hidden;
}
.sn-assistant__panel[hidden] { display: none; }

.sn-assistant__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--sna-line);
}
#sn-assistant-root .sn-assistant__title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--sna-ink); }
#sn-assistant-root .sn-assistant__subtitle { margin: 4px 0 0; font-size: 13px; color: var(--sna-muted); }
.sn-assistant__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sna-ink);
  cursor: pointer;
}
.sn-assistant__close:hover { background: var(--sna-soft); }

/* Conversation */
.sn-assistant__log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sn-assistant__msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  overflow-wrap: anywhere;
}
#sn-assistant-root .sn-assistant__msg p { margin: 0; font-size: 15px; line-height: 1.45; color: inherit; }
#sn-assistant-root .sn-assistant__msg p + p,
#sn-assistant-root .sn-assistant__msg p + .sn-assistant__list,
#sn-assistant-root .sn-assistant__msg .sn-assistant__list + p { margin-top: 8px; }
#sn-assistant-root .sn-assistant__list { margin: 0; padding-left: 18px; list-style: disc; }
#sn-assistant-root .sn-assistant__list li { margin: 2px 0; font-size: 15px; list-style: disc; }
.sn-assistant__msg--assistant { align-self: flex-start; background: var(--sna-soft); color: var(--sna-ink); border-bottom-left-radius: 4px; }
.sn-assistant__msg--user { align-self: flex-end; background: #0f0f0f; color: #ffffff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
body.dark-theme .sn-assistant__msg--user { background: #f7f8fa; color: #0f0f0f; }
#sn-assistant-root .sn-assistant__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.sn-assistant__typing { display: flex; gap: 4px; padding: 14px; }
.sn-assistant__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sna-muted);
  animation: sn-assistant-dot 1s infinite ease-in-out;
}
.sn-assistant__typing span:nth-child(2) { animation-delay: 0.15s; }
.sn-assistant__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sn-assistant-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sn-assistant__typing span { animation: none; opacity: 0.6; }
  .sn-assistant__launcher { transition: none; }
}

/* Space cards */
.sn-assistant__cards { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
#sn-assistant-root .sn-assistant__card {
  display: flex;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--sna-line);
  border-radius: 12px;
  background: var(--sna-paper);
  color: var(--sna-ink);
  text-decoration: none;
}
#sn-assistant-root .sn-assistant__card:hover { border-color: var(--sna-ink); }
.sn-assistant__card-img { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 8px; object-fit: cover; background: var(--sna-soft); }
.sn-assistant__card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 0; }
.sn-assistant__card-title { font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sn-assistant__card-meta { font-size: 13px; color: var(--sna-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-assistant__card-cta { margin-top: auto; font-size: 13px; font-weight: 500; }

/* Request summary, shown before an enquiry is sent */
.sn-assistant__confirm { align-self: stretch; padding: 12px 14px; border: 1px solid var(--sna-line); border-left: 3px solid var(--sna-accent); border-radius: 12px; background: var(--sna-paper); }
#sn-assistant-root .sn-assistant__confirm-title { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--sna-ink); }
#sn-assistant-root .sn-assistant__confirm-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
#sn-assistant-root .sn-assistant__confirm-list dt { margin: 0; color: var(--sna-muted); }
#sn-assistant-root .sn-assistant__confirm-list dd { margin: 0; color: var(--sna-ink); overflow-wrap: anywhere; }
#sn-assistant-root .sn-assistant__confirm-note { margin: 8px 0 0; font-size: 13px; color: var(--sna-muted); }

/* Suggestions */
.sn-assistant__suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.sn-assistant__suggestions:not(:empty) { padding-bottom: 12px; }
.sn-assistant__chip {
  padding: 7px 12px;
  border: 1px solid var(--sna-line);
  border-radius: 999px;
  background: var(--sna-paper);
  color: var(--sna-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sn-assistant__chip:hover { border-color: var(--sna-ink); background: var(--sna-soft); }

/* Composer */
.sn-assistant__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 12px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--sna-line);
  border-radius: 14px;
  background: var(--sna-paper);
}
.sn-assistant__form:focus-within { border-color: var(--sna-ink); }
#sn-assistant-root .sn-assistant__input {
  flex: 1 1 auto;
  min-height: 24px;
  max-height: 120px;
  margin: 0;
  padding: 7px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sna-ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
  resize: none;
  box-shadow: none;
}
.sn-assistant__input::placeholder { color: var(--sna-muted); }
.sn-assistant__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 10px;
  background: #0f0f0f;
  color: #ffffff;
  cursor: pointer;
}
.sn-assistant__send:disabled { opacity: 0.4; cursor: default; }
body.dark-theme .sn-assistant__send { background: #6adc91; color: #0f0f0f; }

#sn-assistant-root .sn-assistant__footnote { margin: 0; padding: 8px 16px 12px; font-size: 12px; line-height: 1.35; color: var(--sna-muted); text-align: center; }

/* Phones: the panel takes the screen. */
@media (max-width: 600px) {
  #sn-assistant-root { right: 16px; bottom: 16px; }
  /* Above the WordPress admin bar (z-index 99999), which every tester has while this is admin-only. */
  #sn-assistant-root.is-open { inset: 0; z-index: 100000; }
  .sn-assistant__panel { width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .sn-assistant__launcher-label { display: none; }
  .sn-assistant__launcher { padding: 14px; }
  .sn-assistant__launcher .sn-assistant__icon { width: 24px; height: 24px; }
}