/* 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 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; }

.nchat__panel {
  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); }
.nchat__ask input {
  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; }

@media (max-width: 480px) {
  .nchat { right: 0.7rem; bottom: 0.7rem; }
  .nchat__panel { height: min(28rem, calc(100vh - 4.5rem)); }
}

/* =========================================================================
   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); }