@plannotator/ui 0.22.0

package/theme.css

@@ -0,0 +1,893 @@
+/* Plannotator Theme System — imports all themes, provides Tailwind bridge + base styles */
+
+@import "katex/dist/katex.min.css";
+
+/* Theme files — each defines .theme-{name} (dark) and .theme-{name}.light */
+@import "./themes/plannotator.css";
+@import "./themes/claude-plus.css";
+@import "./themes/soft-pop.css";
+@import "./themes/adwaita.css";
+@import "./themes/caffeine.css";
+@import "./themes/synthwave-84.css";
+@import "./themes/catppuccin.css";
+@import "./themes/rose-pine.css";
+@import "./themes/monokai-pro.css";
+@import "./themes/doom-64.css";
+@import "./themes/dracula.css";
+@import "./themes/gruvbox.css";
+@import "./themes/kanagawa-dragon.css";
+@import "./themes/kanagawa-lotus.css";
+@import "./themes/kanagawa-wave.css";
+@import "./themes/paulmillr.css";
+@import "./themes/quantum-rose.css";
+@import "./themes/solar-dusk.css";
+@import "./themes/terminal.css";
+@import "./themes/tokyo-night.css";
+@import "./themes/tinacious.css";
+@import "./themes/cursor.css";
+@import "./themes/cursor-hc.css";
+@import "./themes/cursor-midnight.css";
+@import "./themes/everforest.css";
+@import "./themes/everforest-hard.css";
+@import "./themes/everforest-soft.css";
+@import "./themes/nord.css";
+@import "./themes/solarized.css";
+@import "./themes/github.css";
+@import "./themes/one-dark-pro.css";
+@import "./themes/night-owl.css";
+@import "./themes/ayu-dark.css";
+@import "./themes/poimandres.css";
+@import "./themes/material.css";
+@import "./themes/vitesse.css";
+@import "./themes/vesper.css";
+@import "./themes/andromeeda.css";
+@import "./themes/aurora-x.css";
+@import "./themes/dark-plus.css";
+@import "./themes/houston.css";
+@import "./themes/laserwave.css";
+@import "./themes/min.css";
+@import "./themes/one-light.css";
+@import "./themes/plastic.css";
+@import "./themes/red.css";
+@import "./themes/slack.css";
+@import "./themes/snazzy-light.css";
+@import "./themes/vitesse-black.css";
+@import "./themes/simple.css";
+@import "./themes/neutral.css";
+@import "./print.css";
+
+/* Tailwind bridge — maps CSS vars to utility classes */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface-0: var(--surface-0);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  /* Comment-annotation indicator color. Defaults to each theme's --accent
+   * (see :root below); a theme whose accent is a low-contrast neutral (e.g.
+   * "simple") overrides --annotation-comment directly. */
+  --color-annotation-comment: var(--annotation-comment);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Type scale — fonts excluded on purpose (themes own --font-sans/--font-mono) */
+@theme {
+  --text-sm: 0.875rem; --text-sm--line-height: 1.45;
+  --text-base: 1rem; --text-base--line-height: 1.55;
+  --text-lg: 1.0625rem; --text-lg--line-height: 1.45;
+  --text-xl: 1.1875rem; --text-xl--line-height: 1.4;
+  --text-2xl: 1.375rem; --text-2xl--line-height: 1.3;
+  --text-3xl: 1.625rem; --text-3xl--line-height: 1.2;
+  --text-4xl: 1.875rem; --text-4xl--line-height: 1.15;
+  --text-5xl: 2rem; --text-5xl--line-height: 1.1;
+}
+
+/* Base styles — apply regardless of theme */
+@layer base {
+  /* Extended tokens — derived from Plannotator's theme vars so they adapt to
+   * all themes. These cover gaps between Plannotator's base token set and what
+   * the surface/sidebar-aware components expect. Themes that pin explicit
+   * values (e.g. "simple") override these. */
+  :root {
+    --surface-0: color-mix(in oklch, var(--muted) 40%, var(--background));
+    --surface-1: var(--muted);
+    --surface-2: color-mix(in oklch, var(--muted) 70%, var(--foreground));
+    --sidebar: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: var(--muted);
+    --sidebar-accent-foreground: var(--foreground);
+    --sidebar-border: var(--border);
+    --sidebar-ring: var(--ring);
+    /* Comment-annotation color follows the theme's accent unless the theme
+     * overrides it (neutral themes whose accent is an illegible gray). */
+    --annotation-comment: var(--accent);
+    /* Sensible amber default so a "warning" color utility exists even for
+     * themes that don't define --warning. Matches the plannotator theme;
+     * per-theme files override these. */
+    --warning: oklch(0.75 0.15 85);
+    --warning-foreground: oklch(0.20 0.02 260);
+    --card-ring: rgba(255, 255, 255, 0.08);
+    --card-shadow:
+      0 0 0 1px var(--card-ring), 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
+  }
+
+  html {
+    --terminal-background: var(--card);
+    --terminal-foreground: var(--foreground);
+    --terminal-cursor: var(--primary);
+    --terminal-cursor-accent: var(--terminal-background);
+    --terminal-selection-background: color-mix(in oklab, var(--primary) 32%, var(--terminal-background));
+    --terminal-selection-foreground: var(--foreground);
+    --terminal-selection-inactive-background: var(--border);
+    --terminal-black: var(--terminal-background);
+    --terminal-red: var(--destructive);
+    --terminal-green: var(--success);
+    --terminal-yellow: var(--warning);
+    --terminal-blue: var(--primary);
+    --terminal-magenta: var(--accent);
+    --terminal-cyan: var(--secondary);
+    --terminal-white: var(--foreground);
+    --terminal-bright-black: var(--muted-foreground);
+    --terminal-bright-red: color-mix(in oklab, var(--destructive) 80%, white);
+    --terminal-bright-green: color-mix(in oklab, var(--success) 80%, white);
+    --terminal-bright-yellow: color-mix(in oklab, var(--warning) 80%, white);
+    --terminal-bright-blue: color-mix(in oklab, var(--primary) 80%, white);
+    --terminal-bright-magenta: color-mix(in oklab, var(--accent) 80%, white);
+    --terminal-bright-cyan: color-mix(in oklab, var(--secondary) 80%, white);
+    --terminal-bright-white: var(--foreground);
+  }
+
+  .light {
+    --warning: oklch(0.55 0.18 85);
+    --warning-foreground: oklch(0.18 0.02 260);
+    --terminal-bright-red: color-mix(in oklab, var(--destructive) 84%, black);
+    --terminal-bright-green: color-mix(in oklab, var(--success) 84%, black);
+    --terminal-bright-yellow: color-mix(in oklab, var(--warning) 84%, black);
+    --terminal-bright-blue: color-mix(in oklab, var(--primary) 84%, black);
+    --terminal-bright-magenta: color-mix(in oklab, var(--accent) 84%, black);
+    --terminal-bright-cyan: color-mix(in oklab, var(--secondary) 84%, black);
+    --card-ring: rgba(0, 0, 0, 0.06);
+    --card-shadow:
+      0 0 0 1px var(--card-ring), 0 1px 3px 0 rgba(0, 0, 0, 0.04),
+      0 2px 8px -2px rgba(0, 0, 0, 0.06);
+  }
+
+  * {
+    border-color: var(--border);
+  }
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--background);
+  color: var(--foreground);
+  font-feature-settings: "ss01", "ss02", "cv01";
+}
+
+.math-inline {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  vertical-align: text-bottom;
+  line-height: 1;
+}
+
+/* Signal that a rendered formula is a clickable annotation target. */
+.math-annotatable {
+  cursor: pointer;
+}
+
+.math-block {
+  max-width: 100%;
+}
+
+.math-inline .katex,
+.math-block .katex {
+  color: inherit;
+  font-size: 1.02em;
+}
+
+.math-inline .katex {
+  line-height: inherit;
+}
+
+.math-block .katex-display {
+  margin: 0;
+  text-align: center;
+}
+
+/* Subtle grid background */
+.bg-grid {
+  background-image:
+    linear-gradient(to right, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.32 0.02 260 / 0.5) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.light .bg-grid {
+  background-image:
+    linear-gradient(to right, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.90 0.01 260 / 0.6) 1px, transparent 1px);
+}
+
+
+/* Glow effects */
+.glow-primary {
+  box-shadow: 0 0 20px oklch(from var(--primary) l c h / 0.15), 0 0 40px oklch(from var(--primary) l c h / 0.05);
+}
+
+.glow-sm {
+  box-shadow: 0 0 10px oklch(from var(--primary) l c h / 0.1);
+}
+
+/* ------------------------------------------------------------------ */
+/* Goal setup interview — glass outer + opaque rows                   */
+/* ------------------------------------------------------------------ */
+
+.goal-shell {
+  position: relative;
+  border-radius: 1rem;
+  border: 1px solid oklch(from var(--border) l c h / 0.3);
+  background: oklch(from var(--muted) l c h / 0.5);
+  padding: 1.25rem;
+}
+
+.goal-row {
+  position: relative;
+  border-radius: 0.625rem;
+  background: var(--card);
+  border: 1px solid oklch(from var(--border) l c h / 0.3);
+  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.12);
+  transition: background-color 150ms, box-shadow 150ms, border-color 150ms, opacity 120ms;
+}
+
+.goal-row + .goal-row {
+  margin-top: 0.375rem;
+}
+
+.goal-row.answered {
+  border-color: oklch(from var(--success) l c h / 0.25);
+}
+
+.goal-row.skipped {
+  border-color: oklch(from var(--warning) l c h / 0.25);
+}
+
+.goal-row.active {
+  box-shadow:
+    0 0 0 1px oklch(from var(--primary) l c h / 0.3),
+    0 2px 8px -2px rgba(0, 0, 0, 0.12);
+}
+
+
+.goal-row-divider {
+  height: 1px;
+  margin: 0 0.875rem;
+  background: oklch(from var(--border) l c h / 0.2);
+}
+
+/* CSS-grid accordion — animate rows 0fr ↔ 1fr without measuring */
+.goal-question-body {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 180ms ease;
+}
+
+.goal-question-body.expanded {
+  grid-template-rows: 1fr;
+}
+
+.goal-question-body > .goal-question-body-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+@keyframes goal-pill-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+.goal-shortcut-pill {
+  animation: goal-pill-in 220ms ease-out both;
+}
+
+.goal-shortcut-pill kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid oklch(from var(--border) l c h / 0.5);
+  background: oklch(from var(--muted) l c h / 0.6);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  line-height: 1rem;
+}
+
+.goal-shortcut-pill kbd + kbd {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.goal-shortcut-pill kbd:has(+ kbd) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Scrollbars                                                         */
+/* ------------------------------------------------------------------ */
+/*
+ * All scroll containers use NATIVE OS scrollbars (the overlayscrollbars library
+ * was removed). <OverlayScrollArea> is now a thin native wrapper; everything is
+ * styled by the standard rule below.
+ *
+ * Note: transform/opacity were removed from global transitions in abc952f to
+ * prevent scroll jank. DO NOT re-add them.
+ */
+
+/* Native OS scrollbars — thin + themed via the standard properties (cross-browser:
+ * Chrome 121+, Safari 18.2+, Firefox). Deliberately NO `::-webkit-scrollbar { width }`
+ * override: the old 6px rail was the "can't grab the scrollbar" bug (#354); the
+ * standard `thin` stays grabbable. (Replaced the overlayscrollbars os-theme.) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+/* Selection */
+::selection {
+  background: oklch(from var(--primary) l c h / 0.3);
+}
+
+/* Suppress all color transitions until the app has mounted and the theme
+   is stable. Without this, the global * transition below fires on initial
+   load — className reassignments during React mount trigger a 150ms
+   transition from browser-default black to themed white, causing a visible
+   flash. ThemeProvider adds .transitions-ready after mount. */
+html:not(.transitions-ready) * {
+  transition-duration: 0s !important;
+}
+
+/* Smooth transitions for theme switching and hover states.
+   Only color properties — transform/opacity are handled per-component
+   to avoid interfering with scroll compositing. */
+* {
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* Focus states */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* Flash highlight for annotated files in sidebar */
+.file-annotation-flash {
+  animation: file-flash 1.2s ease-out;
+}
+
+@keyframes file-flash {
+  0% { background: transparent; }
+  10% { background: var(--muted); }
+  30% { background: transparent; }
+  45% { background: var(--muted); }
+  65% { background: transparent; }
+  100% { background: transparent; }
+}
+
+/* Shared file tree styling used by review and annotation sidebars. */
+.file-tree-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem; /* 13px — file rows felt small vs. the rest of the app */
+  cursor: pointer;
+  color: var(--muted-foreground);
+}
+
+.file-tree-item:hover {
+  background: var(--muted);
+  color: var(--foreground);
+}
+
+.file-tree-item:disabled {
+  cursor: default;
+}
+
+.file-tree-item:disabled:hover {
+  background: transparent;
+}
+
+.file-tree-item.active {
+  background: oklch(from var(--primary) l c h / 0.3);
+  color: var(--primary);
+}
+
+/* The stage (+) button's default border (--border) has no contrast against
+   the active row's primary tint and visually disappears — tint it with the
+   row color instead. :not(:hover) leaves the button's own hover border. */
+.file-tree-item.active .stage-plus:not(:hover) {
+  border-color: oklch(from var(--primary) l c h / 0.5);
+}
+
+.file-tree-item.has-annotations {
+  background: oklch(from var(--primary) l c h / 0.08);
+}
+
+.file-tree-item.has-annotations:hover {
+  background: var(--muted);
+}
+
+.file-tree-item.active.has-annotations {
+  background: oklch(from var(--primary) l c h / 0.3);
+}
+
+.file-tree-item .additions,
+.file-tree-folder .additions,
+.file-tree-status-summary .additions {
+  color: var(--success);
+}
+
+.file-tree-item .deletions,
+.file-tree-folder .deletions,
+.file-tree-status-summary .deletions {
+  color: var(--destructive);
+}
+
+
+/* Word-level diff markers inside modified plan-diff blocks. Emitted as
+   <ins>/<del> by PlanCleanDiffView's inline renderer; keep the decoration
+   compact across line wraps via box-decoration-break: clone. */
+.plan-diff-word-added,
+.plan-diff-word-removed {
+  padding: 0 2px;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.plan-diff-word-added {
+  background-color: color-mix(in oklab, var(--success) 20%, transparent);
+  text-decoration: none;
+  color: inherit;
+}
+.plan-diff-word-removed {
+  background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+  opacity: 0.75;
+  color: inherit;
+}
+
+/* Inline code pills inside diff wrappers carry their own solid background
+   which would otherwise cover the green/red tint on the surrounding
+   <ins>/<del>. Override the pill background so added code pills read clearly
+   green and removed pills read clearly red-struck. */
+.plan-diff-word-added code {
+  background-color: color-mix(in oklab, var(--success) 25%, var(--muted));
+}
+.plan-diff-word-removed code {
+  background-color: color-mix(in oklab, var(--destructive) 20%, var(--muted));
+}
+
+/* Annotation highlights */
+.annotation-highlight {
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+}
+
+.annotation-highlight.deletion {
+  background: oklch(from var(--destructive) l c h / 0.35);
+  text-decoration: line-through;
+  text-decoration-color: var(--destructive);
+  text-decoration-thickness: 2px;
+}
+
+.annotation-highlight.comment {
+  background: oklch(0.70 0.18 60 / 0.3);
+  border-bottom: 2px solid var(--accent);
+}
+
+/* Light mode: softer highlights */
+.light .annotation-highlight.deletion {
+  background: oklch(0.65 0.22 25 / 0.2);
+}
+
+.light .annotation-highlight.comment {
+  background: oklch(0.70 0.20 60 / 0.15);
+}
+
+.annotation-highlight.focused {
+  background: oklch(from var(--focus-highlight) l c h / 0.45) !important;
+  box-shadow: 0 0 8px oklch(from var(--focus-highlight) l c h / 0.4);
+  border-bottom: 2px solid var(--focus-highlight);
+  filter: none;
+}
+
+.light .annotation-highlight.focused {
+  background: oklch(0.70 0.22 200 / 0.3) !important;
+  box-shadow: 0 0 6px oklch(0.60 0.20 200 / 0.3);
+}
+
+.annotation-highlight:hover {
+  filter: brightness(1.2);
+  cursor: pointer;
+}
+
+/* ========================================
+   Plan Diff Styles
+   ======================================== */
+
+/* Clean diff view - added content */
+.plan-diff-added {
+  border-left: 3px solid var(--success);
+  background: oklch(from var(--success) l c h / 0.06);
+  padding-left: 0.75rem;
+  border-radius: 0 0.25rem 0.25rem 0;
+  margin: 0.25rem 0;
+}
+.light .plan-diff-added {
+  background: oklch(from var(--success) l c h / 0.06);
+}
+
+/* Clean diff view - removed content */
+.plan-diff-removed {
+  border-left: 3px solid var(--destructive);
+  background: oklch(from var(--destructive) l c h / 0.06);
+  padding-left: 0.75rem;
+  border-radius: 0 0.25rem 0.25rem 0;
+  margin: 0.25rem 0;
+}
+.light .plan-diff-removed {
+  background: oklch(from var(--destructive) l c h / 0.06);
+}
+
+/* Clean diff view - modified content (mix of additions and deletions in one
+   block, rendered inline via word-level diff).
+   Deliberate asymmetry with added/removed: add/remove are BLOCK-scope events
+   — the whole block matters, so a loud fill is the right signal. Modify is
+   a WORD-scope event — the words matter, and the inline red-struck /
+   green-highlighted word markers already grab attention. A block-level fill
+   would compete with that inline work; an amber gutter on a normal
+   background says "look inside, the change is in the text" while staying
+   consistent with the green/red/yellow diff convention. */
+.plan-diff-modified {
+  border-left: 3px solid oklch(from var(--warning) l c h / 0.75);
+  background: transparent;
+  padding-left: 0.75rem;
+  border-radius: 0 0.25rem 0.25rem 0;
+  margin: 0.25rem 0;
+}
+
+/* Clean diff view - unchanged (dimmed) */
+.plan-diff-unchanged {
+  /* handled via opacity in component */
+}
+
+/* Raw diff view - line styles */
+.plan-diff-line-added {
+  background: oklch(from var(--success) l c h / 0.15);
+  color: var(--success);
+}
+.plan-diff-line-removed {
+  background: oklch(from var(--destructive) l c h / 0.15);
+  color: var(--destructive);
+  opacity: 0.75;
+  text-decoration: line-through;
+  text-decoration-color: oklch(from var(--destructive) l c h / 0.4);
+}
+.light .plan-diff-line-added {
+  background: oklch(from var(--success) l c h / 0.12);
+}
+.light .plan-diff-line-removed {
+  background: oklch(from var(--destructive) l c h / 0.12);
+}
+
+/* Raw HTML blocks (CommonMark Type 6) rendered via dangerouslySetInnerHTML.
+   Minimal typography so <details>, <blockquote>, nested lists etc. inherit
+   sensible spacing without fighting the surrounding prose styles. */
+.html-block details {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  margin: 0.5rem 0;
+  background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+}
+.html-block details[open] {
+  padding-bottom: 0.75rem;
+}
+.html-block summary {
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--foreground);
+  list-style: revert;
+}
+.html-block summary::-webkit-details-marker {
+  color: color-mix(in oklab, var(--foreground) 60%, transparent);
+}
+.html-block details[open] > summary {
+  margin-bottom: 0.5rem;
+}
+.html-block p {
+  margin: 0.5rem 0;
+}
+.html-block ul,
+.html-block ol {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+.html-block ul { list-style: disc; }
+.html-block ol { list-style: decimal; }
+.html-block blockquote {
+  border-left: 2px solid color-mix(in oklab, var(--primary) 50%, transparent);
+  padding-left: 1rem;
+  margin: 0.75rem 0;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+.html-block code {
+  background-color: var(--muted);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+.html-block pre {
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+  border: 1px solid color-mix(in oklab, var(--border) 30%, transparent);
+  border-radius: 6px;
+  padding: 0.75rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+}
+.html-block pre code {
+  background: transparent;
+  padding: 0;
+}
+.html-block a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* While the table popout dialog is mounted, drop chrome that would
+   otherwise paint over the dialog behind it. :has() observes the dialog's
+   presence directly — no JS, no state sync. When the dialog unmounts the
+   selector stops matching and everything returns to natural stacking. */
+body:has([data-popout="true"]) [data-annotation-panel="true"],
+body:has([data-popout="true"]) [data-sticky-header-lane="true"],
+body:has([data-popout="true"]) [data-app-header="true"],
+body:has([data-popout="true"]) [data-sidebar-tabs="true"] {
+  z-index: -1;
+}
+
+/* GitHub-style alerts: > [!NOTE] / [!TIP] / [!WARNING] / [!CAUTION] / [!IMPORTANT] */
+.alert-note      { border-left-color: #0969da; }
+.alert-note      .alert-title { color: #0969da; }
+.alert-tip       { border-left-color: #1a7f37; }
+.alert-tip       .alert-title { color: #1a7f37; }
+.alert-warning   { border-left-color: #9a6700; }
+.alert-warning   .alert-title { color: #9a6700; }
+.alert-caution   { border-left-color: #cf222e; }
+.alert-caution   .alert-title { color: #cf222e; }
+.alert-important { border-left-color: #8250df; }
+.alert-important .alert-title { color: #8250df; }
+
+@media (prefers-color-scheme: dark) {
+  .alert-note      { border-left-color: #4493f8; }
+  .alert-note      .alert-title { color: #4493f8; }
+  .alert-tip       { border-left-color: #3fb950; }
+  .alert-tip       .alert-title { color: #3fb950; }
+  .alert-warning   { border-left-color: #d29922; }
+  .alert-warning   .alert-title { color: #d29922; }
+  .alert-caution   { border-left-color: #f85149; }
+  .alert-caution   .alert-title { color: #f85149; }
+  .alert-important { border-left-color: #ab7df8; }
+  .alert-important .alert-title { color: #ab7df8; }
+}
+
+/* Directive containers: :::kind ... ::: */
+.directive { border-color: var(--border); background: color-mix(in srgb, var(--muted) 50%, transparent); }
+.directive-title { color: var(--muted-foreground); }
+.directive-note, .directive-info { background: color-mix(in srgb, #3b82f6 10%, transparent); border-color: color-mix(in srgb, #3b82f6 40%, transparent); }
+.directive-note .directive-title, .directive-info .directive-title { color: #3b82f6; }
+.directive-tip, .directive-success { background: color-mix(in srgb, #10b981 10%, transparent); border-color: color-mix(in srgb, #10b981 40%, transparent); }
+.directive-tip .directive-title, .directive-success .directive-title { color: #10b981; }
+.directive-warning { background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 40%, transparent); }
+.directive-warning .directive-title { color: #f59e0b; }
+.directive-danger, .directive-caution { background: color-mix(in srgb, #ef4444 10%, transparent); border-color: color-mix(in srgb, #ef4444 40%, transparent); }
+.directive-danger .directive-title, .directive-caution .directive-title { color: #ef4444; }
+
+/* Shared AI chat rendering */
+.ai-streaming-cursor {
+  display: inline-block;
+  width: 0.45em;
+  height: 1em;
+  background: currentColor;
+  border-radius: 1px;
+  vertical-align: -0.15em;
+  animation: ai-cursor-blink 1s steps(2, start) infinite;
+}
+
+@keyframes ai-cursor-blink {
+  0%, 45% { opacity: 1; }
+  46%, 100% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-streaming-cursor {
+    animation: none;
+  }
+}
+
+.ai-markdown {
+  line-height: 1.55;
+}
+.ai-markdown p {
+  margin: 0.45rem 0;
+}
+.ai-markdown p:first-child {
+  margin-top: 0;
+}
+.ai-markdown p:last-child {
+  margin-bottom: 0;
+}
+.ai-markdown h1,
+.ai-markdown h2,
+.ai-markdown h3,
+.ai-markdown h4,
+.ai-markdown h5,
+.ai-markdown h6 {
+  font-weight: 600;
+  margin: 0.75rem 0 0.35rem;
+}
+.ai-markdown h1 { font-size: 0.875rem; }
+.ai-markdown h2 { font-size: 0.8125rem; }
+.ai-markdown h3,
+.ai-markdown h4,
+.ai-markdown h5,
+.ai-markdown h6 { font-size: 0.75rem; }
+.ai-markdown ul,
+.ai-markdown ol {
+  margin: 0.45rem 0;
+  padding-left: 1rem;
+}
+.ai-markdown ul { list-style: disc; }
+.ai-markdown ol { list-style: decimal; }
+.ai-markdown li {
+  margin: 0.15rem 0;
+}
+.ai-markdown code {
+  background: color-mix(in oklab, var(--muted) 70%, transparent);
+  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
+  border-radius: 4px;
+  padding: 0.05rem 0.3rem;
+  font-size: 0.9em;
+}
+.ai-markdown pre {
+  background: color-mix(in oklab, var(--muted) 55%, transparent);
+  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent);
+  border-radius: 6px;
+  padding: 0.6rem;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+.ai-markdown pre code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+.ai-markdown blockquote {
+  border-left: 2px solid color-mix(in oklab, var(--primary) 45%, transparent);
+  padding-left: 0.6rem;
+  color: var(--muted-foreground);
+}
+
+/* Annotation highlights — shared by the plan editor and the code-review
+   description annotations. (Moved here from packages/editor/index.css so both
+   surfaces render web-highlighter marks identically.) */
+.annotation-highlight {
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+}
+
+/* Math annotations style the rendered formula element directly rather than
+   wrapping text in a <mark>, so they need their own display handling. */
+.annotation-highlight.math-inline-annotation {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.annotation-highlight.math-block-annotation {
+  display: block;
+}
+
+.annotation-highlight.deletion {
+  background: oklch(from var(--destructive) l c h / 0.35);
+  text-decoration: line-through;
+  text-decoration-color: var(--destructive);
+  text-decoration-thickness: 2px;
+}
+
+.annotation-highlight.comment {
+  background: oklch(0.70 0.18 60 / 0.3);
+  border-bottom: 2px solid var(--accent);
+}
+
+/* Light mode: softer highlights */
+.light .annotation-highlight.deletion {
+  background: oklch(0.65 0.22 25 / 0.2);
+}
+
+.light .annotation-highlight.comment {
+  background: oklch(0.70 0.20 60 / 0.15);
+}
+
+.annotation-highlight.focused {
+  background: oklch(from var(--focus-highlight) l c h / 0.45) !important;
+  box-shadow: 0 0 8px oklch(from var(--focus-highlight) l c h / 0.4);
+  border-bottom: 2px solid var(--focus-highlight);
+  filter: none;
+}
+
+.light .annotation-highlight.focused {
+  background: oklch(0.70 0.22 200 / 0.3) !important;
+  box-shadow: 0 0 6px oklch(0.60 0.20 200 / 0.3);
+}
+
+.annotation-highlight:hover {
+  filter: brightness(1.2);
+  cursor: pointer;
+}