/* ASK NEU on the public site.
   Brand rules apply here as everywhere: blue, black, white and nothing else. */

.nchat { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 190; }
/* The chapter pages and NEUStory carry a fixed dark bar along the bottom.
   The panel opens from the bottom-right corner, so without this it opens
   underneath that bar and loses its last row — which is where the input is. */
.pillar-page .nchat { bottom: calc(var(--pfoot-h) + 0.8rem); }

/* ---- the bubble ---- */
.nchat__bubble {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem; border-radius: 999px; border: 0;
  background: var(--blue); color: var(--white);
  font: 800 0.92rem 'Inter', sans-serif;
  box-shadow: 0 14px 34px -10px rgba(0, 120, 255, 0.65);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.nchat__bubble:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(0, 120, 255, 0.8); }
.nchat__bubble img { width: 2.1rem; height: 2.1rem; object-fit: contain; border-radius: 50%; background: rgba(255,255,255,0.16); }
.nchat.is-open .nchat__bubble { opacity: 0; pointer-events: none; }

/* ---- the panel ---- */
/* THE `hidden` ATTRIBUTE HAS TO WIN.
   `hidden` is only a UA rule saying `display: none`, so ANY display of an
   element's own overrides it silently. That is what made the × do nothing: the
   script set `panel.hidden = true`, the attribute was there in the DOM, and
   `display: flex` below kept the panel on screen regardless — it was never
   closed, so it never looked opened either.
   Every element in this file that the script shows and hides needs its own
   [hidden] rule for the same reason. */
.nchat__panel[hidden], .nchat__ask[hidden] { display: none; }

/* ── THE CONVERSATION IS NOT FOR HIGHLIGHTING ──
   Asked for directly: the chat should behave like a document that will not let
   its words be dragged over and copied.
   BE CLEAR ABOUT WHAT THIS IS. It is a speed bump, not a lock. Anybody who
   wants these words can read the page source, use their browser's reader mode,
   or point a phone at the screen — and NEU's answers come from what is already
   published on the site anyway. It stops the idle drag-and-copy and nothing
   more, and it is applied HERE and not to the site, because a company page a
   customer cannot copy an address or a phone number out of is a worse page. */
.nchat__panel {
  -webkit-user-select: none; user-select: none;
  position: absolute; right: 0; bottom: 0;
  width: min(24rem, calc(100vw - 2rem));
  height: min(32rem, calc(100vh - 6rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); color: var(--black);
  border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 30px 70px -18px rgba(0, 20, 60, 0.42);
}
.nchat__head {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem;
  background: var(--blue); color: var(--white);
}
.nchat__head img { width: 2.2rem; height: 2.2rem; object-fit: contain; border-radius: 50%; background: rgba(255,255,255,0.18); }
.nchat__head b { display: block; font-size: 0.98rem; }
.nchat__head em { font-style: normal; font-size: 0.76rem; opacity: 0.85; }
.nchat__x {
  margin-left: auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.18); color: var(--white);
  font-size: 1.1rem; cursor: pointer;
}
.nchat__x:hover { background: rgba(255,255,255,0.34); }

.nchat__log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem;
  background: #f6f9ff;
}
.nchat__msg {
  max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 14px;
  font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.nchat__msg.is-neu { background: var(--white); border: 1px solid rgba(0,0,0,0.07); align-self: flex-start; }
.nchat__msg.is-you { background: var(--blue); color: var(--white); align-self: flex-end; }
.nchat__msg.is-note {
  align-self: center; background: none; border: 0; font-size: 0.74rem;
  opacity: 0.55; padding: 0.1rem;
}

/* three dots while it thinks — a chat that goes silent reads as broken */
.nchat__msg.is-waiting { display: flex; gap: 0.25rem; align-items: center; }
.nchat__msg.is-waiting i {
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--blue);
  animation: nchat-think 1s ease-in-out infinite;
}
.nchat__msg.is-waiting i:nth-child(2) { animation-delay: 0.15s; }
.nchat__msg.is-waiting i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nchat-think { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.18rem); } }
@media (prefers-reduced-motion: reduce) { .nchat__msg.is-waiting i { animation: none; opacity: 0.6; } }

/* something to press, because an empty box asks a visitor to think of a
   question and most of them will simply close it instead */
