@materialwebunofficial/antigravity-themes 1.0.4 → 1.0.13

package/themes/matte.css

@@ -28,101 +28,7 @@
    ========================================================================== */
 
 
-/* 00 — Tokens -------------------------------------------------------------- */
-:root[data-agy-theme="matte"] {
-  /* Surfaces, back to front (neutral, no blue cast) */
-  --m-window: #0e0e10;   /* window frame, title bar, sidebar */
-  --m-panel:  #151517;   /* the conversation panel */
-  --m-raised: #1c1c1f;   /* composer, user message, cards, menus */
-  --m-high:   #26262a;   /* highlight inside raised things, tooltips */
-  --m-inset:  #111113;   /* code */
-
-  /* Hairlines and states (alpha white, reads the same on every surface) */
-  --m-line:   rgb(255 255 255 / 0.075);
-  --m-line-2: rgb(255 255 255 / 0.11);
-  --m-line-3: rgb(255 255 255 / 0.18);
-  --m-hover:  rgb(255 255 255 / 0.045);
-  --m-select: rgb(255 255 255 / 0.08);
-
-  /* Text — contrast on --m-panel */
-  --m-text-max: #f2f2f3;
-  --m-text:     #dcdcde;   /* 13.4:1 */
-  --m-text-2:   #a3a3a8;   /*  7.0:1 */
-  --m-text-3:   #86868c;   /*  4.9:1 */
-
-  /* The one bright thing */
-  --m-primary:     #ededee;
-  --m-primary-ink: #111113;
-  --m-strong:      #ffffff;   /* one step past --m-primary (button hover) */
-
-  /* Status, the Context card's segments, and the remaining literals */
-  --m-success: #6fbf8b;
-  --m-warning: #d9a35b;
-  --m-error:   #e06c6c;
-  --m-blue:    #7aa2f7;
-  --m-amber:   #e5a84b;
-  --m-teal:    #73daca;
-  --m-selection: rgb(255 255 255 / 0.16);
-  --m-lineno:    #5c5c60;
-  --m-scroll:    rgb(255 255 255 / 0.10);
-  --m-scroll-2:  rgb(255 255 255 / 0.18);
-  --m-scroll-3:  rgb(255 255 255 / 0.24);
-  --m-find:         rgb(217 163 91 / 0.24);
-  --m-find-current: rgb(217 163 91 / 0.55);
-  --m-find-border:  rgb(217 163 91 / 0.85);
-  --m-shadow:      rgb(0 0 0 / 0.7);
-  --m-shadow-menu: rgb(0 0 0 / 0.75);
-
-  --m-font-ui:      "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
-  --m-font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
-  --m-font-mono:    "Cascadia Mono", "Cascadia Code", Consolas, monospace;
-}
-
-/* Light mode: the app's own setting (System / Light / Dark, marked on
-   <body>), mirrored by theme-host.js as data-agy-mode. Same structure,
-   inverted: a light gray window holds a near-white panel, raised things are
-   white and carry the hairline, lines and states are alpha black, and the
-   one strong thing is the near-black send button. Every rule reads these
-   tokens, so nothing else changes. Contrast on --m-panel. */
-:root[data-agy-theme="matte"][data-agy-mode="light"] {
-  --m-window: #ebebed;
-  --m-panel:  #f8f8f9;
-  --m-raised: #ffffff;
-  --m-high:   #e7e7ea;
-  --m-inset:  #f1f1f3;
-
-  --m-line:   rgb(0 0 0 / 0.08);
-  --m-line-2: rgb(0 0 0 / 0.12);
-  --m-line-3: rgb(0 0 0 / 0.22);
-  --m-hover:  rgb(0 0 0 / 0.04);
-  --m-select: rgb(0 0 0 / 0.07);
-
-  --m-text-max: #0b0b0d;
-  --m-text:     #1d1d20;   /* 15.8:1 */
-  --m-text-2:   #4b4b51;   /*  8.2:1 */
-  --m-text-3:   #626268;   /*  5.7:1, 5.1:1 on the window */
-
-  --m-primary:     #18181b;
-  --m-primary-ink: #f6f6f7;
-  --m-strong:      #000000;
-
-  --m-success: #277045;
-  --m-warning: #94560a;
-  --m-error:   #b3373a;
-  --m-blue:    #3a63c4;
-  --m-amber:   #a86a12;
-  --m-teal:    #1f7f71;
-  --m-selection: rgb(0 0 0 / 0.12);
-  --m-lineno:    #8e8e94;
-  --m-scroll:    rgb(0 0 0 / 0.14);
-  --m-scroll-2:  rgb(0 0 0 / 0.24);
-  --m-scroll-3:  rgb(0 0 0 / 0.32);
-  --m-find:         rgb(168 106 18 / 0.18);
-  --m-find-current: rgb(168 106 18 / 0.40);
-  --m-find-border:  rgb(168 106 18 / 0.8);
-  --m-shadow:      rgb(0 0 0 / 0.16);
-  --m-shadow-menu: rgb(0 0 0 / 0.18);
-}
+/* 00 — Tokens: matte-tokens.css (loaded before this file) ------------------- */
 
 
 /* 01 — Bridge: app tokens (inline on <html>, hence !important) ------------ */
