@layer surfaces {
  :root {
    --floating-toolbar-gap: var(--space-cluster);
    --floating-toolbar-inline-margin: clamp(var(--space-related), 2vw, var(--space-section));
    --floating-toolbar-full-command-inline: 1240px;
    --floating-toolbar-max-inline: min(var(--floating-toolbar-full-command-inline), calc(100vw - (2 * var(--floating-toolbar-inline-margin)) - var(--app-safe-left) - var(--app-safe-right) - var(--sidebar-occupied-inline-start, 0px) - var(--sidebar-occupied-inline-end, 0px)));
    --floating-toolbar-keyboard-offset: max(var(--visual-keyboard-inset, 0px), env(keyboard-inset-height, 0px));
    --floating-toolbar-bottom: calc(var(--app-safe-bottom) + var(--floating-toolbar-gap) + var(--floating-toolbar-keyboard-offset));
    --toolbar-plate-padding: var(--floating-chrome-plate-padding);
    --toolbar-control-gap: var(--floating-chrome-control-gap);
    --toolbar-action-target: var(--topbar-action-target, 36px);
    --toolbar-block-select-inline-size: 120px;
    --toolbar-align-select-inline-size: 88px;
    --toolbar-select-padding-inline: var(--space-related);
    --toolbar-divider-margin-inline: var(--space-tight);
    --floating-toolbar-block-size: var(--topbar-floating-chrome-plate-block-size, calc(var(--topbar-action-target, 36px) + (2 * var(--toolbar-plate-padding))));
    --floating-toolbar-reserve: calc(var(--floating-toolbar-block-size) + var(--floating-toolbar-gap) + var(--app-safe-bottom) + 32px);
  }

  #toolbar-row,
  .toolbar {
    align-items: center;
    background: var(--floating-chrome-plate-bg);
    block-size: var(--floating-toolbar-block-size);
    border: 1px solid var(--floating-chrome-plate-border);
    border-radius: var(--floating-chrome-plate-radius);
    display: flex;
    inline-size: fit-content;
    max-inline-size: var(--floating-toolbar-max-inline);
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    inset-block-end: var(--floating-toolbar-bottom);
    inset-inline-start: calc(var(--app-safe-left) + 50% + var(--sidebar-available-center-offset, 0px));
    padding: var(--toolbar-plate-padding);
    position: fixed;
    scrollbar-width: none;
    transform: translateX(-50%) translateZ(0);
    transition: inset-inline-start var(--motion-duration-panel-sheet) var(--motion-ease-emphasized), max-inline-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
    z-index: var(--z-toolbar);
  }

  #toolbar-row::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar { display: none; }

  .toolbar-inner,
  .toolbar-group,
  .toolbar-button {
    align-items: center;
    display: flex;
  }

  .toolbar-inner {
    align-items: center;
    block-size: 100%;
    display: flex;
    flex: 0 0 max-content;
    gap: var(--toolbar-control-gap);
    inline-size: max-content;
    justify-content: flex-start;
    max-inline-size: none;
    min-inline-size: max-content;
    overflow: visible;
    padding: 0;
  }
  .toolbar-group {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--floating-chrome-plate-radius);
    flex: 0 0 auto;
    gap: var(--toolbar-control-gap);
    padding: 0;
  }

  .toolbar-divider {
    background: color-mix(in srgb, var(--border) 54%, transparent);
    block-size: max(18px, calc(var(--toolbar-action-target) - 22px));
    flex: 0 0 auto;
    inline-size: 1px;
    margin-inline: var(--toolbar-divider-margin-inline);
    opacity: .82;
    transition:
      block-size var(--motion-duration-micro) var(--motion-ease-standard),
      inline-size var(--motion-duration-micro) var(--motion-ease-standard),
      margin-inline var(--motion-duration-micro) var(--motion-ease-standard),
      opacity var(--motion-duration-micro) var(--motion-ease-standard);
  }

  .toolbar-review-divider.is-context-hidden {
    inline-size: 0;
    margin-inline: 0;
    opacity: 0;
  }

  .toolbar-button {
    --floating-chrome-control-size: var(--toolbar-action-target);
    gap: 6px;
  }

  .toolbar-button:disabled,
  .toolbar-select:disabled { color: var(--text-disabled); cursor: not-allowed; }

  .toolbar-text-button { font-size: var(--ui-font-size); }
  .toolbar-danger-button { color: var(--danger); }

  .toolbar-select {
    background-color: var(--floating-chrome-control-bg);
    block-size: var(--toolbar-action-target);
    border: 1px solid var(--floating-chrome-control-border);
    border-radius: var(--shape-control);
    color: var(--floating-chrome-control-color);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    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(--toolbar-action-target);
    padding-block: 0;
    padding-inline: var(--toolbar-select-padding-inline);
    text-align: start;
    touch-action: manipulation;
  }

  .toolbar-select:hover,
  .toolbar-select:focus-visible {
    background-color: var(--floating-chrome-control-bg-hover);
    border-color: var(--floating-chrome-control-border-hover);
    color: var(--floating-chrome-control-color-active);
  }

  .toolbar-select:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring-shadow), var(--elevation-control);
  }

  .toolbar-button.is-context-hidden {
    border-inline-width: 0;
    flex-basis: 0;
    inline-size: 0;
    min-block-size: var(--toolbar-action-target);
    min-inline-size: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .toolbar-block-select { inline-size: var(--toolbar-block-select-inline-size); }
  .toolbar-align-select { inline-size: var(--toolbar-align-select-inline-size); }


  #toolbar-row[data-toolbar-fit="compact"],
  .toolbar[data-toolbar-fit="compact"] {
    --toolbar-action-target: 34px;
    --toolbar-block-select-inline-size: 112px;
    --toolbar-align-select-inline-size: 80px;
    --toolbar-select-padding-inline: 6px;
    --toolbar-control-gap: 1px;
    --toolbar-divider-margin-inline: 2px;
  }

  #toolbar-row[data-toolbar-fit="dense"],
  .toolbar[data-toolbar-fit="dense"] {
    --toolbar-action-target: 32px;
    --toolbar-block-select-inline-size: 104px;
    --toolbar-align-select-inline-size: 74px;
    --toolbar-select-padding-inline: 5px;
    --toolbar-control-gap: 1px;
    --toolbar-divider-margin-inline: 1px;
  }

  #toolbar-row[data-toolbar-fit="iconic"],
  .toolbar[data-toolbar-fit="iconic"] {
    --toolbar-action-target: 30px;
    --toolbar-block-select-inline-size: 100px;
    --toolbar-align-select-inline-size: 70px;
    --toolbar-select-padding-inline: 4px;
    --toolbar-control-gap: 0px;
    --toolbar-divider-margin-inline: 0px;
  }

  @media (pointer: coarse) and (max-width: 1280px) {
    :root {
      --toolbar-action-target: 34px;
      --toolbar-block-select-inline-size: 112px;
      --toolbar-align-select-inline-size: 80px;
      --toolbar-select-padding-inline: 6px;
      --toolbar-control-gap: 1px;
      --toolbar-divider-margin-inline: 2px;
    }
  }

  @media (max-width: 1180px) {
    :root {
      --floating-toolbar-inline-margin: max(var(--space-related), var(--app-safe-left));
      --toolbar-action-target: 34px;
      --toolbar-block-select-inline-size: 112px;
      --toolbar-align-select-inline-size: 80px;
      --toolbar-select-padding-inline: 6px;
      --toolbar-control-gap: 1px;
      --toolbar-divider-margin-inline: 2px;
    }
  }

  @media (max-width: 1060px) {
    :root {
      --floating-toolbar-inline-margin: max(6px, var(--app-safe-left));
      --toolbar-action-target: 32px;
      --toolbar-block-select-inline-size: 104px;
      --toolbar-align-select-inline-size: 74px;
      --toolbar-select-padding-inline: 5px;
      --toolbar-control-gap: 1px;
      --toolbar-divider-margin-inline: 1px;
    }
  }
  @media (max-width: 620px) {
    :root {
      --toolbar-block-select-inline-size: 100px;
      --toolbar-align-select-inline-size: 70px;
    }
  }

  @media (max-width: 599px), (max-width: 767px) and (pointer: coarse) {
    :root {
      --floating-toolbar-gap: var(--space-related);
      --floating-toolbar-inline-margin: max(var(--space-related), var(--app-safe-left));
      --toolbar-action-target: var(--topbar-action-target, var(--touch-target));
      --toolbar-block-select-inline-size: 116px;
      --toolbar-align-select-inline-size: 82px;
      --toolbar-select-padding-inline: var(--space-related);
      --toolbar-control-gap: var(--floating-chrome-control-gap);
      --toolbar-divider-margin-inline: var(--space-tight);
      --floating-toolbar-reserve: calc(var(--floating-toolbar-block-size) + var(--app-safe-bottom) + var(--floating-toolbar-keyboard-offset) + 28px);
    }

    #toolbar-row,
    .toolbar {
      border-radius: var(--floating-chrome-plate-radius);
      inline-size: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - (2 * var(--space-related)));
      max-inline-size: none;
    }

    .toolbar-inner {
      flex: 0 0 max-content;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toolbar-divider,
    .toolbar-button.is-context-hidden {
      transition-duration: var(--motion-duration-reduced);
    }
  }
}