@erdemtuna/doc-review 0.12.0 → 0.13.0

package/lib/ui/chrome.css

@@ -49,6 +49,7 @@
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
       --tw-animation-delay: 0s;
       --tw-animation-direction: normal;
       --tw-animation-duration: initial;
@@ -70,146 +71,89 @@
   }
 }
 
-@layer legacy {
-  :root, .review-ui {
-    color-scheme: light;
-    --background: #f5f2ea;
-    --foreground: #292e2b;
-    --card: #fffdf7;
-    --card-foreground: #292e2b;
-    --popover: #fffdf7;
-    --popover-foreground: #292e2b;
-    --primary: #17685f;
-    --primary-foreground: #fffdf7;
-    --secondary: #ecede5;
-    --secondary-foreground: #626b65;
-    --muted: #ecede5;
-    --muted-foreground: #626b65;
-    --accent: #e1eeea;
-    --accent-foreground: #17685f;
-    --destructive: #b43c48;
-    --destructive-foreground: #fffdf7;
-    --border: #d8d8cc;
-    --input: #7c877d;
-    --ring: #17685f;
-    --review-added: #eff3e2;
-    --review-added-foreground: #4d6b24;
-    --review-added-border: #82945e;
-    --review-removed: #fcecef;
-    --review-removed-foreground: #b43c48;
-    --review-removed-border: #c88791;
-    --review-modified: #fff1d9;
-    --review-modified-foreground: #915b13;
-    --review-modified-border: #b99157;
-    --review-count-added: #4d6b24;
-    --review-count-removed: #b43c48;
-    --review-count-modified: #915b13;
-    --review-insert: #dce7c5;
-    --review-delete: #fae2e7;
-    --review-overlay: #191f1d80;
-    --review-shadow-color: #191f1d26;
-    --annotation-foreground: #75470e;
-    --annotation-background: #fff1d9;
-    --annotation-active: #f5d6a3;
-    --annotation-border: #915b13;
-    --annotation-tint: #915b131a;
-    --annotation-active-tint: #915b132e;
-    --halo-light: #fffdf7;
-    --halo-dark: #191f1d;
-  }
-
-  :root[data-theme="dark"], :root[data-theme="dark"].review-ui, :root[data-theme="dark"] .review-ui {
-    color-scheme: dark;
-    --background: #191f1d;
-    --foreground: #eeefe6;
-    --card: #222a26;
-    --card-foreground: #eeefe6;
-    --popover: #222a26;
-    --popover-foreground: #eeefe6;
-    --primary: #85c7b8;
-    --primary-foreground: #102f29;
-    --secondary: #303a33;
-    --secondary-foreground: #afb9af;
-    --muted: #303a33;
-    --muted-foreground: #afb9af;
-    --accent: #293f37;
-    --accent-foreground: #85c7b8;
-    --destructive: #f2a2ab;
-    --destructive-foreground: #40272c;
-    --border: #3c4841;
-    --input: #77877b;
-    --ring: #85c7b8;
-    --review-added: #2b3522;
-    --review-added-foreground: #bbcd87;
-    --review-added-border: #6f8347;
-    --review-removed: #40272c;
-    --review-removed-foreground: #f2a2ab;
-    --review-removed-border: #a96572;
-    --review-modified: #3d3020;
-    --review-modified-foreground: #e7bb72;
-    --review-modified-border: #9c7a46;
-    --review-count-added: #bbcd87;
-    --review-count-removed: #f2a2ab;
-    --review-count-modified: #e7bb72;
-    --review-insert: #3e4d2d;
-    --review-delete: #633944;
-    --review-overlay: #191f1db3;
-    --review-shadow-color: #0006;
-    --annotation-foreground: #f1cc8e;
-    --annotation-background: #3d3020;
-    --annotation-active: #594325;
-    --annotation-border: #e7bb72;
-    --annotation-tint: #e7bb721a;
-    --annotation-active-tint: #e7bb722e;
-    --halo-light: #fffdf7;
-    --halo-dark: #191f1d;
-  }
-
-  :root, .review-ui {
-    --canvas: var(--background);
-    --panel: var(--card);
-    --card-border: var(--border);
-    --hair: var(--border);
-    --hair-2: var(--border);
-    --dash: var(--border);
-    --strong-border: var(--input);
-    --txt: var(--foreground);
-    --strong-txt: var(--foreground);
-    --mute: var(--muted-foreground);
-    --mute-2: var(--muted-foreground);
-    --faint: var(--muted-foreground);
-    --faint-2: var(--muted-foreground);
-    --soft: var(--muted);
-    --chip: var(--secondary);
-    --input-bg: var(--card);
-    --focus: var(--ring);
-    --danger: var(--destructive);
-    --danger-soft: var(--review-removed);
-    --amber: var(--annotation-border);
-    --green: var(--review-added-foreground);
-    --btn-bg: var(--primary);
-    --btn-fg: var(--primary-foreground);
-    --diff-paper: var(--card);
-    --diff-ink: var(--foreground);
-    --diff-muted: var(--muted-foreground);
-    --diff-line: var(--border);
-    --diff-removed: var(--review-removed);
-    --diff-added: var(--review-added);
-    --diff-delete: var(--review-delete);
-    --diff-insert: var(--review-insert);
-    --diff-delete-ink: var(--review-removed-foreground);
-    --diff-insert-ink: var(--review-added-foreground);
-    --diff-gap: var(--muted);
-    --diff-accent: var(--review-modified-foreground);
-    --focus-ring: 0 0 0 3px var(--ring);
-    --review-shadow: 0 8px 24px var(--review-shadow-color), 0 1px 3px var(--review-shadow-color);
+@layer theme {
+  :root, :host {
+    --spacing: .25rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --tracking-tight: -.025em;
+    --leading-relaxed: 1.625;
+    --radius-md: var(--radius);
+    --radius-4xl: 2rem;
+    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
+}
+
+@layer base {
+  .review-ui {
+    font-family: var(--review-font-sans);
+    font-size: var(--review-text-sm);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+  }
+
+  :root.review-ui {
+    font-size: 100%;
+  }
+
+  .review-ui :where(*) {
+    box-sizing: border-box;
+    border: 0 solid var(--border);
+  }
+
+  .review-ui :where(button, input, select, textarea) {
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+
+  .review-ui :where(button) {
+    cursor: pointer;
+    background-color: #0000;
+  }
+
+  .review-ui :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
+    cursor: not-allowed;
+  }
+
+  .review-ui :where(svg) {
+    flex-shrink: 0;
+    display: block;
+  }
+
+  .review-ui :where([hidden]) {
+    display: none !important;
+  }
+
+  .review-ui :where(h1, h2, h3, p) {
+    margin: 0;
+  }
+
+  .review-ui :where(a) {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  .review-ui :where(a[href]) {
+    color: var(--primary);
+    text-underline-offset: .15em;
+    text-decoration: underline;
   }
 
   :root {
     --toolbar-h: 48px;
-    --drawer-w: 380px;
-    --narrow: 720px;
-    --overlay: 60;
   }
 
   * {
@@ -227,35 +171,14 @@
   }
 
   body {
-    background: var(--canvas);
-    color: var(--txt);
+    background: var(--background);
+    color: var(--foreground);
+    font: 13px/1.5 var(--review-font-sans);
     -webkit-font-smoothing: antialiased;
-    font: 13px / 1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, sans-serif;
-  }
-
-  button, textarea {
-    font: inherit;
-    color: inherit;
-  }
-
-  button:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
-    box-shadow: var(--focus-ring);
-    outline: none;
-  }
-
-  .app {
-    grid-template-rows: auto minmax(0, 1fr);
-    height: 100dvh;
-    display: grid;
-  }
-
-  .icon {
-    flex: none;
-    display: block;
   }
 
   .sr-only {
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border: 0;
     width: 1px;
@@ -265,2316 +188,335 @@
     position: absolute;
     overflow: hidden;
   }
+}
 
-  .toolbar {
-    z-index: 20;
-    border-bottom: 1px solid var(--hair);
-    align-items: center;
-    display: grid;
-    position: relative;
+@layer components {
+  .comparison-host {
+    background: var(--background);
+    color: var(--foreground);
   }
 
-  .document-trust {
-    flex: none;
-    grid-area: scripts;
-    align-items: center;
-    gap: 2px;
-    display: flex;
+  .comparison-host .comparison-surface {
+    border: 1px solid var(--border);
+    border-radius: 0 0 var(--radius) var(--radius);
+    background: var(--card);
+    color: var(--foreground);
+    overflow-wrap: anywhere;
   }
 
-  .script-switch {
-    cursor: pointer;
-    background: none;
-    border: 1px solid #0000;
-    border-radius: 8px;
-    align-items: center;
-    gap: 8px;
-    height: 44px;
-    padding: 5px 8px;
-    font-weight: 550;
-    display: flex;
+  .comparison-host .comparison-headings, .comparison-host .comparison-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: grid;
   }
 
-  .script-switch:hover:not([aria-disabled="true"]) {
-    background: var(--soft);
-    border-color: var(--hair);
+  .comparison-host .comparison-headings {
+    border-bottom: 1px solid var(--border);
+    background: var(--muted);
+    color: var(--muted-foreground);
+    font-size: 12px;
+    font-weight: 600;
   }
 
-  .script-switch:focus-visible, .script-retry:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 2px;
+  .comparison-host .comparison-headings > div {
+    padding: 12px 18px;
   }
 
-  .script-switch[aria-disabled="true"] {
-    cursor: wait;
+  .comparison-host .comparison-headings > div + div, .comparison-host .comparison-after {
+    border-left: 1px solid var(--border);
   }
 
-  .script-switch-value {
-    text-align: center;
-    width: 20px;
-    color: var(--mute-2);
-    flex: none;
-    font-size: 11px;
-    font-weight: 400;
+  .comparison-host .comparison-row + .comparison-row {
+    border-top: 1px solid var(--border);
   }
 
-  .script-switch-label {
-    white-space: nowrap;
+  .comparison-host .comparison-cell {
+    min-width: 0;
+    padding: 16px 20px 16px 0;
+    display: flex;
   }
 
-  .script-switch-short-label {
-    display: none;
+  .comparison-host .comparison-cell-body {
+    flex: 1;
+    min-width: 0;
   }
 
-  .script-switch-track {
-    border: 1px solid var(--mute-2);
-    background: var(--soft);
-    border-radius: 20px;
-    flex: none;
-    width: 30px;
-    height: 18px;
-    position: relative;
+  .comparison-host .comparison-gutter {
+    text-align: center;
+    font: 12px/1.6 var(--review-font-mono);
+    color: var(--muted-foreground);
+    -webkit-user-select: none;
+    user-select: none;
+    flex: 0 0 32px;
+    padding-top: 2px;
   }
 
-  .script-switch-track:after {
-    content: "";
-    background: var(--mute-2);
-    border-radius: 50%;
-    width: 10px;
-    height: 10px;
-    transition: transform .12s;
-    position: absolute;
-    top: 3px;
-    left: 3px;
+  .comparison-host .comparison-block {
+    min-width: 0;
+    font: 15px/1.7 var(--review-font-sans);
+    color: var(--foreground);
   }
 
-  .script-switch[aria-checked="true"] .script-switch-track {
-    background: var(--btn-bg);
-    border-color: var(--btn-bg);
+  .comparison-host .comparison-block :is(p, h1, h2, h3, h4, h5, h6, pre, ul, ol, figure, blockquote) {
+    margin: 0;
   }
 
-  .script-switch[aria-checked="true"] .script-switch-track:after {
-    background: var(--btn-fg);
-    transform: translateX(12px);
+  .comparison-host .comparison-block h1 {
+    letter-spacing: -.5px;
+    font-size: 25px;
+    line-height: 1.3;
   }
 
-  .script-help, .script-status, .script-error {
-    color: var(--mute-2);
-    overflow-wrap: anywhere;
-    margin: 0;
-    padding: 0;
+  .comparison-host .comparison-block h2 {
+    letter-spacing: -.3px;
+    font-size: 21px;
+    line-height: 1.4;
   }
 
-  .script-status {
-    color: var(--txt);
+  .comparison-host .comparison-block h3 {
+    font-size: 18px;
+    line-height: 1.4;
   }
 
-  .script-error {
-    color: var(--danger);
+  .comparison-host .comparison-block :is(h4, h5, h6) {
+    font-size: 16px;
+    line-height: 1.5;
   }
 
-  .script-retry {
-    cursor: pointer;
-    background: none;
-    border: 0;
-    flex: none;
-    height: 24px;
-    padding: 0;
-    font-size: 11px;
-    text-decoration: underline;
+  .comparison-host .comparison-block pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font: 12px/1.7 var(--review-font-mono);
+    tab-size: 4;
   }
 
-  .script-details {
-    flex: none;
+  .comparison-host .comparison-block blockquote {
+    border-left: 3px solid var(--input);
+    color: var(--muted-foreground);
+    padding-left: 12px;
   }
 
-  .script-details summary {
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    color: var(--mute-2);
-    border-radius: 50%;
-    place-items: center;
-    font-size: 12px;
-    list-style: none;
-    display: grid;
+  .comparison-host .comparison-block :is(code, kbd, samp) {
+    font-family: var(--review-font-mono);
+    background: var(--muted);
+    border-radius: 3px;
+    padding: 1px 3px;
+    font-size: .9em;
   }
 
-  .script-details summary::-webkit-details-marker {
-    display: none;
+  .comparison-host .comparison-block hr {
+    border-top: 1px solid var(--border);
+    margin: 12px 0;
   }
 
-  .script-details summary:hover {
-    background: var(--soft);
+  .comparison-host .comparison-block mark {
+    background: var(--review-modified);
+    color: var(--review-modified-foreground);
   }
 
-  .script-details summary:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: 1px;
+  .comparison-host .comparison-removed {
+    background: var(--review-removed);
   }
 
-  .script-details-body {
-    border: 1px solid var(--strong-border);
-    background: var(--panel);
-    width: min(380px, 100vw - 16px);
-    max-height: min(300px, 50vh);
-    box-shadow: var(--review-shadow);
-    color: var(--txt);
-    border-radius: 8px;
-    padding: 12px 16px;
-    font-size: 12px;
-    line-height: 1.5;
-    position: absolute;
-    top: calc(100% + 4px);
-    right: 8px;
-    overflow: auto;
+  .comparison-host .comparison-added {
+    background: var(--review-added);
   }
 
-  .script-details-body p {
-    overflow-wrap: anywhere;
-    margin: 0 0 8px;
+  .comparison-host .comparison-gap {
+    background: repeating-linear-gradient(135deg, var(--card) 0, var(--card) 5px, var(--muted) 5px, var(--muted) 7px);
   }
 
-  .script-details-body p:last-child {
-    margin-bottom: 0;
+  .comparison-host .comparison-surface del {
+    background: var(--review-delete);
+    text-decoration: line-through;
+    -webkit-text-decoration-color: var(--review-removed-foreground);
+    -webkit-text-decoration-color: var(--review-removed-foreground);
+    text-decoration-color: var(--review-removed-foreground);
+    border-radius: 2px;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .script-switch-track:after {
-      transition: none;
-    }
+  .comparison-host .comparison-surface ins {
+    background: var(--review-insert);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    -webkit-text-decoration-color: var(--review-added-foreground);
+    -webkit-text-decoration-color: var(--review-added-foreground);
+    text-decoration-color: var(--review-added-foreground);
+    text-underline-offset: 3px;
+    border-radius: 2px;
   }
 
-  .stage {
-    background: var(--canvas);
-    min-width: 0;
-    min-height: 0;
-    position: relative;
+  .comparison-host .comparison-current {
+    scroll-margin-top: var(--comparison-header-height, 0px);
   }
 
-  .history-panel {
-    z-index: 1;
-    background: var(--panel);
-    scrollbar-gutter: stable;
-    height: 100%;
-    padding: 18px clamp(12px, 2vw, 28px) 28px;
-    position: absolute;
-    inset: 0;
-    overflow: auto;
+  .comparison-host .comparison-current > .comparison-before {
+    box-shadow: inset 3px 0 var(--ring);
   }
 
-  .history-head, .history-controls, .history-navigation {
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    display: flex;
+  .comparison-host .comparison-mobile-label {
+    display: none;
   }
 
-  .history-head h1 {
-    letter-spacing: -.5px;
-    margin: 0;
-    font-size: 20px;
+  .comparison-host .comparison-change-label {
+    color: var(--muted-foreground);
+    margin-bottom: 6px;
+    font-size: 11px;
+    display: block;
   }
 
-  .history-head h1 .section {
-    vertical-align: middle;
-    letter-spacing: .04em;
-    margin-left: 10px;
+  .comparison-host .comparison-notice, .comparison-host .comparison-budget {
+    color: var(--muted-foreground);
+    margin: 0;
+    padding: 14px 18px;
+    font-size: 12px;
   }
 
-  .history-summary {
-    color: var(--mute-2);
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: 4px 16px;
-    margin: 8px 0 14px;
-    font-size: 12px;
-    display: flex;
+  .comparison-host .comparison-budget {
+    color: var(--destructive);
   }
 
-  .history-summary > p {
+  .comparison-host .comparison-block :is(.metadata-note, .structure-note, .newline-note) {
+    font: 12px/1.5 var(--review-font-sans);
+    color: var(--muted-foreground);
     overflow-wrap: anywhere;
-    margin: 0;
+    margin-top: 5px;
+    display: block;
   }
 
-  .history-summary > :empty {
-    display: none;
+  .comparison-host .saved-link {
+    color: var(--primary);
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
 
-  .history-panel label {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    display: flex;
-  }
-
-  .history-panel select {
-    border: 1px solid var(--strong-border);
-    background: var(--card);
-    min-width: 0;
-    max-width: 100%;
-    min-height: 44px;
-    color: var(--txt);
-    font: inherit;
-    text-overflow: ellipsis;
-    border-radius: 7px;
-    padding: 8px 10px;
-  }
-
-  .history-panel select:focus-visible {
-    outline: 2px solid var(--focus);
-  }
-
-  .history-controls {
-    justify-content: flex-start;
-    gap: 8px 16px;
-    margin: 0;
-  }
-
-  .history-controls > label {
-    color: var(--mute-2);
-    flex-wrap: nowrap;
-    font-size: 12px;
-  }
-
-  .history-round-label select {
-    max-width: min(280px, 65vw);
-  }
-
-  #historyTargetLabel {
-    flex: 200px;
-  }
-
-  #historyTarget {
-    width: 100%;
-  }
-
-  .history-controls button {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  .history-controls [aria-pressed="true"] {
-    background: var(--soft);
-    color: var(--strong-txt);
-  }
-
-  .history-controls button:disabled {
-    opacity: .55;
-    cursor: default;
-  }
-
-  .history-counts {
-    color: var(--mute-2);
-    flex-wrap: wrap;
-    gap: 16px;
-    margin: 0;
-    display: flex;
-  }
-
-  .history-timing {
-    flex-wrap: wrap;
-    gap: 12px 24px;
-    margin: 14px 0;
-    display: flex;
-  }
-
-  .history-timing > div {
-    min-width: 0;
-  }
-
-  .history-timing dt {
-    text-transform: uppercase;
-    color: var(--mute-2);
-    letter-spacing: .04em;
-    font-size: 11px;
-  }
-
-  .history-timing dd {
-    overflow-wrap: anywhere;
-    margin: 2px 0 0;
-    font-weight: 550;
-  }
-
-  .history-context {
-    color: var(--mute-2);
-    overflow-wrap: anywhere;
-  }
-
-  .history-context p {
-    margin: 6px 0;
-  }
-
-  .history-diagnostics {
-    color: var(--mute-2);
-    margin: 12px 0 0;
-    font-size: 12px;
-  }
-
-  .history-diagnostics summary {
-    cursor: pointer;
-    width: fit-content;
-    min-height: 44px;
-    padding-block: 12px;
-  }
-
-  .history-diagnostics > p {
-    max-width: 90ch;
-  }
-
-  .history-diagnostics > button {
-    min-height: 44px;
-  }
-
-  .change-detail {
-    border: 1px solid var(--diff-line);
-    background: var(--card);
-    overflow-wrap: anywhere;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .change-detail:empty {
-    display: none;
-  }
-
-  .comparison-header {
-    z-index: 4;
-    background: var(--panel);
-    position: sticky;
-    top: 0;
-  }
-
-  .history-navigation {
-    background: var(--panel);
-    justify-content: flex-start;
-    gap: 8px;
-    margin: 0;
-    padding: 0 0 8px;
-    font-size: 12px;
-  }
-
-  .history-navigation button {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  .history-navigation .change-jump-label {
-    flex: 1;
-    justify-content: flex-end;
-  }
-
-  .change-jump-label select {
-    max-width: min(420px, 100%);
-  }
-
-  .comparison-headings, .comparison-row {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    display: grid;
-  }
-
-  .comparison-headings {
-    background: var(--soft);
-    border: 1px solid var(--diff-line);
-    color: var(--diff-muted);
-    border-radius: 8px 8px 0 0;
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  .comparison-headings > div {
-    padding: 12px 18px;
-  }
-
-  .comparison-headings > div + div, .comparison-after {
-    border-left: 1px solid var(--diff-line);
-  }
-
-  .comparison-row + .comparison-row {
-    border-top: 1px solid var(--hair-2);
-  }
-
-  .comparison-cell {
-    min-width: 0;
-    padding: 16px 20px 16px 0;
-    display: flex;
-  }
-
-  .comparison-cell-body {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .comparison-gutter {
-    text-align: center;
-    color: var(--diff-muted);
-    -webkit-user-select: none;
-    user-select: none;
-    flex: 0 0 32px;
-    padding-top: 2px;
-    font: 12px / 1.6 ui-monospace, monospace;
-  }
-
-  .comparison-block {
-    min-width: 0;
-    color: var(--diff-ink);
-    font: 15px / 1.7 system-ui, sans-serif;
-  }
-
-  .comparison-block :is(p, h1, h2, h3, h4, h5, h6, pre, ul, ol, figure, blockquote) {
-    margin: 0;
-  }
-
-  .comparison-block h1 {
-    letter-spacing: -.5px;
-    font-size: 25px;
-    line-height: 1.3;
-  }
-
-  .comparison-block h2 {
-    letter-spacing: -.3px;
-    font-size: 21px;
-    line-height: 1.4;
-  }
-
-  .comparison-block h3 {
-    font-size: 18px;
-    line-height: 1.4;
-  }
-
-  .comparison-block :is(h4, h5, h6) {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-
-  .comparison-block pre {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    tab-size: 4;
-    font: 12px / 1.7 ui-monospace, monospace;
-  }
-
-  .comparison-block blockquote {
-    border-left: 3px solid var(--strong-border);
-    color: var(--diff-muted);
-    padding-left: 12px;
-  }
-
-  .comparison-block :is(code, kbd, samp) {
-    background: var(--soft);
-    border-radius: 3px;
-    padding: 1px 3px;
-    font-family: ui-monospace, monospace;
-    font-size: .9em;
-  }
-
-  .comparison-removed {
-    background: var(--diff-removed);
-  }
-
-  .comparison-added {
-    background: var(--diff-added);
-  }
-
-  .comparison-gap {
-    background: repeating-linear-gradient(135deg, var(--diff-paper) 0, var(--diff-paper) 5px, var(--diff-gap) 5px, var(--diff-gap) 7px);
-  }
-
-  .comparison-surface {
-    background: var(--diff-paper);
-    color: var(--diff-ink);
-  }
-
-  .comparison-surface del {
-    background: var(--diff-delete);
-    text-decoration: line-through;
-    -webkit-text-decoration-color: var(--diff-delete-ink);
-    -webkit-text-decoration-color: var(--diff-delete-ink);
-    text-decoration-color: var(--diff-delete-ink);
-    border-radius: 2px;
-  }
-
-  .comparison-surface ins {
-    background: var(--diff-insert);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    -webkit-text-decoration-color: var(--diff-insert-ink);
-    -webkit-text-decoration-color: var(--diff-insert-ink);
-    text-decoration-color: var(--diff-insert-ink);
-    text-underline-offset: 3px;
-    border-radius: 2px;
-  }
-
-  .comparison-current > .comparison-before {
-    box-shadow: inset 3px 0 var(--diff-accent);
-  }
-
-  .comparison-mobile-label {
-    display: none;
-  }
-
-  .comparison-change-label {
-    color: var(--diff-muted);
-    margin-bottom: 6px;
-    font-size: 11px;
-    display: block;
-  }
-
-  .comparison-expand {
-    border: 0;
-    border-block: 1px solid var(--diff-line);
-    background: var(--soft);
-    width: 100%;
-    min-height: 44px;
-    color: var(--diff-muted);
-    cursor: pointer;
-    text-align: center;
-    padding: 10px 16px;
-    font: 12px / 1.5 system-ui, sans-serif;
-    display: block;
-  }
-
-  .comparison-expand:hover {
-    background: var(--chip);
-    color: var(--strong-txt);
-  }
-
-  .comparison-surface :focus-visible, .history-panel summary:focus-visible {
-    outline: 2px solid var(--focus);
-    outline-offset: -2px;
-  }
-
-  .comparison-notice, .comparison-budget {
-    color: var(--diff-muted);
-    margin: 0;
-    padding: 14px 18px;
-    font-size: 12px;
-  }
-
-  .comparison-budget {
-    color: var(--danger);
-  }
-
-  .comparison-block .metadata-note, .comparison-block .structure-note, .comparison-block .newline-note {
-    color: var(--diff-muted);
-    overflow-wrap: anywhere;
-    margin-top: 5px;
-    font: 12px / 1.5 system-ui, sans-serif;
-    display: block;
-  }
-
-  .saved-link {
-    color: var(--diff-accent);
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-
-  .saved-image {
-    border: 1px dashed var(--diff-muted);
-    background: var(--diff-gap);
-    border-radius: 5px;
-    padding: 12px;
-  }
-
-  .saved-image small {
-    color: var(--diff-muted);
-    font-size: 12px;
-    display: block;
-  }
-
-  .saved-list {
-    padding-inline-start: 22px;
-  }
-
-  .saved-table {
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  .saved-table :is(th, td) {
-    border: 1px solid var(--diff-line);
-    text-align: left;
-    vertical-align: top;
-    padding: 7px 10px;
-  }
-
-  .saved-table th {
-    background: var(--soft);
-  }
-
-  .saved-table .comparison-block {
-    font-size: 13px;
-  }
-
-  .comparison-source .comparison-cell {
-    padding-block: 0;
-    padding-right: 8px;
-  }
-
-  .comparison-source .comparison-change-label {
-    display: none;
-  }
-
-  .comparison-source .comparison-gutter {
-    text-align: right;
-    white-space: pre;
-    flex-basis: 60px;
-    padding: 0 12px 0 4px;
-  }
-
-  .comparison-source .comparison-block pre {
-    min-height: 22px;
-    line-height: 22px;
-  }
-
-  .comparison-source .comparison-block .newline-note {
-    margin: 0;
-    padding: 3px 0;
-  }
-
-  .capture-warning {
-    border: 1px solid var(--strong-border);
-    background: var(--panel);
-    overflow-wrap: anywhere;
-    border-radius: 8px;
-    padding: 12px;
-  }
-
-  .capture-warning p {
-    margin: 0 0 8px;
-  }
-
-  body.comparing :is(#compose, #alignedCard) {
-    display: none !important;
-  }
-
-  body.comparing #frame {
-    pointer-events: none;
-  }
-
-  @media (max-width: 540px) {
-    .history-panel {
-      padding: 12px 8px;
-    }
-
-    .history-head {
-      align-items: flex-start;
-    }
-  }
-
-  @media (max-width: 700px) {
-    .comparison-headings {
-      display: none;
-    }
-
-    .change-detail {
-      border-radius: 8px;
-    }
-
-    .comparison-row {
-      border-bottom: 1px solid var(--diff-line);
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .comparison-after {
-      border-left: 0;
-      border-top: 1px solid var(--diff-line);
-    }
-
-    .comparison-gap, .comparison-unchanged > .comparison-after {
-      display: none;
-    }
-
-    .comparison-cell {
-      padding-right: 10px;
-    }
-
-    .comparison-mobile-label {
-      color: var(--diff-muted);
-      margin-bottom: 8px;
-      font: 600 12px / 1.6 system-ui, sans-serif;
-      display: block;
-    }
-
-    .comparison-change-label {
-      display: none;
-    }
-
-    .comparison-current > .comparison-after {
-      box-shadow: inset 3px 0 var(--diff-accent);
-    }
-
-    .comparison-block {
-      font-size: 14px;
-    }
-
-    .comparison-source .comparison-gutter {
-      flex-basis: 48px;
-    }
-
-    .history-navigation {
-      flex-wrap: nowrap;
-    }
-
-    .history-navigation .change-jump-label {
-      flex: 1;
-    }
-
-    .change-jump-label > span {
-      display: none;
-    }
-
-    .change-jump-label select {
-      width: 100%;
-      max-width: 100%;
-    }
-
-    .history-navigation button {
-      flex: 0 0 44px;
-      width: 44px;
-      padding: 4px;
-      font-size: 0;
-    }
-
-    .history-navigation button:before {
-      font-size: 18px;
-    }
-
-    #previousChange:before {
-      content: "←";
-    }
-
-    #nextChange:before {
-      content: "→";
-    }
-
-    #changePosition {
-      white-space: nowrap;
-    }
-  }
-
-  #frame {
-    background: #fff;
-    border: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  #frame[data-replacing] {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  #previousFrame {
-    z-index: 1;
-    pointer-events: none;
-    border: 0;
-    width: 100%;
-    height: 100%;
-    display: block;
-    position: absolute;
-    inset: 0;
-  }
-
-  .icon-btn {
-    border: 1px solid var(--hair);
-    background: var(--soft);
-    width: 30px;
-    height: 30px;
-    color: var(--mute-2);
-    cursor: pointer;
-    border-radius: 7px;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    display: inline-flex;
-  }
-
-  .icon-btn:hover {
-    border-color: var(--strong-border);
-    color: var(--strong-txt);
-  }
-
-  .contextual-compose {
-    z-index: 90;
-    border: 1px solid var(--strong-border);
-    background: var(--card);
-    width: min(340px, 100vw - 24px);
-    box-shadow: 0 16px 44px var(--review-shadow-color);
-    max-height: calc(100dvh - var(--toolbar-h) - 12px);
-    border-radius: 10px;
-    padding: 14px;
-    animation: .13s ease-out rise;
-    position: fixed;
-    overflow-y: auto;
-  }
-
-  .contextual-compose.sheet {
-    width: 100%;
-    max-height: min(70dvh, 420px);
-    padding-bottom: max(14px, env(safe-area-inset-bottom));
-    border-radius: 14px 14px 0 0;
-    bottom: 0;
-    right: 0;
-    top: auto !important;
-    left: 0 !important;
-  }
-
-  .contextual-compose.edge-top, .contextual-compose.edge-bottom {
-    border-color: var(--focus);
-  }
-
-  .contextual-compose.pass-through {
-    pointer-events: none;
-    opacity: .92;
-  }
-
-  .compose-head {
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-    display: flex;
-  }
-
-  .compose-head > div {
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  .compose-head strong {
-    font-size: 13px;
-  }
-
-  .chip {
-    background: var(--chip);
-    color: var(--mute);
-    border-radius: 999px;
-    padding: 2px 8px;
-    font-size: 10px;
-    font-weight: 600;
-  }
-
-  .compose-direction {
-    background: var(--soft);
-    color: var(--mute-2);
-    border-radius: 6px;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    margin: -2px 0 9px;
-    padding: 7px 9px;
-    font-size: 11.5px;
-    display: flex;
-  }
-
-  .link-action {
-    color: var(--focus);
-    font: inherit;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    flex: none;
-    padding: 0;
-    font-weight: 600;
-  }
-
-  .compose-help {
-    color: var(--faint-2);
-    justify-content: space-between;
-    gap: 10px;
-    margin: 5px 1px 0;
-    font-size: 10.5px;
-    display: flex;
-  }
-
-  .quote {
-    border-left: 2px solid var(--annotation-border);
-    color: var(--mute);
-    white-space: normal;
-    overflow-wrap: anywhere;
-    margin: 0 0 10px;
-    padding-left: 9px;
-    font-size: 12px;
-    font-style: italic;
-    line-height: 1.45;
-  }
-
-  .contextual-compose textarea, .send-section textarea {
-    border: 1px solid var(--hair);
-    background: var(--input-bg);
-    resize: vertical;
-    border-radius: 6px;
-    outline: none;
-    width: 100%;
-    padding: 8px 10px;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .contextual-compose textarea:focus, .send-section textarea:focus {
-    border-color: var(--focus);
-    background: var(--card);
-  }
-
-  .compose-actions {
-    align-items: center;
-    gap: 8px;
-    margin-top: 9px;
-    display: flex;
-  }
-
-  .compose-error {
-    color: var(--danger);
-    margin: 8px 0 0;
-    font-size: 11.5px;
-  }
-
-  .btn-primary, .btn-ghost {
-    cursor: pointer;
-    border-radius: 6px;
-    justify-content: center;
-    align-items: center;
-    gap: 7px;
-    min-height: 32px;
-    padding: 6px 11px;
-    font-size: 12px;
-    font-weight: 500;
-    display: inline-flex;
-  }
-
-  .btn-primary {
-    border: 1px solid var(--btn-bg);
-    background: var(--btn-bg);
-    color: var(--btn-fg);
-  }
-
-  .btn-primary:disabled {
-    opacity: .55;
-    cursor: wait;
-  }
-
-  .btn-ghost {
-    color: var(--mute);
-    background: none;
-    border: 0;
-  }
-
-  .btn-ghost:hover {
-    background: var(--soft);
-    color: var(--strong-txt);
-  }
-
-  .aligned-card {
-    z-index: 55;
-    width: 300px;
-    max-height: min(280px, calc(100dvh - var(--toolbar-h) - 24px));
-    border: 1px solid var(--strong-border);
-    background: var(--card);
-    box-shadow: 0 10px 30px var(--review-shadow-color);
-    border-radius: 9px;
-    padding: 13px 14px;
-    position: fixed;
-    overflow: auto;
-  }
-
-  .drawer {
-    z-index: 75;
-    top: var(--toolbar-h);
-    width: min(var(--drawer-w), calc(100vw - 32px));
-    border-left: 1px solid var(--hair);
-    background: var(--panel);
-    box-shadow: -12px 0 34px var(--review-shadow-color);
-    visibility: hidden;
-    grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
-    transition: transform .16s ease-out, visibility 0s linear .16s;
-    display: grid;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    transform: translateX(102%);
-  }
-
-  .drawer.open {
-    visibility: visible;
-    transition-delay: 0s;
-    transform: none;
-  }
-
-  .drawer-inventory {
-    min-width: 0;
-    min-height: 0;
-    padding: 14px 12px 18px;
-    overflow: hidden auto;
-  }
-
-  .drawer-backdrop {
-    z-index: 70;
-    inset: var(--toolbar-h) 0 0;
-    background: var(--review-overlay);
-    position: fixed;
-  }
-
-  .rail-head {
-    align-items: baseline;
-    gap: 7px;
-    padding: 0 4px 9px;
-    display: flex;
-  }
-
-  .rail-head.tight {
-    padding-top: 0;
-  }
-
-  .section {
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    color: var(--mute);
-    font-size: 11px;
-    font-weight: 600;
-  }
-
-  .dim {
-    color: var(--faint);
-    font-size: 11px;
-  }
-
-  .link-btn {
-    color: var(--faint-2);
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin-left: auto;
-    padding: 0;
-    font-size: 11px;
-  }
-
-  .link-btn:hover {
-    color: var(--strong-txt);
-  }
-
-  .danger-hover:hover {
-    color: var(--danger);
-  }
-
-  .aligned-card {
-    color: var(--txt);
-  }
-
-  .comment-head {
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 8px;
-    display: flex;
-  }
-
-  .comment-head .who {
-    margin-right: auto;
-  }
-
-  .who {
-    color: var(--mute-2);
-    font-size: 11px;
-    font-weight: 500;
-  }
-
-  .who .sep {
-    color: var(--faint);
-    margin: 0 4px;
-  }
-
-  .who .when {
-    color: var(--faint-2);
-  }
-
-  .jump {
-    color: var(--faint-2);
-    white-space: nowrap;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    margin-left: auto;
-    padding: 0;
-    font-size: 11px;
-  }
-
-  .jump:hover {
-    color: var(--strong-txt);
-  }
-
-  .edit-comment {
-    margin-left: 0;
-  }
-
-  .remove {
-    color: var(--faint);
-    cursor: pointer;
-    background: none;
-    border: 0;
-    border-radius: 4px;
-    margin-left: 0;
-    padding: 3px;
-  }
-
-  .remove:hover {
-    background: var(--danger-soft);
-    color: var(--danger);
-  }
-
-  .aligned-card .quote {
-    margin-bottom: 8px;
-  }
-
-  .aligned-card .body {
-    cursor: text;
-    white-space: pre-wrap;
-    border-radius: 4px;
-    margin: 0;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .card-action {
-    color: var(--faint-2);
-    font: inherit;
-    cursor: pointer;
-    white-space: nowrap;
-    background: none;
-    border: 0;
-    border-radius: 4px;
-    flex: none;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 4px;
-    font-size: 11px;
-    display: inline-flex;
-  }
-
-  .card-action:hover, .card-action:focus-visible, .more-trigger[aria-expanded="true"] {
-    background: var(--soft);
-    color: var(--strong-txt);
-  }
-
-  .comment-menu {
-    z-index: 3;
-    border: 1px solid var(--strong-border);
-    background: var(--card);
-    min-width: 132px;
-    box-shadow: var(--review-shadow);
-    border-radius: 7px;
-    padding: 4px;
-    position: absolute;
-    top: 38px;
-    right: 12px;
-  }
-
-  .aligned-card .comment-menu {
-    top: 38px;
-    right: 12px;
-  }
-
-  .comment-menu-item {
-    width: 100%;
-    color: var(--danger);
-    font: inherit;
-    text-align: left;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    border-radius: 5px;
-    align-items: center;
-    gap: 7px;
-    padding: 7px 8px;
-    font-size: 12px;
-    display: flex;
-  }
-
-  .comment-menu-item:hover, .comment-menu-item:focus-visible {
-    background: var(--danger-soft);
-    outline: none;
-  }
-
-  .body-edit {
-    border: 1px solid var(--focus);
-    background: var(--card);
-    width: 100%;
-    color: var(--txt);
-    resize: vertical;
-    border-radius: 6px;
-    outline: none;
-    padding: 6px 8px;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-
-  .body-edit[readonly] {
-    opacity: .75;
-  }
-
-  .edit-help {
-    color: var(--faint-2);
-    margin: 5px 0 0;
-    font-size: 10.5px;
-  }
-
-  .comment-edit-actions, .delete-actions {
-    align-items: center;
-    gap: 7px;
-    margin-top: 8px;
-    display: flex;
-  }
-
-  .comment-validation {
-    color: var(--danger);
-    margin: 6px 0 0;
-    font-size: 11.5px;
-  }
-
-  .delete-prompt {
-    margin: 2px 0 0;
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .btn-danger {
-    border: 1px solid var(--danger);
-    background: var(--danger);
-    min-height: 32px;
-    color: var(--destructive-foreground);
-    cursor: pointer;
-    border-radius: 6px;
-    padding: 6px 11px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  .btn-danger:disabled, .comment-edit-actions button:disabled, .delete-actions button:disabled {
-    opacity: .55;
-    cursor: wait;
-  }
-
-  .badge {
-    background: var(--chip);
-    color: var(--faint-2);
-    border-radius: 999px;
-    margin-left: 6px;
-    padding: 1px 7px;
-    font-size: 10px;
-    font-weight: 600;
-    display: inline-block;
-  }
-
-  .badge.correction {
-    background: var(--danger-soft);
-    color: var(--danger);
-  }
-
-  #othersBox, #editsBox {
-    margin-top: 20px;
-  }
-
-  .save-line {
-    color: var(--faint-2);
-    align-items: center;
-    gap: 7px;
-    padding: 0 4px 9px;
-    font-size: 11px;
-    display: flex;
-  }
-
-  .save-line.failed {
-    color: var(--danger);
-  }
-
-  .save-line.dynamic {
-    color: var(--mute);
-  }
-
-  .dot {
-    background: var(--green);
-    border-radius: 50%;
-    flex: none;
-    width: 6px;
-    height: 6px;
-  }
-
-  .save-line.saving .dot, .save-line.dynamic .dot, .dot.amber {
-    background: var(--amber);
-  }
-
-  .save-line.failed .dot {
-    background: var(--danger);
-  }
-
-  .edit-list {
-    border: 1px solid var(--card-border);
-    background: var(--card);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  .edit-row {
-    border-top: 1px solid var(--hair-2);
-    align-items: center;
-    gap: 9px;
-    padding: 9px 12px;
-    display: flex;
-  }
-
-  .edit-row:first-child {
-    border-top: 0;
-  }
-
-  .edit-row .pip {
-    background: var(--amber);
-    border-radius: 50%;
-    flex: none;
-    width: 5px;
-    height: 5px;
-  }
-
-  .edit-row.deleted .pip {
-    background: var(--danger);
-  }
-
-  .edit-row .label {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 12.5px;
-    overflow: hidden;
-  }
-
-  .edit-row .kind {
-    color: var(--faint-2);
-    white-space: nowrap;
-    margin-left: auto;
-    font-size: 11px;
-  }
-
-  .edit-more {
-    border: 0;
-    border-top: 1px solid var(--hair-2);
-    width: 100%;
-    color: var(--faint-2);
-    text-align: left;
-    cursor: pointer;
-    background: none;
-    padding: 8px 12px;
-    font-size: 11.5px;
-  }
-
-  .edit-more:hover {
-    background: var(--soft);
-    color: var(--strong-txt);
-  }
-
-  .drawer-footer {
-    border-top: 1px solid var(--hair);
-    background: var(--panel);
-    grid-template-rows: auto minmax(44px, 1fr);
-    min-width: 0;
-    min-height: 0;
-    max-height: min(55dvh, 430px);
-    display: grid;
-  }
-
-  .send-primary {
-    flex: none;
-    padding: 12px 12px 10px;
-  }
-
-  .send-secondary {
-    min-height: 0;
-    padding: 0 12px 12px;
-    overflow: hidden auto;
-  }
-
-  .send-section textarea {
-    min-height: 64px;
-    max-height: min(24vh, 160px);
-    margin-bottom: 9px;
-    overflow-y: auto;
-  }
-
-  .send {
-    border: 1px solid var(--btn-bg);
-    background: var(--btn-bg);
-    width: 100%;
-    min-height: 40px;
-    color: var(--btn-fg);
-    cursor: pointer;
-    border-radius: 6px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 12px;
-    font-size: 12.5px;
-    font-weight: 500;
-    display: flex;
-  }
-
-  .send:disabled {
-    border-color: var(--hair);
-    background: var(--soft);
-    color: var(--faint);
-    cursor: default;
-  }
-
-  .agent-line {
-    color: var(--faint);
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    margin: 10px 2px 2px;
-    font-size: 11px;
-    display: flex;
-  }
-
-  .handoff {
-    border: 1px solid var(--strong-border);
-    background: var(--card);
-    border-radius: 8px;
-    padding: 11px 12px;
-  }
-
-  .handoff-title {
-    margin: 0 0 4px;
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  .handoff-body {
-    color: var(--mute);
-    margin: 0 0 8px;
-    font-size: 11.5px;
-  }
-
-  .handoff-cmd {
-    background: var(--input-bg);
-    border: 1px solid var(--hair);
-    border-radius: 6px;
-    margin-bottom: 8px;
-    padding: 8px 9px;
-    overflow-x: auto;
-  }
-
-  .handoff-cmd code {
-    white-space: pre-wrap;
-    word-break: break-word;
-    font: 11.5px / 1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
-  }
-
-  .end-review {
-    width: 100%;
-    color: var(--faint-2);
-    cursor: pointer;
-    background: none;
-    border: none;
-    border-radius: 6px;
-    margin-top: 9px;
-    padding: 6px;
-    font-size: 12px;
-  }
-
-  .end-review:hover {
-    color: var(--danger);
-    background: var(--danger-soft);
-  }
-
-  .ended {
-    z-index: 100;
-    background: var(--panel);
-    color: var(--txt);
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-    display: flex;
-    position: fixed;
-    inset: 0;
-  }
-
-  .ended h2 {
-    color: var(--strong-txt);
-    margin: 0;
-    font-size: 17px;
-  }
-
-  .ended p {
-    color: var(--mute-2);
-    margin: 0;
-    font-size: 13px;
-  }
-
-  .toast {
-    z-index: 110;
-    background: var(--btn-bg);
-    color: var(--btn-fg);
-    box-shadow: var(--review-shadow);
-    border-radius: 8px;
-    padding: 8px 14px;
-    font-size: 12px;
-    animation: .14s ease-out rise;
-    position: fixed;
-    bottom: 22px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  @keyframes rise {
-    from {
-      opacity: 0;
-      transform: translateY(4px);
-    }
-
-    to {
-      opacity: 1;
-      transform: none;
-    }
-  }
-
-  @media (max-width: 720px) {
-    .drawer {
-      top: var(--toolbar-h);
-      border-left: 0;
-      width: 100%;
-    }
-
-    .drawer-backdrop, .aligned-card {
-      display: none !important;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    *, :before, :after {
-      scroll-behavior: auto !important;
-      transition: none !important;
-      animation: none !important;
-    }
-  }
-}
-
-@layer theme {
-  :root, :host {
-    --spacing: .25rem;
-    --container-xs: 20rem;
-    --container-sm: 24rem;
-    --text-xs--line-height: calc(1 / .75);
-    --text-sm--line-height: calc(1.25 / .875);
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --tracking-tight: -.025em;
-    --tracking-widest: .1em;
-    --leading-relaxed: 1.625;
-    --radius-md: var(--radius);
-    --radius-4xl: 2rem;
-    --ease-out: cubic-bezier(0, 0, .2, 1);
-    --default-transition-duration: .15s;
-    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-  }
-}
-
-@layer base {
-  .review-ui {
-    font-family: var(--review-font-sans);
-    font-size: var(--review-text-sm);
-    color: var(--foreground);
-    -webkit-font-smoothing: antialiased;
-    line-height: 1.5;
-  }
-
-  :root.review-ui {
-    font-size: 100%;
-  }
-
-  .review-ui :where(*) {
-    box-sizing: border-box;
-    border: 0 solid var(--border);
-  }
-
-  .review-ui :where(button, input, select, textarea) {
-    font: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-  }
-
-  .review-ui :where(button) {
-    cursor: pointer;
-    background-color: #0000;
-  }
-
-  .review-ui :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
-    cursor: not-allowed;
-  }
-
-  .review-ui :where(svg) {
-    flex-shrink: 0;
-    display: block;
-  }
-
-  .review-ui :where([hidden]) {
-    display: none !important;
-  }
-
-  .review-ui :where(h1, h2, h3, p) {
-    margin: 0;
-  }
-
-  .review-ui :where(a) {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-}
-
-@layer components {
-  #historyPanel.review-ui {
-    background: var(--background);
-    --diff-paper: var(--card);
-    --diff-ink: var(--foreground);
-    --diff-muted: var(--muted-foreground);
-    --diff-line: var(--border);
-    --diff-accent: var(--ring);
-    --diff-added: var(--review-added);
-    --diff-removed: var(--review-removed);
-    --diff-gap: var(--muted);
-    --diff-delete: var(--review-delete);
-    --diff-delete-ink: var(--review-removed-foreground);
-    --diff-insert: var(--review-insert);
-    --diff-insert-ink: var(--review-added-foreground);
-  }
-
-  #historyPanel .comparison-header {
-    background: var(--background);
-  }
-
-  #historyPanel .comparison-surface {
-    border: 1px solid var(--border);
-    background: var(--card);
-    color: var(--foreground);
-  }
-
-  #historyPanel .comparison-current {
-    scroll-margin-top: var(--comparison-header-height, 0px);
-  }
-
-  #historyPanel .comparison-headings {
-    border: 1px solid var(--border);
-    background: var(--muted);
-    color: var(--muted-foreground);
-  }
-
-  #historyPanel .comparison-headings > div + div, #historyPanel .comparison-after {
-    border-left: 1px solid var(--border);
-  }
-
-  #historyPanel .comparison-row + .comparison-row {
-    border-top: 1px solid var(--border);
-  }
-
-  #historyPanel .comparison-block {
-    color: var(--foreground);
-    font-family: var(--review-font-sans);
-  }
-
-  #historyPanel .comparison-block blockquote {
-    border-left: 3px solid var(--input);
-    color: var(--muted-foreground);
-  }
-
-  #historyPanel .comparison-block :is(code, kbd, samp) {
-    background: var(--muted);
-    font-family: var(--review-font-mono);
-  }
-
-  #historyPanel .comparison-block pre {
-    font-family: var(--review-font-mono);
-  }
-
-  #historyPanel .comparison-block hr {
-    border-top: 1px solid var(--border);
-    margin: 12px 0;
-  }
-
-  #historyPanel .comparison-block mark {
-    background: var(--review-modified);
-    color: var(--review-modified-foreground);
-  }
-
-  #historyPanel .comparison-gutter, #historyPanel .comparison-change-label, #historyPanel .comparison-mobile-label {
-    color: var(--muted-foreground);
-  }
-
-  #historyPanel .comparison-added {
-    background: var(--review-added);
-  }
-
-  #historyPanel .comparison-removed {
-    background: var(--review-removed);
-  }
-
-  #historyPanel .comparison-surface ins {
-    background: var(--review-insert);
-    -webkit-text-decoration-color: var(--review-added-foreground);
-    -webkit-text-decoration-color: var(--review-added-foreground);
-    text-decoration-color: var(--review-added-foreground);
-  }
-
-  #historyPanel .comparison-surface del {
-    background: var(--review-delete);
-    -webkit-text-decoration-color: var(--review-removed-foreground);
-    -webkit-text-decoration-color: var(--review-removed-foreground);
-    text-decoration-color: var(--review-removed-foreground);
-  }
-
-  #historyPanel .comparison-notice {
-    color: var(--muted-foreground);
-  }
-
-  #historyPanel .comparison-budget {
-    color: var(--destructive);
-  }
-
-  #historyPanel .comparison-block :is(.metadata-note, .structure-note, .newline-note) {
-    color: var(--muted-foreground);
-    font-family: var(--review-font-sans);
-  }
-
-  #historyPanel .comparison-expand {
-    border-block: 1px solid var(--border);
-    background: var(--muted);
-    color: var(--muted-foreground);
-    font: 12px/1.5 var(--review-font-sans);
-  }
-
-  #historyPanel .comparison-expand:hover {
-    background: var(--accent);
-    color: var(--accent-foreground);
-  }
-
-  #historyPanel .saved-link {
-    color: var(--primary);
-  }
-
-  #historyPanel .saved-image {
-    border: 1px dashed var(--input);
-    background: var(--muted);
-  }
-
-  #historyPanel .saved-image small {
-    color: var(--muted-foreground);
-  }
-
-  #historyPanel .saved-table :is(th, td) {
-    border: 1px solid var(--border);
-  }
-
-  #historyPanel .saved-table th {
-    background: var(--muted);
-  }
-
-  @media (max-width: 700px) {
-    #historyPanel .comparison-row {
-      border-bottom: 1px solid var(--border);
-    }
-
-    #historyPanel .comparison-after {
-      border-left: 0;
-      border-top: 1px solid var(--border);
-    }
-  }
-
-  .changes-controls {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--card);
-    margin-bottom: 12px;
-    padding: 12px;
-  }
-
-  .changes-support {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  #historyStatus {
-    min-width: 0;
-    color: var(--muted-foreground);
-    overflow-wrap: anywhere;
-    margin: 0;
-    font-size: 12px;
-  }
-
-  .changes-toolbar {
-    border: 1px solid var(--border);
-    border-radius: var(--radius) var(--radius) 0 0;
-    background: var(--card);
-    border-bottom: 0;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    align-items: center;
-    gap: 12px 8px;
-    padding: 8px 12px;
-    font-size: 12px;
-    display: grid;
-  }
-
-  .changes-view-tools {
-    flex-wrap: wrap;
-    grid-area: 1 / 3;
-    justify-content: flex-end;
-    justify-self: end;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    max-width: 100%;
-    display: flex;
-  }
-
-  .changes-context {
-    flex-wrap: wrap;
-    grid-area: 1 / 1;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    max-width: 100%;
-    display: flex;
-  }
-
-  .changes-context > #historyTargetLabel {
-    flex: 0 auto;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .choice-trigger {
-    max-width: 100%;
-  }
-
-  .choice-label {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  #roundPicker {
-    max-width: 12rem;
-  }
-
-  #historyTarget {
-    width: auto;
-    max-width: 12rem;
-  }
-
-  .changes-counts {
-    white-space: normal;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    display: flex;
-  }
-
-  .changes-counts [data-slot="badge"] {
-    background: var(--card);
-    border-color: var(--border);
-    color: var(--foreground);
-    gap: 4px;
-  }
-
-  .changes-added svg {
-    color: var(--review-count-added);
-  }
-
-  .changes-modified svg {
-    color: var(--review-count-modified);
-  }
-
-  .changes-removed svg {
-    color: var(--review-count-removed);
-  }
-
-  .changes-error-line {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    margin-top: 8px;
-    display: flex;
-  }
-
-  .changes-error {
-    color: var(--destructive);
-    overflow-wrap: anywhere;
-    margin: 0;
-    font-size: 12px;
-  }
-
-  .changes-navigation {
-    grid-area: 1 / 2;
-    justify-self: center;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    max-width: 100%;
-    display: flex;
-  }
-
-  .changes-navigation #previousChange:before, .changes-navigation #nextChange:before {
-    content: none;
-  }
-
-  @media (max-width: 700px) {
-    .changes-toolbar {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .changes-navigation {
-      grid-area: 2 / 1;
-    }
-
-    .changes-view-tools {
-      grid-area: 3 / 1;
-      justify-content: center;
-      justify-self: center;
-    }
-  }
-
-  .changes-diagnostics {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--card);
-    color: var(--muted-foreground);
-    overflow-wrap: anywhere;
-    margin-top: 12px;
-    padding: 0 12px 12px;
-    font-size: 12px;
-  }
-
-  .changes-diagnostics summary {
-    width: fit-content;
-    max-width: 100%;
-    min-height: 32px;
-    color: var(--foreground);
-    cursor: pointer;
-    padding: 8px 0;
-    font-weight: 500;
-  }
-
-  .changes-diagnostics summary:focus-visible {
-    outline: 2px solid var(--ring);
-    outline-offset: 2px;
-    border-radius: 2px;
-  }
-
-  .changes-diagnostics p {
-    max-width: 90ch;
-    margin: 8px 0;
-  }
-
-  .changes-diagnostics ul {
-    margin: 8px 0;
-    padding-left: 20px;
-  }
-
-  .changes-timing {
-    flex-wrap: wrap;
-    gap: 12px 24px;
-    margin: 12px 0;
-    display: flex;
-  }
-
-  .changes-timing dt {
-    color: var(--muted-foreground);
-  }
-
-  .changes-timing dd {
-    color: var(--foreground);
-    margin: 4px 0 0;
-  }
-
-  .changes-legend, .changes-legend > span {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-
-  .changes-legend {
-    column-gap: 16px;
-  }
-
-  .feedback-edits {
-    border-top: 1px solid var(--border);
-    margin-top: 0;
-  }
-
-  .feedback-disclosure h3 {
-    margin: 0;
-  }
-
-  .feedback-disclosure-trigger {
-    justify-content: flex-start;
-    gap: 8px;
-    width: 100%;
-    height: auto;
-    min-height: 44px;
-    padding: 10px 0;
-    font-size: 13px;
-    font-weight: 600;
-  }
-
-  .feedback-disclosure-trigger[aria-disabled="true"] {
-    cursor: default;
-  }
-
-  .disclosure-chevron {
-    transition: transform var(--review-duration);
-    color: var(--muted-foreground);
-    transform: rotate(-90deg);
-  }
-
-  .feedback-disclosure[data-open="true"] .disclosure-chevron {
-    transform: rotate(0);
-  }
-
-  .feedback-disclosure-content {
-    padding-bottom: 12px;
-  }
-
-  .disclosure-help {
-    margin: 0 0 8px;
-  }
-
-  .feedback-edit-status {
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 4px;
-    display: flex;
-  }
-
-  .feedback-edit-status .feedback-save {
-    flex: 1;
-    margin: 0;
-  }
-
-  .feedback-revert {
-    color: var(--destructive);
-    margin-left: auto;
-  }
-
-  .feedback-save, .feedback-help {
-    color: var(--muted-foreground);
-    overflow-wrap: anywhere;
-    margin: 0 0 8px;
-    font-size: 12px;
-  }
-
-  .feedback-save[data-error="true"], .feedback-error {
-    color: var(--destructive);
-    overflow-wrap: anywhere;
-    font-size: 12px;
-  }
-
-  .feedback-edit-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .feedback-edit-list li {
-    border-bottom: 1px solid var(--border);
-    align-items: baseline;
-    gap: 8px;
-    padding: 6px 0;
-    display: flex;
+  .comparison-host .saved-image {
+    border: 1px dashed var(--input);
+    background: var(--muted);
+    border-radius: 5px;
+    padding: 12px;
   }
 
-  .feedback-edit-label {
-    overflow-wrap: anywhere;
-    flex: 1;
-    min-width: 0;
+  .comparison-host .saved-image small {
+    color: var(--muted-foreground);
     font-size: 12px;
+    display: block;
   }
 
-  .drawer-footer.review-ui {
-    border-color: var(--border);
-    background: var(--card);
-    grid-template-rows: auto minmax(0, 1fr) auto;
-    max-height: min(55dvh, 430px);
-  }
-
-  .feedback-primary {
-    grid-row: 1;
-    gap: 8px;
-    padding: 12px;
-    display: grid;
+  .comparison-host .saved-list {
+    padding-inline-start: 22px;
   }
 
-  .feedback-primary #note {
-    resize: vertical;
-    background: var(--background);
-    height: 56px;
-    min-height: 56px;
-    max-height: min(18dvh, 120px);
-    margin: 0;
+  .comparison-host .saved-table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
   }
 
-  .feedback-actions {
-    grid-row: 3;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    padding: 0 12px 12px;
-    display: flex;
+  .comparison-host .saved-table :is(th, td) {
+    border: 1px solid var(--border);
+    text-align: left;
+    vertical-align: top;
+    padding: 7px 10px;
   }
 
-  .feedback-send {
-    white-space: normal;
-    overflow-wrap: anywhere;
-    flex: 0 auto;
-    min-width: 0;
-    max-width: 100%;
-    height: auto;
-    min-height: 32px;
-    padding-top: 6px;
-    padding-bottom: 6px;
+  .comparison-host .saved-table th {
+    background: var(--muted);
   }
 
-  .feedback-secondary {
-    grid-row: 2;
-    padding: 0 12px 12px;
+  .comparison-host .saved-table .comparison-block {
+    font-size: 13px;
   }
 
-  .feedback-end {
-    width: auto;
-    color: var(--muted-foreground);
-    flex: none;
+  .comparison-host .comparison-source .comparison-cell {
+    padding-block: 0;
+    padding-right: 8px;
   }
 
-  .feedback-handoff {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--background);
-    overflow-wrap: anywhere;
-    margin: 0 0 8px;
-    padding: 10px;
+  .comparison-host .comparison-source .comparison-change-label {
+    display: none;
   }
 
-  .feedback-handoff p {
-    color: var(--muted-foreground);
-    margin: 0 0 8px;
-    font-size: 12px;
+  .comparison-host .comparison-source .comparison-gutter {
+    text-align: right;
+    white-space: pre;
+    flex-basis: 60px;
+    padding: 0 12px 0 4px;
   }
 
-  .feedback-handoff h3 {
-    margin: 0 0 6px;
-    font-size: 13px;
+  .comparison-host .comparison-source .comparison-block pre {
+    min-height: 22px;
+    line-height: 22px;
   }
 
-  .feedback-handoff code {
-    border-radius: var(--radius);
-    background: var(--muted);
-    color: var(--foreground);
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    margin-bottom: 8px;
-    padding: 8px;
-    font: 11px / 1.5 ui-monospace, monospace;
-    display: block;
+  .comparison-host .comparison-source .comparison-block .newline-note {
+    margin: 0;
+    padding: 3px 0;
   }
 
-  @media (max-height: 550px) {
-    .drawer-footer.review-ui {
-      max-height: calc(100dvh - var(--toolbar-h) - 80px);
+  @media (max-width: 700px) {
+    .comparison-host .comparison-headings {
+      display: none;
     }
 
-    .feedback-primary {
-      gap: 6px;
-      padding: 8px 12px;
+    .comparison-host .comparison-row {
+      border-bottom: 1px solid var(--border);
+      grid-template-columns: minmax(0, 1fr);
     }
 
-    .feedback-primary #note {
-      height: 40px;
-      min-height: 40px;
-      max-height: 60px;
+    .comparison-host .comparison-after {
+      border-left: 0;
+      border-top: 1px solid var(--border);
     }
-  }
 
-  .contextual-compose.review-ui {
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--card);
-    color: var(--card-foreground);
-    max-height: calc(100dvh - var(--toolbar-h) - 24px);
-    padding: 12px;
-    overflow: auto;
-    box-shadow: 0 8px 24px #00000026;
-  }
+    .comparison-host .comparison-gap, .comparison-host .comparison-unchanged > .comparison-after {
+      display: none;
+    }
 
-  .contextual-compose.review-ui .quote {
-    border-left: 2px solid var(--border);
-    color: var(--muted-foreground);
-    overflow-wrap: anywhere;
-    margin: 0 0 10px;
-    padding-left: 8px;
-    font-size: 12px;
-    font-style: normal;
-  }
+    .comparison-host .comparison-cell {
+      padding-right: 10px;
+    }
 
-  .contextual-compose.review-ui textarea {
-    background: var(--background);
-    color: var(--foreground);
-    border-color: var(--input);
-  }
+    .comparison-host .comparison-mobile-label {
+      color: var(--muted-foreground);
+      font: 600 12px/1.6 var(--review-font-sans);
+      margin-bottom: 8px;
+      display: block;
+    }
 
-  .contextual-compose.review-ui .compose-help {
-    margin: calc(2 * var(--review-space)) 1px 0;
-    color: var(--muted-foreground);
-    flex-wrap: wrap;
-  }
+    .comparison-host .comparison-change-label {
+      display: none;
+    }
 
-  .contextual-compose.review-ui.edge-top, .contextual-compose.review-ui.edge-bottom {
-    border-color: var(--ring);
-  }
+    .comparison-host .comparison-current > .comparison-after {
+      box-shadow: inset 3px 0 var(--ring);
+    }
 
-  .contextual-direction {
-    color: var(--muted-foreground);
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 8px;
-    font-size: 12px;
-    display: flex;
-  }
+    .comparison-host .comparison-block {
+      font-size: 14px;
+    }
 
-  .aligned-card.review-ui {
-    max-height: calc(100dvh - var(--toolbar-h) - 24px);
-    background: none;
-    border: 0;
-    padding: 0;
-    overflow: auto;
+    .comparison-host .comparison-source .comparison-gutter {
+      flex-basis: 48px;
+    }
   }
 
-  .aligned-card.review-ui .inventory-card {
-    margin: 0;
+  .app {
+    grid-template-rows: auto minmax(0, 1fr);
+    height: 100dvh;
+    display: grid;
   }
 
   .shell-toolbar {
-    border-color: var(--border);
+    z-index: var(--review-layer-toolbar);
+    border-bottom: 1px solid var(--border);
     background: var(--card);
-    grid-template: "destinations mode actions recovery"
-    / minmax(0, 1fr) auto minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "destinations tools";
+    align-items: center;
     gap: 8px;
     padding: 8px 12px;
+    display: grid;
+    position: relative;
   }
 
   #toolbarRoot {
@@ -2597,35 +539,62 @@
     display: block;
   }
 
-  .segmented-control {
-    border: 1px solid var(--border);
-    border-radius: calc(var(--radius) + 2px);
-    flex-wrap: wrap;
-    gap: 2px;
-    width: fit-content;
-    padding: 2px;
+  .shell-mode {
+    align-items: center;
+    gap: 8px;
     display: flex;
   }
 
-  .shell-mode {
-    grid-area: mode;
+  .shell-tools {
+    grid-area: tools;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    display: flex;
   }
 
-  .shell-actions {
-    grid-area: actions;
-    justify-content: flex-end;
+  .review-options-menu {
+    width: 280px;
+  }
+
+  .review-options-document {
     gap: 4px;
-    display: flex;
+    display: grid;
   }
 
-  .shell-recovery {
-    grid-area: recovery;
-    justify-self: end;
+  .review-options-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    color: var(--foreground);
+    overflow: hidden;
+  }
+
+  .review-options-notice {
+    overflow-wrap: anywhere;
+    padding: 4px 6px;
+    font-size: 12px;
+  }
+
+  .review-options-notice[role="alert"] {
+    color: var(--destructive);
+  }
+
+  .review-options-path {
+    color: var(--foreground);
+    -webkit-user-select: text;
+    user-select: text;
+    margin-top: 4px;
+    display: block;
   }
 
   .stage {
+    background: var(--background);
     flex-direction: column;
+    min-width: 0;
+    min-height: 0;
     display: flex;
+    position: relative;
   }
 
   .document-host {
@@ -2635,221 +604,309 @@
     position: relative;
   }
 
-  #noticesRoot {
-    z-index: var(--review-layer-notice);
-    flex: none;
-    min-height: 0;
-    max-height: min(45dvh, 20rem);
-    position: relative;
-    overflow: auto;
+  #frame {
+    background: #fff;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
   }
 
-  .recovery-notices {
-    background: var(--background);
-    padding: 8px 12px;
+  #frame[data-replacing] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  #previousFrame {
+    z-index: 1;
+    pointer-events: none;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+
+  body.comparing #frame {
+    pointer-events: none;
+  }
+
+  .choice-trigger {
+    max-width: 100%;
+  }
+
+  .choice-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  #historyTarget {
+    width: auto;
+    max-width: 12rem;
   }
 
-  .recovery-notice {
-    border: 1px solid var(--input);
+  .changes-controls {
+    border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--card);
-    color: var(--card-foreground);
-    overflow-wrap: anywhere;
-    margin: 0;
+    margin-bottom: 12px;
     padding: 12px;
   }
 
-  .recovery-notice[data-error="true"] {
-    border-color: var(--destructive);
+  .changes-toolbar {
+    border: 1px solid var(--border);
+    border-radius: var(--radius) var(--radius) 0 0;
+    background: var(--card);
+    border-bottom: 0;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: 12px 8px;
+    padding: 8px 12px;
+    font-size: 12px;
+    display: grid;
   }
 
-  .recovery-notice[data-error="true"] strong {
-    color: var(--destructive);
+  .changes-view-tools {
+    flex-wrap: wrap;
+    grid-area: 1 / 3;
+    justify-content: flex-end;
+    justify-self: end;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    max-width: 100%;
+    display: flex;
   }
 
-  .recovery-notice-actions {
+  .changes-context {
     flex-wrap: wrap;
+    grid-area: 1 / 1;
     align-items: center;
     gap: 8px;
-    margin-top: 10px;
+    min-width: 0;
+    max-width: 100%;
     display: flex;
   }
 
-  .recovery-notice p {
-    margin: 4px 0 0;
-  }
-
-  .recovery-notice :where(button):focus-visible {
-    outline-offset: 2px;
+  .changes-counts {
+    white-space: normal;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    display: flex;
   }
 
-  .inventory-drawer-head {
-    border-bottom: 1px solid var(--border);
+  .changes-counts [data-slot="badge"] {
     background: var(--card);
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-    padding: 12px;
-    display: flex;
+    border-color: var(--border);
+    color: var(--foreground);
+    gap: 4px;
   }
 
-  .inventory-drawer-head h2 {
-    margin: 0;
-    font-size: 17px;
-    font-weight: 600;
+  .changes-added svg {
+    color: var(--review-count-added);
   }
 
-  .inventory-heading {
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 10px;
-    display: flex;
+  .changes-modified svg {
+    color: var(--review-count-modified);
   }
 
-  .inventory-heading h3 {
-    margin: 0;
-    font-size: 13px;
-    font-weight: 600;
+  .changes-removed svg {
+    color: var(--review-count-removed);
   }
 
-  .inventory-cards {
-    flex-direction: column;
+  .changes-navigation {
+    grid-area: 1 / 2;
+    justify-self: center;
+    align-items: center;
     gap: 8px;
+    min-width: 0;
+    max-width: 100%;
     display: flex;
   }
 
-  .inventory-card {
+  .changes-diagnostics {
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--card);
-    min-width: 0;
-    color: var(--card-foreground);
+    color: var(--muted-foreground);
     overflow-wrap: anywhere;
-    padding: 12px;
+    margin-top: 12px;
+    padding: 0 12px 12px;
+    font-size: 12px;
   }
 
-  .inventory-card.active {
-    border-color: var(--ring);
-    box-shadow: inset 2px 0 0 var(--ring);
+  .changes-diagnostics summary {
+    width: fit-content;
+    max-width: 100%;
+    min-height: 32px;
+    color: var(--foreground);
+    cursor: pointer;
+    padding: 8px 0;
+    font-weight: 500;
   }
 
-  .inventory-card-head {
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 8px;
-    display: flex;
+  .changes-diagnostics p {
+    max-width: 90ch;
+    margin: 8px 0;
   }
 
-  .inventory-meta {
-    color: var(--muted-foreground);
+  .changes-diagnostics ul {
+    margin: 8px 0;
+    padding-left: 20px;
+  }
+
+  .changes-legend, .changes-legend > span {
     flex-wrap: wrap;
     align-items: center;
-    gap: 4px;
-    margin-right: auto;
-    font-size: 11px;
+    gap: 8px;
     display: flex;
   }
 
-  .inventory-actions {
-    flex-wrap: wrap;
+  .changes-legend {
+    column-gap: 16px;
+  }
+
+  .review-ui details > summary {
+    cursor: pointer;
+    border-radius: 2px;
+  }
+
+  .review-ui details > summary:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .feedback-edit-status {
     align-items: center;
-    gap: 4px;
+    gap: 8px;
+    margin-bottom: 4px;
     display: flex;
   }
 
-  .inventory-card .quote {
-    border-left: 2px solid var(--border);
+  .feedback-revert {
+    margin-left: auto;
+  }
+
+  .feedback-help {
     color: var(--muted-foreground);
-    white-space: pre-wrap;
+    overflow-wrap: anywhere;
     margin: 0 0 8px;
-    padding-left: 8px;
     font-size: 12px;
-    font-style: normal;
   }
 
-  .inventory-card .body {
-    border-radius: var(--radius);
-    white-space: pre-wrap;
-    cursor: text;
+  .feedback-edit-list {
     margin: 0;
-    font-size: 13px;
+    padding: 0;
+    list-style: none;
   }
 
-  .inventory-card .body:hover {
-    background: var(--muted);
+  .feedback-edit-list li {
+    border-bottom: 1px solid var(--border);
   }
 
-  .inventory-card .body-edit {
-    background: var(--background);
-    color: var(--foreground);
-    border-color: var(--input);
+  .feedback-edit-label {
+    overflow-wrap: anywhere;
+    flex: 1;
+    min-width: 0;
+    font-size: 12px;
   }
 
-  .inventory-help {
-    color: var(--muted-foreground);
-    margin: 6px 0;
-    font-size: 11px;
+  .feedback-actions {
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 0 12px 12px;
+    display: flex;
   }
 
-  .inventory-error {
-    color: var(--destructive);
-    margin: 6px 0;
-    font-size: 12px;
+  .feedback-send {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    flex: 0 auto;
+    min-width: 0;
+    max-width: 100%;
+    height: auto;
+    min-height: 32px;
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
 
-  .inventory-delete {
-    margin: 0 0 8px;
-    font-weight: 500;
+  .feedback-end {
+    flex: none;
+    width: auto;
   }
 
-  .inventory-empty {
-    border: 1px dashed var(--input);
-    border-radius: var(--radius);
+  .contextual-compose.review-ui {
+    max-height: calc(100dvh - var(--toolbar-h) - 24px);
+  }
+
+  .contextual-compose.review-ui .quote {
+    border-left: 2px solid var(--border);
     color: var(--muted-foreground);
-    text-align: center;
-    margin: 0;
-    padding: 16px 12px;
+    overflow-wrap: anywhere;
+    margin: 0 0 10px;
+    padding-left: 8px;
+    font-size: 12px;
+  }
+
+  .contextual-direction {
+    color: var(--muted-foreground);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 8px;
     font-size: 12px;
+    display: flex;
   }
 
-  .inventory-other-pages {
+  .inventory-card {
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--card);
-    overflow: hidden;
+    min-width: 0;
+    color: var(--card-foreground);
+    overflow-wrap: anywhere;
+    padding: 12px;
   }
 
-  .inventory-other-page {
-    white-space: normal;
-    text-align: left;
-    border-radius: 0;
-    justify-content: space-between;
-    gap: 8px;
-    width: 100%;
-    height: auto;
-    min-height: 32px;
-    padding: 8px;
+  .inventory-meta {
+    color: var(--muted-foreground);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    margin-right: auto;
+    font-size: 11px;
+    display: flex;
   }
 
-  .inventory-other-page > span:first-child {
-    overflow-wrap: anywhere;
-    min-width: 0;
-  }
+  @media (max-width: 700px) {
+    .changes-toolbar {
+      grid-template-columns: minmax(0, 1fr);
+    }
 
-  @media (max-width: 600px) {
-    .shell-toolbar {
-      grid-template-columns: auto minmax(0, 1fr) auto;
-      grid-template-areas: "destinations destinations actions"
-                           "mode recovery recovery";
+    .changes-navigation {
+      grid-area: 2 / 1;
+    }
+
+    .changes-view-tools {
+      grid-area: 3 / 1;
+      justify-self: end;
     }
+  }
 
+  @media (max-width: 600px) {
     .shell-comments-label {
       display: none;
     }
 
-    body.comparing .shell-toolbar {
-      grid-template-areas: "destinations destinations actions";
+    .shell-toolbar {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "destinations"
+                           "tools";
     }
   }
 }
@@ -2907,6 +964,10 @@
     inset: 0;
   }
 
+  .top-0 {
+    top: 0;
+  }
+
   .top-1\/2 {
     top: 50%;
   }
@@ -2919,6 +980,10 @@
     right: calc(var(--spacing) * 2.5);
   }
 
+  .left-0 {
+    left: 0;
+  }
+
   .left-1\/2 {
     left: 50%;
   }
@@ -2935,12 +1000,16 @@
     z-index: var(--review-layer-menu);
   }
 
-  .row-10 {
-    grid-row: 10;
+  .z-10 {
+    z-index: 10;
+  }
+
+  .row-0 {
+    grid-row: 0;
   }
 
-  .row-39 {
-    grid-row: 39;
+  .row-10 {
+    grid-row: 10;
   }
 
   .row-43 {
@@ -3073,9 +1142,19 @@
     field-sizing: content;
   }
 
-  .size-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-    height: calc(var(--spacing) * 3.5);
+  .size-\(--review-control-height\) {
+    width: var(--review-control-height);
+    height: var(--review-control-height);
+  }
+
+  .size-\(--review-control-height-xs\) {
+    width: var(--review-control-height-xs);
+    height: var(--review-control-height-xs);
+  }
+
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
   }
 
   .size-4 {
@@ -3088,46 +1167,31 @@
     height: calc(var(--spacing) * 6);
   }
 
-  .size-7 {
-    width: calc(var(--spacing) * 7);
-    height: calc(var(--spacing) * 7);
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
   }
 
-  .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
+  .h-\(--review-control-height\) {
+    height: var(--review-control-height);
   }
 
-  .size-9 {
-    width: calc(var(--spacing) * 9);
-    height: calc(var(--spacing) * 9);
+  .h-\(--review-control-height-sm\) {
+    height: var(--review-control-height-sm);
   }
 
-  .size-10 {
-    width: calc(var(--spacing) * 10);
-    height: calc(var(--spacing) * 10);
+  .h-\(--review-control-height-xs\) {
+    height: var(--review-control-height-xs);
   }
 
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
 
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
-
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
 
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-
   .h-auto {
     height: auto;
   }
@@ -3140,6 +1204,10 @@
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
 
+  .max-h-\(--radix-tooltip-content-available-height\) {
+    max-height: var(--radix-tooltip-content-available-height);
+  }
+
   .max-h-\[calc\(100dvh-2rem\)\] {
     max-height: calc(100dvh - 2rem);
   }
@@ -3148,20 +1216,20 @@
     max-height: min(22rem, var(--radix-dropdown-menu-content-available-height));
   }
 
-  .min-h-8 {
-    min-height: calc(var(--spacing) * 8);
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
   }
 
-  .min-h-16 {
-    min-height: calc(var(--spacing) * 16);
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
   }
 
-  .w-64 {
-    width: calc(var(--spacing) * 64);
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
   }
 
-  .w-72 {
-    width: calc(var(--spacing) * 72);
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
   }
 
   .w-80 {
@@ -3188,30 +1256,14 @@
     max-width: calc(100vw - 2rem);
   }
 
-  .max-w-full {
-    max-width: 100%;
+  .max-w-\[min\(20rem\,var\(--radix-tooltip-content-available-width\)\)\] {
+    max-width: min(20rem, var(--radix-tooltip-content-available-width));
   }
 
   .min-w-0 {
     min-width: 0;
   }
 
-  .min-w-7 {
-    min-width: calc(var(--spacing) * 7);
-  }
-
-  .min-w-8 {
-    min-width: calc(var(--spacing) * 8);
-  }
-
-  .min-w-9 {
-    min-width: calc(var(--spacing) * 9);
-  }
-
-  .min-w-32 {
-    min-width: calc(var(--spacing) * 32);
-  }
-
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
@@ -3224,6 +1276,10 @@
     flex-shrink: 0;
   }
 
+  .grow {
+    flex-grow: 1;
+  }
+
   .border-collapse {
     border-collapse: collapse;
   }
@@ -3254,6 +1310,10 @@
     resize: both;
   }
 
+  .list-none {
+    list-style-type: none;
+  }
+
   .appearance-none {
     appearance: none;
   }
@@ -3270,10 +1330,6 @@
     flex-direction: column-reverse;
   }
 
-  .flex-row {
-    flex-direction: row;
-  }
-
   .place-items-center {
     place-items: center;
   }
@@ -3286,12 +1342,12 @@
     align-items: center;
   }
 
-  .justify-center {
-    justify-content: center;
+  .justify-between {
+    justify-content: space-between;
   }
 
-  .justify-start {
-    justify-content: flex-start;
+  .justify-center {
+    justify-content: center;
   }
 
   .gap-1 {
@@ -3318,8 +1374,8 @@
     gap: calc(var(--spacing) * 5);
   }
 
-  .gap-\[--spacing\(var\(--gap\)\)\] {
-    gap: calc(var(--spacing) * var(--gap));
+  .overflow-auto {
+    overflow: auto;
   }
 
   .overflow-hidden {
@@ -3350,6 +1406,10 @@
     border-radius: min(var(--radius-md), 12px);
   }
 
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
   .rounded-lg {
     border-radius: calc(var(--radius) + 2px);
   }
@@ -3358,10 +1418,6 @@
     border-radius: var(--radius);
   }
 
-  .rounded-sm {
-    border-radius: calc(var(--radius) - 2px);
-  }
-
   .rounded-xl {
     border-radius: calc(var(--radius) + 4px);
   }
@@ -3401,6 +1457,14 @@
     background-color: canvas;
   }
 
+  .bg-\[var\(--annotation-background\)\] {
+    background-color: var(--annotation-background);
+  }
+
+  .bg-accent {
+    background-color: var(--accent);
+  }
+
   .bg-background {
     background-color: var(--background);
   }
@@ -3409,6 +1473,20 @@
     background-color: var(--border);
   }
 
+  .bg-card {
+    background-color: var(--card);
+  }
+
+  .bg-destructive\/5 {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-destructive\/5 {
+      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
+    }
+  }
+
   .bg-destructive\/10 {
     background-color: var(--destructive);
   }
@@ -3419,10 +1497,6 @@
     }
   }
 
-  .bg-foreground {
-    background-color: var(--foreground);
-  }
-
   .bg-muted, .bg-muted\/50 {
     background-color: var(--muted);
   }
@@ -3465,6 +1539,10 @@
     background-clip: padding-box;
   }
 
+  .p-0 {
+    padding: 0;
+  }
+
   .p-1 {
     padding: var(--spacing);
   }
@@ -3477,10 +1555,6 @@
     padding: calc(var(--spacing) * 4);
   }
 
-  .px-0 {
-    padding-inline: 0;
-  }
-
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -3505,22 +1579,18 @@
     padding-block: var(--spacing);
   }
 
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
-
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
 
-  .py-2\.5 {
-    padding-block: calc(var(--spacing) * 2.5);
-  }
-
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
 
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+
   .pl-1\.5 {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -3529,10 +1599,18 @@
     padding-left: calc(var(--spacing) * 2.5);
   }
 
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
+
   .text-center {
     text-align: center;
   }
 
+  .text-left {
+    text-align: left;
+  }
+
   .font-mono {
     font-family: var(--review-font-mono);
   }
@@ -3557,14 +1635,6 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
-  .text-\[0\.8rem\] {
-    font-size: .8rem;
-  }
-
-  .text-\[13px\] {
-    font-size: 13px;
-  }
-
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -3590,11 +1660,6 @@
     letter-spacing: var(--tracking-tight);
   }
 
-  .tracking-widest {
-    --tw-tracking: var(--tracking-widest);
-    letter-spacing: var(--tracking-widest);
-  }
-
   .text-balance {
     text-wrap: balance;
   }
@@ -3615,8 +1680,12 @@
     color: canvastext;
   }
 
-  .text-background {
-    color: var(--background);
+  .text-\[var\(--annotation-foreground\)\] {
+    color: var(--annotation-foreground);
+  }
+
+  .text-accent-foreground {
+    color: var(--accent-foreground);
   }
 
   .text-destructive {
@@ -3703,6 +1772,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3730,8 +1804,7 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
-  .invert {
-    --tw-invert: invert(100%);
+  .filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
@@ -3773,10 +1846,6 @@
     user-select: none;
   }
 
-  .block-1 {
-    block-size: var(--spacing);
-  }
-
   .paused {
     animation-play-state: paused;
   }
@@ -3785,10 +1854,6 @@
     animation-play-state: running;
   }
 
-  .group-focus\/dropdown-menu-item\:text-accent-foreground:is(:where(.group\/dropdown-menu-item):focus *) {
-    color: var(--accent-foreground);
-  }
-
   .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
     pointer-events: none;
   }
@@ -3805,14 +1870,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .group-data-\[spacing\=0\]\/toggle-group\:rounded-none:is(:where(.group\/toggle-group)[data-spacing="0"] *) {
-    border-radius: 0;
-  }
-
-  .group-data-\[spacing\=0\]\/toggle-group\:px-2:is(:where(.group\/toggle-group)[data-spacing="0"] *) {
-    padding-inline: calc(var(--spacing) * 2);
-  }
-
   .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -3841,6 +1898,46 @@
     color: var(--muted-foreground);
   }
 
+  .before\:absolute:before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .before\:top-3:before {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 3);
+  }
+
+  .before\:-bottom-3:before {
+    content: var(--tw-content);
+    bottom: calc(var(--spacing) * -3);
+  }
+
+  .before\:left-3:before {
+    content: var(--tw-content);
+    left: calc(var(--spacing) * 3);
+  }
+
+  .before\:border-l:before {
+    content: var(--tw-content);
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .before\:border-border:before {
+    content: var(--tw-content);
+    border-color: var(--border);
+  }
+
+  .last\:pb-0:last-child {
+    padding-bottom: 0;
+  }
+
+  .last\:before\:hidden:last-child:before {
+    content: var(--tw-content);
+    display: none;
+  }
+
   @media (hover: hover) {
     .hover\:bg-\[color-mix\(in_oklch\,var\(--secondary\)\,var\(--foreground\)_5\%\)\]:hover {
       background-color: var(--secondary);
@@ -3852,13 +1949,13 @@
       }
     }
 
-    .hover\:bg-destructive\/20:hover {
+    .hover\:bg-destructive\/10:hover {
       background-color: var(--destructive);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-destructive\/20:hover {
-        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      .hover\:bg-destructive\/10:hover {
+        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
 
@@ -3866,13 +1963,13 @@
       background-color: var(--muted);
     }
 
-    .hover\:bg-primary\/80:hover {
+    .hover\:bg-primary\/90:hover {
       background-color: var(--primary);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-primary\/80:hover {
-        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
       }
     }
 
@@ -3893,10 +1990,6 @@
     }
   }
 
-  .focus\:z-10:focus {
-    z-index: 10;
-  }
-
   .focus\:bg-accent:focus {
     background-color: var(--accent);
   }
@@ -3905,10 +1998,6 @@
     color: var(--accent-foreground);
   }
 
-  .focus-visible\:z-10:focus-visible {
-    z-index: 10;
-  }
-
   .focus-visible\:border-destructive\/40:focus-visible {
     border-color: var(--destructive);
   }
@@ -3923,10 +2012,6 @@
     border-color: var(--ring);
   }
 
-  .focus-visible\:text-destructive:focus-visible {
-    color: var(--destructive);
-  }
-
   .focus-visible\:ring-3:focus-visible, .focus-visible\:ring-\[3px\]:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3979,10 +2064,6 @@
     opacity: .5;
   }
 
-  :where([data-slot="button-group"]) .in-data-\[slot\=button-group\]\:rounded-lg {
-    border-radius: calc(var(--radius) + 2px);
-  }
-
   .has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon="inline-end"]) {
     padding-right: calc(var(--spacing) * 1.5);
   }
@@ -3991,10 +2072,6 @@
     padding-right: calc(var(--spacing) * 2);
   }
 
-  .group-data-\[spacing\=0\]\/toggle-group\:has-data-\[icon\=inline-end\]\:pr-1\.5:is(:where(.group\/toggle-group)[data-spacing="0"] *):has([data-icon="inline-end"]) {
-    padding-right: calc(var(--spacing) * 1.5);
-  }
-
   .has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon="inline-start"]) {
     padding-left: calc(var(--spacing) * 1.5);
   }
@@ -4003,10 +2080,6 @@
     padding-left: calc(var(--spacing) * 2);
   }
 
-  .group-data-\[spacing\=0\]\/toggle-group\:has-data-\[icon\=inline-start\]\:pl-1\.5:is(:where(.group\/toggle-group)[data-spacing="0"] *):has([data-icon="inline-start"]) {
-    padding-left: calc(var(--spacing) * 1.5);
-  }
-
   .has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_auto_1fr\]:has([data-slot="alert-dialog-media"]) {
     grid-template-rows: auto auto 1fr;
   }
@@ -4019,6 +2092,16 @@
     opacity: .5;
   }
 
+  .aria-expanded\:bg-destructive\/10[aria-expanded="true"] {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .aria-expanded\:bg-destructive\/10[aria-expanded="true"] {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+
   .aria-expanded\:bg-muted[aria-expanded="true"] {
     background-color: var(--muted);
   }
@@ -4027,8 +2110,8 @@
     background-color: var(--secondary);
   }
 
-  .aria-expanded\:bg-transparent[aria-expanded="true"] {
-    background-color: #0000;
+  .aria-expanded\:text-destructive[aria-expanded="true"] {
+    color: var(--destructive);
   }
 
   .aria-expanded\:text-foreground[aria-expanded="true"] {
@@ -4058,14 +2141,6 @@
     }
   }
 
-  .aria-pressed\:bg-accent[aria-pressed="true"] {
-    background-color: var(--accent);
-  }
-
-  .aria-pressed\:text-accent-foreground[aria-pressed="true"] {
-    color: var(--accent-foreground);
-  }
-
   .data-disabled\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
@@ -4114,42 +2189,18 @@
     padding-block: calc(var(--spacing) * .5);
   }
 
-  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:first\:rounded-l-lg:is(:where(.group\/toggle-group)[data-orientation="horizontal"] *)[data-spacing="0"]:first-child {
-    border-top-left-radius: calc(var(--radius) + 2px);
-    border-bottom-left-radius: calc(var(--radius) + 2px);
-  }
-
-  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:first\:rounded-t-lg:is(:where(.group\/toggle-group)[data-orientation="vertical"] *)[data-spacing="0"]:first-child {
-    border-top-left-radius: calc(var(--radius) + 2px);
-    border-top-right-radius: calc(var(--radius) + 2px);
-  }
-
-  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:last\:rounded-r-lg:is(:where(.group\/toggle-group)[data-orientation="horizontal"] *)[data-spacing="0"]:last-child {
-    border-top-right-radius: calc(var(--radius) + 2px);
-    border-bottom-right-radius: calc(var(--radius) + 2px);
+  .data-\[state\=checked\]\:border-primary[data-state="checked"] {
+    border-color: var(--primary);
   }
 
-  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:last\:rounded-b-lg:is(:where(.group\/toggle-group)[data-orientation="vertical"] *)[data-spacing="0"]:last-child {
-    border-bottom-right-radius: calc(var(--radius) + 2px);
-    border-bottom-left-radius: calc(var(--radius) + 2px);
+  .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
+    background-color: var(--primary);
   }
 
   .data-\[state\=closed\]\:overflow-hidden[data-state="closed"] {
     overflow: hidden;
   }
 
-  .data-\[state\=on\]\:border-ring[data-state="on"] {
-    border-color: var(--ring);
-  }
-
-  .data-\[state\=on\]\:bg-accent[data-state="on"] {
-    background-color: var(--accent);
-  }
-
-  .data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
-    color: var(--accent-foreground);
-  }
-
   .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"] {
     color: var(--destructive);
   }
@@ -4168,31 +2219,7 @@
     color: var(--destructive);
   }
 
-  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-l-0:is(:where(.group\/toggle-group)[data-orientation="horizontal"] *)[data-spacing="0"][data-variant="outline"] {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 0;
-  }
-
-  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:border-t-0:is(:where(.group\/toggle-group)[data-orientation="vertical"] *)[data-spacing="0"][data-variant="outline"] {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 0;
-  }
-
-  .group-data-horizontal\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:border-l:is(:where(.group\/toggle-group)[data-orientation="horizontal"] *)[data-spacing="0"][data-variant="outline"]:first-child {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
-
-  .group-data-vertical\/toggle-group\:data-\[spacing\=0\]\:data-\[variant\=outline\]\:first\:border-t:is(:where(.group\/toggle-group)[data-orientation="vertical"] *)[data-spacing="0"][data-variant="outline"]:first-child {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-
   @media (min-width: 40rem) {
-    .sm\:inline {
-      display: inline;
-    }
-
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4241,8 +2268,14 @@
     }
   }
 
-  .dark\:border-input:where([data-theme="dark"], [data-theme="dark"] *) {
-    border-color: var(--input);
+  .dark\:bg-destructive\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+    background-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-destructive\/10:where([data-theme="dark"], [data-theme="dark"] *) {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
   }
 
   .dark\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *) {
@@ -4266,13 +2299,13 @@
   }
 
   @media (hover: hover) {
-    .dark\:hover\:bg-destructive\/30:where([data-theme="dark"], [data-theme="dark"] *):hover {
+    .dark\:hover\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *):hover {
       background-color: var(--destructive);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:bg-destructive\/30:where([data-theme="dark"], [data-theme="dark"] *):hover {
-        background-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+      .dark\:hover\:bg-destructive\/20:where([data-theme="dark"], [data-theme="dark"] *):hover {
+        background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
       }
     }
 
@@ -4351,14 +2384,6 @@
     animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
   }
 
-  .data-open\:bg-accent[data-state="open"] {
-    background-color: var(--accent);
-  }
-
-  .data-open\:text-accent-foreground[data-state="open"] {
-    color: var(--accent-foreground);
-  }
-
   .data-open\:fade-in-0[data-state="open"] {
     --tw-enter-opacity: 0;
   }
@@ -4379,14 +2404,6 @@
     --tw-exit-scale: .95;
   }
 
-  .data-vertical\:flex-col[data-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  .data-vertical\:items-stretch[data-orientation="vertical"] {
-    align-items: stretch;
-  }
-
   .\[\&_svg\]\:pointer-events-none svg {
     pointer-events: none;
   }
@@ -4480,38 +2497,92 @@
     height: calc(var(--spacing) * 3) !important;
   }
 
-  .review-ui :where(button, select, input, textarea, [tabindex]):focus-visible {
+  .review-ui :where(button, select, input, textarea, a[href], [tabindex]):focus-visible {
     outline: 2px solid var(--ring);
     outline-offset: 2px;
     box-shadow: none;
   }
 
-  .shell-destinations .segmented-control {
+  .comparison-host .comparison-context-row {
+    border-block: 1px solid var(--border);
+    white-space: normal;
+    border-radius: 0;
+    width: 100%;
+    height: auto;
+    min-height: 44px;
+    padding: 10px 16px;
+    font-size: 12px;
+    display: flex;
+  }
+
+  .comparison-host .comparison-surface :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+
+  .filter-button[aria-pressed="true"] {
+    background: var(--accent);
+    color: var(--accent-foreground);
+    border-color: var(--border);
+  }
+
+  .filter-button[aria-pressed="true"]:hover {
+    background: var(--accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .filter-button[aria-pressed="true"]:hover {
+      background: color-mix(in oklab, var(--accent) 80%, var(--card));
+    }
+  }
+
+  #toolbarCount {
+    color: inherit;
+    background: var(--muted);
+  }
+
+  #commentsButton[aria-expanded="true"] #toolbarCount {
+    background: var(--card);
+  }
+
+  .segmented-control {
+    border-radius: var(--radius);
     background: var(--card);
+    width: fit-content;
     max-width: 100%;
     min-height: 32px;
     box-shadow: inset 0 0 0 1px var(--border);
     isolation: isolate;
     border: 0;
-    border-radius: 8px;
+    flex-wrap: wrap;
     gap: 0;
     padding: 0;
+    display: flex;
   }
 
-  .shell-destinations .segmented-control > button {
+  .segmented-control > button {
     isolation: isolate;
+    border-radius: var(--radius);
     height: auto;
     min-height: 32px;
     box-shadow: none;
     white-space: normal;
     background: none;
     border: 0;
-    border-radius: 8px;
     padding: 0 12px;
     position: relative;
   }
 
-  .shell-destinations .segmented-control > button:before {
+  .segmented-control > button[data-size="sm"] {
+    min-height: 28px;
+    padding-inline: 8px;
+  }
+
+  .segmented-control:has( > button[data-size="sm"]) {
+    min-height: 28px;
+  }
+
+  .segmented-control > button:before {
     content: "";
     z-index: -1;
     pointer-events: none;
@@ -4520,19 +2591,23 @@
     inset: 3px;
   }
 
-  .shell-destinations .segmented-control > button:hover:before {
+  .segmented-control > button:hover, .segmented-control > button[data-state="open"] {
+    background: none;
+  }
+
+  .segmented-control > button:hover:before {
     background: var(--secondary);
   }
 
-  .shell-destinations .segmented-control > button[aria-pressed="true"] {
+  .segmented-control > button[aria-pressed="true"] {
     color: var(--accent-foreground);
   }
 
-  .shell-destinations .segmented-control > button[aria-pressed="true"]:before {
+  .segmented-control > button[aria-pressed="true"]:before {
     background: var(--accent);
   }
 
-  .shell-destinations .segmented-control > button:focus-visible {
+  .segmented-control > button:focus-visible {
     outline: 2px solid var(--ring);
     outline-offset: 2px;
     z-index: 1;
@@ -4735,50 +2810,11 @@
 }
 
 :root, .review-ui {
-  --canvas: var(--background);
-  --panel: var(--card);
-  --card-border: var(--border);
-  --hair: var(--border);
-  --hair-2: var(--border);
-  --dash: var(--border);
-  --strong-border: var(--input);
-  --txt: var(--foreground);
-  --strong-txt: var(--foreground);
-  --mute: var(--muted-foreground);
-  --mute-2: var(--muted-foreground);
-  --faint: var(--muted-foreground);
-  --faint-2: var(--muted-foreground);
-  --soft: var(--muted);
-  --chip: var(--secondary);
-  --input-bg: var(--card);
-  --focus: var(--ring);
-  --danger: var(--destructive);
-  --danger-soft: var(--review-removed);
-  --amber: var(--annotation-border);
-  --green: var(--review-added-foreground);
-  --btn-bg: var(--primary);
-  --btn-fg: var(--primary-foreground);
-  --diff-paper: var(--card);
-  --diff-ink: var(--foreground);
-  --diff-muted: var(--muted-foreground);
-  --diff-line: var(--border);
-  --diff-removed: var(--review-removed);
-  --diff-added: var(--review-added);
-  --diff-delete: var(--review-delete);
-  --diff-insert: var(--review-insert);
-  --diff-delete-ink: var(--review-removed-foreground);
-  --diff-insert-ink: var(--review-added-foreground);
-  --diff-gap: var(--muted);
-  --diff-accent: var(--review-modified-foreground);
-  --focus-ring: 0 0 0 3px var(--ring);
-  --review-shadow: 0 8px 24px var(--review-shadow-color), 0 1px 3px var(--review-shadow-color);
-}
-
-.review-ui {
   --radius: .5rem;
   --radius-md: var(--radius);
   --review-control-height: 2rem;
-  --review-control-height-touch: 2.5rem;
+  --review-control-height-sm: 1.75rem;
+  --review-control-height-xs: 1.5rem;
   --review-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --review-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
   --review-text-xs: .75rem;
@@ -5057,6 +3093,12 @@
   inherits: false
 }
 
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
@@ -5072,4 +3114,259 @@
     filter: blur(var(--tw-exit-blur, 0));
   }
 }
+@layer components {
+  .durable-review { --conversation-top: calc(var(--toolbar-h) + 8px); }
+  .durable-review[data-conversation-docked="true"] .stage { margin-right: 380px; }
+  .durable-review[data-conversation-docked="true"] .conversation-panel { box-shadow: none; }
+  .durable-review .shell-toolbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "destinations status tools"; }
+  .durable-review .shell-status { grid-area: status; justify-self: center; display: flex; align-items: center; }
+  .durable-review .shell-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+  .durable-review .shell-mode { justify-self: end; }
+  .durable-review #reviewPage { max-width: min(14rem, 100%); }
+  .conversation-global-status { grid-column: 1 / -1; min-width: 0; padding: 3px 0; max-height: min(25dvh, 10rem); overflow: auto; overflow-wrap: anywhere; color: var(--foreground); font-size: 12px; }
+  .conversation-panel { --conversation-scrollbar: 0px; --conversation-rail: max(12px, var(--conversation-scrollbar)); position: fixed; inset: var(--toolbar-h) 0 0 auto; width: min(380px, calc(100vw - 32px)); z-index: 75; display: flex; flex-direction: column; min-height: 0; overflow: clip; border-left: 1px solid var(--border); background: var(--card); color: var(--foreground); box-shadow: -12px 0 34px var(--review-shadow-color); font-family: var(--review-font-sans); font-size: 13px; }
+  .conversation-panel.is-adjacent { z-index: 40; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: var(--shadow-lg); }
+  .conversation-panel.is-adjacent .conversation-inventory { padding: 0; background: var(--card); }
+  .conversation-panel.is-adjacent .conversation-thread { border: 0; background: transparent; }
+  .conversation-panel.is-adjacent .conversation-thread-title { border: 0; padding-left: 0; }
+  .conversation-panel [hidden], .conversation-panel[hidden] { display: none !important; }
+  .conversation-panel-header, .conversation-thread > header, .conversation-comparison > header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
+  .conversation-comparison h2 { flex: 1; margin: 0; font-size: 16px; }
+  .conversation-panel-header { flex-shrink: 0; padding: 12px var(--conversation-rail); }
+  .conversation-panel-header .segmented-control { margin-right: auto; }
+  .conversation-focus-navigation { flex: 0 0 auto; padding: 4px var(--conversation-rail); }
+  .conversation-panel.is-adjacent .conversation-panel-header { padding: 8px; }
+  .conversation-overview { flex: 0 1 auto; min-height: 0; overflow: auto; }
+  .conversation-status { padding: 6px var(--conversation-rail); display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; border-bottom: 1px solid var(--border); }
+  .conversation-status span { color: var(--muted-foreground); }
+  .conversation-notice { font-size: 12px; padding: 0 var(--conversation-rail); }
+  .conversation-filters { display: flex; gap: 6px; padding: 6px var(--conversation-rail); flex-wrap: wrap; }
+  .conversation-filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+  .conversation-filter-buttons button, .conversation-panel-header .segmented-control > button { height: var(--review-control-height); min-height: var(--review-control-height); }
+  .conversation-panel-header .segmented-control { min-height: var(--review-control-height); }
+  .conversation-toast-viewport { position: fixed; top: 8px; left: 16px; z-index: var(--review-layer-notice); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 0; list-style: none; outline: none; }
+  .conversation-toast { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); font-size: 13px; overflow-wrap: anywhere; }
+  .conversation-toast > :first-child { min-width: 0; flex: 1; }
+  .conversation-toast:focus-visible, .conversation-toast-viewport:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .conversation-toast > [data-radix-toast-announce-exclude] { margin-left: auto; }
+  .conversation-inventory { flex: 1; min-height: 50px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px max(0px, calc(var(--conversation-rail) - var(--conversation-scrollbar))) 18px; scrollbar-gutter: stable both-edges; background: var(--card); }
+  .conversation-comments { display: contents; }
+  .conversation-section-toggle { justify-content: flex-start; margin-bottom: 8px; font-weight: 600; }
+  .conversation-thread { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: var(--card); min-width: 0; }
+  .conversation-thread > header { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 0 0 6px; border: 0; border-bottom: 1px solid var(--border); gap: 4px; align-items: stretch; margin-bottom: 6px; }
+  .conversation-thread-toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
+  .conversation-thread-identity { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
+  .conversation-thread-identity .conversation-source { flex: 0 1 auto; }
+  .conversation-source { min-width: 0; flex: 1; font-size: 12px; line-height: 1.4; color: var(--muted-foreground); }
+  .conversation-target-quote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+  .conversation-thread-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+  .conversation-thread .conversation-activity { flex-shrink: 0; padding: 0; }
+  .conversation-thread { padding: 8px; }
+  .conversation-thread[data-status="resolved"] { background: color-mix(in oklab, var(--muted) 30%, var(--card)); }
+  .conversation-thread[data-expanded="false"] > header { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
+  .conversation-activity > span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
+  .conversation-pending { font-size: 11px; color: var(--muted-foreground); }
+  .conversation-status-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; vertical-align: middle; border-radius: 4px; color: var(--muted-foreground); }
+  .conversation-status-icon[data-modified="true"] { color: var(--review-modified-foreground); }
+  .conversation-delivery { margin-left: auto; }
+  .conversation-thread .conversation-icon { padding: 0; }
+  .conversation-jump { flex-shrink: 0; gap: 4px; }
+  .conversation-author { display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); font-size: 12px; }
+  .conversation-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 11px; }
+  .conversation-time:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
+  .conversation-peers { display: grid; gap: 4px; width: 100%; min-width: 0; font-size: 12px; color: var(--muted-foreground); }
+  .conversation-peers .choice-trigger { width: 100%; }
+  .conversation-target-details { margin-top: 8px; font-size: 11px; color: var(--muted-foreground); }
+  .conversation-target-details summary { cursor: pointer; }
+  .conversation-target-status { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--muted-foreground); }
+  .is-adjacent .conversation-overview { max-height: 90px; }
+  .conversation-reply { flex: 0 0 auto; padding-top: 4px; }
+  .conversation-thread-content { min-height: 0; }
+  .conversation-transcript { padding: 0; overflow-wrap: anywhere; }
+  .conversation-earlier { color: var(--muted-foreground); margin-bottom: 8px; padding-inline: 0; }
+  .conversation-context-error { color: var(--destructive); font-size: 12px; }
+  .conversation-exchange { padding: 0 0 8px; margin-bottom: 8px; }
+  .conversation-exchange:last-of-type { border-bottom: 0; padding-bottom: 4px; margin-bottom: 0; }
+  .conversation-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--muted-foreground); }
+  .conversation-panel p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; line-height: 1.5; }
+  .conversation-panel .conversation-body { margin: 4px 0 6px; font-size: 13px; }
+  .conversation-thread .conversation-actions { gap: 4px; font-size: 12px; }
+  .conversation-thread [data-reply] { padding-inline: 8px; height: var(--review-control-height-sm); }
+  .conversation-thread .conversation-actions [data-reply] { margin-left: auto; }
+  .conversation-response { margin-top: 14px; }
+  .conversation-composer { padding: 10px 0 0; min-width: 0; display: grid; gap: 8px; background: transparent; }
+  .conversation-thread .conversation-composer { border-top: 1px solid var(--border); }
+  .conversation-thread .conversation-exchange .conversation-composer { border-top: 0; padding-top: 4px; }
+  .conversation-composer textarea { background: var(--card); border-color: var(--input); }
+  .conversation-composer-heading, .conversation-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+  .conversation-composer-heading > label { font-weight: 600; }
+  .conversation-composer > label:first-child { font-weight: 600; }
+  .conversation-composer-actions > button { flex-shrink: 0; }
+  .conversation-new-target { min-width: 0; }
+  .conversation-panel.is-composing { border: 1px solid var(--border); border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-lg); overflow: clip; }
+  .is-composing .conversation-inventory { flex: none; min-height: 0; padding: 0; overflow: visible; scrollbar-gutter: auto; background: var(--card); }
+  .conversation-new-message { padding: 12px; }
+  .conversation-new-message .compose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+  .conversation-new-message .quote { margin: 0 0 10px; font-size: 12px; color: var(--muted-foreground); }
+  .conversation-new-message .conversation-composer { padding: 0; background: transparent; }
+  .conversation-composer textarea { min-height: 56px; height: 72px; max-height: 24dvh; resize: vertical; font-size: 13px; }
+  .conversation-intent { display: flex; align-items: center; gap: 6px; font-size: 12px; }
+  .conversation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
+  .conversation-actions label, .conversation-edits label { display: inline-flex; align-items: center; gap: 6px; }
+  .conversation-panel footer { flex: 0 0 auto; border-top: 1px solid var(--border); }
+  .conversation-panel .conversation-footer { flex: 0 1 auto; min-height: 0; max-height: min(60dvh, 480px); display: flex; flex-direction: column; background: var(--card); }
+  .conversation-footer-controls { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 4px; padding: 4px var(--conversation-rail); }
+  .conversation-footer-controls > button { padding-inline: 6px; }
+  .conversation-footer-details { min-height: 0; display: flex; flex-direction: column; overflow: auto; }
+  .conversation-footer .conversation-composer { min-height: 0; overflow: auto; padding: 12px var(--conversation-rail); gap: 8px; background: var(--card); }
+  .conversation-footer .conversation-composer textarea { min-height: 40px; height: 56px; max-height: min(18dvh, 120px); }
+  .conversation-footer-support { flex-shrink: 0; min-height: 28px; max-height: 100px; overflow: auto; padding: 0 var(--conversation-rail) 8px; overflow-wrap: anywhere; }
+  .conversation-footer .feedback-actions { flex-shrink: 0; padding-inline: var(--conversation-rail); }
+  .conversation-footer .feedback-help { margin: 0; font-size: 12px; line-height: 1.5; }
+  .conversation-note-content { flex: 0 0 auto; min-height: 0; }
+  .conversation-bottom { padding: 0 8px 8px; justify-content: space-between; }
+  .review-recovery { padding: 6px 10px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; color: var(--foreground); font-size: 12px; }
+  .review-recovery-message { color: var(--destructive); }
+  .review-recovery[data-tone="warning"] .review-recovery-message { color: var(--foreground); }
+  .review-recovery p { margin-block: 4px; }
+  .review-recovery code { font-size: 11px; }
+  .review-recovery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-block: 4px; }
+  .review-recovery-actions > button { max-width: 100%; height: auto; min-height: 28px; white-space: normal; text-align: start; }
+  .conversation-history, .conversation-edits { padding: 8px 0; }
+  .conversation-panel.has-history .conversation-new-message { display: none; }
+  .conversation-capture-warning { font-size: 12px; color: var(--foreground); }
+  .conversation-history h3, .conversation-edits h3 { font-size: 14px; margin: 6px 0; }
+  .conversation-submission { min-width: 0; overflow-wrap: anywhere; }
+  .conversation-submission > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; border-radius: var(--radius); }
+  .conversation-submission > summary::-webkit-details-marker { display: none; }
+  .conversation-submission > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .conversation-submission-heading { flex: 1; min-width: 0; }
+  .conversation-submission > summary .conversation-time { display: block; width: fit-content; margin-top: 2px; font-weight: 400; color: var(--muted-foreground); font-size: 11px; }
+  .conversation-submission-chevron { margin-top: 4px; color: var(--muted-foreground); }
+  .conversation-submission[open] > summary .conversation-submission-chevron { transform: rotate(90deg); }
+  .conversation-submission-content { font-size: 12px; }
+  .conversation-abandon { margin-top: 6px; }
+  .conversation-submission h4 { margin: 12px 0 6px; font-size: 13px; }
+  .conversation-result { padding-block: 6px; }
+  .conversation-edits pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
+  .has-focus .conversation-inventory { overflow: hidden; display: flex; scrollbar-gutter: auto; padding-inline: var(--conversation-rail); }
+  .has-focus .focused { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; padding-inline: max(8px, calc(var(--thread-scrollbar, 0px) + 4px)); }
+  .has-focus .focused[data-expanded="false"] { flex: 0 0 auto; width: 100%; align-self: flex-start; }
+  .has-focus .focused > header { flex-shrink: 0; }
+  .has-focus .focused .conversation-thread-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .has-focus .focused .conversation-transcript { flex: 0 1 auto; min-height: 0; padding-inline: 4px; margin-inline: calc(-4px - var(--thread-scrollbar, 0px)); overflow: auto; scrollbar-gutter: stable both-edges; overscroll-behavior: contain; }
+  .has-focus .focused .conversation-composer { flex: 0 0 auto; border-top: 1px solid var(--border); }
+  .conversation-resolution-guard { padding-block: 8px; font-size: 12px; }
+  .is-adjacent .conversation-inventory { min-height: 0; }
+  .conversation-result-peek { padding: 8px; margin: 0 0 8px; }
+  .conversation-result-peek-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
+  .conversation-result-peek-heading h3 { margin: 0; font-size: 14px; }
+  .conversation-result-peek-heading .inventory-meta { margin: 0; }
+  .conversation-result-peek-heading time { font-size: 11px; color: var(--muted-foreground); }
+  .conversation-result-preview { margin: 2px 0 8px; font-size: 13px; line-height: 20px; max-height: 80px; overflow: hidden; overflow-wrap: anywhere; }
+  .conversation-result-preview.is-expanded { max-height: none; overflow: visible; }
+  .conversation-result-peek .conversation-actions span { font-size: 12px; color: var(--muted-foreground); }
+  .conversation-result-replies { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
+  .conversation-result-reply-label { display: grid; flex: 1; gap: 2px; min-width: 0; line-height: 1.5; }
+  .conversation-result-reply-excerpt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+  .conversation-reply-navigation { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+  .conversation-reply-navigation > div { display: flex; align-items: center; gap: 4px; }
+  .conversation-reply-navigation [role="status"] { white-space: nowrap; font-size: 11px; color: var(--muted-foreground); }
+  .conversation-edit-list > li { display: block; padding: 8px 0; }
+  .conversation-edit-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+  .conversation-edit-heading label { display: flex; align-items: center; gap: 6px; }
+  .conversation-edit-preview { margin: 8px 0; font-size: 13px; }
+  .conversation-edit-preview > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; }
+  .conversation-edit-preview dt { color: var(--muted-foreground); }
+  .conversation-edit-preview dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+  .conversation-edit-details pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .conversation-result-note { padding: 12px; margin-bottom: 12px; font-size: 13px; }
+  .conversation-result-note h2 { margin: 6px 0; font-size: 17px; }
+  .conversation-result-note h3 { font-size: 14px; }
+  .conversation-result-body { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .conversation-comparison { position: fixed; inset: var(--toolbar-h) 0 0; z-index: 50; overflow: auto; padding: 12px; scroll-padding-top: var(--comparison-header-height, 0px); background: var(--background); color: var(--foreground); font: 14px/1.55 var(--review-font-sans); }
+  .conversation-comparison-sticky { position: sticky; top: -12px; z-index: 2; background: var(--background); }
+  .conversation-comparison-title { display: flex; align-items: center; gap: 16px; padding-block: 8px; }
+  .conversation-comparison-title h2 { margin: 0; font-size: 17px; }
+  .conversation-comparison > .conversation-result-note { max-width: 72ch; margin-inline: auto; }
+  .conversation-comparison:not(:has(.comparison-surface)) > :not(.conversation-comparison-sticky) { max-width: 72ch; margin-inline: auto; }
+  .conversation-result-note :is(h2, h3, p) { margin-block: 8px; }
+  .conversation-comparison-summary { font-size: 13px; overflow-wrap: anywhere; }
+  .conversation-comparison > header { background: var(--background); }
+  .conversation-comparison-tools { padding: 0; }
+  .conversation-comparison[hidden] { display: none; }
+  .conversation-comparison .changes-toolbar { width: 100%; }
+  .message-markdown { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; line-height: 1.5; }
+  .message-markdown > :first-child { margin-top: 0; }
+  .message-markdown > :last-child { margin-bottom: 0; }
+  .message-markdown p { white-space: pre-wrap; margin: 6px 0; }
+  .message-markdown :is(ul, ol) { margin: 6px 0; padding-left: 22px; }
+  .message-markdown ul { list-style: disc; }
+  .message-markdown ol { list-style: decimal; }
+  .message-markdown li { margin-block: 3px; }
+  .message-markdown h4 { font-size: 1em; font-weight: 600; margin: 10px 0 6px; }
+  .message-markdown blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding-left: 10px; }
+  .message-markdown code { font-family: var(--review-font-mono); font-size: .92em; white-space: pre-wrap; }
+  .message-markdown pre { max-width: 100%; overflow: auto; padding: 8px; background: var(--muted); border-radius: 4px; }
+  .message-markdown pre code { white-space: pre; }
+  .message-markdown a { color: var(--primary); text-decoration: underline; }
+  .message-table { max-width: 100%; overflow: auto; }
+  .message-table table { width: 100%; border-collapse: collapse; }
+  .message-table :is(th, td) { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
+  @media (max-width: 760px) {
+    .durable-review .shell-toolbar, .durable-review.comparing .shell-toolbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "destinations status ." "tools tools tools"; }
+    .durable-review .shell-tools { justify-content: space-between; flex-wrap: wrap; }
+  }
+  @media (max-width: 640px) {
+    .durable-review .shell-toolbar, .durable-review.comparing .shell-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "destinations status" "tools tools"; }
+  }
+  .durable-review[data-conversation-short="true"] .conversation-panel-header { padding-block: 4px; }
+  .durable-review[data-conversation-short="true"] .conversation-composer { padding: 4px 0; gap: 3px; }
+  .durable-review[data-conversation-short="true"] .conversation-composer textarea { min-height: 36px; height: 40px; }
+  .durable-review[data-conversation-short="true"] .conversation-footer { max-height: calc(100dvh - var(--toolbar-h) - 64px); }
+  .durable-review[data-conversation-short="true"] .conversation-footer .conversation-composer { padding: 4px var(--conversation-rail); gap: 3px; }
+  .durable-review[data-conversation-short="true"] .conversation-footer textarea { height: 36px; max-height: 60px; }
+  .durable-review[data-conversation-short="true"] .conversation-footer .feedback-actions { padding-bottom: 6px; }
+  .durable-review[data-conversation-short="true"] .conversation-status { max-height: 50px; overflow: auto; }
+  .durable-review[data-conversation-short="true"] .has-focus .conversation-status { max-height: 32px; }
+  .durable-review[data-conversation-short="true"] .has-focus .focused:has(.conversation-composer) .conversation-thread-content { min-height: auto; }
+  .durable-review[data-conversation-short="true"] .has-focus .focused:has(.conversation-composer) .conversation-transcript { min-height: 48px; flex-basis: 48px; }
+  .durable-review[data-conversation-short="true"] .conversation-panel.has-focus:not(.is-adjacent) .focused .conversation-thread-content { min-height: 0; }
+  .durable-review[data-conversation-short="true"] .conversation-panel.has-reply-navigation .focused .conversation-transcript { min-height: 32px; }
+  .durable-review[data-conversation-short="true"] .has-focus .conversation-target-status { width: auto; flex: 1; }
+  @media (max-width: 480px) and (max-height: 550px) {
+    .durable-review #modeButton { padding-inline: 8px; gap: 4px; }
+    .durable-review #modeButton > svg:first-child { display: none; }
+    .conversation-panel-header { padding-block: 4px; flex-wrap: nowrap; }
+    .conversation-footer .conversation-composer > label:first-child {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+    }
+    .conversation-thread .conversation-composer > label:first-child {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+    }
+    .conversation-thread > header { margin-bottom: 4px; }
+    .conversation-panel .conversation-body { margin-bottom: 4px; }
+    .conversation-panel:not(.has-focus) .conversation-thread:has(.conversation-composer) > header {
+      position: sticky; top: 0; z-index: 1; background: var(--card);
+    }
+    .conversation-overview { display: flex; flex-direction: column; flex-shrink: 0; max-height: 32%; }
+    .conversation-filters { order: -1; padding-block: 4px; gap: 4px; flex-shrink: 0; }
+    .conversation-inventory { padding-block: 8px; }
+    .conversation-section-toggle { height: 24px; margin-bottom: 4px; }
+    .conversation-empty-with-edits { display: none; }
+    .conversation-edits { padding-block: 0; }
+    .conversation-edits h3 { margin-block: 0; }
+    .conversation-edit-list > li { padding-block: 4px; }
+  }
+}
+@layer utilities {
+  @media (max-width: 480px) {
+    .durable-review #commentsButton { padding-inline: 8px; gap: 4px; }
+    .durable-review #commentsButton [data-slot="badge"] { padding-inline: 6px; }
+  }
+  @media (max-width: 480px) and (max-height: 550px) {
+    .conversation-filter-buttons button { padding-inline: 6px; }
+    .conversation-panel-header [data-slot="badge"] { padding-inline: 2px; }
+  }
+}
 /*$vite$:1*/