/* Jambo Labs site assistant (the "Ask" pop-up). Loaded on every Next page
   from app/layout.tsx and appended to each festival demo page by
   scripts/sync_waf_demos.py. Every rule is scoped under .jl-assist so the
   demo pages' own element styles (button, textarea, mark) cannot leak in.
   Colours read the site tokens where they exist and fall back to the same
   values on the demo pages, which define none of them. */

.jl-assist {
  --jl-bg: var(--bg-alt, #ffffff);
  --jl-surface: var(--bg, #f3f0eb);
  --jl-text: var(--text, #1f1f1f);
  --jl-text-2: var(--text-2, #57544e);
  --jl-mute: var(--text-mute, #69665f);
  --jl-line: var(--line, #e4e0d7);
  --jl-line-strong: var(--panel-b, #cbc4b6);
  --jl-navy: var(--closing-bg, #1a2332);
  --jl-on-navy: #f2f0ec;
  --jl-focus: var(--accent, #d95a45);
  --jl-font: var(--font-inter, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --jl-mono: var(--font-fragment-mono, "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  font-family: var(--jl-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--jl-text);
  -webkit-font-smoothing: antialiased;
}
.jl-assist *,
.jl-assist *::before,
.jl-assist *::after {
  box-sizing: border-box;
}

/* Launcher */
.jl-assist .jl-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 16px;
  border: 1px solid var(--jl-navy);
  border-radius: 999px;
  background: var(--jl-navy);
  color: var(--jl-on-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(26, 35, 50, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.jl-assist .jl-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(26, 35, 50, 0.28);
}
.jl-assist .jl-launch:focus-visible,
.jl-assist .jl-close:focus-visible,
.jl-assist .jl-chip:focus-visible,
.jl-assist .jl-send:focus-visible {
  outline: 2px solid var(--jl-focus);
  outline-offset: 2px;
}
.jl-assist .jl-launch svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.jl-assist[data-open="true"] .jl-launch {
  display: none;
}

/* Panel */
.jl-assist .jl-panel {
  display: none;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: min(640px, calc(100vh - 40px));
  background: var(--jl-bg);
  border: 1px solid var(--jl-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(31, 31, 31, 0.16);
  overflow: hidden;
}
.jl-assist[data-open="true"] .jl-panel {
  display: flex;
}
.jl-assist .jl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--jl-line);
}
.jl-assist .jl-title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.jl-assist .jl-sub {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--jl-mute);
}
.jl-assist .jl-close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jl-mute);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.jl-assist .jl-close:hover {
  background: var(--jl-surface);
  color: var(--jl-text);
}

/* Body */
.jl-assist .jl-body {
  flex: 1 1 auto;
  min-height: 160px;
  overflow-y: auto;
  padding: 14px 20px 4px;
  background: var(--jl-surface);
}
.jl-assist .jl-starters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 10px;
}
.jl-assist .jl-starters-label {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--jl-text-2);
}
.jl-assist .jl-chip {
  border: 1px solid var(--jl-line);
  border-radius: 999px;
  background: var(--jl-bg);
  color: var(--jl-text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.jl-assist .jl-chip:hover {
  border-color: var(--jl-line-strong);
}
.jl-assist .jl-turn {
  padding: 10px 0;
  font-size: 14.5px;
}
.jl-assist .jl-turn + .jl-turn {
  border-top: 1px solid var(--jl-line);
}
.jl-assist .jl-turn p,
.jl-assist .jl-turn ul {
  margin: 0 0 8px;
}
.jl-assist .jl-turn > :last-child {
  margin-bottom: 0;
}
.jl-assist .jl-turn ul {
  padding-left: 18px;
}
.jl-assist .jl-user p {
  color: var(--jl-mute);
}
.jl-assist .jl-user p::before {
  content: "You: ";
  font-family: var(--jl-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.jl-assist .jl-turn a {
  color: var(--jl-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--jl-line-strong);
}
.jl-assist .jl-turn a:hover {
  border-color: var(--jl-text);
}
.jl-assist .jl-ext {
  font-size: 0.85em;
  opacity: 0.7;
}
.jl-assist .jl-wait {
  color: var(--jl-mute);
  letter-spacing: 0.2em;
}
.jl-assist .jl-note {
  margin: 6px 0 8px;
  font-size: 13.5px;
  color: var(--jl-text-2);
}

/* Composer */
.jl-assist .jl-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 16px 6px 20px;
  border-top: 1px solid var(--jl-line);
  background: var(--jl-bg);
}
.jl-assist .jl-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  max-height: 120px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--jl-line);
  border-radius: 8px;
  background: var(--jl-bg);
  color: var(--jl-text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  resize: none;
}
.jl-assist .jl-form textarea:focus {
  outline: none;
  border-color: var(--jl-focus);
}
.jl-assist .jl-form textarea:disabled {
  color: var(--jl-mute);
}
.jl-assist .jl-send {
  flex: none;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--jl-navy);
  border-radius: 8px;
  background: var(--jl-navy);
  color: var(--jl-on-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.jl-assist .jl-send:disabled {
  opacity: 0.4;
  cursor: default;
}
.jl-assist .jl-fine {
  margin: 0;
  padding: 0 20px 12px;
  background: var(--jl-bg);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--jl-mute);
}
.jl-assist .jl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .jl-assist {
    right: 12px;
    bottom: 12px;
  }
  .jl-assist[data-open="true"] {
    left: 12px;
  }
  .jl-assist .jl-panel {
    width: auto;
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}
/* WAF D05 S11: on /waf and the demo pages, position and size only. The
   launcher sits above a demo's caption bar (--jl-cap, set by widget.js) and,
   on /waf, is a round button that fits the margin beside the photos. On
   phones it is a smaller round button on both. */
.jl-assist[data-where="demo"],
.jl-assist[data-where="waf"] {
  bottom: calc(20px + var(--jl-cap, 0px));
  transition: bottom 0.3s ease;
}
.jl-assist[data-where="waf"] .jl-launch {
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.jl-assist[data-where="waf"] .jl-launch svg {
  width: 20px;
  height: 20px;
}
.jl-assist[data-where="waf"] .jl-launch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .jl-assist[data-where="demo"] {
    right: 10px;
    bottom: calc(10px + var(--jl-cap, 0px));
  }
  .jl-assist[data-where="waf"] {
    right: 2px;
    bottom: 10px;
  }
  .jl-assist[data-where="demo"] .jl-launch,
  .jl-assist[data-where="waf"] .jl-launch {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .jl-assist[data-where="waf"] .jl-launch {
    width: 32px;
    height: 32px;
  }
  .jl-assist[data-where="demo"] .jl-launch span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .jl-assist[data-where="demo"] .jl-launch svg,
  .jl-assist[data-where="waf"] .jl-launch svg {
    width: 16px;
    height: 16px;
  }
  .jl-assist[data-open="true"][data-where] {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jl-assist[data-where] {
    transition: none;
  }
  .jl-assist .jl-launch,
  .jl-assist .jl-launch:hover {
    transition: none;
    transform: none;
  }
}
@media print {
  .jl-assist {
    display: none;
  }
}
/* WAF D05 final: a demo page's theatre (body.theatre, set only by the demo
   pages while a story plays) owns the screen, so the assistant leaves it. */
body.theatre .jl-assist {
  visibility: hidden;
}
/* WAF D07: on a demo page the launcher keeps off the demo's controls, its
   running time and its side sheets (body[data-demo-view] and
   body[data-demo-sheet], set by components/WafDemoBand.tsx). While the window
   is on screen and the margin beside it has room ("clear"), the launcher is
   the round button, in that margin. Where there is no room ("tuck", phones and
   narrow tablets), it tucks into a slim tab on the right edge, and it leaves
   while a side sheet is open. Once the demo is off screen it is as before. */
body[data-demo-view="clear"] .jl-assist[data-where="demo"] .jl-launch {
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
body[data-demo-view] .jl-assist[data-where="demo"] .jl-launch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body[data-demo-view="tuck"] .jl-assist[data-where="demo"]:not([data-open="true"]) {
  right: 0;
}
body[data-demo-view="tuck"] .jl-assist[data-where="demo"]:not([data-open="true"]) .jl-launch {
  width: 18px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border-right: 0;
  border-radius: 10px 0 0 10px;
}
body[data-demo-view="tuck"] .jl-assist[data-where="demo"]:not([data-open="true"]) .jl-launch svg {
  width: 12px;
  height: 12px;
  flex: none;
}
body[data-demo-view="tuck"] .jl-assist[data-where="demo"]:not([data-open="true"]) .jl-launch:hover {
  transform: none;
}
body[data-demo-view="tuck"][data-demo-sheet] .jl-assist[data-where="demo"]:not([data-open="true"]) {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}