@@ -281,33 +187,50 @@
 
 
 /* 10 — Frame: one rounded panel in a darker window ------------------------- */
-/* The content pane (Tailwind class group/pane, one per pane) becomes the
-   panel. Re-pointing --background (and Tailwind's resolved
-   --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"] .agy-sheet:not(:has(.group\/pane)) .browser-hole-opaque {
+/* Since the November update the app lays the panel 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.
+   No outline (--card-edge is the hairline the app draws around the panel):
+   flush against the sidebar a 1px ring read as the very divider the user
+   asked to remove (live v4.0). Tone alone (#151517 on #0e0e10) marks the
+   panel; the gap lets its corners read as a card. */
+:root[data-agy-theme="matte"] .agy-inset-shell {
+  --shell-canvas: var(--m-window);
+  --card-gap: 8px;
+  --card-radius: 14px;
+  --card-edge: transparent;
+  --sash-line: var(--m-line-3);
+  --sash-glow: transparent;
+}
+/* Re-pointing --background (and Tailwind's resolved --color-background) in
+   the panel makes every bg-background / var(--background) layer inside it
+   match: the pinned user-message band, the fade above the composer, sticky
+   headers. */
+:root[data-agy-theme="matte"] .agy-sheet [data-main-content-body],
+:root[data-agy-theme="matte"] .agy-inset-shell [data-side-panel-body],
+:root[data-agy-theme="matte"] [data-testid="sidecar-iframe-slot"] {   /* a sidecar's frame is mounted over its pane, not in it */
   --background: var(--m-panel);
   --color-background: var(--m-panel);
-  width: auto;
-  height: calc(100% - 8px);
-  /* 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: var(--m-window);
+/* The right-hand pane (terminal, task output, files, Swarm): its tab strip
+   stays on the window like the conversation's title row, and the content
+   below it is a second rounded panel, a gap apart (the app joins the two
+   along a hairline). */
+:root[data-agy-theme="matte"] [data-active-tab-id] {
+  border-bottom-color: transparent;
+}
+:root[data-agy-theme="matte"] .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="matte"] .agy-sheet[data-side-panel-docked] [data-side-panel-body] {
+  --card-gap-left: calc(var(--card-gap) / 2);
+  border-radius: var(--card-radius);
 }
 
 /* Inactive webview occlusion guard: prevent GPU compositor bleeding */
@@ -318,21 +241,6 @@ webview[style*="opacity: 0.005"] {
   pointer-events: none !important;
 }
 
