@materialwebunofficial/antigravity-themes 0.0.0-stage → 1.0.0

package/themes/md3e.css

@@ -0,0 +1,1206 @@
+/* ==========================================================================
+   "Material 3 Expressive": a theme for Antigravity Desktop (tested with 2.28)
+
+   Built on the real system: every value below reads a --md-sys-* token from
+   @materialwebunofficial/md3e-web (themes/md3e-tokens.css, generated by
+   tools/build-md3e.mjs): the dark and light "expressive" color schemes from Material
+   Color Utilities, the M3 type scale in Roboto (the package's variable
+   font, registered by theme-host.js), the shape scale, state-layer
+   opacities, elevation levels and the expressive spring motion tokens.
+   theme-host.js adds M3 ripples (AndroidX timing) on a separate layer.
+
+   Antigravity is React + Tailwind and can only be restyled, not rebuilt
+   from md3e-web components; this file maps the system onto its controls.
+
+   Performance rules: tokens first; rules end in an id, class or one
+   attribute; no blur; :has() and masks only on a few small elements;
+   transitions only on color, opacity, transform, and border-radius of small
+   controls; nothing loops.
+   Scope: :root[data-agy-theme="md3e"]; seed preset via data-agy-seed.
+   ========================================================================== */
+
+
+/* 00 — Local helpers on top of the system tokens -------------------------- */
+:root[data-agy-theme="md3e"] {
+  --md-hover: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+  --md-press: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
+  --md-primary-hover: color-mix(in srgb, var(--md-sys-color-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+  /* opaque hover for the sidebar rows: the app pairs the row and its action
+     gradient through --sidebar-muted, so the state layer must be solid */
+  --md-nav-hover: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container));
+  --md-fast: var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast-easing);
+  --md-color-fast: var(--md-sys-motion-effect-fast-duration) var(--md-sys-motion-effect-fast-easing);
+  /* hover/highlight state layers: M3's own 15ms linear (md-ripple, Compose
+     StateLayer); the 225ms effects curve made hover trail the pointer */
+  --md-state: 15ms linear;
+  /* code accents: the fixed-dim tones read on dark surfaces; on light ones
+     the on-fixed-variant tones do (light override below) */
+  --md-code-accent: var(--md-sys-color-primary-fixed-dim);
+  --md-code-accent-2: var(--md-sys-color-tertiary-fixed-dim);
+}
+/* Light mode: theme-host.js mirrors the app's own setting (System / Light /
+   Dark, marked on <body>) as data-agy-mode; md3e-tokens.css holds the light
+   schemes, so every rule below follows on its own */
+:root[data-agy-theme="md3e"][data-agy-mode="light"] {
+  --md-code-accent: var(--md-sys-color-on-primary-fixed-variant);
+  --md-code-accent-2: var(--md-sys-color-on-tertiary-fixed-variant);
+}
+
+
+/* 01 — Bridge: app tokens (inline on <html>, hence !important) ------------ */
+:root[data-agy-theme="md3e"] {
+  --background: var(--md-sys-color-surface-container) !important;   /* window; the body pane re-points it (10) */
+  --content: var(--md-sys-color-surface) !important;
+  --foreground: var(--md-sys-color-on-surface) !important;
+  --primary: var(--md-sys-color-primary) !important;
+  --primary-foreground: var(--md-sys-color-on-primary) !important;
+  --secondary: var(--md-sys-color-surface-container-highest) !important;
+  --secondary-foreground: var(--md-sys-color-on-surface-variant) !important;
+  --muted: var(--md-sys-color-surface-container) !important;
+  --muted-foreground: var(--md-sys-color-on-surface-variant) !important;
+  --placeholder: var(--md-sys-color-on-surface-variant) !important;
+  --border: var(--md-sys-color-outline-variant) !important;
+  --card: var(--md-sys-color-surface-container-high) !important;
+  --card-border: var(--md-sys-color-outline-variant) !important;
+  --sidebar: var(--md-sys-color-surface-container) !important;
+  --sidebar-secondary: var(--md-sys-color-secondary-container) !important;
+  --sidebar-muted: var(--md-nav-hover) !important;
+  --link: var(--md-sys-color-primary) !important;
+  --code-foreground: var(--md-sys-color-on-surface) !important;
+  --success: var(--md-sys-color-tertiary) !important;
+  --warning: var(--md-sys-color-tertiary) !important;
+  --error: var(--md-sys-color-error) !important;
+}
+
+:root[data-agy-theme="md3e"] {
+  --font-sans: var(--md-sys-typescale-font-family);
+  --ring: var(--md-sys-color-secondary);
+  --ease-expo-out: var(--md-sys-motion-spatial-fast-easing);   /* the app's own popup/panel transitions */
+}
+
+:root[data-agy-theme="md3e"] body {
+  --focus-ring-color: var(--md-sys-color-secondary);
+  font-family: var(--md-sys-typescale-font-family);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Code colors from the scheme. The app writes its code-color setting inline
+   on <body> (hence !important); while the theme is on, it owns them. */
+:root[data-agy-theme="md3e"] .theme-dark,
+:root[data-agy-theme="md3e"] .theme-light {
+  --syntax-default-fg: var(--md-sys-color-on-surface) !important;
+  --syntax-comment: var(--md-sys-color-outline) !important;
+  --syntax-punctuation: var(--md-sys-color-on-surface-variant) !important;
+  --syntax-operator: var(--md-sys-color-on-surface-variant) !important;
+  --syntax-variable: var(--md-sys-color-on-surface) !important;
+  --syntax-keyword: var(--md-sys-color-primary) !important;
+  --syntax-string: var(--md-sys-color-tertiary) !important;
+  --syntax-attr-value: var(--md-sys-color-tertiary) !important;
+  --syntax-inserted: var(--md-sys-color-tertiary) !important;
+  --syntax-attr-name: var(--md-sys-color-secondary) !important;
+  --syntax-builtin: var(--md-sys-color-secondary) !important;
+  --syntax-function: var(--md-code-accent) !important;
+  --syntax-class-name: var(--md-code-accent) !important;
+  --syntax-number: var(--md-code-accent-2) !important;
+  --syntax-constant: var(--md-code-accent-2) !important;
+  --syntax-property: var(--md-sys-color-secondary) !important;
+  --syntax-tag: var(--md-sys-color-error) !important;
+  --syntax-deleted: var(--md-sys-color-error) !important;
+  --syntax-regex: var(--md-code-accent-2) !important;
+  --bg-selection: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent) !important;
+  --bg-selection-overlay: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent) !important;
+  --bg-cursor-line: var(--md-hover) !important;
+}
+
+
+/* 02 — Bridge: VS Code vars (inline on <html>) ---------------------------- */
+:root[data-agy-theme="md3e"] {
+  --vscode-foreground: var(--md-sys-color-on-surface) !important;
+  --vscode-focusBorder: var(--md-sys-color-secondary) !important;
+  --vscode-textLink-foreground: var(--md-sys-color-primary) !important;
+  --vscode-textCodeBlock-background: var(--md-sys-color-surface-container) !important;
+  --vscode-sideBar-background: var(--md-sys-color-surface-container) !important;
+  --vscode-editor-background: var(--md-sys-color-surface-container-lowest) !important;
+  --vscode-editor-foreground: var(--md-sys-color-on-surface) !important;
+  --vscode-editor-lineHighlightBackground: var(--md-hover) !important;
+  --vscode-editor-selectionBackground: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent) !important;
+  --vscode-editorCursor-foreground: var(--md-sys-color-primary) !important;
+  --vscode-editorLineNumber-foreground: var(--md-sys-color-outline) !important;
+  --vscode-editorLineNumber-activeForeground: var(--md-sys-color-on-surface-variant) !important;
+  --vscode-editor-findMatchBackground: color-mix(in srgb, var(--md-sys-color-tertiary) 40%, transparent) !important;
+  --vscode-editor-findMatchHighlightBackground: color-mix(in srgb, var(--md-sys-color-tertiary) 20%, transparent) !important;
+  --vscode-editorWidget-background: var(--md-sys-color-surface-container) !important;
+  --vscode-editorWidget-border: var(--md-sys-color-outline-variant) !important;
+  --vscode-editorHoverWidget-background: var(--md-sys-color-surface-container) !important;
+  --vscode-editorHoverWidget-border: var(--md-sys-color-outline-variant) !important;
+  --vscode-input-background: var(--md-sys-color-surface-container-high) !important;
+  --vscode-input-border: var(--md-sys-color-outline-variant) !important;
+  --vscode-dropdown-background: var(--md-sys-color-surface-container) !important;
+  --vscode-dropdown-border: var(--md-sys-color-outline-variant) !important;
+  --vscode-button-background: var(--md-sys-color-primary) !important;
+  --vscode-button-foreground: var(--md-sys-color-on-primary) !important;
+  --vscode-button-hoverBackground: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary)) !important;
+  --vscode-badge-background: var(--md-sys-color-secondary-container) !important;
+  --vscode-badge-foreground: var(--md-sys-color-on-secondary-container) !important;
+  --vscode-list-hoverBackground: var(--md-hover) !important;
+  --vscode-list-focusBackground: var(--md-hover) !important;
+  --vscode-list-activeSelectionBackground: var(--md-sys-color-secondary-container) !important;
+  --vscode-list-inactiveSelectionBackground: var(--md-hover) !important;
+  --vscode-scrollbarSlider-background: color-mix(in srgb, var(--md-sys-color-on-surface) 14%, transparent) !important;
+  --vscode-scrollbarSlider-hoverBackground: color-mix(in srgb, var(--md-sys-color-on-surface) 22%, transparent) !important;
+  --vscode-scrollbarSlider-activeBackground: color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent) !important;
+  --vscode-diffEditor-insertedLineBackground: color-mix(in srgb, var(--md-sys-color-tertiary) 12%, transparent) !important;
+  --vscode-diffEditor-insertedTextBackground: color-mix(in srgb, var(--md-sys-color-tertiary) 24%, transparent) !important;
+  --vscode-diffEditor-removedLineBackground: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent) !important;
+  --vscode-diffEditor-removedTextBackground: color-mix(in srgb, var(--md-sys-color-error) 24%, transparent) !important;
+}
+
+/* Find in conversation and in code: every match a tertiary tint, the
+   current one the tertiary container. The app sets these inline; its own
+   ::highlight rules read them crosswise (every match in the "current"
+   color), so they are restated the right way round. */
+:root[data-agy-theme="md3e"] {
+  --editor-find-match-background: color-mix(in srgb, var(--md-sys-color-tertiary) 28%, transparent) !important;
+  --editor-find-current-background: var(--md-sys-color-tertiary-container) !important;
+  --editor-find-current-border: var(--md-sys-color-tertiary) !important;
+}
+:root[data-agy-theme="md3e"] ::highlight(find-match-highlight) {
+  background-color: var(--editor-find-match-background);
+}
+:root[data-agy-theme="md3e"] ::highlight(find-match-current) {
+  background-color: var(--editor-find-current-background);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+:root[data-agy-theme="md3e"] .bg-find-current {  /* app class */
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+
+/* 10 — Layout: navigation on surface-container, an inset surface body ----- */
+:root[data-agy-theme="md3e"] .group\/pane,
+:root[data-agy-theme="md3e"] [data-active-tab-id] + .flex-grow {
+  --background: var(--md-sys-color-surface);
+  --color-background: var(--md-sys-color-surface);
+  background: var(--md-sys-color-surface);
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  overflow: hidden;
+}
+:root[data-agy-theme="md3e"] .group\/pane {
+  width: auto;
+  height: calc(100% - 12px);
+  margin: 0 12px 12px 8px;
+}
+:root[data-agy-theme="md3e"] [data-active-tab-id] + .flex-grow {
+  margin: 0 12px 12px 0;
+}
+:root[data-agy-theme="md3e"] [data-active-tab-id] {
+  border-bottom-color: transparent;
+}
+:root[data-agy-theme="md3e"] .bg-border.flex-shrink-0.z-30.h-full {  /* sidebar | body divider; keeps the sash */
+  background: transparent;
+}
+
+/* Top app bar. The conversation title is title-medium (16/24, 500): the
+   scale has no 18-20px role, and title-large (22px, 400) in a 40px pill
+   read as heavy */
+:root[data-agy-theme="md3e"] [data-testid="breadcrumb-segment"] {
+  height: 36px;
+  padding: 0 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  font: var(--md-sys-typescale-title-medium);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  color: var(--md-sys-color-on-surface);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="breadcrumb-segment"]:hover {
+  background: var(--md-hover);
+}
+/* The text menu bar folds into the app menu button (theme-host.js), which
+   reads and runs these menus: hidden, not removed. data-agy-appmenu is set
+   only once that button exists; until then the rules below style the bar. */
+:root[data-agy-theme="md3e"][data-agy-appmenu] [data-testid="title-menu-bar"] > * {
+  display: none;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] {
+  padding: 0 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"]:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"]:has(+ div) {  /* its menu is open */
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+/* Title bar menus (Antigravity, Workspace, View, Window): the app's own
+   popup, without menu roles, so section 50 never reached it. Same md-menu
+   anatomy: one surface-container-low group (16px, level 2), 44px items with
+   their shape 4px in (12px at the ends), 8% / 10% state layers, label-large;
+   opens with the menu's scale + fade */
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] + div {
+  min-width: 240px;
+  margin-top: 4px;
+  padding: 4px 0;
+  border: 0;
+  border-radius: 16px;
+  background: var(--md-sys-color-surface-container-low);
+  box-shadow: var(--md-sys-elevation-level2);
+  color: var(--md-sys-color-on-surface);
+  transform-origin: top left;
+  transition: scale var(--md-fast), opacity var(--md-color-fast);
+}
+@starting-style {
+  :root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] + div {
+    scale: 0.8;
+    opacity: 0;
+  }
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"] {
+  position: relative;
+  isolation: isolate;
+  min-height: 44px;
+  padding: 0 16px;
+  gap: 12px;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"]::before {
+  content: "";
+  position: absolute;
+  inset: 0 4px;
+  z-index: -1;
+  border-radius: 4px;
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] + div > div:first-child > [data-testid="title-menu-bar-option"]::before {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] + div > div:last-child > [data-testid="title-menu-bar-option"]::before {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"]:hover::before {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"]:focus-visible::before,
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"]:active::before {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"].pointer-events-none,  /* "Version …" and other labels */
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"] > span + span {  /* shortcut */
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 1;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar-option"] > span + span {
+  font: var(--md-sys-typescale-label-large);
+}
+
+/* Conversation navigator (the rail of turn dots on the left): outline-variant
+   dots, the current turn a primary pill that grows on the spatial spring */
+:root[data-agy-theme="md3e"] [data-testid="conversation-navigator-turn"] > span {
+  background: var(--md-sys-color-outline-variant);
+  transition: height var(--md-fast), scale var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-navigator-turn"]:hover > span,
+:root[data-agy-theme="md3e"] [data-testid="conversation-navigator-turn"]:focus-visible > span {
+  background: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-navigator-turn"][data-active="true"] > span {
+  background: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-navigator"][data-mode="dots"] [data-active="true"] > span {
+  height: 12px;   /* 11px pitch: still 2px clear of the 6px neighbours */
+  scale: 1;
+}
+
+
+/* 20 — Navigation drawer --------------------------------------------------- */
+/* Extended FAB: 56px, large corners, primary-container, level 3 */
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"] {
+  height: 56px;
+  margin-bottom: 12px;
+  padding: 0 20px 0 16px;
+  gap: 12px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-primary-container);
+  box-shadow: var(--md-sys-elevation-level3);
+  color: var(--md-sys-color-on-primary-container);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  transition: border-radius var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"]:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 8%, var(--md-sys-color-primary-container));
+}
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"]:active {
+  border-radius: var(--md-sys-shape-corner-medium);
+}
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"] svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Drawer items: 48px, full pill, label-large */
+:root[data-agy-theme="md3e"] [data-testid="history-button"],
+:root[data-agy-theme="md3e"] [data-testid="automations-button"],
+:root[data-agy-theme="md3e"] [data-testid="settings-button"],
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"] ~ a {
+  height: 48px;
+  padding: 0 16px;
+  gap: 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="history-button"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="automations-button"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="settings-button"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"] ~ a:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="history-button"] svg,
+:root[data-agy-theme="md3e"] [data-testid="automations-button"] svg,
+:root[data-agy-theme="md3e"] [data-testid="settings-button"] svg,
+:root[data-agy-theme="md3e"] [data-testid="new-conversation-button"] ~ a svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* The list as an md-navigation-drawer sheet (the package's AndroidX port):
+   destinations inset 12px, group headlines in title-small 16px further in,
+   a divider between groups, and every destination a 20px leading icon, its
+   label at 48px. Rows are 40px, the drawer item's 56px at desktop density
+   (-4); the app's virtual list measures every row, so heights may change. */
+:root[data-agy-theme="md3e"] {
+  --agy-icon-chat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M240 -240 157 -157Q140 -140 118 -149Q96 -159 96 -183V-792Q96 -822 117 -843Q138 -864 168 -864H792Q822 -864 843 -843Q864 -822 864 -792V-312Q864 -282 843 -261Q822 -240 792 -240ZM210 -312H792Q792 -312 792 -312Q792 -312 792 -312V-792Q792 -792 792 -792Q792 -792 792 -792H168Q168 -792 168 -792Q168 -792 168 -792V-270ZM168 -312V-792Q168 -792 168 -792Q168 -792 168 -792Q168 -792 168 -792Q168 -792 168 -792V-312Q168 -312 168 -312Q168 -312 168 -312Z%27/%3E%3C/svg%3E");
+  --agy-icon-chat-fill: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M240 -240 157 -157Q140 -140 118 -149Q96 -159 96 -183V-792Q96 -822 117 -843Q138 -864 168 -864H792Q822 -864 843 -843Q864 -822 864 -792V-312Q864 -282 843 -261Q822 -240 792 -240ZM210 -312H792Q792 -312 792 -312Q792 -312 792 -312V-792Q792 -792 792 -792Q792 -792 792 -792H168Q168 -792 168 -792Q168 -792 168 -792V-270ZM210 -312 168 -270V-792Q168 -792 168 -792Q168 -792 168 -792H792Q792 -792 792 -792Q792 -792 792 -792V-312Q792 -312 792 -312Q792 -312 792 -312Z%27/%3E%3C/svg%3E");
+  --agy-icon-keep: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M624 -744V-480L709 -395Q714 -390 717 -384Q720 -377 720 -369V-348Q720 -333 710 -322Q699 -312 684 -312H516V-90Q516 -75 506 -64Q495 -54 480 -54Q465 -54 454 -64Q444 -75 444 -90V-312H276Q261 -312 250 -322Q240 -333 240 -348V-369Q240 -377 243 -384Q246 -390 251 -395L336 -480V-744H324Q309 -744 298 -754Q288 -765 288 -780Q288 -795 298 -806Q309 -816 324 -816H636Q651 -816 662 -806Q672 -795 672 -780Q672 -765 662 -754Q651 -744 636 -744ZM342 -384H618L552 -450V-744H408V-450ZM480 -384Z%27/%3E%3C/svg%3E");
+  --agy-icon-keep-fill: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 -960 960 960%27%3E%3Cpath d=%27M624 -744V-480L709 -395Q714 -390 717 -384Q720 -377 720 -369V-348Q720 -333 710 -322Q699 -312 684 -312H516V-90Q516 -75 506 -64Q495 -54 480 -54Q465 -54 454 -64Q444 -75 444 -90V-312H276Q261 -312 250 -322Q240 -333 240 -348V-369Q240 -377 243 -384Q246 -390 251 -395L336 -480V-744H324Q309 -744 298 -754Q288 -765 288 -780Q288 -795 298 -806Q309 -816 324 -816H636Q651 -816 662 -806Q672 -795 672 -780Q672 -765 662 -754Q651 -744 636 -744ZM342 -384H618L552 -450V-744H408V-450ZM342 -384 408 -450V-744H552V-450L618 -384Z%27/%3E%3C/svg%3E");
+}
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .px-2,
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .flex.flex-col.gap-px,
+:root[data-agy-theme="md3e"] [data-testid="conversation-list-sidebar"] {
+  padding-inline: 12px;
+}
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .h-px {
+  margin-inline: 28px;
+}
+
+/* Group headlines (the drawer's .headline): title-small, on-surface-variant;
+   the collapse chevron always shown, turning on the spatial spring */
+:root[data-agy-theme="md3e"] [data-testid="section-header"] .group\/section-header {
+  height: 48px;
+  padding: 0 4px 0 16px;
+}
+:root[data-agy-theme="md3e"] [data-testid$="section-header"] h2 {
+  font: var(--md-sys-typescale-title-small);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 1;
+}
+:root[data-agy-theme="md3e"] [data-testid="section-header"] h2 svg {
+  width: 18px;
+  height: 18px;
+  margin-left: 4px;
+  opacity: 1;
+  transition: rotate var(--md-fast);
+}
+/* its actions (sort, new project, new conversation): M3 icon buttons */
+:root[data-agy-theme="md3e"] [data-testid="section-header"] .group\/section-header button[aria-label] {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="section-header"] .group\/section-header button[aria-label]:hover {
+  background: var(--md-hover);
+}
+:root[data-agy-theme="md3e"] [data-testid="section-header"] .group\/section-header button[aria-label] svg {
+  width: 20px;
+  height: 20px;
+}
+/* the 16px spacer between groups (empty, sized inline) carries the divider */
+:root[data-agy-theme="md3e"] [data-testid="conversation-list-sidebar"] [data-index] > div[style]:not([class]):empty::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin-inline: 16px;
+  transform: translateY(8px);
+  background: var(--md-sys-color-outline-variant);
+}
+
+/* Project folders: drawer items of their own; the 24px icon box puts the
+   20px folder / folder_open at 16px and the label at 48px */
+:root[data-agy-theme="md3e"] [data-testid="project-header"] {
+  height: 40px;
+  padding-left: 14px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-on-surface-variant);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="project-header"]:hover {
+  background: var(--md-nav-hover);
+}
+:root[data-agy-theme="md3e"] [data-testid="project-header"] > div > div {
+  gap: 10px;
+}
+:root[data-agy-theme="md3e"] [data-testid="project-header"] .w-6 svg {
+  width: 20px;
+  height: 20px;
+}
+:root[data-agy-theme="md3e"] [data-testid="project-header"] span.truncate {
+  font: inherit;
+  color: var(--md-sys-color-on-surface);
+}
+
+/* Conversation rows. Hover comes from the app's own hover:bg-sidebar-muted,
+   now the solid state layer, so the action buttons' fade gradient
+   (var(--row-bg)) matches it exactly. */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"],
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] > a {
+  border-radius: var(--md-sys-shape-corner-full);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] {
+  isolation: isolate;
+  min-height: 40px;
+  padding: 10px 12px 10px 16px;
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] span {
+  font-weight: 500;
+}
+/* leading icon: chat_bubble, keep when pinned; filled when selected (the
+   drawer item's selectedIcon) */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"]::after {
+  content: "";
+  order: -1;
+  flex: none;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  margin-inline-end: 12px;
+  background: var(--md-sys-color-on-surface-variant);
+  mask: var(--agy-icon-chat) center / 20px 20px no-repeat;
+  pointer-events: none;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-pinned="true"]::after {
+  mask-image: var(--agy-icon-keep);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"]::after {
+  background: var(--md-sys-color-on-secondary-container);
+  mask-image: var(--agy-icon-chat-fill);
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"][data-pinned="true"]::after {
+  mask-image: var(--agy-icon-keep-fill);
+}
+/* trailing time ("8d"): label-medium, the drawer item's badge slot */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] .min-w-4 {
+  font: var(--md-sys-typescale-label-medium);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  font-variant-numeric: tabular-nums;
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 1;
+}
+/* a project's conversations: the row (and its pill) starts 32px in, so its
+   icon sits under the folder's label; a 1px guide runs down from the folder
+   icon on the row's virtual-list slot */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-indented="true"] {
+  width: auto;
+  margin-left: 32px;
+  padding-left: 16px;
+}
+:root[data-agy-theme="md3e"] [data-sidebar-row-id]:has([data-indented="true"]) {
+  background: linear-gradient(var(--md-sys-color-outline-variant), var(--md-sys-color-outline-variant)) 25px 0 / 1px 100% no-repeat;
+}
+/* the action group (kebab, pin, archive) sat 4px past the row's end with
+   square corners; keep it inside the pill (Tailwind class hook) */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] .pl-6.justify-end {
+  right: 0;
+  border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0;
+}
+/* Active indicator: a pill behind the row that springs open sideways */
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"] {
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-secondary-container);
+  animation: agy-md-indicator var(--md-fast) both;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"] span {
+  color: var(--md-sys-color-on-secondary-container);
+  font-weight: 700;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"] .min-w-4 {
+  font-weight: 500;
+}
+@keyframes agy-md-indicator {
+  from { transform: scaleX(0.4); opacity: 0; }
+  to   { transform: none; opacity: 1; }
+}
+
+
+/* 30 — Body ---------------------------------------------------------------- */
+:root[data-agy-theme="md3e"] [role="article"] .leading-relaxed {  /* app class: prose wrapper */
+  font: var(--md-sys-typescale-body-large);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+:root[data-agy-theme="md3e"] [role="article"] h1,
+:root[data-agy-theme="md3e"] [role="article"] h2 {
+  font: var(--md-sys-typescale-headline-small);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [role="article"] h3 {
+  font: var(--md-sys-typescale-title-large);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [role="article"] a {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+:root[data-agy-theme="md3e"] [role="article"] pre > div {
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container);
+  --agy-lineno: var(--md-sys-color-outline);   /* code-tools.js line numbers */
+}
+/* Its header buttons (Copy code, Insert in terminal, At mention, and
+   code-tools.js's Wrap lines / Line numbers): 28px M3 standard icon buttons
+   with a state layer, the row's 28px height kept; a toggle that is on is
+   primary (M3 selected icon button), and the two tool glyphs take the
+   Rounded shapes, as md3e-icons.css does for the app's */
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child {
+  gap: 0;
+}
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > button:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > button:active,
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > button:focus-visible {
+  background: var(--md-press);
+}
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > button > svg {
+  width: 16px;
+  height: 16px;
+}
+:root[data-agy-theme="md3e"] .agy-code > :first-child > :last-child > .agy-code-tool[aria-pressed="true"] {
+  color: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] .agy-code-tool[data-tool="wrap"] path {
+  d: path("M228 -510Q213 -510 202 -520Q192 -531 192 -546Q192 -561 202 -572Q213 -582 228 -582H672Q732 -582 774 -540Q816 -498 816 -438Q816 -378 774 -336Q732 -294 672 -294H570L596 -268Q607 -257 607 -242Q607 -228 596 -217Q585 -206 570 -206Q556 -206 545 -217L457 -305Q452 -310 449 -316Q447 -322 447 -330Q447 -338 449 -344Q452 -350 457 -355L545 -443Q556 -454 570 -454Q584 -454 595 -443Q606 -432 606 -418Q606 -403 595 -392L569 -366H672Q702 -366 723 -387Q744 -408 744 -438Q744 -468 723 -489Q702 -510 672 -510ZM228 -294Q213 -294 202 -304Q192 -315 192 -330Q192 -345 202 -356Q213 -366 228 -366H348Q363 -366 374 -356Q384 -345 384 -330Q384 -315 374 -304Q363 -294 348 -294ZM228 -726Q213 -726 202 -736Q192 -747 192 -762Q192 -777 202 -788Q213 -798 228 -798H732Q747 -798 758 -788Q768 -777 768 -762Q768 -747 758 -736Q747 -726 732 -726Z");
+}
+:root[data-agy-theme="md3e"] .agy-code-tool[data-tool="lines"] path {
+  d: path("M168 -144Q158 -144 151 -151Q144 -158 144 -168Q144 -178 151 -185Q158 -192 168 -192H240V-216H216Q206 -216 199 -223Q192 -230 192 -240Q192 -250 199 -257Q206 -264 216 -264H240V-288H168Q158 -288 151 -295Q144 -302 144 -312Q144 -322 151 -329Q158 -336 168 -336H264Q274 -336 281 -329Q288 -322 288 -312V-264Q288 -254 281 -247Q274 -240 264 -240Q274 -240 281 -233Q288 -226 288 -216V-168Q288 -158 281 -151Q274 -144 264 -144ZM171 -384Q160 -384 152 -392Q144 -400 144 -411V-480Q144 -490 151 -497Q158 -504 168 -504H240V-528H168Q158 -528 151 -535Q144 -542 144 -552Q144 -562 151 -569Q158 -576 168 -576H264Q274 -576 281 -569Q288 -562 288 -552V-480Q288 -470 281 -463Q274 -456 264 -456H192V-432H264Q274 -432 281 -425Q288 -418 288 -408Q288 -398 281 -391Q274 -384 264 -384ZM192 -648V-768H168Q158 -768 151 -775Q144 -782 144 -792Q144 -802 151 -809Q158 -816 168 -816H213Q224 -816 232 -808Q240 -800 240 -789V-648Q240 -638 233 -631Q226 -624 216 -624Q206 -624 199 -631Q192 -638 192 -648ZM396 -240Q381 -240 370 -250Q360 -261 360 -276Q360 -291 370 -302Q381 -312 396 -312H780Q795 -312 806 -302Q816 -291 816 -276Q816 -261 806 -250Q795 -240 780 -240ZM396 -444Q381 -444 370 -454Q360 -465 360 -480Q360 -495 370 -506Q381 -516 396 -516H780Q795 -516 806 -506Q816 -495 816 -480Q816 -465 806 -454Q795 -444 780 -444ZM396 -648Q381 -648 370 -658Q360 -669 360 -684Q360 -699 370 -710Q381 -720 396 -720H780Q795 -720 806 -710Q816 -699 816 -684Q816 -669 806 -658Q795 -648 780 -648Z");
+}
+
+/* User turn: primary-container bubble, asymmetric corner */
+:root[data-agy-theme="md3e"] [data-testid="user-input-step"] .bg-card-border {
+  padding: 0;
+  border-radius: 24px 24px 6px 24px;
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] {
+  padding: 12px 18px;
+  border-radius: 24px 24px 6px 24px;
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .whitespace-pre-wrap {
+  font: var(--md-sys-typescale-body-large);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+/* Its hover actions (time, Copy, Undo): a small M3 floating toolbar. The app
+   draws a 25px halo in the card color (user-input-buttons-shadow) to fade
+   into a card-colored bubble; on the primary-container bubble that halo
+   read as a dark smudge, so the toolbar gets its own surface and level 1 */
+:root[data-agy-theme="md3e"] .user-input-buttons-container {  /* app class */
+  right: 6px;
+  bottom: 6px;
+  gap: 0;
+  padding: 0 4px 0 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-surface-container-high);
+  box-shadow: var(--md-sys-elevation-level1);
+}
+:root[data-agy-theme="md3e"] .user-input-buttons-container > span {
+  margin-right: 4px;
+  font: var(--md-sys-typescale-label-medium);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Standard icon buttons, 32px circle and state layer: the user message's
+   hover actions and the queued messages' Send now / Edit / Delete (the
+   app's ghost icon-sm buttons, square hover) */
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .user-input-buttons-container > button,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-card"] .flex-shrink-0 button,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-expand-button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .user-input-buttons-container > button:hover,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-card"] .flex-shrink-0 button:hover,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-expand-button"]:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .user-input-buttons-container > button:active,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-card"] .flex-shrink-0 button:active,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-expand-button"]:active,
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .user-input-buttons-container > button:focus-visible,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-card"] .flex-shrink-0 button:focus-visible,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-expand-button"]:focus-visible {
+  background: var(--md-press);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] .user-input-buttons-container > button > svg,
+:root[data-agy-theme="md3e"] [data-testid="queued-messages-card"] .flex-shrink-0 button > svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Agent steps (collapsibles and the step rows sharing their classes) as
+   M3 text buttons */
+:root[data-agy-theme="md3e"] [data-testid="thinking-collapsible-trigger"],
+:root[data-agy-theme="md3e"] [data-testid="worked-for-collapsible"],
+:root[data-agy-theme="md3e"] [data-testid="tool-group-collapsible"],
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8 {  /* class hook */
+  width: fit-content;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-primary);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="thinking-collapsible-trigger"] > span,
+:root[data-agy-theme="md3e"] [data-testid="worked-for-collapsible"] > span,
+:root[data-agy-theme="md3e"] [data-testid="tool-group-collapsible"] > span,
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8 > span,
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8 > div,
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8 > div > span,
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8 > svg {
+  color: inherit;
+}
+:root[data-agy-theme="md3e"] [data-testid="thinking-collapsible-trigger"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="worked-for-collapsible"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="tool-group-collapsible"]:hover,
+:root[data-agy-theme="md3e"] [role="article"] button.tabular-nums.min-h-8:hover {
+  background: var(--md-primary-hover);
+}
+
+/* "Working" / "Compacting": the package's loading indicator (put in front
+   by loading-indicator.js) carries the motion, so the app's shimmer sweep
+   stops and the text is plain label-large */
+:root[data-agy-theme="md3e"] [data-testid="agent-loading"] .animate-shimmer-text {
+  animation: none;
+  mask-image: none;
+  color: var(--md-sys-color-on-surface-variant);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+:root[data-agy-theme="md3e"] [data-testid="agent-loading"] > .agy-loader {
+  flex: none;
+  margin-inline-end: 8px;
+}
+
+/* Running work: the package's wavy progress indicator (progress-indicators.js).
+   A running Background Commands row grows by the wave's 10px and carries it
+   along its bottom edge, under the label (past the 16px glyph); the glyph's
+   blinking caret (inline animation) stops, so the wave is the one thing
+   moving. The "N tasks running" status gets a short wave and loses its
+   shimmer. */
+:root[data-agy-theme="md3e"] [data-testid="background-task-row"]:has(> .agy-progress) {
+  height: 42px;
+  padding-bottom: 10px;
+}
+:root[data-agy-theme="md3e"] [data-testid="background-task-row"] > .agy-progress {
+  position: absolute;
+  left: 30px;
+  right: 8px;
+  bottom: 2px;
+  width: auto;
+}
+:root[data-agy-theme="md3e"] [data-testid="status-task-running"] [data-agent-state-caret] {
+  animation: none !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="idle-status-text"] > .agy-progress {
+  flex: none;
+  width: 40px;
+  margin-inline-end: 8px;
+}
+:root[data-agy-theme="md3e"] [data-testid="idle-status-text"] .animate-shimmer-text {
+  animation: none;
+  mask-image: none;
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Turn actions: 40px standard icon buttons */
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Copy"],
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Good response"],
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Bad response"] {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Copy"]:hover,
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Good response"]:hover,
+:root[data-agy-theme="md3e"] [role="article"] [aria-label="Bad response"]:hover {
+  background: var(--md-hover);
+}
+
+/* "N files changed": outlined card; Review: tonal button */
+:root[data-agy-theme="md3e"] .files-changed-header {  /* app class */
+  min-height: 56px;
+  padding: 8px 8px 8px 16px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: transparent;
+  font: var(--md-sys-typescale-body-medium);
+}
+:root[data-agy-theme="md3e"] .files-changed-header > button {
+  height: 40px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font: var(--md-sys-typescale-label-large);
+  transition: background-color var(--md-state);
+}
+/* Review keeps its pill when pressed: the press shape change (pill -> 8px)
+   flashed a dark rounded rectangle behind the label. The press shows as
+   the M3 state layer instead. */
+:root[data-agy-theme="md3e"] .files-changed-header > button:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
+}
+:root[data-agy-theme="md3e"] .files-changed-header > button:active {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 10%, var(--md-sys-color-secondary-container));
+}
+/* Expansion: theme-host.js animates the file list both ways on the same M3
+   Expressive springs (the app mounts and unmounts it at once). Opening used
+   to be a CSS transition to auto here (300ms emphasized from
+   @starting-style), which read as a jump next to the slower close. The
+   chevron turns on the package's overshoot curve. */
+:root[data-agy-theme="md3e"] [data-testid="changed-files-card-header"] svg.transition-transform {
+  transition: rotate 300ms cubic-bezier(0.2, 0, 0, 1.2), transform 300ms cubic-bezier(0.2, 0, 0, 1.2);
+}
+
+/* Scroll to bottom: small FAB. The app fades it and slides it 16px (inline
+   transition, hence !important); M3 FABs scale in and out. scale is its own
+   property, so the app's inline translate stays intact, and scale, opacity
+   and transform run on the compositor: they keep going while the app's
+   click handler holds the main thread. */
+:root[data-agy-theme="md3e"] [aria-label="Scroll to Bottom"] {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: var(--md-sys-color-surface-container-high);
+  box-shadow: var(--md-sys-elevation-level3);
+  color: var(--md-sys-color-primary);
+  transition:
+    scale var(--md-fast),
+    transform var(--md-fast),
+    opacity var(--md-color-fast),
+    border-radius var(--md-fast),
+    background-color var(--md-state),
+    margin-left 500ms var(--ease-expo-out) !important;
+}
+:root[data-agy-theme="md3e"] [aria-label="Scroll to Bottom"].opacity-0 {
+  scale: 0.4;
+}
+:root[data-agy-theme="md3e"] [aria-label="Scroll to Bottom"]:active {
+  border-radius: var(--md-sys-shape-corner-small);
+}
+
+
+/* 40 — Composer: floating dock --------------------------------------------- */
+/* Focus is a container-tone change (M3 search bar), not a ring */
+:root[data-agy-theme="md3e"] [id="antigravity.agentSidePanelInputBox"] {
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: transparent;
+  box-shadow: var(--md-sys-elevation-level3);
+}
+:root[data-agy-theme="md3e"] [id="antigravity.agentSidePanelInputBox"] > div {
+  padding: 8px;
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: var(--md-sys-color-surface-container-high);
+  transition: background-color var(--md-color-fast);
+}
+:root[data-agy-theme="md3e"] [id="antigravity.agentSidePanelInputBox"]:focus-within > div {
+  background: var(--md-sys-color-surface-container-highest);
+}
+:root[data-agy-theme="md3e"] [aria-label="Message input"][contenteditable] {
+  padding: 12px 16px 8px;
+  font: var(--md-sys-typescale-body-large);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  color: var(--md-sys-color-on-surface);
+  caret-color: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] [aria-label="Message input"][contenteditable] + p {
+  top: 12px;
+  left: 16px;
+  right: 16px;
+  font: var(--md-sys-typescale-body-large);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 1;
+}
+:root[data-agy-theme="md3e"] [aria-label="Add context"],
+:root[data-agy-theme="md3e"] [aria-label="Record voice memo"] {
+  width: 40px;
+  height: 40px;
+  padding: 10px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [aria-label="Add context"]:hover,
+:root[data-agy-theme="md3e"] [aria-label="Record voice memo"]:hover {
+  background: var(--md-hover);
+}
+/* Model and mode selectors: md-button, tonal, size xs (32px, 16px padding,
+   8px icon gap, label-large; round 16 -> 8 on press). While the menu is
+   open the button holds the square shape (12) and its arrow turns over. */
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"],
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"] {
+  height: 32px;
+  padding-inline: 16px 12px;
+  gap: 8px;
+  border: 0;
+  border-radius: 16px;
+  background: var(--md-sys-color-secondary-container);
+  box-shadow: var(--md-sys-elevation-level0, none);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-on-secondary-container);
+  transition:
+    border-radius var(--md-fast),
+    box-shadow var(--md-color-fast),
+    background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"]:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
+  box-shadow: var(--md-sys-elevation-level1);
+}
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"][aria-expanded="true"],
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"][aria-expanded="true"] {
+  border-radius: 12px;
+}
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"]:active,
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"]:active {
+  border-radius: 8px;
+}
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"] > svg:last-child,
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"] > svg:last-child {
+  width: 18px;
+  height: 18px;
+  transition: rotate var(--md-fast);
+}
+:root[data-agy-theme="md3e"] [data-testid="model-selector-trigger"][aria-expanded="true"] > svg:last-child,
+:root[data-agy-theme="md3e"] [data-testid="permissions-selector-trigger"][aria-expanded="true"] > svg:last-child {
+  rotate: 180deg;
+}
+/* Send and stop: one 40px icon button in two states, as md-icon-button
+   (size s) does it. Send is round; while the agent runs, stop is the
+   "selected" square (12px). The app swaps the two elements, so each one
+   enters by morphing from the other's shape (@starting-style), with a
+   scale that stays on the compositor. Press: corners spring to 8px. */
+:root[data-agy-theme="md3e"] [data-testid="send-button"],
+:root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] {
+  width: 40px;
+  height: 40px;
+  transition: border-radius var(--md-fast), scale var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="send-button"] {
+  padding: 10px;
+  border-radius: var(--md-sys-shape-corner-full);
+}
+:root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] {
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: var(--md-sys-color-error-container);
+}
+@starting-style {
+  :root[data-agy-theme="md3e"] [data-testid="send-button"] {
+    border-radius: var(--md-sys-shape-corner-medium);
+    scale: 0.8;
+  }
+  :root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] {
+    border-radius: var(--md-sys-shape-corner-full);
+    scale: 0.8;
+  }
+}
+:root[data-agy-theme="md3e"] [data-testid="send-button"]:active,
+:root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"]:active {
+  border-radius: 8px;
+}
+:root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] .bg-red-500 {  /* Tailwind class hook */
+  background: var(--md-sys-color-on-error-container);
+}
+
+
+/* 50 — Menus, tooltips, side sheet ---------------------------------------- */
+/* Menus are md-menu as the package builds it (menu-layout.js, a port of the
+   Compose menu). The app's Base UI menus keep their logic and keyboard
+   handling; only the anatomy changes:
+   - the popup draws no surface; its rows do, as groups 2px apart (the app's
+     separators become the gaps), corners 16 outside and 8 between groups,
+     one elevation-2 shadow over all of them
+   - items sit 4px inside their group: 44px, label-large, corners 4 (12 at
+     the ends of a group); hover/press are 8%/10% state layers
+   - the selected item is a tertiary-container pill (12) whose check slides
+     in at the start, in place of a leading icon
+   - group headers are label-large, 32px */
+:root[data-agy-theme="md3e"] [role="menu"] {
+  --color-card: var(--md-sys-color-surface-container-low);   /* the app's in-menu fades */
+  padding: 0;
+  gap: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)) drop-shadow(0 2px 6px rgb(0 0 0 / 0.15));
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-font-family);
+}
+/* rows: the children of the popup, of a menu group, and of the model panel */
+:root[data-agy-theme="md3e"] :is([role="menu"], [role="menu"] > [role="group"], [data-testid="model-selector-panel"]) > :not([role="separator"], [role="group"], [data-testid="model-selector-panel"]) {
+  overflow: clip;
+  border-radius: 0;
+  background: var(--md-sys-color-surface-container-low);
+}
+:root[data-agy-theme="md3e"] [role="menu"] > [role="group"],
+:root[data-agy-theme="md3e"] [data-testid="model-selector-panel"] {
+  gap: 0;
+  padding: 0;
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] :is([role="menu"], [role="menu"] > [role="group"], [data-testid="model-selector-panel"]) > :first-child {
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
+}
+:root[data-agy-theme="md3e"] :is([role="menu"], [role="menu"] > [role="group"], [data-testid="model-selector-panel"]) > :last-child {
+  border-end-start-radius: 16px;
+  border-end-end-radius: 16px;
+}
+:root[data-agy-theme="md3e"] :is([role="menu"], [role="menu"] > [role="group"], [data-testid="model-selector-panel"]) > [role="separator"] + * {
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+}
+:root[data-agy-theme="md3e"] :is([role="menu"], [role="menu"] > [role="group"], [data-testid="model-selector-panel"]) > :has(+ [role="separator"]) {
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="separator"] {
+  height: 2px;
+  margin: 0;
+  background: transparent;
+}
+/* group headers: Base UI group labels, the model list's "Model", the mode
+   menu's "<Project> Settings" row */
+:root[data-agy-theme="md3e"] [role="menu"] .text-xs.text-muted-foreground.font-medium,
+:root[data-agy-theme="md3e"] [role="menu"] > [role="group"] > div:not([role]):first-child {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 4px 0 12px;
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [role="menu"] > [role="group"] > div:not([role]):first-child .text-xs {
+  font: inherit;
+  color: inherit;
+}
+/* Popup motion, as md-menu does it: scale 0.8 -> 1 from the anchor corner on
+   the expressive fast-spatial spring, alpha on fast-effects; closing returns
+   to 0.8 / 0, both on fast-effects so the menu is gone as soon as it is
+   invisible. The app's popups (.animate-slideIn, Base UI) start at a small
+   translate; Base UI provides --transform-origin from the anchor. */
+:root[data-agy-theme="md3e"] .animate-slideIn {
+  transform-origin: var(--transform-origin, top left);
+  transition:
+    opacity var(--md-color-fast),
+    transform var(--md-fast);
+}
+:root[data-agy-theme="md3e"] .animate-slideIn[data-starting-style],
+:root[data-agy-theme="md3e"] .animate-slideIn[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.8);
+}
+:root[data-agy-theme="md3e"] .animate-slideIn[data-ending-style] {
+  transition:
+    opacity var(--md-color-fast),
+    transform var(--md-color-fast);
+}
+/* items */
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]) {
+  position: relative;
+  isolation: isolate;
+  min-height: 44px;
+  padding: 12px 16px;   /* 4px row inset + 12px item padding */
+  gap: 8px;
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"])::before {
+  content: "";
+  position: absolute;
+  inset: 0 4px;
+  z-index: -1;
+  border-radius: 4px;
+  transition: border-radius var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):first-child::before,
+:root[data-agy-theme="md3e"] [role="menu"] :not([role^="menuitem"]) + :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"])::before {
+  border-start-start-radius: 12px;
+  border-start-end-radius: 12px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):last-child::before,
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):has(+ [role="separator"])::before {
+  border-end-start-radius: 12px;
+  border-end-end-radius: 12px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):is([data-highlighted], :hover)::before {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):is(:focus-visible, :active)::before {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"])[data-disabled] {
+  opacity: 0.38;
+}
+/* leading icons 20px, trailing text and supporting text on-surface-variant */
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] > svg:first-child,
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] > [data-icon] svg {
+  width: 20px;
+  height: 20px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] > :is(svg:first-child, [data-icon], .ml-auto),
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] .text-muted-foreground {
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] .text-muted-foreground {
+  font: var(--md-sys-typescale-body-medium);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  white-space: normal;   /* md-menu wraps supporting text (the app truncates it) */
+}
+/* selected: the app marks it with text-foreground and a trailing check */
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) {
+  color: var(--md-sys-color-on-tertiary-container);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"])::before {
+  border-radius: 12px;
+  background: var(--md-sys-color-tertiary-container);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]):is([data-highlighted], :hover)::before {
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 8%, var(--md-sys-color-tertiary-container));
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) :is(.text-muted-foreground, .ml-auto),
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) > :is(svg:first-child, .ml-auto) {
+  color: inherit;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"] > .ml-auto > span[style*="width"]:last-child,
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) > [data-icon] {
+  display: none;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"])::after {
+  content: "";
+  order: -1;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M389 -369 688 -668Q699 -679 714 -679Q728 -679 739 -668Q750 -657 750 -642Q750 -628 739 -617L415 -292Q404 -281 390 -281Q375 -281 364 -292L221 -435Q210 -446 210 -460Q210 -475 221 -486Q232 -497 246 -497Q261 -497 272 -486Z'/%3E%3C/svg%3E") center / 20px no-repeat;
+  transition: width var(--md-fast), margin var(--md-fast), opacity var(--md-color-fast);
+}
+@starting-style {
+  :root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"])::after {
+    width: 0;
+    margin-inline-end: -8px;
+    opacity: 0;
+  }
+}
+:root[data-agy-theme="md3e"] .compact-tooltip {
+  padding: 4px 8px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  font: var(--md-sys-typescale-body-small);
+}
+:root[data-agy-theme="md3e"] [data-testid="overview-panel-host-gutter"] {
+  padding: 8px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: var(--md-sys-color-surface-container-low);
+  box-shadow: var(--md-sys-elevation-level1);
+}
+:root[data-agy-theme="md3e"] [data-testid^="overview-panel-row-"] {
+  height: 48px;
+  padding: 0 16px;
+  gap: 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  font: var(--md-sys-typescale-label-large);
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid^="overview-panel-row-"]:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"][data-selected="true"]::before {
+    animation: none;
+  }
+}