/* Inline-block wrapper so the trigger button sits naturally in the
 * sidebar footer's flex row. The menu itself is rendered through a
 * portal (see HelpMenu.tsx) and is NOT positioned relative to this
 * element — it lives at document.body level with position: fixed. */
.helpAnchor {
  display: inline-flex;
}

.menu {
  position: fixed;
  /* Popover layer — above sidebar/chat content, below `Modal.module.css`
   * (z-index: 100) so any modal correctly overlays the menu if both
   * happen to be open. Matches `ContextPopover` / `ReasoningPill`'s
   * z-index 40-50 convention. The portal is what escapes the sidebar's
   * `overflow: hidden` clipping; z-index doesn't fix that. */
  z-index: 50;
  min-width: 240px;
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  animation: helpMenuIn 140ms var(--ease-out-quick);
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--body-size);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.item:hover,
.item:focus-visible {
  background: var(--hover-bg);
  outline: none;
}

.item:disabled {
  opacity: 0.5;
  cursor: default;
}

.itemLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.itemLabel {
  white-space: nowrap;
}

.itemIcon {
  color: var(--text-dim);
  flex-shrink: 0;
}

.externalIcon {
  color: var(--text-dim);
  flex-shrink: 0;
}

.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.keycap {
  color: var(--text-dim);
  font-size: var(--body-size);
}

.divider {
  height: 1px;
  background: var(--divider);
  margin: 4px 6px;
}

.versionFooter {
  padding: 8px 10px 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  text-align: left;
}

@keyframes helpMenuIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
