@materialwebunofficial/antigravity-themes 1.0.5 → 1.0.13

package/themes/md3e.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   AGY "Material 3 Expressive" (v3.1) — Antigravity Desktop 2.26–2.28
+   AGY "Material 3 Expressive" (v3.2) — Antigravity Desktop 2.26–2.31
 
    Built on the real system: every value below reads a --md-sys-* token from
    @materialwebunofficial/md3e-web (themes/md3e-tokens.css, generated by
@@ -164,7 +164,7 @@
   --glass-border: transparent;
   --glass-highlight: transparent;
   --glass-shadow: none;
-  --shell: var(--md-sys-color-surface);
+  --shell: var(--md-sys-color-surface-container);
   --onyx-frame: transparent;
   --onyx-well: var(--md-sys-color-surface-container-highest);
   --onyx-key: var(--md-sys-color-secondary-container);
@@ -209,12 +209,16 @@
 
 /* P2 — Menus, Popovers & Overlays */
 :root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay[role="menu"] {
-  background: var(--md-sys-color-surface-container-low);
-  border-radius: 16px;
-  overflow: visible;
-  border: 0;
-  box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5);
-  backdrop-filter: none;
+  background: var(--md-sys-color-surface-container-low) !important;
+  border-radius: 16px !important;
+  border: 0 !important;
+  box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5) !important;
+  backdrop-filter: none !important;
+  padding: 4px !important;
+  max-height: min(75vh, calc(100vh - 60px)) !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  scrollbar-width: thin;
 }
 :root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay .agy-overlay-item {
   border-radius: 0;
@@ -245,33 +249,79 @@
 }
 
 
