/* ============================================================================
   Edie — EdTech Assurance website assistant.
   Built 21 September 2026 to replace the removed Zapier widget.

   Uses the site's own tokens from style.css (--navy, --teal, --surface ...),
   so it inherits light/dark automatically and cannot drift from the brand.
   Scoped under #edie- and .edie- so nothing here can touch page styles.
   ========================================================================= */

#edie-root {
  --edie-launcher: 58px;
  --edie-w: 384px;
  --edie-h: 580px;
  --edie-radius: 18px;
  --edie-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;              /* header.site is 50 */
  font-family: var(--font);
  pointer-events: none;     /* children re-enable; keeps the gutter clickable */
}
/* The root is only as big as the launcher. The panel and the nudge are taken
   out of flow and anchored above it, because stacking all three in one flex
   column made the root taller than the viewport and pushed the panel header
   off the top of the screen. */
#edie-root > * { pointer-events: auto; }

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

.edie-launcher {
  width: var(--edie-launcher);
  height: var(--edie-launcher);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 4px 14px rgba(15,41,66,.28), 0 12px 34px -14px rgba(15,41,66,.5);
  transition: transform .28s var(--edie-ease), box-shadow .28s var(--edie-ease);
  position: relative;
  flex: none;
}
.edie-launcher::after {           /* teal focus ring, drawn not outlined */
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--teal-light);
  opacity: 0;
  transition: opacity .2s ease;
}
.edie-launcher:hover { transform: translateY(-2px) scale(1.04); }
.edie-launcher:hover::after,
.edie-launcher:focus-visible::after { opacity: .85; }
.edie-launcher:focus-visible { outline: none; }
.edie-launcher svg { width: 26px; height: 26px; }

/* The two glyphs cross-fade: chat mark when closed, chevron when open. */
.edie-launcher .edie-ico {
  grid-area: 1 / 1;
  transition: opacity .2s ease, transform .28s var(--edie-ease);
}
.edie-launcher .edie-ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
#edie-root[data-open="true"] .edie-launcher .edie-ico-open  { opacity: 0; transform: rotate(90deg) scale(.6); }
#edie-root[data-open="true"] .edie-launcher .edie-ico-close { opacity: 1; transform: none; }

/* Unread pip, shown with the nudge */
.edie-pip {
  position: absolute;
  top: 2px; right: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--teal-light);
  border: 2.5px solid var(--surface);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .3s var(--edie-ease);
}
#edie-root[data-nudge="true"] .edie-pip { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- nudge */
/* The conversion trigger: visitors read for a minute and leave without
   asking anything, so Edie opens the conversation rather than waiting. */

.edie-nudge {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 272px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: var(--shadow);
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .3s ease, transform .35s var(--edie-ease);
  pointer-events: none !important;
}
#edie-root[data-nudge="true"] .edie-nudge {
  opacity: 1;
  transform: none;
  pointer-events: auto !important;
}
.edie-nudge-text { flex: 1; }
.edie-nudge strong { display: block; color: var(--heading); font-size: 13.5px; margin-bottom: 2px; }
.edie-nudge-dismiss {
  flex: none;
  width: 22px; height: 22px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); border-radius: 6px;
  display: grid; place-items: center; padding: 0;
  margin: -3px -4px 0 0;
}
.edie-nudge-dismiss:hover { background: var(--surface-alt); color: var(--heading); }
.edie-nudge-dismiss svg { width: 13px; height: 13px; }

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

.edie-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: var(--edie-w);
  height: var(--edie-h);
  max-height: calc(100vh - 108px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--edie-radius);
  box-shadow: 0 8px 20px rgba(15,41,66,.10), 0 28px 60px -20px rgba(15,41,66,.36);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(14px) scale(.95);
  transition: opacity .24s ease, transform .34s var(--edie-ease), visibility .34s;
  visibility: hidden;
}
#edie-root[data-open="true"] .edie-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* Header — same navy + dot texture + teal wash as .page-hero, so the widget
   reads as part of the site rather than a bolted-on third-party box. */
.edie-head {
  position: relative;
  flex: none;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}
.edie-head::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(220px 150px at 88% 6%, rgba(20,163,168,.30), transparent 68%);
}
.edie-avatar {
  position: relative;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--teal-light), var(--teal));
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.edie-avatar svg { width: 19px; height: 19px; }
.edie-head-text { position: relative; flex: 1; min-width: 0; line-height: 1.25; }
.edie-head-text .edie-name { display: block; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.edie-head-text .edie-role {
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.62); font-size: 11.5px; font-weight: 600;
}
.edie-dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: #35D39A; flex: none;
  box-shadow: 0 0 0 2.5px rgba(53,211,154,.22);
}
.edie-head-btn {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background .16s ease, color .16s ease;
}
.edie-head-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.edie-head-btn:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 2px; }
.edie-head-btn svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------- transcript */

