/* ==========================================================================
   LUNA — LOOP's AI assistant. Self-hosted, zero external hosts, zero CDN.
   Every colour falls back to a literal, so she renders correctly even when
   mounted on a page that does not define the 2026 Waucht tokens.

   Visual language deliberately matches Luna's EXISTING surface (her cockpit
   HUD): deep navy, cream text, ember accent used only on active states. She
   is not a grey helpdesk bubble — she is the product, on the page.
   ========================================================================== */

.luna {
  --luna-orange: var(--orange, #ff7529);
  --luna-orange-deep: var(--orange-deep, #e8631c);
  --luna-cream: var(--cream-soft, #eceadf);
  --luna-navy: var(--navy, #323651);
  --luna-panel: #1b1e2c;
  --luna-surface: #252940;
  --luna-line: rgba(236, 234, 223, .11);
  --luna-muted: #9aa2bd;
  --luna-radius: 16px;
  --luna-font: 'Tomorrow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --luna-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  font-family: var(--luna-body);
}

.luna *,
.luna *::before,
.luna *::after { box-sizing: border-box; }

/* ---------- launcher ---------- */

.luna__launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 13px;
  border: 1px solid rgba(236, 234, 223, .14);
  border-radius: 999px;
  background: var(--luna-panel);
  color: var(--luna-cream);
  cursor: pointer;
  font-family: var(--luna-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(27, 30, 44, .28);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.luna__launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(27, 30, 44, .36);
}

.luna__launcher:focus-visible {
  outline: 2px solid var(--luna-orange);
  outline-offset: 3px;
}

/* The orb — Luna's mark. A slow ember pulse, so she reads as awake without
   demanding attention. Honours reduced-motion. */
.luna__orb {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, #ffb173 0%, var(--luna-orange) 46%, var(--luna-orange-deep) 100%);
  box-shadow: 0 0 0 0 rgba(255, 117, 41, .5);
  animation: luna-pulse 3.4s ease-out infinite;
}

.luna__orb::after {
  content: '';
  position: absolute;
  inset: 3px 3px auto auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(27, 30, 44, .55);
}

@keyframes luna-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 117, 41, .45); }
  70%  { box-shadow: 0 0 0 11px rgba(255, 117, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 117, 41, 0); }
}

/* The disclosure, on the launcher itself — before any exchange happens. */
.luna__tag {
  padding: 2px 7px;
  border: 1px solid rgba(255, 117, 41, .45);
  border-radius: 5px;
  color: var(--luna-orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.luna.is-open .luna__launcher { display: none; }

/* ---------- panel ---------- */

.luna__panel {
  display: none;
  flex-direction: column;
  width: 390px;
  height: 580px;
  max-height: calc(100vh - 40px);
  border: 1px solid var(--luna-line);
  border-radius: var(--luna-radius);
  background: var(--luna-panel);
  box-shadow: 0 26px 70px rgba(27, 30, 44, .42);
  overflow: hidden;
}

.luna.is-open .luna__panel {
  display: flex;
  animation: luna-rise .26s cubic-bezier(.22, 1, .36, 1);
}

@keyframes luna-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- header ---------- */

.luna__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--luna-line);
  background: linear-gradient(180deg, #21253a 0%, var(--luna-panel) 100%);
}

.luna__id { flex: 1; min-width: 0; }

.luna__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--luna-cream);
  font-family: var(--luna-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Disclosure, again, in the header — visible for the whole conversation. */
.luna__role {
  margin: 2px 0 0;
  color: var(--luna-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.luna__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--luna-muted);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.luna__close:hover { color: var(--luna-cream); background: rgba(236, 234, 223, .07); }
.luna__close:focus-visible { outline: 2px solid var(--luna-orange); outline-offset: 2px; }

/* ---------- log ---------- */

.luna__log {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 234, 223, .2) transparent;
}

.luna__log::-webkit-scrollbar { width: 8px; }
.luna__log::-webkit-scrollbar-thumb {
  background: rgba(236, 234, 223, .18);
  border-radius: 4px;
}

.luna__msg {
  max-width: 86%;
  margin-bottom: 12px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.luna__msg--luna {
  margin-right: auto;
  border: 1px solid var(--luna-line);
  border-bottom-left-radius: 4px;
  background: var(--luna-surface);
  color: var(--luna-cream);
}

.luna__msg--you {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--luna-orange);
  color: #1b1e2c;
  font-weight: 500;
}

.luna__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 86%;
  margin: -4px 0 13px;
}

.luna__source {
  padding: 3px 9px;
  border: 1px solid var(--luna-line);
  border-radius: 999px;
  color: var(--luna-muted);
  font-size: 11px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.luna__source:hover { color: var(--luna-orange); border-color: rgba(255, 117, 41, .45); }

/* thinking indicator */
.luna__thinking {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--luna-line);
  border-radius: 13px;
  border-bottom-left-radius: 4px;
  background: var(--luna-surface);
}

.luna__thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--luna-muted);
  animation: luna-blink 1.3s ease-in-out infinite;
}

