/*
LuneAI chat widget (inc/chat.php, assets/js/chat.js).
Every colour, size, radius and duration comes from the custom properties printed on :root by inc/tokens.php.
Desktop: a floating panel above the launcher. Phones: a full screen dialog that follows the visual viewport, so the keyboard never covers the input.
*/

/* Launcher -------------------------------------------------------------------------- */
.luneai__launcher {
  position: fixed; z-index: 45;
  right: max(var(--space-md), env(safe-area-inset-right, 0px));
  bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: var(--size-control); padding: 0.4rem 1.3rem 0.4rem 0.4rem;
  border: 0; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); box-shadow: var(--shadow-lift);
  font: 500 0.95rem/1 var(--font-text); letter-spacing: 0.01em; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), bottom var(--motion-base) var(--motion-ease);
}
.luneai__launcher-mark {
  display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 50%;
  background: var(--color-brass-light); color: var(--color-ink); font-size: 1.3rem;
}
.luneai__launcher-chat { display: none; }
.luneai__launcher:active { transform: scale(0.97); }

/* Panel ------------------------------------------------------------------------------ */
.luneai__panel {
  position: fixed; z-index: 80;
  right: max(var(--space-md), env(safe-area-inset-right, 0px));
  bottom: calc(max(var(--space-md), env(safe-area-inset-bottom, 0px)) + var(--size-control) + var(--space-xs));
  display: flex; flex-direction: column;
  width: min(25rem, 100vw - 2 * var(--space-md));
  height: min(41rem, 100dvh - var(--size-header) - var(--size-control) - 3 * var(--space-md));
  background: var(--color-bone); color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); overflow: hidden;
  animation: luneai-in var(--motion-fast) var(--motion-ease);
}
@keyframes luneai-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.98); } }

.luneai__head {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  background: var(--color-paper); border-bottom: 1px solid var(--color-line);
}
.luneai__avatar {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--color-ink); color: var(--color-brass-light); font-size: 1.3rem;
}
.luneai__who { flex: 1; min-width: 0; }
.luneai__title { font: 500 1.5rem/1 var(--font-display); letter-spacing: -0.01em; }
.luneai__role { margin: 0.2rem 0 0; font-size: 0.75rem; line-height: 1.3; color: var(--color-ink-muted); }
.luneai__icon {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-ink); font-size: 1.25rem; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.luneai__icon:active { transform: scale(0.94); }

/* Conversation ---------------------------------------------------------------------------- */
.luneai__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm);
}
.luneai__log:focus-visible { outline-offset: -2px; }
.luneai__msg {
  max-width: 88%; padding: 0.7rem 0.95rem; border-radius: var(--radius-md);
  font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere;
}
.luneai__msg p { margin: 0 0 0.55em; }
.luneai__msg > :last-child > :last-child, .luneai__msg p:last-child { margin-bottom: 0; }
.luneai__msg ul, .luneai__msg ol { margin: 0 0 0.55em; padding-left: 1.2rem; }
.luneai__msg ul { list-style: disc; }
.luneai__msg ol { list-style: decimal; }
.luneai__msg li + li { margin-top: 0.25em; }
.luneai__msg a { color: var(--color-brass-deep); text-decoration: underline; }
.luneai__msg strong { font-weight: 600; }
.luneai__msg--bot { align-self: flex-start; background: var(--color-white); border: 1px solid var(--color-line); border-bottom-left-radius: var(--radius-sm); }
.luneai__msg--user { align-self: flex-end; background: var(--color-ink); color: var(--color-on-ink); border-bottom-right-radius: var(--radius-sm); }
.luneai__msg--user a { color: inherit; }
.luneai__msg--notice {
  align-self: stretch; max-width: none; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-error); background: var(--color-paper); color: var(--color-error); font-size: var(--text-small);
}
.luneai__msg--notice a { color: inherit; }

.luneai__typing { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.2rem; }
.luneai__typing span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-ink-muted); animation: luneai-dot 1.2s var(--motion-ease) infinite; }
.luneai__typing span:nth-child(2) { animation-delay: 0.15s; }
.luneai__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes luneai-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-0.2rem); } }

/* Suggestions ----------------------------------------------------------------------------------- */
.luneai__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: 0 var(--space-sm) var(--space-xs); }
.luneai__chip {
  min-height: 2.75rem; padding: 0.45rem 0.95rem; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-ink); font: 500 0.85rem/1.3 var(--font-text); text-align: left; cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}
