@mikedown/core 0.1.0 → 0.3.0

package/dist/styles.css

@@ -342,6 +342,19 @@
   align-self: stretch;
 }
 
+/* A group of buttons that moves and overflows as one (the zoom control).
+   Laid out like the toolbar itself, so it looks the same as loose buttons. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar .toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+}
+/* A flexible spacer: shrinks to nothing before any button has to overflow. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar .toolbar-spacer {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
 /* High contrast / forced-colors mode */
 @media (forced-colors: active) {
   :is(.mikedown-root, .mikedown-portal) .ProseMirror a { color: LinkText; }
@@ -378,6 +391,19 @@
   overflow: visible;
 }
 
+/* Buttons that don't fit move into the More (⋯) menu, from the right
+   (layoutToolbarOverflow in toolbar-overflow.ts), so the toolbar stays one
+   row at phone widths. More sits at the right edge while it is shown. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar .toolbar-overflowed {
+  display: none !important;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.toolbar-more {
+  margin-left: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.toolbar-more[hidden] {
+  display: none;
+}
+
 :is(.mikedown-root, .mikedown-portal) .condensed-dropdown-trigger {
   display: inline-flex !important;
   align-items: center;
@@ -425,6 +451,356 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* ── Customize Toolbar (edit mode, toolbar-customize.ts) ──────────────────────
+   The live toolbar wraps instead of overflowing, every item but Text Format,
+   Settings and More can be dragged, and a quiet tray under it holds the
+   unused items. Ghost and insertion line are fixed-position chrome in the root. */
+
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 40px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  row-gap: 2px;
+  box-shadow: inset 0 -2px 0 var(--mikedown-accent, #3f51b5);
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > * {
+  touch-action: none;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-movable {
+  cursor: grab;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  transition: background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-movable button {
+  cursor: grab;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-movable:hover {
+  box-shadow: inset 0 0 0 1px var(--mikedown-input-border, rgba(128, 128, 128, 0.35));
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-fixed,
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-fixed button {
+  cursor: default;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing button.toolbar-item-fixed:hover {
+  background: transparent;
+}
+/* The item being dragged stays in place, faded, until it is dropped. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-dragging {
+  opacity: 0.35;
+}
+/* Keyboard (D11). The ring and the picked-up state use the accent, solid,
+   which keeps 3:1 against the toolbar in both built-in themes (the default
+   focus ring is translucent); the VS Code theme maps the ring to focusBorder. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > :focus {
+  outline: none;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > :focus-visible,
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed {
+  outline: 2px solid var(--mikedown-toolbar-edit-focus, var(--mikedown-accent, #3f51b5));
+  outline-offset: 1px;
+}
+/* Picked up with Space: tinted, lifted, a little larger. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed {
+  position: relative;
+  z-index: 1;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 18%, var(--mikedown-surface-toolbar, transparent));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
+  translate: 0 -1px;
+  scale: 1.02;
+  transition: translate 120ms ease, scale 120ms ease, box-shadow 120ms ease, background 120ms ease;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed,
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed button {
+  cursor: grabbing;
+}
+/* No hover tooltip on the item being moved by keyboard. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed[data-tip]::after {
+  display: none;
+}
+
+/* A separator is 1px wide: give it a grab area in edit mode. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-separator {
+  width: 11px;
+  padding: 0 5px;
+  margin: 6px 0;
+  background-clip: content-box;
+}
+/* A flexible spacer is invisible until you customize: then a dashed box with ⇔. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-spacer {
+  min-width: 40px;
+  height: 26px;
+  margin: 3px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--mikedown-input-border, rgba(128, 128, 128, 0.5));
+  color: var(--mikedown-text-muted, #888);
+  font-family: var(--mikedown-font-ui, system-ui, sans-serif);
+  font-size: 13px;
+  line-height: 1;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-spacer::before {
+  content: '⇔';
+}
+/* No hover tooltips while something is being dragged. */
+.mikedown-root.toolbar-drag-active .mikedown-toolbar button[data-tip]::after {
+  display: none;
+}
+.mikedown-root.toolbar-drag-active,
+.mikedown-root.toolbar-drag-active * {
+  cursor: grabbing !important;
+}
+
+/* The tray: a quiet panel under the (possibly wrapped) toolbar. `top` is set
+   from the toolbar's height. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-tray {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 60%;
+  overflow-y: auto;
+  padding: 10px 12px;
+  background: var(--mikedown-surface-toolbar, #252526);
+  border-bottom: 1px solid var(--mikedown-divider, #3c3c3c);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+  font-family: var(--mikedown-font-ui, system-ui, sans-serif);
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--mikedown-text-ui, #cccccc);
+  user-select: none;
+  transition: background 120ms ease, box-shadow 120ms ease;
+  animation: mikedown-tray-in 120ms ease-out;
+}
+@keyframes mikedown-tray-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-tray.is-drop-target {
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 7%, var(--mikedown-surface-toolbar, #252526));
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mikedown-accent, #3f51b5) 55%, transparent), 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-heading {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--mikedown-text-muted, #999);
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 84px;
+  min-height: 62px;
+  padding: 7px 4px 6px;
+  border: 1px solid var(--mikedown-border, rgba(128, 128, 128, 0.25));
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: var(--mikedown-surface, transparent);
+  color: var(--mikedown-text-ui, #cccccc);
+  font: inherit;
+  cursor: grab;
+  touch-action: none;
+  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-item:hover {
+  background: var(--mikedown-hover, rgba(128, 128, 128, 0.12));
+  border-color: var(--mikedown-input-border, rgba(128, 128, 128, 0.4));
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-item:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-reset:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-done:focus-visible {
+  outline: 2px solid var(--mikedown-toolbar-edit-focus, var(--mikedown-accent, #3f51b5));
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-item.toolbar-item-dragging {
+  opacity: 0.35;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-label {
+  font-size: 11px;
+  text-align: center;
+  color: var(--mikedown-text-muted, #999);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-hint {
+  flex: 1 1 auto;
+  color: var(--mikedown-text-muted, #999);
+  font-size: 11px;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-reset {
+  background: none;
+  border: none;
+  padding: 4px 2px;
+  font: inherit;
+  color: var(--mikedown-link, #3794ff);
+  cursor: pointer;
+  border-radius: 2px;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-reset:hover:not(:disabled) {
+  text-decoration: underline;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-reset:disabled {
+  color: var(--mikedown-text-muted, #999);
+  opacity: 0.6;
+  cursor: default;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-done {
+  padding: 5px 18px;
+  border: 1px solid var(--mikedown-button-border, transparent);
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: var(--mikedown-accent, #0e639c);
+  color: var(--mikedown-accent-text, #ffffff);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-done:hover {
+  background: var(--mikedown-accent-hover, #1177bb);
+}
+/* Screen reader only: the tray's live region (keyboard moves, adds and removals). */
+:is(.mikedown-root, .mikedown-portal) .toolbar-tray-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* Item pictures in tray tiles and the drag ghost: icons only, toolbar sizes. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  min-height: 28px;
+  color: var(--mikedown-icon, #c5c5c5);
+  font-family: var(--mikedown-font-ui, system-ui, sans-serif);
+  pointer-events: none;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  min-width: 24px;
+  padding: 0 3px;
+  font-size: 13px;
+  line-height: 1;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-btn svg {
+  width: 18px;
+  height: 18px;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-btn .condensed-btn-label {
+  font-weight: 600;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-btn .condensed-chevron svg {
+  width: 10px;
+  height: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-sep {
+  display: block;
+  width: 1px;
+  height: 22px;
+  background: var(--mikedown-text-muted, #999);
+  opacity: 0.6;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-spacer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 22px;
+  border: 1px dashed var(--mikedown-input-border, rgba(128, 128, 128, 0.5));
+  border-radius: 3px;
+  font-size: 13px;
+  color: var(--mikedown-text-muted, #999);
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-preview-spacer::before {
+  content: '⇔';
+}
+
+/* The ghost: the item lifted off the toolbar, following the pointer. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-ghost {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  padding: 4px 6px;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: var(--mikedown-surface-raised, #252526);
+  border: 1px solid var(--mikedown-border, rgba(128, 128, 128, 0.3));
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
+  scale: 1.02;
+  opacity: 0.95;
+  animation: mikedown-ghost-lift 120ms ease-out;
+}
+@keyframes mikedown-ghost-lift {
+  from { scale: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+  to { scale: 1.02; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12); }
+}
+
+/* The insertion line: where a drop would land on the toolbar. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-drop-line {
+  position: fixed;
+  z-index: 10001;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--mikedown-accent, #3f51b5);
+  pointer-events: none;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-drop-line[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-tray,
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-ghost {
+    animation: none;
+  }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-ghost { scale: 1; }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed {
+    translate: none;
+    scale: none;
+    transition: none;
+  }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing .toolbar-item-movable,
+  :is(.mikedown-root, .mikedown-portal) .toolbar-tray-item,
+  :is(.mikedown-root, .mikedown-portal) .toolbar-tray-done,
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-tray {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-drop-line { background: Highlight; }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar-tray.is-drop-target { outline: 2px dashed Highlight; }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > :focus-visible,
+  :is(.mikedown-root, .mikedown-portal) .toolbar-tray-item:focus-visible { outline-color: Highlight; }
+  /* Tints vanish in forced colors: a thicker double ring marks the picked-up item. */
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar.toolbar-editing > .toolbar-item-grabbed { outline: 4px double Highlight; }
+}
+
 /* MikeDown Editor — Webview Styles */
 
 /* Zero-specificity reset so third-party styles inside the editor (KaTeX,
@@ -708,6 +1084,12 @@
   padding-left: 1.5em;
   margin: 0.5em 0;
 }
+/* Markers are set explicitly so a page reset (Tailwind preflight's
+   `ul, ol { list-style: none }`) cannot strip them. Task lists override this. */
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul { list-style-type: disc; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul ul { list-style-type: circle; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul ul ul { list-style-type: square; }
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ol { list-style-type: decimal; }
 :is(.mikedown-root, .mikedown-portal) .ProseMirror li {
   margin: 0.15em 0;
 }
@@ -918,19 +1300,83 @@
   margin-top: 0.2em;
 }
 
+/* The checkbox is drawn by hand so its click target can be 24 by 24px (WCAG
+   2.5.8) while the box still looks 14px: the input is 24px square, a -5px
+   margin keeps the old 14px footprint in the line, and ::before draws the box
+   inside it (::after the tick). */
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: -5px;
+  border: 0;
+  background: transparent;
   cursor: pointer;
-  width: 14px;
-  height: 14px;
-  accent-color: var(--mikedown-link, #3794ff);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::before {
+  content: '';
+  position: absolute;
+  inset: 5px;
+  border: 1.5px solid var(--mikedown-text-muted, #6f6f74);
+  border-radius: 3px;
+  background: var(--mikedown-input-bg, transparent);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+  border-color: var(--mikedown-link, #3794ff);
+  background: var(--mikedown-link, #3794ff);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 10px;
+  top: 7px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--mikedown-surface, #ffffff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible {
+  outline: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]:focus-visible::before {
+  outline: 2px solid var(--mikedown-focus-ring, #3794ff);
+  outline-offset: 1px;
+}
+
+/* Forced colors repaint the hand-drawn box, which would hide the checked
+   state; use the native control there. */
+@media (forced-colors: active) {
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
+    appearance: auto;
+    -webkit-appearance: checkbox;
+    width: 14px;
+    height: 14px;
+    margin: 0;
+  }
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::before,
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"]::after {
+    content: none;
+  }
 }
 
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li > div {
   flex: 1;
 }
 
+/* Done items: muted text plus a strikethrough. A muted color rather than
+   opacity, so the text keeps at least 4.5:1 contrast (opacity 0.6 left it at
+   about 3.9:1 on white). */
 :is(.mikedown-root, .mikedown-portal) .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
-  opacity: 0.6;
+  color: var(--mikedown-text-muted, #6f6f74);
   text-decoration: line-through;
 }
 
@@ -1134,16 +1580,11 @@
   background: var(--mikedown-selection, rgba(38,79,120,0.4)) !important;
 }
 
-/* Column resize handle */
-:is(.mikedown-root, .mikedown-portal) .ProseMirror .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: var(--mikedown-focus-ring);
-  pointer-events: none;
-  border-radius: 2px;
+/* Select Table: the whole table as a node selection */
+:is(.mikedown-root, .mikedown-portal) .ProseMirror table.ProseMirror-selectednode,
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .tableWrapper.ProseMirror-selectednode table {
+  outline: 2px solid var(--mikedown-focus-ring);
+  outline-offset: 1px;
 }
 
 /* ═══ images.css ═══ */
@@ -1491,8 +1932,11 @@
 
 /* Frontmatter Block */
 
+/* In flow above the document inside the scrolling container, with the same
+   column as #editor. */
 :is(.mikedown-root, .mikedown-portal) .frontmatter-block {
-  margin-bottom: 1em;
+  max-width: var(--mikedown-content-width, 100%);
+  margin: 0 auto 1em;
   border: 1px solid var(--mikedown-border, rgba(128,128,128,0.2));
   border-radius: var(--mikedown-radius, 6px);
   overflow: hidden;
@@ -1532,8 +1976,8 @@
   font-family: var(--mikedown-font-mono, monospace);
   font-size: 0.85em;
   line-height: 1.5;
-  white-space: pre;
-  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
   outline: none;
   background: transparent;
   color: var(--mikedown-text);
@@ -1706,13 +2150,76 @@
   margin-bottom: 0.25em;
 }
 
-/* ═══ links.css ═══ */
-/* Link Navigation & Anchor System */
+/* ═══ toc.css ═══ */
+/* Table of contents block (see toc-node.ts). */
 
-/* Link styles */
-:is(.mikedown-root, .mikedown-portal) .ProseMirror a {
-  color: var(--mikedown-link, #4e9de0);
-  text-decoration: none;
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc {
+  margin: 1em 0;
+  padding: 0.6em 1em 0.7em;
+  border: 1px solid var(--mikedown-divider);
+  border-radius: var(--mikedown-radius-sm);
+  font-size: 0.95em;
+  cursor: default;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc.ProseMirror-selectednode {
+  outline: 2px solid var(--mikedown-focus-ring);
+  outline-offset: 1px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc-title {
+  margin-bottom: 0.3em;
+  font-size: 0.8em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mikedown-text-muted);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc ul {
+  margin: 0;
+  padding-left: 1.2em;
+  list-style: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc > ul {
+  padding-left: 0;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc li {
+  margin: 0.15em 0;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc a {
+  color: var(--mikedown-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc a:hover {
+  text-decoration: underline;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc-empty {
+  margin: 0;
+  color: var(--mikedown-text-muted);
+  font-style: italic;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-toc-raw {
+  margin: 0;
+  font-family: var(--mikedown-font-mono);
+  font-size: 0.9em;
+  white-space: pre-wrap;
+}
+
+/* ═══ links.css ═══ */
+/* Link Navigation & Anchor System */
+
+/* Link styles */
+:is(.mikedown-root, .mikedown-portal) .ProseMirror a {
+  color: var(--mikedown-link, #4e9de0);
+  text-decoration: none;
   border-bottom: 1px solid color-mix(in srgb, var(--mikedown-link, #4e9de0) 35%, transparent);
   transition: color 0.12s ease, border-color 0.12s ease;
   cursor: text;
@@ -2089,6 +2596,12 @@
   margin-bottom: 8px;
 }
 
+:is(.mikedown-root, .mikedown-portal) .tp-grid:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .tp-ok:focus-visible {
+  outline: 2px solid var(--mikedown-focus-ring, #007fd4);
+  outline-offset: 2px;
+}
+
 :is(.mikedown-root, .mikedown-portal) .tp-cell {
   width: 18px;
   height: 18px;
@@ -2168,7 +2681,9 @@
   z-index: 999;
   display: inline-flex;
   flex-direction: row;
-  flex-wrap: nowrap;
+  /* Wraps to a second row on a phone instead of running off the screen. */
+  flex-wrap: wrap;
+  max-width: calc(100vw - 8px);
   align-items: center;
   gap: 2px;
   background: var(--mikedown-surface-raised, var(--mikedown-surface));
@@ -2250,28 +2765,38 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  color: var(--mikedown-text);
+  width: 18px;
+  height: 18px;
+  /* The grip icon is drawn in currentColor: muted text works on both themes,
+     and the raised surface plus an edge keep it visible on a page-coloured
+     background. */
+  color: var(--mikedown-text-muted, var(--mikedown-text));
   opacity: 0;
   cursor: grab;
-  border-radius: 3px;
+  border-radius: 4px;
+  border: 1px solid color-mix(in srgb, var(--mikedown-text-muted, #888) 40%, transparent);
+  box-sizing: border-box;
   user-select: none;
-  background: var(--mikedown-surface-raised, transparent);
-  transition: opacity 0.15s ease, background 0.1s ease;
+  background: var(--mikedown-surface-raised, var(--mikedown-surface, transparent));
+  transition: opacity 0.15s ease, background 0.1s ease, color 0.1s ease;
+  pointer-events: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .td-handle svg {
+  display: block;
   pointer-events: none;
 }
 
 /* Handles are on document.body, not siblings of the table, so we use a
    class toggled by JS instead of a sibling combinator. */
 :is(.mikedown-root, .mikedown-portal) .td-handles-visible .td-handle {
-  opacity: 0.5;
+  opacity: 0.85;
   pointer-events: auto;
 }
 
 :is(.mikedown-root, .mikedown-portal) .td-handles-visible .td-handle:hover {
   opacity: 1;
+  color: var(--mikedown-text);
   background: var(--mikedown-hover, rgba(90,93,94,0.31));
 }
 
@@ -2308,32 +2833,46 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   width: 2px;
 }
 
-/* Multi-Cell Selection */
-
-:is(.mikedown-root, .mikedown-portal) .ProseMirror td.mikedown-cell-selected,
-:is(.mikedown-root, .mikedown-portal) .ProseMirror th.mikedown-cell-selected {
-  background: color-mix(in srgb, var(--mikedown-focus-ring, #007fd4) 15%, transparent) !important;
-  position: relative;
+/* Hover "+" strips: add a column (right of the header row) or a row (under
+   the last row). They exist only while the pointer is over or near a table. */
+:is(.mikedown-root, .mikedown-portal) .td-add {
+  position: fixed;
+  z-index: 898;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: var(--mikedown-text-muted, var(--mikedown-text));
+  background: color-mix(in srgb, var(--mikedown-text-muted, #888) 12%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--mikedown-text-muted, #888) 45%, transparent);
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  opacity: 0.8;
+  animation: mikedown-td-add-in 0.12s ease-out;
+  transition: background 0.1s ease, color 0.1s ease, opacity 0.1s ease;
 }
 
-:is(.mikedown-root, .mikedown-portal) .ProseMirror td.mikedown-cell-border-top,
-:is(.mikedown-root, .mikedown-portal) .ProseMirror th.mikedown-cell-border-top {
-  border-top: 2px solid var(--mikedown-focus-ring, #007fd4) !important;
+:is(.mikedown-root, .mikedown-portal) .td-add:hover {
+  opacity: 1;
+  color: var(--mikedown-accent-text, #fff);
+  background: var(--mikedown-accent, #0e639c);
+  border-style: solid;
+  border-color: var(--mikedown-accent, #0e639c);
 }
 
-:is(.mikedown-root, .mikedown-portal) .ProseMirror td.mikedown-cell-border-bottom,
-:is(.mikedown-root, .mikedown-portal) .ProseMirror th.mikedown-cell-border-bottom {
-  border-bottom: 2px solid var(--mikedown-focus-ring, #007fd4) !important;
+@keyframes mikedown-td-add-in {
+  from { opacity: 0; }
+  to { opacity: 0.8; }
 }
 
-:is(.mikedown-root, .mikedown-portal) .ProseMirror td.mikedown-cell-border-left,
-:is(.mikedown-root, .mikedown-portal) .ProseMirror th.mikedown-cell-border-left {
-  border-left: 2px solid var(--mikedown-focus-ring, #007fd4) !important;
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .td-add { animation: none; }
 }
 
-:is(.mikedown-root, .mikedown-portal) .ProseMirror td.mikedown-cell-border-right,
-:is(.mikedown-root, .mikedown-portal) .ProseMirror th.mikedown-cell-border-right {
-  border-right: 2px solid var(--mikedown-focus-ring, #007fd4) !important;
+/* No strips while a row or column is being dragged. */
+body.td-dragging :is(.mikedown-root, .mikedown-portal) .td-add {
+  display: none;
 }
 
 /* ═══ tasklist.css ═══ */
@@ -2600,6 +3139,12 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   outline-offset: -2px;
 }
 
+/* Disabled item (e.g. an overflowed Zoom In at the maximum size). */
+:is(.mikedown-root, .mikedown-portal) .tdd-item.tdd-disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
 :is(.mikedown-root, .mikedown-portal) .tdd-item-icon {
   display: inline-flex;
   align-items: center;
@@ -2620,6 +3165,60 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   text-overflow: ellipsis;
 }
 
+/* A muted note under the label (e.g. why the item is disabled). It takes its
+   own line so a long reason never squeezes the label; the item's tooltip has
+   the same text. */
+:is(.mikedown-root, .mikedown-portal) .tdd-item:has(> .tdd-item-hint) {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 28px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  row-gap: 0;
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-item-hint {
+  flex: 1 0 100%;
+  /* Under the label: past the icon (18px) and the gap (8px). */
+  padding-left: 26px;
+  font-size: 11px;
+  line-height: 1.35;
+  white-space: normal;
+  color: var(--mikedown-text-muted);
+}
+
+/* Status row: a note, not an action. Warning icon, label, muted detail line. */
+:is(.mikedown-root, .mikedown-portal) .tdd-status {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  column-gap: 8px;
+  align-items: start;
+  padding: 6px 10px;
+  margin: 0 4px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--mikedown-text);
+  background: color-mix(in srgb, var(--mikedown-warning, #b26a00) 12%, transparent);
+  cursor: default;
+  user-select: text;
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-status-icon {
+  display: flex;
+  align-items: center;
+  height: 1.35em;
+  color: var(--mikedown-warning, #b26a00);
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-status-detail {
+  grid-column: 2;
+  font-size: 11px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  color: var(--mikedown-text-muted);
+}
+
 /* Active indicator — small dot on the left */
 :is(.mikedown-root, .mikedown-portal) .tdd-item-active-indicator {
   display: none;
@@ -2700,6 +3299,40 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   :is(.mikedown-root, .mikedown-portal) #toolbar-dropdown { forced-color-adjust: auto; }
 }
 
+/* Segmented row: a labelled radio group (the AI menu's Thinking row). */
+:is(.mikedown-root, .mikedown-portal) .tdd-seg-row {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px 5px;
+}
+
+/* A segmented row's announcement ("Thinking: High"): read out, never shown. */
+:is(.mikedown-root, .mikedown-portal) .tdd-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-seg-row > .tdd-seg {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0;
+  white-space: nowrap;
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-seg-btn {
+  cursor: pointer;
+  outline: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .tdd-seg-btn.tdd-focused {
+  outline: 2px solid var(--mikedown-focus-ring);
+  outline-offset: 0;
+}
+
 /* ═══ outline-sidebar.css ═══ */
 /* ─── In-Editor Document Sidebar ─────────────────────────────────────────── */
 /* Hosts (top-to-bottom): optional Properties section, Outline, Backlinks,
@@ -2858,6 +3491,8 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
 
 /* ─── Header buttons: position toggle + pin (Outline header only) ────────── */
 
+:is(.mikedown-root, .mikedown-portal) .outline-fold-all,
+:is(.mikedown-root, .mikedown-portal) .outline-unfold-all,
 :is(.mikedown-root, .mikedown-portal) .outline-position-toggle,
 :is(.mikedown-root, .mikedown-portal) .outline-pin {
   width: 22px;
@@ -2875,6 +3510,8 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   transition: background-color 0.12s ease, opacity 0.12s ease, color 0.12s ease;
 }
 
+:is(.mikedown-root, .mikedown-portal) .outline-fold-all:hover,
+:is(.mikedown-root, .mikedown-portal) .outline-unfold-all:hover,
 :is(.mikedown-root, .mikedown-portal) .outline-position-toggle:hover,
 :is(.mikedown-root, .mikedown-portal) .outline-pin:hover {
   opacity: 1;
@@ -2937,12 +3574,55 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   opacity: 1;
 }
 
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-1 { padding-left: 10px; }
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-2 { padding-left: 22px; }
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-3 { padding-left: 34px; }
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-4 { padding-left: 46px; }
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-5 { padding-left: 58px; }
-:is(.mikedown-root, .mikedown-portal) .outline-item.level-6 { padding-left: 70px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-1 { padding-left: 24px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-2 { padding-left: 36px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-3 { padding-left: 48px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-4 { padding-left: 60px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-5 { padding-left: 72px; }
+:is(.mikedown-root, .mikedown-portal) .outline-item.level-6 { padding-left: 84px; }
+
+/* Fold chevron: sits in the 14px gutter just before the heading text. */
+:is(.mikedown-root, .mikedown-portal) .outline-row {
+  position: relative;
+}
+
+:is(.mikedown-root, .mikedown-portal) .outline-fold {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 14px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  color: var(--mikedown-text, #d4d4d4);
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0.55;
+  cursor: pointer;
+}
+
+:is(.mikedown-root, .mikedown-portal) .outline-fold-icon {
+  display: inline-block;
+  transition: transform 120ms ease-out;
+}
+
+:is(.mikedown-root, .mikedown-portal) .outline-fold:hover {
+  opacity: 1;
+  background-color: var(--mikedown-hover, rgba(127, 127, 127, 0.18));
+}
+
+:is(.mikedown-root, .mikedown-portal) .outline-row.folded .outline-fold-icon {
+  transform: rotate(-90deg);
+}
+
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-1 .outline-fold { left: 10px; }
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-2 .outline-fold { left: 22px; }
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-3 .outline-fold { left: 34px; }
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-4 .outline-fold { left: 46px; }
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-5 .outline-fold { left: 58px; }
+:is(.mikedown-root, .mikedown-portal) .outline-row.level-6 .outline-fold { left: 70px; }
 
 /* ─── Backlink items ─────────────────────────────────────────────────────── */
 
@@ -3339,63 +4019,286 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   color: var(--mikedown-text, #d4d4d4);
 }
 
-/* ─── Footer strip ───────────────────────────────────────────────────────── */
+/* ─── Properties suggestions (AI) ────────────────────────────────────────── */
 
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer {
+/* Suggest (sparkle) at the right of the Properties header; aria-disabled with
+   the router's reason as its tooltip when nothing can serve it. */
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 0 0 auto;
-  padding: 6px 12px;
-  border-top: 1px solid var(--mikedown-divider, #3c3c3c);
-  font-size: 10.5px;
-  opacity: 0.75;
-  color: var(--mikedown-text-muted, #a0a0a0);
-  font-variant-numeric: tabular-nums;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: var(--mikedown-icon, #d4d4d4);
+  opacity: 0.55;
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.12s ease, opacity 0.12s ease;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn[hidden] {
+  display: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn:hover:not(.disabled),
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn:focus-visible {
+  opacity: 1;
+  background-color: var(--mikedown-hover, rgba(127, 127, 127, 0.18));
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn.disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 6px;
+  /* Same inset as .properties-row, so chips line up with the keys above. */
+  padding: 4px 10px 6px;
+  font-size: 11px;
+  color: var(--mikedown-text, #d4d4d4);
 }
 
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-row {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+:is(.mikedown-root, .mikedown-portal) .properties-suggest[hidden] {
+  display: none;
 }
 
-/* Rows wrapper is rebuilt each render; it lays out as if the rows were direct
-   children of the footer column. */
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-rows {
-  display: contents;
+/* Running: a thin indeterminate line, then the engine badge text. */
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-progress {
+  position: relative;
+  height: 2px;
+  overflow: hidden;
+  border-radius: 1px;
+  background-color: color-mix(in srgb, var(--mikedown-focus-ring, #007fd4) 18%, transparent);
 }
 
-/* Persistent live region for the dismiss confirmation. Empty most of the
-   time; the negative margin cancels the footer's row gap so it adds no
-   height while empty. */
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-status {
-  white-space: normal;
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-progress::after {
+  content: '';
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 35%;
+  background-color: var(--mikedown-focus-ring, #007fd4);
+  animation: mikedown-suggest-progress 1.1s ease-in-out infinite;
 }
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-status:empty {
-  margin-top: -2px;
+
+@keyframes mikedown-suggest-progress {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(300%); }
 }
 
-/* ─── Support MikeDown footer link (review appeal M6) ─────────────────────
-   Metrics and the link group each draw a leading middle dot. The items
-   wrapper is shifted left by one separator width and clipped by the row, so
-   the item that starts a line never shows its dot. When the sidebar is too
-   narrow the whole link group wraps to its own line. */
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-row--with-support {
-  white-space: normal;
-  text-overflow: clip;
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .properties-suggest-progress::after {
+    animation: none;
+    width: 100%;
+    opacity: 0.5;
+  }
 }
 
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-items {
-  --sidebar-footer-sep: 0.95em;
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-status {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  row-gap: 2px;
-  margin-left: calc(-1 * var(--sidebar-footer-sep));
+  gap: 6px;
+  min-width: 0;
+  color: var(--mikedown-text-muted, #a0a0a0);
 }
 
-:is(.mikedown-root, .mikedown-portal) .sidebar-footer-item {
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-message {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Why the disabled Suggest cannot run: wraps (it can be a sentence or two). */
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-reason {
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 1.4;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-error {
+  color: var(--mikedown-danger, #f48771);
+  line-height: 1.4;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-note {
+  color: var(--mikedown-warning, #b26a00);
+  line-height: 1.4;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-actions {
+  display: flex;
+  gap: 8px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-action {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--mikedown-link, #3794ff);
+  cursor: pointer;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-action:hover {
+  text-decoration: underline;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
+
+/* Suggested chips: the tag pill look with a dashed outline. */
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip {
+  padding: 0 2px 0 0;
+  background-color: transparent;
+  border: 1px dashed color-mix(in srgb, var(--mikedown-text, #d4d4d4) 45%, transparent);
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip.tag {
+  background-color: color-mix(in srgb, var(--mikedown-link, #3794ff) 8%, transparent);
+  border-color: color-mix(in srgb, var(--mikedown-link, #3794ff) 60%, transparent);
+}
+
+/* The `#` sits inside the apply button, not before it. */
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip.tag::before {
+  content: none;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip.tag .properties-pill-text::before {
+  content: '#';
+  opacity: 0.6;
+}
+
+/* Title and description: one line, ellipsis, the full text in the tooltip. */
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip:is([data-kind="title"], [data-kind="description"]) {
+  flex: 1 1 100%;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-apply {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 1px 2px 1px 6px;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip:hover {
+  border-style: solid;
+  background-color: var(--mikedown-hover, rgba(127, 127, 127, 0.18));
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-pill.properties-suggest-chip.tag:hover {
+  background-color: color-mix(in srgb, var(--mikedown-link, #3794ff) 22%, transparent);
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-apply:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-chip .properties-pill-x:focus-visible {
+  outline: 1px solid var(--mikedown-focus-ring, #007fd4);
+  outline-offset: 1px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-key {
+  flex: 0 0 auto;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mikedown-text-muted, #a0a0a0);
+}
+
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-new {
+  flex: 0 0 auto;
+  padding: 0 3px;
+  border-radius: 3px;
+  font-size: 8.5px;
+  line-height: 1.4;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mikedown-accent-text, #ffffff);
+  background-color: var(--mikedown-accent, var(--mikedown-focus-ring, #0e639c));
+}
+
+/* Suggested chips always show their dismiss (×). */
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-chip .properties-pill-x {
+  display: inline-block;
+  flex: 0 0 auto;
+}
+
+/* ─── Footer strip ───────────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  border-top: 1px solid var(--mikedown-divider, #3c3c3c);
+  font-size: 10.5px;
+  opacity: 0.75;
+  color: var(--mikedown-text-muted, #a0a0a0);
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-row {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Rows wrapper is rebuilt each render; it lays out as if the rows were direct
+   children of the footer column. */
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-rows {
+  display: contents;
+}
+
+/* Persistent live region for the dismiss confirmation. Empty most of the
+   time; the negative margin cancels the footer's row gap so it adds no
+   height while empty. */
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-status {
+  white-space: normal;
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-status:empty {
+  margin-top: -2px;
+}
+
+/* ─── Support MikeDown footer link (review appeal M6) ─────────────────────
+   Metrics and the link group each draw a leading middle dot. The items
+   wrapper is shifted left by one separator width and clipped by the row, so
+   the item that starts a line never shows its dot. When the sidebar is too
+   narrow the whole link group wraps to its own line. */
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-row--with-support {
+  white-space: normal;
+  text-overflow: clip;
+}
+
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-items {
+  --sidebar-footer-sep: 0.95em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 2px;
+  margin-left: calc(-1 * var(--sidebar-footer-sep));
+}
+
+:is(.mikedown-root, .mikedown-portal) .sidebar-footer-item {
   white-space: nowrap;
 }
 
@@ -4639,3 +5542,2706 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) * {
   :is(.mikedown-root, .mikedown-portal) .settings-content { padding: 14px 16px; }
   :is(.mikedown-root, .mikedown-portal) .settings-footer { padding: 10px 16px; }
 }
+
+/* In-modal confirm ("Discard unsaved changes?" before Customize Toolbar…). */
+:is(.mikedown-root, .mikedown-portal) .settings-modal { position: relative; }
+:is(.mikedown-root, .mikedown-portal) .settings-confirm-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.28);
+}
+:is(.mikedown-root, .mikedown-portal) .settings-confirm {
+  width: min(360px, 100%);
+  padding: 16px 18px 14px;
+  background: var(--mikedown-surface-raised, #252526);
+  border: 1px solid var(--settings-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+}
+:is(.mikedown-root, .mikedown-portal) .settings-confirm-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .settings-confirm-text {
+  color: var(--settings-muted);
+  margin-bottom: 14px;
+}
+:is(.mikedown-root, .mikedown-portal) .settings-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ═══ ai.css ═══ */
+/* MikeDown — AI settings tab (ai-settings.ts, a summary), the AI Engines
+ * page (ai-engines-page.ts, an overlay from editor.ts), the Express engine
+ * form (ai-engine-form.ts) and the sidebar AI chip.
+ *
+ * Both the tab and the page are built from the Settings modal's own rows and
+ * groups (settings-modal.css); this file only adds what those do not have:
+ * the page shell (header, list pane, detail pane, narrow layout), engine
+ * rows (glyph, local/cloud pill, status dot, switch), the quick-start cards,
+ * the Express form (sheet, models combobox, Advanced fold), the full models
+ * table with capability chips, route pickers and notes. Loaded after
+ * settings-modal.css so it can lean on the --settings-* tokens, which the
+ * page frame gets here as well.
+ */
+
+/* The page lives outside .settings-modal: it gets the modal's tokens too. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-frame {
+  --settings-fg: var(--mikedown-text, #d4d4d4);
+  --settings-muted: var(--mikedown-text-muted, rgba(128, 128, 128, 0.9));
+  --settings-border: var(--mikedown-border, rgba(128, 128, 128, 0.35));
+  --settings-divider: var(--mikedown-border, rgba(128, 128, 128, 0.2));
+  --settings-control-border: var(--mikedown-input-border, rgba(128, 128, 128, 0.35));
+  --settings-hover-bg: var(--mikedown-hover, rgba(128, 128, 128, 0.15));
+  --settings-active-bg: var(--mikedown-selected-bg, #0e639c);
+  --settings-active-fg: var(--mikedown-selected-text, #ffffff);
+  --settings-focus: var(--mikedown-focus-ring, #007fd4);
+}
+
+:is(.mikedown-root, .mikedown-portal) :is(.settings-modal, .ai-page-frame) {
+  --ai-ok: var(--mikedown-success, #2e7d32);
+  --ai-error: var(--mikedown-danger, #c62828);
+  --ai-warn: var(--mikedown-warning, #b26a00);
+  --ai-info: var(--mikedown-info, #1e70d6);
+  --ai-local: var(--mikedown-success, #2e7d32);
+  --ai-cloud: var(--mikedown-info, #1e70d6);
+  --ai-tile-bg: var(--mikedown-active, rgba(128, 128, 128, 0.18));
+  --ai-row-hover: var(--mikedown-hover, rgba(128, 128, 128, 0.08));
+  --ai-ease: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Screen-reader-only live region for probe results. */
+:is(.mikedown-root, .mikedown-portal) .ai-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-mono {
+  font-family: var(--mikedown-font-mono, ui-monospace, monospace);
+  font-size: 12px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-muted {
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+
+/* ── Notes (warnings, info, inline results) ─────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-note-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-note--warning .ai-note-icon { color: var(--ai-warn); }
+:is(.mikedown-root, .mikedown-portal) .ai-note--error { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-note--ok .ai-note-icon { color: var(--ai-ok); }
+:is(.mikedown-root, .mikedown-portal) .ai-note--info .ai-note-icon { color: var(--ai-info); }
+
+/* Notes and errors span both columns of an inline row (and stay left). */
+:is(.mikedown-root, .mikedown-portal) .settings-row--inline > .ai-row-note,
+:is(.mikedown-root, .mikedown-portal) .settings-row--inline > .ai-locality-note,
+:is(.mikedown-root, .mikedown-portal) .settings-row--inline > .ai-field-error { justify-self: stretch; }
+:is(.mikedown-root, .mikedown-portal) .ai-row-note,
+:is(.mikedown-root, .mikedown-portal) .ai-locality-note,
+:is(.mikedown-root, .mikedown-portal) .ai-field-error {
+  grid-column: 1 / -1;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-locality-note:empty,
+:is(.mikedown-root, .mikedown-portal) .ai-field-error:empty { display: none; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-field-error {
+  font-size: 12px;
+  color: var(--ai-error);
+}
+:is(.mikedown-root, .mikedown-portal) .settings-input[aria-invalid="true"] {
+  border-color: var(--ai-error);
+}
+
+/* A result appears with a short fade and rise, so a probe that comes back
+   reads as an answer rather than a layout jump. */
+:is(.mikedown-root, .mikedown-portal) .ai-result {
+  animation: ai-arrive 220ms var(--ai-ease);
+}
+@keyframes ai-arrive {
+  from { opacity: 0; transform: translateY(-2px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ── Pills, tags, glyphs ─────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 6px;
+  height: 17px;
+  border-radius: 9px;
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-pill--local {
+  color: var(--ai-local);
+  background: color-mix(in srgb, var(--ai-local) 12%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-pill--cloud {
+  color: var(--ai-cloud);
+  background: color-mix(in srgb, var(--ai-cloud) 12%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-pill--mismatch {
+  border-color: var(--ai-warn);
+  border-style: dashed;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-pill--blocked {
+  color: var(--settings-muted);
+  border-color: var(--settings-control-border);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-pill--soon {
+  color: var(--settings-muted);
+  border-color: var(--settings-control-border);
+  font-weight: 400;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-tag {
+  font-size: 10.5px;
+  padding: 0 5px;
+  line-height: 16px;
+  border-radius: 3px;
+  color: var(--settings-muted);
+  background: var(--ai-tile-bg);
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-tag--loaded {
+  color: var(--ai-ok);
+  background: color-mix(in srgb, var(--ai-ok) 12%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-tag--loaded::before {
+  content: '';
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-tag--missing { font-style: italic; }
+
+/* Kind tile: a rounded square like an extension icon. */
+:is(.mikedown-root, .mikedown-portal) .ai-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: var(--ai-tile-bg);
+  color: var(--mikedown-text-ui, var(--settings-fg));
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  flex-shrink: 0;
+  user-select: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="lmstudio"] { background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 16%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="ollama"] { background: color-mix(in srgb, var(--mikedown-text, #888) 14%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="anthropic"] { background: color-mix(in srgb, #d97757 22%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="openai"] { background: color-mix(in srgb, #10a37f 20%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="vscode-lm"] { background: color-mix(in srgb, var(--mikedown-text, #888) 10%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph[data-kind="unknown"] { border: 1px dashed var(--settings-control-border); background: transparent; }
+:is(.mikedown-root, .mikedown-portal) .ai-glyph--sm {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  font-size: 9.5px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-glyph--sm svg { width: 12px; height: 12px; }
+
+/* ── Controls ────────────────────────────────────────────────────────────── */
+
+/* Switch: a checkbox with role="switch". */
+:is(.mikedown-root, .mikedown-portal) .ai-switch {
+  appearance: none;
+  -webkit-appearance: none;
+  position: relative;
+  width: 28px;
+  height: 16px;
+  margin: 0;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--settings-control-border);
+  cursor: pointer;
+  transition: background 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--mikedown-surface-raised, #fff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  transition: transform 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-switch:checked { background: var(--mikedown-accent, #3f51b5); }
+:is(.mikedown-root, .mikedown-portal) .ai-switch:checked::after { transform: translateX(12px); background: var(--mikedown-accent-text, #fff); }
+:is(.mikedown-root, .mikedown-portal) .ai-switch:disabled { opacity: 0.45; cursor: default; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: transparent;
+  color: var(--settings-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  font-family: inherit;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-icon-btn:hover {
+  background: var(--settings-hover-bg);
+  color: var(--settings-fg);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-default-btn.is-on svg { color: #e3a008; }
+/* The default engine's head: a label, not a button (Q3); another engine's "Use by default" moves it. */
+:is(.mikedown-root, .mikedown-portal) .ai-default-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 4px;
+  font-size: 12px;
+  color: var(--settings-fg);
+  outline: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-default-badge svg { width: 14px; height: 14px; color: #e3a008; }
+:is(.mikedown-root, .mikedown-portal) .ai-delete-btn:hover { color: var(--ai-error); }
+
+:is(.mikedown-root, .mikedown-portal) .settings-btn:has(svg) {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+:is(.mikedown-root, .mikedown-portal) .settings-btn[aria-disabled="true"],
+:is(.mikedown-root, .mikedown-portal) .settings-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-btn--danger {
+  color: var(--ai-error);
+  border-color: color-mix(in srgb, var(--ai-error) 55%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-btn--danger:hover {
+  background: color-mix(in srgb, var(--ai-error) 12%, transparent);
+}
+
+
+:is(.mikedown-root, .mikedown-portal) .ai-switch:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-icon-btn:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-chip:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-model-check:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-model-label:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+
+/* ── Engines list ────────────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-engines {
+  border: 1px solid var(--settings-divider);
+  border-radius: var(--mikedown-radius, 6px);
+  overflow: hidden;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine + .ai-engine { border-top: 1px solid var(--settings-divider); }
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 10px 10px 12px;
+  min-height: 34px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-head:hover { background: var(--ai-row-hover); }
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine-glyph { display: inline-flex; }
+:is(.mikedown-root, .mikedown-portal) .ai-engine.is-disabled .ai-engine-glyph,
+:is(.mikedown-root, .mikedown-portal) .ai-engine.is-disabled .ai-engine-main { opacity: 0.55; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3px 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-name {
+  font-weight: 600;
+  color: var(--settings-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-sub {
+  font-size: 12px;
+  color: var(--settings-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-actions .ai-switch { margin: 0 6px; }
+
+/* Status dot: hollow ring never probed, green ok, red failed, a soft pulse
+   while a probe runs. Colour changes ease so a result lands calmly. */
+:is(.mikedown-root, .mikedown-portal) .ai-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 74px;
+  justify-content: flex-end;
+  margin-right: 4px;
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 1.5px solid var(--settings-muted);
+  background: transparent;
+  transition: background-color 240ms var(--ai-ease), border-color 240ms var(--ai-ease), box-shadow 240ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-status[data-state="ok"] .ai-status-dot {
+  background: var(--ai-ok);
+  border-color: var(--ai-ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-ok) 18%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-status[data-state="error"] .ai-status-dot {
+  background: var(--ai-error);
+  border-color: var(--ai-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-error) 16%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-status[data-state="error"] { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-status[data-state="busy"] .ai-status-dot {
+  border-color: var(--ai-warn);
+  background: var(--ai-warn);
+  animation: ai-pulse 1s ease-in-out infinite;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-status-text { transition: color 240ms var(--ai-ease); }
+@keyframes ai-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+/* A request running in this editor: the toolbar AI button's sparkle and the
+   sidebar's Suggest sparkle pulse like the status dot (U5). No layout change. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.is-ai-running svg,
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn.is-running svg {
+  animation: ai-pulse 1s ease-in-out infinite;
+}
+:is(.mikedown-root, .mikedown-portal) .properties-suggest-btn.is-running {
+  opacity: 1;
+  cursor: progress;
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .mikedown-toolbar button.is-ai-running svg,
+  :is(.mikedown-root, .mikedown-portal) .properties-suggest-btn.is-running svg {
+    animation: none;
+    opacity: 0.55;
+  }
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-engine-issues {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 12px 10px 54px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 10px 10px 54px;
+  padding: 8px 10px;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: color-mix(in srgb, var(--ai-error) 8%, transparent);
+  animation: ai-arrive 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-confirm-text {
+  flex: 1;
+  min-width: 180px;
+  font-size: 12px;
+  color: var(--settings-fg);
+}
+
+/* ── Add engine: quick-start cards ───────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-heading svg { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-cards-explainer {
+  margin-bottom: 4px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 9px 11px;
+  border: 1px solid var(--settings-divider);
+  border-radius: var(--mikedown-radius, 6px);
+  background: var(--mikedown-surface-raised, transparent);
+  color: var(--settings-fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 120ms var(--ai-ease), background-color 120ms var(--ai-ease), transform 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card:hover {
+  border-color: var(--settings-control-border);
+  background: var(--ai-row-hover);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card:active { transform: translateY(1px); }
+:is(.mikedown-root, .mikedown-portal) .ai-card:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card-caption {
+  font-size: 11.5px;
+  line-height: 1.35;
+  color: var(--settings-muted);
+}
+
+/* Local detection: Running leads, Not running steps back, Added is done. */
+:is(.mikedown-root, .mikedown-portal) .ai-card-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 3px;
+  font-size: 11px;
+  color: var(--settings-muted);
+  font-variant-numeric: tabular-nums;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--ai-ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-ok) 18%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="running"] {
+  border-color: color-mix(in srgb, var(--ai-ok) 55%, var(--settings-divider));
+  background: color-mix(in srgb, var(--ai-ok) 6%, var(--mikedown-surface-raised, transparent));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="running"]:hover {
+  border-color: var(--ai-ok);
+  background: color-mix(in srgb, var(--ai-ok) 10%, var(--mikedown-surface-raised, transparent));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="running"] .ai-card-state { color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="stopped"] { background: transparent; }
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="stopped"] .ai-card-name { font-weight: 500; }
+:is(.mikedown-root, .mikedown-portal) .ai-card[data-state="added"] {
+  background: transparent;
+  border-style: dashed;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-detect {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-height: 18px;
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cards-detect-text:empty { display: none; }
+
+/* Empty state on the summary tab: an invitation, not an error. */
+:is(.mikedown-root, .mikedown-portal) .ai-summary-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 14px 16px;
+  border: 1px dashed var(--settings-control-border);
+  border-radius: var(--mikedown-radius, 6px);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-empty-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-empty-text {
+  max-width: 460px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--settings-muted);
+}
+
+/* Cloud consents list on the AI tab: one line per stored answer. */
+:is(.mikedown-root, .mikedown-portal) .ai-consents-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-consent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-consent-text { min-width: 0; overflow-wrap: anywhere; }
+:is(.mikedown-root, .mikedown-portal) .ai-consents-empty {
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+
+/* ── Express engine form (ai-engine-form.ts) ─────────────────────────────── */
+
+/* One calm column like a macOS "Add Account" sheet: labels on the left,
+   controls on the right, a short caption under a control when it helps. */
+:is(.mikedown-root, .mikedown-portal) .ai-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  animation: ai-arrive 180ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px 18px;
+  border: 1px solid var(--settings-divider);
+  border-radius: 8px;
+  background: var(--mikedown-surface-raised, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-sheet--advanced { background: transparent; }
+:is(.mikedown-root, .mikedown-portal) .ai-sheet-row {
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  align-items: start;
+  column-gap: 14px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-sheet-row--block { display: block; }
+:is(.mikedown-root, .mikedown-portal) .ai-sheet-label {
+  padding-top: 6px;
+  text-align: right;
+  font-size: 12.5px;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-sheet-body {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-sheet-input { width: 100%; }
+:is(.mikedown-root, .mikedown-portal) .ai-caption {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-url { display: flex; flex-direction: column; gap: 4px; }
+:is(.mikedown-root, .mikedown-portal) .ai-locality { display: flex; flex-direction: column; gap: 6px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-key {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-key .settings-input--medium { flex: 0 1 130px; width: 130px; min-width: 90px; }
+:is(.mikedown-root, .mikedown-portal) .ai-key-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ai-ok);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-enabled-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 28px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-default {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 14px;
+}
+:is(.mikedown-root, .mikedown-portal) select.ai-default-select { min-width: 0; max-width: 100%; flex: 1 1 200px; }
+:is(.mikedown-root, .mikedown-portal) .ai-thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-thinking select { max-width: 150px; }
+
+/* Text buttons: Fetch models, Retry, Type a model id. */
+:is(.mikedown-root, .mikedown-portal) .ai-link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 4px;
+  margin: -2px -4px;
+  border: none;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: none;
+  color: var(--mikedown-link, var(--mikedown-accent, #3f51b5));
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-link-btn:hover:not(:disabled) { text-decoration: underline; }
+:is(.mikedown-root, .mikedown-portal) .ai-link-btn:disabled,
+:is(.mikedown-root, .mikedown-portal) .ai-link-btn[aria-disabled="true"] { color: var(--settings-muted); cursor: default; text-decoration: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-link-btn:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-type-btn,
+:is(.mikedown-root, .mikedown-portal) .ai-show-all { align-self: flex-start; margin-top: 2px; }
+
+/* Models picker: a head line, the combobox field, then the inline listbox. */
+:is(.mikedown-root, .mikedown-portal) .ai-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-picker-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-picker-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-picker-head .ai-models-count { flex: 1; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-spinner {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, var(--settings-muted) 35%, transparent);
+  border-top-color: var(--mikedown-accent, #3f51b5);
+  animation: ai-spin 700ms linear infinite;
+}
+@keyframes ai-spin { to { transform: rotate(360deg); } }
+
+:is(.mikedown-root, .mikedown-portal) .ai-combo { position: relative; }
+:is(.mikedown-root, .mikedown-portal) .ai-combo-icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  color: var(--settings-muted);
+  pointer-events: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-combo-input { padding-left: 28px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-listbox,
+:is(.mikedown-root, .mikedown-portal) .ai-listbox-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-listbox {
+  max-height: 248px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid var(--settings-divider);
+  border-radius: 6px;
+  outline: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-listbox:focus-visible { border-color: var(--settings-focus); }
+:is(.mikedown-root, .mikedown-portal) .ai-listbox-group + .ai-listbox-group { margin-top: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-listbox-heading {
+  padding: 4px 8px 3px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-listbox-empty {
+  padding: 10px 8px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 28px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option:hover { background: var(--ai-row-hover); }
+:is(.mikedown-root, .mikedown-portal) .ai-option.is-active {
+  background: var(--settings-hover-bg);
+  box-shadow: inset 0 0 0 1px var(--settings-focus);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option.is-missing { opacity: 0.5; }
+:is(.mikedown-root, .mikedown-portal) .ai-option.is-unusable { opacity: 0.5; cursor: default; }
+:is(.mikedown-root, .mikedown-portal) .ai-option.is-unusable:hover { background: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  box-sizing: border-box;
+  border: 1px solid var(--settings-control-border);
+  border-radius: 4px;
+  color: transparent;
+  transition: background-color 120ms var(--ai-ease), border-color 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option-check svg { width: 11px; height: 11px; }
+:is(.mikedown-root, .mikedown-portal) .ai-option.is-on .ai-option-check {
+  border-color: var(--mikedown-accent, #3f51b5);
+  background: var(--mikedown-accent, #3f51b5);
+  color: var(--mikedown-accent-text, #fff);
+}
+/* Single choice (the setup form): a radio dot instead of a check. */
+:is(.mikedown-root, .mikedown-portal) .ai-listbox--single .ai-option-check { border-radius: 50%; }
+:is(.mikedown-root, .mikedown-portal) .ai-listbox--single .ai-option-check svg { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-listbox--single .ai-option.is-on .ai-option-check {
+  background: var(--mikedown-accent-text, #fff);
+  border-width: 4.5px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option-names {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option-name {
+  font-size: 12.5px;
+  color: var(--settings-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option-id {
+  font-family: var(--mikedown-font-mono, monospace);
+  font-size: 10.5px;
+  color: var(--settings-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-option-tags { display: flex; gap: 4px; flex-shrink: 0; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-fetch-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  animation: ai-arrive 220ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-fetch-note .ai-note { flex: 1; }
+:is(.mikedown-root, .mikedown-portal) .ai-fetch-note .ai-link-btn { margin-top: -1px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-form-actions .ai-result { flex-basis: 100%; }
+
+/* Advanced: a quiet disclosure, not a second form. */
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  margin-left: -6px;
+  border: none;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: none;
+  color: var(--settings-muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure:hover { color: var(--settings-fg); background: var(--ai-row-hover); }
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure svg { transition: transform 160ms var(--ai-ease); }
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure[aria-expanded="true"] { color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-disclosure[aria-expanded="true"] svg { transform: rotate(90deg); }
+:is(.mikedown-root, .mikedown-portal) .ai-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: -6px;
+  animation: ai-arrive 180ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-advanced[hidden] { display: none; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-thinking-select.settings-input--small { width: auto; }
+
+/* ── Models ──────────────────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-models {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-models-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-models-count {
+  font-size: 11.5px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-models-empty {
+  font-size: 12px;
+  color: var(--settings-muted);
+  padding: 10px 12px;
+  border: 1px dashed var(--settings-control-border);
+  border-radius: var(--mikedown-radius-sm, 4px);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-model-list {
+  border: 1px solid var(--settings-divider);
+  border-radius: var(--mikedown-radius-sm, 4px);
+  max-height: 360px;
+  overflow-y: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  transition: opacity 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model + .ai-model { border-top: 1px solid var(--settings-divider); }
+:is(.mikedown-root, .mikedown-portal) .ai-model.is-missing { opacity: 0.55; }
+:is(.mikedown-root, .mikedown-portal) .ai-model.is-off .ai-chips { opacity: 0.6; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-model-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-check {
+  margin: 0;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  accent-color: var(--mikedown-accent, #3f51b5);
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-names {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+/* Label field reads as text until hovered or focused. */
+:is(.mikedown-root, .mikedown-portal) .ai-model-label {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 2px 5px;
+  margin-left: -5px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--settings-fg);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-label::placeholder {
+  color: var(--settings-fg);
+  opacity: 0.9;
+  font-family: var(--mikedown-font-mono, monospace);
+  font-size: 12px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-label:hover { border-color: var(--settings-control-border); }
+:is(.mikedown-root, .mikedown-portal) .ai-model-label:focus {
+  border-color: var(--settings-focus);
+  background: var(--mikedown-input-bg, transparent);
+  outline: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-id {
+  font-family: var(--mikedown-font-mono, monospace);
+  font-size: 11px;
+  color: var(--settings-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-tags {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-model-context {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-context-input {
+  width: 72px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-context-unit {
+  font-size: 10.5px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-overrides-btn {
+  font-family: var(--mikedown-font-mono, monospace);
+  font-size: 11px;
+  width: auto;
+  padding: 0 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-overrides-btn.has-value { color: var(--mikedown-accent, #3f51b5); }
+:is(.mikedown-root, .mikedown-portal) .ai-overrides-btn[aria-expanded="true"] { background: var(--settings-hover-bg); color: var(--settings-fg); }
+
+/* Capability chips: pressed chips are filled; the source tag sits at the end. */
+:is(.mikedown-root, .mikedown-portal) .ai-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding-left: 22px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chip {
+  padding: 0 7px;
+  height: 19px;
+  border-radius: 10px;
+  border: 1px solid var(--settings-control-border);
+  background: transparent;
+  color: var(--settings-muted);
+  font: inherit;
+  font-size: 11px;
+  line-height: 17px;
+  cursor: pointer;
+  transition: background-color 120ms var(--ai-ease), color 120ms var(--ai-ease), border-color 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chip:hover { border-color: var(--settings-fg); color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-chip.is-on {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 18%, transparent);
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-source {
+  margin-left: 4px;
+  font-size: 10.5px;
+  color: var(--settings-muted);
+  font-style: italic;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-source--user { color: var(--mikedown-accent, #3f51b5); font-style: normal; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-overrides {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 22px;
+  animation: ai-arrive 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-overrides-text {
+  resize: vertical;
+  min-height: 54px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-model-add {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+/* ── Routing and features ────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .settings-row.ai-section[hidden] { display: none; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-routing {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-subhead {
+  margin-top: 4px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) select.ai-route-select { max-width: 260px; }
+:is(.mikedown-root, .mikedown-portal) .ai-task-row .settings-desc { font-size: 11.5px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-feature-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-feature.is-planned .settings-row-text { opacity: 0.55; }
+
+/* "Advanced: task per feature" under the switches (U8): folded, quiet. */
+:is(.mikedown-root, .mikedown-portal) .ai-feature-tasks-toggle { margin-top: 8px; }
+:is(.mikedown-root, .mikedown-portal) .ai-feature-tasks { margin-top: 2px; gap: 8px; }
+:is(.mikedown-root, .mikedown-portal) .ai-feature-tasks > .settings-desc { font-size: 11.5px; }
+:is(.mikedown-root, .mikedown-portal) .ai-feature-task { justify-content: space-between; gap: 10px; }
+
+/* The master switch carries the tab: a touch more presence. */
+:is(.mikedown-root, .mikedown-portal) .ai-master .settings-label { font-size: 13.5px; }
+
+:is(.mikedown-root, .mikedown-portal) .settings-row--check .ai-row-note { margin-top: -2px; }
+
+/* ── Narrow content pane ─────────────────────────────────────────────────── */
+
+@container settings-content (max-width: 520px) {
+  :is(.mikedown-root, .mikedown-portal) .ai-detail-top { flex-wrap: wrap; }
+  :is(.mikedown-root, .mikedown-portal) .ai-detail-actions { width: 100%; padding-left: 58px; }
+  :is(.mikedown-root, .mikedown-portal) .ai-detail-actions .ai-status { margin-right: auto; justify-content: flex-start; min-width: 0; }
+  :is(.mikedown-root, .mikedown-portal) .ai-sheet { padding: 12px; }
+  :is(.mikedown-root, .mikedown-portal) .ai-sheet-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
+  :is(.mikedown-root, .mikedown-portal) .ai-sheet-label { padding-top: 0; text-align: left; font-weight: 500; }
+  :is(.mikedown-root, .mikedown-portal) .ai-model-top { flex-wrap: wrap; }
+  :is(.mikedown-root, .mikedown-portal) .ai-chips { padding-left: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .ai-result,
+  :is(.mikedown-root, .mikedown-portal) .ai-confirm,
+  :is(.mikedown-root, .mikedown-portal) .ai-form,
+  :is(.mikedown-root, .mikedown-portal) .ai-advanced,
+  :is(.mikedown-root, .mikedown-portal) .ai-page-frame,
+  :is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow[data-view="detail"] .ai-page-detail,
+  :is(.mikedown-root, .mikedown-portal) .ai-page-confirm-scrim,
+  :is(.mikedown-root, .mikedown-portal) .ai-fetch-note,
+  :is(.mikedown-root, .mikedown-portal) .ai-overrides,
+  :is(.mikedown-root, .mikedown-portal) .ai-status[data-state="busy"] .ai-status-dot { animation: none; }
+  :is(.mikedown-root, .mikedown-portal) .ai-switch,
+  :is(.mikedown-root, .mikedown-portal) .ai-switch::after,
+  :is(.mikedown-root, .mikedown-portal) .ai-status-dot,
+  :is(.mikedown-root, .mikedown-portal) .ai-card,
+  :is(.mikedown-root, .mikedown-portal) .ai-wizard-option,
+  :is(.mikedown-root, .mikedown-portal) .ai-option-check,
+  :is(.mikedown-root, .mikedown-portal) .ai-disclosure svg { transition: none; }
+  :is(.mikedown-root, .mikedown-portal) .ai-spinner { animation-duration: 2s; }
+}
+
+/* ── AI tab: the summary ─────────────────────────────────────────────────── */
+
+/* Compact rows: name, pill, dot and switch on one quiet line. */
+:is(.mikedown-root, .mikedown-portal) .ai-engines--compact .ai-engine-head {
+  gap: 10px;
+  padding: 7px 10px 7px 12px;
+  min-height: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engines--compact .ai-status { min-width: 0; margin-right: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-engine-open {
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-engine-open:hover .ai-engine-name { text-decoration: underline; text-underline-offset: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-engine-open:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Compact status: the dot alone; the label stays for screen readers. */
+:is(.mikedown-root, .mikedown-portal) .ai-status--compact { min-width: 0; margin-right: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-status--compact .ai-status-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* "Default model  oMLX · Qwen 3.8 Flash Next  Change…" */
+:is(.mikedown-root, .mikedown-portal) .ai-route-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  margin-top: 10px;
+  padding: 0 2px;
+  font-size: 12.5px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-route-line-label { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-route-line-value {
+  min-width: 0;
+  font-weight: 600;
+  color: var(--settings-fg);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-route-line-value.is-none { font-weight: 500; color: var(--ai-warn); }
+:is(.mikedown-root, .mikedown-portal) .ai-route-line .ai-row-note { flex-basis: 100%; }
+:is(.mikedown-root, .mikedown-portal) .ai-summary-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+/* ── AI Engines page (ai-engines-page.ts) ────────────────────────────────── */
+
+/* Full window, above the Settings modal (1050) when opened from it. */
+:is(.mikedown-root, .mikedown-portal) #mikedown-ai-page-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1060;
+  display: flex;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-frame {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  background: var(--mikedown-surface, #1e1e1e);
+  color: var(--settings-fg);
+  font-family: var(--mikedown-font-ui, system-ui, -apple-system, sans-serif);
+  font-size: 13px;
+  line-height: 1.4;
+  animation: ai-page-in 180ms var(--ai-ease);
+}
+@keyframes ai-page-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Header: Back on the left, the title centred, Done on the right. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 9px 16px;
+  border-bottom: 1px solid var(--mikedown-divider, var(--settings-divider));
+  background: var(--mikedown-surface-toolbar, var(--mikedown-surface, transparent));
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-back {
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 4px 8px 4px 4px;
+  border: none;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: none;
+  color: var(--mikedown-link, var(--settings-fg));
+  font: inherit;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-back:hover { background: var(--settings-hover-bg); }
+:is(.mikedown-root, .mikedown-portal) .ai-page-back:focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: -1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--settings-fg);
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-done { justify-self: end; min-width: 72px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-page-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+/* The page toggles its parts with `hidden` (the list and detail while the
+   wizard shows); the display rules above would otherwise beat it, and the
+   hidden body would split the height with the wizard. */
+:is(.mikedown-root, .mikedown-portal) .ai-page > [hidden] { display: none; }
+
+/* Left pane: a quiet source list. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-nav {
+  width: 284px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 10px;
+  overflow-y: auto;
+  border-right: 1px solid var(--mikedown-divider, var(--settings-divider));
+  background: var(--mikedown-surface-toolbar, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-group { display: flex; flex-direction: column; gap: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-group--tools {
+  padding-top: 12px;
+  border-top: 1px solid var(--mikedown-divider, var(--settings-divider));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-heading {
+  padding: 0 8px 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-empty {
+  padding: 4px 8px 2px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-list { display: flex; flex-direction: column; gap: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-item { position: relative; display: flex; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--mikedown-radius, 6px);
+  background: none;
+  color: var(--settings-fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn:hover { background: var(--ai-row-hover); }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn[aria-current="true"] {
+  background: var(--settings-active-bg);
+  color: var(--settings-active-fg);
+  outline: 1px solid var(--mikedown-contrast-border, transparent);
+  outline-offset: -1px;
+}
+/* Room for the switch, which sits over the row's right end. */
+:is(.mikedown-root, .mikedown-portal) .ai-nav-item .ai-nav-btn { padding-right: 48px; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-item > .ai-switch {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-item.is-disabled .ai-glyph,
+:is(.mikedown-root, .mikedown-portal) .ai-nav-item.is-disabled .ai-nav-text { opacity: 0.55; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-name-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-name {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-sub {
+  overflow: hidden;
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-sub-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn[aria-current="true"] .ai-nav-sub { color: inherit; opacity: 0.72; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn .ai-pill { flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-star { display: inline-flex; flex-shrink: 0; color: #e3a008; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-star svg { width: 11px; height: 11px; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 7px;
+  background: var(--ai-tile-bg);
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn[aria-current="true"] .ai-nav-icon { color: inherit; }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn--add .ai-nav-icon { background: transparent; border: 1px dashed var(--settings-control-border); }
+:is(.mikedown-root, .mikedown-portal) .ai-nav-btn--add .ai-nav-name { font-weight: 500; }
+
+/* Right pane: one thing at a time, in a readable column. Named like the
+   modal's content pane so the same narrow-width rules apply. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  container: settings-content / inline-size;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-head,
+:is(.mikedown-root, .mikedown-portal) .ai-detail-body {
+  box-sizing: border-box;
+  max-width: 780px;
+  margin: 0 auto;
+  padding: 0 32px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 26px;
+  padding-bottom: 18px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-body { padding-bottom: 48px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail[data-kind="routing"] .ai-detail-head,
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail[data-kind="add"] .ai-detail-head { flex-direction: row; align-items: center; gap: 14px; }
+:is(.mikedown-root, .mikedown-portal) .ai-detail-top {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-glyph .ai-glyph {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  font-size: 15px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-glyph .ai-glyph svg { width: 20px; height: 20px; }
+:is(.mikedown-root, .mikedown-portal) .ai-detail-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  border-radius: 10px;
+  background: var(--ai-tile-bg);
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-icon svg { width: 20px; height: 20px; }
+:is(.mikedown-root, .mikedown-portal) .ai-detail-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-title-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-title {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--settings-fg);
+}
+/* Only ever focused by the page (a new local server, the narrow layout's push), as the wizard's title. */
+:is(.mikedown-root, .mikedown-portal) .ai-detail-title:is(:focus, :focus-visible) { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-detail-sub {
+  max-width: 560px;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-detail-actions .ai-status { min-width: 0; margin-right: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail .ai-engine-issues { padding: 0 0 0 58px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail .ai-confirm { margin: 0 0 0 58px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail select.ai-route-select { max-width: 340px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail .ai-cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+
+/* One column under 720 px: the list, or the pushed detail. */
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-page-nav {
+  flex: 1;
+  width: auto;
+  border-right: none;
+  padding: 12px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow[data-view="list"] .ai-page-detail,
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow[data-view="detail"] .ai-page-nav { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow[data-view="detail"] .ai-page-detail { animation: ai-push 200ms var(--ai-ease); }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-page-header { padding: 8px 10px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-detail-head,
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-detail-body { padding-left: 16px; padding-right: 16px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-detail-head { padding-top: 18px; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-nav-btn { padding-top: 9px; padding-bottom: 9px; }
+@keyframes ai-push {
+  from { opacity: 0; transform: translateX(14px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* "Discard changes?": a small sheet over a dimmed page. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-confirm-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 72px;
+  background: color-mix(in srgb, var(--mikedown-surface, #000) 55%, transparent);
+  animation: ai-arrive 160ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  width: min(380px, calc(100% - 32px));
+  padding: 18px 20px 16px;
+  border: 1px solid var(--settings-border);
+  border-radius: var(--mikedown-radius-lg, 10px);
+  background: var(--mikedown-surface-raised, #252526);
+  box-shadow: 0 12px 40px var(--mikedown-shadow, rgba(0, 0, 0, 0.4));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-confirm-title { font-size: 14px; font-weight: 600; color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-page-confirm-text { font-size: 12.5px; line-height: 1.5; color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-page-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* ── Sidebar footer chip ─────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  max-width: 100%;
+  margin: 0 0 1px -5px;
+  padding: 1px 6px 1px 5px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: 1.5;
+  cursor: pointer;
+  text-align: left;
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip:hover {
+  background: var(--mikedown-hover, rgba(128, 128, 128, 0.12));
+  color: var(--mikedown-text-ui, inherit);
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip:focus-visible {
+  outline: 1px solid var(--mikedown-focus-ring, #007fd4);
+  outline-offset: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-glyph { display: inline-flex; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip[data-tone="local"] .sidebar-ai-glyph { color: var(--mikedown-success, #2e7d32); }
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip[data-tone="cloud"] .sidebar-ai-glyph { color: var(--mikedown-info, #1e70d6); }
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip[data-tone="none"] .sidebar-ai-glyph { color: var(--mikedown-warning, #b26a00); }
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip[data-tone="cloud"] {
+  border-color: color-mix(in srgb, var(--mikedown-info, #1e70d6) 35%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .sidebar-ai-chip.is-warn .sidebar-ai-glyph { color: var(--mikedown-warning, #b26a00); }
+
+/* ── Experimental marking (ai-settings-dom.ts) ───────────────────────────── */
+
+/* The pill beside an AI title: the Settings nav item, the AI tab, the page, the first-run panel. */
+:is(.mikedown-root, .mikedown-portal) .ai-experimental-badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 16px;
+  padding: 0 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  white-space: nowrap;
+  /* Body text on an amber tint: amber text this small fails contrast. */
+  color: var(--settings-fg, var(--mikedown-text-ui, var(--mikedown-text)));
+  background: color-mix(in srgb, var(--mikedown-warning, #b26a00) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--mikedown-warning, #b26a00) 55%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .settings-tab .ai-experimental-badge { margin-left: 2px; }
+:is(.mikedown-root, .mikedown-portal) .settings-tab[aria-selected="true"] .ai-experimental-badge {
+  color: inherit;
+  background: color-mix(in srgb, currentColor 18%, transparent);
+  border-color: color-mix(in srgb, currentColor 45%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-experimental-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-experimental-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-disclaimer {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--settings-muted, var(--mikedown-text-muted));
+}
+
+/* Top of the AI tab. */
+:is(.mikedown-root, .mikedown-portal) .ai-experimental-intro {
+  padding: 2px 2px 12px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--settings-divider, var(--mikedown-border));
+}
+
+/* AI Engines page: the badge beside the title, the disclaimer under the header. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-title-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-title-note {
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--settings-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-disclaimer {
+  margin: 0;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--mikedown-divider, var(--settings-divider));
+  flex-shrink: 0;
+}
+
+/* ── Privacy card (ai-settings-dom.ts#privacyCard) ────────────────────────
+   A quiet note like the disclaimer: muted text, a cloud glyph, no warning. */
+
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-card {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted, var(--mikedown-text-muted));
+  padding: 8px 10px;
+  border: 1px solid var(--settings-divider, var(--mikedown-border));
+  border-radius: var(--mikedown-radius-sm, 4px);
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-head,
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--settings-fg, inherit);
+  font-weight: 600;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-summary {
+  cursor: pointer;
+  list-style: none;
+  font-weight: 500;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-summary::-webkit-details-marker { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-summary::after {
+  content: '';
+  width: 5px;
+  height: 5px;
+  margin-left: 2px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg);
+  opacity: 0.7;
+}
+:is(.mikedown-root, .mikedown-portal) details[open] > .ai-privacy-summary::after { transform: rotate(45deg); }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-summary:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-glyph {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--ai-info, currentColor);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-body { margin-top: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-lines {
+  margin: 0;
+  padding-left: 18px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-lines li + li { margin-top: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-policy,
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-extra { margin: 6px 0 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-link { margin: 0; padding: 0; text-decoration: underline; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-link:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-form-privacy { margin-bottom: 10px; }
+:is(.mikedown-root, .mikedown-portal) .settings-row--check .ai-privacy-card.ai-row-note { margin-top: 6px; }
+
+/* The one-line version (first-run panel). */
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 8px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted, var(--mikedown-text-muted));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-line .ai-privacy-glyph { margin-top: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-line .ai-link-btn { margin: 0; padding: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-privacy-line[hidden] { display: none; }
+
+/* ── Allow cloud engines over the cloud cards (ai-engines-page.ts) ───────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access-row .ai-switch { margin-top: 1px; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.45;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access-label {
+  font-weight: 500;
+  color: var(--settings-fg);
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-access-line { color: var(--settings-muted); }
+
+/* A cloud engine's head while Allow cloud is off: the note and its button. */
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-off {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 0 12px 10px 54px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail .ai-cloud-off { padding: 0 0 10px 58px; }
+:is(.mikedown-root, .mikedown-portal) .ai-cloud-off .ai-note { flex: 1; min-width: 180px; }
+
+/* The key hint as a link under the key field, and a variable's name. */
+:is(.mikedown-root, .mikedown-portal) .ai-key-link { margin: 0; padding: 0; text-decoration: underline; }
+:is(.mikedown-root, .mikedown-portal) .ai-key-env { font-family: var(--mikedown-font-mono, monospace); font-size: 11px; }
+
+/* ── Toolbar first-run panel (ai-toolbar.ts) ─────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-first-run {
+  --settings-fg: var(--mikedown-text-ui, var(--mikedown-text, #d4d4d4));
+  --settings-muted: var(--mikedown-text-muted, rgba(128, 128, 128, 0.9));
+  --settings-hover-bg: var(--mikedown-hover, rgba(128, 128, 128, 0.15));
+  --settings-control-border: var(--mikedown-input-border, rgba(128, 128, 128, 0.35));
+  --settings-focus: var(--mikedown-focus-ring, #007fd4);
+  position: fixed;
+  z-index: 1001;
+  width: 340px;
+  max-width: calc(100vw - 16px);
+  box-sizing: border-box;
+  padding: 14px 16px;
+  background: var(--mikedown-surface-raised);
+  color: var(--settings-fg);
+  border: 1px solid var(--mikedown-border);
+  border-radius: var(--mikedown-radius, 6px);
+  box-shadow: 0 6px 20px var(--mikedown-shadow, rgba(0, 0, 0, 0.25));
+  font-size: 13px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-first-run .ai-disclaimer { margin-top: 8px; }
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-verbs {
+  margin: 6px 0 0;
+  font-size: 12.5px;
+  line-height: 1.45;
+}
+/* The disclaimer: one sentence, the full notice behind a link. */
+:is(.mikedown-root, .mikedown-portal) .ai-first-run .ai-first-run-notice-toggle { margin-left: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-first-run .ai-first-run-notice-full[hidden] { display: none; }
+/* Detection and setup progress: text-sized, never louder than the copy. */
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-status {
+  --ai-ok: var(--mikedown-success, #2e7d32);
+  --ai-error: var(--mikedown-danger, #c62828);
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+  margin-top: 10px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-status[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-status[data-state="found"] { color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-status[data-state="error"] { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-dot {
+  position: relative;
+  top: -1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--ai-ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-ok) 18%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-other {
+  margin: 0 auto 0 -4px;
+  padding: 2px 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-first-run-other[hidden] { display: none; }
+
+/* ── Size tags in the models picker (local models, by this machine) ─────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-tag--fits {
+  color: var(--ai-ok);
+  background: color-mix(in srgb, var(--ai-ok) 12%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-tag--tight {
+  color: var(--ai-warn);
+  background: color-mix(in srgb, var(--ai-warn) 12%, transparent);
+}
+
+/* ── Setup wizard (ai-setup-wizard.ts), the page's 'wizard' section ─────── */
+
+/* The header line: Skip in Done's place, and the step dots beside the title. */
+:is(.mikedown-root, .mikedown-portal) .ai-page-header > [hidden],
+:is(.mikedown-root, .mikedown-portal) .ai-page-title-line > [hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-steps {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--settings-control-border);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-dot.is-done { background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 45%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-dot.is-current { background: var(--mikedown-accent, #3f51b5); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-steps-text {
+  margin-left: 3px;
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* One readable column, centred, like a sheet. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  container: settings-content / inline-size;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-column {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 32px 32px 48px;
+  animation: ai-arrive 180ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-wizard-column { padding: 20px 16px 40px; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--settings-fg);
+  overflow-wrap: anywhere;
+}
+/* tabindex -1: only code moves focus here (for screen readers), so no ring, even where :focus-visible would match. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-title:is(:focus, :focus-visible) { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-lede {
+  margin: 0;
+  max-width: 540px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-quiet {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-quiet .ai-link-btn { margin: 0; padding: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-scanning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 0;
+  font-size: 12.5px;
+  color: var(--settings-muted);
+}
+
+/* Step 1: the choices, as large rows. The lead one carries the accent (or
+   the running green, like a running server's card). */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--settings-divider);
+  border-radius: var(--mikedown-radius, 6px);
+  background: var(--mikedown-surface-raised, transparent);
+  color: var(--settings-fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 120ms var(--ai-ease), background-color 120ms var(--ai-ease), transform 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option:hover {
+  border-color: var(--settings-control-border);
+  background: var(--ai-row-hover);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option:active { transform: translateY(1px); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option.is-lead {
+  border-color: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 55%, var(--settings-divider));
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 6%, var(--mikedown-surface-raised, transparent));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option.is-lead:hover { border-color: var(--mikedown-accent, #3f51b5); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option.is-lead[data-state="running"] {
+  border-color: color-mix(in srgb, var(--ai-ok) 55%, var(--settings-divider));
+  background: color-mix(in srgb, var(--ai-ok) 6%, var(--mikedown-surface-raised, transparent));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option.is-lead[data-state="running"]:hover { border-color: var(--ai-ok); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option[aria-busy="true"] { cursor: progress; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option-glyph .ai-glyph {
+  width: 36px;
+  height: 36px;
+  border-radius: 9px;
+  font-size: 13px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-glyph-cloud { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-glyph-cloud svg { width: 16px; height: 16px; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option-name {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option-caption {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-option-chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--settings-muted);
+}
+
+/* Cards and servers (steps 1 and 2). */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard .ai-cards-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard .ai-card.is-selected {
+  border-color: var(--mikedown-accent, #3f51b5);
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 7%, var(--mikedown-surface-raised, transparent));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-servers {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-server {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-install {
+  padding: 0 4px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-link { margin: 0; padding: 0; text-decoration: underline; }
+
+/* Advanced: local, folded. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 14px;
+  border-top: 1px solid var(--settings-divider);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-advanced-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding-left: 20px;
+  animation: ai-arrive 180ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-advanced-panel[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-hardware {
+  margin: 0;
+  max-width: 540px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--settings-fg);
+}
+
+/* Step 2: the form under the cards, and the note over a cloud key field. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+/* Normal text on a faint accent tint, so it reads in light and dark themes alike. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-subscription {
+  margin-left: 126px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--mikedown-accent, #3f51b5) 30%, transparent);
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 7%, transparent);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-subscription-text { margin: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-subscription-links { margin: 4px 0 0; }
+@container settings-content (max-width: 520px) {
+  :is(.mikedown-root, .mikedown-portal) .ai-wizard-subscription { margin-left: 0; }
+}
+
+/* The step's one primary action, bottom right like a sheet. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 4px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-hint {
+  flex: 1;
+  text-align: right;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-next { min-width: 88px; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-next[aria-disabled="true"] { opacity: 0.5; cursor: default; }
+
+/* Step 3: done. */
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-done-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 6px;
+  border-radius: 50%;
+  color: var(--ai-ok);
+  background: color-mix(in srgb, var(--ai-ok) 14%, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-done-icon svg { width: 18px; height: 18px; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-model {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-model-label { font-size: 12.5px; color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-model-select { max-width: 340px; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-privacy {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  margin: 0;
+  max-width: 560px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-privacy .ai-privacy-glyph { margin-top: 3px; }
+
+/* ── Setup wizard: cloud statement and hidden disclaimer (ai-setup-wizard.ts) ── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-page-disclaimer[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-wizard-cloud-line {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted, var(--mikedown-text-muted));
+}
+
+/* ═══ ai-rewrite.css ═══ */
+/* MikeDown — selection rewrite (ai-rewrite.ts): the target highlight and
+ * the preview popover. Overlays live in the portal and
+ * read only --mikedown-* tokens.
+ */
+
+/* ── Target highlight (PM inline decoration, CM mark) ───────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite-target {
+  background: color-mix(in srgb, var(--mikedown-accent, #3f51b5) 16%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--mikedown-accent, #3f51b5) 55%, transparent);
+  border-radius: 2px;
+}
+
+/* ── Popover ────────────────────────────────────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite {
+  position: fixed;
+  z-index: 995;
+  display: flex;
+  flex-direction: column;
+  width: 440px;
+  max-width: calc(100vw - 16px);
+  max-height: min(70vh, 520px);
+  border: 1px solid var(--mikedown-border, rgba(15, 15, 20, 0.1));
+  border-radius: var(--mikedown-radius-lg, 12px);
+  background: var(--mikedown-surface-raised, #fff);
+  color: var(--mikedown-text-ui, #3a3a3d);
+  box-shadow: 0 12px 36px var(--mikedown-shadow, rgba(15, 15, 20, 0.12)), 0 0 1px var(--mikedown-shadow, rgba(15, 15, 20, 0.12));
+  font-family: var(--mikedown-font-ui, system-ui, sans-serif);
+  font-size: 13px;
+  line-height: 1.45;
+  overflow: hidden;
+  animation: mikedown-ai-fade 0.14s ease-out;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite:focus { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-layout="split"]:is([data-phase="running"], [data-phase="done"]) { width: 680px; }
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite [hidden] { display: none !important; }
+
+@keyframes mikedown-ai-fade {
+  from { opacity: 0; transform: translateY(2px); }
+  to { opacity: 1; transform: none; }
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-rw-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 6px 6px 6px 12px;
+  border-bottom: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-spark { display: inline-flex; flex-shrink: 0; color: var(--mikedown-accent, #3f51b5); }
+/* A long title ("Translate · Spanish · Whole document") gives way: it
+   ellipsizes, and the thinking dial and Close never shrink, so nothing is
+   pushed past the edge. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-title {
+  flex: 0 1000 auto;
+  min-width: 6em;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 1 auto;
+  /* Never narrower than the glyph, locality and engine; only the model name
+     gives way, and only when the badge alone is wider than the footer. */
+  min-width: min-content;
+  max-width: 100%;
+  margin-left: auto;
+  padding: 1px 8px 1px 6px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--mikedown-hover, rgba(55, 53, 47, 0.06));
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11.5px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge-glyph { display: inline-flex; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge-text {
+  display: grid;
+  grid-template-columns: auto minmax(3ch, auto);
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge[data-where="local"] .ai-rw-badge-glyph { color: var(--mikedown-success, #2e7d32); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge[data-where="cloud"] { border-color: color-mix(in srgb, var(--mikedown-info, #1e70d6) 35%, transparent); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge[data-where="cloud"] .ai-rw-badge-glyph { color: var(--mikedown-info, #1e70d6); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge.is-pending { opacity: 0.75; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge-fallback { color: var(--mikedown-warning, #b26a00); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-head .ai-rw-think[hidden] + .ai-rw-icon-btn { margin-left: auto; }
+
+/* Thinking dial: a segmented pill, right of the title (also the AI menu's Thinking row). */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 1px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--mikedown-hover, rgba(55, 53, 47, 0.06));
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11.5px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think-label { padding: 0 4px 0 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think-seg {
+  padding: 0 6px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think-seg:hover { color: var(--mikedown-text-ui, #3a3a3d); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-think-seg:is([aria-pressed="true"], [aria-checked="true"]) {
+  background: var(--mikedown-surface-raised, #fff);
+  color: var(--mikedown-text-ui, #3a3a3d);
+  box-shadow: 0 0 0 1px var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+
+/* Summary kind: TL;DR ⇄ Outline, the dial's pill beside the title. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-kind {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 1px;
+  border-radius: 10px;
+  background: var(--mikedown-hover, rgba(55, 53, 47, 0.06));
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11.5px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-kind[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-kind-seg {
+  padding: 0 7px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-kind-seg:hover { color: var(--mikedown-text-ui, #3a3a3d); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-kind-seg[aria-pressed="true"] {
+  background: var(--mikedown-surface-raised, #fff);
+  color: var(--mikedown-text-ui, #3a3a3d);
+  box-shadow: 0 0 0 1px var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-rw-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: var(--mikedown-radius-sm, 6px);
+  background: none;
+  color: var(--mikedown-text-muted, #6f6f74);
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-icon-btn:hover { background: var(--mikedown-hover, rgba(55, 53, 47, 0.06)); color: var(--mikedown-text-ui, #3a3a3d); }
+
+/* Choices (hotkey, Custom prompt…): one row per group, a short label on the
+ * left and a thin rule between rows, then the custom prompt. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-choose { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: auto; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-menu { display: flex; flex-direction: column; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-group {
+  display: grid;
+  grid-template-columns: 76px 1fr;
+  align-items: start;
+  gap: 8px;
+  padding: 6px 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-group + .ai-rw-group { border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08)); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-group:first-child { padding-top: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-group-label {
+  padding-top: 5px;
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-chip {
+  height: 26px;
+  padding: 0 11px;
+  border: 1px solid var(--mikedown-input-border, rgba(15, 15, 20, 0.16));
+  border-radius: 13px;
+  background: none;
+  color: var(--mikedown-text-ui, #3a3a3d);
+  font: inherit;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-chip:hover { background: var(--mikedown-hover, rgba(55, 53, 47, 0.06)); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-form { display: flex; gap: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-input {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--mikedown-input-border, rgba(15, 15, 20, 0.16));
+  border-radius: var(--mikedown-radius-sm, 6px);
+  background: var(--mikedown-input-bg, #fff);
+  color: var(--mikedown-text-ui, #3a3a3d);
+  font: inherit;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-input:focus { outline: none; border-color: var(--mikedown-focus-ring, rgba(63, 81, 181, 0.55)); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-input::placeholder { color: var(--mikedown-text-muted, #6f6f74); }
+
+/* Second-level picker (Translate…, Reading level…). */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-picker { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-picker-head { display: flex; align-items: center; gap: 4px; margin: -4px 0 0 -4px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-picker-title { font-weight: 600; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-picker-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 260px;
+  overflow: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 10px 0 6px;
+  border: 0;
+  border-radius: var(--mikedown-radius-sm, 6px);
+  background: none;
+  color: var(--mikedown-text-ui, #3a3a3d);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option:hover { background: var(--mikedown-hover, rgba(55, 53, 47, 0.06)); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option-check { display: inline-flex; width: 14px; flex-shrink: 0; color: var(--mikedown-accent, #3f51b5); visibility: hidden; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option[aria-checked="true"] .ai-rw-option-check { visibility: visible; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option--other .ai-rw-option-label { color: var(--mikedown-text-muted, #6f6f74); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-option-sep {
+  flex-shrink: 0;
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-picker-foot {
+  padding-top: 8px;
+  border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-toggle input { margin: 0; accent-color: var(--mikedown-accent, #3f51b5); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-toggle:has(input:disabled) { cursor: default; color: var(--mikedown-text-muted, #6f6f74); }
+
+/* Preview: one pane, or old and new side by side for a multi-line selection. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-body {
+  display: grid;
+  grid-template-columns: 1fr;
+  min-height: 0;
+  flex: 1;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-layout="single"] .ai-rw-pane--old { display: none; }
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-layout="split"] .ai-rw-body { grid-template-columns: 1fr 1fr; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-pane--old { border-right: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08)); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-label {
+  padding: 8px 14px 0;
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-layout="single"] .ai-rw-label { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-text {
+  padding: 8px 14px 12px;
+  max-height: 300px;
+  overflow: auto;
+  color: var(--mikedown-text, #2b2b2b);
+  font-family: var(--mikedown-font-family, var(--mikedown-font-ui, system-ui, sans-serif));
+  font-size: 13.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-pane--old .ai-rw-text { color: var(--mikedown-text-muted, #6f6f74); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out[data-placeholder]::before {
+  content: attr(data-placeholder);
+  color: var(--mikedown-text-muted, #6f6f74);
+}
+
+/* The rendered preview (ai-markdown-preview.ts). Plain prose keeps the raw text's look:
+   paragraphs hold their own newlines and a blank line between them. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out { display: block; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out > :first-child { margin-top: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out > :last-child { margin-bottom: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-p,
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-h,
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-list,
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-quote,
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-pre { margin: 0 0 0.7em; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-list { padding-left: 1.5em; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-list .ai-rw-md-list { margin: 0.2em 0 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-list > li { margin: 0.15em 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-h { font-weight: 600; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-h[data-level="1"] { font-size: 1.15em; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-h[data-level="2"] { font-size: 1.08em; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-quote {
+  padding-left: 10px;
+  border-left: 2px solid var(--mikedown-divider, rgba(15, 15, 20, 0.16));
+  color: var(--mikedown-text-muted, #6f6f74);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-pre {
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--mikedown-hover, rgba(55, 53, 47, 0.06));
+  overflow: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out code {
+  font-family: var(--mikedown-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.92em;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-out :not(pre) > code {
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--mikedown-hover, rgba(55, 53, 47, 0.06));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-link { text-decoration: underline; text-decoration-color: var(--mikedown-divider, rgba(15, 15, 20, 0.3)); text-underline-offset: 2px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-md-hr { margin: 0.7em 0; border: 0; border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.12)); }
+/* A grid item drops its trailing space; keep the "·" separator's. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-badge-engine { white-space: pre; }
+
+/* A calm caret: a slow fade, not a hard blink, only while streaming. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-caret {
+  display: none;
+  width: 2px;
+  height: 1.05em;
+  margin-left: 1px;
+  border-radius: 1px;
+  vertical-align: -0.15em;
+  background: var(--mikedown-accent, #3f51b5);
+}
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-phase="running"] .ai-rw-caret {
+  display: inline-block;
+  animation: mikedown-ai-caret 1.2s ease-in-out infinite;
+}
+@keyframes mikedown-ai-caret {
+  0%, 100% { opacity: 0.85; }
+  50% { opacity: 0.2; }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-phase="running"] .ai-rw-caret { animation: none; opacity: 0.6; }
+  :is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite { animation: none; }
+}
+
+/* Errors. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-icon { display: inline-flex; padding-top: 1px; color: var(--mikedown-warning, #b26a00); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-title { font-weight: 600; color: var(--mikedown-text-ui, #3a3a3d); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-message { color: var(--mikedown-text-ui, #3a3a3d); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-detail { margin-top: 2px; color: var(--mikedown-text-muted, #6f6f74); font-size: 12px; overflow-wrap: anywhere; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-more { margin-top: 4px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-more > summary { color: var(--mikedown-text-muted, #6f6f74); font-size: 12px; cursor: pointer; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-error-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+
+/* Structure check: a quiet warning line above the footer; Accept stays on. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-warn {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 6px 14px;
+  border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+  color: var(--mikedown-warning, #b26a00);
+  font-size: 12px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-warn-icon { display: inline-flex; padding-top: 2px; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-warn-text { overflow-wrap: anywhere; }
+
+/* Title candidates (choose mode) and the effect hint under them. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-titles-box { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-titles { display: flex; flex-direction: column; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-title-option { min-height: 32px; padding: 4px 10px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-title-option .ai-rw-option-label { overflow-wrap: anywhere; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-titles-hint { padding: 0 10px; color: var(--mikedown-text-muted, #6f6f74); font-size: 12px; }
+
+/* Coverage: the document was cut to fit the model's context. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-coverage {
+  padding: 6px 14px;
+  border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 12px;
+}
+
+/* Footer: the actions, then the engine badge on the right. A badge that
+   does not fit beside them wraps to its own line before it ellipsizes. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-note { color: var(--mikedown-warning, #b26a00); font-size: 12px; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-stats {
+  margin-left: auto;
+  color: var(--mikedown-text-muted, #6f6f74);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  cursor: default;
+}
+/* The stats take the push to the right; the badge sits beside them. */
+:is(.mikedown-root, .mikedown-portal) .ai-rw-stats:not([hidden]) + .ai-rw-badge { margin-left: 0; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn {
+  height: 26px;
+  padding: 0 11px;
+  border: 1px solid var(--mikedown-button-border, transparent);
+  border-radius: var(--mikedown-radius-sm, 6px);
+  background: var(--mikedown-button-bg, #f1f1ef);
+  color: var(--mikedown-button-text, #2b2b2b);
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn:hover { background: var(--mikedown-button-hover, #e7e7e4); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn--primary {
+  background: var(--mikedown-accent, #3f51b5);
+  color: var(--mikedown-accent-text, #fff);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn--primary:hover { background: var(--mikedown-accent-hover, #3546a0); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn[aria-disabled="true"]:hover { background: var(--mikedown-button-bg, #f1f1ef); }
+:is(.mikedown-root, .mikedown-portal) .ai-rw-btn--primary[aria-disabled="true"]:hover { background: var(--mikedown-accent, #3f51b5); }
+/* Explain (read-only): the note previews as the quote Insert below adds. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-output="readOnly"] .ai-rw-pane--new .ai-rw-text {
+  margin: 10px 14px 12px;
+  padding: 0 0 0 12px;
+  border-left: 3px solid var(--mikedown-quote-border, rgba(150, 150, 150, 0.5));
+}
+/* Summary (insert): the preview reads like the block it inserts. */
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-output="insert"] .ai-rw-text { max-height: 360px; }
+/* Whole-document translate: more room for the new text (there is no old pane). */
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-output="replaceDocument"] { max-height: min(80vh, 640px); }
+:is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-output="replaceDocument"] .ai-rw-text { max-height: 420px; }
+
+:is(.mikedown-root, .mikedown-portal) :is(.ai-rw-btn, .ai-rw-chip, .ai-rw-icon-btn, .ai-rw-option, .ai-rw-think-seg, .ai-rw-kind-seg):focus-visible {
+  outline: 2px solid var(--mikedown-focus-ring, rgba(63, 81, 181, 0.55));
+  outline-offset: 1px;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-rw-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (max-width: 520px) {
+  :is(.mikedown-root, .mikedown-portal) .mikedown-ai-rewrite[data-layout="split"] .ai-rw-body { grid-template-columns: 1fr; }
+  :is(.mikedown-root, .mikedown-portal) .ai-rw-pane--old { border-right: 0; border-bottom: 1px solid var(--mikedown-divider, rgba(15, 15, 20, 0.08)); }
+  :is(.mikedown-root, .mikedown-portal) .ai-rw-think-label { display: none; }
+}