-/* 10 — Layout: navigation on surface-container, an inset surface body ----- */
-:root[data-agy-theme="md3e"] .group\/pane,
-:root[data-agy-theme="md3e"] .agy-sheet:not(:has(.group\/pane)) .browser-hole-opaque,
-:root[data-agy-theme="md3e"] [data-active-tab-id] + .flex-grow {
+/* 10 — Layout: panes on the window ----------------------------------------- */
+/* The window is surface-container: the title bar, the drawer, the header
+   rows. The conversation and the side panel are M3 panes on it: surface, with
+   extra-large corners, apart by a spacer. Nothing is outlined: tone and shape
+   tell a pane from the window, as in M3's canonical layouts.
+
+   Since the November update the app lays the panes out itself (.agy-sheet,
+   with --card-gap, --card-radius, --card-edge and --shell-canvas), so the
+   theme only sets those variables: the app's margins, its sidebar-closed gap
+   and its split panes keep working. --card-edge is the 0.5px hairline the app
+   draws around every pane; M3 has no such stroke. */
+:root[data-agy-theme="md3e"] .agy-inset-shell {
+  --shell-canvas: var(--md-sys-color-surface-container);
+  --card-gap: 12px;
+  --card-radius: var(--md-sys-shape-corner-extra-large);
+  --card-edge: transparent;
+  --sash-line: var(--md-sys-color-outline);
+  --sash-glow: transparent;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar"] {
+  border-bottom: 0;
+  box-shadow: none;
+}
+/* Inside a pane, --background (and Tailwind's resolved --color-background)
+   is the pane: the pinned user-message band, the fade above the composer and
+   sticky headers then match it */
+:root[data-agy-theme="md3e"] .agy-sheet [data-main-content-body],
+:root[data-agy-theme="md3e"] .agy-inset-shell [data-side-panel-body],
+:root[data-agy-theme="md3e"] [data-testid="sidecar-iframe-slot"] {   /* a sidecar's frame is mounted over its pane, not in it */
   --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,
-:root[data-agy-theme="md3e"] .agy-sheet:not(:has(.group\/pane)) .browser-hole-opaque {
-  width: auto;
-  height: calc(100% - 12px);
-  margin: 0 12px 12px 8px;
 }
 :root[data-agy-theme="md3e"] .agy-sheet {
   background-image: none !important;
 }
-: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: var(--md-sys-color-surface-container);
+
+/* A docked side panel is a second pane, not half of one card: both keep
+   their corners and share the spacer (the app joins them along a hairline) */
+:root[data-agy-theme="md3e"] .agy-sheet[data-side-panel-docked] [data-main-content-body] {
+  --card-gap-right: calc(var(--card-gap) / 2);
+  border-radius: var(--card-radius);
+}
+:root[data-agy-theme="md3e"] .agy-sheet[data-side-panel-docked] [data-side-panel-body] {
+  --card-gap-left: calc(var(--card-gap) / 2);
+  border-radius: var(--card-radius);
+}
+/* The spacer's drag handle (M3 pane drag handle: a 4x48dp pill in outline,
+   on-surface and larger while dragged), centered on the panes. The app shows
+   a full-height line on hover instead. */
+:root[data-agy-theme="md3e"] .agy-sheet[data-sheet-inset] > [data-split-root] > [data-split-sash] [data-sash-handle]::before {
+  top: calc(50% + var(--sash-line-top) / 2 - 24px);
+  bottom: auto;
+  left: calc(50% - 2px);
+  width: 4px;
+  height: 48px;
+  background-color: var(--md-sys-color-outline);
+  box-shadow: none;
+  clip-path: none;
+  opacity: 1;
+  transform: none;
+  transition: background-color var(--md-state), scale var(--md-fast);
+}
+:root[data-agy-theme="md3e"] .agy-sheet[data-sheet-inset] > [data-split-root] > [data-split-sash] [data-sash-handle]:hover::before {
+  background-color: var(--md-sys-color-on-surface-variant);
+  transform: none;
+}
+:root[data-agy-theme="md3e"] .agy-sheet[data-sheet-inset] > [data-split-root] > [data-split-sash] [data-sash-handle][data-dragging]::before {
+  background-color: var(--md-sys-color-on-surface);
+  scale: 1.5 1.1;
+  transform: none;
 }
 
 /* Inactive webview occlusion guard: prevent GPU compositor bleeding */
@@ -301,7 +351,10 @@ webview[style*="opacity: 0.005"] {
    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;
+  display: none !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="title-menu-bar"] > * {
+  display: flex;
 }
 :root[data-agy-theme="md3e"] [data-testid="title-menu-bar-item"] {
   padding: 0 12px;
@@ -472,8 +525,28 @@ webview[style*="opacity: 0.005"] {
   --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"] .flex:has([role="navigation"][aria-label="Sidebar"]) {
-  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] {
+  container-type: inline-size;
+  overflow: hidden !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-list-sidebar"] {
+  overflow-x: hidden !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] {
+  overflow: hidden !important;
+}
+
+@container (max-width: 180px) {
+  :root[data-agy-theme="md3e"] [data-testid="conversation-row-sidebar"] {
+    display: none !important;
+  }
+  :root[data-agy-theme="md3e"] [data-testid="conversation-list-sidebar"] {
+    display: none !important;
+  }
+  :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 {
+    display: none !important;
+  }
 }
 
 :root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .px-2,
@@ -481,8 +554,18 @@ webview[style*="opacity: 0.005"] {
 :root[data-agy-theme="md3e"] [data-testid="conversation-list-sidebar"] {
   padding-inline: 12px;
 }
+/* the drawer's dividers: under the top destinations and above Settings, as
+   between the groups; 8px of air each side. The app shows them only while
+   the list is scrolled (inline). */
 :root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .h-px {
   margin-inline: 28px;
+  background-color: var(--md-sys-color-outline-variant) !important;
+}
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .h-px.mt-3 {
+  margin-top: 8px;
+}
+:root[data-agy-theme="md3e"] [role="navigation"][aria-label="Sidebar"] > .py-3 {
+  padding-block: 8px;
 }
 
 /* Group headlines (the drawer's .headline): title-small, on-surface-variant;
@@ -602,7 +685,6 @@ webview[style*="opacity: 0.005"] {
   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
@@ -665,12 +747,19 @@ webview[style*="opacity: 0.005"] {
   text-decoration: underline;
   text-underline-offset: 3px;
 }
-:root[data-agy-theme="md3e"] [role="article"] pre > div {
+/* Fenced code: a filled card (surface-container, large corners), with no
+   outline and no rule under its header. .agy-code is the block code-tools.js
+   marks (the one holding Copy code); since 2.31 it is no longer a pre > div */
+:root[data-agy-theme="md3e"] [role="article"] pre > div,
+:root[data-agy-theme="md3e"] .agy-code {
   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 */
 }
+:root[data-agy-theme="md3e"] .agy-code > :first-child {
+  border-bottom-color: transparent;
+}
 /* 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
@@ -718,11 +807,17 @@ webview[style*="opacity: 0.005"] {
   background: transparent;
 }
 :root[data-agy-theme="md3e"] [data-testid="user-message-bubble"] {
+  --muted-foreground: color-mix(in srgb, var(--md-sys-color-on-primary-container) 75%, transparent) !important;
+  --secondary-foreground: color-mix(in srgb, var(--md-sys-color-on-primary-container) 85%, transparent) !important;
+  --foreground: var(--md-sys-color-on-primary-container) !important;
   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"] :is(.text-muted-foreground, .text-secondary-foreground, [class*="muted"], blockquote, q, em) {
+  color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 75%, transparent) !important;
+}
 :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);
@@ -1046,7 +1141,7 @@ webview[style*="opacity: 0.005"] {
 }
 :root[data-agy-theme="md3e"] [data-testid="send-button"] {
   padding: 10px;
-  border-radius: var(--md-sys-shape-corner-full);
+  border-radius: 50%;
 }
 :root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] {
   border-radius: var(--md-sys-shape-corner-medium);
@@ -1058,7 +1153,7 @@ webview[style*="opacity: 0.005"] {
     scale: 0.8;
   }
   :root[data-agy-theme="md3e"] [data-tooltip-id="input-send-button-cancel-tooltip"] {
-    border-radius: var(--md-sys-shape-corner-full);
+    border-radius: 50%;
     scale: 0.8;
   }
 }
@@ -1085,20 +1180,23 @@ webview[style*="opacity: 0.005"] {
    - 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;
+  padding: 4px !important;
   gap: 0;
-  border: 0;
-  border-radius: 16px;
-  background: var(--md-sys-color-surface-container-low);
-  overflow: visible;
-  box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5);
-  backdrop-filter: none;
+  border: 0 !important;
+  border-radius: 16px !important;
+  background: var(--md-sys-color-surface-container-low) !important;
+  max-height: min(75vh, calc(100vh - 60px)) !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  scrollbar-width: thin;
+  box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5) !important;
+  backdrop-filter: none !important;
   filter: none;
   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"]) {
+: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-y-auto) {
   overflow: clip;
   border-radius: 0;
 }
@@ -1113,6 +1211,14 @@ webview[style*="opacity: 0.005"] {
   margin: 0;
   background: var(--md-sys-color-surface);
 }
+/* A menu that holds a submenu in its own DOM (the project picker, whose
+   This Computer list opens beside it) must not be a scroll container:
+   focusing the submenu's search would scroll the menu sideways and drag the
+   submenu over it. It sizes itself; its project list scrolls on its own. */
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay[role="menu"]:has(> [data-testid="project-selector-search"]) {
+  max-height: none !important;
+  overflow: visible !important;
+}
 /* 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,
@@ -1152,39 +1258,46 @@ webview[style*="opacity: 0.005"] {
 }
 /* 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);
+  position: relative !important;
+  isolation: isolate !important;
+  min-height: 36px !important;
+  padding: 8px 12px !important;
+  gap: 8px !important;
+  background: transparent !important;
+  border-radius: 8px !important;
+  color: var(--md-sys-color-on-surface) !important;
+  font: var(--md-sys-typescale-label-large) !important;
+  letter-spacing: var(--md-sys-typescale-label-large-tracking) !important;
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):is([data-highlighted], :hover, :focus, :focus-visible) {
+  background: transparent !important;
 }
 :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);
+  content: "" !important;
+  position: absolute !important;
+  inset: 0 !important;
+  z-index: -1 !important;
+  border-radius: 8px !important;
+  transition: border-radius var(--md-fast), background-color var(--md-state) !important;
 }
 :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;
+  border-top-left-radius: 12px !important;
+  border-top-right-radius: 12px !important;
 }
 :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;
+  border-bottom-left-radius: 12px !important;
+  border-bottom-right-radius: 12px !important;
+}
+:root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):only-child::before {
+  border-radius: 12px !important;
 }
 :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);
+  background: color-mix(in srgb, currentColor 8%, transparent) !important;
 }
 :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);
+  background: color-mix(in srgb, currentColor 10%, transparent) !important;
 }
 :root[data-agy-theme="md3e"] [role="menu"] :is([role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"])[data-disabled] {
   opacity: 0.38;
@@ -1205,24 +1318,30 @@ webview[style*="opacity: 0.005"] {
   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"], [data-checked="true"]) {
+  background: var(--md-sys-color-tertiary-container) !important;
+  color: var(--md-sys-color-on-tertiary-container) !important;
+  border-radius: 12px !important;
 }
-: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"], [data-checked="true"]) * {
+  color: var(--md-sys-color-on-tertiary-container) !important;
+  fill: var(--md-sys-color-on-tertiary-container) !important;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"])::before {
+  border-radius: 12px !important;
+  background: var(--md-sys-color-tertiary-container) !important;
 }
-: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"], [data-checked="true"]):is([data-highlighted], :hover, :focus, :focus-visible)::before {
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 10%, var(--md-sys-color-tertiary-container)) !important;
 }
-: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) {
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"]) :is(.text-muted-foreground, .ml-auto),
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"]) > :is(svg:first-child, .ml-auto) {
   color: inherit;
 }
-:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) > span.ml-auto {
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"]) > span.ml-auto {
   display: none;
 }
-:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"])::after {
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"])::after {
   content: "";
   order: -1;
   flex: none;
@@ -1233,7 +1352,7 @@ webview[style*="opacity: 0.005"] {
   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 {
+  :root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"], [data-checked="true"])::after {
     width: 0;
     margin-inline-end: -8px;
     opacity: 0;
@@ -1274,127 +1393,968 @@ webview[style*="opacity: 0.005"] {
   }
 }
 
-/* 80 — Voice Mode & Gemini Live: Material 3 Expressive */
-:root[data-agy-theme="md3e"] [data-testid="voice-live-pill"] {
-  background: var(--md-sys-color-secondary-container) !important;
-  color: var(--md-sys-color-on-secondary-container) !important;
-  border: 1px solid var(--md-sys-color-outline-variant) !important;
-  border-radius: var(--md-sys-shape-corner-full) !important;
-  transition: background-color var(--md-state), color var(--md-state), box-shadow var(--md-motion-short) !important;
+/* Select popups (Base UI listboxes: Settings dropdowns and the like): the
+   md-menu anatomy of the menus above. Surface-container-low, 16px corners,
+   level 2; options 8px (12px at the ends), label-large with body-medium
+   supporting text, an 8% state layer on hover and keyboard focus; the
+   chosen one a tertiary-container pill. The glass layer's square items
+   (05) need !important on the corners. */
+:root[data-agy-theme="md3e"] [data-select-popup] {
+  padding: 4px;
+  border: 0 !important;
+  border-radius: 16px !important;
+  background: var(--md-sys-color-surface-container-low) !important;
+  box-shadow: 0 4px 16px -2px rgb(0 0 0 / 0.5) !important;
+  backdrop-filter: none !important;
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-font-family);
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-live-pill"]:hover {
-  box-shadow: var(--md-sys-elevation-level1) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="listbox"] {
+  gap: 0;
+  padding: 0;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-start-button"] {
-  color: inherit !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"] {
+  min-height: 44px;
+  padding: 8px 12px;
+  gap: 8px;
+  border-radius: 8px !important;
+  background: transparent !important;
+  color: var(--md-sys-color-on-surface) !important;
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  transition: background-color var(--md-state), border-radius var(--md-fast) !important;
 }
-
-/* Voice Picker Dialog — M3 Modal Dialog */
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] {
-  background: var(--md-sys-color-surface-container-high) !important;
-  border: 1px solid var(--md-sys-color-outline-variant) !important;
-  border-radius: 28px !important;
-  box-shadow: var(--md-sys-elevation-level3) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:first-child {
+  border-top-left-radius: 12px !important;
+  border-top-right-radius: 12px !important;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-close"] {
-  color: var(--md-sys-color-on-surface-variant) !important;
-  border-radius: var(--md-sys-shape-corner-full) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:last-child {
+  border-bottom-left-radius: 12px !important;
+  border-bottom-right-radius: 12px !important;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-close"]:hover {
-  background: var(--md-hover) !important;
-  color: var(--md-sys-color-on-surface) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:is([data-highlighted], :hover, :focus-visible) {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent) !important;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-name"] {
-  color: var(--md-sys-color-on-surface) !important;
-  font: var(--md-sys-typescale-headline-small) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"] .text-muted-foreground {
+  font: var(--md-sys-typescale-body-medium);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  color: var(--md-sys-color-on-surface-variant);
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] .voice-picker-dot > span {
-  background: var(--md-sys-color-outline-variant) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:is([data-selected], [aria-selected="true"]) {
+  border-radius: 12px !important;
+  background: var(--md-sys-color-tertiary-container) !important;
+  color: var(--md-sys-color-on-tertiary-container) !important;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] .voice-picker-dot[aria-current="true"] > span {
-  background: var(--md-sys-color-primary) !important;
-  box-shadow: 0 0 10px color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:is([data-selected], [aria-selected="true"]):is([data-highlighted], :hover, :focus-visible) {
+  background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 10%, var(--md-sys-color-tertiary-container)) !important;
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"] {
-  background: var(--md-sys-color-primary) !important;
-  color: var(--md-sys-color-on-primary) !important;
-  border-radius: var(--md-sys-shape-corner-full) !important;
-  font: var(--md-sys-typescale-label-large) !important;
-  box-shadow: var(--md-sys-elevation-level1) !important;
-  transition: box-shadow var(--md-motion-short), background-color var(--md-state) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"]:is([data-selected], [aria-selected="true"]) :is(.text-muted-foreground, svg) {
+  color: var(--md-sys-color-on-tertiary-container);
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"]:hover {
-  box-shadow: var(--md-sys-elevation-level2) !important;
+:root[data-agy-theme="md3e"] [data-select-popup] [role="option"] > span.shrink-0 svg {
+  width: 20px;
+  height: 20px;
 }
 
-/* Active Voice Docked Panel — M3 Bottom Sheet */
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] {
-  background: var(--md-sys-color-surface-container-high) !important;
-  background-image: none !important;
-  border: 1px solid var(--md-sys-color-outline-variant) !important;
-  border-bottom: none !important;
-  border-radius: 28px 28px 0 0 !important;
+/* 60 — Dialogs and Settings ------------------------------------------------ */
+/* Every dialog is an M3 dialog: surface-container-high, extra-large corners,
+   level 3, over a 32% scrim; nothing outlined. Selectors go through
+   .agy-dialog: the app's own glass rules (body[data-newux-theme] ...) round
+   these controls into pills and outrank a single class. */
+:root[data-agy-theme="md3e"] .agy-dialog {
+  border: 0 !important;
+  border-radius: var(--md-sys-shape-corner-extra-large) !important;
+  background: var(--md-sys-color-surface-container-high);
   box-shadow: var(--md-sys-elevation-level3) !important;
-  backdrop-filter: blur(20px) !important;
-  -webkit-backdrop-filter: blur(20px) !important;
+  color: var(--md-sys-color-on-surface);
 }
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-end-button"],
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-end"] {
-  background: var(--md-sys-color-error) !important;
-  color: var(--md-sys-color-on-error) !important;
-  border-radius: var(--md-sys-shape-corner-full) !important;
-  font: var(--md-sys-typescale-label-medium) !important;
+:root[data-agy-theme="md3e"] .settings-modal-backdrop {
+  background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
 }
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-mute-button"],
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"],
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-speed"],
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-collapse"] {
+:root[data-agy-theme="md3e"] .agy-dialog > button[aria-label="Close"] {
+  width: 40px;
+  height: 40px;
   border-radius: var(--md-sys-shape-corner-full) !important;
+  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="live-docked"] [data-testid="voice-mute-button"]:hover,
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"]:hover,
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-speed"]:hover,
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-collapse"]:hover {
-  background: var(--md-hover) !important;
+:root[data-agy-theme="md3e"] .agy-dialog > button[aria-label="Close"]:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
 }
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-speed-fill"] {
-  background: var(--md-sys-color-primary) !important;
+:root[data-agy-theme="md3e"] .agy-dialog > button[aria-label="Close"] svg {
+  width: 24px;
+  height: 24px;
 }
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-speed-track"] {
-  background: var(--md-sys-color-surface-container-highest) !important;
+
+/* Settings: M3's list-detail layout. The dialog is the window
+   (surface-container) with a navigation drawer; the page is a pane on it
+   (surface, large corners); settings are segmented lists, M3 Expressive's
+   grouped list items: 2px apart, 4px corners inside a group, 20px outside. */
+:root[data-agy-theme="md3e"] .settings-modal-container {
+  --md-row: var(--md-sys-color-surface-container-high);
+  background: var(--md-sys-color-surface-container);
+  scrollbar-width: thin;
 }
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="live-lead"],
-:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="live-body"] {
-  color: var(--md-sys-color-on-surface) !important;
+:root[data-agy-theme="md3e"] .settings-modal-container .bg-background {
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] .settings-modal-container [data-split-root] > div:last-child {
+  margin: 12px 12px 12px 0;
+  border-radius: var(--md-sys-shape-corner-large-increased);
+  background: var(--md-sys-color-surface);
+  overflow: hidden;
 }
 
-/* Background Glow Canvas & Ring — M3 Color Tint */
-:root[data-agy-theme="md3e"] [data-testid="voice-speaking-glow"] canvas {
-  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent)) !important;
+/* Drawer: title-small headlines 28px in, pill destinations, dividers
+   between groups (inset 28px). 40px rows, as the window's drawer list. */
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] {
+  background: transparent;
+  font-family: var(--md-sys-typescale-font-family);
 }
-:root[data-agy-theme="md3e"] [data-testid="voice-speaking-glow"] .voice-glow-ring {
-  box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant) !important;
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > div:first-child {
+  gap: 0;
+  padding: 12px 0;
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] :is(h1, 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);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] .px-4 {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 28px;
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] .px-4.mt-2 {
+  margin: 8px 28px 0;
+  padding: 8px 0 0;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] .flex.flex-col.gap-0\.5 {
+  gap: 0;
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] .mx-2 {
+  margin: 0 12px;
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"] {
+  min-height: 40px;
+  padding: 0 16px;
+  gap: 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+  background: transparent;
+  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), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"] span {
+  color: inherit;
+  font: inherit;
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"]:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"].bg-sidebar-secondary {
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+  font: var(--md-sys-typescale-label-large-emphasized);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"].bg-sidebar-secondary:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
+}
+/* "Show All": a text button */
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button.mx-4 {
+  align-self: flex-start;
+  min-height: 40px;
+  margin: 0 12px;
+  padding: 0 16px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-primary);
+  font: var(--md-sys-typescale-label-large);
+  text-decoration: none;
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] button.mx-4:hover {
+  background: var(--md-primary-hover);
+  color: var(--md-sys-color-primary);
+}
+/* account: a 56px destination with a 40px avatar */
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > .border-t {
+  margin: 0 28px;
+  padding: 8px 0 12px;
+  border-color: var(--md-sys-color-outline-variant);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > .border-t > button {
+  min-height: 56px;
+  margin: 0 -16px;
+  padding: 0 16px;
+  gap: 12px;
+  border-radius: var(--md-sys-shape-corner-full);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > .border-t > button > div:first-child {
+  width: 40px;
+  height: 40px;
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > .border-t span.text-foreground {
+  font: var(--md-sys-typescale-title-small);
+}
+:root[data-agy-theme="md3e"] [data-testid="settings-sidebar"] > .border-t span.text-sm {
+  font: var(--md-sys-typescale-body-small);
 }
 
-/* In-Chat Separator Marker */
-:root[data-agy-theme="md3e"] [data-testid="voice-chat-marker"] {
-  color: var(--md-sys-color-on-surface-variant) !important;
-  font: var(--md-sys-typescale-label-medium) !important;
+/* Page: headline-medium title, title-small primary category headers (as
+   Android's settings), body-medium supporting text */
+:root[data-agy-theme="md3e"] .settings-modal-container .p-6.max-w-2xl {
+  padding: 28px 24px 40px;
+}
+:root[data-agy-theme="md3e"] .settings-modal-container h2.text-2xl {
+  font: var(--md-sys-typescale-headline-medium);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  color: var(--md-sys-color-on-surface);
 }
-:root[data-agy-theme="md3e"] div:has(> span [data-testid="voice-chat-marker"]) .bg-secondary,
-:root[data-agy-theme="md3e"] div:has(> [data-testid="voice-chat-marker"]) .bg-secondary,
-:root[data-agy-theme="md3e"] [data-testid="voice-chat-marker"] ~ div.bg-secondary {
-  background-color: var(--md-sys-color-outline-variant) !important;
+:root[data-agy-theme="md3e"] .settings-modal-container h2.text-2xl + div {
+  font: var(--md-sys-typescale-body-medium);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] .settings-modal-container h3 {
+  padding-inline-start: 16px;
+  font: var(--md-sys-typescale-title-small);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  color: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] .settings-modal-container .leading-relaxed {
+  padding-inline-start: 16px;
+  font: var(--md-sys-typescale-body-medium);
+  color: var(--md-sys-color-on-surface-variant);
 }
 
-/* In-Chat Voice Transcript Card */
-:root[data-agy-theme="md3e"] [data-testid="voice-transcript-card"] {
-  background: var(--md-sys-color-surface-container) !important;
-  border: 1px solid var(--md-sys-color-outline-variant) !important;
-  border-radius: 16px !important;
+/* Segmented list */
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large-increased);
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card > * {
+  border: 0 !important;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-row, var(--md-sys-color-surface-container-highest));
+  font: var(--md-sys-typescale-body-large);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+}
+/* the rows (some sit in a wrapper) */
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card .py-2.px-3 {
+  min-height: 56px;
+  padding: 12px 16px;
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card .text-sm {
+  font: var(--md-sys-typescale-body-medium);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card > button {   /* "Code Preview": a list item that opens */
+  min-height: 48px;
+  color: var(--md-sys-color-on-surface-variant);
+  font: var(--md-sys-typescale-label-large);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card > button:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-row));
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-testid="settings-row-badge"] {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  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-small);
+  line-height: 20px;
+  text-align: center;
+}
+:root[data-agy-theme="md3e"] .agy-dialog code {
+  padding: 0 6px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface);
+}
+
+/* Buttons: filled tonal, 40px, pill; on press the corners close to medium
+   (M3 Expressive's shape morph). Primary actions are filled. */
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-sm, .agy-button-md).bg-secondary {
+  height: 40px;
+  padding: 0 16px;
+  border-radius: 20px !important;
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-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"] .agy-dialog :is(.agy-button-sm, .agy-button-md).bg-secondary:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, var(--md-sys-color-secondary-container));
+  color: var(--md-sys-color-on-secondary-container);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(a, button:not([role])).bg-primary {
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 24px;
+  border-radius: 20px !important;
+  background: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+  font: var(--md-sys-typescale-label-large);
+  transition: border-radius var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(a, button:not([role])).bg-primary:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-testid="delete-project-button"] {
+  height: 40px;
+  padding: 0 24px;
+  border-radius: 20px !important;
+  background: var(--md-sys-color-error);
+  color: var(--md-sys-color-on-error);
+  font: var(--md-sys-typescale-label-large);
+  transition: border-radius var(--md-fast);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-sm.bg-secondary, .agy-button-md.bg-secondary, a.bg-primary, button.bg-primary:not([role]), [data-testid="delete-project-button"]):active {
+  border-radius: var(--md-sys-shape-corner-medium) !important;
+}
+/* text buttons: "Show N breakdown", "Advanced Settings" */
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-sm.text-link, button.self-start.rounded-md) {
+  height: 40px;
+  margin: 0;
+  padding: 0 12px;
+  border-radius: 20px !important;
+  color: var(--md-sys-color-primary);
+  font: var(--md-sys-typescale-label-large);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-sm.text-link, button.self-start.rounded-md):hover {
+  background: var(--md-primary-hover);
+  color: var(--md-sys-color-primary);
+  text-decoration: none;
+}
+/* icon buttons keep their size; standard icon button colors */
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-icon-sm, .agy-button-icon):not(.bg-secondary) {
+  border-radius: var(--md-sys-shape-corner-full) !important;
+  color: var(--md-sys-color-on-surface-variant);
+  transition: background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(.agy-button-icon-sm, .agy-button-icon):not(.bg-secondary):hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+/* key chips (Shortcuts): filled, small corners */
+:root[data-agy-theme="md3e"] .agy-dialog .agy-button-xs.border {
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-small) !important;
+  background: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface);
+  font: var(--md-sys-typescale-label-large);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-button-xs.border:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-highest));
+}
+
+/* Select: an outlined button with a trailing arrow; open, it is selected
+   (secondary-container) and its corners close to medium */
+:root[data-agy-theme="md3e"] .agy-dialog .agy-select-trigger {
+  height: 40px;
+  padding: 0 12px 0 16px;
+  gap: 8px;
+  border: 1px solid var(--md-sys-color-outline-variant) !important;
+  border-radius: 20px;
+  background: transparent;
+  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: border-radius var(--md-fast), background-color var(--md-state), color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-select-trigger:hover {
+  background: var(--md-hover);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-select-trigger[aria-expanded="true"] {
+  border-color: transparent !important;
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-select-trigger svg {
+  width: 18px;
+  height: 18px;
+  opacity: 1;
+  transition: transform var(--md-fast);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-select-trigger[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+/* Connected button group (toggle groups): 2px apart, 8px inner corners;
+   the selected one is secondary-container and fully round */
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] {
+  height: 40px;
+  padding: 0;
+  gap: 2px;
+  border: 0 !important;
+  border-radius: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button {
+  min-width: 48px;
+  height: 40px;
+  padding: 0 16px;
+  border-radius: var(--md-sys-shape-corner-small);
+  background: var(--md-sys-color-surface-container-highest) !important;
+  color: var(--md-sys-color-on-surface-variant) !important;
+  box-shadow: none !important;
+  font: var(--md-sys-typescale-label-large);
+  transition: border-radius var(--md-fast), background-color var(--md-color-fast), color var(--md-color-fast);
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button:first-child {
+  border-start-start-radius: 20px;
+  border-end-start-radius: 20px;
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button:last-child {
+  border-start-end-radius: 20px;
+  border-end-end-radius: 20px;
+}
+/* hover: an 8% state layer drawn as an image, so it shows at once while the
+   selection color fades */
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button:hover,
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button[data-pressed]:hover {
+  background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 0 0) !important;
+}
+:root[data-agy-theme="md3e"] .agy-dialog [data-slot="toggle-group"] > button[data-pressed] {
+  border-radius: 20px;
+  background: var(--md-sys-color-secondary-container) !important;
+  color: var(--md-sys-color-on-secondary-container) !important;
+}
+
+/* Switch: M3's, 52 x 32. Off: outlined track, a 16px outline handle;
+   on: primary track, a 24px on-primary handle; pressed: 28px. The handle is
+   one 28px circle moved and sized by transform alone (scale 16/28, 24/28,
+   1), so the spring runs on the compositor with no layout; the app's own
+   inline transform is overridden. */
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full {
+  width: 52px;
+  height: 32px;
+  padding: 0;
+  border: 2px solid var(--md-sys-color-outline);
+  background: var(--md-sys-color-surface-container-highest) !important;
+  contain: layout;
+  transition: background-color var(--md-color-fast), border-color var(--md-color-fast);
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]) {
+  border-color: var(--md-sys-color-primary);
+  background: var(--md-sys-color-primary) !important;
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full > span {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  background: var(--md-sys-color-outline);
+  box-shadow: none !important;
+  transform: translateX(0) scale(0.5714) !important;
+  transition: transform var(--md-fast), background-color var(--md-color-fast);
+  will-change: transform;
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]) > span {
+  background: var(--md-sys-color-on-primary);
+  transform: translateX(20px) scale(0.8571) !important;
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:hover > span {
+  background: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]):hover > span {
+  background: var(--md-sys-color-primary-container);
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:active > span {
+  transform: translateX(0) scale(1) !important;
+}
+:root[data-agy-theme="md3e"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]):active > span {
+  transform: translateX(20px) scale(1) !important;
+}
+
+/* Slider: M3 Expressive's, a 16px track and a 4px handle with a gap */
+:root[data-agy-theme="md3e"] .agy-dialog input[type="range"] {
+  --primary: var(--md-sys-color-primary);
+  --secondary: var(--md-sys-color-secondary-container);
+  height: 16px;
+  border-radius: var(--md-sys-shape-corner-small);
+}
+:root[data-agy-theme="md3e"] .agy-dialog input[type="range"]::-webkit-slider-thumb {
+  width: 4px;
+  height: 36px;
+  border-radius: 2px;
+  background: var(--md-sys-color-primary);
+  box-shadow: 0 0 0 4px var(--md-row, var(--md-sys-color-surface-container-high));
+}
+
+/* Option cards (Interface Layout): filled cards; selected, the
+   secondary-container and extra-large corners */
+:root[data-agy-theme="md3e"] .agy-dialog [role="radio"].rounded-xl {
+  padding: 16px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container-high);
+  box-shadow: none;
+  color: var(--md-sys-color-on-surface);
+  transition: border-radius var(--md-fast), background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog [role="radio"].rounded-xl:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high));
+}
+:root[data-agy-theme="md3e"] .agy-dialog [role="radio"].rounded-xl:is([data-checked], [aria-checked="true"]) {
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+:root[data-agy-theme="md3e"] .agy-dialog [role="radio"].rounded-xl:is([data-checked], [aria-checked="true"]) :is(.text-muted-foreground, .text-foreground, svg) {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+/* Text fields: M3 filled fields (top corners, an active indicator). Some
+   carry Tailwind's !border / !bg-muted / !shadow-none, whose layered
+   !important outranks any unlayered rule; they are steered through the
+   variables those utilities read instead. */
+:root[data-agy-theme="md3e"] .agy-dialog :is(input.agy-field, input.bg-muted, .h-8.rounded-lg.bg-muted.border) {
+  --tw-border-style: none;
+  --color-muted: var(--md-sys-color-surface-container-highest);
+  --tw-inset-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
+  border-style: none;
+  border-radius: var(--md-sys-shape-corner-extra-small-top) !important;
+  background: var(--md-sys-color-surface-container-highest);
+  box-shadow: var(--tw-inset-shadow);
+  color: var(--md-sys-color-on-surface);
+  font: var(--md-sys-typescale-body-large);
+  font-size: var(--md-sys-typescale-body-large-size) !important;   /* inline 12px */
+  transition: box-shadow var(--md-state);
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(input.agy-field, input.bg-muted) {
+  height: 40px;
+}
+:root[data-agy-theme="md3e"] .agy-dialog :is(input.agy-field:focus, input.bg-muted:focus, .h-8.rounded-lg.bg-muted.border:focus-within) {
+  --tw-inset-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
+  outline: none;
+}
+:root[data-agy-theme="md3e"] .agy-dialog .h-8.rounded-lg.bg-muted.border {
+  height: 48px;
+}
+:root[data-agy-theme="md3e"] .agy-dialog .h-8.rounded-lg.bg-muted.border input {
+  font: var(--md-sys-typescale-body-large);
+}
+:root[data-agy-theme="md3e"] .agy-dialog button[aria-label="Show Remote Control QR code"] {
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-medium);
+  background: var(--md-sys-color-surface-container-lowest);
+}
+:root[data-agy-theme="md3e"] .agy-dialog button[aria-label$="color picker"] {
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
+}
+
+/* Usage rings: M3's circular progress indicator (primary on a
+   secondary-container track, 4px, round caps; theme-host.js opens the gap
+   between them). Low remaining quota reads in tertiary, then error. */
+:root[data-agy-theme="md3e"] .rounded-full:has(> svg [data-testid="quota-progress-circle"]) {
+  background: transparent;
+}
+:root[data-agy-theme="md3e"] svg:has([data-testid="quota-progress-circle"]) circle:first-child {
+  stroke: var(--md-sys-color-secondary-container);
+  stroke-opacity: var(--agy-track-opacity, 1);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-dasharray: var(--agy-track-dash, none);
+  stroke-dashoffset: var(--agy-track-offset, 0);
+}
+:root[data-agy-theme="md3e"] [data-testid="quota-progress-circle"] {
+  stroke: var(--md-sys-color-primary);
+  stroke-linecap: round;
+}
+:root[data-agy-theme="md3e"] [data-testid="quota-progress-circle"]:is(.stroke-yellow-500, .stroke-amber-500, .stroke-orange-500) {
+  stroke: var(--md-sys-color-tertiary);
+}
+:root[data-agy-theme="md3e"] [data-testid="quota-progress-circle"]:is(.stroke-red-500, .stroke-destructive) {
+  stroke: var(--md-sys-color-error);
+}
+
+/* Customizations (project pages): token bars as M3 linear progress (8px,
+   secondary-container track); chart colors from the scheme; skill and rule
+   cards filled; source tags as tonal labels */
+:root[data-agy-theme="md3e"] .agy-dialog {
+  --chart-blue: var(--md-sys-color-primary);
+  --chart-green: var(--md-sys-color-tertiary);
+  --chart-purple: var(--md-sys-color-secondary);
+  --chart-yellow: var(--md-sys-color-tertiary-fixed-dim);
+  --chart-orange: var(--md-sys-color-primary-fixed-dim);
+  --chart-red: var(--md-sys-color-error);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .h-2.rounded-full.bg-muted {
+  background: var(--md-sys-color-secondary-container);
+}
+/* skills, rules, subagents: the same segmented list */
+:root[data-agy-theme="md3e"] [data-testid="workspace-customizations-view"] .border.border-border.rounded-xl {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large-increased);
+}
+:root[data-agy-theme="md3e"] [data-testid="workspace-customizations-view"] .border.border-border.rounded-xl > div {
+  padding: 12px 16px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-row);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card p {
+  font: var(--md-sys-typescale-body-medium);
+  color: var(--md-sys-color-on-surface-variant);
+}
+/* project folders: 48px rows; Add Folder closes the group as a list action */
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card > .h-9 {
+  height: 48px;
+  padding: 0 8px 0 16px;
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card [data-testid="project-add-folder-button"].bg-secondary {
+  height: 48px;
+  border-radius: var(--md-sys-shape-corner-extra-small) !important;
+  background: var(--md-row);
+  color: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] .agy-dialog .agy-card [data-testid="project-add-folder-button"].bg-secondary:hover {
+  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-row));
+  color: var(--md-sys-color-primary);
+}
+:root[data-agy-theme="md3e"] .agy-dialog span.rounded:is(.bg-blue-500\/10, .bg-purple-500\/10, .bg-green-500\/10, .bg-orange-500\/10) {
+  padding: 2px 8px;
+  border-radius: var(--md-sys-shape-corner-small);
+  font: var(--md-sys-typescale-label-medium);
+}
+:root[data-agy-theme="md3e"] .agy-dialog span.rounded.bg-blue-500\/10 {
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+:root[data-agy-theme="md3e"] .agy-dialog span.rounded:is(.bg-purple-500\/10, .bg-green-500\/10, .bg-orange-500\/10) {
+  background: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+
+/* Usage (model menu > View Usage): the menu's segmented groups of two-line
+   items. Headline label-large, the reset time body-small, the amount left
+   label-medium beside a 24px circular indicator (the rings above). */
+:root[data-agy-theme="md3e"] [role="menu"] > .select-none > .justify-between:first-child {
+  min-height: 36px;
+  padding: 4px 12px;
+  font: var(--md-sys-typescale-label-large);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] [role="menu"] > .select-none > .flex-col.gap-1 {
+  gap: 8px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"].gap-px {
+  gap: 2px;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"].gap-px > [role="presentation"] {
+  padding: 4px 12px 6px;
+  font: var(--md-sys-typescale-title-small);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  color: var(--md-sys-color-primary) !important;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > .grid.gap-x-3 {
+  min-height: 48px;
+  padding: 8px 12px 8px 16px;
+  column-gap: 16px;
+  row-gap: 0;
+  border-radius: var(--md-sys-shape-corner-extra-small);
+  background: var(--md-sys-color-surface-container);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > [role="presentation"] + .grid.gap-x-3 {
+  border-top-left-radius: var(--md-sys-shape-corner-medium);
+  border-top-right-radius: var(--md-sys-shape-corner-medium);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > .grid.gap-x-3:last-child {
+  border-bottom-left-radius: var(--md-sys-shape-corner-medium);
+  border-bottom-right-radius: var(--md-sys-shape-corner-medium);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > .grid.gap-x-3 > span:first-child {
+  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"] > .grid.gap-x-3 > .col-span-2 {
+  font: var(--md-sys-typescale-body-small);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > .grid.gap-x-3 > span:nth-child(2) {
+  gap: 12px;
+  font: var(--md-sys-typescale-label-medium);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  font-variant-numeric: tabular-nums;
+}
+:root[data-agy-theme="md3e"] [role="menu"] [role="group"] > .grid.gap-x-3 .w-4.h-4 {
+  width: 24px;
+  height: 24px;
+}
+
+/* "Restart to Update": an M3 Expressive extra-small filled button (32px,
+   label-large) with a leading refresh icon in place of the trailing arrow;
+   pressed, its corners close to medium. The app's pulses are stilled. */
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"] {
+  animation: none !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"]:not(.w-6) {
+  width: auto;
+  height: 32px;
+  padding: 0 14px 0 10px;
+  gap: 6px;
+  border-radius: 16px;
+  background: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+  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="app-update-button"]:not(.w-6)::before {
+  content: "";
+  flex: none;
+  width: 18px;
+  height: 18px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z'/%3E%3C/svg%3E") center / 18px no-repeat;
+}
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"]:not(.w-6) > span + span {
+  display: none;
+}
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"]:not(.w-6):hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
+}
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"]:not(.w-6):active {
+  border-radius: var(--md-sys-shape-corner-medium);
+}
+:root[data-agy-theme="md3e"] [data-testid="app-update-button"].w-6 {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--md-sys-shape-corner-full);
+  color: var(--md-sys-color-primary);
+}
+
+/* Artifact cards (a plan, a report the agent wrote): M3 filled cards, no
+   outline; the title title-small, the summary body-medium; Proceed a filled
+   button, Open a tonal split button (2px apart, 4px inner corners) */
+:root[data-agy-theme="md3e"] :is([data-testid="artifact-card"], [data-testid="voice-transcript-card"]).artifact-card {
+  padding: 16px;
+  gap: 8px;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container-high);
+  transition: background-color var(--md-state);
+}
+:root[data-agy-theme="md3e"] :is([data-testid="artifact-card"], [data-testid="voice-transcript-card"]).artifact-card:hover {
+  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high));
+}
+:root[data-agy-theme="md3e"] [data-testid="artifact-card-header"] {
+  font: var(--md-sys-typescale-title-small);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  color: var(--md-sys-color-on-surface);
+}
+:root[data-agy-theme="md3e"] [data-testid="artifact-card-header"] .text-secondary-foreground {
+  font: var(--md-sys-typescale-body-medium);
+  color: var(--md-sys-color-on-surface-variant);
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm {
+  height: 40px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 20px !important;
+  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"] .artifact-card .agy-button-sm:active {
+  border-radius: var(--md-sys-shape-corner-medium) !important;
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm.proceed-button {
+  background: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-primary);
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm:not(.proceed-button) {
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm:not(.proceed-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"] .artifact-card .inline-flex.items-stretch {
+  gap: 2px;
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm.rounded-r-none {
+  border-top-right-radius: var(--md-sys-shape-corner-extra-small) !important;
+  border-bottom-right-radius: var(--md-sys-shape-corner-extra-small) !important;
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm.rounded-l-none {
+  width: 40px;
+  padding: 0;
+  border-left: 0;
+  border-top-left-radius: var(--md-sys-shape-corner-extra-small) !important;
+  border-bottom-left-radius: var(--md-sys-shape-corner-extra-small) !important;
+}
+:root[data-agy-theme="md3e"] .artifact-card .agy-button-sm.rounded-l-none[aria-expanded="true"] {
+  border-radius: 20px !important;
+}
+
+/* Chips in a sent message (quotes, files, terminals): they take the bubble's
+   own ink, not the app's text colors, which are meant for the panel; a 12%
+   tint of that ink marks them, the icon and supporting parts at 80% */
+:root[data-agy-theme="md3e"] .agy-user-bubble .inline-pill {
+  color: inherit;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 8px;
+}
+:root[data-agy-theme="md3e"] .agy-user-bubble .inline-pill :is(.text-foreground, .text-secondary-foreground) {
+  color: inherit;
+}
+:root[data-agy-theme="md3e"] .agy-user-bubble .inline-pill .text-muted-foreground {
+  color: color-mix(in srgb, currentColor 80%, transparent);
+}
+
+/* 80 — Voice Mode & Gemini Live: Material 3 Expressive */
+:root[data-agy-theme="md3e"] [data-testid="voice-live-pill"] {
+  background: var(--md-sys-color-secondary-container) !important;
+  color: var(--md-sys-color-on-secondary-container) !important;
+  border-color: transparent !important;
+  border-radius: var(--md-sys-shape-corner-full) !important;
+  transition: background-color var(--md-state), color var(--md-state), box-shadow var(--md-color-fast) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-live-pill"]:hover {
+  box-shadow: var(--md-sys-elevation-level1) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-start-button"] {
+  color: inherit !important;
+}
+
+/* Voice Picker Dialog — M3 Modal Dialog */
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] {
+  background: var(--md-sys-color-surface-container-high) !important;
+  border-color: transparent !important;
+  border-radius: var(--md-sys-shape-corner-extra-large) !important;
+  box-shadow: var(--md-sys-elevation-level3) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-close"] {
+  color: var(--md-sys-color-on-surface-variant) !important;
+  border-radius: var(--md-sys-shape-corner-full) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-close"]:hover {
+  background: var(--md-hover) !important;
+  color: var(--md-sys-color-on-surface) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] [data-testid="voice-picker-name"] {
+  color: var(--md-sys-color-on-surface) !important;
+  font: var(--md-sys-typescale-headline-small) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] .voice-picker-dot > span {
+  background: var(--md-sys-color-outline-variant) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] .voice-picker-dot[aria-current="true"] > span {
+  background: var(--md-sys-color-primary) !important;
+  box-shadow: none !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"] {
+  background: var(--md-sys-color-primary) !important;
+  color: var(--md-sys-color-on-primary) !important;
+  border-radius: var(--md-sys-shape-corner-full) !important;
+  font: var(--md-sys-typescale-label-large) !important;
+  box-shadow: var(--md-sys-elevation-level1) !important;
+  transition: box-shadow var(--md-color-fast), background-color var(--md-state) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"]:hover {
+  box-shadow: var(--md-sys-elevation-level2) !important;
+}
+
+/* Active Voice Docked Panel — M3 Bottom Sheet */
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] {
+  background: var(--md-sys-color-surface-container-high) !important;
+  background-image: none !important;
+  border-color: transparent !important;
+  border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0 !important;
+  box-shadow: var(--md-sys-elevation-level1) !important;
+  backdrop-filter: none !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-end-button"],
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-end"] {
+  background: var(--md-sys-color-error) !important;
+  color: var(--md-sys-color-on-error) !important;
+  border-radius: var(--md-sys-shape-corner-full) !important;
+  font: var(--md-sys-typescale-label-medium) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-mute-button"],
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"],
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-speed"],
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-collapse"] {
+  border-radius: var(--md-sys-shape-corner-full) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-mute-button"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-speed"]:hover,
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-call-collapse"]:hover {
+  background: var(--md-hover) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-speed-fill"] {
+  background: var(--md-sys-color-primary) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="voice-speed-track"] {
+  background: var(--md-sys-color-surface-container-highest) !important;
+}
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="live-lead"],
+:root[data-agy-theme="md3e"] [data-testid="live-docked"] [data-testid="live-body"] {
+  color: var(--md-sys-color-on-surface) !important;
+}
+
+/* Speaking glow: the app's own canvas, with no blur on top; its ring */
+:root[data-agy-theme="md3e"] [data-testid="voice-speaking-glow"] .voice-glow-ring {
+  box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant) !important;
+}
+
+/* In-Chat Separator Marker */
+:root[data-agy-theme="md3e"] [data-testid="voice-chat-marker"] {
+  color: var(--md-sys-color-on-surface-variant) !important;
+  font: var(--md-sys-typescale-label-medium) !important;
+}
+:root[data-agy-theme="md3e"] div:has(> span [data-testid="voice-chat-marker"]) .bg-secondary,
+:root[data-agy-theme="md3e"] div:has(> [data-testid="voice-chat-marker"]) .bg-secondary,
+:root[data-agy-theme="md3e"] [data-testid="voice-chat-marker"] ~ div.bg-secondary {
+  background-color: var(--md-sys-color-outline-variant) !important;
+}
+
+/* In-Chat Voice Transcript Card */
+:root[data-agy-theme="md3e"] [data-testid="voice-transcript-card"] {
+  background: var(--md-sys-color-surface-container) !important;
+  border-color: transparent !important;
+  border-radius: var(--md-sys-shape-corner-large) !important;
 }
 :root[data-agy-theme="md3e"] [data-testid="voice-transcript-card"]:hover {
   background: var(--md-sys-color-surface-container-high) !important;
   box-shadow: var(--md-sys-elevation-level1) !important;
 }
 
+/* 90 — Swarm and other sidecar panes: themes/frames/md3e.css. They are
+   cross-origin frames; frame-host.js loads that stylesheet inside them. */