@materialwebunofficial/antigravity-themes 1.0.0 → 1.0.4

package/themes/matte.css

@@ -1,14 +1,14 @@
 /* ==========================================================================
-   "Matte": a theme for Antigravity Desktop (tested with 2.28)
+   AGY "Matte" (v4.4) — theme for Antigravity Desktop 2.26–2.28
 
    Idea: matte, quiet, fast. A near-black window holds one rounded panel;
    surfaces step up in small neutral increments, 1px hairlines carry the
    structure, and the only bright thing is the send button. No gradients,
-   blur, grain, glow, masks or looping animation. Light mode is the same
-   structure inverted, from the token block after 00.
+   blur, grain, glow, masks or looping animation. Light mode (v4.4) is the
+   same structure inverted, from the token block after 00.
 
-   Built for speed (a full style recalc costs about what the stock app's
-   does):
+   Built for speed (live v3.5 measured a 122ms full style recalc vs about
+   half that for stock, plus a moving backdrop under blurred glass):
    - Almost everything is done through the app's own tokens; the app's
      Tailwind classes then paint the components. Few rules = cheap recalc.
    - The handful of rules end in an id, class or single attribute: no
@@ -23,7 +23,8 @@
    writes its tokens and the VS Code theme inline on <html>, so sections 01
    and 02 use !important. Never wrap this file in @layer.
 
-   Scope: :root[data-agy-theme="matte"]; loaded by src/theme-host.js.
+   Scope: :root[data-agy-theme="matte"]; loaded by theme-host.js.
+   Earlier versions: agy-theme.v1/.v2/.v3.css.
    ========================================================================== */
 
 
@@ -285,24 +286,36 @@
    --color-background) here makes every bg-background / var(--background)
    layer inside the panel match it: the pinned user-message band, the fade
    above the composer, sticky headers. */
-:root[data-agy-theme="matte"] .group\/pane {
+:root[data-agy-theme="matte"] .group\/pane,
+:root[data-agy-theme="matte"] .agy-sheet:not(:has(.group\/pane)) .browser-hole-opaque {
   --background: var(--m-panel);
   --color-background: var(--m-panel);
   width: auto;
   height: calc(100% - 8px);
-  /* No outline: flush against the sidebar a 1px ring reads as a divider.
-     Tone alone (#151517 on #0e0e10) marks the panel; a 6px gap lets its
-     corners read as a card. */
+  /* No outline: flush against the sidebar its 1px ring read as the very
+     divider the user asked to remove (live v4.0). Tone alone (#151517 on
+     #0e0e10) marks the panel; a 6px gap lets its corners read as a card. */
   margin: 0 8px 8px 6px;
   border-radius: 14px;
   background: var(--m-panel);
   overflow: hidden;
 }
+:root[data-agy-theme="matte"] .agy-sheet {
+  background-image: none !important;
+}
 
 /* Full-height 1px divider between sidebar and panel (holds the resize sash,
    so it keeps its box; only the line goes). Tailwind class hook. */
 :root[data-agy-theme="matte"] .bg-border.flex-shrink-0.z-30.h-full {
-  background: transparent;
+  background: var(--m-window);
+}
+
+/* Inactive webview occlusion guard: prevent GPU compositor bleeding */
+div[style*="opacity: 0.005"] webview,
+div[style*="display: none"] webview,
+webview[style*="opacity: 0.005"] {
+  visibility: hidden !important;
+  pointer-events: none !important;
 }
 
 /* The right-hand pane (terminal, task output, files): its tab strip stays
@@ -365,7 +378,7 @@
 /* The shell's 1px ring is its padded background (p-px bg-card-border).
    Focus only brightens that ring: no movement, no glow. The app's own
    click-anywhere-to-focus is opted out for the transcript in
-   src/theme-host.js. */
+   page-scripts.mjs. */
 :root[data-agy-theme="matte"] [id="antigravity.agentSidePanelInputBox"] {
   box-shadow: 0 10px 28px -14px var(--m-shadow);
 }
@@ -388,3 +401,188 @@
   color: var(--m-text-max);
   box-shadow: 0 8px 20px -8px var(--m-shadow);
 }
