/* =============================================================
   NORA — V38 Reshell (NORA-SURFACE-REDESIGN.md, 2026-07-20). lemon.css
   tokens (--ink/--pink/--lemon/--mute/--rule/--cream), neo-brutalist
   hard-shadow system (2px ink border + Npx Npx 0 ink), brand easing
   cubic-bezier(.22,.61,.36,1). Falls back to literal colors when
   lemon.css isn't loaded (demo.html works standalone) via
   var(--token, fallback).

   Two shells share one set of inner primitives (greeting/chips/thread/
   bubbles/composer, all nd-* class names, unchanged from the retired
   floating drawer): .ni-root (Option A — inline assist, mounted inside
   page content) and .np-root (Option C — 38b's always-visible panel
   column). Neither ever fixes position, scrims, or overlays anything —
   the inline accordion pushes content down in normal flow.
   ============================================================= */

.ni-root, .np-root {
  --nd-ink:   var(--ink, #0E2A3A);
  --nd-pink:  var(--pink, #00B5D8);
  --nd-lemon: var(--lemon, #FFC857);
  --nd-mute:  var(--mute, #4A6678);
  --nd-rule:  var(--rule, #DDE9EE);
  --nd-cream: var(--cream, #FFFFFF);
  --nd-ease:  cubic-bezier(.22, .61, .36, 1);
  font-family: 'Inter', system-ui, sans-serif;
}

/* ─── SHARED INNER PRIMITIVES (thread / bubbles / chips / composer) ── */
.nd-greeting { font-size: 14px; color: var(--nd-mute); line-height: 1.4; }

.nd-thread {
  overflow-y: auto;
  /* D2 hardening (2026-07-22 audit) — now that this box genuinely scrolls
     internally (see the dock/np-root height fixes in stage.css/this
     file), keep that scroll from chaining to the page once the thread
     hits its own top/bottom bound. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nd-bubble {
  max-width: 92%;
  padding: 10px 14px;
  border: 2px solid var(--nd-ink);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.nd-bubble--assistant {
  align-self: flex-start;
  background: var(--nd-cream);
  box-shadow: 3px 3px 0 var(--nd-ink);
  border-bottom-left-radius: 4px;
}
.nd-bubble--user {
  align-self: flex-end;
  background: var(--nd-pink);
  color: #fff;
  border-color: var(--nd-ink);
  box-shadow: 3px 3px 0 var(--nd-ink);
  border-bottom-right-radius: 4px;
}

/* Loop3 D2 (walkthrough-evidence/loop3-38a) — block-level markdown the
   inline-assist answer renderer now understands (nora-drawer.js's
   renderBlockMarkdown): headings, bullet lists, and rules inside a
   multi-plan answer. Margins are intentionally tight — these render
   inside a chat bubble, not a document. */
.nd-bubble p.nd-md-line,
.nd-bubble p.nd-md-heading {
  margin: 0 0 8px;
}
.nd-bubble p.nd-md-line:last-child,
.nd-bubble p.nd-md-heading:last-child {
  margin-bottom: 0;
}
.nd-bubble p.nd-md-heading {
  font-weight: 700;
}
.nd-bubble ul.nd-list {
  margin: 0 0 8px;
  padding-left: 20px;
}
.nd-bubble ul.nd-list:last-child {
  margin-bottom: 0;
}
.nd-bubble ul.nd-list li {
  margin-bottom: 3px;
}
.nd-bubble ul.nd-list li:last-child {
  margin-bottom: 0;
}
.nd-bubble hr.nd-rule {
  border: none;
  border-top: 1.5px solid var(--nd-rule);
  margin: 8px 0;
}

.nd-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--nd-ink);
  opacity: .35;
  animation: nd-typing-bounce 1s var(--nd-ease) infinite;
}
.nd-typing span:nth-child(2) { animation-delay: .15s; }
.nd-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nd-typing-bounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .nd-typing span { animation: none; opacity: .6; }
}

.nd-census-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-census-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 5px 9px;
  border: 2px solid var(--nd-ink);
  border-radius: 999px;
  background: var(--sky, #BFE9F0);
  color: var(--nd-ink);
}

.nd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-chip {
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--nd-ink);
  border-radius: 999px;
  background: var(--nd-cream);
  color: var(--nd-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--nd-ink);
  transition: transform 150ms var(--nd-ease), box-shadow 150ms var(--nd-ease);
}
.nd-chip:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--nd-ink); }
.nd-chip:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .nd-chip { transition: none; }
  .nd-chip:hover { transform: none; }
}