.edie-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.edie-log::-webkit-scrollbar { width: 8px; }
.edie-log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--surface); }

.edie-msg { display: flex; gap: 9px; max-width: 100%; animation: edie-rise .32s var(--edie-ease) both; }
@keyframes edie-rise { from { opacity: 0; transform: translateY(7px); } }

.edie-msg-avatar {
  flex: none;
  width: 26px; height: 26px; margin-top: 1px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--teal-light), var(--teal));
  display: grid; place-items: center;
}
.edie-msg-avatar svg { width: 14px; height: 14px; }

.edie-bubble {
  font-size: 14px;
  line-height: 1.55;
  border-radius: 13px;
  padding: 10px 13px;
  max-width: 85%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.edie-msg.bot  .edie-bubble {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  color: var(--text);
  border-top-left-radius: 5px;
}
.edie-msg.user { justify-content: flex-end; }
.edie-msg.user .edie-bubble {
  background: var(--teal);
  color: #fff;
  border-top-right-radius: 5px;
  box-shadow: 0 2px 8px -2px rgba(13,115,119,.5);
}

/* Markdown-ish content inside a bot bubble */
.edie-bubble p { margin: 0 0 8px; }
.edie-bubble p:last-child { margin-bottom: 0; }
.edie-bubble strong { color: var(--heading); font-weight: 700; }
.edie-msg.user .edie-bubble strong { color: #fff; }
.edie-bubble ul { margin: 6px 0 8px; padding-left: 19px; }
.edie-bubble ul:last-child { margin-bottom: 0; }
.edie-bubble li { margin-bottom: 4px; }
.edie-bubble a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.edie-msg.user .edie-bubble a { color: #fff; }

/* Typing indicator */
.edie-typing { display: flex; gap: 4px; align-items: center; padding: 3px 1px; }
.edie-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  opacity: .35;
  animation: edie-blink 1.25s infinite ease-in-out;
}
.edie-typing span:nth-child(2) { animation-delay: .18s; }
.edie-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes edie-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Streaming caret */
.edie-caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--teal);
  vertical-align: -2px;
  margin-left: 1px;
  animation: edie-caret 1s steps(2) infinite;
}
@keyframes edie-caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------------- chips */

.edie-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 16px 0;
  flex: none;
}
.edie-chip {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent);
  border-radius: 99px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.edie-chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-1px); }
.edie-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ------------------------------------------------------ enquiry handoff card */