+
+
+/* 05 — Antigravity's own glass layer (data-newux-theme, since the November
+   update). Its rules outrank ours, so its tokens are mapped to Matte here and the
+   surfaces it paints with literal values are restated. */
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) {
+  --glass: var(--m-raised);
+  --glass-border: var(--m-line);
+  --glass-highlight: transparent;
+  --glass-shadow: none;
+  --shell: var(--m-window);
+  --onyx-frame: transparent;
+  --onyx-well: var(--m-inset);
+  --onyx-key: var(--m-high);
+  --onyx-raised: var(--m-raised);
+  --onyx-selected: var(--m-select);
+  --nux-focus-ring: var(--m-line-3);
+  --nux-chip-shadow: none;
+}
+
+/* P1 — Bubble & composer */
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-user-bubble-frame {
+  padding: 1px;
+  background: var(--card-border);
+  border-radius: 12px;
+}
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-user-bubble {
+  background: var(--card);
+  color: var(--m-text);
+  box-shadow: none;
+  border-radius: 11px;
+}
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer {
+  padding: 1px;
+  background: var(--card-border);
+  box-shadow: 0 10px 28px -14px var(--m-shadow);
+}
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer:focus-within {
+  background: var(--m-line-3);
+}
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer > .surface-composer-card {
+  background: var(--card);
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+/* P2 — Menus & Overlays */
+:root[data-agy-theme="matte"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay[role="menu"] {
+  background: var(--m-raised);
+  border-radius: 12px;
+  border: 1px solid var(--m-line-2);
+  box-shadow: 0 16px 40px -12px var(--m-shadow-menu);
+  backdrop-filter: none;
+}
+
+/* 80 — Voice Mode & Gemini Live Harmonization */
+:root[data-agy-theme="matte"] [data-testid="voice-live-pill"] {
+  background: var(--m-raised) !important;
+  color: var(--m-text) !important;
+  border: 1px solid var(--m-line-2) !important;
+  border-radius: 9999px !important;
+  transition: background-color 0.15s ease, color 0.15s ease !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-live-pill"]:hover {
+  background: var(--m-high) !important;
+  color: var(--m-text-max) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-start-button"] {
+  color: inherit !important;
+}
+
+/* Voice Picker Dialog */
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] {
+  background: var(--m-panel) !important;
+  border: 1px solid var(--m-line-2) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 16px 40px -12px var(--m-shadow-menu) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] [data-testid="voice-picker-close"] {
+  color: var(--m-text-2) !important;
+  border-radius: 6px !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] [data-testid="voice-picker-close"]:hover {
+  background: var(--m-hover) !important;
+  color: var(--m-text-max) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] [data-testid="voice-picker-name"] {
+  color: var(--m-text-max) !important;
+  font-family: var(--m-font-ui) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] .voice-picker-dot > span {
+  background: var(--m-line-3) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] .voice-picker-dot[aria-current="true"] > span {
+  background: var(--m-primary) !important;
+  box-shadow: 0 0 6px rgb(255 255 255 / 0.3) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"] {
+  background: var(--m-primary) !important;
+  color: var(--m-primary-ink) !important;
+  border-radius: 10px !important;
+  font-family: var(--m-font-ui) !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+  transition: background-color 0.15s ease !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"]:hover {
+  background: var(--m-strong) !important;
+}
+
+/* Active Voice Docked Panel */
+:root[data-agy-theme="matte"] [data-testid="live-docked"] {
+  background: var(--m-panel) !important;
+  background-image: none !important;
+  border: 1px solid var(--m-line-2) !important;
+  border-bottom: none !important;
+  border-radius: 14px 14px 0 0 !important;
+  box-shadow: 0 -8px 24px -8px var(--m-shadow) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-end-button"],
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-end"] {
+  background: var(--m-error) !important;
+  color: #ffffff !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-mute-button"],
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"],
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-speed"],
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-collapse"] {
+  border-radius: 6px !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-mute-button"]:hover,
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-agent-mute"]:hover,
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-speed"]:hover,
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-call-collapse"]:hover {
+  background: var(--m-hover) !important;
+  color: var(--m-text-max) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-speed-fill"] {
+  background: var(--m-text-2) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="voice-speed-track"] {
+  background: var(--m-line-2) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="live-lead"],
+:root[data-agy-theme="matte"] [data-testid="live-docked"] [data-testid="live-body"] {
+  color: var(--m-text) !important;
+  font-family: var(--m-font-ui) !important;
+}
+
+/* Background Glow Canvas & Ring — Subdued and quiet, zero neon glare */
+:root[data-agy-theme="matte"] [data-testid="voice-speaking-glow"] canvas {
+  opacity: 0.15 !important;
+  filter: grayscale(0.8) !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-speaking-glow"] .voice-glow-ring {
+  box-shadow: 0 0 0 1px var(--m-line-2) !important;
+}
+
+/* In-Chat Separator Marker */
+:root[data-agy-theme="matte"] [data-testid="voice-chat-marker"] {
+  color: var(--m-text-2) !important;
+  font-family: var(--m-font-ui) !important;
+}
+:root[data-agy-theme="matte"] div:has(> span [data-testid="voice-chat-marker"]) .bg-secondary,
+:root[data-agy-theme="matte"] div:has(> [data-testid="voice-chat-marker"]) .bg-secondary,
+:root[data-agy-theme="matte"] [data-testid="voice-chat-marker"] ~ div.bg-secondary {
+  background-color: var(--m-line) !important;
+}
+
+/* In-Chat Voice Transcript Card */
+:root[data-agy-theme="matte"] [data-testid="voice-transcript-card"] {
+  background: var(--m-raised) !important;
+  border: 1px solid var(--m-line-2) !important;
+  border-radius: 12px !important;
+}
+:root[data-agy-theme="matte"] [data-testid="voice-transcript-card"]:hover {
+  background: var(--m-high) !important;
+  border-color: var(--m-line-3) !important;
+}
+
+

package/themes/md3e.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   "Material 3 Expressive": a theme for Antigravity Desktop (tested with 2.28)
+   AGY "Material 3 Expressive" (v3.1) — Antigravity Desktop 2.26–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
@@ -155,6 +155,75 @@
   --vscode-diffEditor-removedTextBackground: color-mix(in srgb, var(--md-sys-color-error) 24%, transparent) !important;
 }
 