.nd-composer { display: flex; gap: 8px; }
.nd-input {
  flex: 1;
  /* D3 fix (2026-07-22 audit) — a flex child's default min-width is `auto`
     (its own content/intrinsic width), which can floor the composer row
     wider than a narrow host and force the whole strip/panel to overflow.
     0 lets it actually shrink with its container, same fix as the grid
     column above. */
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--nd-ink);
  border-radius: 999px;
  font-size: 15px;
  font-family: inherit;
  color: var(--nd-ink);
  background: var(--nd-cream);
}
.nd-input:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 1px; }
.nd-send {
  min-width: 44px;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--nd-ink);
  border-radius: 999px;
  background: var(--nd-ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--nd-lemon);
  transition: transform 150ms var(--nd-ease);
}
.nd-send:hover { transform: translateY(-1px); }
.nd-send:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .nd-send { transition: none; }
  .nd-send:hover { transform: none; }
}

.nd-held-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 6px 10px;
  border: 2px solid var(--nd-ink);
  border-radius: 999px;
  background: var(--nd-lemon);
  color: var(--nd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

/* F4 (direct-fixes, 2026-07-22) — same responsive truncation as the Stage
   header chip (stage.css's .stage-chip-*): drop the carrier/detail chunk
   first, then the addon tag, before ever falling back to the ellipsis
   above. Plan name is never hidden here. */
@media (max-width: 560px) {
  .nd-held-chip-carrier, .nd-held-chip-detail { display: none; }
}
@media (max-width: 380px) {
  .nd-held-chip-addon { display: none; }
  .nd-held-chip {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
  }
}

.nd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   OPTION A — INLINE ASSIST (.ni-root)
   A slim strip attached to the thing being decided. Tapping a chip or
   "Ask your own question" expands an accordion IN PLACE, pushing
   content below it down — it is a normal-flow block, never a fixed
   overlay, so there is no scrim and no z-index to manage.
   ============================================================= */
.ni-root { display: block; }

.ni-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
  padding: 14px 16px;
  border: 2px solid var(--nd-ink);
  border-radius: 16px;
  background: var(--nd-cream);
  box-shadow: 3px 3px 0 var(--nd-ink);
  cursor: pointer;
}
.ni-strip:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 2px; }

.ni-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--nd-ink);
  border-radius: 50%;
  background: var(--nd-lemon);
  color: var(--nd-ink);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Narrow hosts (e.g. the identity summary rail, ~280-340px) — without a
   floor width, .ni-strip-main gets squeezed down to almost nothing once
   .ni-ask claims its own space in the same row, collapsing the chip
   pills into near-circular blobs as their text wraps. A flex-basis floor
   plus .ni-strip's own flex-wrap (above) lets .ni-ask drop to its own
   line instead of fighting the chips for room. */
.ni-strip-main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ni-strip .ni-line { margin: 0; padding-top: 4px; }

.ni-ask {
  flex: 1 1 100%;
  align-self: flex-start;
  min-height: 36px;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  color: var(--nd-mute);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ni-ask:hover { color: var(--nd-ink); }
.ni-ask:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 1px; border-radius: 6px; }

/* Accordion — grid-rows 0fr -> 1fr transitions height without a JS
   measurement pass; overflow:hidden clips the collapsed state. Never
   uses [hidden] (stage.css's global `[hidden]{display:none!important}`
   would block the transition entirely). */
