/* ============================================================================ * Glass-UI — App-weiter Rollout des Chat-Glas-Looks (PREVIEW, flag-gated). * * Alles hier ist unter html[data-glass="on"] gekapselt. Seit dem Rollout * (2026-06-13) setzt das Head-Script in index.html data-glass IMMER auf "on"; * "?glass=0" ist der Notaus, "?glass=1" stellt es wieder her. Die Kapselung * bleibt absichtlich als Kill-Switch erhalten. * * Intensitaet ist ueber data-glass-level steuerbar; Default = "kraeftig" * (Jörns Wahl). Abschwaechen per "?glasslevel=mittel" oder "=subtle". * * Rezept identisch zum Chat (chat-workspace + chat-glass): * - farbiges Wallpaper aus den Theme-Toenen als Tiefenebene * - frosted Karten: durchscheinende Flaeche + blur + Top-Sheen + Inset-Kante * ========================================================================== */ /* Specular-Highlights des Glases, hell/dunkel getrennt (wie chat-workspace). */ html[data-glass="on"] { --glass-sheen: rgba(255, 255, 255, .55); --glass-grad: rgba(255, 255, 255, .28); /* === Intensitaets-Stellschrauben (Default = "kraeftig", Jörns Wahl) === */ --glass-blur: 28px; /* Frost-Staerke der Karten */ --glass-sat: 195%; /* Saettigung hinter dem Blur */ --glass-wall-primary: 40%; /* Wallpaper-Bloom oben (primary) */ --glass-wall-tertiary: 32%; /* Wallpaper-Bloom unten (tertiary) */ --glass-wall-line-a: 17%; /* Grund-Verlauf primary-Anteil */ --glass-wall-line-b: 12%; /* Grund-Verlauf tertiary-Anteil */ --glass-card-base: 40%; /* Surface-Anteil neutraler Karten */ --glass-cat-tint-a: 44%; /* Kategorie-Ton a */ --glass-cat-tint-b: 33%; /* Kategorie-Ton b */ --glass-cat-surface: 26%; /* Surface-Anteil Kategorie-Karten */ } html[data-glass="on"][data-theme="dark"] { --glass-sheen: rgba(255, 255, 255, .16); --glass-grad: rgba(255, 255, 255, .07); } /* --- mittel: ruhiger, mehr Surface, schwaecheres Wallpaper --- */ html[data-glass="on"][data-glass-level="mittel"] { --glass-blur: 20px; --glass-sat: 170%; --glass-wall-primary: 24%; --glass-wall-tertiary: 20%; --glass-wall-line-a: 11%; --glass-wall-line-b: 7%; --glass-card-base: 55%; --glass-cat-tint-a: 28%; --glass-cat-tint-b: 20%; --glass-cat-surface: 40%; } /* --- dezent: Glas nur angedeutet, fast wie der flache Look --- */ html[data-glass="on"][data-glass-level="subtle"] { --glass-blur: 14px; --glass-sat: 150%; --glass-wall-primary: 13%; --glass-wall-tertiary: 10%; --glass-wall-line-a: 6%; --glass-wall-line-b: 4%; --glass-card-base: 68%; --glass-cat-tint-a: 19%; --glass-cat-tint-b: 13%; --glass-cat-surface: 54%; } /* Seitenspezifische Wallpaper-Farbwelt: jede View faerbt das Wallpaper in ihre Domaenen-Toene — dieselben Tokens wie die Karten-Kategorien, damit Hintergrund und Inhalt als eine Welt lesen. Uebersicht behaelt primary/tertiary als ruhiges "Zuhause". Das data-view-Attribut setzt App.showView() auf . Dark-Mode und Farbschemata laufen automatisch mit, weil alles ueber Theme-Tokens geht. */ /* Uebersicht/Default-Wallpaper: gedaempftes Indigo statt voller Primary-Sattheit. Das volle Primary-Indigo las sich oben als sichtbares "Topbar"-Band und war Joern zu kraeftig (2026-06-13). Quelle darum Richtung Surface aufgehellt → ruhiger Schleier, kein Bandrand. Die Domaenen-Views unten behalten ihre vollen Kategorie-Toene (dort war nichts zu kraeftig). */ html[data-glass="on"] { --page-wall-a: color-mix(in srgb, var(--md-sys-color-primary) 52%, var(--md-sys-color-surface)); --page-wall-b: color-mix(in srgb, var(--md-sys-color-tertiary) 52%, var(--md-sys-color-surface)); } html[data-glass="on"] body[data-view="fitness"] { --page-wall-a: var(--cat-training-a); --page-wall-b: var(--cat-training-b); } html[data-glass="on"] body[data-view="nutrition"] { --page-wall-a: var(--cat-nutrition-a); --page-wall-b: var(--cat-nutrition-b); } html[data-glass="on"] body[data-view="health"] { --page-wall-a: var(--cat-vitals-a); --page-wall-b: var(--cat-vitals-b); } html[data-glass="on"] body[data-view="dossier"] { --page-wall-a: var(--cat-analysis-a); --page-wall-b: var(--cat-analysis-b); } /* Statusleiste (theme-color-Meta) nimmt die Wallpaper-Farbe der jeweiligen Seite auf. Ziel: der flache Leisten-Ton trifft die *width-gemittelte Oberkante* des Wallpapers, damit der Saum Leiste↔Inhalt fast verschwindet (voll nahtlos erst per TWA/.apk — siehe [[project_fitbit_google_migration]]). Modell: Grund-Verlauf (--glass-wall-line-a) plus ~1/3 des Top-Blooms (--glass-wall-primary), der nur die rechte Haelfte aufhellt → Mittel ueber die Breite. Trackt so View (page-wall-a) UND Intensitaet (?glasslevel) automatisch. App.updateSystemBarColors() liest den Wert ueber ein Probe-Element aus (color-mix/calc kollabiert dort zu color(srgb …), das _toHex() per Canvas zu #rrggbb normalisiert). Auf , damit das per-View --page-wall-a greift. */ html[data-glass="on"] body { --status-bar-tint: color-mix(in srgb, var(--page-wall-a) calc(var(--glass-wall-line-a) + var(--glass-wall-primary) / 3), var(--md-sys-color-surface)); } /* App-Wallpaper: zwei Theme-Bloeme (page-wall-a/b) ueber der Surface. Sitzt auf #main-wrapper (scrollt nicht mit), die Karten gleiten darueber hinweg. */ html[data-glass="on"] #main-wrapper { background: radial-gradient(85% 60% at 90% 2%, color-mix(in srgb, var(--page-wall-a) var(--glass-wall-primary), transparent) 0%, transparent 58%), radial-gradient(95% 70% at 0% 100%, color-mix(in srgb, var(--page-wall-b) var(--glass-wall-tertiary), transparent) 0%, transparent 64%), linear-gradient(160deg, color-mix(in srgb, var(--page-wall-a) var(--glass-wall-line-a), var(--md-sys-color-surface)), color-mix(in srgb, var(--page-wall-b) var(--glass-wall-line-b), var(--md-sys-color-surface))); transition: background-image 420ms cubic-bezier(0.2, 0, 0, 1); } /* Scroll-Container durchsichtig, damit das Wallpaper traegt. */ html[data-glass="on"] main#content { background: transparent; } /* Topbar: KEIN Band mehr. Die Flaeche ist komplett transparent (kein Hintergrund, kein Blur, keine Hairline), sodass das Wallpaper nahtlos von der Statusleiste bis in den Inhalt durchlaeuft — keine sichtbaren Kanten oben/unten (Joern, 2026-06-13). Es bleiben nur die floatenden Buttons: der Zeitraum-Pill (.cs-pill) und das Zahnrad (.profile-menu-trigger) tragen jeweils eigene Pill-Flaeche + Elevation, lesen also auch ohne Band sauber ueber dem Inhalt. */ html[data-glass="on"] .global-controls { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; } /* Auf Mobile schwebt die Topbar WIRKLICH: sie reserviert keinen 64px-Streifen mehr. Vorher war .global-controls ein In-Flow-Flex-Item — beim Hochscrollen tauchte das (transparente) Band wieder auf, die Ueberschrift klemmte darunter (klippte an der Inhalts-Oberkante y=64) und der flache Wallpaper-Streifen darueber las sich als Bar (Joern, 2026-06-13, mit Geraete-Screenshot belegt). Jetzt: absolut ueber dem Inhalt, Klicks gehen durch (ausser auf den Buttons), Inhalt fuellt bis ganz nach oben → die Ueberschrift klippt an der Viewport- Kante wie normaler Scroll-Inhalt, kein Band. Nur das Zahnrad/die Pill schweben. */ @media (max-width: 768px) { html[data-glass="on"] #main-wrapper { position: relative; } html[data-glass="on"] .global-controls { position: absolute; top: 0; left: 0; right: 0; z-index: 30; pointer-events: none; } html[data-glass="on"] .global-controls > * { pointer-events: auto; } /* Luft oben, damit die schwebenden Buttons im Ruhezustand ueber leerer Flaeche sitzen; scrollt mit weg (Teil des Scroll-Inhalts), also kein bleibender Streifen. */ html[data-glass="on"] body:not(.chat-mode):not(.chat-picker) #content { padding-top: 64px; } } /* --- Karten als Glas --- */ html[data-glass="on"] .card:not(.modal) { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-low) var(--glass-card-base), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 2px rgba(0, 0, 0, .10), 0 8px 28px rgba(0, 0, 0, .16); } /* Kategorie-Karten behalten ihren Farbton, bekommen aber dieselbe Frostung: Sheen + getoenter Verlauf + durchscheinende Surface darunter. */ html[data-glass="on"] .card.cat-vitals, html[data-glass="on"] .card.cat-sleep, html[data-glass="on"] .card.cat-body, html[data-glass="on"] .card.cat-blood, html[data-glass="on"] .card.cat-nutrition, html[data-glass="on"] .card.cat-hellofresh, html[data-glass="on"] .card.cat-activity, html[data-glass="on"] .card.cat-training, html[data-glass="on"] .card.cat-analysis, html[data-glass="on"] .card.cat-neutral, html[data-glass="on"] .card.cat-supply { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--card-accent-a) var(--glass-cat-tint-a), transparent), color-mix(in srgb, var(--card-accent-b) var(--glass-cat-tint-b), transparent)), color-mix(in srgb, var(--md-sys-color-surface-container-low) var(--glass-cat-surface), transparent); border: 1px solid color-mix(in srgb, var(--card-accent-a) 34%, transparent); } /* Bio-Age-Hero analog (primary/tertiary statt cat-Akzent). */ html[data-glass="on"] .bio-age-card { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 72%, transparent), color-mix(in srgb, var(--md-sys-color-tertiary-container) 72%, transparent)), color-mix(in srgb, var(--md-sys-color-surface-container-low) 30%, transparent); } /* Interaktive Karten: Hover hebt das Glas leicht an (statt Flaechenfarbe). */ html[data-glass="on"] .card.interactive:hover { box-shadow: inset 0 1px 0 var(--glass-sheen), 0 2px 4px rgba(0, 0, 0, .12), 0 14px 38px rgba(0, 0, 0, .24); } /* =========================================================================== * Popups als Glas — Modals, Profil-Menue, Select-Dropdown ziehen dasselbe * Frosted-Rezept wie die Karten. So ist der Look konsequent bis in jede * schwebende Flaeche, nicht nur in der Scroll-Ebene. * ========================================================================= */ /* Scrim staerker geblurrt und etwas heller, damit das Frosted-Modal davor plastisch traegt statt vor flachem Schwarz zu stehen. */ html[data-glass="on"] .overlay { background: color-mix(in srgb, #000 42%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Modals tragen einen hoeheren Surface-Anteil (~76%) als Karten: textlastige Dialoge bleiben knackig lesbar — Glas als Rahmen, nicht auf Kosten des Inhalts. Tieferer Schatten hebt das Panel klar von der geblurrten Szene ab. */ html[data-glass="on"] .modal, html[data-glass="on"] .modal.card { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-low) 76%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 2px rgba(0, 0, 0, .12), 0 24px 64px rgba(0, 0, 0, .32); } /* Profil-Menue + Custom-Select-Dropdown: gleiche Frostung, etwas dichter (72% surface-container-high), weil sie ueber dichten Listen schweben. */ html[data-glass="on"] .profile-settings-menu, html[data-glass="on"] .cs-menu { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-high) 72%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 12px 40px rgba(0, 0, 0, .28); } /* Einstellungen-Menue bekommt denselben Blur-Scrim wie die Modals. Topbar wird ueber den Scrim gehoben (z 3001), damit Zahnrad + verankertes Menue scharf bleiben; Inhalt und Nav-Bar dahinter dimmen und blurren weg. body.settings-open setzt App beim Oeffnen. */ html[data-glass="on"] body.settings-open::before { content: ""; position: fixed; inset: 0; z-index: 2999; background: color-mix(in srgb, #000 42%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: pixelScrimIn 300ms cubic-bezier(0.2, 0, 0, 1) both; } html[data-glass="on"] body.settings-open .global-controls { z-index: 3001; } /* =========================================================================== * Buttons im Chat-Glas-Look — derselbe plastische 3D-Eindruck (Sheen + Blur + * Inset-Highlight + Tiefen-Schatten) wie die schwebenden Chat-Pills/der Send-FAB. * Alles gated, damit "?glass=0" auf das flache M3 zurueckfaellt. * ========================================================================= */ /* Primaer-Buttons (CTA): glaenzendes *getoentes* Glas wie der Chat-Send-FAB. Bleiben farbig (Klarheit der Hauptaktion), bekommen aber Top-Sheen, einen helleren Verlauf und einen farbigen Glow-Schatten -> wirken plastisch. */ html[data-glass="on"] .m3-button, html[data-glass="on"] .m3-button-filled { /* Tint defaults to the primary CTA colour. Tonal/secondary variants (below) override just this var + their text colour, so the glossy treatment keeps their own hue instead of being forced to primary — which previously left dark-on-dark / light-on-light labels (Joerns Lesbarkeits-Bug). */ --glass-btn-tint: var(--md-sys-color-primary); background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, color-mix(in srgb, var(--glass-btn-tint) 84%, #fff), var(--glass-btn-tint)); border: 1px solid color-mix(in srgb, var(--glass-btn-tint) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 1px 2px rgba(0, 0, 0, .18), 0 8px 22px color-mix(in srgb, var(--glass-btn-tint) 42%, transparent); } html[data-glass="on"] .m3-button:hover, html[data-glass="on"] .m3-button-filled:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), 0 2px 4px rgba(0, 0, 0, .20), 0 12px 30px color-mix(in srgb, var(--glass-btn-tint) 52%, transparent); } /* Tonal button variants keep their own hue + matching on-colour label under glass. Without this the generic rule above tints them primary while their (lower-specificity) text colour stays, yielding unreadable fg/bg pairs. */ html[data-glass="on"] .fitness-exercise-save-action { --glass-btn-tint: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } html[data-glass="on"] .fitness-exercise-delete-action { --glass-btn-tint: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } /* "Training abschliessen": eigene Tertiaer-Farbe, klar abgesetzt vom Rest. */ html[data-glass="on"] .fitness-finish-button { --glass-btn-tint: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); } /* "Verwerfen": neutrale Flaeche statt Primary-Tint, Fehler-roter Text bleibt lesbar. */ html[data-glass="on"] .fitness-upload-clear { --glass-btn-tint: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-error); border-color: color-mix(in srgb, var(--md-sys-color-error) 40%, transparent); } /* Destruktive Bestaetigung (Loeschen) im In-App-Dialog. */ html[data-glass="on"] .fitness-confirm-danger { --glass-btn-tint: var(--md-sys-color-error); color: var(--md-sys-color-on-error); } html[data-glass="on"] .m3-button:active, html[data-glass="on"] .m3-button-filled:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .26), 0 1px 2px rgba(0, 0, 0, .20); } html[data-glass="on"] .m3-button:disabled, html[data-glass="on"] .m3-button-filled:disabled { background: color-mix(in srgb, var(--md-sys-color-surface-variant) 64%, transparent); color: var(--md-sys-color-on-surface-variant); border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen); filter: none; } /* Schwebendes Zahnrad: eigener frosted Glas-Chip (steht allein ueber dem Wallpaper, braucht darum eigene Flaeche). Primary-Container getoent. */ html[data-glass="on"] .profile-menu-trigger { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-primary-container) 52%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); /* Nur Top-Sheen + ein Hauch Lift — KEIN tiefer Schlagschatten, sonst pool't der unter den schwebenden Buttons zu einer sichtbaren "Schattenkante" (Joern). */ box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 3px rgba(0, 0, 0, .10); } html[data-glass="on"] .profile-menu-trigger:hover { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-primary-container) 66%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 2px 6px rgba(0, 0, 0, .14); } /* Select-Trigger (Zeitraum-Pill + In-Card-Selects): exakt das .chat-glass-Rezept — durchscheinende Surface + Blur + Top-Sheen. Layout (Radius/Padding) bleibt. */ html[data-glass="on"] .cs-trigger { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-high) 50%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 2px rgba(0, 0, 0, .10); } html[data-glass="on"] .cs-trigger:hover { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-high) 64%, transparent); } /* Schwebende Zeitraum-Pill: gleicher leichter Lift wie das Zahnrad, kein tiefer Schlagschatten (vermeidet die "Schattenkante" unter den schwebenden Buttons). */ html[data-glass="on"] .cs-pill .cs-trigger { box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 3px rgba(0, 0, 0, .10); } /* Schlichte Icon-Buttons bleiben transparent wie die Chat-Pill-Actions; nur der Hover wird weicher (durchscheinender Tint statt solider Surface-Blob). */ html[data-glass="on"] .m3-button-icon:hover, html[data-glass="on"] .m3-button-icon-small:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent); } /* =========================================================================== * Unterseiten als Glas-Szene — die Vollbild-Overlays "Modell konfigurieren" * und "Prompt bearbeiten" (#as-overlay-root, aus agent-settings.js). Statt * flacher Surface: eigenes Wallpaper + frosted Panels, identisches Rezept wie * der Rest der App. Der flache Fallback fuer "?glass=0" lebt in agent-settings.js. * ========================================================================= */ html[data-glass="on"] #as-overlay-root { background: transparent; } /* Eigenes Wallpaper (erbt --page-wall-a/b der aktuellen View -> Overlay-Ton passt zur Seite, von der es geoeffnet wurde). Gleiche 3 Ebenen wie #main-wrapper. */ html[data-glass="on"] #as-overlay-root .as-overlay { background: radial-gradient(85% 60% at 90% 2%, color-mix(in srgb, var(--page-wall-a) var(--glass-wall-primary), transparent) 0%, transparent 58%), radial-gradient(95% 70% at 0% 100%, color-mix(in srgb, var(--page-wall-b) var(--glass-wall-tertiary), transparent) 0%, transparent 64%), linear-gradient(160deg, color-mix(in srgb, var(--page-wall-a) var(--glass-wall-line-a), var(--md-sys-color-surface)), color-mix(in srgb, var(--page-wall-b) var(--glass-wall-line-b), var(--md-sys-color-surface))); } /* Trenner als durchscheinende Glas-Hairlines */ html[data-glass="on"] #as-overlay-root .as-header, html[data-glass="on"] #as-overlay-root .as-agent-pills, html[data-glass="on"] #as-overlay-root .as-prompt-tabs { border-bottom-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); } html[data-glass="on"] #as-overlay-root .as-footer { border-top-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); } /* Agent-Pills durchscheinend + frosted; Active behaelt Secondary-Container. */ html[data-glass="on"] #as-overlay-root .as-agent-pill { background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat)); backdrop-filter: blur(14px) saturate(var(--glass-sat)); border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); } html[data-glass="on"] #as-overlay-root .as-agent-pill:hover { background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 48%, transparent); } html[data-glass="on"] #as-overlay-root .as-agent-pill.active { background: color-mix(in srgb, var(--md-sys-color-secondary-container) 82%, transparent); } html[data-glass="on"] #as-overlay-root .as-prompt-tab.active { background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 60%, transparent); } /* Modell-Karten als Glas (Karten-Rezept). */ html[data-glass="on"] #as-overlay-root .as-model { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-surface-container-low) var(--glass-card-base), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 45%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen), 0 1px 2px rgba(0, 0, 0, .10), 0 8px 24px rgba(0, 0, 0, .16); } html[data-glass="on"] #as-overlay-root .as-model.active { background: linear-gradient(180deg, var(--glass-grad), transparent 55%), color-mix(in srgb, var(--md-sys-color-secondary-container) 82%, transparent); } /* Prompt-Textarea durchscheinend, damit das Glas durchtraegt. */ html[data-glass="on"] #as-overlay-root .as-prompt-body textarea { background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 62%, transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent); box-shadow: inset 0 1px 0 var(--glass-sheen); } /* Save-Button: gleiche glossy-Glas-Behandlung wie die Primaer-Buttons; Success/ Error behalten ihre soliden Feedback-Farben. */ html[data-glass="on"] #as-overlay-root .as-save-btn:not(.success):not(.error) { background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, color-mix(in srgb, var(--md-sys-color-primary) 84%, #fff), var(--md-sys-color-primary)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 1px 2px rgba(0, 0, 0, .18), 0 8px 22px color-mix(in srgb, var(--md-sys-color-primary) 42%, transparent); }