.luna__thinking span:nth-child(2) { animation-delay: .18s; }
.luna__thinking span:nth-child(3) { animation-delay: .36s; }

@keyframes luna-blink {
  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- handoff bar (only ever rendered after qualification) ---------- */

.luna__handoff {
  display: block;
  margin: 0 0 12px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 117, 41, .5);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 117, 41, .16), rgba(255, 117, 41, .05));
  color: var(--luna-cream);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.luna__handoff span {
  display: block;
  margin-top: 3px;
  color: var(--luna-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.luna__handoff:hover { border-color: var(--luna-orange); }

/* ---------- inline lead capture ---------- */

.luna__lead {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--luna-line);
  border-radius: 13px;
  background: var(--luna-surface);
}

.luna__lead h4 {
  margin: 0 0 3px;
  color: var(--luna-cream);
  font-family: var(--luna-font);
  font-size: 14px;
  font-weight: 600;
}

.luna__lead p {
  margin: 0 0 11px;
  color: var(--luna-muted);
  font-size: 12px;
  line-height: 1.45;
}

.luna__field {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 11px;
  border: 1px solid var(--luna-line);
  border-radius: 9px;
  background: rgba(27, 30, 44, .6);
  color: var(--luna-cream);
  font-family: inherit;
  font-size: 14px; /* 14px+ stops iOS zooming the page on focus */
}

.luna__field::placeholder { color: #6f7690; }
.luna__field:focus {
  outline: none;
  border-color: var(--luna-orange);
}

.luna__lead-submit {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: var(--luna-orange);
  color: #1b1e2c;
  cursor: pointer;
  font-family: var(--luna-font);
  font-size: 14px;
  font-weight: 600;
}

.luna__lead-submit:hover { background: var(--luna-orange-deep); }
.luna__lead-submit:disabled { opacity: .55; cursor: default; }

.luna__lead-error {
  margin: 6px 0 0;
  color: #ff9c6b;
  font-size: 12px;
}

/* honeypot — matches the site form's field, hidden from humans */
.luna__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- composer ---------- */

.luna__composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  border-top: 1px solid var(--luna-line);
  background: var(--luna-panel);
}

.luna__input {
  flex: 1 1 auto;
  max-height: 108px;
  padding: 10px 12px;
  border: 1px solid var(--luna-line);
  border-radius: 11px;
  background: var(--luna-surface);
  color: var(--luna-cream);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
}

.luna__input::placeholder { color: #6f7690; }
.luna__input:focus { outline: none; border-color: rgba(255, 117, 41, .55); }

.luna__send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 11px;
  background: var(--luna-orange);
  color: #1b1e2c;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.luna__send:hover { background: var(--luna-orange-deep); }
.luna__send:disabled { opacity: .5; cursor: default; }

.luna__foot {
  padding: 0 12px 10px;
  color: var(--luna-muted);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
}

/* ---------- mobile: most of this traffic is on a phone ---------- */

@media (max-width: 640px) {
  /* The container still spans the viewport so the OPEN panel can be full
     width. The closed launcher must not: see below. */
  .luna { right: 12px; bottom: 12px; left: 12px; }

  /* THE LAUNCHER IS A CORNER PILL, NOT A BAR.
     It used to be `width: 100%`, which — inside a position:fixed container
     pinned to the bottom of the viewport — made the resting state a
     full-width band permanently occluding a 46px strip of EVERY mobile page.
     Measured 2026-08-15 on /free-audit?ref=snc (the printed SNC booth QR
     target): elementFromPoint over the "Email address" label returned
     BUTTON.luna__launcher — Luna sat on top of the first field of the only
     form on a page whose only job is that form.
     Aligning the container's children to the end keeps the pill in the
     corner (where it already sits on desktop) while the panel still opens
     to the full width the layout below expects. */
  .luna { display: flex; flex-direction: column; align-items: flex-end; }

  .luna__launcher { width: auto; justify-content: center; }

  .luna__panel {
    align-self: stretch;
    width: auto;
    height: min(78vh, 560px);
    /* svh tracks the collapsing mobile URL bar; vh does not. */
    height: min(78svh, 560px);
  }

  .luna__msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .luna__orb { animation: none; }
  .luna.is-open .luna__panel { animation: none; }
  .luna__thinking span { animation: none; opacity: .6; }
  .luna__launcher { transition: none; }
}