@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-clearance: max(var(--app-safe-bottom), var(--floating-toolbar-gap));
    --floating-toolbar-bottom: calc(var(--floating-toolbar-bottom-clearance) + var(--floating-toolbar-keyboard-offset));
    --floating-toolbar-mobile-edge-gap: max(var(--space-cluster), var(--app-safe-bottom));
    --floating-toolbar-mobile-top: max(
      calc(var(--app-visual-viewport-offset-top) + var(--space-related)),
      calc(var(--app-visual-viewport-bottom-edge) - var(--floating-toolbar-measured-block-size) - var(--floating-toolbar-mobile-edge-gap))
    );
    --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-measured-block-size: var(--floating-toolbar-block-size);
    --toolbar-document-clearance: clamp(56px, 8vh, 88px);
    --floating-toolbar-reserve: calc(var(--floating-toolbar-measured-block-size) + var(--floating-toolbar-gap) + var(--floating-toolbar-keyboard-offset) + var(--app-safe-bottom) + var(--toolbar-document-clearance));
  }

  #toolbar-row,
  .toolbar {
    align-items: center;
    background: var(--surface-floating);
    block-size: var(--floating-toolbar-block-size);
    border: 1px solid var(--surface-border-strong);
    border-radius: var(--shape-card);
    display: flex;
    inline-size: fit-content;
    justify-content: flex-start;
    max-inline-size: var(--floating-toolbar-max-inline);
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
    inset-block-end: var(--floating-toolbar-bottom);
    left: 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%);
    transition:
      left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      max-inline-size var(--motion-duration-panel-sheet) var(--motion-ease-emphasized),
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out);
    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: 0;
    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-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 {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--floating-chrome-control-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m3 4.5 3 3 3-3' stroke='%23706B63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    block-size: var(--toolbar-action-target);
    border: 1px solid var(--floating-chrome-control-border);
    border-radius: var(--floating-chrome-control-radius);
    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) calc(var(--toolbar-select-padding-inline) + 18px);
    text-align: start;
    touch-action: manipulation;
  }

  :root[dir="rtl"] .toolbar-select {
    background-position: left 8px center;
    padding-inline: calc(var(--toolbar-select-padding-inline) + 18px) var(--toolbar-select-padding-inline);
  }

  .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: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: 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;
      --floating-toolbar-reserve: calc(var(--floating-toolbar-measured-block-size) + var(--floating-toolbar-keyboard-offset) + var(--floating-toolbar-mobile-edge-gap) + var(--toolbar-document-clearance));
    }

    :root[data-keyboard-visible="true"] {
      --floating-toolbar-mobile-edge-gap: var(--space-cluster);
    }

    #toolbar-row,
    .toolbar {
      inset-block-end: auto;
      inset-block-start: var(--floating-toolbar-mobile-top);
      left: calc(var(--app-visual-viewport-center-inline) + var(--sidebar-available-center-offset, 0px));
    }
  }

  @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-cluster);
      --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);
      --toolbar-document-clearance: 28px;
      --floating-toolbar-block-size: var(--topbar-floating-chrome-plate-block-size, calc(var(--topbar-action-target, 36px) + (2 * var(--toolbar-plate-padding))));
    }

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

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

  @media (prefers-reduced-motion: reduce) {
    #toolbar-row,
    .toolbar,
    .toolbar-divider {
      transition-duration: var(--motion-duration-reduced);
    }
  }
}

/* Pass 3: clearer toolbar hierarchy and focused secondary formatting menu. */



@layer surfaces {
  /* Toolbar interaction states mirror the sidebar topbar controls. Hover stays
     neutral; a genuinely active formatting control uses the current opaque
     accent, concentrating colour into a small, high-confidence state. */
  :where(#toolbar-row, .toolbar) {
    --toolbar-control-hover: var(--fill-muted);
    --toolbar-control-border-hover: var(--control-border-hover);
    --toolbar-active-surface: var(--floating-chrome-control-bg-active);
    --toolbar-active-border: var(--floating-chrome-control-border-active);
    --toolbar-active-color: var(--floating-chrome-control-color-active);
  }

  #toolbar-row,
  .toolbar {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--floating-chrome-plate-bg);
    border-color: var(--floating-chrome-plate-border);
    color: var(--floating-chrome-control-color);
    color-scheme: light;
  }

  :where(#toolbar-row, .toolbar) .toolbar-button:hover,
  :where(#toolbar-row, .toolbar) .toolbar-button:focus-visible,
  :where(#toolbar-row, .toolbar) .toolbar-select:hover,
  :where(#toolbar-row, .toolbar) .toolbar-select:focus-visible {
    background-color: var(--toolbar-control-hover);
    border-color: var(--toolbar-control-border-hover);
    color: var(--text);
  }

  :where(#toolbar-row, .toolbar) .toolbar-button[aria-pressed="true"],
  :where(#toolbar-row, .toolbar) .toolbar-button.is-active {
    background: var(--toolbar-active-surface);
    border-color: var(--toolbar-active-border);
    box-shadow: var(--accent-solid-shadow);
    color: var(--toolbar-active-color);
  }

  :where(#toolbar-row, .toolbar) .toolbar-danger-button {
    color: var(--danger);
  }

  :where(#toolbar-row, .toolbar) .toolbar-danger-button:hover,
  :where(#toolbar-row, .toolbar) .toolbar-danger-button:focus-visible {
    background: var(--danger-surface-hover);
    border-color: var(--danger);
    color: var(--danger);
  }

  :where(#toolbar-row, .toolbar) .toolbar-danger-button[aria-pressed="true"],
  :where(#toolbar-row, .toolbar) .toolbar-danger-button.is-active {
    background: var(--danger-surface);
    border-color: var(--danger);
    color: var(--danger);
  }

  @media (forced-colors: active) {
    #toolbar-row,
    .toolbar {
      background: Canvas;
      border-color: CanvasText;
      color: CanvasText;
    }

    :where(#toolbar-row, .toolbar) .toolbar-button,
    :where(#toolbar-row, .toolbar) .toolbar-select {
      color: ButtonText;
    }

    :where(#toolbar-row, .toolbar) .toolbar-select {
      -webkit-appearance: auto;
      appearance: auto;
      background-image: none;
    }

    :where(#toolbar-row, .toolbar) .toolbar-button[aria-pressed="true"],
    :where(#toolbar-row, .toolbar) .toolbar-button.is-active {
      background: Highlight;
      border-color: Highlight;
      color: HighlightText;
    }
  }
}