chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,7 +47,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
+import {AdoptedStyleSheetSetTreeElement, AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
@@ -917,15 +917,21 @@ export class ElementsTreeOutline extends
   }
 
   highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
-    const parentNode = !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
+    const parentDOMNode =
+        !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
         this.rootElement() :
         this.createTreeElementFor(adoptedStyleSheet.parent);
-    if (!parentNode) {
+    if (!parentDOMNode) {
+      return;
+    }
+    const parentNode = parentDOMNode.firstChild();
+    if (!(parentNode && parentNode instanceof AdoptedStyleSheetSetTreeElement)) {
       return;
     }
 
     for (const child of parentNode.children()) {
       if (child instanceof AdoptedStyleSheetTreeElement && child.adoptedStyleSheet === adoptedStyleSheet) {
+        parentNode.expand();
         child.highlight();
         return;
       }
@@ -980,8 +986,8 @@ export class ElementsTreeOutline extends
     this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
   }
 
-  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): ElementsTreeElement|null {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]): ElementsTreeElement|null {
+    if (node instanceof Array) {
       return null;
     }
     let treeElement = this.lookUpTreeElement(node);
@@ -1768,10 +1774,10 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
       UI.TreeOutline.TreeElement {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
-      return new AdoptedStyleSheetTreeElement(node);
+    if (node instanceof Array) {
+      return new AdoptedStyleSheetSetTreeElement(node);
     }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
@@ -1800,8 +1806,12 @@ export class ElementsTreeOutline extends
     return treeElement.childAt(index) as ElementsTreeElement;
   }
 
-  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet> {
-    let visibleChildren = [...node.adoptedStyleSheetsForNode, ...ElementsTreeElement.visibleShadowRoots(node)];
+  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> {
+    const visibleChildren: Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> = [];
+    if (node.adoptedStyleSheetsForNode.length) {
+      visibleChildren.push(node.adoptedStyleSheetsForNode);
+    }
+    visibleChildren.push(...ElementsTreeElement.visibleShadowRoots(node));
 
     const contentDocument = node.contentDocument();
     if (contentDocument) {
@@ -1838,7 +1848,7 @@ export class ElementsTreeOutline extends
       if (!this.showHTMLCommentsSetting.get()) {
         children = children.filter(n => n.nodeType() !== Node.COMMENT_NODE);
       }
-      visibleChildren = visibleChildren.concat(children);
+      visibleChildren.push(...children);
     }
 
     const afterPseudoElement = node.afterPseudoElement();
@@ -1927,7 +1937,7 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet,
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
       index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
@@ -1957,12 +1967,12 @@ export class ElementsTreeOutline extends
 
     const node = treeElement.node();
     const visibleChildren = this.visibleChildren(node);
-    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet>(visibleChildren);
+    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]>(visibleChildren);
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements =
-        new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<
+        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

package/front_end/panels/elements/LayoutPane.ts

@@ -228,27 +228,26 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
-  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item().track({resize: true})}>
+          jslog=${VisualLogging.item()}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
+          jslog=${VisualLogging.toggle().track({
+    click: true
+  })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-                nodeId: element.domId,
-                nodeTitle: element.name,
-                nodeClasses: element.domClasses
-              }}>
-            </devtools-node-text>
+    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
+  }
+  }></devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -33,11 +33,11 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
@@ -190,7 +190,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   private isEditingMetrics?: boolean;
   private view: View;
 
