@mikedown/core 0.3.0 → 0.4.0

package/dist/styles.css

@@ -913,7 +913,7 @@
 :is(.mikedown-root, .mikedown-portal) #editor h3 { font-size: 1.25em; }
 :is(.mikedown-root, .mikedown-portal) #editor h4 { font-size: 1.1em; }
 :is(.mikedown-root, .mikedown-portal) #editor h5 { font-size: 1em; }
-:is(.mikedown-root, .mikedown-portal) #editor h6 { font-size: 0.9em; opacity: 0.8; }
+:is(.mikedown-root, .mikedown-portal) #editor h6 { font-size: 0.9em; }
 
 :is(.mikedown-root, .mikedown-portal) #editor p {
   margin-bottom: 1em;
@@ -1025,6 +1025,35 @@
   opacity: 0.7;
 }
 
+/* Inline AI suggestion: inherits the text it continues, only dimmer. A widget
+   decoration, never part of the document. No box of its own, so showing it
+   moves nothing but what wraps after it. */
+:is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-ghost {
+  display: inline;
+  opacity: 0.55;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  animation: mikedown-ghost-in 120ms ease-out both;
+}
+
+@keyframes mikedown-ghost-in {
+  from { opacity: 0; }
+  to { opacity: 0.55; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-ghost {
+    animation: none;
+  }
+}
+
+@media print {
+  :is(.mikedown-root, .mikedown-portal) .ProseMirror .mikedown-ghost {
+    display: none;
+  }
+}
+
 /* ─── Headings ────────────────────────────────────────────────────────────── */
 
 :is(.mikedown-root, .mikedown-portal) .ProseMirror h1 {
@@ -1072,10 +1101,7 @@
 }
 
 :is(.mikedown-root, .mikedown-portal) .ProseMirror h6 {
-  opacity: 0.75;
-  text-transform: uppercase;
   font-size: 0.85em;
-  letter-spacing: 0.05em;
 }
 
 /* ─── Lists ───────────────────────────────────────────────────────────────── */
@@ -6709,6 +6735,12 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) .td-add {
 :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; }
 
