@layer surfaces {
  :root {
    --floating-chrome-plate-bg: var(--surface-floating-chrome);
    --floating-chrome-plate-border: var(--surface-border);
    --floating-chrome-plate-padding: var(--space-tight);
    --floating-chrome-plate-block-size: calc(var(--floating-chrome-control-size) + (2 * var(--floating-chrome-plate-padding)));
    --floating-chrome-plate-radius: var(--shape-panel);
    --floating-chrome-control-gap: calc(var(--space-tight) / 2);
    --floating-chrome-control-radius: 8px;
    --floating-chrome-edge-control-radius: calc(var(--floating-chrome-plate-radius) - var(--floating-chrome-plate-padding) - 1px);
    --floating-chrome-control-size: 36px;
    --floating-chrome-control-bg: transparent;
    --floating-chrome-control-bg-hover: var(--control-surface-hover);
    --floating-chrome-control-bg-active: var(--control-surface-active);
    --floating-chrome-control-color: var(--text-sec);
    --floating-chrome-control-color-hover: var(--text);
    --floating-chrome-control-color-active: var(--control-active-foreground);
    --floating-chrome-control-border: transparent;
    --floating-chrome-control-border-hover: var(--control-border-hover);
    --floating-chrome-control-border-active: var(--control-border-active);
  }

  /* Shared surface and control primitives. These selectors deliberately use
     :where() so product surfaces keep layout and variant authority without
     specificity fights. */
  :where(
    .ui-surface-floating,
    .ui-surface-panel,
    .ui-surface-sheet,
    .popover,
    .menu-popover,
    .tooltip,
    .selection-inspector,
    .modal-surface,
    .compose-account-flow-surface,
    .notice,
    .toast,
    .update-notice
  ) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-panel);
    background: var(--surface-floating);
    border: 1px solid var(--surface-border);
    border-radius: var(--shape-panel);
    box-shadow: none;
  }



  .ui-surface-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--shape-card);
    box-shadow: none;
  }

  .ui-motion-reveal,
  .ui-motion-dismiss,
  .ui-motion-state-change {
    transition:
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out);
  }

  .ui-motion-reveal { animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards; }
  .ui-motion-dismiss { animation: compose-surface-dismiss var(--motion-duration-exit) var(--motion-ease-in) both; }
  .ui-motion-state-change { animation: compose-state-settle var(--motion-duration-state) var(--motion-ease-out) backwards; }

  @keyframes compose-surface-reveal {
    from { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-surface)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @keyframes compose-surface-dismiss {
    from { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
    to { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)); }
  }

  @keyframes compose-sheet-reveal {
    from { opacity: 0; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-sheet)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @keyframes compose-state-settle {
    from { opacity: .62; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-motion-reveal,
    .ui-motion-dismiss,
    .ui-motion-state-change {
      animation-duration: var(--motion-duration-reduced);
      transition-duration: var(--motion-duration-reduced);
      transform: var(--motion-transform-base, none);
    }
  }

  :where(
    .ui-notice,
    .notice,
    .toast,
    .update-notice
  ) {
    box-shadow: none;
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-account-flow-dialog .compose-account-flow-seat-controls button
  ) {
    align-items: center;
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    box-shadow: none;
    color: var(--text);
    display: inline-flex;
    font: inherit;
    gap: var(--space-related);
    justify-content: center;
    line-height: 1.2;
    min-block-size: var(--control-block-size);
    min-inline-size: var(--control-block-size);
    padding-inline: var(--space-related);
    text-align: center;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-account-flow-dialog .compose-account-flow-seat-controls button
  ):where(:hover, :focus-visible) {
    background: var(--control-surface-hover);
    border-color: var(--control-border-hover);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-account-flow-dialog .compose-account-flow-seat-controls button
  ):where(:active) {
    transform: scale(.985);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-account-flow-dialog .compose-account-flow-seat-controls button
  ):where(:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  :where(.ui-control-primary) {
    background: var(--accent-solid);
    border-color: var(--accent-border-strong);
    box-shadow: var(--accent-solid-shadow);
    color: var(--accent-solid-foreground);
    font-weight: var(--ui-font-weight-strong);
  }

  :where(.ui-control-primary):where(:hover, :focus-visible) {
    background: var(--accent-solid-hover);
    border-color: var(--accent-focus);
    color: var(--accent-solid-foreground);
  }

  :where(.ui-control-primary):where(:active) {
    background: var(--accent-solid-active);
    border-color: var(--accent-border-strong);
  }

  :where(.ui-control-active, .ui-control[aria-pressed="true"]) {
    background: var(--control-surface-active);
    border-color: var(--control-border-active);
    box-shadow: var(--accent-solid-shadow);
    color: var(--control-active-foreground);
    font-weight: var(--ui-font-weight-strong);
  }

  :where(.ui-control-active, .ui-control[aria-pressed="true"]):where(:hover, :focus-visible) {
    background: var(--control-surface-active-hover);
    border-color: var(--accent-focus);
    color: var(--control-active-foreground);
  }

  :where(.ui-control-danger,
          .popover-danger-button,
          .modal-danger-button) {
    background: var(--danger-surface);
    border-color: var(--danger-border);
    color: var(--danger);
  }

  :where(.ui-control-danger,
          .popover-danger-button,
          .modal-danger-button):where(:hover, :focus-visible) {
    background: var(--danger-surface-hover);
    border-color: var(--danger);
    color: var(--danger);
  }

  :where(
    .ui-field,
    .command-palette-input,
    .popover-input,
    .selection-inspector-input,
    .modal-text-input,
    .modal-textarea,
    .modal-select,
    .compose-account-flow-dialog .compose-account-flow-input
  ) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    min-block-size: var(--control-block-size);
    padding-inline: var(--space-cluster);
  }

  :where(
    .ui-field,
    .command-palette-input,
    .popover-input,
    .selection-inspector-input,
    .modal-text-input,
    .modal-textarea,
    .modal-select,
    .compose-account-flow-dialog .compose-account-flow-input
  ):where(:focus-visible) {
    background: var(--surface-field);
    border-color: var(--control-border-hover);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  @media (pointer: coarse) {
    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-account-flow-dialog .compose-account-flow-seat-controls button,
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-account-flow-dialog .compose-account-flow-input
    ) {
      min-block-size: var(--control-touch-target);
      min-inline-size: var(--control-touch-target);
    }
  }


  :where(.sidebar-dock, #toolbar-row, .toolbar) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-floating);
    border-color: var(--surface-border);
    border-radius: var(--floating-chrome-plate-radius);
    box-shadow: var(--elevation-floating);
  }


  .sidebar-dock {
    border-color: var(--floating-chrome-plate-border);
  }

  :where(.topbar-sidebar-group, .toolbar-inner) {
    gap: var(--floating-chrome-control-gap);
  }

  :where(#toolbar-row, .toolbar) {
    padding: var(--floating-chrome-plate-padding);
  }

  :where(.toolbar-select) {
    background-color: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--floating-chrome-control-radius);
    color: var(--text-sec);
    min-block-size: var(--control-block-size);
    padding-inline: var(--space-related);
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  :where(.toolbar-select:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  :where(.topbar-icon-button, .toolbar-button) {
    align-items: center;
    background: var(--floating-chrome-control-bg);
    border: 1px solid var(--floating-chrome-control-border);
    border-radius: var(--floating-chrome-control-radius);
    color: var(--floating-chrome-control-color);
    display: inline-flex;
    flex: 0 0 var(--floating-chrome-control-size);
    block-size: var(--floating-chrome-control-size);
    inline-size: var(--floating-chrome-control-size);
    justify-content: center;
    min-block-size: var(--floating-chrome-control-size);
    padding: 0;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  .topbar-icon-button { --floating-chrome-control-size: var(--topbar-action-target); }
  .toolbar-button { --floating-chrome-control-size: var(--toolbar-action-target); }

  /* Edge controls sit inside an 18px shell with a 4px inset. Their outward
     corners follow the shell's inner curve, while inward corners keep the
     crisper 8px control radius. This prevents hover and active surfaces from
     appearing sliced off by the toolbar or sidebar plate. */
  :where(.topbar-sidebar-group > .topbar-icon-button:first-child, #tb-undo) {
    border-start-start-radius: var(--floating-chrome-edge-control-radius);
    border-end-start-radius: var(--floating-chrome-edge-control-radius);
  }

  :where(.topbar-sidebar-group > .topbar-icon-button:last-child, #tb-suggest-change) {
    border-start-end-radius: var(--floating-chrome-edge-control-radius);
    border-end-end-radius: var(--floating-chrome-edge-control-radius);
  }

  :where(.topbar-icon-button:hover, .topbar-icon-button:focus-visible, .toolbar-button:hover, .toolbar-button:focus-visible) {
    background: var(--floating-chrome-control-bg-hover);
    border-color: var(--floating-chrome-control-border-hover);
    color: var(--floating-chrome-control-color-hover);
  }

  :where(.topbar-icon-button[aria-expanded="true"], .toolbar-button[aria-pressed="true"], .toolbar-button.is-active) {
    background: var(--floating-chrome-control-bg-active);
    border-color: var(--floating-chrome-control-border-active);
    box-shadow: var(--accent-solid-shadow);
    color: var(--floating-chrome-control-color-active);
  }

  :where(.topbar-icon-button:focus-visible, .toolbar-button:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  :where(.topbar-icon-button:active, .toolbar-button:active) {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }


  @keyframes floating-chrome-control-activate {
    0% { transform: translateY(0) scale(1); }
    36% { transform: translateY(1px) scale(var(--motion-scale-press)); }
    72% { transform: translateY(-1px) scale(1.018); }
    100% { transform: translateY(0) scale(1); }
  }

  :where(.topbar-icon-button, .toolbar-button).is-chrome-pressing {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }

  :where(.topbar-icon-button, .toolbar-button).is-chrome-activating {
    animation: floating-chrome-control-activate 190ms var(--motion-ease-emphasized) both;
  }


  @media (prefers-reduced-motion: reduce) {
    :where(.topbar-icon-button, .toolbar-button).is-chrome-pressing {
      transform: none;
    }

    :where(.topbar-icon-button, .toolbar-button).is-chrome-activating {
      animation: none;
    }
  }


  :where(.topbar-button-icon, .toolbar-button-icon) {
    block-size: 16px;
    inline-size: 16px;
  }

  @media (forced-colors: active) {
    :where(
      .ui-surface-floating,
      .ui-surface-panel,
      .ui-surface-sheet,
      .popover,
      .menu-popover,
        .tooltip,
      .selection-inspector,
      .modal-surface,
      .compose-account-flow-surface,
      .notice,
      .toast,
      .update-notice
    ) {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
      color: CanvasText;
    }

    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-account-flow-dialog .compose-account-flow-seat-controls button
    ) {
      background: ButtonFace;
      border-color: ButtonText;
      box-shadow: none;
      color: ButtonText;
    }

    :where(
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-account-flow-dialog .compose-account-flow-input
    ) {
      background: Field;
      border-color: FieldText;
      color: FieldText;
    }

    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-account-flow-dialog .compose-account-flow-seat-controls button,
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-account-flow-dialog .compose-account-flow-input
    ):where(:focus-visible) {
      box-shadow: none;
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }

}