@layer surfaces {
  :where(.popover, .menu-popover) {
    box-sizing: border-box;
  }

  .popover,
  .menu-popover,
  .tooltip {
    color: var(--text);
    margin: 0;
    padding: var(--space-cluster);
    z-index: var(--z-popover);
  }

  .popover:not(:popover-open):not(.is-open),
  .menu-popover:not(:popover-open) { display: none; }

  .popover { inline-size: min(320px, calc(100vw - 32px)); }
  .menu-popover { inline-size: min(240px, calc(100vw - 32px)); }

  .popover-header {
    align-items: center;
    border-block-end: 1px solid color-mix(in srgb, var(--border) 54%, transparent);
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--space-cluster);
    padding-block-end: var(--space-related);
  }

  .popover-title {
    font-size: var(--ui-font-size);
    font-weight: 700;
    line-height: 1.25;
  }

  .popover-field { display: grid; gap: var(--space-related); margin-block-end: var(--space-cluster); }
  .popover-label { color: var(--text-muted); font-size: var(--ui-font-size); }
  .popover-section-label { border-block-start: 1px solid var(--border); color: var(--text); display: block; font-size: var(--ui-font-size); font-weight: var(--ui-font-weight-strong); margin-block-start: var(--space-related); padding-block-start: var(--space-related); }
  .popover-help-text { color: var(--text-muted); font-size: var(--ui-font-size); line-height: 1.4; margin: 0; }
  .popover-input { inline-size: 100%; }

  .popover-actions {
    align-items: center;
    border-block-start: 1px solid var(--panel-row-border);
    display: flex;
    gap: var(--space-related);
    justify-content: flex-end;
    margin-block-start: var(--space-cluster);
    padding-block-start: var(--space-related);
  }

  .popover-icon-button { inline-size: var(--control-height); padding: 0; }

  .menu-popover [role="menuitem"],
  .menu-popover button,
  .menu-popover a {
    border-radius: var(--shape-panel);
    min-block-size: var(--control-block-size);
  }

  .menu-popover [role="menuitem"]:focus-visible,
  .menu-popover button:focus-visible,
  .menu-popover a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
  }

  .tooltip {
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--shape-panel);
    display: none;
    font-size: var(--ui-font-size);
    gap: var(--space-related);
    max-inline-size: 240px;
    pointer-events: none;
    position: fixed;
  }

  .tooltip.is-visible { display: flex; }
  .tooltip-shortcut { color: var(--text-muted); }

  .local-state-launcher {
    bottom: calc(var(--app-safe-bottom) + var(--space-related));
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-strong);
    left: calc(var(--app-safe-left) + var(--space-related));
    max-inline-size: min(220px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 32px));
    overflow: hidden;
    position: fixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: var(--z-tip);
  }

  .local-state-launcher[data-switcher-open="true"] {
    opacity: 0;
    pointer-events: none;
  }

  html[data-anchored-editing-surface-open="true"] .local-state-launcher {
    opacity: 0;
    pointer-events: none;
  }

  .local-state-launcher[data-surface-boundary="app-shell"] { bottom: auto; }

  .local-state-switcher {
    inset: auto auto calc(var(--app-safe-bottom) + var(--space-related) + var(--control-height) + var(--space-tight)) calc(var(--app-safe-left) + var(--space-related));
    max-inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .local-state-switcher[data-surface-boundary="app-shell"] { inset: auto; }

  .local-state-switcher[data-surface-placement="mobile-sheet"] {
    border-radius: var(--shape-panel);
    inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 16px);
    padding: var(--space-cluster);
  }

  .local-state-grid { display: grid; gap: var(--space-related); }


  @media (max-width: 760px) {
    .local-state-switcher {
      box-shadow: none;
      font-size: var(--ui-font-size);
    }

    .local-state-switcher .popover-actions {
      align-items: stretch;
      flex-wrap: wrap;
    }

    .local-state-switcher .popover-actions > button {
      flex: 1 1 calc(50% - var(--space-related));
      min-inline-size: min(100%, 132px);
    }
  }
}

@layer components {
  :where(.popover, .menu-popover):popover-open {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) backwards;
    transform-origin: top center;
  }


  .tooltip.is-visible {
    animation: compose-surface-reveal var(--motion-duration-micro) var(--motion-ease-out) backwards;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.popover, .menu-popover):popover-open,
    .tooltip.is-visible { animation-duration: var(--motion-duration-reduced); }
  }

}

@layer overrides {
  /* The local preview launcher is development chrome. It must never cover a
     focused compact composer or the software-keyboard editing area. */
  :root[data-keyboard-visible="true"] .local-state-launcher,
  :root[data-sidebar-mode="compact"]:has(.sidebar-footer-composer-host.is-footer-composer-mode) .local-state-launcher {
    opacity: 0;
    pointer-events: none;
  }
}