.ni-answer {
  display: grid;
  /* D3 fix (2026-07-22 audit) — with no explicit column track, the grid's
     single implicit column sizes to its content's max-content width
     (whichever descendant is intrinsically widest — the composer row's
     nd-input/nd-send pair, most often) instead of the host's own width,
     letting the accordion overflow a narrow host (measured live on the
     375px family-census strip). Bounding the column to the host's own
     width fixes that at every width the strip renders in. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--nd-ease);
  margin-top: 10px;
}
.ni-answer--open { grid-template-rows: 1fr; }
.ni-answer-inner {
  overflow: hidden;
  min-height: 0;
  border: 2px solid var(--nd-ink);
  border-radius: 16px;
  background: var(--nd-cream);
  box-shadow: 3px 3px 0 var(--nd-ink);
}
.ni-answer--open .ni-answer-inner { overflow: visible; }
.ni-answer .nd-thread { max-height: 46vh; padding: 14px 16px 4px; }
.ni-answer .nd-census-chips { padding: 0 16px 10px; }
.ni-answer .nd-composer { padding: 12px 14px; border-top: 2px solid var(--nd-rule); }

.ni-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 2px solid var(--nd-ink);
}
.ni-answer-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--nd-ink);
}
.ni-collapse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 32px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--nd-mute);
  cursor: pointer;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ni-collapse-label { font-size: 12px; }
.ni-collapse:hover { background: var(--nd-rule); color: var(--nd-ink); }
.ni-collapse:focus-visible { outline: 2px solid var(--nd-pink); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ni-answer { transition: none; }
}

/* ─── HELPER VARIANT — a single quiet line during the question steps.
   No mark, no chips, no "ask your own question" button, no hard-shadow
   card chrome; the line itself is the affordance. Still expands the
   same accordion beneath it when tapped. ───────────────────────── */
.ni-root--helper .ni-strip {
  padding: 6px 2px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 8px;
}
.ni-root--helper .ni-mark { display: none; }
.ni-root--helper .ni-ask { display: none; }
.ni-root--helper .ni-chips { display: none !important; }
.ni-root--helper .ni-line {
  padding-top: 0;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--nd-rule);
  text-underline-offset: 3px;
}
.ni-root--helper .ni-answer-inner { border-radius: 12px; }

/* ─── CENSUS VARIANT — 38a family-wait only (see censusInlineMarkup in
   nora-drawer.js). No .ni-strip exists at all here, so .ni-answer's
   default 10px margin-top is the only space above the card; the head
   row has just a title (no collapse button) since the interview is
   required, not dismissable. ───────────────────────────────────── */
.ni-root--census .ni-answer { margin-top: 0; }

/* =============================================================
   OPTION C — FIRST-CLASS PANEL (.np-root, 38b takeover only)
   Permanently visible: greeting + chips + thread + composer, no
   collapse, no close. Renders straight into a layout column (the
   Stage's own docked-column CSS in stage.css handles the sticky
   positioning) — this file only owns the panel's own chrome.
   ============================================================= */
.np-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 18px;
  border: 2px solid var(--nd-ink);
  border-radius: 20px;
  background: var(--nd-cream);
  box-shadow: 4px 4px 0 var(--nd-ink);
  box-sizing: border-box;
  /* D2 fix (2026-07-22 audit) — belt-and-suspenders alongside the dock's
     own height+overflow fix (stage.css): even once `height: 100%` above
     resolves to a real pixel value, the panel itself should never be the
     thing that grows past it. The thread (`flex: 1; overflow-y: auto`) is
     the only element meant to scroll. */
  overflow: hidden;
}

.np-header { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* B1 fix (fix-round-1) — the mockup's .chat-head pattern (chat-options-
   mockup.html's O1 panel) pairs the "N" avatar mark with a "Nora" /
   "AI assistant, not a licensed agent" two-line label. .np-header-text
   is the flex:1 min-width:0 child so the held-price chip still gets
   pushed to the far right without squeezing the avatar. */
.np-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--nd-ink);
  border-radius: 50%;
  background: var(--nd-lemon);
  color: var(--nd-ink);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-header-text { flex: 1; min-width: 0; }
.np-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--nd-ink);
}
.np-role {
  margin: 0;
  font-size: 11px;
  color: var(--nd-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-line { flex-shrink: 0; }
.np-chips { flex-shrink: 0; }
.np-root .nd-thread { flex: 1; min-height: 120px; }
.np-root .nd-census-chips { flex-shrink: 0; }
.np-root .nd-composer { flex-shrink: 0; border-top: 2px solid var(--nd-rule); padding-top: 12px; }

[hidden] { display: none !important; }