+/* Inline suggestions' options under its switch: the same quiet fold. */
+:is(.mikedown-root, .mikedown-portal) .settings-group > .settings-row.ai-ghost-options-box { padding: 0 0 8px; gap: 2px; border-top: none; }
+:is(.mikedown-root, .mikedown-portal) .settings-row.ai-ghost-options-box[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-ghost-options-toggle { justify-self: start; }
+:is(.mikedown-root, .mikedown-portal) .ai-ghost-options { margin-top: 2px; }
+
 /* The master switch carries the tab: a touch more presence. */
 :is(.mikedown-root, .mikedown-portal) .ai-master .settings-label { font-size: 13.5px; }
 
@@ -7763,6 +7795,913 @@ body.td-dragging :is(.mikedown-root, .mikedown-portal) .td-add {
   color: var(--settings-muted, var(--mikedown-text-muted));
 }
 
+/* ── AI Activity panel (ai-activity-panel.ts) ─────────────────────────────────
+   In the AI Engines page's shell. A request list crossed with an output pane:
+   proportional type for labels, monospace for anything raw, no chrome beyond
+   the hairlines the page already has. */
+
+:is(.mikedown-root, .mikedown-portal) .ai-activity:focus { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-header-actions {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-action {
+  padding: 3px 10px;
+  background: var(--mikedown-button-bg, transparent);
+  color: var(--mikedown-button-text, var(--settings-fg));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-action:hover { background: var(--mikedown-button-hover, var(--settings-hover-bg)); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-action:disabled,
+:is(.mikedown-root, .mikedown-portal) .ai-activity-action:disabled:hover {
+  background: var(--mikedown-button-bg, transparent);
+  opacity: 0.5;
+  cursor: default;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-inline-status {
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--settings-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-inline-status[data-level="ok"] { color: var(--ai-ok); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-inline-status[data-level="error"] { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-banner {
+  margin: 0;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--mikedown-divider, var(--settings-divider));
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--settings-muted);
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+/* The list: dense enough to scan, like a network panel. */
+:is(.mikedown-root, .mikedown-portal) .ai-activity-master {
+  width: clamp(320px, 38%, 420px);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--mikedown-divider, var(--settings-divider));
+  background: var(--mikedown-surface-toolbar, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-list-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px 6px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-list-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-list-count {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-list {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 0 8px 10px;
+  overflow-y: auto;
+  /* The panel keeps the scroll position itself when a row lands on top. */
+  overflow-anchor: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 2px 6px;
+  flex-shrink: 0;
+  padding: 6px 8px;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  color: var(--settings-fg);
+  cursor: pointer;
+  transition: background-color 120ms var(--ai-ease);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row:hover { background: var(--ai-row-hover); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[aria-selected="true"] {
+  background: var(--settings-active-bg);
+  color: var(--settings-active-fg);
+  outline: 1px solid var(--mikedown-contrast-border, transparent);
+  outline-offset: -1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row:focus:not(:focus-visible) { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: -1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row > .ai-activity-dot { justify-self: center; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-head,
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-sub {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-sub { grid-column: 2; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-feature {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-status {
+  flex-shrink: 0;
+  font-size: 11px;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[data-status="error"] .ai-activity-row-status { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[data-status="fallback"] .ai-activity-row-status { color: var(--ai-warn); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[data-status="streaming"] .ai-activity-row-status { color: var(--ai-info); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[data-status="cancelled"] .ai-activity-row-status { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-when,
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-tokens {
+  justify-self: end;
+  font-family: var(--mikedown-font-mono, ui-monospace, monospace);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--settings-muted);
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-when {
+  display: flex;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-engine {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-locality { display: inline-flex; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row-locality:empty { display: none; }
+/* On the selected fill, everything follows its text color (a theme's fill can be saturated). */
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[aria-selected="true"] :is(.ai-activity-row-status, .ai-activity-row-when, .ai-activity-row-tokens, .ai-activity-row-engine) {
+  color: inherit;
+  opacity: 0.78;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[aria-selected="true"] .ai-pill {
+  color: inherit;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+/* The status dot. Shape as well as color: cancelled is a hollow ring. */
+:is(.mikedown-root, .mikedown-portal) .ai-activity-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1.5px solid var(--settings-muted);
+  border-radius: 50%;
+  background: transparent;
+}
+:is(.mikedown-root, .mikedown-portal) [data-status="ok"] > .ai-activity-dot { background: var(--ai-ok); border-color: var(--ai-ok); }
+:is(.mikedown-root, .mikedown-portal) [data-status="error"] > .ai-activity-dot { background: var(--ai-error); border-color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) [data-status="fallback"] > .ai-activity-dot { background: var(--ai-warn); border-color: var(--ai-warn); }
+:is(.mikedown-root, .mikedown-portal) [data-status="streaming"] > .ai-activity-dot {
+  background: var(--ai-info);
+  border-color: var(--ai-info);
+  animation: ai-pulse 1s ease-in-out infinite;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-row[aria-selected="true"] > .ai-activity-dot {
+  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
+}
+
+/* The request: one readable column that can hold long raw text. */
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail:focus:not(:focus-visible) { outline: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: -1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail-inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 18px 24px 40px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail-head {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-status[data-status="error"] { color: var(--ai-error); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin-left: auto;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-route {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 8px;
+  font-size: 12.5px;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-route-model {
+  font-family: var(--mikedown-font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  color: var(--settings-muted);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-thinking {
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-notes {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-notes:empty { display: none; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section-toggle {
+  align-self: auto;
+  flex-shrink: 0;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section-summary {
+  overflow: hidden;
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--settings-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-section-body[hidden],
+:is(.mikedown-root, .mikedown-portal) .ai-activity-block[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-block {
+  overflow: hidden;
+  border: 1px solid var(--mikedown-divider, var(--settings-divider));
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: var(--mikedown-code-bg, transparent);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-block-caption {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--mikedown-divider, var(--settings-divider));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-message-role {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-block-size {
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-text {
+  margin: 0;
+  padding: 8px 10px;
+  background: none;
+  font-family: var(--mikedown-font-mono, ui-monospace, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--mikedown-text, var(--settings-fg));
+  tab-size: 4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-meta {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 2px 14px;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-meta dt { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-meta dd {
+  margin: 0;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--settings-fg);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-meta dd.is-raw {
+  font-family: var(--mikedown-font-mono, ui-monospace, monospace);
+  font-size: 11.5px;
+}
+
+/* Nothing recorded: the list and detail give way to one quiet message. */
+:is(.mikedown-root, .mikedown-portal) .ai-activity-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 0;
+  padding: 32px 24px 96px;
+  text-align: center;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-empty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity-empty-text {
+  max-width: 460px;
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--settings-muted);
+}
+
+/* One column: the list or the request, as on the AI Engines page. */
+:is(.mikedown-root, .mikedown-portal) .ai-activity.is-narrow .ai-activity-master {
+  width: auto;
+  flex: 1;
+  border-right: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-activity.is-narrow[data-view="list"] .ai-activity-detail,
+:is(.mikedown-root, .mikedown-portal) .ai-activity.is-narrow[data-view="detail"] .ai-activity-master { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity.is-narrow .ai-activity-detail-inner { padding: 14px 16px 32px; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity.is-narrow .ai-page-header { padding: 8px 10px; }
+
+/* The AI tab's "Open" beside the AI Activity switch. */
+:is(.mikedown-root, .mikedown-portal) .settings-row--inline.ai-activity-setting { grid-template-columns: minmax(0, 1fr) auto auto; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-open { margin: 0; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-activity-open[hidden] { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) [data-status="streaming"] > .ai-activity-dot { animation: none; }
+  :is(.mikedown-root, .mikedown-portal) .ai-activity-row { transition: none; }
+}
+
+/* ── Documentation bases (ai-docs-page.ts) ───────────────────────────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-docs,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-list-view,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs { gap: 14px; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs > [hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail[data-kind="bases"] .ai-detail-head { flex-direction: row; align-items: center; gap: 14px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-docs-bar,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-actions,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-adders,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-path {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-status {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+
+/* One base: a row of the settings group, flat, with its folders under the name. */
+:is(.mikedown-root, .mikedown-portal) .settings-group > .settings-row.ai-docs-base { gap: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base-name {
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--settings-fg);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base.is-disabled .ai-docs-base-title,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-base.is-disabled .ai-docs-roots { opacity: 0.55; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-docs-roots,
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-roots {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-roots:empty { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-root {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-path {
+  min-width: 0;
+  color: var(--settings-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Health: small quiet tags, as under a setting in VS Code. Only a warning takes colour. */
+:is(.mikedown-root, .mikedown-portal) .ai-docs-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 100%;
+  padding: 0 6px;
+  min-height: 17px;
+  border: 1px solid transparent;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: var(--ai-row-hover);
+  font-size: 11px;
+  line-height: 15px;
+  color: var(--settings-muted);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-docs-chip svg { flex-shrink: 0; width: 11px; height: 11px; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-chip--warn {
+  background: color-mix(in srgb, var(--ai-warn) 10%, transparent);
+  color: var(--ai-warn);
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form .settings-input:not(.ai-docs-number) { min-width: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form .settings-row--inline > .settings-input { width: 260px; max-width: 100%; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-path .settings-input { flex: 1; width: auto; min-width: 160px; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-form-error:empty { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-number { width: 72px; }
+:is(.mikedown-root, .mikedown-portal) .ai-docs-select.settings-input { width: auto; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-page-detail .ai-docs-base .ai-confirm { margin: 2px 0 0; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-docs-base-head { flex-wrap: wrap; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-docs-path { white-space: normal; overflow-wrap: anywhere; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-docs-form .settings-row--inline { grid-template-columns: minmax(0, 1fr); }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-docs-form .settings-row--inline > .settings-input { width: 100%; justify-self: stretch; }
+:is(.mikedown-root, .mikedown-portal) .ai-page.is-narrow .ai-docs-form .settings-row--inline > .ai-switch { justify-self: start; }
+
+/* ── The chat panel (ai-chat-panel.ts): docked inside the editor ─────────── */
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-dock {
+  --settings-fg: var(--mikedown-text, #d4d4d4);
+  --settings-muted: var(--mikedown-text-muted, rgba(128, 128, 128, 0.9));
+  --settings-divider: var(--mikedown-border, rgba(128, 128, 128, 0.2));
+  --settings-focus: var(--mikedown-focus-ring, #007fd4);
+  --ai-ok: var(--mikedown-success, #2e7d32);
+  --ai-error: var(--mikedown-danger, #c62828);
+  --ai-warn: var(--mikedown-warning, #b26a00);
+  --ai-ease: cubic-bezier(0.2, 0, 0, 1);
+  --ai-chat-quiet: var(--mikedown-hover, rgba(128, 128, 128, 0.1));
+  position: absolute;
+  top: 40px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 95;
+  display: flex;
+  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.5;
+}
+.mikedown-root.mikedown-no-toolbar .ai-chat-dock { top: 0; }
+.mikedown-root.ai-chat-docked .ai-chat-dock {
+  left: auto;
+  width: var(--mikedown-ai-chat-width, 380px);
+  border-left: 1px solid var(--mikedown-divider, var(--settings-divider));
+}
+.mikedown-root.ai-chat-docked .mikedown-editor-container,
+.mikedown-root.ai-chat-docked .mikedown-source-container {
+  right: var(--mikedown-ai-chat-width, 380px);
+}
+/* A sidebar on the right sits beside the panel, not under it. */
+.mikedown-root.ai-chat-docked.mikedown-outline-right .mikedown-outline-sidebar {
+  right: var(--mikedown-ai-chat-width, 380px);
+}
+.mikedown-root.ai-chat-docked.mikedown-outline-open.mikedown-outline-right .mikedown-editor-container {
+  right: calc(var(--mikedown-ai-chat-width, 380px) + var(--mikedown-outline-width, 200px));
+}
+.mikedown-root.ai-chat-docked.mikedown-outline-right .mikedown-outline-toggle {
+  right: calc(var(--mikedown-ai-chat-width, 380px) + 8px);
+}
+.mikedown-root.ai-chat-docked .mikedown-find-replace-bar {
+  right: calc(var(--mikedown-ai-chat-width, 380px) + 20px);
+}
+@media print {
+  :is(.mikedown-root, .mikedown-portal) .ai-chat-dock { display: none; }
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-spacer { flex: 1; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 4px 6px 4px 14px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--settings-fg);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--mikedown-radius-sm, 4px);
+  background: none;
+  color: var(--settings-muted);
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-icon:hover { background: var(--ai-chat-quiet); color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-icon[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-status {
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-status[data-level="error"] { color: var(--ai-error); }
+
+/* The conversation. */
+:is(.mikedown-root, .mikedown-portal) .ai-chat-log {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 14px 14px;
+  outline: none;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-empty {
+  margin-top: 18vh;
+  padding: 0 16px;
+  text-align: center;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-empty[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-empty-title { font-weight: 600; color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-empty-text { margin: 4px 0 0; font-size: 12px; }
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-turn {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-turn:first-of-type { margin-top: 6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-question {
+  align-self: flex-end;
+  max-width: 88%;
+  padding: 6px 11px;
+  border-radius: 12px;
+  background: var(--mikedown-active, var(--ai-chat-quiet));
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-reply {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-answer {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-answer.is-cancelled { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-turn--arrived .ai-chat-reply {
+  animation: ai-chat-arrive 200ms var(--ai-ease);
+}
+@keyframes ai-chat-arrive {
+  from { opacity: 0.35; transform: translateY(3px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* A citation: its number and `file › heading`. The full path is in the hover title. */
+:is(.mikedown-root, .mikedown-portal) .ai-chat-chip {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  max-width: min(100%, 26em);
+  margin: 0 1px;
+  padding: 0 7px 0 3px;
+  border: 1px solid var(--mikedown-divider, var(--settings-divider));
+  border-radius: 999px;
+  background: none;
+  color: var(--mikedown-link, var(--settings-fg));
+  font: inherit;
+  font-size: 11.5px;
+  line-height: 1.55;
+  white-space: nowrap;
+  vertical-align: baseline;
+  transition: background-color 120ms ease-out;
+}
+:is(.mikedown-root, .mikedown-portal) button.ai-chat-chip { cursor: pointer; }
+:is(.mikedown-root, .mikedown-portal) button.ai-chat-chip:hover { background: var(--ai-chat-quiet); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-chip-n {
+  min-width: 1.35em;
+  border-radius: 999px;
+  background: var(--ai-chat-quiet);
+  color: var(--settings-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-notes { display: flex; flex-direction: column; gap: 1px; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-note {
+  font-size: 11.5px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 4px;
+  margin-left: -6px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-action,
+:is(.mikedown-root, .mikedown-portal) .ai-chat-link {
+  padding: 2px 6px;
+  border: 0;
+  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-chat-action:hover,
+:is(.mikedown-root, .mikedown-portal) .ai-chat-link:hover { background: var(--ai-chat-quiet); color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-link { color: var(--mikedown-link, var(--settings-muted)); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-route {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 40%;
+  padding-right: 2px;
+  font-size: 11px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-route-icon { display: inline-flex; flex-shrink: 0; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-route-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-progress {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: var(--settings-muted);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-dot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: currentColor;
+  animation: ai-chat-pulse 1.2s ease-in-out infinite;
+}
+@keyframes ai-chat-pulse {
+  50% { opacity: 0.25; }
+}
+
+:is(.mikedown-root, .mikedown-portal) .ai-chat-notice {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--ai-chat-quiet);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-notice-title { font-weight: 600; overflow-wrap: anywhere; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-notice .ai-chat-actions { margin: 2px 0 0 -6px; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-notice .ai-chat-action { color: var(--mikedown-link, var(--settings-fg)); }
+
+/* The composer. */
+:is(.mikedown-root, .mikedown-portal) .ai-chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px 12px;
+  flex-shrink: 0;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-off[hidden],
+:is(.mikedown-root, .mikedown-portal) .ai-chat-scope[hidden],
+:is(.mikedown-root, .mikedown-portal) .ai-chat-bases[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-scope {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 2px;
+  border-radius: 7px;
+  background: var(--ai-chat-quiet);
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg { position: relative; display: inline-flex; cursor: pointer; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg span {
+  padding: 1px 9px;
+  border-radius: 5px;
+  font-size: 12px;
+  color: var(--settings-muted);
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg input:checked + span {
+  background: var(--mikedown-surface, #1e1e1e);
+  color: var(--settings-fg);
+  box-shadow: 0 0 0 1px var(--mikedown-divider, var(--settings-divider));
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg input:focus-visible + span {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: 1px;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-seg input:disabled + span { opacity: 0.6; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-bases {
+  padding-left: 2px;
+  font-size: 11.5px;
+  color: var(--settings-muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-bases .ai-chat-link { padding: 0 2px; font-size: inherit; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  padding: 5px 5px 5px 10px;
+  border: 1px solid var(--mikedown-input-border, var(--settings-divider));
+  border-radius: 10px;
+  background: var(--mikedown-input-bg, transparent);
+  transition: border-color 120ms ease-out;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-box:focus-within { border-color: var(--settings-focus); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-input {
+  flex: 1;
+  min-width: 0;
+  max-height: 136px;
+  padding: 3px 0;
+  border: 0;
+  outline: none;
+  resize: none;
+  background: none;
+  color: var(--settings-fg);
+  font: inherit;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-input::placeholder { color: var(--settings-muted); }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: var(--mikedown-selected-bg, #0e639c);
+  color: var(--mikedown-selected-text, #ffffff);
+  cursor: pointer;
+}
+:is(.mikedown-root, .mikedown-portal) .ai-chat-send[hidden] { display: none; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-send:disabled { background: var(--ai-chat-quiet); color: var(--settings-muted); cursor: default; }
+:is(.mikedown-root, .mikedown-portal) .ai-chat-send--cancel { background: var(--ai-chat-quiet); color: var(--settings-fg); }
+:is(.mikedown-root, .mikedown-portal) :is(.ai-chat-icon, .ai-chat-send, .ai-chat-action, .ai-chat-link, .ai-chat-chip):focus-visible,
+:is(.mikedown-root, .mikedown-portal) .ai-chat-log:focus-visible {
+  outline: 1px solid var(--settings-focus);
+  outline-offset: -1px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.mikedown-root, .mikedown-portal) .ai-chat-turn--arrived .ai-chat-reply,
+  :is(.mikedown-root, .mikedown-portal) .ai-chat-dot { animation: none; }
+}
+
 /* ═══ ai-rewrite.css ═══ */
 /* MikeDown — selection rewrite (ai-rewrite.ts): the target highlight and
  * the preview popover. Overlays live in the portal and