#nns-chat-tools,
#nns-notes-overlay,
#nns-search-panel,
#nns-note-toast {
  font-family: "DM Sans", system-ui, sans-serif;
  box-sizing: border-box;
}

#nns-chat-tools {
  position: fixed;
  z-index: 1200;
  top: 31px;
  right: 30px;
  display: none;
  align-items: center;
  gap: 9px;
}

#nns-chat-tools.is-visible { display: flex; }

.nns-tool-button,
.nns-close,
.nns-search-head button {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #2b3131;
  border-radius: 11px;
  color: #aeb8b6;
  background: #171b1c;
  cursor: pointer;
  transition: 160ms ease;
}

.nns-tool-button:hover,
.nns-close:hover,
.nns-search-head button:hover {
  color: #eef4f2;
  border-color: #475150;
  transform: translateY(-1px);
}

.nns-tool-primary {
  color: #062b23;
  border-color: #16c696;
  background: #16c696;
}

.nns-tool-primary:hover { color: #062b23; background: #28d7a6; }
.nns-tool-button svg, .nns-close svg, .nns-search-head svg, .nns-new-note svg, .nns-notes-header h2 svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

#nns-notes-overlay {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  color: #e8efed;
  background: rgb(4 7 8 / 78%);
  backdrop-filter: blur(8px);
}

.nns-notes-window {
  width: min(1100px, 96vw);
  height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #303737;
  border-radius: 20px;
  background: #111516;
  box-shadow: 0 30px 100px rgb(0 0 0 / 55%);
}

.nns-notes-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #292f30;
}