-/* The right-hand pane (terminal, task output, files): its tab strip stays
-   on the window like the conversation's title row, and the content below
-   it becomes the same rounded panel. Markup (2.26):
-   flex-col > [data-active-tab-id] (tab strip, border-b) + .flex-grow */
-:root[data-agy-theme="matte"] [data-active-tab-id] {
-  border-bottom-color: transparent;
-}
-:root[data-agy-theme="matte"] [data-active-tab-id] + .flex-grow {
-  --background: var(--m-panel);
-  --color-background: var(--m-panel);
-  margin: 0 8px 8px 0;
-  border-radius: 14px;
-  background: var(--m-panel);
-}
-
 
 /* 20 — Sidebar ------------------------------------------------------------- */
 /* Row hover is the app's own hover:bg-sidebar-muted: it also sets --row-bg,
@@ -366,8 +274,10 @@ webview[style*="opacity: 0.005"] {
 :root[data-agy-theme="matte"] [role="article"] a:hover {
   text-decoration-color: var(--m-text-2);
 }
-/* Fenced code: the card inside <pre> (bg-muted) sits darker than the panel */
-:root[data-agy-theme="matte"] [role="article"] pre > div {
+/* Fenced code: the block (bg-muted, the one code-tools.js marks .agy-code;
+   a pre > div before 2.31) sits darker than the panel, its hairline kept */
+:root[data-agy-theme="matte"] [role="article"] pre > div,
+:root[data-agy-theme="matte"] .agy-code {
   border-radius: 12px;
   background: var(--m-inset);
   --agy-lineno: var(--m-lineno);   /* code-tools.js line numbers */
@@ -456,6 +366,425 @@ webview[style*="opacity: 0.005"] {
   backdrop-filter: none;
 }
 
+/* 60 — Dialogs & Settings: an inspector ------------------------------------ */
+/* Not cards: Settings reads like a matte inspector. A darker index column,
+   then plain rows on the panel, ruled by hairlines, under small uppercase
+   group labels; compact 28px controls in raised gray with a hairline; the
+   switch is the one thing that turns bright. Selectors go through
+   .agy-dialog to outrank the app's glass rules (body[data-newux-theme]). */
+:root[data-agy-theme="matte"] .agy-dialog {
+  border: 1px solid var(--m-line-2) !important;
+  border-radius: 14px !important;
+  background: var(--m-panel);
+  box-shadow: 0 24px 64px -16px var(--m-shadow) !important;
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] .settings-modal-backdrop {
+  background: rgb(0 0 0 / 0.55);
+}
+:root[data-agy-theme="matte"] .agy-dialog > button[aria-label="Close"] {
+  border-radius: 6px !important;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] .agy-dialog > button[aria-label="Close"]:hover {
+  background: var(--m-hover);
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] .settings-modal-container .bg-background {
+  background: transparent;
+}
+
+/* index column */
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] {
+  border-right: 1px solid var(--m-line);
+  background: var(--m-window);
+  font-family: var(--m-font-ui);
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] > div:first-child {
+  gap: 1px;
+  padding: 16px 0 12px;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] .px-4 {
+  padding: 0 18px;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] .px-4.mt-2 {
+  margin-top: 16px;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] :is(h1, h2) {
+  margin-bottom: 6px;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] .mx-2 {
+  margin: 0 10px;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"] {
+  min-height: 30px;
+  padding: 0 8px;
+  border-radius: 6px;
+  color: var(--m-text-2);
+  font-size: 13px;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"] span {
+  color: inherit;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"]:hover {
+  background: var(--m-hover);
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button[data-testid^="settings-nav-item-"].bg-sidebar-secondary {
+  background: var(--m-select);
+  box-shadow: inset 2px 0 0 var(--m-primary);
+  color: var(--m-text-max);
+  font-weight: 500;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button.mx-4 {
+  margin: 2px 18px 0;
+  color: var(--m-text-3);
+  font-size: 12px;
+  text-decoration: none;
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] button.mx-4:hover {
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] > .border-t {
+  border-color: var(--m-line);
+}
+:root[data-agy-theme="matte"] [data-testid="settings-sidebar"] > .border-t > button > div:first-child {
+  background: var(--m-high);
+  color: var(--m-text);
+}
+
+/* page: a display-face title over a hairline, uppercase group labels */
+:root[data-agy-theme="matte"] .settings-modal-container .p-6.max-w-2xl {
+  gap: 20px;
+  padding: 30px 36px 40px;
+}
+:root[data-agy-theme="matte"] .settings-modal-container .p-6.max-w-2xl > div:first-child {
+  margin-bottom: 4px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--m-line);
+}
+:root[data-agy-theme="matte"] .settings-modal-container h2.text-2xl {
+  font-family: var(--m-font-display);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--m-text-max);
+}
+:root[data-agy-theme="matte"] .settings-modal-container h2.text-2xl + div {
+  font-size: 13px;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] .settings-modal-container h3 {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] .settings-modal-container .leading-relaxed {
+  font-size: 12px;
+  color: var(--m-text-3);
+}
+
+/* rows: no box, hairlines between and around */
+:root[data-agy-theme="matte"] .agy-dialog .agy-card {
+  border: 0;
+  border-block: 1px solid var(--m-line);
+  border-radius: 0;
+  background: transparent;
+  --color-border: var(--m-line);
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-card .py-2.px-3 {
+  min-height: 52px;
+  padding: 11px 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-card .text-sm {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-card > button:hover {
+  background: var(--m-hover);
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-testid="settings-row-badge"] {
+  padding: 1px 5px;
+  border: 0;
+  border-radius: 4px;
+  background: var(--m-high);
+  color: var(--m-text-2);
+  font-family: var(--m-font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+}
+:root[data-agy-theme="matte"] .agy-dialog code {
+  border-color: var(--m-line);
+  border-radius: 4px;
+  background: var(--m-inset);
+  font-family: var(--m-font-mono);
+}
+
+/* controls: 28px, raised gray with a hairline, 6px corners */
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-sm, .agy-button-md).bg-secondary,
+:root[data-agy-theme="matte"] .agy-dialog .agy-select-trigger {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--m-line-2) !important;
+  border-radius: 6px !important;
+  background: var(--m-raised);
+  color: var(--m-text);
+  font-size: 12.5px;
+  font-weight: 500;
+  transition: background-color 80ms linear, border-color 80ms linear;
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-sm, .agy-button-md).bg-secondary:hover,
+:root[data-agy-theme="matte"] .agy-dialog .agy-select-trigger:hover {
+  border-color: var(--m-line-3) !important;
+  background: var(--m-high);
+  color: var(--m-text-max);
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-select-trigger[aria-expanded="true"] {
+  border-color: var(--m-line-3) !important;
+  background: var(--m-high);
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-select-trigger svg {
+  opacity: 0.6;
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(a, button:not([role])).bg-primary {
+  padding: 4px 12px;
+  border-radius: 6px !important;
+  background: var(--m-primary);
+  color: var(--m-primary-ink);
+  font-size: 12.5px;
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(a, button:not([role])).bg-primary:hover {
+  background: var(--m-strong);
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-testid="delete-project-button"] {
+  border: 1px solid color-mix(in srgb, var(--m-error) 55%, transparent);
+  border-radius: 6px !important;
+  background: transparent;
+  color: var(--m-error);
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-testid="delete-project-button"]:hover {
+  background: color-mix(in srgb, var(--m-error) 12%, transparent);
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-sm.text-link, button.self-start.rounded-md) {
+  color: var(--m-text-2);
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-sm.text-link, button.self-start.rounded-md):hover {
+  background: transparent;
+  color: var(--m-text-max);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-icon-sm, .agy-button-icon):not(.bg-secondary) {
+  border-radius: 5px !important;
+  color: var(--m-text-3);
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(.agy-button-icon-sm, .agy-button-icon):not(.bg-secondary):hover {
+  background: var(--m-hover);
+  color: var(--m-text);
+}
+/* key caps: mono, a hairline, a heavier bottom edge */
+:root[data-agy-theme="matte"] .agy-dialog .agy-button-xs.border {
+  height: 24px;
+  padding: 0 7px;
+  border: 1px solid var(--m-line-2);
+  border-bottom-width: 2px;
+  border-radius: 5px !important;
+  background: var(--m-raised);
+  color: var(--m-text);
+  font-family: var(--m-font-mono);
+  font-size: 11.5px;
+}
+:root[data-agy-theme="matte"] .agy-dialog .agy-button-xs.border:hover {
+  border-color: var(--m-line-3);
+}
+
+/* segmented control: an inset well, the chosen segment raised */
+:root[data-agy-theme="matte"] .agy-dialog [data-slot="toggle-group"] {
+  height: 30px;
+  padding: 2px;
+  gap: 2px;
+  border: 1px solid var(--m-line) !important;
+  border-radius: 8px;
+  background: var(--m-inset) !important;
+  box-shadow: none !important;
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-slot="toggle-group"] > button {
+  padding: 0 10px;
+  border-radius: 6px;
+  color: var(--m-text-3) !important;
+  font-size: 12.5px;
+  box-shadow: none !important;
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-slot="toggle-group"] > button:hover {
+  color: var(--m-text) !important;
+}
+:root[data-agy-theme="matte"] .agy-dialog [data-slot="toggle-group"] > button[data-pressed] {
+  background: var(--m-high) !important;
+  color: var(--m-text-max) !important;
+  box-shadow: inset 0 0 0 1px var(--m-line-2) !important;
+}
+
+/* switch: 30 x 18, gray off, the bright primary on */
+:root[data-agy-theme="matte"] [role="switch"].rounded-full {
+  width: 30px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background: var(--m-high) !important;
+  box-shadow: inset 0 0 0 1px var(--m-line-2);
+}
+:root[data-agy-theme="matte"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]) {
+  background: var(--m-primary) !important;
+  box-shadow: none;
+}
+:root[data-agy-theme="matte"] [role="switch"].rounded-full > span {
+  width: 14px;
+  height: 14px;
+  background: var(--m-text-3);
+  box-shadow: none !important;
+  transform: translateX(2px) !important;
+  transition: transform 120ms ease-out, background-color 80ms linear;
+}
+:root[data-agy-theme="matte"] [role="switch"].rounded-full:is([aria-checked="true"], [data-checked]) > span {
+  background: var(--m-primary-ink);
+  transform: translateX(14px) !important;
+}
+
+/* slider: a 2px line, a small round knob */
+:root[data-agy-theme="matte"] .agy-dialog input[type="range"] {
+  --primary: var(--m-primary);
+  --secondary: var(--m-line-2);
+  height: 2px;
+}
+:root[data-agy-theme="matte"] .agy-dialog input[type="range"]::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--m-primary);
+}
+
+/* option cards */
+:root[data-agy-theme="matte"] .agy-dialog [role="radio"].rounded-xl {
+  border: 1px solid var(--m-line-2);
+  border-radius: 10px;
+  background: transparent;
+  box-shadow: none;
+  color: var(--m-text);
+}
+:root[data-agy-theme="matte"] .agy-dialog [role="radio"].rounded-xl:hover {
+  background: var(--m-hover);
+}
+:root[data-agy-theme="matte"] .agy-dialog [role="radio"].rounded-xl:is([data-checked], [aria-checked="true"]) {
+  border-color: var(--m-text-3);
+  background: var(--m-raised);
+  color: var(--m-text-max);
+}
+
+/* text fields: inset, a hairline that brightens on focus (the app's
+   layered !important utilities are steered through their variables) */
+:root[data-agy-theme="matte"] .agy-dialog :is(input.agy-field, input.bg-muted, .h-8.rounded-lg.bg-muted.border) {
+  --color-muted: var(--m-inset);
+  --color-border: var(--m-line-2);
+  border-color: var(--color-border);
+  border-radius: 6px !important;
+  background: var(--m-inset);
+  color: var(--m-text);
+  font-size: 13px !important;
+}
+:root[data-agy-theme="matte"] .agy-dialog :is(input.agy-field:focus, input.bg-muted:focus, .h-8.rounded-lg.bg-muted.border:focus-within) {
+  --color-border: var(--m-line-3);
+  outline: none;
+}
+
+/* usage rings and token bars: monochrome, status color only when low */
+:root[data-agy-theme="matte"] circle:has(+ [data-testid="quota-progress-circle"]) {
+  stroke: var(--m-high);
+  stroke-opacity: 1;
+}
+:root[data-agy-theme="matte"] .rounded-full:has(> svg [data-testid="quota-progress-circle"]) {
+  background: transparent;
+}
+:root[data-agy-theme="matte"] [data-testid="quota-progress-circle"] {
+  stroke: var(--m-text);
+}
+:root[data-agy-theme="matte"] [data-testid="quota-progress-circle"]:is(.stroke-yellow-500, .stroke-amber-500, .stroke-orange-500) {
+  stroke: var(--m-warning);
+}
+:root[data-agy-theme="matte"] [data-testid="quota-progress-circle"]:is(.stroke-red-500, .stroke-destructive) {
+  stroke: var(--m-error);
+}
+:root[data-agy-theme="matte"] .agy-dialog {
+  --chart-blue: var(--m-blue);
+  --chart-green: var(--m-success);
+  --chart-purple: var(--m-text-2);
+  --chart-yellow: var(--m-amber);
+  --chart-orange: var(--m-warning);
+  --chart-red: var(--m-error);
+}
+:root[data-agy-theme="matte"] .agy-dialog .h-2.rounded-full.bg-muted {
+  height: 4px;
+  background: var(--m-high);
+}
+:root[data-agy-theme="matte"] [data-testid="workspace-customizations-view"] .border.border-border.rounded-xl {
+  border-color: var(--m-line);
+  border-radius: 8px;
+  --color-border: var(--m-line);
+}
+:root[data-agy-theme="matte"] .agy-dialog span.rounded:is(.bg-blue-500\/10, .bg-purple-500\/10, .bg-green-500\/10, .bg-orange-500\/10) {
+  border-radius: 4px;
+  background: var(--m-high);
+  color: var(--m-text-2);
+}
+
+/* "Restart to Update": quiet, like every other control (raised gray, a
+   hairline, 6px); the app's pulses are stilled */
+:root[data-agy-theme="matte"] [data-testid="app-update-button"] {
+  animation: none !important;
+}
+:root[data-agy-theme="matte"] [data-testid="app-update-button"]:not(.w-6) {
+  width: auto;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 6px;
+  background: var(--m-raised);
+  box-shadow: inset 0 0 0 1px var(--m-line-2);
+  color: var(--m-text-max);
+  font-size: 11.5px;
+  font-weight: 500;
+}
+:root[data-agy-theme="matte"] [data-testid="app-update-button"]:not(.w-6):hover {
+  background: var(--m-high);
+  box-shadow: inset 0 0 0 1px var(--m-line-3);
+}
+:root[data-agy-theme="matte"] [data-testid="app-update-button"].w-6 {
+  color: var(--m-text-max);
+}
+
+/* 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="matte"] .agy-user-bubble .inline-pill {
+  color: inherit;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 5px;
+}
+:root[data-agy-theme="matte"] .agy-user-bubble .inline-pill :is(.text-foreground, .text-secondary-foreground) {
+  color: inherit;
+}
+:root[data-agy-theme="matte"] .agy-user-bubble .inline-pill .text-muted-foreground {
+  color: color-mix(in srgb, currentColor 80%, transparent);
+}
+
 /* 80 — Voice Mode & Gemini Live Harmonization */
 :root[data-agy-theme="matte"] [data-testid="voice-live-pill"] {
   background: var(--m-raised) !important;
@@ -496,7 +825,7 @@ webview[style*="opacity: 0.005"] {
 }
 :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;
+  box-shadow: none !important;
 }
 :root[data-agy-theme="matte"] [data-testid="voice-picker"] button[data-testid="voice-picker-use"] {
   background: var(--m-primary) !important;
@@ -519,8 +848,7 @@ webview[style*="opacity: 0.005"] {
   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;
+  backdrop-filter: none !important;   /* opaque: a blur behind it was pure cost */
 }
 :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"] {
@@ -586,3 +914,5 @@ webview[style*="opacity: 0.005"] {
 }
 
 
+/* 90 — Swarm and other sidecar panes: themes/frames/matte.css. They are
+   cross-origin frames; frame-host.js loads that stylesheet inside them. */