@plmbr/notebook-intelligence 5.0.0

package/style/base.css

@@ -0,0 +1,3238 @@
+/*
+   Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+    See the JupyterLab Developer Guide for useful CSS Patterns:
+    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
+*/
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+}
+
+/* Visually-hidden text that stays in the accessibility tree. Used to add
+   screen-reader-only annotations next to links / buttons (e.g.
+   "(opens in new tab)") without changing the visual layout. */
+.nbi-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;
+}
+
+.drop-zone-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: color-mix(in srgb, var(--jp-brand-color1) 15%, transparent);
+  border: 2px dashed var(--jp-brand-color1);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+
+  /* The wrapper's color is only used by themes that don't reach the
+     inner <span> (e.g. if a future variant omits the chip). The chip
+     itself uses the theme's body text color so contrast against the
+     solid layer background is guaranteed regardless of how the brand
+     color is tuned. */
+  color: var(--jp-brand-color1);
+  z-index: 100;
+  pointer-events: none;
+}
+
+.drop-zone-overlay span {
+  /* WCAG 1.4.3: 4.5:1 against the layer1 background is the minimum the
+     theme commits to via --jp-ui-font-color0; use that for the chip
+     text and lock the chip background to a solid layer color so the
+     parent's 15%-brand wash never bleeds through and softens contrast.
+     The brand-color border keeps the visual identity of the drop
+     affordance without being load-bearing for legibility. */
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color0);
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--jp-brand-color1);
+}
+
+.user-input-context.uploaded-file {
+  border-style: dashed;
+}
+
+.user-input-context.image-file {
+  border-style: dashed;
+}
+
+.context-pill-thumbnail-wrap {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.context-pill-thumbnail {
+  max-height: 36px;
+  max-width: 54px;
+  object-fit: contain;
+  border-radius: 2px;
+  margin-right: 4px;
+}
+
+.context-pill-thumbnail-preview {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  max-width: 320px;
+  max-height: 320px;
+  object-fit: contain;
+  border-radius: 6px;
+  background: var(--jp-layout-color1);
+  padding: 4px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
+  z-index: 100;
+  pointer-events: none;
+}
+
+.context-pill-thumbnail-wrap:hover .context-pill-thumbnail-preview,
+.context-pill-thumbnail-wrap:focus-within .context-pill-thumbnail-preview {
+  display: block;
+}
+
+.user-input-context.uploading-indicator {
+  border: none;
+  font-size: 11px;
+  color: var(--jp-ui-font-color2);
+}
+
+/* Animated trailing dots ("Uploading...") so the indicator visibly
+   moves while a request is in flight. ::after appends three dots and
+   steps through their reveal in 1.2 seconds. Honors prefers-reduced-
+   motion: vestibular-sensitive users see the literal three dots
+   without animation. */
+.loading-ellipsis::after {
+  content: '\2026';
+  display: inline-block;
+  width: 1.5em;
+  text-align: left;
+  animation: nbi-loading-ellipsis-cycle 1.2s steps(4, end) infinite;
+}
+
+@keyframes nbi-loading-ellipsis-cycle {
+  0% {
+    content: '';
+  }
+
+  25% {
+    content: '.';
+  }
+
+  50% {
+    content: '..';
+  }
+
+  75% {
+    content: '...';
+  }
+
+  100% {
+    content: '';
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-ellipsis::after {
+    animation: none;
+    content: '...';
+  }
+}
+
+/* Skip link at the top of the chat sidebar; hidden via .nbi-sr-only,
+   revealed only when focused so sighted users never see it and keyboard
+   users land on it as the very first Tab inside the sidebar. */
+.nbi-skip-link {
+  z-index: 1000;
+}
+
+.nbi-skip-link:focus,
+.nbi-skip-link:focus-visible {
+  left: 8px;
+
+  /* Below the 25px sidebar header so the focused chip doesn't overlap
+     the "Notebook Intelligence" title. */
+  top: 28px;
+  width: auto;
+  height: auto;
+  padding: 6px 10px;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-content-link-color);
+  border: 2px solid var(--jp-brand-color1);
+  border-radius: 3px;
+  text-decoration: underline;
+}
+
+.chat-message-notice {
+  background-color: transparent;
+  font-size: 12px;
+  color: var(--jp-ui-font-color2);
+  padding: 3px 5px;
+}
+
+.sidebar-header {
+  height: 25px;
+  padding: 5px 10px;
+  display: flex;
+}
+
+.sidebar-title {
+  font-size: 14px;
+  font-weight: bold;
+  flex-grow: 1;
+}
+
+.sidebar-messages {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 5px;
+}
+
+#sidebar-user-input {
+  /* stylelint-disable */
+  anchor-name: --sidebaruserinput;
+  /* stylelint-enable */
+}
+
+.sidebar-user-input {
+  height: auto;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--jp-cell-editor-background);
+  border: 2px solid var(--jp-border-color1);
+  margin: 4px;
+  border-radius: 3px;
+}
+
+/* stylelint-disable */
+.sidebar-user-input.generating {
+  background:
+    linear-gradient(
+        var(--jp-cell-editor-active-background),
+        var(--jp-cell-editor-active-background)
+      )
+      padding-box,
+    linear-gradient(var(--angle), #f1259c, #687aff) border-box;
+  animation: 4s rotate-gen linear infinite;
+  border: 2px solid #0000 !important;
+}
+/* stylelint-enable */
+
+.sidebar-user-input:focus-within {
+  border-radius: 2px;
+  border-color: var(--jp-brand-color1);
+}
+
+.sidebar-user-input textarea {
+  width: 100%;
+  font-family: var(--jp-ui-font-family);
+  color: var(--jp-ui-font-color1);
+  outline: none;
+  border: none;
+  resize: none;
+  background: none;
+  /* stylelint-disable */
+  field-sizing: content;
+  /* stylelint-enable */
+  min-height: 36px;
+  max-height: 200px;
+}
+
+.sidebar-user-input .user-input-context-row {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.user-input-context {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  padding: 2px;
+  gap: 5px;
+  font-size: 11px;
+  max-width: 100%;
+}
+
+.user-input-context > div:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Image pills need overflow: visible so the hover preview can escape
+   the truncation clip. Their visible content is the filename plus a
+   small thumbnail, so dropping the ellipsis here is fine. */
+.user-input-context.image-file > div:first-child {
+  overflow: visible;
+}
+
+.user-input-context.off {
+  color: var(--jp-ui-font-color2);
+  font-style: italic;
+}
+
+.user-input-context-toggle {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+}
+
+.user-input-context-toggle:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.user-input-context-toggle:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.user-input-context svg {
+  width: 16px;
+  height: 16px;
+  margin: -4px 0;
+}
+
+.sidebar-user-input .user-input-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.chat-mode-widgets-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  margin-right: 5px;
+}
+
+.chat-mode-select {
+  height: 24px;
+  background-color: initial;
+  color: var(--jp-ui-font-color1);
+  padding: 0 5px;
+  border-color: var(--jp-border-color0);
+  outline: none;
+}
+
+.user-input-footer-button {
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 2px;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  transition: color var(--jp-transition-duration, 100ms) ease-in-out;
+}
+
+.user-input-footer-button:hover {
+  color: var(--jp-ui-font-color1);
+}
+
+/* Reset native chrome on the footer buttons that now render as <button>
+   so they line up visually with the older <div onClick> variants.
+   `line-height: 1` keeps the tools-button badge from drifting a pixel
+   relative to the icon when rendered inside a button vs a div. */
+button.user-input-footer-button {
+  background: none;
+  border: none;
+  font: inherit;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Visible focus ring for keyboard users. :focus-visible keeps it from
+   firing on a plain click. Matches the brand-color focus indicator
+   the other NBI buttons use elsewhere in this stylesheet. */
+.user-input-footer-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+  border-radius: 3px;
+  color: var(--jp-ui-font-color1);
+}
+
+/* The slash-button (mentions and commands) renders text rather than an
+   svg, so size and center the glyph instead of relying on the svg rule. */
+.user-input-footer-slash-button {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.user-input-footer-button.tools-button {
+  width: auto;
+  border: 1px solid var(--jp-border-color0);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 3px;
+}
+
+.user-input-footer-button.tools-button-warning {
+  color: var(--jp-warn-color0);
+  border-color: var(--jp-warn-color0);
+}
+
+.user-input-footer-button.tools-button-active {
+  color: var(--jp-brand-color0);
+  border-color: var(--jp-brand-color0);
+}
+
+.user-input-footer-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+.chat-message {
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-message pre {
+  padding: 3px;
+  border-radius: 3px;
+  border: 1px solid var(--jp-border-color1);
+}
+
+pre:has(.code-block-header) {
+  padding: 2px;
+  background-color: var(--jp-layout-color2);
+}
+
+.chat-message-header {
+  display: flex;
+}
+
+.chat-message-from {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.chat-message-from-icon {
+  margin-right: 6px;
+}
+
+.chat-message-from-icon img {
+  width: 18px;
+  height: 18px;
+}
+
+.chat-response-img img {
+  max-width: 100%;
+}
+
+.chat-message-from-icon-default.dark img {
+  filter: invert(100%);
+}
+
+.chat-message-from-title {
+  font-weight: bold;
+}
+
+.chat-message-notice .chat-message-from-title {
+  font-weight: normal;
+  font-style: italic;
+}
+
+.chat-message-from-progress {
+  padding-left: 10px;
+  flex-grow: 1;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* The React `key` prop on this span is keyed to the heartbeat tick, so
+   each beat remounts the element and the animation runs from t=0. */
+.generating-pulse {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--jp-brand-color1);
+  flex-shrink: 0;
+  opacity: 0.5;
+  animation: nbi-progress-pulse 1.2s ease-out;
+}
+
+.generating-pulse.is-stalled {
+  background-color: var(--jp-warn-color1);
+}
+
+.generating-label {
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes nbi-progress-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1.4);
+  }
+
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .generating-pulse {
+    animation: none;
+  }
+
+  /* The conic-gradient generating border on the chat input and inline-
+     completion editor rotates indefinitely while a response streams in.
+     Pause it for vestibular-sensitive users so the brand-tinted border
+     becomes a static indicator instead of a rotating one. */
+  .sidebar-user-input.generating,
+  .jp-InputArea-editor.generating {
+    animation: none;
+  }
+}
+
+.chat-message-timestamp {
+  padding-left: 10px;
+  font-size: 11px;
+}
+
+.chat-message-content p {
+  margin-block: 5px 5px;
+  line-height: 18px;
+}
+
+.chat-message-notice .chat-message-content p {
+  margin-block: 2px;
+}
+
+.chat-message-content a {
+  text-decoration: underline;
+}
+
+.chat-message-content table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-size: 12px;
+  line-height: 1.4;
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.chat-message-content th,
+.chat-message-content td {
+  border: 1px solid var(--jp-border-color1);
+  padding: 4px 8px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.chat-message-content thead th {
+  background-color: var(--jp-layout-color2);
+  font-weight: bold;
+}
+
+.chat-message-content tbody tr:nth-child(even) {
+  background-color: var(--jp-layout-color1);
+}
+
+.chat-message-content ul,
+.chat-message-content ol {
+  margin-block: 5px;
+  padding-left: 24px;
+}
+
+.chat-message-content li {
+  margin-block: 2px;
+  line-height: 18px;
+}
+
+.chat-message-content blockquote {
+  margin: 8px 0;
+  padding: 2px 10px;
+  border-left: 3px solid var(--jp-border-color1);
+  color: var(--jp-ui-font-color2);
+}
+
+.chat-message-content hr {
+  border: none;
+  border-top: 1px solid var(--jp-border-color2);
+  margin: 10px 0;
+}
+
+.chat-message-content h1,
+.chat-message-content h2,
+.chat-message-content h3,
+.chat-message-content h4,
+.chat-message-content h5,
+.chat-message-content h6 {
+  margin-block: 10px 5px;
+  line-height: 1.3;
+}
+
+.chat-message-content h1 {
+  font-size: 18px;
+}
+
+.chat-message-content h2 {
+  font-size: 16px;
+}
+
+.chat-message-content h3 {
+  font-size: 14px;
+}
+
+.chat-message-content h4,
+.chat-message-content h5,
+.chat-message-content h6 {
+  font-size: 13px;
+}
+
+.chat-message-content :not(pre) > code {
+  background-color: var(--jp-layout-color2);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.chat-message-copilot {
+  background-color: rgb(159 153 208 / 15%);
+}
+
+.chat-message-feedback {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0 4px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.chat-message-feedback:focus-within,
+.chat-message-feedback:has(.selected),
+.chat-message:hover .chat-message-feedback {
+  opacity: 1;
+}
+
+.chat-feedback-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 3px;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.chat-feedback-btn:hover {
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color2);
+}
+
+.chat-feedback-btn.selected {
+  color: var(--jp-brand-color1);
+  background-color: var(--jp-layout-color2);
+}
+
+.chat-feedback-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Rendered as a real <button> so it picks up Tab order, Enter/Space
+   activation, and "button" role announcement. The visual presentation
+   stays anchor-like: underline + link color so users still recognise it
+   as a clickable "open notebook" affordance. */
+.copilot-generated-notebook-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--jp-content-link-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.copilot-generated-notebook-link:hover {
+  filter: brightness(1.15);
+}
+
+.copilot-generated-notebook-link:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+.sidebar-login-info {
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  line-height: 20px;
+}
+
+.sidebar-login-info a {
+  text-decoration: underline;
+}
+
+.sidebar-login-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.sidebar-login-buttons .jp-Dialog-button.jp-mod-styled {
+  margin-right: 0;
+}
+
+.sidebar-greeting {
+  padding: 5px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.user-code-span {
+  cursor: pointer;
+  color: var(--jp-content-link-color);
+}
+
+.user-code-span:hover {
+  text-shadow: 1px 1px var(--jp-border-color1);
+}
+
+.user-code-span:active {
+  color: var(--jp-ui-font-color2);
+}
+
+.chat-response-html-frame {
+  margin: 5px 0;
+}
+
+.chat-response-html-frame-iframe {
+  width: 100%;
+  border: none;
+}
+
+.chat-response-anchor {
+  margin: 5px 0;
+}
+
+.chat-response-button {
+  margin: 5px 0;
+}
+
+.chat-response-progress {
+  margin: 5px 0;
+}
+
+.chat-confirmation-form {
+  border: 1px solid var(--jp-border-color1);
+  padding: 5px;
+  line-height: 20px;
+}
+
+.chat-confirmation-form button {
+  height: 24px;
+  line-height: 24px;
+  padding: 0 6px;
+  margin-top: 2px;
+}
+
+.user-input-autocomplete,
+.mode-tools-popover,
+.workspace-file-popover {
+  display: flex;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color1);
+  flex-direction: column;
+  position: absolute;
+  /* stylelint-disable */
+  position-anchor: --sidebaruserinput;
+  position-area: top;
+  /* stylelint-enable */
+  width: calc(100% - 16px);
+  gap: 2px;
+  /* stylelint-disable */
+  max-height: min(calc(100% - 120px), 400px);
+  /* stylelint-enable */
+  overflow-y: auto;
+  user-select: none;
+}
+
+.mode-tools-popover {
+  width: calc(100% - 10px);
+  /* stylelint-disable */
+  max-height: min(calc(100% - 200px), 400px);
+  /* stylelint-enable */
+  box-shadow: var(--jp-brand-color0) 0 0 1px 1px;
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-file-popover {
+  width: calc(100% - 10px);
+  /* stylelint-disable */
+  max-height: min(calc(100% - 220px), 420px);
+  /* stylelint-enable */
+  box-shadow: var(--jp-brand-color0) 0 0 1px 1px;
+}
+
+.mode-tools-popover-title {
+  font-weight: bold;
+}
+
+.mode-tools-popover-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  background-color: var(--jp-layout-color1);
+  padding: 2px;
+}
+
+.mode-tools-popover-header-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.mode-tools-popover-clear-tools-button {
+  flex-grow: 1;
+  color: var(--jp-ui-font-color2);
+  display: flex;
+  padding-top: 3px;
+}
+
+.mode-tools-popover-clear-tools-button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Anchor-styled button used in place of the old <a href="javascript:void(0)">
+   pattern. Keeps the visual affordance (link color + underline) while
+   participating in the document's natural tab order. The color matches
+   JupyterLab's anchor token so the affordance reads as a link, not as
+   plain underlined body text. */
+.link-button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--jp-content-link-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link-button:hover {
+  filter: brightness(1.15);
+}
+
+.link-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+/* tabIndex=-1 wrappers receive programmatic focus on open; the popover
+   already carries a brand-color box-shadow as its visual affordance, so
+   the wrapper's default browser focus ring would only stack a second
+   indicator on top. */
+.workspace-file-popover:focus,
+.mode-tools-popover:focus {
+  outline: none;
+}
+
+/* Reset the UA <button> chrome (border, padding, font) on the icon-
+   buttons so the conversion from <div onClick> doesn't shift the 24px
+   header height or push the icons off-center. padding-right keeps the
+   pre-conversion gap from the icon to the next sibling. */
+.mode-tools-popover-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: auto;
+  height: 24px;
+  color: white;
+  background-color: var(--jp-brand-color0);
+  padding: 0 6px 0 0;
+  border: none;
+  font: inherit;
+  line-height: 1;
+  border-radius: 2px;
+}
+
+.mode-tools-popover-button svg {
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  margin-top: 2px;
+}
+
+.mode-tools-popover-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.mode-tools-popover-close-button {
+  width: 24px;
+  padding: 0;
+}
+
+.mode-tools-popover-close-button svg {
+  padding: 0;
+  margin: 0;
+}
+
+.mode-tools-popover-refresh-button {
+  width: 24px;
+  padding: 0;
+  margin-right: 4px;
+}
+
+.mode-tools-popover-refresh-button.is-loading {
+  cursor: progress;
+  opacity: 0.6;
+}
+
+.mode-tools-popover-tool-list {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.workspace-file-popover-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px;
+  overflow: hidden;
+}
+
+.workspace-file-search-input {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color1);
+  padding: 6px 8px;
+  outline: none;
+}
+
+.workspace-file-search-input:focus {
+  border-color: var(--jp-brand-color1);
+}
+
+.workspace-file-popover-status {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--jp-ui-font-color2);
+}
+
+.workspace-file-popover-status.error {
+  color: var(--jp-error-color1);
+}
+
+/* Pin the Coding Agent section to the top of the launcher.
+   JupyterLab hardcodes Notebook/Console/Other as the first categories,
+   so we use flex order to visually promote our section above them. */
+.jp-Launcher-content {
+  display: flex !important;
+  flex-direction: column;
+}
+
+.jp-Launcher-cwd {
+  order: -2;
+}
+
+.jp-Launcher-section:has(.jp-LauncherCard[data-category='Coding Agent']) {
+  order: -1;
+}
+
+/* Claude Code session picker (used inside Dialog from launcher tile) */
+.nbi-claude-code-picker {
+  min-width: 480px;
+  height: 400px;
+}
+
+.nbi-claude-code-picker-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 500px;
+  height: 100%;
+}
+
+.nbi-claude-code-picker-search {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 7px 10px;
+  margin-bottom: 10px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  outline: none;
+}
+
+.nbi-claude-code-picker-list {
+  max-height: 380px;
+  overflow-y: auto;
+}
+
+.nbi-claude-code-picker-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 80px;
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-claude-code-picker-error {
+  color: var(--jp-error-color1);
+}
+
+.nbi-claude-code-picker-empty {
+  padding: 16px 0;
+  color: var(--jp-ui-font-color2);
+  text-align: center;
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-claude-code-picker-project {
+  margin-bottom: 8px;
+}
+
+.nbi-claude-code-picker-project-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--jp-ui-font-color2);
+  margin-bottom: 4px;
+  padding: 0 2px;
+}
+
+.nbi-claude-code-picker-session {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 10px;
+  margin-bottom: 4px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  cursor: pointer;
+  background: var(--jp-layout-color1);
+  transition: border-color 0.1s;
+}
+
+.nbi-claude-code-picker-session:hover,
+.nbi-claude-code-picker-session:focus,
+.nbi-claude-code-picker-session.highlighted {
+  border-color: var(--jp-brand-color1);
+  outline: none;
+}
+
+.nbi-claude-code-picker-session-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nbi-claude-code-picker-session-id {
+  font-family: var(--jp-code-font-family);
+  font-size: 12px;
+  color: var(--jp-ui-font-color1);
+  font-weight: 600;
+}
+
+.nbi-claude-code-picker-time {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--jp-ui-font-color3);
+}
+
+/* The session row's project basename rides at the right edge,
+   mirroring the old `time` slot. Keeps long paths from blowing out the
+   row while leaving the full cwd available on hover via the title attr.
+   (Named `-session-project` not `-project` to avoid colliding with the
+   project-grouping header class higher up in this stylesheet.) */
+.nbi-claude-code-picker-session-project {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--jp-ui-font-color3);
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nbi-claude-code-picker-msg {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mode-tools-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 5px;
+  margin-bottom: 5px;
+}
+
+.mode-tools-group-header {
+  padding: 5px 0;
+  border-bottom: 1px solid var(--jp-border-color1);
+  margin: 0 5px;
+  font-weight: bold;
+}
+
+.user-input-autocomplete-item {
+  cursor: pointer;
+  padding: 4px;
+}
+
+.user-input-autocomplete-item.selected {
+  background-color: var(--jp-layout-color1);
+}
+
+.code-block-header {
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  padding: 3px;
+  padding-bottom: 0;
+}
+
+.code-block-header-language {
+  flex-grow: 1;
+}
+
+.code-block-header-button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 2px;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+}
+
+.code-block-header-button:hover {
+  background-color: var(--jp-layout-color1);
+}
+
+.code-block-header-button:active {
+  background-color: var(--jp-layout-color3);
+}
+
+.code-block-header-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.copy-icon svg {
+  width: 12px;
+  height: 12px;
+}
+
+.claude-icon svg {
+  width: 16px;
+  height: 16px;
+  color: #d97757;
+}
+
+.send-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 5px;
+  border: 1px solid var(--jp-border-color1);
+}
+
+button.send-button {
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+}
+
+button.send-button:disabled:not(.send-button-stop),
+button.send-button:disabled:hover:not(.send-button-stop),
+button.send-button:disabled:active:not(.send-button-stop) {
+  cursor: default;
+  background-color: var(--jp-accept-color-normal);
+}
+
+.send-button:hover:enabled {
+  background-color: var(--jp-layout-color1);
+}
+
+.send-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* During generation the send action turns into a stop action. The
+   icon switch alone would fail WCAG 3.3.4 (icon shape is a single
+   non-redundant signal); pair it with a warn-tinted background and a
+   border that picks up the warn color so the state is visible to
+   color-blind users too. The accessible name on the <button> swaps to
+   "Stop generating" in lockstep.
+   We do NOT reuse JupyterLab's own jp-mod-warn rule because that token
+   resolves to --jp-warn-color-normal (red) which reads as "error". We
+   want "caution" (amber) via --jp-warn-color1, so the custom rule
+   stays intentionally separate. */
+.send-button.send-button-stop {
+  background-color: var(--jp-warn-color1, #ff9800);
+  border-color: var(--jp-warn-color1, #ff9800);
+  color: white;
+}
+
+.send-button.send-button-stop:hover:enabled {
+  background-color: var(--jp-warn-color0, #f57c00);
+}
+
+.inline-popover {
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+
+  /* Use the JupyterLab layer token so the inline prompt picks up the
+     ambient theme (light, dark, high-contrast, solarized, etc.). The
+     previous fixed #f2f3ff / #14162b values bypassed the theme and
+     could yield insufficient text contrast under custom themes.
+     --jp-layout-color2 matches the elevation pattern used by the
+     sibling popovers (mode-tools-popover, workspace-file-popover) so
+     the popover surface sits above the inner footer (color1) rather
+     than reading as recessed. */
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-content-font-color1);
+}
+
+.inline-prompt-container {
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+}
+
+.monaco-editor-container {
+  width: 100%;
+  flex-grow: 1;
+  border: 1px solid var(--jp-border-color2);
+  border-left: none;
+  border-right: none;
+}
+
+.inline-popover-footer {
+  height: 32px;
+  width: calc(100% - 6px);
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  padding-left: 5px;
+  background-color: var(--jp-layout-color2);
+}
+
+.inline-prompt-container textarea {
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  font-family: var(--jp-ui-font-family);
+  color: var(--jp-ui-font-color1);
+  resize: none;
+  background: none;
+  outline: none;
+  border: none;
+}
+
+.inline-popover-footer .jp-Button {
+  height: 24px;
+  padding: 4px;
+}
+
+.github-copilot-status-bar {
+  color: var(--jp-inverse-layout-color2);
+}
+
+.github-copilot-status-bar svg {
+  margin-top: 4px;
+}
+
+.github-copilot-login-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  width: 500px;
+  line-height: 20px;
+}
+
+.github-copilot-login-status-text.logged-in {
+  color: var(--jp-brand-color1);
+}
+
+.config-dialog {
+  display: flex;
+  flex-direction: column;
+}
+
+.config-dialog-container .jp-Dialog-content {
+  max-height: 600px;
+}
+
+.config-dialog-container .jp-Dialog-footer {
+  display: none;
+}
+
+.config-dialog-body {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  gap: 15px;
+}
+
+.model-config-section-row {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.model-config-section-column {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1 1 0px;
+}
+
+.config-dialog-footer {
+  height: 32px;
+  display: flex;
+  margin-top: 10px;
+}
+
+.config-dialog-body select.jp-mod-styled {
+  appearance: auto;
+}
+
+.config-dialog-body input.jp-mod-styled {
+  width: 100%;
+}
+
+.model-config-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.form-field-row {
+  padding-left: 15px;
+}
+
+.form-field-description {
+  color: var(--jp-ui-font-color2);
+  margin-bottom: 5px;
+}
+
+.model-config-section-header {
+  font-weight: bold;
+  font-size: 15px;
+}
+
+.model-config-section-body {
+  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.inline-prompt-widget {
+  border-radius: 4px;
+  padding: 3px;
+}
+
+.inline-prompt-widget-floating {
+  z-index: 1000;
+  box-shadow: rgba(90 76 191 / 30%) 0 0 10px 10px;
+}
+
+.inline-prompt-widget-inline {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 4px 0;
+  box-shadow: rgba(90 76 191 / 25%) 0 0 4px 1px;
+}
+
+/* Undo .cm-content { caret-color: transparent } from CM6's drawSelection,
+   which inherits into our textarea when the popover renders as a block
+   widget inside the editor. */
+.inline-prompt-widget-inline textarea {
+  caret-color: auto;
+}
+
+.nbi-inline-prompt-block {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: 2px 0;
+}
+
+.inline-prompt-widget::before {
+  border-radius: 4px;
+  content: '';
+  background-image: conic-gradient(
+    from 270deg at 50% 50%,
+    #3b37ff 0deg,
+    #096bde 160deg,
+    #f1259c 175deg,
+    #7c3ffe 200deg,
+    #7c3ffe 350deg,
+    #3b37ff 360deg
+  );
+  /* stylelint-disable */
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  bottom: -1px;
+  /* stylelint-enable */
+  position: absolute;
+  z-index: -1;
+}
+
+/* stylelint-disable */
+.jp-InputArea-editor.generating {
+  background:
+    linear-gradient(
+        var(--jp-cell-editor-active-background),
+        var(--jp-cell-editor-active-background)
+      )
+      padding-box,
+    linear-gradient(var(--angle), #f1259c, #687aff) border-box;
+  animation: 4s rotate-gen linear infinite;
+  border: 2px solid #0000 !important;
+}
+
+@keyframes rotate-gen {
+  to {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+/* stylelint-enable */
+
+.ollama-warning-message {
+  color: var(--jp-warn-color0);
+  line-height: 20px;
+}
+
+.expandable-content-title {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+}
+
+.expandable-content-title:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.expandable-content-text {
+  display: none;
+  margin: 5px;
+  padding: 0 5px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 5px;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: inset 0 0 15px 15px rgb(23 23 23 / 50%);
+}
+
+.expandable-content .collapsed-icon {
+  display: inline;
+}
+
+.expandable-content .expanded-icon {
+  display: none;
+}
+
+.expandable-content.expanded .expanded-icon {
+  display: inline;
+}
+
+.expandable-content.expanded .expandable-content-text {
+  display: block;
+}
+
+.expandable-content.expanded .collapsed-icon {
+  display: none;
+}
+
+.access-token-config-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+svg.access-token-warning {
+  color: var(--jp-warn-color0);
+  width: 18px;
+  height: 18px;
+}
+
+.checkbox-item {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.checkbox-item:hover {
+  background-color: var(--jp-layout-color1);
+}
+
+.checkbox-item:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+  border-radius: 2px;
+}
+
+.checkbox-item-indent-0 {
+  padding-left: 0;
+}
+
+.checkbox-item-indent-1 {
+  padding-left: 12px;
+}
+
+.checkbox-item-indent-2 {
+  padding-left: 24px;
+}
+
+.checkbox-item-indent-3 {
+  padding-left: 36px;
+}
+
+.checkbox-icon {
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+  color: var(--jp-brand-color1);
+  padding-top: 1px;
+}
+
+.checkbox-item-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin: 0 2px;
+  padding: 3px 2px;
+  color: var(--jp-ui-font-color1);
+}
+
+.checkbox-item-toggle span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox-item-header .checkbox-item-toggle {
+  color: var(--jp-ui-font-color0);
+  font-weight: bold;
+}
+
+.mode-tools-group-built-in {
+  flex-flow: row wrap;
+}
+
+.mode-tools-group-built-in .checkbox-item {
+  width: 50%;
+}
+
+.mode-tools-group-built-in .checkbox-item-toggle {
+  font-weight: normal;
+}
+
+.checkbox-item-description {
+  padding-left: 25px;
+  color: var(--jp-ui-font-color2);
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nbi-settings-panel {
+  display: flex;
+  height: 100%;
+}
+
+.nbi-settings-panel-tabs {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  width: 150px;
+
+  /* Hold the column width when a panel renders wide non-wrapping content
+     (e.g. the Skills panel's project-skills filesystem path) — without
+     this, flex-shrink lets the right pane squeeze the sidebar and labels
+     like "Claude MCP" wrap mid-word. */
+  flex-shrink: 0;
+  background-color: var(--jp-layout-color2);
+}
+
+.nbi-settings-panel-tab {
+  display: flex;
+  gap: 5px;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+}
+
+.nbi-settings-panel-tab:hover {
+  background-color: var(--jp-layout-color1);
+}
+
+.nbi-settings-panel-tab.active {
+  background-color: var(--jp-layout-color0);
+  font-weight: bold;
+}
+
+.nbi-settings-panel-tab:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.nbi-settings-panel-tab-content {
+  flex-grow: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.nbi-subtab-bar {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--jp-border-color2);
+  margin-bottom: 16px;
+}
+
+.nbi-subtab {
+  cursor: pointer;
+  padding: 8px 16px;
+  border-bottom: 2px solid transparent;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  color: var(--jp-ui-font-color2);
+  margin-bottom: -1px;
+  background: none;
+  font: inherit;
+}
+
+.nbi-subtab:hover {
+  color: var(--jp-ui-font-color1);
+}
+
+.nbi-subtab:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.nbi-subtab.active {
+  color: var(--jp-ui-font-color1);
+  border-bottom-color: var(--jp-brand-color1);
+  font-weight: bold;
+}
+
+.pill-item {
+  cursor: pointer;
+  background-color: var(--jp-layout-color1);
+  display: inline-block;
+  padding: 2px 8px;
+  margin: 2px 4px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 10px;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color1);
+}
+
+.pill-item:hover {
+  cursor: pointer;
+  background-color: var(--jp-layout-color2);
+}
+
+.pill-item.checked {
+  background-color: var(--jp-brand-color3, rgb(68 138 255 / 12%));
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color0, var(--jp-ui-font-color1));
+}
+
+.server-status-indicator {
+  width: 10px;
+  height: 10px;
+  margin: 2px;
+  border-radius: 50%;
+  background-color: var(--jp-brand-color0);
+}
+
+.server-status-indicator.connected,
+.server-status-indicator.updated-tool-list,
+.server-status-indicator.updated-prompt-list {
+  background-color: var(--jp-success-color1);
+}
+
+.server-status-indicator.connecting,
+.server-status-indicator.disconnecting,
+.server-status-indicator.updating-tool-list,
+.server-status-indicator.updating-prompt-list {
+  background-color: var(--jp-warn-color1);
+}
+
+.server-status-indicator.not-connected,
+.server-status-indicator.failed-to-connect {
+  background-color: var(--jp-error-color1);
+}
+
+.form-input-dialog-body {
+  width: 500px;
+}
+
+.form-input-dialog-body-content-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.form-input-dialog-body-content-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.form-input-dialog-body-content-field-label {
+  width: 50%;
+}
+
+.form-input-dialog-body-content-field-input {
+  width: 50%;
+}
+
+.mcp-server-prompts .pill-item {
+  cursor: default;
+}
+
+.nbi-status-banner {
+  padding: 8px 12px;
+  margin: 4px 8px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color2);
+  border-left: 3px solid var(--jp-info-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size0);
+}
+
+.mcp-server-tools-header,
+.mcp-server-prompts-header {
+  margin: 5px;
+  font-style: italic;
+}
+
+/* ============================================================
+ * Claude Skills panel
+ * ============================================================ */
+
+.nbi-skills-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.nbi-skills-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.nbi-skills-header-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.nbi-skills-title {
+  font-size: var(--jp-ui-font-size2);
+  font-weight: 600;
+}
+
+.nbi-skills-error {
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  border-left: 3px solid var(--jp-error-color1, #d32f2f);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-skills-sync-message,
+.nbi-skills-info-banner,
+.nbi-info-banner {
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-skills-managed-banner {
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color2);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-skills-tracking-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color2);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-skill-managed-badge,
+.nbi-skill-tracking-badge {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  color: var(--jp-ui-font-color0);
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 600;
+  vertical-align: middle;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.nbi-skill-managed-badge {
+  background-color: var(--jp-brand-color3, var(--jp-layout-color3));
+}
+
+/* Distinct hue from Managed so the two states are visually obvious at a
+   glance: managed = org-curated, tracking = user-opted-in.
+   `--jp-info-color3` is the closest semantic match in the JupyterLab
+   theme palette and resolves to a visible color in both light and dark
+   themes. */
+.nbi-skill-tracking-badge {
+  background-color: var(--jp-info-color3, var(--jp-layout-color3));
+}
+
+.nbi-skills-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.nbi-skills-section-caption {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  font-weight: 600;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.nbi-skills-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 12px;
+  border: 1px dashed var(--jp-border-color2);
+  border-radius: 4px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size1);
+  text-align: center;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.nbi-skills-empty code {
+  background-color: var(--jp-layout-color2);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.nbi-skill-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: var(--jp-layout-color1);
+}
+
+.nbi-skill-row:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+/* Highlight the whole row whenever any of its action buttons receives
+   keyboard focus, so a sighted keyboard user can tell which row they're
+   acting on. The row itself isn't focusable any more (the explicit
+   action buttons are); :focus-within bubbles the affordance up from
+   them. */
+.nbi-skill-row:focus-within {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.nbi-skill-row-main {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.nbi-skill-row-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-skill-row-description {
+  margin-top: 2px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+.nbi-skill-row-version {
+  font-weight: 400;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+}
+
+.nbi-skill-row-plugins {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nbi-skill-row-disabled {
+  border-style: dashed;
+}
+
+.nbi-skill-row-disabled .nbi-skill-row-name {
+  font-style: italic;
+}
+
+.nbi-skill-row-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background-color: var(--jp-layout-color3);
+  color: var(--jp-ui-font-color1);
+  font-weight: 500;
+  font-size: var(--jp-ui-font-size0);
+  text-transform: none;
+}
+
+/* Inline row actions (reveal on hover/focus-within) */
+.nbi-skill-row-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.1s ease-in-out;
+}
+
+/* When a row is disabled-for-workspace, the user needs an immediate way to
+   re-enable it. Override the hover-only reveal so the toggle button is
+   always visible. */
+.nbi-skill-row-disabled .nbi-skill-row-actions {
+  opacity: 1;
+}
+
+.nbi-skill-row:hover .nbi-skill-row-actions,
+.nbi-skill-row:focus-within .nbi-skill-row-actions {
+  opacity: 1;
+}
+
+/* Modal dialog used for rename/duplicate */
+.nbi-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / 35%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.nbi-modal-card {
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
+  padding: 16px;
+  min-width: 320px;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nbi-modal-title {
+  font-size: var(--jp-ui-font-size2);
+  font-weight: 600;
+}
+
+.nbi-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.nbi-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.nbi-import-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background-color: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-import-preview-row {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.nbi-import-preview-label {
+  flex: 0 0 90px;
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.nbi-import-preview-value {
+  flex: 1 1 auto;
+  color: var(--jp-ui-font-color1);
+  word-break: break-word;
+}
+
+.nbi-import-preview-source {
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-checkbox-label {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+/* Undo toast */
+.nbi-undo-toast {
+  position: fixed;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-undo-toast-message {
+  flex: 1 1 auto;
+}
+
+.nbi-undo-toast-action {
+  background: transparent;
+  border: none;
+  color: var(--jp-brand-color2, #82b1ff);
+  cursor: pointer;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 4px 6px;
+}
+
+.nbi-undo-toast-action:hover {
+  text-decoration: underline;
+}
+
+.nbi-undo-toast-close {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 2px 6px;
+  opacity: 0.7;
+}
+
+.nbi-undo-toast-close:hover {
+  opacity: 1;
+}
+
+/* Editor */
+.nbi-skill-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.nbi-skill-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.nbi-skill-editor-breadcrumb {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  font-size: var(--jp-ui-font-size1);
+}
+
+.nbi-breadcrumb-link {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--jp-content-link-color, var(--jp-brand-color1));
+  cursor: pointer;
+  font: inherit;
+}
+
+.nbi-breadcrumb-link:hover {
+  text-decoration: underline;
+}
+
+.nbi-breadcrumb-separator {
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-breadcrumb-current {
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.nbi-skill-editor-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.nbi-skill-editor-actions .jp-Dialog-button.jp-mod-accept:not(:disabled) {
+  background-color: var(--jp-brand-color1);
+  color: #fff;
+  border-color: var(--jp-brand-color1);
+  font-weight: 600;
+}
+
+.nbi-skill-editor-actions .jp-Dialog-button:disabled,
+.nbi-skills-header .jp-Dialog-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.nbi-dirty-marker {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-left: 6px;
+  border-radius: 50%;
+  background-color: var(--jp-warn-color1, #f57c00);
+  vertical-align: middle;
+  font-size: 0;
+  line-height: 0;
+}
+
+.nbi-skill-editor-loading {
+  padding: 20px;
+  text-align: center;
+  color: var(--jp-ui-font-color2);
+}
+
+.nbi-skill-editor-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+
+.nbi-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nbi-form-row-inline {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.nbi-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1 0;
+  min-width: 140px;
+}
+
+.nbi-form-field-wide {
+  width: 100%;
+}
+
+.nbi-form-field label {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  font-weight: 500;
+}
+
+.nbi-form-field input,
+.nbi-form-field select,
+.nbi-form-field textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 3px;
+  background-color: var(--jp-input-background, var(--jp-layout-color1));
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  font-family: inherit;
+}
+
+.nbi-form-field textarea {
+  resize: vertical;
+}
+
+.nbi-form-field input[aria-invalid='true'] {
+  border-color: var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-form-field input:disabled,
+.nbi-form-field select:disabled {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+  border-color: var(--jp-border-color2);
+  cursor: not-allowed;
+}
+
+.nbi-form-field input:focus,
+.nbi-form-field select:focus,
+.nbi-form-field textarea:focus {
+  outline: none;
+  border-color: var(--jp-brand-color1);
+  box-shadow: 0 0 0 1px var(--jp-brand-color1);
+}
+
+.nbi-segmented-control {
+  display: inline-flex;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 3px;
+  overflow: hidden;
+  align-self: flex-start;
+}
+
+.nbi-segmented-control-option {
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  border: none;
+  padding: 6px 14px;
+  font-size: var(--jp-ui-font-size1);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.nbi-segmented-control-option + .nbi-segmented-control-option {
+  border-left: 1px solid var(--jp-border-color1);
+}
+
+.nbi-segmented-control-option:hover {
+  background: var(--jp-layout-color2);
+}
+
+.nbi-segmented-control-option.is-active {
+  background: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1, #fff);
+}
+
+.nbi-segmented-control-option:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: -2px;
+}
+
+.nbi-form-field-error {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-form-hint {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.nbi-form-hint code {
+  background-color: var(--jp-layout-color2);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+/* Tools picker */
+.nbi-tools-picker-input {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 6px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 3px;
+  background-color: var(--jp-input-background, var(--jp-layout-color1));
+  min-height: 30px;
+  align-items: center;
+}
+
+.nbi-tools-picker-input:focus-within {
+  outline: none;
+  border-color: var(--jp-brand-color1);
+  box-shadow: 0 0 0 1px var(--jp-brand-color1);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.nbi-tools-picker-input input {
+  flex: 1 1 100px;
+  min-width: 100px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  padding: 2px 4px;
+}
+
+.nbi-pill-remove {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin-left: 4px;
+  padding: 0 2px;
+  color: inherit;
+  font-size: 1em;
+  line-height: 1;
+}
+
+.nbi-pill-remove:hover {
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-tools-picker-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.nbi-tools-picker-suggestions .pill-item {
+  cursor: pointer;
+}
+
+/* Editor body */
+.nbi-skill-editor-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nbi-skill-editor-pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* File tab strip */
+.nbi-skill-editor-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  margin-bottom: 8px;
+}
+
+.nbi-skill-editor-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color2);
+  font-family: var(--jp-code-font-family, monospace);
+  font-size: var(--jp-ui-font-size0);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.nbi-skill-editor-tab:hover {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+}
+
+.nbi-skill-editor-tab.active {
+  background-color: var(--jp-brand-color3, rgb(68 138 255 / 12%));
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color0, var(--jp-ui-font-color1));
+  font-weight: 600;
+}
+
+.nbi-skill-editor-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+.nbi-skill-editor-tab-kebab-wrap {
+  position: relative;
+  display: flex;
+}
+
+.nbi-skill-editor-tab-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
+  padding: 4px 0;
+}
+
+.nbi-skill-editor-tab-menu button {
+  background: transparent;
+  border: none;
+  padding: 6px 12px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  font-family: inherit;
+}
+
+.nbi-skill-editor-tab-menu button:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.nbi-skill-editor-tab-menu button.danger:hover {
+  background-color: var(--jp-error-color3, rgb(230 100 100 / 20%));
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-skill-editor-tab-rename-input {
+  padding: 2px 6px;
+  border: 1px solid var(--jp-brand-color1);
+  border-radius: 3px;
+  background-color: var(--jp-input-background, var(--jp-layout-color1));
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-code-font-family, monospace);
+  font-size: var(--jp-ui-font-size0);
+  min-width: 120px;
+}
+
+.nbi-skill-editor-tab-add {
+  background: transparent;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+  padding: 4px 10px;
+  font-size: var(--jp-ui-font-size1);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.nbi-skill-editor-tab-add:hover {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+}
+
+.nbi-skill-editor-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 3px;
+  background-color: var(--jp-input-background, var(--jp-layout-color1));
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-code-font-family, monospace);
+  font-size: var(--jp-code-font-size, var(--jp-ui-font-size1));
+  line-height: 1.5;
+  resize: none;
+  overflow: hidden;
+  min-height: 200px;
+}
+
+.nbi-icon-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nbi-icon-button:hover {
+  background-color: var(--jp-layout-color3);
+}
+
+/* The rename action has no obvious icon, so it falls back to a short
+   text glyph ("Aa") rendered with the same vertical metrics as the SVG
+   icons so the row stays visually balanced. */
+.nbi-icon-button-text {
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* Destructive action: the icon-only delete button signals risk through
+   color + a hover border. Color alone is a WCAG 1.4.1 issue (color is
+   not the only signal); the rest border + focus ring together give a
+   non-color affordance. */
+.nbi-icon-button.danger {
+  color: var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-icon-button.danger:hover {
+  background-color: var(--jp-error-color3, rgb(230 100 100 / 20%));
+  color: var(--jp-error-color1, #d32f2f);
+  outline: 1px solid var(--jp-error-color1, #d32f2f);
+}
+
+.nbi-icon-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.nbi-breadcrumb-link:focus-visible,
+.nbi-skill-editor-tab:focus-visible,
+.nbi-skill-editor-tab-add:focus-visible,
+.nbi-pill-remove:focus-visible,
+.pill-item:focus-visible,
+.nbi-icon-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.nbi-icon-button:disabled:hover {
+  background-color: transparent;
+}
+
+.config-dialog-body a {
+  color: var(--jp-content-link-color);
+}
+
+.chat-mode-widgets-container .claude-icon svg {
+  margin-top: 4px;
+  width: 18px;
+  height: 18px;
+}
+
+.chat-confirmation-form.ask-user-question {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-container {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-bottom: 1px solid var(--jp-border-color1);
+}
+
+.ask-user-question .ask-user-question-container:nth-last-child(-n + 2) {
+  border-bottom: none;
+}
+
+.ask-user-question-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.ask-user-question-question {
+  font-weight: bold;
+}
+
+.ask-user-question-header {
+  font-style: italic;
+}
+
+.ask-user-question-options {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-option {
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-option-input-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.ask-user-question-option-input-container input {
+  transform: scale(1.25);
+}
+
+.ask-user-question-option-label-container {
+  width: calc(100% - 15px);
+  margin-left: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ask-user-question-option-label {
+  font-weight: bold;
+}
+
+.ask-user-question-option-description {
+  color: var(--jp-ui-font-color2);
+  padding-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ask-user-question-footer {
+  padding: 0 0 5px 10px;
+}
+
+.claude-mode-config-dialog .form-field-description {
+  color: var(--jp-ui-font-color1);
+}
+
+.claude-session-picker-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+}
+
+.claude-session-picker-item {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--jp-border-color2);
+  cursor: pointer;
+}
+
+.claude-session-picker-item:hover {
+  background-color: var(--jp-layout-color1);
+}
+
+.claude-session-picker-item.busy {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.claude-session-picker-item-preview {
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.claude-session-picker-item-meta {
+  color: var(--jp-ui-font-color2);
+  font-size: var(--jp-ui-font-size0);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.claude-session-picker-item-id {
+  flex-grow: 1;
+  text-align: right;
+  font-family: var(--jp-code-font-family);
+}
+
+.claude-session-picker-item-copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+  padding: 2px 4px;
+  margin-left: 2px;
+  line-height: 1;
+}
+
+.claude-session-picker-item-copy:hover,
+.claude-session-picker-item-copy:focus-visible {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  border-color: var(--jp-border-color2);
+  outline: none;
+}
+
+.claude-session-picker-item-copy.copied {
+  color: var(--jp-success-color1, var(--jp-ui-font-color1));
+}
+
+.claude-session-picker-item-copy.failed {
+  color: var(--jp-error-color1, var(--jp-ui-font-color1));
+}
+
+/* Hover toolbar over notebook cell outputs (Explain / Ask / Troubleshoot). */
+.jp-Cell-outputArea {
+  position: relative;
+}
+
+.nbi-cell-output-toolbar {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  display: flex;
+  gap: 2px;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
+  z-index: 10;
+}
+
+.nbi-cell-output-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size0);
+  font-family: var(--jp-ui-font-family);
+  cursor: pointer;
+}
+
+.nbi-cell-output-toolbar-button:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.nbi-cell-output-toolbar-button:focus-visible {
+  outline: 1px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.nbi-cell-output-toolbar .nbi-cell-output-toolbar-button svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.nbi-cell-output-toolbar-button-label {
+  white-space: nowrap;
+}
+
+/* Notebook generation toolbar button + popover */
+.nbi-notebook-generation-toolbar-button .jp-ToolbarButtonComponent {
+  background-color: transparent;
+}
+
+.nbi-notebook-generation-toolbar-button .jp-icon3[fill] {
+  fill: var(--jp-brand-color1);
+}
+
+.nbi-notebook-generation-popover-host {
+  display: block;
+  pointer-events: auto;
+}
+
+.notebook-generation-popover {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color1);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.notebook-generation-popover-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 2px 6px;
+  background-color: var(--jp-layout-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.notebook-generation-popover-header-icon {
+  display: flex;
+  align-items: center;
+  color: var(--jp-brand-color1);
+}
+
+.notebook-generation-popover .notebook-generation-popover-header-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.notebook-generation-popover-title {
+  font-weight: bold;
+  color: var(--jp-ui-font-color1);
+}
+
+.notebook-generation-popover-close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+}
+
+.notebook-generation-popover-close-button:hover {
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color3);
+  border-radius: 2px;
+}
+
+.notebook-generation-popover-close-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.notebook-generation-popover-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+}
+
+.notebook-generation-popover-input {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color1);
+  border: 1px solid var(--jp-border-color1);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  padding: 6px 8px;
+  outline: none;
+  resize: vertical;
+  min-height: 64px;
+}
+
+.notebook-generation-popover-input:focus {
+  border-color: var(--jp-brand-color1);
+}
+
+.notebook-generation-popover-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.notebook-generation-popover-submit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background-color: var(--jp-brand-color1);
+  color: white;
+  border: none;
+  border-radius: 2px;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.notebook-generation-popover-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.notebook-generation-popover .notebook-generation-popover-submit svg {
+  width: 14px;
+  height: 14px;
+}
+
+.nbi-notebook-generation-status {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background-color: var(--jp-brand-color3);
+  color: var(--jp-brand-color0);
+  font-size: var(--jp-ui-font-size0);
+  white-space: nowrap;
+}
+
+.nbi-terminal-drag-mode-button {
+  display: inline-flex;
+  align-items: center;
+}
+
+.nbi-terminal-drag-mode-button-toggle {
+  min-width: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--jp-ui-font-color1);
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+}
+
+.nbi-terminal-drag-mode-button-toggle:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.nbi-terminal-drag-mode-button-toggle:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 1px;
+}
+
+.nbi-terminal-drag-mode-button-toggle[aria-pressed='true'] {
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color1);
+}
+
+.nbi-terminal-drag-over {
+  position: relative;
+}
+
+.nbi-terminal-drag-over::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 2px dashed var(--jp-brand-color1);
+  border-radius: 4px;
+  background-color: color-mix(in srgb, var(--jp-brand-color1) 12%, transparent);
+  z-index: 100;
+}
+
+/* Set Claude Code launcher title color to Anthropic orange */
+.jp-LauncherCard-icon svg[data-icon='notebook-intelligence:claude-icon'] {
+  color: #d97757;
+}
+
+/* Set Codex launcher icon color to OpenAI blue */
+.jp-LauncherCard-icon svg[data-icon='notebook-intelligence:openai-icon'] {
+  color: #0a84ff;
+}
+
+/* Set Claude Code launcher category icon to sparkles.svg */
+.jp-Launcher-sectionHeader svg[data-icon='notebook-intelligence:claude-icon'] {
+  /* Use sparkles.svg from the project assets via a mask + background-image trick */
+  mask: url('../style/icons/sparkles.svg') no-repeat center / contain;
+  -webkit-mask: url('../style/icons/sparkles.svg') no-repeat center / contain;
+  background-color: currentcolor;
+
+  /* Hide the default SVG fill to show only the masked shape */
+  fill: transparent;
+  color: var(--jp-brand-color1);
+}
+
+/* First-run tour overlay. Rendered into document.body via portal so
+   it floats above the entire JupyterLab UI, not just the sidebar.
+   JupyterLab uses z-index 10000 for dialogs / command palette /
+   menus and 10001 for the completer and active menubar item; sit one
+   above so the tour reliably covers any concurrent JupyterLab UI
+   layer the user might pop while the tour is visible. */
+.nbi-tour-root {
+  position: fixed;
+  inset: 0;
+  z-index: 10002;
+  pointer-events: none;
+}
+
+.nbi-tour-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 45%);
+  pointer-events: auto;
+}
+
+.nbi-tour-spotlight {
+  position: absolute;
+  border-radius: 6px;
+
+  /* Theme-aware ring via the JupyterLab brand color. A solid scrim
+     "wall" (outer box-shadow) cuts the dimming hole around the
+     anchor, then the inner ring draws the brand accent so the
+     spotlight reads on both light and dark themes. */
+  box-shadow:
+    0 0 0 3px var(--jp-brand-color1, rgb(33 150 243 / 80%)),
+    0 0 0 9999px rgb(0 0 0 / 45%);
+  pointer-events: none;
+}
+
+.nbi-tour-tooltip {
+  position: absolute;
+  pointer-events: auto;
+  background: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
+  font-size: var(--jp-ui-font-size1);
+}
+
+/* CSS-triangle arrow pointing from the tooltip toward the anchor. The
+   direction class encodes "tooltip is on the SIDE of the anchor", so
+   .nbi-tour-arrow-top (tooltip above anchor) puts the arrow at the
+   bottom edge pointing down. */
+.nbi-tour-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.nbi-tour-arrow-top {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px 8px 0;
+  border-color: var(--jp-layout-color1) transparent transparent transparent;
+  filter: drop-shadow(0 1px 0 var(--jp-border-color2));
+}
+
+.nbi-tour-arrow-bottom {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 8px 8px;
+  border-color: transparent transparent var(--jp-layout-color1) transparent;
+  filter: drop-shadow(0 -1px 0 var(--jp-border-color2));
+}
+
+.nbi-tour-arrow-left {
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--jp-layout-color1);
+  filter: drop-shadow(1px 0 0 var(--jp-border-color2));
+}
+
+.nbi-tour-arrow-right {
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--jp-layout-color1) transparent transparent;
+  filter: drop-shadow(-1px 0 0 var(--jp-border-color2));
+}
+
+.nbi-tour-progress {
+  position: relative;
+  height: 4px;
+  background: var(--jp-layout-color2);
+  border-radius: 2px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.nbi-tour-progress-bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--jp-brand-color1, #2196f3);
+  border-radius: 2px;
+  transition: width 200ms ease-out;
+}
+
+.nbi-tour-body {
+  /* aria-live region; no presentational change needed here, but the
+     class is a stable hook for future polish (illustrations, etc). */
+}
+
+.nbi-tour-title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.nbi-tour-description {
+  margin-bottom: 14px;
+  line-height: 1.45;
+}
+
+.nbi-tour-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Skip is the *passive* exit (Esc / Done / Next are the active paths),
+   so style it as a muted text link rather than a full button. This
+   keeps the visual hierarchy at one primary action per step. */
+.nbi-tour-skip-link {
+  background: none;
+  border: none;
+  padding: 4px 6px;
+  font: inherit;
+  color: var(--jp-ui-font-color2);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.nbi-tour-skip-link:hover,
+.nbi-tour-skip-link:focus-visible {
+  color: var(--jp-ui-font-color1);
+  outline: none;
+}