.nns-notes-header h2 { display: flex; align-items: center; gap: 10px; margin: 3px 0 0; color: #f2f7f5; font: 600 22px/1.1 "Space Grotesk", sans-serif; }
.nns-notes-header h2 svg { color: #16c696; }
.nns-kicker { color: #7e8b88; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nns-notes-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 290px 1fr; }
.nns-note-list-panel { min-height: 0; overflow-y: auto; padding: 16px; border-right: 1px solid #292f30; background: #0e1213; }

.nns-new-note {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid #16c696; border-radius: 11px; color: #052b22; background: #16c696; font-weight: 700; cursor: pointer;
}
.nns-new-note:hover { background: #29d7a7; }
.nns-new-note svg { width: 17px; height: 17px; }

.nns-note-card {
  width: 100%; display: flex; flex-direction: column; gap: 5px; padding: 13px; margin-bottom: 9px; text-align: left;
  border: 1px solid #282f30; border-radius: 12px; color: #e3eae8; background: #151a1b; cursor: pointer;
}
.nns-note-card:hover { border-color: #44504e; }
.nns-note-card.active { border-color: #16c696; background: #14221f; box-shadow: inset 3px 0 #16c696; }
.nns-note-card strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.nns-note-card span { overflow: hidden; color: #9aa5a2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nns-note-card small { color: #65716f; font-size: 10px; }

.nns-note-editor { min-width: 0; overflow-y: auto; padding: 25px 28px 34px; }
.nns-editor-topline { display: flex; align-items: center; justify-content: space-between; min-height: 24px; color: #77827f; font-size: 12px; }
.nns-editor-topline strong { color: #b7c1be; }
.nns-note-title, .nns-note-content {
  box-sizing: border-box; width: 100%; border: 0; outline: 0; color: #edf3f1; background: transparent; font-family: inherit;
}
.nns-note-title { padding: 13px 0 11px; border-bottom: 1px solid #2b3232; font: 600 28px/1.25 "Space Grotesk", sans-serif; }
.nns-note-title::placeholder, .nns-note-content::placeholder { color: #56615f; }
.nns-note-content { min-height: 245px; resize: vertical; padding: 18px 0; font-size: 15px; line-height: 1.75; }
.nns-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 15px; border-top: 1px solid #2b3232; color: #7f8b88; font-size: 11px; }
.nns-form-actions strong { color: #aeb9b6; }
.nns-save-note { flex: none; padding: 10px 18px; border: 0; border-radius: 10px; color: #052b22; background: #16c696; font-weight: 700; cursor: pointer; }
.nns-save-note:hover { background: #29d7a7; }
.nns-save-note:disabled { cursor: wait; opacity: .6; }

.nns-audit-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 24px; }
.nns-audit-grid > section { min-width: 0; padding: 16px; border: 1px solid #293031; border-radius: 13px; background: #0e1213; }
.nns-audit-grid h3 { margin: 0 0 12px; color: #dce5e2; font: 600 13px "Space Grotesk", sans-serif; }
.nns-line-audit, .nns-history { max-height: 210px; overflow-y: auto; }
.nns-line-audit > div { display: grid; grid-template-columns: 24px 1fr; gap: 1px 9px; padding: 8px 0; border-top: 1px solid #212727; }
.nns-line-audit b { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #80d7bf; background: #17332c; font-size: 10px; }
.nns-line-audit span { overflow: hidden; color: #c8d1cf; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nns-line-audit small, .nns-history small { color: #687472; font-size: 10px; }
.nns-history > div { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid #212727; color: #b8c2bf; font-size: 11px; }
.nns-muted, .nns-search-results > p { color: #6f7b78; font-size: 12px; line-height: 1.55; }

#nns-search-panel {
  position: fixed; z-index: 1800; top: 24px; right: 25px; width: min(430px, calc(100vw - 40px)); max-height: min(620px, calc(100vh - 48px));
  overflow: hidden; border: 1px solid #303838; border-radius: 15px; color: #e8efed; background: #111516; box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
}
.nns-search-head { display: flex; align-items: center; gap: 10px; padding: 11px; border-bottom: 1px solid #293031; }
.nns-search-head > svg { flex: none; margin-left: 5px; color: #7d8986; }
.nns-search-head input { min-width: 0; flex: 1; padding: 10px 2px; border: 0; outline: 0; color: #edf3f1; background: transparent; font-size: 14px; }
.nns-search-head button { width: 34px; height: 34px; }
.nns-search-results { max-height: 520px; overflow-y: auto; padding: 10px; }
.nns-search-result { padding: 12px; border-bottom: 1px solid #252c2c; }
.nns-search-result > div { display: flex; justify-content: space-between; gap: 12px; color: #9fe1ce; font-size: 11px; }
.nns-search-result time { color: #687472; }
.nns-search-result p { margin: 6px 0 0; color: #c9d2d0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.nns-error { color: #ff8d8d !important; }

#nns-note-toast {
  position: fixed; z-index: 3000; left: 50%; bottom: 28px; padding: 11px 17px; border: 1px solid #2c7060; border-radius: 10px;
  color: #dff7ef; background: #173c33; box-shadow: 0 12px 40px rgb(0 0 0 / 40%); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: 180ms ease;
}
#nns-note-toast.show { opacity: 1; transform: translate(-50%, 0); }
#nns-note-toast[data-tone="error"] { border-color: #7e3434; color: #ffdede; background: #402020; }

.nns-tool-button { position: relative; }
.nns-pin-count {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; display: none; place-items: center;
  padding: 0 3px; border: 2px solid #111516; border-radius: 999px; color: #062b23; background: #16c696;
  font-size: 9px; font-weight: 800; line-height: 1;
}
.nns-pin-count.has-pins { display: grid; }

.nns-message-pin-action {
  flex: none; align-self: center; width: 27px; height: 27px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; color: #75817e; background: transparent; opacity: 0; cursor: pointer;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}
[id^="msg-"]:hover > .nns-message-pin-action,
.nns-message-pin-action:focus-visible,
.nns-message-pin-action.is-pinned { opacity: 1; }
.nns-message-pin-action:hover { color: #b9c5c1; background: #202627; transform: rotate(-8deg); }
.nns-message-pin-action.is-pinned { color: #16c696; }
.nns-message-pin-action svg, #nns-pin-drawer svg, .nns-search-pin svg, .nns-pinned-remove svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

#nns-floating-pin {
  position: fixed; z-index: 1250; width: 29px; height: 29px; display: grid; place-items: center; padding: 0;
  border: 1px solid #313a38; border-radius: 9px; color: #87938f; background: #171c1c;
  box-shadow: 0 5px 18px rgb(0 0 0 / 30%); opacity: 0; pointer-events: none; transform: scale(.88);
  cursor: pointer; transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, background 120ms ease;
}
#nns-floating-pin.show { opacity: 1; pointer-events: auto; transform: scale(1); }
#nns-floating-pin:hover { color: #dbe6e2; background: #202827; }
#nns-floating-pin.is-pinned { color: #16c696; border-color: #287a64; }
#nns-floating-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.nns-message-jump > div {
  animation: nns-message-focus 2.1s ease-out;
}
@keyframes nns-message-focus {
  0%, 28% { filter: drop-shadow(0 0 9px #16c696); transform: scale(1.035); }
  100% { filter: none; transform: scale(1); }
}

#nns-pin-backdrop {
  position: fixed; z-index: 1900; inset: 0; overflow: hidden; background: rgb(4 7 8 / 0%);
  transition: background 260ms ease;
}
#nns-pin-backdrop.open { background: rgb(4 7 8 / 56%); }
#nns-pin-drawer {
  position: absolute; top: 0; right: 0; width: min(420px, 92vw); height: 100%; display: flex; flex-direction: column;
  color: #e8efed; border-left: 1px solid #303737; background: #111516; box-shadow: -25px 0 70px rgb(0 0 0 / 35%);
  transform: translateX(102%); transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
#nns-pin-backdrop.open #nns-pin-drawer { transform: translateX(0); }
#nns-pin-drawer > header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border-bottom: 1px solid #293031; }
#nns-pin-drawer h2 { display: flex; align-items: center; gap: 9px; margin: 4px 0 0; color: #eff5f3; font: 600 20px "Space Grotesk", sans-serif; }
#nns-pin-drawer h2 svg { color: #16c696; }
#nns-pin-drawer header button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #2b3131; border-radius: 10px; color: #9aa6a3; background: #171b1c; cursor: pointer; }
#nns-pin-list { min-height: 0; flex: 1; overflow-y: auto; padding: 13px; }
.nns-pinned-card { position: relative; margin-bottom: 9px; border: 1px solid #293031; border-radius: 13px; background: #151a1b; transition: border-color 150ms ease, background 150ms ease; }
.nns-pinned-card:hover { border-color: #44504d; background: #18201e; }
.nns-pinned-jump { width: 100%; padding: 14px 43px 14px 14px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.nns-pinned-jump > div { display: flex; justify-content: space-between; gap: 10px; color: #8fd9c3; font-size: 11px; }
.nns-pinned-jump time, .nns-pinned-jump small { color: #687572; }
.nns-pinned-jump p { display: -webkit-box; overflow: hidden; margin: 7px 0; color: #cbd4d2; font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-wrap; }
.nns-pinned-jump small { font-size: 10px; }
.nns-pinned-remove { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #6f7c78; background: transparent; cursor: pointer; }
.nns-pinned-remove:hover { color: #ff9797; background: #351e1e; }
.nns-pin-empty { display: flex; flex-direction: column; align-items: center; padding: 70px 25px; color: #687572; text-align: center; }
.nns-pin-empty > svg { width: 31px !important; height: 31px !important; margin-bottom: 12px; color: #16c696; }
.nns-pin-empty h3 { margin: 0 0 5px; color: #dce5e2; font-size: 14px; }
.nns-pin-empty p { margin: 0; font-size: 12px; line-height: 1.5; }

.nns-search-result { position: relative; }
.nns-search-jump { width: 100%; padding: 0 34px 0 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.nns-search-jump > div { display: flex; justify-content: space-between; gap: 12px; color: #9fe1ce; font-size: 11px; }
.nns-search-jump time { color: #687472; }
.nns-search-jump p { margin: 6px 0 0; color: #c9d2d0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.nns-search-pin { position: absolute; top: 9px; right: 5px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #74817d; background: transparent; cursor: pointer; }
.nns-search-pin:hover { color: #16c696; background: #1c2724; }

/* Follow the host application's live light-mode setting. */
html[data-mode="light"] .nns-tool-button,
html[data-mode="light"] .nns-close,
html[data-mode="light"] .nns-search-head button {
  color: #53615d;
  border-color: #d8deda;
  background: #f4f4f1;
  box-shadow: 0 3px 12px rgb(30 52 45 / 7%);
}

html[data-mode="light"] .nns-tool-button:hover,
html[data-mode="light"] .nns-close:hover,
html[data-mode="light"] .nns-search-head button:hover {
  color: #14201d;
  border-color: #aebbb6;
  background: #fff;
}

html[data-mode="light"] .nns-tool-primary,
html[data-mode="light"] .nns-tool-primary:hover {
  color: #f7fffc;
  border-color: #087d5e;
  background: #087d5e;
}

html[data-mode="light"] #nns-notes-overlay {
  color: #18221f;
  background: rgb(232 237 233 / 78%);
}

html[data-mode="light"] .nns-notes-window {
  border-color: #d7ded9;
  background: #fbfbf8;
  box-shadow: 0 28px 90px rgb(40 58 51 / 24%);
}

html[data-mode="light"] .nns-notes-header {
  border-bottom-color: #dde3df;
}

html[data-mode="light"] .nns-notes-header h2 { color: #17221f; }
html[data-mode="light"] .nns-notes-header h2 svg { color: #087d5e; }
html[data-mode="light"] .nns-kicker { color: #71807b; }

html[data-mode="light"] .nns-note-list-panel {
  border-right-color: #dde3df;
  background: #f2f3ef;
}

html[data-mode="light"] .nns-new-note,
html[data-mode="light"] .nns-save-note {
  color: #fff;
  border-color: #087d5e;
  background: #087d5e;
}

html[data-mode="light"] .nns-new-note:hover,
html[data-mode="light"] .nns-save-note:hover { background: #076e54; }

html[data-mode="light"] .nns-note-card {
  color: #1b2623;
  border-color: #d9e0dc;
  background: #fff;
  box-shadow: 0 2px 8px rgb(32 55 47 / 4%);
}

html[data-mode="light"] .nns-note-card:hover { border-color: #aebdb7; }
html[data-mode="light"] .nns-note-card.active {
  border-color: #168a6b;
  background: #eaf5f0;
  box-shadow: inset 3px 0 #087d5e;
}
html[data-mode="light"] .nns-note-card span { color: #5f6d68; }
html[data-mode="light"] .nns-note-card small { color: #84908c; }

html[data-mode="light"] .nns-editor-topline,
html[data-mode="light"] .nns-form-actions { color: #71807b; }
html[data-mode="light"] .nns-editor-topline strong,
html[data-mode="light"] .nns-form-actions strong { color: #34423e; }
html[data-mode="light"] .nns-note-title,
html[data-mode="light"] .nns-note-content { color: #17211e; }
html[data-mode="light"] .nns-note-title { border-bottom-color: #dce2de; }
html[data-mode="light"] .nns-note-title::placeholder,
html[data-mode="light"] .nns-note-content::placeholder { color: #98a39f; }
html[data-mode="light"] .nns-form-actions { border-top-color: #dce2de; }

html[data-mode="light"] .nns-audit-grid > section {
  border-color: #dce2de;
  background: #f4f5f2;
}
html[data-mode="light"] .nns-audit-grid h3 { color: #26332f; }
html[data-mode="light"] .nns-line-audit > div,
html[data-mode="light"] .nns-history > div { border-top-color: #dfe4e1; }
html[data-mode="light"] .nns-line-audit b { color: #076e54; background: #dcefe7; }
html[data-mode="light"] .nns-line-audit span { color: #34413d; }
html[data-mode="light"] .nns-line-audit small,
html[data-mode="light"] .nns-history small { color: #7d8985; }
html[data-mode="light"] .nns-history > div { color: #4f5d58; }
html[data-mode="light"] .nns-muted,
html[data-mode="light"] .nns-search-results > p { color: #71807b; }

html[data-mode="light"] #nns-search-panel {
  color: #18221f;
  border-color: #d5ddd8;
  background: #fbfbf8;
  box-shadow: 0 24px 65px rgb(40 58 51 / 22%);
}
html[data-mode="light"] .nns-search-head { border-bottom-color: #dce2de; }
html[data-mode="light"] .nns-search-head > svg { color: #71807b; }
html[data-mode="light"] .nns-search-head input { color: #17211e; }
html[data-mode="light"] .nns-search-result { border-bottom-color: #e0e5e2; }
html[data-mode="light"] .nns-search-result > div { color: #087d5e; }
html[data-mode="light"] .nns-search-result time { color: #7d8985; }
html[data-mode="light"] .nns-search-result p { color: #35423e; }

html[data-mode="light"] #nns-note-toast {
  color: #075842;
  border-color: #91c8b6;
  background: #e2f4ed;
  box-shadow: 0 12px 35px rgb(28 70 56 / 16%);
}
html[data-mode="light"] #nns-note-toast[data-tone="error"] {
  color: #8d2525;
  border-color: #e2aaaa;
  background: #fff0f0;
}

html[data-mode="light"] .nns-pin-count { border-color: #f4f4f1; color: #fff; background: #087d5e; }
html[data-mode="light"] .nns-message-pin-action { color: #7a8782; }
html[data-mode="light"] .nns-message-pin-action:hover { color: #31403b; background: #e4e9e6; }
html[data-mode="light"] .nns-message-pin-action.is-pinned { color: #087d5e; }
html[data-mode="light"] #nns-floating-pin { color: #697772; border-color: #d2dad5; background: #fff; box-shadow: 0 5px 18px rgb(40 58 51 / 14%); }
html[data-mode="light"] #nns-floating-pin:hover { color: #25332e; background: #f0f4f1; }
html[data-mode="light"] #nns-floating-pin.is-pinned { color: #087d5e; border-color: #75ae9d; }
html[data-mode="light"] #nns-pin-backdrop.open { background: rgb(220 227 222 / 58%); }
html[data-mode="light"] #nns-pin-drawer { color: #17211e; border-left-color: #d7ded9; background: #fbfbf8; box-shadow: -25px 0 65px rgb(40 58 51 / 20%); }
html[data-mode="light"] #nns-pin-drawer > header { border-bottom-color: #dce2de; }
html[data-mode="light"] #nns-pin-drawer h2 { color: #17211e; }
html[data-mode="light"] #nns-pin-drawer h2 svg { color: #087d5e; }
html[data-mode="light"] #nns-pin-drawer header button { color: #586661; border-color: #d8deda; background: #f2f3ef; }
html[data-mode="light"] .nns-pinned-card { border-color: #d9e0dc; background: #fff; }
html[data-mode="light"] .nns-pinned-card:hover { border-color: #afbeb8; background: #f4f8f5; }
html[data-mode="light"] .nns-pinned-jump > div { color: #087d5e; }
html[data-mode="light"] .nns-pinned-jump time,
html[data-mode="light"] .nns-pinned-jump small { color: #7d8985; }
html[data-mode="light"] .nns-pinned-jump p { color: #35423e; }
html[data-mode="light"] .nns-pinned-remove:hover { color: #a33b3b; background: #f9e7e7; }
html[data-mode="light"] .nns-pin-empty h3 { color: #26332f; }
html[data-mode="light"] .nns-pin-empty > svg { color: #087d5e; }
html[data-mode="light"] .nns-search-jump > div { color: #087d5e; }
html[data-mode="light"] .nns-search-jump time { color: #7d8985; }
html[data-mode="light"] .nns-search-jump p { color: #35423e; }
html[data-mode="light"] .nns-search-pin:hover { color: #087d5e; background: #e3ece8; }

@media (max-width: 760px) {
  #nns-chat-tools { top: 18px; right: 15px; }
  #nns-notes-overlay { padding: 0; }
  .nns-notes-window { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  .nns-notes-layout { grid-template-columns: 120px 1fr; }
  .nns-note-list-panel { padding: 9px; }
  .nns-note-card { padding: 9px; }
  .nns-note-card span, .nns-note-card small { display: none; }
  .nns-new-note { padding: 10px 6px; font-size: 0; }
  .nns-new-note svg { width: 18px; height: 18px; }
  .nns-note-editor { padding: 18px 14px; }
  .nns-note-title { font-size: 22px; }
  .nns-audit-grid { grid-template-columns: 1fr; }
  .nns-form-actions { align-items: flex-end; flex-direction: column; }
  #nns-floating-pin { width: 28px; height: 28px; }
}