.nchat__seeds { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
.nchat__seeds button {
  cursor: pointer; font: 700 0.78rem 'Inter', sans-serif;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 38%, transparent);
  background: var(--white); color: var(--blue);
}
.nchat__seeds button:hover { background: var(--blue); color: var(--white); }

/* documents out of the chest, under the answer — the list the model cannot
   get wrong, next to the sentence it might */
.nchat__files { display: grid; gap: 0.35rem; align-self: stretch; }
.nchat__file {
  display: grid; gap: 0.12rem; text-decoration: none; color: inherit;
  padding: 0.5rem 0.7rem; border-radius: 12px;
  background: var(--white); border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  border-left: 3px solid var(--blue);
}
.nchat__file:hover { background: color-mix(in srgb, var(--blue) 7%, var(--white)); }
.nchat__file b { font-size: 0.84rem; line-height: 1.35; }
.nchat__file em { font-style: normal; font-size: 0.75rem; opacity: 0.62; line-height: 1.4; }
.nchat__file span { font-size: 0.68rem; opacity: 0.45; }
.nchat__filenote { font-size: 0.68rem; opacity: 0.5; text-align: center; margin-top: 0.1rem; }

.nchat__ask { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid rgba(0,0,0,0.07); }
/* the box somebody types their own question into is the one exception —
   nobody should be unable to correct their own typing */
.nchat__ask input {
  -webkit-user-select: text; user-select: text;
  flex: 1; min-width: 0; font: 400 0.9rem 'Inter', sans-serif;
  padding: 0.6rem 0.8rem; border-radius: 999px; border: 1.5px solid rgba(0,0,0,0.12);
}
.nchat__ask input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.nchat__go {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--blue); color: var(--white); font-size: 1.1rem;
}
.nchat__go:hover { background: var(--blue-deep); }
.nchat__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0 0.75rem 0.65rem; font-size: 0.68rem;
}
.nchat__foot span { opacity: 0.5; }
.nchat__lock {
  flex: none; cursor: pointer; font: 700 0.7rem 'Inter', sans-serif;
  padding: 0.3rem 0.65rem; border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,0.14); background: var(--white); color: var(--black);
  opacity: 0.72; transition: background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.nchat__lock:hover { background: var(--black); color: var(--white); border-color: var(--black); opacity: 1; }

/* =========================================================================
   SEARCH — the half of the box everybody gets
   Same panel, same input, same button as the conversation. Only the middle
   changes, so opening NEU never feels like two different things.
   ========================================================================= */

/* [hidden] HAS TO WIN — see the note at the top of this file. Both of these
   carry a `display`, so without their own rule the script would hide one and
   the browser would keep drawing it, and the search list and the conversation
   would sit on top of each other. */
.nchat__body[hidden], .nchat__log[hidden], .nchat__lock[hidden] { display: none; }