.luneai__chip:disabled { opacity: 0.5; cursor: default; }

/* Composer ------------------------------------------------------------------------------------------- */
.luneai__form {
  display: flex; align-items: flex-end; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--color-line); background: var(--color-bone);
}
.luneai__input {
  flex: 1; min-width: 0; min-height: 2.75rem; max-height: 10rem; padding: 0.65rem 0.95rem; resize: none; overflow-y: hidden;
  border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-ink);
  font: 400 1rem/1.4 var(--font-text); /* 16px: iOS does not zoom into the field */
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.luneai__input::placeholder { color: var(--color-ink-muted); }
.luneai__input:focus { border-color: var(--color-ink); }
.luneai__send {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-on-ink); font-size: 1.15rem; cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.luneai__send:active { transform: scale(0.94); }
.luneai.is-busy .luneai__send { background: var(--color-brass-deep); }
.luneai__notice { margin: 0; padding: 0 var(--space-sm) var(--space-xs); font-size: 0.75rem; line-height: 1.45; color: var(--color-ink-muted); background: var(--color-bone); }
.luneai__notice a { text-decoration: underline; }

/* Phones: a brass pill with a speech bubble and its label, so the chat reads as a chat and never as one more
   navy buy button (owner decision, 2026-10-01); it sits above the buy bar. While the landing page's hero is on
   screen it stays a circle (.is-compact, set by chat.js) so it never covers the hero's main button; the label
   stays in the accessibility tree in both states. The panel is a full screen dialog. */
@media (max-width: 47.99rem) {
  .luneai__launcher {
    --luneai-chat-icon: 1.45rem;
    gap: 0.5rem; min-height: var(--size-control); max-width: 20rem; overflow: hidden;
    padding: 0 1.15rem 0 calc((var(--size-control) - var(--luneai-chat-icon)) / 2);
    background: var(--color-brass-light); color: var(--color-ink); font-weight: 600; white-space: nowrap;
    transition: max-width var(--motion-base) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), bottom var(--motion-base) var(--motion-ease);
  }
  .luneai__launcher-mark { display: none; }
  .luneai__launcher-chat { display: grid; place-items: center; flex: none; font-size: var(--luneai-chat-icon); line-height: 1; }
  .luneai__launcher-text { transition: opacity var(--motion-fast) var(--motion-ease); }
  .luneai.is-compact .luneai__launcher { max-width: var(--size-control); }
  .luneai.is-compact .luneai__launcher-text { opacity: 0; }
  body:has(.buybar.is-visible) .luneai__launcher { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
  /* Above the cookie banner while it is open (its height comes from consent.js, its offset from consent.css), never
     under the header; hidden while the banner shows its settings, which fill most of a phone screen. */
  html.lunea-consent-open body:has(.lunea-consent) .luneai__launcher {
    bottom: min(calc(var(--lunea-consent-bottom, 0px) + var(--lunea-consent-height, 0px) + var(--space-xs)), calc(100dvh - var(--size-header) - var(--size-control) - var(--space-xs)));
  }
  html.lunea-consent-settings .luneai__launcher { visibility: hidden; }
  .luneai.is-open .luneai__launcher { visibility: hidden; }

  .luneai__panel {
    inset: var(--luneai-viewport-top, 0px) 0 auto 0; width: 100%; height: var(--luneai-viewport, 100dvh);
    border: 0; border-radius: 0; box-shadow: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  }
  .luneai__notice { padding-bottom: max(var(--space-xs), env(safe-area-inset-bottom, 0px)); }
  .luneai__msg { max-width: 92%; }
  html.luneai-locked, html.luneai-locked body { overflow: hidden; overscroll-behavior: none; }
}

@media (hover: hover) and (pointer: fine) {
  .luneai__launcher:hover { background: var(--color-ink-soft); }
  .luneai__icon:hover { background: var(--color-paper-deep); }
  .luneai__chip:not(:disabled):hover { border-color: var(--color-ink); }
  .luneai__send:hover { background: var(--color-ink-soft); }
  .luneai.is-busy .luneai__send:hover { background: var(--color-brass); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 47.99rem) {
  .luneai__launcher:hover { background: var(--color-brass-light); filter: brightness(1.06); }
}

@media print {
  .luneai { display: none !important; }
}