/* One answer surface inside the document column, outside contenteditable.
   Motion purpose: state indication while the requested explanation arrives. */
.notes-page .doc-inner { position: relative; }
::highlight(studycore-notes-answer) { background: var(--sc-accent-soft); color: var(--sc-ink); }
.notes-page .nb-answer {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 18px 0 24px;
  border: 0;
  border-radius: var(--sc-r-card, 22px);
  background: var(--sc-surface, #fff);
  color: var(--sc-ink, #171a1f);
  box-shadow: var(--sc-shadow-card, 0 1px 3px #171a1f0e, 0 10px 30px -12px #171a1f1f);
  outline: 1px solid color-mix(in srgb, var(--sc-line, #e8e5dd) 55%, transparent);
  font: 400 15px/1.65 var(--sc-font-body, Inter, sans-serif);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.notes-page .nb-answer[hidden], .notes-page .nb-answer [hidden] { display: none !important; }
.notes-page .nb-answer.is-entering, .notes-page .nb-answer.is-leaving { opacity: 0; transform: translateY(4px); }
.nb-answer-head { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 4px 12px 4px 16px; box-sizing: border-box; }
.nb-answer-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.4; }
.nb-answer:is([data-state="preparing"], [data-state="generating"]) .nb-answer-title { font-weight: 400; color: var(--sc-ink-soft, #4b5563); }
.nb-answer-mark { position: relative; display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.nb-answer-mark svg, .nb-answer-mark img { position: absolute; inset: 0; display: block; width: 24px; height: 24px; transition: opacity 200ms var(--sc-ease-out); }
.nb-answer-mark svg { color: var(--sc-accent, #2e5bff); opacity: 0; }
.nb-answer-mark img { opacity: 1; border-radius: 7px; }
.nb-answer:is([data-state="preparing"], [data-state="generating"], [data-state="streaming"]) .nb-answer-mark svg { opacity: 1; }
.nb-answer:is([data-state="preparing"], [data-state="generating"], [data-state="streaming"]) .nb-answer-mark img { opacity: 0; }
.nb-answer-core, .nb-answer-orbit { transform-origin: 32px 32px; }
.nb-answer:is([data-state="preparing"], [data-state="generating"], [data-state="streaming"]) .nb-answer-core { animation: nb-answer-pulse 1600ms var(--sc-ease-in-out) infinite; }
.nb-answer:is([data-state="preparing"], [data-state="generating"], [data-state="streaming"]) .nb-answer-orbit { animation: nb-answer-orbit 2400ms linear infinite; }
.nb-answer:is([data-state="preparing"], [data-state="generating"], [data-state="streaming"]) .nb-answer-orbit-second { animation-duration: 3200ms; animation-direction: reverse; }
@keyframes nb-answer-pulse { 0%, 100% { opacity: .8; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes nb-answer-orbit { to { transform: rotate(360deg); } }
.notes-page .nb-answer button { box-sizing: border-box; min-height: 44px; border: 0; border-radius: 10px; padding: 10px 13px; color: var(--sc-ink-soft, #4b5563); background: transparent; font: 600 13px/1.4 var(--sc-font-body, Inter, sans-serif); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--sc-ease-out); }
.notes-page .nb-answer button:disabled { opacity: .5; cursor: not-allowed; }
.notes-page .nb-answer button:active:not(:disabled) { transform: scale(.97); }
.notes-page .nb-answer :is(button, a):focus-visible { outline: 2px solid var(--sc-accent, #2e5bff); outline-offset: 3px; }
.notes-page .nb-answer .nb-answer-stop { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
.nb-answer-stop span { width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.nb-answer-stop svg { width: 16px; height: 16px; }
.notes-page .nb-answer-body { min-width: 0; padding: 0 20px 4px 51px; overflow-wrap: anywhere; white-space: normal; }
.nb-answer-body:empty { display: none; }
.notes-page .nb-answer-body p { margin: 8px 0 18px; line-height: 1.65; }
.notes-page .nb-answer-body :is(h1, h2, h3) { margin: 24px 0 8px; color: inherit; font: 650 17px/1.35 var(--sc-font-body, Inter, sans-serif); letter-spacing: -.01em; }
.notes-page .nb-answer-body h3 { font-size: 16px; }
.notes-page .nb-answer-body > :first-child { margin-top: 4px; }
.notes-page .nb-answer-body > :last-child { margin-bottom: 10px; }
.notes-page .nb-answer-body :is(strong, b) { font-weight: 650; }
.notes-page .nb-answer-body :is(ul, ol) { margin: 10px 0 18px; padding-left: 24px; }
.notes-page .nb-answer-body li { margin: 7px 0; padding-left: 2px; }
.notes-page .nb-answer-body li > p { margin: 0; }
.notes-page .nb-answer-body li > :is(ul, ol) { margin: 7px 0 10px; }
.notes-page .nb-answer-body blockquote { margin: 16px 0; padding: 1px 0 1px 15px; border-left: 2px solid var(--sc-line, #e8e5dd); color: var(--sc-ink-soft, #4b5563); }
.notes-page .nb-answer-body blockquote > :last-child { margin-bottom: 8px; }
.notes-page .nb-answer-body code { font: .86em/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--sc-paper, #f6f4ef); padding: 2px 5px; border-radius: 4px; }
.notes-page .nb-answer-body pre { max-width: 100%; overflow-x: auto; margin: 14px 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--sc-paper, #f6f4ef); white-space: pre; }
.notes-page .nb-answer-body pre code { display: block; padding: 0; border-radius: 0; overflow-wrap: normal; }
.notes-page .nb-answer-body a, .notes-page .nb-answer-sources a { color: var(--sc-accent-deep, #244bd9); text-underline-offset: 3px; }
.nb-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 20px 20px 51px; }
.notes-page .nb-answer .nb-answer-insert { color: #fff; background: var(--sc-accent, #2e5bff); }
.notes-page .nb-answer :is(.nb-answer-replace, .nb-answer-retry) { color: var(--sc-ink, #171a1f); background: var(--sc-paper, #f6f4ef); }
.nb-answer-notice { margin: 0; padding: 0 20px 18px 51px; color: var(--sc-ink-soft, #4b5563); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.nb-answer[data-state="error"] .nb-answer-title { color: var(--sc-red, #de5b4e); }
.nb-answer-sources { padding: 8px 20px 8px 51px; color: var(--sc-ink-soft, #4b5563); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.nb-answer-sources:empty { display: none; }
.notes-page .nb-answer-sources :is(article, p) { margin: 7px 0; padding: 0; background: transparent; box-shadow: none; }
.notes-page .nb-answer-sources strong { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .notes-page .nb-answer button:hover:not(:disabled) { background: var(--sc-paper, #f6f4ef); color: var(--sc-ink, #171a1f); }
  .notes-page .nb-answer .nb-answer-insert:hover:not(:disabled) { background: var(--sc-accent-deep, #244bd9); color: #fff; }
  .notes-page .nb-answer :is(.nb-answer-replace, .nb-answer-retry):hover:not(:disabled) { background: var(--sc-accent-soft, #ebf0ff); }
}
@media (max-width: 600px) {
  .notes-page .nb-answer { font-size: 16px; }
  .notes-page .nb-answer-body { padding-left: 20px; }
  .nb-answer-actions { padding-left: 20px; }
  .notes-page .nb-answer .nb-answer-insert { width: 100%; }
  .notes-page .nb-answer :is(.nb-answer-replace, .nb-answer-close) { flex: 1; }
  .nb-answer-notice, .nb-answer-sources { padding-left: 20px; }
}
html[data-sc-theme="dark"] .notes-page .nb-answer { outline-color: var(--sc-line); }
@media (prefers-reduced-motion: reduce) {
  .notes-page .nb-answer, .notes-page .nb-answer.is-entering, .notes-page .nb-answer.is-leaving { transform: none; transition: opacity 150ms ease; }
  .nb-answer .nb-answer-core, .nb-answer .nb-answer-orbit { animation: none !important; }
  .nb-answer-mark svg, .nb-answer-mark img { transition-duration: 150ms; }
  .notes-page .nb-answer button { transition: background-color 150ms ease, color 150ms ease; }
  .notes-page .nb-answer button:active:not(:disabled) { transform: none; }
}

@starting-style{.notes-page .nb-answer{opacity:0;transform:translateY(4px);}}
@media(prefers-reduced-motion:reduce){@starting-style{.notes-page .nb-answer{transform:none;}}}

.nb-answer-actions:empty,.nb-answer-sources:empty{display:none;}

/* Stel een vraag · BÈTA — composer and conversation in the same answer card.
   Visual source: the approved sketch (context pills inside the field). */
.nb-beta { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 7px; border-radius: var(--sc-r-pill, 999px); background: var(--sc-inverse, #171a1f); color: #fff; font: 700 9.5px/1 var(--sc-font-body, Inter, sans-serif); letter-spacing: .08em; }
.notes-page .nb-selection .nb-ask-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0; background: var(--sc-accent-soft, #ebf0ff); color: var(--sc-accent-deep, #1f44cc); font-weight: 600; }
.notes-page .nb-selection .nb-ask-entry .nb-beta, .notes-page .nb-answer .nb-answer-ask .nb-beta { background: var(--sc-accent, #2e5bff); }
.notes-page .nb-selection .nb-ask-entry:focus-visible { outline: 2px solid var(--sc-accent, #2e5bff); outline-offset: 2px; }
.nb-ask-heading { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.nb-ask .nb-ask-heading .nb-answer-title { flex: 0 1 auto; }
.nb-ask-about { color: var(--sc-muted, #8a8f98); font-size: 12px; font-weight: 500; }
.notes-page .nb-answer .nb-ask-x { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; color: var(--sc-muted, #8a8f98); font: 600 18px/1 var(--sc-font-body, Inter, sans-serif); }
.nb-ask-history, .nb-ask-question, .nb-ask-composer, .nb-ask-done { margin-left: 51px; margin-right: 20px; }
.nb-ask-question { display: flex; gap: 10px; margin-top: 2px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sc-accent-soft, #ebf0ff) 70%, var(--sc-surface, #fff)); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.nb-ask-question b { flex: 0 0 auto; padding-top: 2px; color: var(--sc-accent-deep, #1f44cc); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nb-ask-history .nb-ask-question { margin-left: 0; margin-right: 0; }
.nb-ask-question.is-past { opacity: .75; margin-bottom: 4px; }
.nb-ask-fold { margin: 0 0 12px; color: var(--sc-muted, #8a8f98); font-size: 13px; }
.notes-page .nb-answer .nb-ask-fold button { min-height: 44px; padding: 0 6px; color: var(--sc-ink-soft, #4b5563); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nb-ask-past { margin: 0 0 12px; padding: 4px 12px; border-left: 2px solid var(--sc-line, #e8e5dd); color: var(--sc-ink-soft, #4b5563); font-size: 14px; }
.nb-ask-past p { margin: 6px 0 10px; }
.nb-ask-composer { display: grid; gap: 12px; margin-bottom: 2px; }
.nb-ask-seg { display: inline-flex; justify-self: start; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--sc-r-pill, 999px); background: var(--sc-paper, #f6f4ef); }
.nb-ask-seg[hidden] { display: none; }
.notes-page .nb-answer .nb-ask-seg button { min-height: 36px; padding: 6px 12px; border-radius: var(--sc-r-pill, 999px); color: var(--sc-ink-soft, #4b5563); font-size: 12.5px; }
.notes-page .nb-answer .nb-ask-seg button[aria-checked="true"] { background: var(--sc-surface, #fff); color: var(--sc-ink, #171a1f); box-shadow: 0 1px 2px #171a1f1a; }
.nb-ask-field { box-sizing: border-box; padding: 8px 10px 4px; border: 1.5px solid var(--sc-line, #e8e5dd); border-radius: var(--sc-r-control, 14px); background: var(--sc-surface, #fff); transition: border-color 160ms ease, box-shadow 160ms ease; }
.nb-ask-field:focus-within { border-color: color-mix(in srgb, var(--sc-accent, #2e5bff) 45%, var(--sc-line, #e8e5dd)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc-accent, #2e5bff) 10%, transparent); }
.nb-ask-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-ask-pills:empty { display: none; }
.nb-ask-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: min(300px, 100%); min-height: 28px; padding: 0 4px 0 9px; border-radius: 8px; background: var(--sc-paper, #f6f4ef); color: var(--sc-ink-soft, #4b5563); font: 500 12.5px/1.3 var(--sc-font-body, Inter, sans-serif); cursor: default; }
.nb-ask-pill:not(:has(.nb-ask-pill-remove)) { padding-right: 9px; }
.nb-ask-pill:focus-visible { outline: 2px solid var(--sc-accent, #2e5bff); outline-offset: 2px; }
.nb-ask-pill-icon { flex: 0 0 auto; color: var(--sc-accent, #2e5bff); font: 700 13px/1 var(--sc-font-display, sans-serif); }
.nb-ask-pill.is-ai .nb-ask-pill-icon { color: #9a6512; }
.nb-ask-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-page .nb-answer .nb-ask-pill-remove { position: relative; flex: 0 0 24px; width: 24px; min-height: 24px; height: 24px; padding: 0; border-radius: 6px; color: var(--sc-muted, #8a8f98); font: 600 14px/1 var(--sc-font-body, Inter, sans-serif); }
/* The visible × stays compact; its hit area reaches 44px. */
.notes-page .nb-answer .nb-ask-pill-remove::after { content: ""; position: absolute; inset: -10px; }
.nb-ask-tip { position: absolute; left: 0; top: calc(100% + 6px); z-index: 6; box-sizing: border-box; width: min(320px, 70vw); padding: 10px 12px; border-radius: 10px; background: var(--sc-inverse, #171a1f); color: #fff; font: 400 12.5px/1.5 var(--sc-font-body, Inter, sans-serif); white-space: normal; overflow-wrap: anywhere; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-2px); transition: opacity 150ms var(--sc-ease-out), transform 150ms var(--sc-ease-out), visibility 0s linear 150ms; }
.nb-ask-tip-text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.nb-ask-tip small { display: block; margin-top: 4px; color: #f2c572; font-size: 12px; font-weight: 600; }
.nb-ask-pill:focus-within .nb-ask-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.notes-page .nb-answer .nb-ask-restore { min-height: 32px; padding: 4px 10px; border-radius: 8px; background: var(--sc-paper, #f6f4ef); color: var(--sc-accent-deep, #1f44cc); font-size: 12.5px; }
.nb-ask-field textarea { display: block; box-sizing: border-box; width: 100%; min-height: 64px; max-height: 220px; margin: 0; padding: 6px 2px; border: 0; outline: none; background: transparent; color: var(--sc-ink, #171a1f); font: 400 15px/1.55 var(--sc-font-body, Inter, sans-serif); resize: none; }
.nb-ask-field textarea::placeholder { color: var(--sc-muted, #8a8f98); }
.nb-ask .nb-answer-actions { padding-top: 12px; }
.nb-ask-meta { margin-left: auto; color: var(--sc-muted, #8a8f98); font-size: 12px; }
.notes-page .nb-answer :is(.nb-answer-send, .nb-answer-followup) { color: #fff; background: var(--sc-accent, #2e5bff); }
.notes-page .nb-ask .nb-answer-insert { color: var(--sc-ink, #171a1f); background: var(--sc-paper, #f6f4ef); }
.notes-page .nb-answer .nb-answer-ask { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-accent-deep, #1f44cc); background: var(--sc-accent-soft, #ebf0ff); }
.nb-ask .nb-answer-sources { padding-top: 2px; }
.notes-page .nb-ask-basis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; color: var(--sc-muted, #8a8f98); font-size: 12px; }
.nb-ask-basis span { padding: 4px 9px; border-radius: var(--sc-r-pill, 999px); background: var(--sc-paper, #f6f4ef); color: var(--sc-ink-soft, #4b5563); font-weight: 600; }
.notes-page .nb-ask-nosource { margin: 4px 0; color: var(--sc-ink-soft, #4b5563); }
.nb-ask-done { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--sc-paper, #f6f4ef); color: var(--sc-ink-soft, #4b5563); font-size: 13px; }
.nb-ask-done[hidden] { display: none; }
.notes-page .nb-answer .nb-ask-restart { margin-left: auto; }
.nb-ask[data-state="composing"] .nb-answer-title { font-weight: 600; color: inherit; }
/* Entitled to the beta: a personal switch in "Jouw vaardigheden". */
.nb-beta-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--sc-r-control, 14px); background: var(--sc-paper, #f6f4ef); }
.nb-beta-switch-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sc-ink, #171a1f); font-weight: 600; }
.nb-beta-switch-copy { margin: 3px 0 0; color: var(--sc-ink-soft, #4b5563); font-size: .8rem; }
.nb-beta-switch .nb-switch[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .nb-ask-pill:hover .nb-ask-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .notes-page .nb-answer .nb-ask-pill-remove:hover { background: color-mix(in srgb, var(--sc-line, #e8e5dd) 80%, var(--sc-paper, #f6f4ef)); color: var(--sc-ink, #171a1f); }
  .notes-page .nb-selection .nb-ask-entry:hover { background: color-mix(in srgb, var(--sc-accent-soft, #ebf0ff) 70%, var(--sc-accent, #2e5bff) 8%); }
  .notes-page .nb-answer :is(.nb-answer-send, .nb-answer-followup):hover:not(:disabled) { background: var(--sc-accent-deep, #1f44cc); color: #fff; }
  .notes-page .nb-ask .nb-answer-insert:hover:not(:disabled), .notes-page .nb-answer .nb-answer-ask:hover:not(:disabled) { background: var(--sc-accent-soft, #ebf0ff); color: var(--sc-accent-deep, #1f44cc); }
}
@media (pointer: coarse) {
  .notes-page .nb-answer .nb-ask-seg button, .notes-page .nb-answer .nb-ask-restore { min-height: 44px; }
}
@media (max-width: 600px) {
  .nb-ask-history, .nb-ask-question, .nb-ask-composer, .nb-ask-done { margin-left: 20px; }
  .nb-ask-meta[id] { display: none; }
  .nb-ask-field textarea { font-size: 16px; }
  .notes-page .nb-ask .nb-answer-insert { width: auto; flex: 1; }
  .notes-page .nb-answer :is(.nb-answer-send, .nb-answer-followup) { width: 100%; }
}
html[data-sc-theme="dark"] .nb-ask-field { background: transparent; }
html[data-sc-theme="dark"] .nb-ask-pill.is-ai .nb-ask-pill-icon { color: var(--sc-amber); }
@media (prefers-reduced-motion: reduce) {
  .nb-ask-field { transition: none; }
  .nb-ask-tip { transform: none; transition: opacity 150ms ease, visibility 0s linear 150ms; }
  .nb-ask-pill:focus-within .nb-ask-tip { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .nb-ask-pill:hover .nb-ask-tip { transform: none; }
}