.edie-capture {
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  border-radius: 13px;
  padding: 13px;
  animation: edie-rise .32s var(--edie-ease) both;
}
.edie-capture h4 {
  margin: 0 0 3px;
  font-size: 13.5px; font-weight: 700; color: var(--heading);
}
.edie-capture .edie-capture-sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 11px; line-height: 1.45; }
.edie-capture label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 4px;
}
.edie-capture input {
  width: 100%;
  font-family: var(--font); font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; margin-bottom: 9px;
}
.edie-capture input:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
.edie-capture-actions { display: flex; gap: 8px; align-items: center; }
.edie-capture-send {
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  background: var(--teal); color: #fff;
  border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer;
  transition: background .15s ease;
}
.edie-capture-send:hover { background: #0B6266; }
.edie-capture-send[disabled] { opacity: .55; cursor: not-allowed; }
.edie-capture-skip {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  background: transparent; color: var(--text-muted);
  border: 0; cursor: pointer; padding: 10px 4px;
}
.edie-capture-skip:hover { color: var(--heading); text-decoration: underline; }
.edie-capture-note { font-size: 11.5px; color: var(--text-muted); margin: 9px 0 0; line-height: 1.4; }
.edie-capture.done { text-align: left; }
.edie-capture.done .edie-tick {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: #fff; margin-bottom: 8px;
}
.edie-capture.done .edie-tick svg { width: 14px; height: 14px; }

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

.edie-foot { flex: none; padding: 12px 14px 11px; border-top: 1px solid var(--line); background: var(--surface); }
.edie-form {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 6px 6px 6px 13px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.edie-form:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent); }
.edie-input {
  flex: 1;
  border: 0; background: transparent; resize: none;
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  color: var(--text);
  padding: 7px 0; margin: 0;
  max-height: 104px; min-height: 20px;
  overflow-y: auto;
}
.edie-input:focus { outline: none; }
.edie-input::placeholder { color: var(--text-muted); }
.edie-send {
  flex: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: var(--teal); color: #fff;
  cursor: pointer; display: grid; place-items: center; padding: 0;
  transition: background .16s ease, opacity .16s ease, transform .16s ease;
}
.edie-send:hover:not([disabled]) { background: #0B6266; transform: translateY(-1px); }
.edie-send[disabled] { opacity: .32; cursor: not-allowed; }
.edie-send:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.edie-send svg { width: 16px; height: 16px; }
.edie-legal {
  margin: 9px 2px 0;
  font-size: 10.5px; line-height: 1.45;
  color: var(--text-muted); text-align: center;
}
.edie-legal a { color: var(--text-muted); text-decoration: underline; }

/* ------------------------------------------------------------------- mobile */

/* ------------------------------------------------------------------- mobile */
/* This is the surface that matters: Neil expects most visitors on a phone. */

@media (max-width: 640px) {
  /* No `left` here. The root anchors to the bottom right corner only, or the
     launcher is dragged across to the left edge. The nudge is out of flow, so
     it needs its own width rather than inheriting the root's. */
  #edie-root { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .edie-nudge { max-width: none; width: calc(100vw - 28px); padding: 15px 14px; font-size: 14.5px; }
  .edie-nudge strong { font-size: 14.5px; }
  /* The whole bubble opens the chat, so the dismiss needs a thumb-sized target
     of its own or it gets missed and the chat opens instead. */
  .edie-nudge-dismiss { width: 38px; height: 38px; margin: -9px -8px 0 0; }
  .edie-nudge-dismiss svg { width: 15px; height: 15px; }

  /* Sized from the VISUAL viewport, not the layout viewport. `inset: 0` looks
     right until the soft keyboard opens: the layout viewport does not shrink,
     so the composer ends up underneath the keyboard and the visitor types
     blind. edie.js writes --edie-vv-h and --edie-vv-top from
     window.visualViewport; the dvh fallback covers browsers without it and
     handles the address bar sliding away on scroll. */
  .edie-panel {
    position: fixed;
    top: var(--edie-vv-top, 0px);
    left: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: var(--edie-vv-h, 100vh);
    height: var(--edie-vv-h, 100dvh);
    max-height: none;
    border-radius: 0;
    border: 0;
    transform-origin: center bottom;
    transform: translateY(18px);
  }
  #edie-root[data-open="true"] .edie-panel { transform: none; }

  .edie-head { padding: 13px 12px 13px 14px; padding-top: calc(13px + env(safe-area-inset-top)); }
  .edie-avatar { width: 38px; height: 38px; }
  .edie-head-text .edie-name { font-size: 16px; }

  /* Hide the launcher while the full-screen sheet is up: the header has a close */
  #edie-root[data-open="true"] .edie-launcher,
  #edie-root[data-open="true"] .edie-nudge { opacity: 0; pointer-events: none !important; }

  .edie-log { padding: 16px 14px 4px; gap: 13px; }
  .edie-bubble { max-width: 88%; font-size: 15px; }

  /* Every control a thumb has to hit gets 44px, the accessible minimum. At
     30px and 34px these were fine with a mouse and fiddly with a thumb. */
  .edie-head-btn { width: 44px; height: 44px; border-radius: 12px; }
  .edie-head-btn svg { width: 17px; height: 17px; }
  .edie-send { width: 44px; height: 44px; border-radius: 12px; }
  .edie-send svg { width: 18px; height: 18px; }

  /* One scrolling row rather than four stacked rows. Wrapping chips ate a
     third of the screen on a 375px phone and pushed the conversation up. */
  .edie-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px 2px;
    scroll-padding-left: 14px;
  }
  .edie-chips::-webkit-scrollbar { display: none; }
  .edie-chip { flex: none; padding: 10px 15px; font-size: 13.5px; white-space: nowrap; }

  .edie-foot {
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .edie-form { padding: 5px 5px 5px 14px; border-radius: 14px; }
  .edie-input { font-size: 16px; }   /* under 16px and iOS zooms the page on focus */
  .edie-legal { font-size: 11px; margin-top: 7px; }

  .edie-capture input { padding: 12px 12px; font-size: 16px; }
  .edie-capture-send { padding: 13px 18px; font-size: 14.5px; }
  .edie-capture-skip { padding: 13px 8px; font-size: 13.5px; }
}

/* A phone on its side, or a small phone with the keyboard up. Trim the
   furniture rather than let the composer get squeezed off the bottom. */
@media (max-width: 640px) and (max-height: 460px) {
  .edie-head { padding-block: 8px; }
  .edie-avatar { width: 30px; height: 30px; }
  .edie-head-text .edie-role { display: none; }
  .edie-chips { display: none; }
  .edie-legal { display: none; }
}

/* Stop the page scrolling behind the mobile sheet. overflow:hidden alone does
   not hold iOS Safari, so the body is pinned; edie.js stores the scroll
   position and restores it on close, or the page jumps to the top. */
body.edie-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #edie-root *,
  #edie-root *::before,
  #edie-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print { #edie-root { display: none !important; } }