-  constructor(computedStyleModel: ComputedStyleModel, view = DEFAULT_VIEW) {
+  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view = DEFAULT_VIEW) {
     super(computedStyleModel, {jslog: `${VisualLogging.pane('styles-metrics')}`});
     this.registerRequiredCSS(metricsSidebarPaneStyles);
 

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -4,10 +4,10 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 
-import {type ComputedStyleModel, Events as ComputedStyleModelEvents} from './ComputedStyleModel.js';
 import platformFontsWidgetStyles from './platformFontsWidget.css.js';
 
 const UIStrings = {
@@ -78,22 +78,37 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class PlatformFontsWidget extends UI.Widget.VBox {
-  private readonly sharedModel: ComputedStyleModel;
   readonly #view: View;
+  #sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel|null = null;
 
-  constructor(sharedModel: ComputedStyleModel, view: View = DEFAULT_VIEW) {
-    super({useShadowDom: true});
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
+  }
+
+  get sharedModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel|null {
+    return this.#sharedModel;
+  }
+
+  set sharedModel(model: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
+    if (model !== this.sharedModel) {
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      this.sharedModel?.removeEventListener(
+          ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+      model.addEventListener(ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    }
 
-    this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.#sharedModel = model;
+    void this.requestUpdate();
   }
 
   override async performUpdate(): Promise<void> {
-    const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node;
+    const cssModel = this.#sharedModel?.cssModel();
+    const node = this.#sharedModel?.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/elements/PropertiesWidget.ts

@@ -189,14 +189,11 @@ export class PropertiesWidget extends UI.Widget.VBox {
       }
 
       const treeElement = this.treeOutline.rootElement();
-      let {properties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(object, true /* generatePreview */);
       treeElement.removeChildren();
-      if (properties === null) {
-        properties = [];
-      }
+      const root = new ObjectUI.ObjectPropertiesSection.ObjectTree(
+          object, ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED);
       ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, {properties: properties.map(p => new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(p))},
-          true /* skipProto */, true /* skipGettersAndSetters */);
+          treeElement, await root.populateChildrenIfNeeded(), true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
     this.#view(

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -43,6 +43,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
@@ -52,7 +53,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
 import * as ElementsComponents from './components/components.js';
-import type {ComputedStyleModel, CSSModelChangedEvent} from './ComputedStyleModel.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -204,7 +204,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
-  constructor(computedStyleModel: ComputedStyleModel) {
+  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
@@ -729,7 +729,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>): void {
+  override onCSSModelChanged(
+      event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>): void {
     const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
     if (edit) {
       for (const section of this.allSections()) {

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true, resize:true})}
+                    jslog=${VisualLogging.item().track({click:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -194,8 +194,7 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${
-        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/elements/elements.ts

@@ -4,7 +4,7 @@
 
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
-import './ComputedStyleModel.js';
+
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
@@ -34,7 +34,6 @@ import * as AccessibilityTreeView from './AccessibilityTreeView.js';
 import * as AdoptedStyleSheetTreeElement from './AdoptedStyleSheetTreeElement.js';
 import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
-import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
 import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
@@ -70,7 +69,6 @@ export {
   AdoptedStyleSheetTreeElement,
   ClassesPaneWidget,
   ColorSwatchPopoverIcon,
-  ComputedStyleModel,
   ComputedStyleWidget,
   CSSRuleValidator,
   CSSValueTraceView,

package/front_end/panels/greendev/GreenDevPanel.css

@@ -0,0 +1,282 @@
+/* eslint-disable color-named, no-duplicate-selectors */
+/* stylelint-disable plugin/use_theme_colors */
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:root {
+  --gemini-logo: url("data:image/svg+xml,%0A%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2065%2065%22%3E%3Cmask%20id%3D%22maskme%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2265%22%20height%3D%2265%22%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M32.447%200c.68%200%201.273.465%201.439%201.125a38.904%2038.904%200%20001.999%205.905c2.152%205%205.105%209.376%208.854%2013.125%203.751%203.75%208.126%206.703%2013.125%208.855a38.98%2038.98%200%20005.906%201.999c.66.166%201.124.758%201.124%201.438%200%20.68-.464%201.273-1.125%201.439a38.902%2038.902%200%2000-5.905%201.999c-5%202.152-9.375%205.105-13.125%208.854-3.749%203.751-6.702%208.126-8.854%2013.125a38.973%2038.973%200%2000-2%205.906%201.485%201.485%200%2001-1.438%201.124c-.68%200-1.272-.464-1.438-1.125a38.913%2038.913%200%2000-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973%2038.973%200%2000-5.905-2A1.485%201.485%200%20010%2032.448c0-.68.465-1.272%201.125-1.438a38.903%2038.903%200%20005.905-2c5-2.151%209.376-5.104%2013.125-8.854%203.75-3.749%206.703-8.125%208.855-13.125a38.972%2038.972%200%20001.999-5.905A1.485%201.485%200%200132.447%200z%22%20fill%3D%22%23000%22/%3E%3C/mask%3E%3Cg%20mask%3D%22url%28%23maskme%29%22%3E%3Cpath%20d%3D%22M32.447%200c25.437%200%2046.062%2020.625%2046.062%2046.062%200%2025.438-20.625%2046.063-46.062%2046.063-25.438%200-46.062-20.625-46.062-46.063C-13.615%2020.625%207.01%200%2032.447%200z%22%20fill%3D%22%231967D2%22/%3E%3Cpath%20d%3D%22M65%200v65H0V0h65z%22%20fill%3D%22%231967D2%22/%3E%3Cpath%20d%3D%22M63.79%2033.567L33.567%2063.79%201.21%2031.433%2031.433%201.21%2063.79%2033.567z%22%20fill%3D%22%23fff%22%20style%3D%22mix-blend-mode%3Asoft-light%22/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.green-dev-floaty-dialog {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  color: #333;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+
+/* Header extending upwards */
+.green-dev-floaty-dialog-header {
+  position: relative;
+  height: 70px;
+  margin-top: -20px;
+  background-color: #d3e3fd;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 34px 10px 11px;
+  box-sizing: border-box;
+}
+
+.green-dev-floaty-dialog-header-text {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.green-dev-floaty-dialog-close-button {
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");
+  background-size: cover;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Main content area of the white card */
+.green-dev-floaty-dialog-content {
+  flex-grow: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Important for flex-grow with overflow */
+}
+
+.green-dev-floaty-dialog-chat-container {
+  flex-grow: 1;
+  margin-bottom: 10px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.message {
+  padding: 8px 12px;
+  border-radius: 12px;
+  max-width: 85%;
+  overflow-wrap: break-word;
+  line-height: 1.4;
+  white-space: pre-wrap; /* Preserve newlines */
+}
+
+.user-message {
+  align-self: flex-end;
+  background-color: #d3e3fd;
+  color: #0b57d0;
+  border-bottom-right-radius: 2px;
+}
+
+.ai-message {
+  align-self: flex-start;
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #e0e0e0;
+  border-bottom-left-radius: 2px;
+}
+
+.message-details-toggle {
+  font-size: 11px;
+  color: #0b57d0;
+  cursor: pointer;
+  margin-top: 4px;
+  text-decoration: underline;
+}
+
+.message-details-toggle:hover {
+  color: #0842a0;
+}
+
+.message-details {
+  font-size: 11px;
+  color: #666;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+  font-family: monospace;
+}
+
+.thought, .action {
+  margin-bottom: 6px;
+  white-space: pre-wrap;
+}
+
+.thought {
+  font-style: italic;
+}
+
+.green-dev-floaty-dialog-top-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px; /* Space between top row and blue card */
+}
+
+.green-dev-floaty-dialog-gemini-icon {
+  width: 24px;
+  height: 24px;
+  background-image: var(--gemini-logo);
+  background-size: cover;
+  margin-right: 10px;
+}
+
+.green-dev-floaty-dialog-checkmark-icon {
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234CAF50' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
+  background-size: cover;
+  margin-right: 5px;
+}
+
+.green-dev-floaty-dialog-context-text {
+  font-weight: bold;
+}
+
+/* Blue card at the bottom */
+.green-dev-floaty-dialog-blue-card {
+  position: relative;
+  background-color: #edf2fa; /* Light blue */
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid #d3e3fd;
+}
+
+.green-dev-floaty-dialog-node-description {
+  font-size: 11px;
+  font-family: monospace;
+  color: #0b57d0;
+  background-color: #d3e3fd;
+  padding: 2px 8px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  align-self: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.green-dev-floaty-dialog-text-field {
+  flex-grow: 1;
+  background-color: #fff;
+  border: 1px solid #a7d9f0;
+  border-radius: 20px; /* Pill shape */
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #333;
+  margin-right: 8px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.green-dev-floaty-dialog-text-field:focus {
+  border-color: #0b57d0;
+}
+
+.green-dev-floaty-dialog-play-button {
+  width: 30px;
+  height: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231976D2' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
+  background-size: cover;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.green-dev-floaty-minimal {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  background-image: var(--gemini-logo);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 32px;
+  cursor: pointer;
+  pointer-events: all;
+  z-index: 1001;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
+  padding: 5px;
+}
+
+.green-dev-floaty-disclaimer {
+  font-size: 15px;
+  color: #666;
+  text-align: center;
+  margin-top: 8px;
+  position: relative; /* For tooltip positioning */
+}
+
+.disclaimer-link {
+  color: #666; /* Match text color */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.disclaimer-tooltip {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1000;
+  text-align: left;
+  font-size: 16px;
+  line-height: 1.4;
+  color: #333;
+  white-space: normal; /* Ensure text wraps */
+}
+
+.disclaimer-link:hover + .disclaimer-tooltip,
+.disclaimer-tooltip:hover {
+  display: block;
+}
+
+.learn-more-link {
+  color: #0b57d0;
+  text-decoration: none;
+}
+
+.learn-more-link:hover {
+  text-decoration: underline;
+}