.history-actions {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.history-actions .icon-button {
  flex: 0 0 33px;
  width: 33px;
  min-width: 33px;
  height: 33px;
  min-height: 33px;
}

.history-table td:last-child {
  position: relative;
  overflow: visible;
}

.history-output-menu[open] {
  position: relative;
  z-index: 20;
}

.history-output-menu .action-menu {
  z-index: 30;
}

/* Table cells otherwise paint in row order, which allowed later-row action
   buttons to sit on top of an open menu. Establish an explicit layer order. */
.history-table tbody:has(.history-output-menu[open]) td {
  position: relative;
  z-index: 0;
}

.history-table tbody:has(.history-output-menu[open]) tr:has(.history-output-menu[open]) td:last-child {
  z-index: 40;
}

/* Collapsed navigation labels: a compact, accessible tooltip on hover/focus. */
@media (width >= 821px) {
  .sidebar.is-collapsed {
    overflow: visible;
  }

  .sidebar.is-collapsed nav button {
    overflow: visible;
  }

  .sidebar.is-collapsed nav button::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 80;
    transform: translate(-6px, -50%);
    min-width: max-content;
    max-width: 190px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 8px 22px oklch(0% 0 0 / .18);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms var(--ease-fluid), transform 180ms var(--ease-fluid);
  }

  .sidebar.is-collapsed nav button:hover::after,
  .sidebar.is-collapsed nav button:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar.is-collapsed nav button::after {
    transition: none;
  }
}