.nchat__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.75rem; background: #f6f9ff;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.nchat__hint {
  font-size: 0.7rem; letter-spacing: 0.02em; opacity: 0.55;
  padding: 0 0.2rem; flex: none;
}
.nchat__results { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.nchat__results a {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-radius: 12px;
  background: var(--white); border: 1px solid rgba(0,0,0,0.07);
  color: var(--black); text-decoration: none;
  font-size: 0.85rem; line-height: 1.4;
}
.nchat__results a:hover, .nchat__results a:focus-visible {
  background: var(--blue); color: var(--white); border-color: var(--blue); outline: none;
}
/* the kind sits in a fixed column so the titles line up down the list */
.nchat__kind {
  flex: none; width: 4.4rem; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5;
}
.nchat__results a:hover .nchat__kind, .nchat__results a:focus-visible .nchat__kind { opacity: 0.85; }
.nchat__none { font-size: 0.85rem; opacity: 0.6; padding: 0.6rem 0.2rem; }

/* A QUESTION SOMEBODY AT NEUON HAS ALREADY ANSWERED.
   White like the pages beneath it, because it behaves like them — one press,
   one thing — but marked with its own kind and a left edge in the company
   blue, so the block of questions reads as one group without needing a
   heading over it. */
.nchat__faqrow {
  width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-radius: 12px;
  background: var(--white); color: var(--black);
  border: 1px solid rgba(0,0,0,0.07); border-left: 3px solid var(--blue);
  font: 500 0.85rem/1.4 'Inter', sans-serif;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.nchat__faqrow:hover, .nchat__faqrow:focus-visible {
  background: #eef5ff; border-color: var(--blue); outline: none;
}
.nchat__faqrow .nchat__kind { color: var(--blue); opacity: 0.75; }

/* the link under a written answer */
.nchat__more {
  display: inline-block; padding: 0.4rem 0.8rem; border-radius: 999px;
  background: var(--blue); color: var(--white); text-decoration: none;
  font-size: 0.78rem; font-weight: 700;
}
.nchat__more:hover { background: var(--blue-deep); }

/* THE ASK ROW — the one result that is not a page.
   It sits at the top of the list and is drawn in the company's blue rather
   than as another white card, because it is a different KIND of thing: the
   others take you somewhere, this one answers you. It is the only control in
   the public box that spends anything, so it should never be mistaken for the
   row above or below it. */
.nchat__askrow {
  width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-radius: 12px;
  background: var(--blue); border: 1px solid var(--blue); color: var(--white);
  font: 600 0.85rem/1.4 'Inter', sans-serif;
  transition: background 0.16s ease;
}
.nchat__askrow:hover { background: var(--blue-deep); }
.nchat__askrow:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.nchat__askrow .nchat__kind { opacity: 0.75; }

/* the way back out of an answer */
.nchat__back {
  flex: none; cursor: pointer; font: 700 0.7rem 'Inter', sans-serif;
  padding: 0.3rem 0.65rem; border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,0.14); background: var(--white); color: var(--black);
  opacity: 0.72; transition: background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}
.nchat__back:hover { background: var(--black); color: var(--white); border-color: var(--black); opacity: 1; }
.nchat__back[hidden] { display: none; }

@media (max-width: 480px) {
  .nchat { right: 0.7rem; bottom: 0.7rem; }
  /* Taller on a phone than the old chat was. This is the site's search now,
     and a list you can only see four of is not a list worth opening. */
  .nchat__panel {
    width: calc(100vw - 1.4rem);
    height: min(34rem, calc(100vh - 4.5rem));
  }
  .nchat__kind { width: 3.8rem; }
}

/* =========================================================================
   THE LOCK
   Only ever shown after three clicks on the copyright line. Nothing about it
   is discoverable by looking.
   ========================================================================= */
.nlock { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; }
/* `display` beats the `hidden` attribute, so without this the lock — a
   full-screen scrim at 72% black — sat over the entire site from the moment
   the page loaded, swallowing every click on it. The attribute is how the
   script opens and shuts this thing, so the attribute has to win. */
.nlock[hidden] { display: none; }
.nlock__scrim { position: absolute; inset: 0; background: rgba(8, 14, 30, 0.72); backdrop-filter: blur(3px); }
.nlock__box {
  position: relative; width: min(23rem, calc(100vw - 2rem));
  background: var(--white); color: var(--black);
  border-radius: 22px; padding: 1.4rem 1.4rem 1.2rem; text-align: center;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.6);
}
.nlock__box img { width: 6.5rem; margin: -0.4rem auto 0.3rem; display: block; }
.nlock__box h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.nlock__box p { font-size: 0.85rem; line-height: 1.5; opacity: 0.7; }
.nlock__box label { display: block; text-align: left; font-weight: 700; font-size: 0.8rem; margin: 0.9rem 0 0; }
.nlock__box input {
  width: 100%; margin-top: 0.3rem; font: 400 0.95rem 'Inter', sans-serif;
  padding: 0.6rem 0.8rem; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.14);
}
.nlock__box input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.nlock__no { color: #c0392b !important; opacity: 1 !important; font-weight: 700; margin-top: 0.5rem; }
.nlock__acts { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.nlock__acts .btn { border-width: 2px; font-size: 0.88rem; padding: 0.6rem 1.2rem; }
.nlock__acts .btn--white { background: var(--blue); color: var(--white); border-color: var(--blue); }
.nlock__acts .btn--outline { background: transparent; color: var(--black); border-color: rgba(0,0,0,0.18); }

/* The way through to NEU sticks to the bottom of the list it sits under.
   In the list it was below eight questions and forty pages — present, and
   findable only by somebody who went looking. It is the one control in the
   public box that spends anything, so it is the one thing always in view. */
.nchat__askslot {
  position: sticky; bottom: -0.75rem; z-index: 2;
  padding: 0.5rem 0 0.15rem; margin-top: auto;
  background: linear-gradient(to bottom, rgba(246,249,255,0) 0%, #f6f9ff 45%);
}
.nchat__askslot[hidden] { display: none; }

/* =========================================================================
   THE GATE — Dr KC's flow, asked inside the conversation
   Not a pop-up and not a page. NEU asks; the person answers in the same place
   they were already reading. That is the whole reason it works: nobody has to
   leave and lose what they were in the middle of.
   ========================================================================= */
.nchat__gate {
  align-self: stretch; display: grid; gap: 0.5rem;
  padding: 0.75rem 0.8rem; border-radius: 14px;
  background: var(--white); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-left: 3px solid var(--blue);
}
.nchat__gate label {
  display: grid; gap: 0.22rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; opacity: 0.7;
}
.nchat__gate input {
  font: 400 0.9rem 'Inter', sans-serif;
  padding: 0.5rem 0.7rem; border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.14); background: var(--white); color: var(--black);
  /* the one place in this panel somebody types their own words */
  -webkit-user-select: text; user-select: text;
}
.nchat__gate input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.nchat__gatego {
  cursor: pointer; font: 700 0.82rem 'Inter', sans-serif;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 0;
  background: var(--blue); color: var(--white);
}
.nchat__gatego:hover { background: var(--blue-deep); }
.nchat__gatego:disabled { opacity: 0.6; cursor: default; }
.nchat__gateskip {
  cursor: pointer; font: 600 0.74rem 'Inter', sans-serif;
  padding: 0.35rem; border: 0; background: none; color: inherit; opacity: 0.5;
  text-decoration: underline;
}
.nchat__gateskip:hover { opacity: 0.9; }
.nchat__gatenote:empty { display: none; }
.nchat__gatenote {
  font-size: 0.75rem; line-height: 1.45; color: #c0392b; margin: 0;
}

/* ── A TOPIC, WHICH OPENS INTO MORE ──
   Dr KC's shape, from the Unifi chat: a few headings, press one, it opens into
   the next few. A topic carries a chevron so it is obvious before pressing
   that it goes somewhere rather than answering. */
.nchat__faqrow--more { font-weight: 700; }
.nchat__faqmore {
  margin-left: auto; font-style: normal; font-size: 1.1rem; line-height: 1;
  color: var(--blue); opacity: 0.55;
}
.nchat__faqrow--more:hover .nchat__faqmore { opacity: 1; }

/* the way back up a level */
.nchat__faqrow--up {
  border-left-color: rgba(0,0,0,0.12);
  font-weight: 600; opacity: 0.72; font-size: 0.8rem;
}
.nchat__faqrow--up:hover { opacity: 1; background: var(--white); border-color: rgba(0,0,0,0.12); }

/* ═══════════ NEU ASKS FIRST ═══════════
   The one step before a visitor's own words: a name and a tick. It reuses the
   gate's box because it IS the same kind of thing — a small form inside the
   conversation, not a page somebody is sent to. What it adds is NEU saying
   why, in NEU's voice, above the fields: a form that asks for a name and a
   permission without saying what for is the sort of thing people close. */
.nchat__hello { gap: 0.6rem; }
.nchat__hellosay {
  margin: 0; font-size: 0.83rem; line-height: 1.5; color: var(--black);
  opacity: 0.86;
}
/* the tick is a row, not a stacked label — a checkbox under its own caption
   reads as two separate things and gets missed */
.nchat__gate label.nchat__tick {
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem;
  align-items: start;
  font-weight: 400; font-size: 0.78rem; line-height: 1.45; opacity: 0.8;
  letter-spacing: 0;
}
.nchat__gate label.nchat__tick input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin: 0.12rem 0 0; padding: 0;
  accent-color: var(--blue); cursor: pointer;
}
.nchat__tick span { cursor: pointer; }

/* ── the way out with it ──
   One row, and it moves down to the foot of the conversation as it grows
   rather than appearing again under every answer. */
.nchat__save { margin-top: 0.2rem; }
.nchat__save .nchat__more { font-variant-numeric: tabular-nums; }