+
+/* 05 — Antigravity's own glass layer (data-newux-theme, since the November
+   update). Its rules outrank ours, so its tokens are mapped to M3 here and the
+   surfaces it paints with literal values are restated. */
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) {
+  --glass: var(--md-sys-color-surface-container);
+  --glass-border: transparent;
+  --glass-highlight: transparent;
+  --glass-shadow: none;
+  --shell: var(--md-sys-color-surface);
+  --onyx-frame: transparent;
+  --onyx-well: var(--md-sys-color-surface-container-highest);
+  --onyx-key: var(--md-sys-color-secondary-container);
+  --onyx-raised: var(--md-sys-color-surface-container-high);
+  --onyx-selected: var(--md-sys-color-secondary-container);
+  --nux-focus-ring: var(--md-sys-color-secondary);
+  --nux-chip-shadow: var(--md-sys-elevation-level2);
+}
+
+/* P1 — Unreadable bubble & composer */
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-user-bubble-frame {
+  padding: 0;
+  background: transparent;
+  border-radius: 24px 24px 6px 24px;
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-user-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);
+  box-shadow: none;
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-user-bubble .user-input-buttons-container {
+  background: var(--md-sys-color-surface-container-high);
+  box-shadow: var(--md-sys-elevation-level1);
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer {
+  padding: 0;
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: transparent;
+  box-shadow: var(--md-sys-elevation-level3);
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer > .surface-composer-card {
+  border-radius: var(--md-sys-shape-corner-extra-large);
+  background: var(--md-sys-color-surface-container-high);
+  backdrop-filter: none;
+  box-shadow: none;
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .surface-composer:focus-within > .surface-composer-card {
+  background: var(--md-sys-color-surface-container-highest);
+}
+
+/* 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;
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay .agy-overlay-item {
+  border-radius: 0;
+}
+:root[data-agy-theme="md3e"] body[data-agy-theme][data-newux-theme]:is(.dark, :not(.dark)) .agy-overlay:not([role="menu"]) {
+  background: var(--md-sys-color-surface-container);
+  backdrop-filter: none;
+}
+
 /* 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"
@@ -178,6 +247,7 @@
 
 /* 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 {
   --background: var(--md-sys-color-surface);
   --color-background: var(--md-sys-color-surface);
@@ -185,11 +255,15 @@
   border-radius: var(--md-sys-shape-corner-extra-large);
   overflow: hidden;
 }
-:root[data-agy-theme="md3e"] .group\/pane {
+: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;
 }
@@ -197,7 +271,15 @@
   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;
+  background: var(--md-sys-color-surface-container);
+}
+
+/* Inactive webview occlusion guard: prevent GPU compositor bleeding */
+div[style*="opacity: 0.005"] webview,
+div[style*="display: none"] webview,
+webview[style*="opacity: 0.005"] {
+  visibility: hidden !important;
+  pointer-events: none !important;
 }
 
 /* Top app bar. The conversation title is title-medium (16/24, 500): the
@@ -390,6 +472,10 @@
   --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"] > .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"] {
@@ -1002,11 +1088,12 @@
   padding: 0;
   gap: 0;
   border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
+  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;
-  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)) drop-shadow(0 2px 6px rgb(0 0 0 / 0.15));
+  filter: none;
   color: var(--md-sys-color-on-surface);
   font-family: var(--md-sys-typescale-font-family);
 }
@@ -1014,7 +1101,6 @@
 :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"] {
@@ -1022,26 +1108,10 @@
   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;
+  background: var(--md-sys-color-surface);
 }
 /* group headers: Base UI group labels, the model list's "Model", the mode
    menu's "<Project> Settings" row */
@@ -1149,8 +1219,7 @@
 :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] {
+:root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"]) > span.ml-auto {
   display: none;
 }
 :root[data-agy-theme="md3e"] [role="menu"] [role^="menuitem"]:is(.text-foreground, [aria-checked="true"])::after {
@@ -1204,3 +1273,128 @@
     animation: none;
   }
 }
+
+/* 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;
+}
+: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: 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-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: 0 0 10px color-mix(in srgb, var(--md-sys-color-primary) 50%, transparent) !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-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: 1px solid var(--md-sys-color-outline-variant) !important;
+  border-bottom: none !important;
+  border-radius: 28px 28px 0 0 !important;
+  box-shadow: var(--md-sys-elevation-level3) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !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;
+}
+
+/* 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;
+}
+: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: 1px solid var(--md-sys-color-outline-variant) !important;
+  border-radius: 16px !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;
+}
+